:root{
  --bg:#070908;
  --panel:#0d1210;
  --panel-2:#111613;
  --orange:#e55d18;
  --orange-hi:#ff7a22;
  --cream:#f0e3cf;
  --tan:#d9c4a3;
  --muted:#a79c8d;
  --line:rgba(255,255,255,.10);
  --line-orange:rgba(229,93,24,.55);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--cream)}
body{
  font-family:"Inter",system-ui,sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(229,93,24,.06), transparent 28%),
    linear-gradient(180deg,#090c0a 0%,#070908 100%);
}

button,a{font:inherit}
button{color:inherit}

.preview-shell{
  position:relative;
  min-height:100vh;
  padding:42px 0 46px;
}

.preview-status{
  position:fixed;
  z-index:40;
  top:14px;
  right:18px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,10,9,.80);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,0,0,.26);
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.74rem;
  color:rgba(244,235,222,.76);
}
.preview-status strong{
  color:#f5e9d9;
  font-weight:700;
}
.preview-status__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange-hi);
  box-shadow:0 0 0 5px rgba(255,122,34,.09),0 0 18px rgba(255,122,34,.32);
}

.canvas-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:thin;
  scrollbar-color:#a74918 #0a0d0b;
}

.interactive-canvas{
  position:relative;
  width:100%;
  min-width:1000px;
  max-width:1920px;
  margin:0 auto;
  aspect-ratio:1672/941;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 28px 85px rgba(0,0,0,.34);
  background:#0a0d0b;
}

.concept-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
  filter:saturate(.97) contrast(1.01) brightness(.94);
}

.hotspot{
  position:absolute;
  z-index:8;
  appearance:none;
  border:1px solid transparent;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  outline:none;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.hotspot::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  border:1px solid rgba(255,122,34,.94);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(0,0,0,.48),
    0 0 24px rgba(229,93,24,.18);
  background:linear-gradient(180deg,rgba(229,93,24,.080),rgba(229,93,24,.015));
  transition:opacity .18s ease;
}
.hotspot:hover::after,
.hotspot:focus-visible::after{
  opacity:1;
}
.hotspot:focus-visible{
  border-color:rgba(255,122,34,.85);
}
.hotspot:active{
  transform:scale(.995);
}

/* exact interaction zones, expressed as percentages of approved artwork */
.hs-hunts{left:20.4%;top:1.2%;width:5.2%;height:4.8%}
.hs-elk-nav{left:26.1%;top:1.2%;width:7.5%;height:4.8%}
.hs-waterfowl-nav{left:33.7%;top:1.2%;width:7.6%;height:4.8%}
.hs-predator-nav{left:41.2%;top:1.2%;width:6.2%;height:4.8%}
.hs-ventures-nav{left:47.2%;top:1.2%;width:6.8%;height:4.8%}
.hs-about-nav{left:54.2%;top:1.2%;width:5.3%;height:4.8%}
.hs-contact-nav{left:60.0%;top:1.2%;width:5.4%;height:4.8%}
.hs-plan-nav{left:66.4%;top:.8%;width:13.7%;height:5.6%}

.hs-plan-hero{left:39.4%;top:32.0%;width:10.9%;height:5.3%}
.hs-explore-hero{left:50.4%;top:32.0%;width:11.1%;height:5.3%}

.hs-elk{left:4.6%;top:45.3%;width:11.5%;height:6.1%}
.hs-whitetail{left:16.4%;top:45.3%;width:11.3%;height:6.1%}
.hs-turkey{left:28.0%;top:45.3%;width:10.2%;height:6.1%}
.hs-waterfowl{left:38.4%;top:45.3%;width:11.6%;height:6.1%}
.hs-predator{left:50.2%;top:45.3%;width:11.1%;height:6.1%}
.hs-curated{left:61.5%;top:45.3%;width:15.4%;height:6.1%}

.hs-firstlight{left:1.0%;top:56.3%;width:19.0%;height:23.5%}
.hs-trophyland{left:20.7%;top:56.3%;width:19.1%;height:23.5%}
.hs-transformer{left:40.5%;top:56.3%;width:19.0%;height:23.5%}
.hs-camp{left:60.2%;top:56.3%;width:19.0%;height:23.5%}
.hs-gunlock{left:79.9%;top:56.3%;width:19.0%;height:23.5%}

.hs-trinity{left:0%;top:80.4%;width:45.2%;height:19.0%}

.interaction-hint{
  position:absolute;
  z-index:6;
  right:1.3%;
  bottom:1.4%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  background:rgba(6,9,8,.67);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(238,227,211,.74);
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.69rem;
  pointer-events:none;
}
.interaction-hint span{
  width:7px;height:7px;border-radius:50%;
  background:var(--orange-hi);
  animation:pulse 1.7s ease-in-out infinite;
}

.mobile-hint{
  display:none;
  margin:12px 16px 0;
  text-align:center;
  color:rgba(237,227,214,.68);
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.76rem;
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease,visibility .24s ease;
}
.modal.is-open{
  opacity:1;
  visibility:visible;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 28%, rgba(229,93,24,.08), transparent 30%),
    rgba(3,6,5,.88);
  backdrop-filter:blur(10px);
}
.modal__panel{
  position:relative;
  z-index:1;
  width:min(780px,calc(100vw - 36px));
  max-height:min(84vh,820px);
  overflow:auto;
  padding:48px 54px 44px;
  border:1px solid rgba(229,93,24,.38);
  background:
    linear-gradient(180deg,rgba(17,22,19,.985),rgba(8,12,10,.99)),
    var(--panel);
  box-shadow:0 34px 110px rgba(0,0,0,.58);
  scrollbar-width:thin;
  scrollbar-color:#a74918 #0b0f0d;
}
.modal__panel::-webkit-scrollbar{width:10px}
.modal__panel::-webkit-scrollbar-track{background:#0b0f0d}
.modal__panel::-webkit-scrollbar-thumb{
  background:#9f4519;
  border:2px solid #0b0f0d;
  border-radius:10px;
}
.modal__accent{
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange),transparent 90%);
}
.modal__close{
  position:absolute;
  top:14px;
  right:16px;
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:rgba(255,255,255,.02);
  color:#f0c59e;
  font-size:1.55rem;
  cursor:pointer;
}
.modal__close:hover,
.modal__close:focus-visible{
  outline:none;
  color:#fff1e3;
  border-color:rgba(255,122,34,.50);
  background:rgba(229,93,24,.08);
}
.modal__kicker{
  margin:0 0 10px;
  color:#ef9b62;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.76rem;
  font-weight:600;
}
.modal__title{
  margin:0;
  max-width:16ch;
  color:#f5e7d2;
  font-family:"Anton",Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.025em;
  line-height:.96;
  font-weight:400;
  font-size:clamp(2.4rem,6vw,4.8rem);
}
.modal__rule{
  width:120px;
  height:2px;
  margin:22px 0 24px;
  background:linear-gradient(90deg,var(--orange-hi),rgba(255,122,34,.08));
}
.modal__body{
  color:#d8cbb8;
  line-height:1.76;
  font-size:1rem;
}
.modal__body p{
  margin:0 0 17px;
}
.modal__body h3{
  margin:26px 0 8px;
  color:#f2dcc0;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.1rem;
}
.modal__body ul{
  margin:14px 0 18px;
  padding-left:19px;
}
.modal__body li{
  margin:8px 0;
}
.modal__body blockquote{
  margin:24px 0 8px;
  padding:2px 0 2px 18px;
  border-left:2px solid rgba(255,122,34,.55);
  color:#f0dabd;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.45rem;
  font-style:italic;
  line-height:1.35;
}
.trinity-layout{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:24px;
  align-items:start;
}
.trinity-layout img{
  width:170px;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
}
.modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  margin-top:28px;
}
.modal-btn{
  appearance:none;
  border:1px solid rgba(255,122,34,.38);
  padding:12px 16px;
  background:rgba(229,93,24,.06);
  color:#f1e4d3;
  cursor:pointer;
  text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:700;
  font-size:.83rem;
}
.modal-btn--solid{
  color:#fff5e8;
  background:linear-gradient(90deg,var(--orange),var(--orange-hi));
  border-color:rgba(255,122,34,.72);
}
.modal-btn:hover,
.modal-btn:focus-visible{
  outline:none;
  border-color:rgba(255,122,34,.78);
  transform:translateY(-1px);
}
body.modal-open{overflow:hidden}

@keyframes pulse{
  0%,100%{opacity:.45;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.25)}
}

@media(max-width:760px){
  .preview-shell{padding-top:48px}
  .preview-status{
    left:10px;
    right:10px;
    top:8px;
    justify-content:center;
  }
  .preview-status span:last-child{display:none}
  .interactive-canvas{
    width:1180px;
    min-width:1180px;
  }
  .mobile-hint{display:block}
  .interaction-hint{display:none}
  .modal{
    padding:14px;
  }
  .modal__panel{
    width:min(100%,720px);
    padding:42px 28px 34px 30px;
  }
  .trinity-layout{
    grid-template-columns:1fr;
  }
  .trinity-layout img{
    width:min(230px,100%);
  }
}

@media(prefers-reduced-motion:reduce){
  .interaction-hint span{animation:none}
  *{scroll-behavior:auto!important}
}


/* ==========================================================================
   v2.1 — INTERACTION + MODAL POLISH
   Preserves exact hotspot geometry and approved artwork.
   ========================================================================== */

.preview-shell{
  padding-top:26px;
  padding-bottom:30px;
}

.preview-status{
  top:12px;
  right:14px;
  gap:8px;
  padding:8px 11px;
  border-color:rgba(255,255,255,.085);
  background:linear-gradient(90deg,rgba(8,11,9,.88),rgba(8,11,9,.74));
  box-shadow:
    0 12px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:opacity .28s ease, transform .28s ease, background .28s ease;
}
.preview-status.is-quiet{
  opacity:.68;
  transform:translateY(-2px);
  background:rgba(8,11,9,.64);
}
.preview-status:hover{
  opacity:1;
}
.preview-status__dot{
  width:7px;
  height:7px;
}

.interactive-canvas{
  border-color:rgba(255,255,255,.055);
  box-shadow:
    0 28px 85px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.018);
}

.concept-image{
  filter:saturate(.99) contrast(1.015) brightness(.965);
  transition:filter .35s ease;
}
.interactive-canvas:hover .concept-image{
  filter:saturate(1) contrast(1.018) brightness(.975);
}

.image-ready-sheen{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.035) 48%,
    rgba(255,122,34,.045) 50%,
    rgba(255,255,255,.025) 52%,
    transparent 58%,
    transparent 100%
  );
}
.interactive-canvas.is-ready .image-ready-sheen{
  animation:fieldSheen 1.25s ease-out .12s 1;
}

