/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* soft warm light falling from the top right */
  background: radial-gradient(110% 80% at 76% 10%,
              rgba(194, 160, 119, 0.13), rgba(247, 244, 238, 0) 58%);
}
.hero { position: relative; padding-block: clamp(40px, 6vw, 84px) clamp(70px, 9vw, 120px); }
.squiggle-hero-left { left: -40px; top: 18%; width: 120px; height: 420px; }

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.hero h1 { font-size: clamp(40px, 6.6vw, 82px); margin-bottom: 26px; }
.hero .lede { margin-bottom: 34px; }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-media { position: relative; }
.arch-hero {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 4.7;
  max-width: 460px;
  margin-left: auto;
}
/* thin outline arch echoing the photo */
.arch-outline {
  position: absolute;
  z-index: 1;
  right: -18px;
  top: -26px;
  width: min(470px, 96%);
  aspect-ratio: 4 / 4.9;
  border: 1px solid var(--line);
  border-radius: 50vw 50vw 18px 18px / 34vw 34vw 18px 18px;
}
.sparkle-a { width: 26px; top: 4%; left: 6%; z-index: 3; }
.sparkle-b { width: 16px; top: 46%; left: 0; z-index: 3; opacity: 0.4; }