/* ==========================================================================
   HERO
   Forest ground (the 60 of the 60/30/10). The portrait stands in a hairline
   frame and breaks out of its top edge, so he reads as present in the room
   rather than boxed in a photo. His signature is laid across the foot of
   the frame, exactly as the brand book places it on the cover mockups.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--forest);
  color: var(--on-forest-body);
  padding-block: clamp(6.75rem, 5rem + 6vw, 9.5rem) clamp(4rem, 3rem + 4vw, 6.5rem);
}

/* --- Ground: one soft pool of warm light behind the portrait ------------ */
.hero__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.035), transparent 55%),
    linear-gradient(180deg, var(--forest) 0%, #0D3B38 100%);
}

.hero__glow {
  position: absolute;
  inline-size: 46rem;
  block-size: 46rem;
  inset-block-start: 8%;
  inset-inline-end: -14rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--copper-rgb), 0.16) 0%, rgba(var(--copper-rgb), 0) 62%);
  filter: blur(10px);
}

/* --- Grid ----------------------------------------------------------------- */
.hero__grid {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(3rem, 1rem + 4vw, 6rem);
  }
}

/* --- Copy ----------------------------------------------------------------- */
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 47.99rem) {
  .hero__copy {
    align-items: center;
    text-align: center;
  }
}

.hero__title {
  font-size: var(--step-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--on-forest);
  max-inline-size: 18ch;
}

.hero__lead {
  font-size: var(--step-lead);
  line-height: 1.65;
  color: var(--on-forest-body);
  max-inline-size: 46ch;
}

/* Long-form reading copy keeps natural alignment even on mobile. */
@media (max-width: 47.99rem) {
  .hero__lead { text-align: start; }
}

.hero__actions {
  margin-block-start: var(--space-xs);
}

/* --- Portrait -------------------------------------------------------------- */
.hero__portrait {
  position: relative;
  inline-size: min(100%, 24rem);
  aspect-ratio: 4 / 5.3;
  margin-inline: auto;
  margin-block-end: 2.5rem;
}

@media (min-width: 64rem) {
  .hero__portrait {
    inline-size: 100%;
    max-inline-size: 26rem;
    margin-inline-end: 0;
  }
}

/* The hairline frame starts below the top of the figure, so the head and
   shoulders rise out of it. */
.hero__frame {
  position: absolute;
  inset: 16% 0 0;
  border: 1px solid var(--line-on-forest);
  border-radius: var(--radius-md);
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(var(--cream-rgb), 0.07), transparent 70%),
    linear-gradient(180deg, var(--forest-raised) 0%, rgba(19, 74, 70, 0.25) 100%);
}

.hero__photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Softens the waist cut and gives the signature a calm ground to sit on. */
.hero__portrait::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 34%;
  border-end-start-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(14, 63, 60, 0) 0%, rgba(14, 63, 60, 0.92) 78%, var(--forest) 100%);
  pointer-events: none;
}

.hero__signature {
  position: absolute;
  z-index: var(--z-raised);
  inset-inline: 2% -6%;
  inset-block-end: -2.25rem;
}

.hero__signature img {
  inline-size: 100%;
  block-size: auto;
}

/* --- Entrance state --------------------------------------------------------
   Hidden only while motion is available; hero.js plays them in.
   ----------------------------------------------------------------------- */
.js-motion [data-hero] {
  opacity: 0;
}