/* Stage 1: real HTML lettering, SVG paper and four mountain studies.
   All colour comes from the site's tokens. No transformed text or permanent layers. */
.hero { padding: 40px 0 calc(clamp(220px, 27vw, 520px) + 18px); isolation: isolate; }
.hero .hero-in { position: relative; z-index: 2; }
.hero .chip { margin-bottom: 24px; }
.hero h1 { font-size: clamp(30px, 5.2vw, 76px); gap: 20px; }
.hero .strip, .hero .strip + .strip, .hero .strip:hover {
  position: relative; isolation: isolate; padding: .12em .32em .17em;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  transform: none; animation: none; filter: none; color: var(--ink);
  line-height: 1.12; white-space: nowrap;
}
.hero .strip + .strip { color: var(--paper); }
.hero .strip::before, .hero .strip::after { content: none; }
.strip-paper { position: absolute; inset: -.08em -.05em; width: calc(100% + .1em); height: calc(100% + .16em); z-index: -1; pointer-events: none; overflow: visible; }
.strip-paper .paper-edge { fill: var(--teal); }
.strip-paper .paper-face { fill: var(--paper); }
.strip + .strip .paper-edge { fill: var(--deep); }
.strip + .strip .paper-face { fill: var(--teal); }
.hero .ctas { margin-top: 28px; }
.hero .hills { height: clamp(220px, 27vw, 520px); overflow: hidden; inset: auto 0 0; z-index: 0; }
/* A is the wider horizon. B brings the cone forward and reverses the balance. */
@media (max-width: 640px) {
  .hero { padding: 28px 0 164px; }
  .hero .chip { margin-bottom: 22px; font-size: 12px; }
  .hero h1 { font-size: clamp(22px, 6.5vw, 40px); gap: 18px; letter-spacing: -.025em; }
  .hero .ctas { margin-top: 24px; }
  .hero .hills { height: 172px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes mountain-enter { from { transform: translateY(24px); } to { transform: none; } }
}

/* Compact hero (Helgi 14:23 "too big"): smaller headline, the mountains as a slim band along the bottom edge.
   Esja is the long ridge behind, stretched wide and low (its SVG has preserveAspectRatio none); the other three keep their real shape. */
.hero { padding: 28px 0 calc(clamp(96px, 12.5vw, 190px) + 14px); }
.hero .chip { margin-bottom: 16px; }
.hero h1 { font-size: clamp(26px, 3.7vw, 52px); gap: 12px; }
.hero .ctas { margin-top: 20px; }
.hero .hills { height: clamp(96px, 12.5vw, 190px); }
@media (max-width: 640px) {
  .hero { padding: 22px 0 80px; }
  .hero .chip { margin-bottom: 14px; }
  .hero h1 { font-size: clamp(20px, 6vw, 30px); gap: 10px; }
  .hero .ctas { margin-top: 16px; }
  .hero .hills { height: 66px; }
}