/* Hotspots should feel like invisible live UI, not giant orange boxes. */
.hotspot{
  border-radius:2px;
  transition:transform .16s ease, filter .16s ease;
}
.hotspot::after{
  border-color:rgba(255,122,34,.68);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.028),
    inset 0 -18px 30px rgba(229,93,24,.045),
    0 0 20px rgba(229,93,24,.10);
  background:
    linear-gradient(180deg,rgba(229,93,24,.026),rgba(229,93,24,.048));
}
.hotspot:hover::after,
.hotspot:focus-visible::after{
  opacity:.76;
}

/* Context label appears only while deliberately exploring. */
.hotspot::before{
  content:attr(data-tip);
  position:absolute;
  z-index:2;
  left:50%;
  bottom:8px;
  transform:translate(-50%,5px);
  max-width:calc(100% - 14px);
  padding:5px 8px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid rgba(255,122,34,.40);
  background:rgba(6,9,8,.90);
  color:#f5e6d2;
  box-shadow:0 7px 20px rgba(0,0,0,.25);
  font-family:"Barlow Condensed",sans-serif;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.10em;
  line-height:1;
  text-transform:uppercase;
  transition:opacity .16s ease,transform .16s ease;
}
.hotspot:hover::before,
.hotspot:focus-visible::before{
  opacity:1;
  transform:translate(-50%,0);
}

/* Tiny nav items use a compact label below the zone. */
.hs-hunts::before,
.hs-elk-nav::before,
.hs-waterfowl-nav::before,
.hs-predator-nav::before,
.hs-ventures-nav::before,
.hs-about-nav::before,
.hs-contact-nav::before,
.hs-plan-nav::before{
  bottom:-22px;
  overflow:visible;
  max-width:none;
}

/* Species strip: glow rather than boxed card. */
.hs-elk::after,
.hs-whitetail::after,
.hs-turkey::after,
.hs-waterfowl::after,
.hs-predator::after,
.hs-curated::after{
  border-top-color:rgba(255,122,34,.68);
  border-bottom-color:rgba(255,122,34,.68);
  border-left-color:rgba(255,122,34,.14);
  border-right-color:rgba(255,122,34,.14);
  background:linear-gradient(180deg,rgba(255,122,34,.018),rgba(255,122,34,.060));
}

/* Venture cards get a subtle "live card" treatment. */
.hs-firstlight::after,
.hs-trophyland::after,
.hs-transformer::after,
.hs-camp::after,
.hs-gunlock::after{
  border-color:rgba(255,122,34,.52);
  background:
    linear-gradient(180deg,transparent 58%,rgba(0,0,0,.06) 100%),
    linear-gradient(180deg,rgba(229,93,24,.00),rgba(229,93,24,.052));
}
.hs-firstlight::before,
.hs-trophyland::before,
.hs-transformer::before,
.hs-camp::before,
.hs-gunlock::before{
  left:auto;
  right:10px;
  bottom:10px;
  transform:translateY(5px);
}
.hs-firstlight:hover::before,
.hs-trophyland:hover::before,
.hs-transformer:hover::before,
.hs-camp:hover::before,
.hs-gunlock:hover::before,
.hs-firstlight:focus-visible::before,
.hs-trophyland:focus-visible::before,
.hs-transformer:focus-visible::before,
.hs-camp:focus-visible::before,
.hs-gunlock:focus-visible::before{
  transform:translateY(0);
}

/* Trinity block: keep the portrait/story clean and editorial. */
.hs-trinity::after{
  border-color:rgba(255,122,34,.46);
  background:
    linear-gradient(90deg,rgba(229,93,24,.048),transparent 34%,transparent 100%);
}
.hs-trinity::before{
  left:auto;
  right:12px;
  bottom:10px;
  transform:translateY(5px);
}
.hs-trinity:hover::before,
.hs-trinity:focus-visible::before{
  transform:translateY(0);
}

/* Hint becomes quiet once the visitor has interacted. */
.interaction-hint{
  right:1.1%;
  bottom:1.2%;
  padding:6px 9px;
  border-color:rgba(255,255,255,.06);
  background:rgba(6,9,8,.58);
  transition:opacity .3s ease,transform .3s ease;
}
.interaction-hint.is-dismissed{
  opacity:0;
  transform:translateY(5px);
}
.interaction-hint span{
  width:6px;
  height:6px;
}

/* Modal: rugged editorial "field note" rather than generic popup. */
.modal{
  transition:opacity .22s ease,visibility .22s ease;
}
.modal__backdrop{
  background:
    radial-gradient(circle at 52% 24%,rgba(229,93,24,.085),transparent 27%),
    linear-gradient(180deg,rgba(3,6,5,.88),rgba(2,4,3,.94));
}
.modal__panel{
  width:min(820px,calc(100vw - 36px));
  max-height:min(86vh,860px);
  padding:48px 58px 46px 62px;
  transform:translateY(14px) scale(.987);
  opacity:.15;
  border-color:rgba(229,93,24,.34);
  background:
    radial-gradient(circle at 90% 0%,rgba(229,93,24,.065),transparent 25%),
    linear-gradient(180deg,rgba(16,21,18,.992),rgba(7,11,9,.995));
  box-shadow:
    0 38px 120px rgba(0,0,0,.64),
    inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .26s cubic-bezier(.2,.78,.22,1),opacity .20s ease;
}
.modal.is-open .modal__panel{
  transform:translateY(0) scale(1);
  opacity:1;
}
.modal__panel::after{
  content:"";
  position:absolute;
  inset:17px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.026);
}
.modal__accent{
  width:3px;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 35%,rgba(229,93,24,.15) 76%,transparent);
}
.modal__context{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 18px;
  color:rgba(230,213,190,.45);
  font-family:"Barlow Condensed",sans-serif;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1;
  text-transform:uppercase;
}
.modal__context i{
  width:22px;
  height:1px;
  background:rgba(255,122,34,.40);
}
.modal__kicker{
  margin-bottom:11px;
  color:#eaa16e;
  letter-spacing:.19em;
}
.modal__title{
  max-width:17ch;
  font-size:clamp(2.65rem,6vw,5.05rem);
  color:#f5ead9;
  text-wrap:balance;
}
.modal__rule{
  margin:22px 0 26px;
  height:1px;
}
.modal__body{
  max-width:68ch;
  color:#d9cdbb;
  font-size:1.01rem;
  line-height:1.79;
}
.modal__body strong{
  color:#f0d4b0;
}
.modal__body h3{
  margin-top:27px;
  color:#f0d5b3;
  font-size:1.02rem;
}
.modal__body li::marker{
  color:var(--orange-hi);
}
.modal__body blockquote{
  margin-top:26px;
  padding-left:19px;
  border-left-color:rgba(255,122,34,.50);
  color:#f1dabd;
  font-size:1.55rem;
}
.modal__actions{
  padding-top:4px;
  margin-top:28px;
  border-top:1px solid rgba(255,255,255,.052);
}
.modal-btn{
  min-height:43px;
  border-color:rgba(255,122,34,.30);
  background:linear-gradient(180deg,rgba(229,93,24,.06),rgba(229,93,24,.025));
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.modal-btn:hover,
.modal-btn:focus-visible{
  box-shadow:0 9px 22px rgba(0,0,0,.18);
  background:rgba(229,93,24,.12);
}
.modal-btn--solid{
  background:linear-gradient(90deg,#cf4f12,var(--orange-hi));
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}
.modal__close{
  top:15px;
  right:17px;
  z-index:3;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.modal__close:hover,
.modal__close:focus-visible{
  transform:rotate(3deg) scale(1.03);
}

.trinity-layout{
  grid-template-columns:184px 1fr;
  gap:28px;
}
.trinity-layout img{
  width:184px;
  padding:5px;
  background:rgba(255,255,255,.018);
  border-color:rgba(255,122,34,.24);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

@keyframes fieldSheen{
  0%{opacity:0;transform:translateX(-18%)}
  34%{opacity:1}
  100%{opacity:0;transform:translateX(18%)}
}

@media(max-width:760px){
  .preview-shell{padding-top:46px}
  .preview-status{
    top:8px;
    left:9px;
    right:9px;
    padding:8px 10px;
  }
  .hotspot::before{
    display:none;
  }
  .modal__panel{
    padding:43px 29px 36px 32px;
  }
  .modal__panel::after{
    inset:11px;
  }
  .trinity-layout{
    grid-template-columns:1fr;
  }
  .trinity-layout img{
    width:min(240px,100%);
  }
}

@media(prefers-reduced-motion:reduce){
  .image-ready-sheen,
  .modal__panel{
    animation:none!important;
    transition:none!important;
  }
}


/* ==========================================================================
   v2.2 — FRAMED FIELD PREVIEW
   Gives the dense TLC artwork a deliberate boundary, improves perceived
   sharpness by downsampling the 2x master, and moves status UI off the art.
   ========================================================================== */

html,body{
  background:
    radial-gradient(circle at 50% -10%, #171811 0%, #0d100c 28%, #080a08 58%, #050706 100%);
}

body{min-height:100vh;}

.preview-shell{
  min-height:100vh;
  padding:34px 0 44px;
  background:
    radial-gradient(circle at 50% 0%, rgba(130,92,48,.05), transparent 27%),
    linear-gradient(180deg, rgba(255,255,255,.008), rgba(255,255,255,0));
}

.stage-wrap{
  width:90vw;
  max-width:1500px;
  margin:0 auto;
}

.stage-meta{
  min-height:28px;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.preview-status{
  position:static;
  width:max-content;
  max-width:100%;
  transform:none;
  opacity:.88;
  padding:7px 10px;
  border-color:rgba(255,255,255,.075);
  background:rgba(8,11,9,.52);
  box-shadow:none;
  backdrop-filter:blur(6px);
}
.preview-status.is-quiet{opacity:.54;transform:none;}
.preview-status:hover{opacity:1;}

.canvas-scroll{
  width:100%;
  max-width:none;
  margin:0;
  overflow-x:auto;
  overflow-y:visible;
  border:1px solid rgba(205,119,49,.24);
  background:#070907;
  box-shadow:
    0 34px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.018),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.interactive-canvas{
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  border:0;
  box-shadow:none;
}

.interactive-canvas::before{
  content:"";
  position:absolute;
  z-index:18;
  left:3%;
  right:3%;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(229,93,24,.58) 28%,rgba(255,122,34,.76) 50%,rgba(229,93,24,.58) 72%,transparent);
}

.mobile-hint{margin:12px 0 0;}

@media (min-width:901px){
  .concept-image{filter:saturate(.995) contrast(1.012) brightness(.975);}
  .interactive-canvas:hover .concept-image{filter:saturate(1) contrast(1.015) brightness(.982);}
}

@media (max-width:900px){
  .stage-wrap{width:94vw;max-width:none;}
  .interactive-canvas{min-width:1000px;}
  .stage-meta{justify-content:center;}
  .preview-status{text-align:center;}
}

@media (max-width:760px){
  .preview-shell{padding-top:20px;}
  .stage-wrap{width:96vw;}
  .interactive-canvas{min-width:1180px;}
  .stage-meta{margin-bottom:7px;}
  .preview-status{padding:7px 9px;}
}


/* ==========================================================================
   v2.3 — FIELD INTEL / BORDER POLISH / AMBIENT MOTION
   ========================================================================== */

/* Final framed presentation */
.preview-shell{
  min-height:100vh;
  padding:12px 0 54px;
}

.stage-wrap{
  width:84vw;
  max-width:1400px;
  margin:0 auto;
}

.stage-meta{
  width:100%;
  min-height:28px;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.field-time{
  color:rgba(231,219,201,.45);
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.69rem;
  white-space:nowrap;
}

.preview-status{
  position:static;
  width:max-content;
  max-width:100%;
  margin-left:auto;
}

.canvas-scroll{
  width:100%;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(205,119,49,.27);
  background:#070907;
  box-shadow:
    0 36px 96px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.018),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.interactive-canvas{
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  overflow:hidden;
}

/* Orange tracer edge */
.interactive-canvas::before{
  content:"";
  position:absolute;
  z-index:18;
  left:2.7%;
  right:2.7%;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(229,93,24,.18) 12%,
    rgba(255,122,34,.82) 50%,
    rgba(229,93,24,.18) 88%,
    transparent 100%
  );
  animation:edgeBreathe 6.5s ease-in-out infinite;
}

/* Ambient field sweep: feels like sunlight / glass rather than a sci-fi scanner */
.field-sweep{
  position:absolute;
  z-index:6;
  inset:-10% -22%;
  pointer-events:none;
  opacity:0;
  transform:translateX(-38%) rotate(-4deg);
  background:linear-gradient(
    100deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.025) 47%,
    rgba(255,151,71,.055) 50%,
    rgba(255,255,255,.020) 53%,
    transparent 58%,
    transparent 100%
  );
  animation:fieldSweep 14s ease-in-out 2.3s infinite;
}

/* Mouse-following warm highlight. Very subtle. */
.pointer-glow{
  position:absolute;
  z-index:7;
  inset:0;
  pointer-events:none;
  opacity:.0;
  background:
    radial-gradient(
      circle 180px at var(--px,50%) var(--py,45%),
      rgba(255,138,53,.085),
      rgba(255,138,53,.025) 36%,
      transparent 70%
    );
  transition:opacity .22s ease;
}
.interactive-canvas:hover .pointer-glow{opacity:1}

/* ---------- HOTSPOT BORDER POLISH ---------- */

.hotspot::after{
  border:0;
  box-shadow:none;
  background:
    linear-gradient(var(--orange-hi),var(--orange-hi)) left top/18px 1px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) left top/1px 18px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right top/18px 1px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right top/1px 18px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) left bottom/18px 1px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) left bottom/1px 18px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right bottom/18px 1px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right bottom/1px 18px no-repeat,
    linear-gradient(180deg,rgba(229,93,24,.016),rgba(229,93,24,.045));
  filter:drop-shadow(0 0 8px rgba(229,93,24,.08));
  opacity:0;
  transition:opacity .18s ease,filter .18s ease,background-size .20s ease;
}

.hotspot:hover::after,
.hotspot:focus-visible::after{
  opacity:.94;
  filter:
    drop-shadow(0 0 8px rgba(229,93,24,.16))
    drop-shadow(0 0 22px rgba(229,93,24,.07));
  background-size:
    28px 1px, 1px 28px,
    28px 1px, 1px 28px,
    28px 1px, 1px 28px,
    28px 1px, 1px 28px,
    auto;
}

/* Hero CTA zones get a little extra confidence. */
.hs-plan-hero::after,
.hs-explore-hero::after,
.hs-plan-nav::after{
  background:
    linear-gradient(var(--orange-hi),var(--orange-hi)) left top/22px 2px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) left top/2px 22px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right top/22px 2px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right top/2px 22px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) left bottom/22px 2px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) left bottom/2px 22px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right bottom/22px 2px no-repeat,
    linear-gradient(var(--orange-hi),var(--orange-hi)) right bottom/2px 22px no-repeat,
    linear-gradient(180deg,rgba(229,93,24,.02),rgba(229,93,24,.06));
}

