/* Image frames (replaces the old <image-slot> editor component) */
.img-slot { display: block; position: relative; width: 100%; height: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(127,127,127,.08); }
.img-slot--circle { border-radius: 50%; }
.img-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: cover; -webkit-user-drag: none; user-select: none; }

/* Hover / active / ::before / ::after styles (formerly style-hover="…" etc.).
   !important is needed so they win over the elements' inline styles. */
.hover-1:hover { transform: translateY(-2px) !important; box-shadow: 0 5px 12px rgba(138,51,36,0.5) !important; filter: brightness(1.12) !important }
.hover-2:hover { border-color: #8a3324 !important; background: rgba(23,17,12,0.9) !important; transform: translateX(4px) !important }
.hover-3:hover { transform: translateY(-3px) !important; background: rgba(138,51,36,0.25) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 15px rgba(212,175,55,0.6) !important }
.hover-4:hover { transform: translateY(-3px) !important; background-position: 0 0 !important; box-shadow: 0 6px 14px rgba(0,0,0,0.4) !important }
.hover-5:hover { transform: scale(1.06) !important; color: #f7e6c0 !important; border-color: rgba(224,182,79,0.8) !important; background: rgba(46,31,18,0.7) !important }
.hover-6:hover { transform: translateY(-4px) !important; border-color: #7a5a2c !important; box-shadow: 0 18px 34px rgba(0,0,0,0.5), 0 0 22px rgba(201,162,74,0.16), inset 0 0 0 1px rgba(217,178,95,0.14) !important; z-index: 2 !important; animation-play-state: paused !important }
.hover-7:hover { transform: scale(1.14) translateY(-1px) !important; text-shadow: 0 0 18px rgba(217,178,95,0.5) !important }
.hover-8:hover { color: #f7e6c0 !important; border-color: #7a5a2c !important; background: #2a1c10 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 14px rgba(201,162,74,0.16) !important }
.hover-9:hover { border-color: #8a3324 !important; transform: translateY(-2px) !important; box-shadow: 0 10px 22px rgba(0,0,0,0.42), 0 0 14px rgba(201,162,74,0.14) !important }
.hover-10:hover { transform: translateY(-3px) !important; border-color: #6a4a2c !important; box-shadow: 0 18px 34px rgba(0,0,0,0.45), 0 0 20px rgba(201,162,74,0.12) !important }
.hover-11:hover { border-color: #8a3324 !important; color: #e0c48a !important }
.hover-12:hover { border-color: #8a3324 !important }
.hover-13:hover { background: linear-gradient(90deg, rgba(217,178,95,0.09), rgba(217,178,95,0)) !important; transform: translateX(5px) !important }
.hover-14:hover { color: #f0dfb0 !important }
.hover-15:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 34px rgba(0,0,0,0.5) !important; border-color: #5c3a22 !important }
.hover-15 .img-slot { overflow: hidden }
.hover-15 .img-slot img { transition: transform .5s ease }
.hover-15:hover .img-slot img { transform: scale(1.05) }
.hover-16:hover { border-color: #8a3324 !important; color: #e0c48a !important; background: rgba(138,51,36,0.15) !important }
.hover-17:hover { border-color: #e6c78a !important; background: #2a1c10 !important; box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 18px rgba(201,162,74,0.25) !important; transform: translateY(-2px) !important }
.hover-18:hover { border-color: rgba(217,178,95,0.55) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 26px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(217,178,95,0.12) !important }
.hover-19:hover { border-color: rgba(176,69,58,0.55) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 26px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(176,69,58,0.12) !important }
.hover-20:hover { color: #d9b25f !important }
.hover-21:hover { border-color: rgba(127,154,92,0.55) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 26px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(127,154,92,0.12) !important }
.hover-22:hover { border-color: #e6c78a !important; background: #2a1c10 !important; box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 14px rgba(201,162,74,0.2) !important; transform: translateY(-2px) !important }
.hover-23:hover { transform: scale(1.12) !important }
.hover-24:hover { border-color: rgba(217,178,95,0.45) !important; transform: translateY(-2px) !important }
.hover-25:hover { border-color: rgba(192,90,72,0.45) !important; transform: translateY(-2px) !important }
.hover-26:hover { border-color: rgba(127,154,92,0.45) !important; transform: translateY(-2px) !important }
.hover-27:hover { opacity: 1 !important; transform: scale(1.03) !important }
.hover-28:hover { opacity: 1 !important; border-color: rgba(217,178,95,0.45) !important; transform: translateY(-2px) !important }
.hover-29:hover { transform: scale(1.012) !important; border-color: #c9a24a !important; background: rgba(40,29,19,0.65) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 16px rgba(201,162,74,0.18) !important }
.before-1::before { content: ''; position: absolute; top: 50%; right: calc(100% + 14px); width: 44px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,140,80,0.7)); }
.after-1::after { content: ''; position: absolute; top: 50%; left: calc(100% + 10px); width: 44px; height: 1px; background: linear-gradient(90deg, rgba(201,140,80,0.7), transparent); }
.before-2::before { filter: brightness(var(--emberB)); transition: filter .3s ease; content: ''; position: absolute; inset: -1px; border-radius: 4px; padding: 1.5px; background: conic-gradient(from var(--emberAngle), transparent 0deg, transparent 250deg, rgba(140,62,30,0.35) 290deg, #c8743a 330deg, #f0c27a 352deg, #ffe2a8 358deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: emberOrbit 9s linear infinite; pointer-events: none; }
.after-2::after { content: ''; position: absolute; inset: -3px; border-radius: 6px; padding: 3px; background: conic-gradient(from var(--emberAngle), transparent 0deg, transparent 280deg, rgba(200,110,50,0.25) 320deg, rgba(240,170,90,0.6) 355deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: blur(4px) brightness(var(--emberB)); opacity: var(--emberGlow); transition: filter .3s ease, opacity .3s ease; animation: emberOrbit 9s linear infinite; pointer-events: none; }
.hover-30:hover { color: #c94a35 !important }
.hover-31:hover { opacity: 1 !important; color: #f6e6c0 !important; text-shadow: 0 0 8px rgba(230,180,110,0.22) !important; border-color: rgba(192,122,69,0.32) !important; border-left-color: rgba(192,122,69,0.6) !important; box-shadow: inset 0 1px 0 rgba(255,236,200,0.09), 0 6px 14px -6px rgba(0,0,0,0.55), -2px 0 10px -4px rgba(170,80,45,0.35) !important }
.hover-32:hover { background: rgba(138,51,36,0.1) !important; border-left-color: #8a3324 !important }
.hover-33:hover { backdrop-filter: blur(12px) saturate(118%) sepia(20%) brightness(0.92) contrast(1.05) !important; -webkit-backdrop-filter: blur(12px) saturate(118%) sepia(20%) brightness(0.92) contrast(1.05) !important; border-color: rgba(201,162,110,0.22) !important; border-top-color: rgba(240,212,165,0.34) !important; border-left-color: #7a3322 !important; box-shadow: inset 0 1px 0 rgba(255,236,200,0.14), inset 0 -1px 0 rgba(255,220,170,0.05), inset 0 -18px 30px -18px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,232,190,0.03), inset 10px 0 18px -10px rgba(170,70,45,0.28), -3px 0 14px -4px rgba(138,51,36,0.35), 0 12px 30px -8px rgba(0,0,0,0.48), 0 2px 6px rgba(0,0,0,0.2) !important }
.hover-34:hover { color: #f0dfb0 !important; border-color: #6a4a2c !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important }
.active-1:active { transform: translateY(0) !important }
.hover-35:hover { background: #8a3324 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(138,51,36,0.35) !important }
.hover-36:hover { transform: translateY(-3px) !important; border-color: #8a6a3a !important; box-shadow: 0 16px 36px rgba(0,0,0,0.42), 0 0 0 1px rgba(200,160,80,0.16), 0 0 22px rgba(200,160,80,0.12), inset 0 1px 0 rgba(240,223,176,0.1) !important }
.hover-37:hover { background: #8a3324 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(138,51,36,0.35), 0 0 14px rgba(200,160,80,0.12) !important }
.hover-38:hover { border-color: #8a3324 !important; background: #8a3324 !important; transform: translateY(-50%) scale(1.09) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 16px rgba(138,51,36,0.35) !important }
.active-2:active { transform: translateY(-50%) scale(0.97) !important }
.hover-39:hover { border-color: #a5813f !important }
.hover-40:hover { background: rgba(138,51,36,0.28) !important; color: #f0dfb0 !important }
.hover-41:hover { transform: translateY(-6px) !important; border-color: rgba(217,178,95,0.6) !important; box-shadow: 0 20px 34px rgba(0,0,0,0.5), 0 0 26px rgba(217,178,95,0.14) !important; background: linear-gradient(180deg, rgba(52,35,23,0.72), rgba(30,21,14,0.72)) !important }
.hover-42:hover { background: rgba(138,51,36,0.18) !important; box-shadow: 0 0 18px rgba(138,51,36,0.25) !important }
.hover-43:hover { background: rgba(138,51,36,0.42) !important }
.hover-44:hover { border-color: #6a5636 !important }

.hero-pill { overflow: hidden; transition: transform .55s cubic-bezier(.2,.8,.3,1.1), box-shadow .55s ease, border-color .55s ease, filter .55s ease !important; will-change: transform; }
.hero-pill::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; background: linear-gradient(105deg, transparent 0%, rgba(255,236,205,0.10) 45%, rgba(255,236,205,0.18) 50%, rgba(255,236,205,0.10) 55%, transparent 100%); transform: skewX(-12deg); opacity: 0; transition: left 1.3s ease, opacity .5s ease; }
.hero-pill::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,238,205,0.10), rgba(255,238,205,0) 55%); opacity: 0; transition: opacity .5s ease; }
.hero-pill:hover { transform: translateY(-3px) scale(1.04) !important; border-top-color: rgba(235,205,155,0.42) !important; border-left-color: #8a3324 !important; filter: brightness(1.08) !important; box-shadow: inset 0 1px 0 rgba(255,238,205,0.18), 0 18px 34px -10px rgba(0,0,0,0.65), 0 6px 14px -2px rgba(0,0,0,0.3), 0 0 14px rgba(192,122,69,0.18) !important; }
.hero-pill:hover::after { left: 120%; opacity: 1; }
.hero-pill:hover::before { opacity: 1; }

.faq-pill { overflow: hidden; transition: transform .55s cubic-bezier(.2,.8,.3,1.1), box-shadow .55s ease, border-color .55s ease, filter .55s ease !important; }
.faq-pill::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 35%; pointer-events: none; background: linear-gradient(105deg, transparent 0%, rgba(255,236,205,0.07) 45%, rgba(255,236,205,0.13) 50%, rgba(255,236,205,0.07) 55%, transparent 100%); transform: skewX(-12deg); opacity: 0; transition: left 1.5s ease, opacity .5s ease; }
.faq-pill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; background: linear-gradient(180deg, rgba(255,238,205,0.08), rgba(255,238,205,0)); opacity: 0; transition: opacity .5s ease; }
.faq-pill:hover { transform: translateY(-2px) scale(1.012) !important; border-top-color: rgba(235,205,155,0.40) !important; border-left-color: #8a3324 !important; filter: brightness(1.07) !important; box-shadow: inset 0 1px 0 rgba(255,238,205,0.16), 0 18px 34px -10px rgba(0,0,0,0.65), 0 6px 14px -2px rgba(0,0,0,0.3), 0 0 14px rgba(192,122,69,0.14) !important; }
.faq-pill:hover::after { left: 120%; opacity: 1; }
.faq-pill:hover::before { opacity: 1; }

.hover-play:hover { transform: translateY(-3px) !important; background: rgba(138,51,36,0.25) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 15px rgba(212,175,55,0.45) !important }
.hover-card:hover { transform: translateY(-3px) !important; border-color: rgba(201,150,90,0.35) !important; border-left-color: #8a3324 !important; box-shadow: inset 0 1px 0 rgba(255,238,205,0.14), 0 18px 36px -10px rgba(0,0,0,0.6), 0 0 18px rgba(212,150,80,0.18) !important }

.map-pin:hover { z-index: 3 !important; }
.map-pin:hover .map-pin-dot { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(217,178,95,0.35), 0 6px 14px rgba(0,0,0,0.55) !important; }
.map-pin:hover .map-pin-label { background: #8a3324 !important; color: #f6e3b0 !important; }
@media (max-width: 560px) { .map-pin-label span { display: none; } }
@media (max-width: 760px) { .map-pop { position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: auto !important; max-height: none !important; margin: 12px 0 0; } }