@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Work Sans', system-ui, sans-serif; background: #FAF7F0; color: #1D2333; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; margin: 0; }
img { max-width: 100%; }

@keyframes settleIn { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 rgba(201,164,76,0); } 50% { box-shadow: 0 0 26px rgba(201,164,76,0.55); } }
@keyframes dotPing { 0% { box-shadow: 0 0 0 0 rgba(201,164,76,0.55); } 100% { box-shadow: 0 0 0 14px rgba(201,164,76,0); } }

.nav-link { position: relative; padding-bottom: 4px; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background: #B8874B; transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }

.cta-gold { transition: all 0.3s ease; display: inline-block; }
.cta-gold:hover { background: #A67A3D; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(184,135,75,0.35); }
.cta-gold:hover .btn-arrow { transform: translateX(5px); }
.cta-outline-line { transition: all 0.3s ease; border-bottom: 1px solid rgba(255,255,255,0.7); }
.cta-outline-line:hover { border-color: #C9A44C; color: #C9A44C; }
.cta-outline-line:hover .btn-arrow { transform: translateX(5px); }
.cta-ghost { transition: all 0.3s ease; border: 1px solid #1D2A4D; display: inline-block; }
.cta-ghost:hover { background: #1D2A4D; color: #FAF7F0 !important; }
.btn-arrow { display: inline-block; transition: transform 0.3s ease; margin-left: 4px; }

.lift { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.lift:hover { transform: translateY(-8px); box-shadow: 0 24px 44px rgba(29,42,77,0.2); }

.img-zoom { overflow: hidden; display: block; }
.img-zoom img { transition: transform 0.7s cubic-bezier(.2,.7,.3,1); display: block; }
.img-zoom:hover img { transform: scale(1.09); }

.settle { animation: settleIn 1.1s cubic-bezier(.2,.7,.3,1) both; }

.swipe-row { scrollbar-width: thin; scrollbar-color: #4A5578 transparent; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.swipe-row::-webkit-scrollbar { height: 8px; }
.swipe-row::-webkit-scrollbar-thumb { background: #4A5578; border-radius: 8px; }
.swipe-card { scroll-snap-align: start; }

.badge-pulse { animation: pulseGlow 2.6s ease-in-out infinite; }

.hero-split { position: relative; width: 100%; display: flex; flex-wrap: wrap; }
.split-panel { position: relative; overflow: hidden; flex: 1 1 480px; min-height: 640px; display: flex; align-items: flex-end; transition: flex-grow 0.6s cubic-bezier(.2,.8,.3,1); }
.split-bg { transition: transform 1.2s ease; }
.scrim { transition: opacity 0.6s ease; }
.hero-split:has(.panel-a:hover) .panel-a { flex-grow: 1.7; }
.hero-split:has(.panel-a:hover) .panel-b { flex-grow: 0.7; }
.hero-split:has(.panel-b:hover) .panel-b { flex-grow: 1.7; }
.hero-split:has(.panel-b:hover) .panel-a { flex-grow: 0.7; }
.hero-split:has(.panel-a:hover) .panel-a .split-bg { transform: scale(1.06); }
.hero-split:has(.panel-b:hover) .panel-b .split-bg { transform: scale(1.06); }
.hero-split:has(.panel-a:hover) .panel-a .scrim { opacity: 0.55; }
.hero-split:has(.panel-b:hover) .panel-b .scrim { opacity: 0.55; }

.bg-parallax { background-attachment: fixed; background-size: cover; background-position: center; }
.bg-klagon { background-image: url(../images/render3_rot_cw.jpg); }

.hotspot-dot { animation: dotPing 2.2s ease-out infinite; cursor: pointer; }

input[type="range"].alex-slider { -webkit-appearance: none; width: 100%; height: 4px; background: rgba(29,42,77,0.25); border-radius: 4px; outline: none; }
input[type="range"].alex-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #B8874B; border: 3px solid #FAF7F0; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; }
input[type="range"].alex-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #B8874B; border: 3px solid #FAF7F0; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; }

.drawer-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.drawer-panel.open { max-height: 420px; }

@media (max-width: 860px) {
  .hero-badge { display: none; }
  .split-panel { flex-basis: 100% !important; min-height: 480px !important; flex-grow: 1 !important; }
  .grid-gallery { grid-template-columns: 1fr !important; height: auto !important; }
  .grid-gallery > div { grid-row: auto !important; height: 220px; }
  .bg-parallax { background-attachment: scroll; }
}

/* index.html is at the site root; other pages reference css/js as ./css/... so bg-klagon path above (../images) is overridden per-page inline where needed */