/* Venture cards get a restrained lower heat line on hover. */
.hs-firstlight:hover::after,
.hs-trophyland:hover::after,
.hs-transformer:hover::after,
.hs-camp:hover::after,
.hs-gunlock:hover::after{
  box-shadow:
    inset 0 -2px 0 rgba(255,122,34,.58),
    inset 0 0 0 1px rgba(255,122,34,.08);
}

/* ---------- SEASON INTEL ---------- */

.season-intel{
  margin:0 0 24px;
  padding:16px 16px 15px;
  border:1px solid rgba(255,122,34,.24);
  background:
    radial-gradient(circle at 100% 0%,rgba(229,93,24,.08),transparent 34%),
    rgba(255,255,255,.018);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.12);
}

.season-intel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}

.season-intel__label{
  color:#f0bc8f;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.70rem;
  font-weight:700;
}

.season-intel__status{
  padding:5px 8px;
  border:1px solid rgba(255,122,34,.30);
  background:rgba(229,93,24,.06);
  color:#f5dfc7;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.66rem;
  white-space:nowrap;
}

.season-intel__status.is-open{
  border-color:rgba(123,187,102,.34);
  background:rgba(91,151,76,.08);
  color:#d9edcf;
}
.season-intel__status.is-soon{
  border-color:rgba(255,122,34,.35);
  color:#f4d7bd;
}

.season-intel__event{
  margin:0 0 12px;
  color:#f1e4d1;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-size:1.0rem;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,minmax(58px,1fr));
  gap:8px;
}

.countdown__cell{
  padding:9px 8px 8px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(0,0,0,.18);
  text-align:center;
}

.countdown__num{
  display:block;
  color:#fff0de;
  font-family:"Anton",Impact,sans-serif;
  font-size:1.42rem;
  line-height:1;
  letter-spacing:.025em;
}

.countdown__unit{
  display:block;
  margin-top:5px;
  color:rgba(232,217,198,.48);
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.57rem;
}

.season-intel__sub{
  margin:11px 0 0!important;
  color:rgba(220,207,189,.66);
  font-family:"Barlow Condensed",sans-serif;
  font-size:.76rem!important;
  line-height:1.45!important;
  letter-spacing:.035em;
}

.season-intel__verify{
  display:inline-flex;
  margin-top:11px;
  color:#e9a06c;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.67rem;
  font-weight:700;
  text-decoration:none;
}
.season-intel__verify:hover{text-decoration:underline}

/* Field modal entry animation */
.modal__accent{
  box-shadow:0 0 22px rgba(229,93,24,.12);
}

@keyframes edgeBreathe{
  0%,100%{opacity:.44;filter:brightness(.9)}
  50%{opacity:.88;filter:brightness(1.08)}
}

@keyframes fieldSweep{
  0%,73%{opacity:0;transform:translateX(-42%) rotate(-4deg)}
  78%{opacity:.55}
  90%{opacity:.20}
  100%{opacity:0;transform:translateX(42%) rotate(-4deg)}
}

@media(max-width:900px){
  .stage-wrap{
    width:94vw;
    max-width:none;
  }
  .interactive-canvas{
    min-width:1000px;
  }
  .field-time{display:none}
  .stage-meta{justify-content:center}
}

@media(max-width:760px){
  .stage-wrap{width:96vw}
  .interactive-canvas{min-width:1180px}
  .countdown{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .field-sweep,
  .interactive-canvas::before{
    animation:none!important;
  }
  .pointer-glow{display:none}
}


/* ==========================================================================
   v2.4 FINAL CANDIDATE — RESTRAINT PASS
   The artwork already explains itself. Interaction now confirms, not repeats.
   ========================================================================== */

/* Remove all duplicate hover labels/tooltips. */
.hotspot::before{
  display:none !important;
}

/* Reset the bracket-box treatment from v2.3. */
.hotspot::after{
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0;
  transition:
    opacity .16s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* Keyboard users still get a clear focus treatment. */
.hotspot:focus-visible{
  outline:1px solid rgba(255,122,34,.78);
  outline-offset:-2px;
}

/* Top navigation: just a fine underline. */
.hs-hunts:hover::after,
.hs-elk-nav:hover::after,
.hs-waterfowl-nav:hover::after,
.hs-predator-nav:hover::after,
.hs-ventures-nav:hover::after,
.hs-about-nav:hover::after,
.hs-contact-nav:hover::after,
.hs-hunts:focus-visible::after,
.hs-elk-nav:focus-visible::after,
.hs-waterfowl-nav:focus-visible::after,
.hs-predator-nav:focus-visible::after,
.hs-ventures-nav:focus-visible::after,
.hs-about-nav:focus-visible::after,
.hs-contact-nav:focus-visible::after{
  opacity:1;
  background:linear-gradient(
    180deg,
    transparent 0%,
    transparent calc(100% - 2px),
    rgba(255,122,34,.74) calc(100% - 2px),
    rgba(255,122,34,.74) 100%
  ) !important;
  box-shadow:0 7px 15px -13px rgba(255,122,34,.85) !important;
}

/* Existing orange CTA artwork is strong enough; add only a restrained halo. */
.hs-plan-nav:hover::after,
.hs-plan-hero:hover::after,
.hs-explore-hero:hover::after,
.hs-plan-nav:focus-visible::after,
.hs-plan-hero:focus-visible::after,
.hs-explore-hero:focus-visible::after{
  opacity:1;
  background:rgba(255,122,34,.018) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,122,34,.26),
    0 0 18px rgba(229,93,24,.085) !important;
}

/* Species strip: a thin confirmation line and barely-there warm wash. */
.hs-elk:hover::after,
.hs-whitetail:hover::after,
.hs-turkey:hover::after,
.hs-waterfowl:hover::after,
.hs-predator:hover::after,
.hs-curated:hover::after,
.hs-elk:focus-visible::after,
.hs-whitetail:focus-visible::after,
.hs-turkey:focus-visible::after,
.hs-waterfowl:focus-visible::after,
.hs-predator:focus-visible::after,
.hs-curated:focus-visible::after{
  opacity:1;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,122,34,.018) 58%,
    rgba(255,122,34,.055) 100%
  ) !important;
  box-shadow:inset 0 -1px 0 rgba(255,122,34,.70) !important;
}

