<section class="hs-prx" aria-label="Hero">
  <div class="hs-prx-sky" aria-hidden="true"></div>
  <div class="hs-prx-sun" aria-hidden="true"></div>
  <svg
    class="hs-prx-m hs-prx-m3"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,180 L120,80 L240,140 L360,60 L480,120 L600,40 L720,110 L840,70 L960,130 L1080,90 L1200,150 L1200,320 Z"
      fill="#5a7a8a"
    />
  </svg>
  <svg
    class="hs-prx-m hs-prx-m2"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,220 L100,140 L200,200 L320,120 L440,180 L560,100 L680,170 L800,130 L920,200 L1040,150 L1200,200 L1200,320 Z"
      fill="#3a5868"
    />
  </svg>
  <svg
    class="hs-prx-m hs-prx-m1"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,260 L120,200 L240,240 L360,180 L480,220 L600,160 L720,210 L840,170 L960,230 L1080,190 L1200,240 L1200,320 Z"
      fill="#1f3a4a"
    />
  </svg>
  <div class="hs-prx-inner">
    <span class="hs-prx-eye">— EST. 1958 · LAKE COUNTRY</span>
    <h2>Trails that <em>earn the silence.</em></h2>
    <p>Six lodges. One ridge. The mountains your grandfather wrote home about.</p>
    <a class="hs-prx-cta" href="#book">Reserve a cabin →</a>
  </div>
</section>

.hs-prx {
  position: relative; overflow: hidden;
  width: 100%; min-height: 480px;
  background: linear-gradient(180deg, #d8e8f0 0%, #a8c8d8 60%, #5a7a8a 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a2840;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-prx-sky { position: absolute; inset: 0;
  background: radial-gradient(50% 70% at 80% 30%, rgba(255,240,210,0.4), transparent 70%); }
.hs-prx-sun {
  position: absolute; top: 18%; right: 18%;
  width: 80px; height: 80px; border-radius: 50%;
  background: #f9f0d6;
  box-shadow: 0 0 60px rgba(249,240,214,0.7);
}
.hs-prx-m {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 60%;
  animation: hs-prx-float 12s ease-in-out infinite alternate;
}
.hs-prx-m1 { z-index: 3; height: 38%; animation-duration: 8s; }
.hs-prx-m2 { z-index: 2; height: 50%; animation-duration: 12s; animation-delay: -2s; }
.hs-prx-m3 { z-index: 1; height: 65%; animation-duration: 16s; animation-delay: -4s; }
@keyframes hs-prx-float {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2%); }
}
.hs-prx-inner {
  position: relative; z-index: 4;
  padding: clamp(28px, 5vw, 56px);
  max-width: 540px;
}
.hs-prx-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  color: #1f3a4a; margin-bottom: 14px;
}
.hs-prx h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  color: #0d2030;
}
.hs-prx h2 em { color: #1f3a4a; font-style: italic; }
.hs-prx p { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: #2a4858; max-width: 420px; }
.hs-prx-cta {
  display: inline-block; padding: 12px 22px;
  background: #f9f0d6; color: #1f3a4a;
  border: 2px solid #1f3a4a; border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.hs-prx-cta:hover { background: #1f3a4a; color: #f9f0d6; }
@media (prefers-reduced-motion: reduce) {
  .hs-prx-m { animation: none; }
  .hs-prx-cta { transition: none; }
}