/* Venture cards: no box, no label; only a quiet lower ember line. */
.hs-firstlight:hover::after,
.hs-trophyland:hover::after,
.hs-transformer:hover::after,
.hs-camp:hover::after,
.hs-gunlock:hover::after,
.hs-firstlight:focus-visible::after,
.hs-trophyland:focus-visible::after,
.hs-transformer:focus-visible::after,
.hs-camp:focus-visible::after,
.hs-gunlock:focus-visible::after{
  opacity:1;
  background:linear-gradient(
    180deg,
    transparent 0%,
    transparent 76%,
    rgba(255,122,34,.025) 100%
  ) !important;
  box-shadow:
    inset 0 -2px 0 rgba(255,122,34,.58),
    0 10px 22px -22px rgba(255,122,34,.65) !important;
}

/* Trinity: editorial accent, not a selection rectangle. */
.hs-trinity:hover::after,
.hs-trinity:focus-visible::after{
  opacity:1;
  background:linear-gradient(
    90deg,
    rgba(255,122,34,.045) 0%,
    rgba(255,122,34,.012) 23%,
    transparent 58%
  ) !important;
  box-shadow:inset 2px 0 0 rgba(255,122,34,.58) !important;
}

/* Slightly quieter ambient effects so they feel discovered, not demonstrated. */
.pointer-glow{
  background:
    radial-gradient(
      circle 175px at var(--px,50%) var(--py,45%),
      rgba(255,138,53,.055),
      rgba(255,138,53,.017) 38%,
      transparent 70%
    );
}
.interactive-canvas:hover .pointer-glow{
  opacity:.72;
}

.field-sweep{
  animation-duration:18s;
  background:linear-gradient(
    100deg,
    transparent 0%,
    transparent 44%,
    rgba(255,255,255,.016) 47%,
    rgba(255,151,71,.036) 50%,
    rgba(255,255,255,.014) 53%,
    transparent 56%,
    transparent 100%
  );
}

.interactive-canvas::before{
  animation-duration:8.5s;
  opacity:.62;
}

/* Refine the matte and frame into a gallery/field-board presentation. */
.canvas-scroll{
  border-color:rgba(205,119,49,.20);
  box-shadow:
    0 36px 96px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.014),
    inset 0 1px 0 rgba(255,255,255,.020);
}

/* Status becomes almost metadata rather than a banner. */
.preview-status{
  opacity:.72;
  border-color:rgba(255,255,255,.055);
  background:rgba(8,11,9,.38);
}
.preview-status.is-quiet{
  opacity:.42;
}
.field-time{
  opacity:.78;
}

/* Modal finishing details */
.modal__panel{
  border-color:rgba(229,93,24,.28);
}
.modal__context{
  opacity:.80;
}
.modal__actions{
  gap:9px;
}
.modal-btn{
  border-color:rgba(255,122,34,.25);
}
.modal-btn--solid{
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Countdown cells read more like instruments, less like widgets. */
.countdown__cell{
  border-color:rgba(255,255,255,.045);
  background:rgba(0,0,0,.14);
}
.season-intel{
  border-color:rgba(255,122,34,.20);
}

/* Avoid hover theatrics on touch-first devices. */
@media (hover:none){
  .pointer-glow,
  .field-sweep{
    display:none;
  }
  .hotspot::after{
    display:none;
  }
}


/* ==========================================================================
   v2.5 — GLOW FREEZE
   Final interaction language:
   no underlines, no boxes, no duplicate labels.
   The artwork simply comes alive under the pointer.
   ========================================================================== */

/* Disable every prior hover line / bracket / outline treatment. */
.hotspot::before{
  display:none !important;
}

.hotspot::after{
  content:"";
  position:absolute;
  inset:0;
  border:0 !important;
  outline:0 !important;
  opacity:0;
  pointer-events:none;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:
    opacity .20s ease,
    background .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
}

/* Keyboard focus remains clearly visible, but through light rather than geometry. */
.hotspot:focus-visible{
  outline:none !important;
}

/* --------------------------------------------------------------------------
   TOP NAV — soft amber halo only
   -------------------------------------------------------------------------- */

.hs-hunts:hover::after,
.hs-elk-nav:hover::after,
.hs-waterfowl-nav:hover::after,
.hs-predator-nav:hover::after,
.hs-ventures-nav:hover::after,
.hs-about-nav:hover::after,
.hs-contact-nav:hover::after,
.hs-hunts:focus-visible::after,
.hs-elk-nav:focus-visible::after,
.hs-waterfowl-nav:focus-visible::after,
.hs-predator-nav:focus-visible::after,
.hs-ventures-nav:focus-visible::after,
.hs-about-nav:focus-visible::after,
.hs-contact-nav:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,147,66,.23) 0%,
      rgba(229,93,24,.12) 38%,
      rgba(229,93,24,.04) 60%,
      transparent 78%
    ) !important;
  box-shadow:
    0 0 16px rgba(229,93,24,.07),
    inset 0 0 18px rgba(255,147,66,.028) !important;
}

/* PLAN YOUR HUNT / hero CTAs — stronger, still borderless */
.hs-plan-nav:hover::after,
.hs-plan-hero:hover::after,
.hs-explore-hero:hover::after,
.hs-plan-nav:focus-visible::after,
.hs-plan-hero:focus-visible::after,
.hs-explore-hero:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,147,66,.26) 0%,
      rgba(229,93,24,.14) 42%,
      rgba(229,93,24,.048) 65%,
      transparent 82%
    ) !important;
  box-shadow:
    0 0 24px rgba(229,93,24,.105),
    inset 0 0 22px rgba(255,147,66,.035) !important;
}

/* --------------------------------------------------------------------------
   SPECIES STRIP — localized warm bloom; no underline
   -------------------------------------------------------------------------- */

.hs-elk:hover::after,
.hs-whitetail:hover::after,
.hs-turkey:hover::after,
.hs-waterfowl:hover::after,
.hs-predator:hover::after,
.hs-curated:hover::after,
.hs-elk:focus-visible::after,
.hs-whitetail:focus-visible::after,
.hs-turkey:focus-visible::after,
.hs-waterfowl:focus-visible::after,
.hs-predator:focus-visible::after,
.hs-curated:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,147,66,.18) 0%,
      rgba(229,93,24,.09) 40%,
      rgba(229,93,24,.026) 66%,
      transparent 84%
    ) !important;
  box-shadow:
    0 0 20px rgba(229,93,24,.065),
    inset 0 0 16px rgba(255,147,66,.018) !important;
}

/* --------------------------------------------------------------------------
   VENTURE CARDS — deeper cinematic illumination, still no box
   -------------------------------------------------------------------------- */

.hs-firstlight:hover::after,
.hs-trophyland:hover::after,
.hs-transformer:hover::after,
.hs-camp:hover::after,
.hs-gunlock:hover::after,
.hs-firstlight:focus-visible::after,
.hs-trophyland:focus-visible::after,
.hs-transformer:focus-visible::after,
.hs-camp:focus-visible::after,
.hs-gunlock:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(255,147,66,.135) 0%,
      rgba(229,93,24,.060) 48%,
      rgba(229,93,24,.018) 70%,
      transparent 88%
    ) !important;
  box-shadow:
    inset 0 0 32px rgba(255,147,66,.045),
    0 0 28px rgba(229,93,24,.080) !important;
}

/* FirstLight gets the tiniest gold tint so it visually bridges to its own brand. */
.hs-firstlight:hover::after,
.hs-firstlight:focus-visible::after{
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(226,181,102,.13) 0%,
      rgba(205,147,55,.055) 48%,
      rgba(205,147,55,.016) 70%,
      transparent 88%
    ) !important;
  box-shadow:
    inset 0 0 32px rgba(226,181,102,.040),
    0 0 26px rgba(205,147,55,.065) !important;
}

/* --------------------------------------------------------------------------
   TRINITY — editorial warmth around the portrait / signature area
   -------------------------------------------------------------------------- */

.hs-trinity:hover::after,
.hs-trinity:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(
      ellipse at 18% 53%,
      rgba(255,147,66,.12) 0%,
      rgba(229,93,24,.055) 32%,
      rgba(229,93,24,.018) 52%,
      transparent 70%
    ) !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------------------
   AMBIENT EFFECTS — quieter, slower, more premium
   -------------------------------------------------------------------------- */

.pointer-glow{
  background:
    radial-gradient(
      circle 180px at var(--px,50%) var(--py,45%),
      rgba(255,142,57,.055),
      rgba(255,142,57,.018) 40%,
      transparent 72%
    );
}
.interactive-canvas:hover .pointer-glow{
  opacity:.68;
}

.field-sweep{
  animation-duration:22s;
  background:linear-gradient(
    100deg,
    transparent 0%,
    transparent 45%,
    rgba(255,255,255,.012) 48%,
    rgba(255,151,71,.030) 50%,
    rgba(255,255,255,.011) 52%,
    transparent 55%,
    transparent 100%
  );
}

.interactive-canvas::before{
  animation-duration:10s;
  opacity:.50;
}

/* --------------------------------------------------------------------------
   FRAME / METADATA — final symmetry polish
   -------------------------------------------------------------------------- */

.preview-shell{
  padding:12px 0 52px;
}

.stage-wrap{
  width:84vw;
  max-width:1400px;
  margin:0 auto;
}

.stage-meta{
  width:100%;
  min-height:27px;
  margin:0 0 5px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}

.field-time{
  justify-self:start;
}

.preview-status{
  grid-column:3;
  justify-self:end;
  margin:0;
}

.canvas-scroll{
  border-color:rgba(205,119,49,.17);
  box-shadow:
    0 34px 92px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.012),
    inset 0 1px 0 rgba(255,255,255,.018);
}

/* Metadata should whisper. */
.field-time{
  opacity:.62;
}
.preview-status{
  opacity:.62;
}
.preview-status.is-quiet{
  opacity:.36;
}

/* --------------------------------------------------------------------------
   MODAL — tiny final finishing touches
   -------------------------------------------------------------------------- */

.modal__panel{
  border-color:rgba(229,93,24,.24);
  box-shadow:
    0 38px 120px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.020);
}

.modal__accent{
  opacity:.86;
  box-shadow:0 0 18px rgba(229,93,24,.09);
}

.modal__context{
  opacity:.68;
}

.modal__rule{
  opacity:.82;
}

.modal-btn{
  border-color:rgba(255,122,34,.22);
}
.modal-btn:hover,
.modal-btn:focus-visible{
  border-color:rgba(255,122,34,.42);
  background:rgba(229,93,24,.080);
}

.modal-btn--solid:hover,
.modal-btn--solid:focus-visible{
  background:linear-gradient(90deg,#d75517,#ff812d);
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 0 20px rgba(229,93,24,.065),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* --------------------------------------------------------------------------
   RESPONSIVE / TOUCH
   -------------------------------------------------------------------------- */

@media(max-width:900px){
  .stage-wrap{
    width:94vw;
    max-width:none;
  }
  .stage-meta{
    display:flex;
    justify-content:center;
  }
  .field-time{
    display:none;
  }
}

@media(max-width:760px){
  .stage-wrap{
    width:96vw;
  }
}

@media(hover:none){
  .hotspot::after,
  .pointer-glow,
  .field-sweep{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .field-sweep,
  .interactive-canvas::before{
    animation:none !important;
  }
}

/* ==========================================================================
   MORE GLOW TUNE — 2026-09-17
   Slightly stronger nav, CTA, species, venture, Trinity, and pointer glows.
   Geometry/spacing/interactions otherwise unchanged from v2.5 GLOW FREEZE.
   ========================================================================== */


/* ==========================================================================
   v2.6 — REAL HTML NAVIGATION
   Masks the tiny raster nav embedded in the approved concept image and replaces
   it with crisp, symmetrical, accessible HTML/CSS navigation.
   ========================================================================== */

.real-nav{
  position:absolute;
  z-index:26;

  /* Tuned to the original embedded nav band in the approved 1672×941 artwork. */
  left:19.15%;
  top:.55%;
  width:61.55%;
  height:5.95%;

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      180deg,
      rgba(7,10,8,.975) 0%,
      rgba(8,11,9,.945) 62%,
      rgba(8,11,9,.910) 100%
    );

  border-top:1px solid rgba(255,255,255,.022);
  border-bottom:1px solid rgba(229,93,24,.145);

  box-shadow:
    0 8px 22px rgba(0,0,0,.21),
    inset 0 1px 0 rgba(255,255,255,.018);

  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);

  overflow:hidden;
  animation:realNavReveal .72s cubic-bezier(.2,.74,.25,1) .14s both;
}

/* subtle field texture so it belongs to the artwork rather than looking pasted on */
.real-nav::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:
    repeating-linear-gradient(
      118deg,
      transparent 0 22px,
      rgba(255,255,255,.018) 22px 23px
    ),
    radial-gradient(circle at 18% 50%,rgba(229,93,24,.07),transparent 20%);
}

.real-nav::after{
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  bottom:0;
  height:1px;
  pointer-events:none;
  opacity:.46;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(229,93,24,.20) 18%,
    rgba(255,122,34,.38) 50%,
    rgba(229,93,24,.20) 82%,
    transparent
  );
}

.real-nav__inner{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  padding:0 .75%;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(5px,.62vw,13px);
}

.real-nav__link,
.real-nav__cta{
  appearance:none;
  border:0;
  margin:0;
  cursor:pointer;
  white-space:nowrap;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
}

.real-nav__link{
  position:relative;
  height:72%;
  padding:0 clamp(4px,.48vw,9px);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  background:transparent;
  color:rgba(240,232,220,.84);

  font-size:clamp(.60rem,.68vw,.80rem);
  font-weight:700;
  letter-spacing:.095em;
  line-height:1;

  text-shadow:0 1px 0 rgba(0,0,0,.50);

  transition:
    color .18s ease,
    text-shadow .18s ease,
    transform .18s ease,
    background .18s ease;
}

.real-nav__link i{
  width:4px;
  height:4px;
  opacity:.38;
  border-right:1px solid rgba(255,112,35,.88);
  border-bottom:1px solid rgba(255,112,35,.88);
  transform:rotate(45deg) translateY(-1px);
  transition:
    opacity .18s ease,
    filter .18s ease,
    transform .18s ease;
}

.real-nav__link::before{
  content:"";
  position:absolute;
  inset:-5% -4%;
  z-index:-1;
  opacity:0;
  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,147,66,.18) 0%,
      rgba(229,93,24,.075) 38%,
      transparent 76%
    );

  filter:blur(2px);
  transition:opacity .18s ease;
}

.real-nav__link:hover,
.real-nav__link:focus-visible{
  outline:none;
  color:#fff1de;
  text-shadow:
    0 0 9px rgba(255,137,52,.28),
    0 0 20px rgba(229,93,24,.13),
    0 1px 0 rgba(0,0,0,.55);
  transform:translateY(-1px);
}

.real-nav__link:hover::before,
.real-nav__link:focus-visible::before{
  opacity:1;
}

.real-nav__link:hover i,
.real-nav__link:focus-visible i{
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(255,122,34,.55));
  transform:rotate(45deg) translateY(-1px) scale(1.08);
}

.real-nav__cta{
  position:relative;
  height:72%;
  min-width:clamp(118px,10.8vw,170px);
  padding:0 clamp(12px,1.25vw,20px);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  color:#fff5e8;

  background:
    linear-gradient(100deg,#bf4510 0%,#e85d17 52%,#ff7821 100%);

  box-shadow:
    0 7px 18px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.11);

  font-size:clamp(.65rem,.75vw,.88rem);
  font-weight:700;
  letter-spacing:.085em;
  line-height:1;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.real-nav__cta::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border:1px solid rgba(255,145,72,.26);
}

.real-nav__cta b{
  font-family:Arial,sans-serif;
  font-size:1.02em;
  font-weight:400;
  transform:translateX(0);
  transition:transform .18s ease;
}

.real-nav__cta:hover,
.real-nav__cta:focus-visible{
  outline:none;
  transform:translateY(-1px);
  filter:brightness(1.08) saturate(1.04);
  box-shadow:
    0 9px 24px rgba(0,0,0,.28),
    0 0 19px rgba(229,93,24,.13),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.real-nav__cta:hover b,
.real-nav__cta:focus-visible b{
  transform:translateX(3px);
}

/* old nav hotspot geometry is no longer part of the interface */
.hs-hunts,
.hs-elk-nav,
.hs-waterfowl-nav,
.hs-predator-nav,
.hs-ventures-nav,
.hs-about-nav,
.hs-contact-nav,
.hs-plan-nav{
  display:none !important;
}

/* At the framed desktop size, make the real nav feel integrated rather than floating. */
@media(min-width:901px){
  .real-nav{
    box-shadow:
      0 7px 19px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.018);
  }
}

/* The canvas remains scrollable on smaller screens, so the real nav stays usable
   at the same visual scale instead of collapsing into unreadable type. */
@media(max-width:900px){
  .real-nav{
    left:19.15%;
    width:61.55%;
  }

  .real-nav__inner{
    gap:7px;
  }

  .real-nav__link{
    font-size:.68rem;
    padding:0 6px;
  }

  .real-nav__cta{
    min-width:135px;
    font-size:.72rem;
  }
}

@media(hover:none){
  .real-nav__link::before{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .real-nav{
    animation:none !important;
  }
  .real-nav__link,
  .real-nav__link i,
  .real-nav__cta,
  .real-nav__cta b{
    transition:none !important;
  }
}

@keyframes realNavReveal{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ==========================================================================
   v2.7 — PRECISION HYBRID / FIELD WAKE
   Source artwork: 1672 × 941
   Important controls are real HTML. Photographic / illustrated regions remain
   mapped to the artwork with exact pixel-derived percentage geometry.
   ========================================================================== */

/* One-time field wake: not a splash screen — the board simply resolves alive. */
.concept-image{
  transform:translateZ(0);
  will-change:filter;
}

.interactive-canvas.is-ready .concept-image{
  animation:conceptWake 1.38s cubic-bezier(.18,.76,.22,1) both;
}

.field-wake{
  position:absolute;
  z-index:21;
  inset:-8% -24%;
  pointer-events:none;
  opacity:0;
  transform:translateX(-38%) rotate(-3deg);
  background:
    linear-gradient(
      102deg,
      transparent 0%,
      transparent 41%,
      rgba(255,255,255,.020) 46%,
      rgba(255,152,72,.095) 49.5%,
      rgba(255,255,255,.026) 52%,
      transparent 58%,
      transparent 100%
    );
}

.interactive-canvas.is-ready .field-wake{
  animation:wakeLight 1.44s cubic-bezier(.18,.76,.22,1) .10s 1 both;
}

/* Real nav resolves just after the landscape wakes. */
.interactive-canvas.is-ready .real-nav{
  animation:navSettle .74s cubic-bezier(.20,.78,.22,1) .40s both !important;
}

/* --------------------------------------------------------------------------
   REAL BUTTON LANGUAGE
   -------------------------------------------------------------------------- */
.hybrid-btn{
  position:absolute;
  z-index:15;
  appearance:none;
  margin:0;
  padding:0 10px;
  border:1px solid rgba(255,111,29,.82);
  border-radius:2px;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.075em;
  line-height:1;
  white-space:nowrap;

  color:#fff2e1;
  background:
    linear-gradient(180deg,rgba(10,13,11,.975),rgba(5,8,7,.985));

  box-shadow:
    0 3px 8px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);

  text-shadow:0 1px 0 rgba(0,0,0,.62);

  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease,
    filter .17s ease,
    background .17s ease;
}

.hybrid-btn b{
  font-family:Arial,sans-serif;
  font-size:1.05em;
  font-weight:400;
  transform:translateX(0);
  transition:transform .17s ease;
}

.hybrid-btn::before{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  border-radius:8px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,139,49,.18),
      rgba(229,93,24,.065) 43%,
      transparent 74%
    );
  filter:blur(3px);
  transition:opacity .17s ease;
}

.hybrid-btn:hover,
.hybrid-btn:focus-visible{
  outline:none;
  transform:translateY(-1px);
  border-color:rgba(255,133,52,.98);
  filter:brightness(1.06);
  box-shadow:
    0 5px 13px rgba(0,0,0,.30),
    0 0 17px rgba(229,93,24,.10),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.hybrid-btn:hover::before,
.hybrid-btn:focus-visible::before{
  opacity:1;
}

.hybrid-btn:hover b,
.hybrid-btn:focus-visible b{
  transform:translateX(2px);
}

/* Hero buttons — exact baked-button locations. */
.hybrid-btn--hero{
  font-size:clamp(.62rem,.76vw,.92rem);
}

.hybrid-plan{
  left:39.115%;
  top:32.625%;
  width:11.005%;
  height:5.101%;

  border-color:rgba(255,116,31,.82);
  background:
    linear-gradient(100deg,#ce4911 0%,#e85d17 54%,#ff7620 100%);
  box-shadow:
    0 4px 11px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.hybrid-btn--dark{
  border-color:rgba(255,111,29,.72);
  background:
    linear-gradient(180deg,rgba(15,18,15,.985),rgba(7,10,8,.99));
}

.hybrid-explore{
  left:50.419%;
  top:32.625%;
  width:10.945%;
  height:5.101%;
}

/* Venture buttons — exact pixel-derived locations. */
.hybrid-btn--venture{
  height:2.976%;
  padding:0 .55%;
  font-size:clamp(.52rem,.62vw,.73rem);
  letter-spacing:.09em;

  background:
    linear-gradient(180deg,rgba(9,12,10,.985),rgba(4,7,6,.99));
  border-color:rgba(255,92,15,.86);
}

.venture-firstlight{
  left:4.426%; top:76.089%; width:12.022%;
}
.venture-trophyland{
  left:24.282%; top:76.089%; width:11.902%;
}
.venture-transformer{
  left:44.079%; top:76.089%; width:12.081%;
}
.venture-camp{
  left:63.337%; top:76.089%; width:13.517%;
}
.venture-gunlock{
  left:84.270%; top:76.089%; width:10.467%;
}

/* Trinity story control. */
.hybrid-btn--story{
  left:20.754%;
  top:95.430%;
  width:8.194%;
  height:2.550%;
  padding:0 .45%;
  font-size:clamp(.50rem,.59vw,.69rem);
  letter-spacing:.10em;
}

/* --------------------------------------------------------------------------
   PRECISION REGION MAPPING — source is 1672 × 941
   -------------------------------------------------------------------------- */

/* Species strip */
.hs-elk{
  left:0%; top:44.740%; width:16.447%; height:7.439%;
}
.hs-whitetail{
  left:16.447%; top:44.740%; width:10.586%; height:7.439%;
}
.hs-turkey{
  left:27.033%; top:44.740%; width:9.749%; height:7.439%;
}
.hs-waterfowl{
  left:36.782%; top:44.740%; width:12.978%; height:7.439%;
}
.hs-predator{
  left:49.761%; top:44.740%; width:11.603%; height:7.439%;
}
.hs-curated{
  left:61.364%; top:44.740%; width:16.627%; height:7.439%;
}

/* Exact venture card visual boundaries */
.hs-firstlight{
  left:1.017%; top:56.323%; width:19.019%; height:23.911%;
}
.hs-trophyland{
  left:20.574%; top:56.323%; width:19.079%; height:23.911%;
}
.hs-transformer{
  left:40.371%; top:56.323%; width:19.318%; height:23.911%;
}
.hs-camp{
  left:60.407%; top:56.323%; width:19.079%; height:23.911%;
}
.hs-gunlock{
  left:80.144%; top:56.323%; width:18.900%; height:23.911%;
}

/* Trinity visual/story region */
.hs-trinity{
  left:0%; top:80.765%; width:45.275%; height:19.235%;
}

/* The real buttons need to sit above card/story hit regions. */
.hybrid-btn{
  z-index:17;
}

/* --------------------------------------------------------------------------
   ARTWORK-AWARE HOVER LIGHT
   Every region gets light where the actual subject lives.
   -------------------------------------------------------------------------- */
.hs-elk:hover::after,
.hs-elk:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 43% 48%,rgba(255,149,69,.16),rgba(229,93,24,.055) 43%,transparent 77%) !important;
  box-shadow:none !important;
}

.hs-whitetail:hover::after,
.hs-whitetail:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 48% 49%,rgba(255,149,69,.15),rgba(229,93,24,.050) 43%,transparent 77%) !important;
  box-shadow:none !important;
}

.hs-turkey:hover::after,
.hs-turkey:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 45% 50%,rgba(255,149,69,.14),rgba(229,93,24,.045) 43%,transparent 77%) !important;
  box-shadow:none !important;
}

.hs-waterfowl:hover::after,
.hs-waterfowl:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 38% 47%,rgba(255,167,88,.14),rgba(229,93,24,.044) 44%,transparent 78%) !important;
  box-shadow:none !important;
}

.hs-predator:hover::after,
.hs-predator:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 44% 49%,rgba(255,142,57,.15),rgba(229,93,24,.050) 43%,transparent 77%) !important;
  box-shadow:none !important;
}

.hs-curated:hover::after,
.hs-curated:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 45% 48%,rgba(255,149,69,.145),rgba(229,93,24,.047) 45%,transparent 79%) !important;
  box-shadow:none !important;
}

/* Venture light is centered on meaningful card artwork, not the whole rectangle. */
.hs-firstlight:hover::after,
.hs-firstlight:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(circle at 27% 18%,rgba(255,194,110,.16),rgba(205,147,55,.035) 34%,transparent 66%),
    radial-gradient(ellipse at 50% 53%,rgba(226,181,102,.070),transparent 74%) !important;
  box-shadow:inset 0 0 28px rgba(226,181,102,.018) !important;
  animation:cardWake .92s ease-out both;
}

.hs-trophyland:hover::after,
.hs-trophyland:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(circle at 69% 20%,rgba(255,139,48,.13),rgba(229,93,24,.026) 35%,transparent 64%),
    radial-gradient(ellipse at 48% 52%,rgba(255,147,66,.065),transparent 74%) !important;
  box-shadow:inset 0 0 28px rgba(255,147,66,.016) !important;
  animation:cardWake .92s ease-out both;
}

.hs-transformer:hover::after,
.hs-transformer:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 51% 27%,rgba(255,151,65,.175),rgba(229,93,24,.045) 36%,transparent 67%),
    radial-gradient(ellipse at 50% 55%,rgba(255,147,66,.055),transparent 76%) !important;
  box-shadow:inset 0 0 30px rgba(255,147,66,.022) !important;
  animation:lodgeWake 1.05s ease-out both;
}

.hs-camp:hover::after,
.hs-camp:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 50% 21%,rgba(255,155,72,.155),rgba(229,93,24,.035) 38%,transparent 70%),
    radial-gradient(ellipse at 50% 55%,rgba(255,147,66,.050),transparent 77%) !important;
  box-shadow:inset 0 0 28px rgba(255,147,66,.018) !important;
  animation:cardWake .92s ease-out both;
}

.hs-gunlock:hover::after,
.hs-gunlock:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(circle at 66% 18%,rgba(255,177,87,.145),rgba(229,93,24,.030) 34%,transparent 64%),
    radial-gradient(ellipse at 50% 55%,rgba(255,147,66,.052),transparent 77%) !important;
  box-shadow:inset 0 0 28px rgba(255,147,66,.018) !important;
  animation:cardWake .92s ease-out both;
}

/* Trinity responds around portrait + signature, not as a giant selected rectangle. */
.hs-trinity:hover::after,
.hs-trinity:focus-visible::after{
  opacity:1;
  background:
    radial-gradient(ellipse at 18% 53%,rgba(255,156,77,.105),rgba(229,93,24,.025) 37%,transparent 62%),
    radial-gradient(ellipse at 54% 30%,rgba(223,180,119,.050),transparent 55%) !important;
  box-shadow:none !important;
}

/* Real controls settle in after the field wake. */
.interactive-canvas.is-ready .hybrid-btn{
  animation:controlSettle .56s cubic-bezier(.2,.78,.22,1) .62s both;
}

@keyframes conceptWake{
  0%{
    filter:saturate(.91) contrast(.985) brightness(.915);
  }
  42%{
    filter:saturate(.975) contrast(1.005) brightness(.952);
  }
  100%{
    filter:saturate(.995) contrast(1.012) brightness(.975);
  }
}

@keyframes wakeLight{
  0%{
    opacity:0;
    transform:translateX(-40%) rotate(-3deg);
  }
  28%{opacity:.12}
  52%{opacity:.72}
  76%{opacity:.16}
  100%{
    opacity:0;
    transform:translateX(40%) rotate(-3deg);
  }
}

@keyframes navSettle{
  from{
    opacity:0;
    transform:translateY(-4px);
    filter:blur(.7px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes controlSettle{
  from{
    opacity:0;
    transform:translateY(3px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes cardWake{
  0%{filter:brightness(.96)}
  46%{filter:brightness(1.05)}
  100%{filter:brightness(1)}
}

@keyframes lodgeWake{
  0%{filter:brightness(.96)}
  42%{filter:brightness(1.075)}
  100%{filter:brightness(1)}
}

/* Touch devices keep the full visual board without hover theatrics. */
@media(hover:none){
  .hs-elk::after,
  .hs-whitetail::after,
  .hs-turkey::after,
  .hs-waterfowl::after,
  .hs-predator::after,
  .hs-curated::after,
  .hs-firstlight::after,
  .hs-trophyland::after,
  .hs-transformer::after,
  .hs-camp::after,
  .hs-gunlock::after,
  .hs-trinity::after{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .interactive-canvas.is-ready .concept-image,
  .interactive-canvas.is-ready .field-wake,
  .interactive-canvas.is-ready .real-nav,
  .interactive-canvas.is-ready .hybrid-btn{
    animation:none !important;
  }
}


/* ==========================================================================
   v2.7.1 — FINAL VERTICAL REGISTRATION CORRECTION
   Small downward registration correction against the approved 1672×941 art.
   No visual-language, modal, glow, sizing, or behavior changes.
   ========================================================================== */

/* Real top navigation: ~3 px lower on the 941px source coordinate system. */
.real-nav{
  top:.870%;
}

/* Real hero controls: ~4 px lower. */
.hybrid-plan,
.hybrid-explore{
  top:33.050%;
}

/* Species interaction/glow regions: ~3 px lower. */
.hs-elk,
.hs-whitetail,
.hs-turkey,
.hs-waterfowl,
.hs-predator,
.hs-curated{
  top:45.090%;
}

/* Real venture controls: ~6 px lower so they sit on the baked button baseline. */
.venture-firstlight,
.venture-trophyland,
.venture-transformer,
.venture-camp,
.venture-gunlock{
  top:76.690%;
}

/* Trinity / Our Story control: ~5 px lower. */
.hybrid-btn--story{
  top:95.960%;
}

/* Keep hover lift refined; only one physical pixel of motion. */
.hybrid-btn:hover,
.hybrid-btn:focus-visible{
  transform:translateY(-1px);
}

/* End v2.7.1 registration correction */


/* ==========================================================================
   v2.7.3 — BUTTON REGISTER / PIXEL NUDGE
   IMPORTANT: These use real CSS-pixel nudges, not tiny percentage changes.
   This makes the downward move visibly obvious on the desktop preview.
   ========================================================================== */

/* Venture controls: move 12 CSS px below the original precision baseline,
   while making them slightly shorter so they remain inside the card frame. */
.venture-firstlight,
.venture-trophyland,
.venture-transformer,
.venture-camp,
.venture-gunlock{
  top:calc(76.089% + 12px) !important;
  height:2.45% !important;
}

/* Trinity / Our Story: move 12 CSS px lower and tighten slightly. */
.hybrid-btn--story{
  top:calc(95.430% + 12px) !important;
  height:2.00% !important;
}

/* Keep the real button type optically centered after the tighter height. */
.hybrid-btn--venture,
.hybrid-btn--story{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Venture-row button lift — final tactile polish */
.hybrid-btn--venture:hover,
.hybrid-btn--venture:focus-visible {
  transform: translateY(-2px) scale(1.008);

  filter: brightness(1.08) saturate(1.04);

  box-shadow:
    0 8px 18px rgba(0,0,0,.32),
    0 0 20px rgba(229,93,24,.13),
    inset 0 1px 0 rgba(255,255,255,.075);
}

.hybrid-btn--venture:active {
  transform: translateY(0) scale(.985);

  box-shadow:
    0 2px 7px rgba(0,0,0,.30),
    0 0 8px rgba(229,93,24,.07),
    inset 0 1px 4px rgba(0,0,0,.22);
}

/* End v2.7.3 */
/* ==========================================================================
   v2.8.0 — MOBILE + TABLET PRODUCTION PASS
   Desktop precision geometry is preserved.
   Strategy:
     - Desktop: exact v2.7.x field board remains authoritative.
     - Tablet: preserve board scale; allow bounded horizontal pan.
     - Phone: preserve visual board + provide real, large mobile controls below.
   ========================================================================== */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-width:0;
  overflow-x:hidden;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

button{
  touch-action:manipulation;
}

/* Hidden by default. They become the touch-first control surface below. */
.mobile-command,
.mobile-field-guide{
  display:none;
}

/* ---------- TABLET / SMALL LAPTOP ---------- */
@media(max-width:1024px){

  .preview-shell{
    min-height:100svh;
    min-height:100dvh;
    padding-top:12px;
    padding-bottom:38px;
  }

  .stage-wrap{
    width:96vw;
    max-width:none;
  }

  .stage-meta{
    min-height:26px;
    margin-bottom:5px;
  }

  .canvas-scroll{
    width:100%;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scroll-behavior:smooth;
  }

  /* 1000px preserves the artwork/UI registration and still lets 1024px
     landscape tablets see essentially the whole board. */
  .interactive-canvas{
    width:1000px !important;
    min-width:1000px !important;
    max-width:none !important;
  }

  .modal{
    padding:
      max(18px,env(safe-area-inset-top))
      max(18px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(18px,env(safe-area-inset-left));
  }

  .modal__panel{
    width:min(820px,calc(100vw - 36px));
    max-height:calc(100vh - 36px);
    max-height:calc(100dvh - 36px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  .modal-btn,
  .modal__close{
    min-height:44px;
  }
}

/* ---------- PHONE + PORTRAIT TABLET COMMAND MODE ---------- */
@media(max-width:820px){

  .preview-shell{
    padding:8px 0 30px;
  }

  .stage-wrap{
    width:100%;
  }

  .stage-meta{
    width:calc(100% - 24px);
    margin:0 auto 6px;
    min-height:28px;
    justify-content:center;
  }

  .preview-status{
    max-width:100%;
    margin:0;
    padding:7px 10px;
    font-size:.68rem;
  }

  .preview-status span:last-child,
  .field-time{
    display:none !important;
  }

  .mobile-command{
    position:sticky;
    top:0;
    z-index:70;
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    padding:
      max(5px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      6px
      max(8px,env(safe-area-inset-left));
    background:
      linear-gradient(180deg,rgba(5,8,7,.985),rgba(8,11,9,.955));
    border-top:1px solid rgba(255,255,255,.035);
    border-bottom:1px solid rgba(229,93,24,.24);
    box-shadow:0 8px 24px rgba(0,0,0,.26);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }

  .mobile-command__btn{
    min-width:0;
    min-height:44px;
    padding:6px 7px;
    border:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.018);
    color:rgba(245,234,219,.86);
    font-family:"Barlow Condensed",sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.065em;
    line-height:1.05;
    font-size:clamp(.62rem,2.45vw,.76rem);
    cursor:pointer;
  }

  .mobile-command__btn:active,
  .mobile-command__btn:focus-visible{
    outline:none;
    border-color:rgba(255,122,34,.48);
    background:rgba(229,93,24,.10);
    color:#fff2e2;
  }

  .mobile-command__btn--accent{
    border-color:rgba(255,122,34,.42);
    background:linear-gradient(100deg,#b94310,#e65c17 58%,#f87521);
    color:#fff7eb;
  }

  .mobile-command__btn--accent span{
    margin-left:3px;
  }

  .canvas-scroll{
    border-left:0;
    border-right:0;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }

  .canvas-scroll::-webkit-scrollbar{
    display:none;
  }

  /* Keep the visual board legible. Visitors can pan it horizontally,
     while the real mobile controls below remove any usability dependency
     on tiny in-art buttons. */
  .interactive-canvas{
    width:960px !important;
    min-width:960px !important;
    scroll-snap-align:start;
  }

  /* The desktop nav is too dense for a narrow touch viewport.
     Mobile command bar becomes authoritative here. */
  .real-nav{
    display:none !important;
  }

  .interaction-hint{
    display:none !important;
  }

  .mobile-hint{
    display:block !important;
    width:calc(100% - 28px);
    margin:10px auto 0;
    padding:8px 10px;
    border:1px solid rgba(255,122,34,.13);
    background:rgba(9,12,10,.64);
    color:rgba(238,226,209,.70);
    font-size:.67rem;
    line-height:1.3;
  }

  /* ---------- BIG TOUCH FIELD GUIDE ---------- */

  .mobile-field-guide{
    display:block;
    width:calc(100% - 24px);
    margin:14px auto 0;
    padding:22px 14px 16px;
    border:1px solid rgba(205,119,49,.19);
    background:
      radial-gradient(circle at 100% 0%,rgba(229,93,24,.075),transparent 28%),
      linear-gradient(180deg,rgba(15,20,17,.985),rgba(6,9,8,.995));
    box-shadow:
      0 22px 55px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.025);
  }

  .mobile-field-guide__head{
    max-width:560px;
    margin:0 auto 20px;
    text-align:center;
  }

  .mobile-field-guide__kicker{
    margin:0 0 7px;
    color:#e99d68;
    font-family:"Barlow Condensed",sans-serif;
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  .mobile-field-guide__head h2{
    margin:0;
    color:#f5e9d8;
    font-family:"Anton",Impact,sans-serif;
    font-size:clamp(2rem,9vw,3.1rem);
    font-weight:400;
    line-height:.95;
    letter-spacing:.025em;
    text-transform:uppercase;
  }

  .mobile-field-guide__head p:last-child{
    max-width:44ch;
    margin:10px auto 0;
    color:rgba(224,211,192,.70);
    font-size:.88rem;
    line-height:1.55;
  }

  .mobile-guide-block{
    max-width:650px;
    margin:20px auto 0;
  }

  .mobile-guide-block h3{
    margin:0 0 9px;
    color:#efcfaa;
    font-family:"Barlow Condensed",sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
  }

  .mobile-guide-grid{
    display:grid;
    gap:8px;
  }

  .mobile-guide-grid--species{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mobile-guide-grid--ventures{
    grid-template-columns:1fr;
  }

  .mobile-guide-grid button,
  .mobile-guide-actions button{
    min-height:48px;
    border:1px solid rgba(255,122,34,.26);
    border-radius:2px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:
      linear-gradient(180deg,rgba(16,20,17,.99),rgba(7,10,8,.995));
    color:#f3e6d4;
    font-family:"Barlow Condensed",sans-serif;
    font-size:.82rem;
    font-weight:700;
    line-height:1.08;
    letter-spacing:.06em;
    text-align:left;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:
      0 5px 14px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.025);
  }

  .mobile-guide-grid button > span,
  .mobile-guide-actions button > span{
    flex:0 0 auto;
    color:#f47a2b;
    font-family:Arial,sans-serif;
    font-weight:400;
  }

  .mobile-guide-grid button:active,
  .mobile-guide-grid button:focus-visible,
  .mobile-guide-actions button:active,
  .mobile-guide-actions button:focus-visible{
    outline:none;
    transform:scale(.985);
    border-color:rgba(255,122,34,.66);
    background:rgba(229,93,24,.10);
  }

  .mobile-guide-actions{
    max-width:650px;
    margin:16px auto 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .mobile-guide-actions__accent{
    background:
      linear-gradient(100deg,#bf4510 0%,#e85d17 54%,#ff7821 100%) !important;
    border-color:rgba(255,136,62,.72) !important;
    color:#fff6ea !important;
  }

  /* ---------- PHONE MODALS ---------- */

  .modal{
    align-items:end;
    padding:0;
  }

  .modal__panel{
    width:100%;
    max-width:none;
    max-height:88vh;
    max-height:88dvh;
    padding:
      48px
      max(22px,env(safe-area-inset-right))
      max(28px,calc(env(safe-area-inset-bottom) + 18px))
      max(24px,env(safe-area-inset-left));
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:18px 18px 0 0;
  }

  .modal__panel::after{
    inset:11px;
    border-radius:11px 11px 0 0;
  }

  .modal__close{
    top:8px;
    right:max(10px,env(safe-area-inset-right));
    width:42px;
    height:42px;
  }

  .modal__title{
    max-width:13ch;
    font-size:clamp(2.15rem,11vw,3.5rem);
  }

  .modal__body{
    font-size:.96rem;
    line-height:1.68;
  }

  .modal__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .modal-btn{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .trinity-layout{
    grid-template-columns:1fr;
    gap:18px;
  }

  .trinity-layout img{
    width:min(210px,62vw);
  }

  .countdown{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ---------- NARROW PHONES ---------- */
@media(max-width:420px){

  .mobile-command{
    padding-left:5px;
    padding-right:5px;
  }

  .mobile-command__btn{
    min-height:46px;
    padding-left:4px;
    padding-right:4px;
    letter-spacing:.045em;
    font-size:.60rem;
  }

  .interactive-canvas{
    width:900px !important;
    min-width:900px !important;
  }

  .mobile-guide-grid--species,
  .mobile-guide-actions{
    grid-template-columns:1fr;
  }

  .mobile-field-guide{
    width:calc(100% - 16px);
    padding-left:10px;
    padding-right:10px;
  }
}

/* ---------- SHORT LANDSCAPE PHONES (Galaxy S9+/similar) ---------- */
@media(orientation:landscape) and (max-height:520px) and (max-width:950px){

  .preview-shell{
    padding-top:4px;
  }

  .stage-meta{
    display:none;
  }

  .mobile-command{
    position:sticky;
    top:0;
    grid-template-columns:repeat(4,minmax(0,1fr));
    padding-top:max(4px,env(safe-area-inset-top));
    padding-bottom:4px;
  }

  .mobile-command__btn{
    min-height:38px;
    font-size:.63rem;
  }

  .interactive-canvas{
    width:980px !important;
    min-width:980px !important;
  }

  .mobile-hint{
    margin-top:6px;
    padding:6px 8px;
    font-size:.62rem;
  }

  .mobile-field-guide{
    margin-top:8px;
    padding-top:16px;
  }

  .mobile-field-guide__head{
    margin-bottom:13px;
  }

  .mobile-field-guide__head h2{
    font-size:2rem;
  }

  .mobile-field-guide__head p:last-child{
    margin-top:6px;
    font-size:.80rem;
  }

  .mobile-guide-block{
    margin-top:13px;
  }

  .mobile-guide-grid--species{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .mobile-guide-grid--ventures{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mobile-guide-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mobile-guide-grid button,
  .mobile-guide-actions button{
    min-height:42px;
    padding:8px 10px;
    font-size:.74rem;
  }

  .modal{
    place-items:center;
    padding:
      max(7px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(7px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }

  .modal__panel{
    width:min(92vw,760px);
    max-width:760px;
    max-height:calc(100dvh - 14px);
    border:1px solid rgba(229,93,24,.28);
    border-radius:10px;
    padding:34px 30px 24px;
  }

  .modal__panel::after{
    border-radius:7px;
  }

  .modal__title{
    font-size:clamp(1.9rem,7vw,2.8rem);
  }

  .modal__context{
    margin-bottom:10px;
  }

  .modal__rule{
    margin:13px 0 16px;
  }

  .modal__body{
    font-size:.88rem;
    line-height:1.48;
  }

  .modal__body p{
    margin-bottom:10px;
  }

  .season-intel{
    margin-bottom:14px;
    padding:11px;
  }

  .countdown{
    grid-template-columns:repeat(4,minmax(54px,1fr));
  }

  .modal__actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Touch: controls react to press/focus; desktop hover theatrics remain off. */
@media(hover:none){

  .hybrid-btn:active,
  .mobile-command__btn:active,
  .mobile-guide-grid button:active,
  .mobile-guide-actions button:active{
    filter:brightness(1.06);
  }

  .field-wake,
  .image-ready-sheen{
    pointer-events:none;
  }
}

/* Reduced motion remains a first-class path. */
@media(prefers-reduced-motion:reduce){

  .mobile-command,
  .mobile-field-guide *,
  .canvas-scroll{
    scroll-behavior:auto !important;
  }
}

/* End v2.8.0 mobile/tablet pass */


/* ==========================================================================
   v2.8.1 — MOBILE MENU BREAKPOINT FIX
   Fixes landscape phones/tablets that report wider CSS viewports and therefore
   missed the old <=820px mobile-command breakpoint.
   ========================================================================== */

/* Retire the old four-button quick bar completely. */
.mobile-command{
  display:none !important;
}

/* New sitebar/drawer are desktop-hidden by default. */
.mobile-sitebar,
.mobile-drawer{
  display:none;
}

/* IMPORTANT: 1100px is deliberate.
   Some landscape phones / browser configurations report >820 CSS px. */
@media(max-width:1100px){

  .mobile-sitebar{
    position:sticky;
    top:0;
    z-index:90;
    width:100%;
    min-height:54px;
    padding:
      max(6px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      6px
      max(10px,env(safe-area-inset-left));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:
      linear-gradient(180deg,rgba(5,8,7,.995),rgba(8,11,9,.965));
    border-top:1px solid rgba(255,255,255,.035);
    border-bottom:1px solid rgba(229,93,24,.28);
    box-shadow:0 8px 24px rgba(0,0,0,.32);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .mobile-sitebar__brand{
    flex:1 1 auto;
    min-width:0;
    color:#f3e7d6;
    font-family:"Anton",Impact,sans-serif;
    font-size:clamp(.92rem,2.7vw,1.18rem);
    line-height:1;
    letter-spacing:.045em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-sitebar__actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
  }

  .mobile-sitebar__menu,
  .mobile-sitebar__plan{
    appearance:none;
    min-height:42px;
    border-radius:2px;
    cursor:pointer;
    font-family:"Barlow Condensed",sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.065em;
    line-height:1;
  }

  .mobile-sitebar__menu{
    min-width:82px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.025);
    color:#eee1cf;
  }

  .mobile-sitebar__menu-icon{
    width:15px;
    display:grid;
    gap:3px;
  }

  .mobile-sitebar__menu-icon i{
    display:block;
    width:100%;
    height:1px;
    background:#f0782a;
    transition:transform .18s ease,opacity .18s ease;
  }

  .mobile-sitebar__plan{
    min-width:112px;
    padding:0 12px;
    border:1px solid rgba(255,135,61,.52);
    background:linear-gradient(100deg,#bd4410,#e75c17 58%,#fa7721);
    color:#fff7eb;
    box-shadow:0 5px 14px rgba(0,0,0,.20);
  }

  .mobile-sitebar__menu:focus-visible,
  .mobile-sitebar__plan:focus-visible{
    outline:1px solid rgba(255,145,76,.85);
    outline-offset:2px;
  }

  .mobile-sitebar__menu:active,
  .mobile-sitebar__plan:active{
    transform:scale(.98);
  }

  /* Drawer lives immediately under the sticky bar and opens in normal flow,
     so it cannot disappear behind the 960–1000px field board. */
  .mobile-drawer{
    position:relative;
    z-index:85;
    width:100%;
    padding:
      8px
      max(10px,env(safe-area-inset-right))
      10px
      max(10px,env(safe-area-inset-left));
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    background:
      radial-gradient(circle at 100% 0%,rgba(229,93,24,.075),transparent 30%),
      linear-gradient(180deg,rgba(12,16,13,.995),rgba(5,8,7,.995));
    border-bottom:1px solid rgba(229,93,24,.22);
    box-shadow:0 14px 26px rgba(0,0,0,.28);
  }

  .mobile-drawer.is-open{
    display:grid;
  }

  .mobile-drawer button{
    appearance:none;
    min-height:46px;
    padding:9px 11px;
    border:1px solid rgba(255,122,34,.20);
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:linear-gradient(180deg,rgba(18,22,18,.985),rgba(8,11,9,.99));
    color:#eee0cd;
    font-family:"Barlow Condensed",sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.07em;
    line-height:1.05;
    text-align:left;
    text-transform:uppercase;
    cursor:pointer;
  }

  .mobile-drawer button span{
    color:#f37729;
    font-family:Arial,sans-serif;
    font-weight:400;
  }

  .mobile-drawer button:active,
  .mobile-drawer button:focus-visible{
    outline:none;
    border-color:rgba(255,122,34,.60);
    background:rgba(229,93,24,.10);
  }

  /* Real desktop nav yields to the mobile sitebar at the same breakpoint. */
  .real-nav{
    display:none !important;
  }

  /* Mobile field guide should also appear through this wider range. */
  .mobile-field-guide{
    display:block;
  }

  .mobile-hint{
    display:block !important;
  }
}

/* Narrow phone drawer becomes one-column for easy thumbs. */
@media(max-width:560px){
  .mobile-sitebar__brand{
    font-size:.92rem;
  }

  .mobile-sitebar__menu{
    min-width:74px;
    padding-left:9px;
    padding-right:9px;
  }

  .mobile-sitebar__plan{
    min-width:104px;
    padding-left:9px;
    padding-right:9px;
    font-size:.68rem;
  }

  .mobile-drawer{
    grid-template-columns:1fr;
  }
}

/* Short landscape phones: compact sitebar, still unmistakably visible. */
@media(orientation:landscape) and (max-height:520px) and (max-width:1100px){
  .mobile-sitebar{
    min-height:46px;
    padding-top:max(4px,env(safe-area-inset-top));
    padding-bottom:4px;
  }

  .mobile-sitebar__menu,
  .mobile-sitebar__plan{
    min-height:36px;
  }

  .mobile-drawer{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    padding-top:5px;
    padding-bottom:6px;
  }

  .mobile-drawer button{
    min-height:38px;
    padding:6px 8px;
    font-size:.66rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-sitebar__menu-icon i{
    transition:none !important;
  }
}

/* End v2.8.1 */


/* ==========================================================================
   v2.8.2 — LOCKED MOBILE FIELD BOARD
   On touch/mobile/tablet widths the TLC artwork becomes a fixed visual poster.
   No horizontal panning. The real mobile menu + field guide become authoritative.
   Desktop geometry above 1100px remains untouched.
   ========================================================================== */

@media(max-width:1100px){

  /* No sideways page/canvas movement. */
  html,
  body,
  .preview-shell,
  .stage-wrap,
  .canvas-scroll{
    max-width:100%;
    overflow-x:hidden !important;
  }

  .canvas-scroll{
    width:100% !important;
    margin:0 !important;
    touch-action:pan-y;
    overscroll-behavior-x:none;
    scroll-snap-type:none !important;
  }

  /* Scale the entire 1672×941 board proportionally into the viewport. */
  .interactive-canvas{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 auto !important;
    aspect-ratio:1672 / 941;
    overflow:hidden !important;
  }

  .concept-image{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  /* The field board is now presentation on touch layouts.
     Keep real HTML controls visible so the cleaned artwork still looks complete,
     but route actual interaction through the mobile menu / field guide. */
  .interactive-canvas .hotspot,
  .interactive-canvas .hybrid-btn{
    pointer-events:none !important;
  }

  /* Remove interaction-only desktop ornament on the locked poster. */
  .pointer-glow,
  .field-sweep,
  .interaction-hint{
    display:none !important;
  }

  .mobile-hint{
    display:none !important;
  }

  /* Keep poster visually calm on mobile. */
  .interactive-canvas:hover .concept-image{
    filter:saturate(.995) contrast(1.012) brightness(.975);
  }
}

/* Portrait phones: give the poster a clean full-bleed presentation. */
@media(max-width:560px){
  .canvas-scroll{
    border-left:0 !important;
    border-right:0 !important;
  }

  .interactive-canvas{
    width:100% !important;
  }

  .mobile-field-guide{
    margin-top:10px;
  }
}

/* Short landscape phones: fit width, never create sideways scroll. */
@media(orientation:landscape) and (max-height:520px) and (max-width:1100px){
  .interactive-canvas{
    width:100% !important;
    min-width:0 !important;
  }

  .canvas-scroll{
    overflow:hidden !important;
  }
}

/* End v2.8.2 */