/* Hero-specific typography and proportions measured from the primary reference. */
.hero {
  --hero-green: #034c29;
  --hero-inset: clamp(24px, 3.4722vw, 80px);
  grid-template-columns: 53% 47%;
  min-height: 805px;
  max-width: 1920px;
  color: var(--hero-green);
  font-family: 'Switzer', Arial, sans-serif;
  font-weight: 500;
  overflow: clip;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 95px 40px 95px var(--hero-inset);
  position: relative;
  z-index: 3;
}
.hero-kicker {
  margin: 0 0 24px;
  font: 400 20px/1.4 'Architects Daughter', cursive;
  letter-spacing: .4px;
  color: #567c36;
  rotate: -3deg;
  transform-origin: left center;
}
/* Her, cut out and leaning into the headline, the way a sticker would be stuck
   on. It sits behind the words rather than beside them: the copy column has no
   room to give up, and the overlap is what makes it read as stuck on rather
   than laid out. Nothing here is clickable — the portrait in the kicker is the
   link to her story.
   She is anchored to the headline block and lifted clear of it, so she sits in
   the empty corner the two ragged lines leave rather than across the words.
   The offsets are measured against where the lines actually end at each width,
   which is why they are set per breakpoint rather than in one place.
   She comes down to just above the letters rather than to the top of their
   line box: a line box carries 12 to 27px of leading above the capitals here,
   and sizing her against the box gave all of that away for nothing. */
.hero-headline { position: relative; width: 100%; }
.hero-sticker {
  position: absolute;
  z-index: -1;
  right: -18px;
  bottom: 96px;
  width: 235px;
  height: auto;
  transform: rotate(3deg);
  pointer-events: none;
  user-select: none;
  /* The white die-cut edge a printed sticker has. There is no border property
     that follows the shape of a cut-out, so it is built from drop shadows with
     no blur and no offset: each pass spreads the last one a little further out
     in white, and four of them compound into a solid rim. The last shadow is
     the one that lifts her off the page. */
  filter:
    drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 10px 24px #204a2d2e);
}

.hero h1 {
  font-family: 'Libre Caslon Condensed', Georgia, serif;
  font-size: 90px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: normal;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-bottom: 8px;
}
.hero-title-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  transform-origin: left top;
}
.hero h1 em {
  font-family: inherit;
  font-weight: 500;
  color: inherit;
}
.hero-description {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  color: #515953;
  max-width: 500px;
  margin-top: 14px;
  transform-origin: left center;
}
.hero-ctas {
  margin-top: 34px;
  gap: 28px;
  flex-direction: row;
  align-items: center;
}
.hero-ctas .button {
  font-size: 16px;
  min-height: 62px;
  padding: 18px 27px;
  background: #bdff83;
  color: var(--hero-green);
  border: 1px solid var(--hero-green);
}
.hero-ctas .button:hover { background: #d1ffa9; }
.hero-ctas .text-link { font-size: 15px; }
.hero-features {
  border: 0;
  margin-top: 72px;
  padding: 0;
  gap: 48px;
  max-width: none;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.hero-features > span {
  flex-direction: column;
  text-align: center;
  gap: 13px;
  color: #515953;
  font-size: 14px;
  line-height: 1.3;
}
.hero-features .feature-icon { width: 48px; height: 48px; color: var(--hero-green); }
.hero-visual {
  margin: 0;
  min-height: 100%;
  transform-origin: right center;
}
.hero-image-frame {
  inset: 0 -28px 0 0;
  border-radius: 500px 0 0 500px;
  background: #e6e9d6;
}
.hero-image { object-position: 50% 50%; transition: none; }
.hero-visual:hover .hero-image { transform: none; }
.hero-intro-pending .hero-title-line,
.hero-intro-pending .hero-sticker,
.hero-intro-pending .hero-kicker,
.hero-intro-pending .hero-description,
.hero-intro-pending .hero-ctas,
.hero-intro-pending .hero-features > span,
.hero-intro-pending .hero-visual { opacity: 0; }

@media (min-width: 1600px) {
  .hero-sticker { width: 274px; right: -30px; bottom: 110px; }
  .hero { min-height: 880px; }
  .hero h1 { font-size: 108px; }
  .hero-description { max-width: 560px; }
}
@media (min-width: 951px) and (max-width: 1190px) {
  .hero { min-height: 730px; grid-template-columns: 54% 46%; }
  .hero-copy { padding-top: 80px; padding-bottom: 80px; padding-right: 28px; }
  .hero-sticker { width: 226px; right: -20px; bottom: 84px; }
  .hero h1 { font-size: 74px; }
  .hero-kicker { font-size: 17px; }
  .hero-description { font-size: 17px; }
  .hero-ctas { gap: 18px; }
  .hero-ctas .button { font-size: 13px; padding: 17px; min-height: 56px; }
  .hero-ctas .text-link { font-size: 12px; }
  .hero-features { gap: 27px; margin-top: 55px; }
  .hero-features > span { font-size: 11px; }
  .hero-features .feature-icon { width: 40px; height: 40px; }
}
@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 65px var(--hero-inset) 60px; }
  .hero-sticker { width: clamp(180px, 23vw, 208px); right: -6px; bottom: 70px; }
  .hero h1 { font-size: clamp(62px, 10.2vw, 84px); }
  .hero-description { font-size: 18px; max-width: 590px; }
  .hero-kicker { font-size: 19px; }
  .hero-features { margin-top: 46px; gap: 42px; }
  .hero-features > span { font-size: 13px; }
  .hero-visual { height: 530px; min-height: 0; margin-left: var(--hero-inset); }
  .hero-image-frame { border-radius: 500px 0 0 500px; }
}
@media (max-width: 700px) {
  .hero-copy { padding: 52px 24px 45px; }
  /* A phone leaves her one clear corner — right of the kicker and of the
     headline's short first line, above its longer second one. It is the
     tightest of the lot, but not as tight as it first looked: reaching down to
     the letters rather than to their line box is worth about a third again
     here. */
  /* "& food healer." drops to its own line here, which is how the kicker was
     originally set, and keeps the handwriting clear of her.

     On a phone she stops keeping out of the headline's way. The corner left by
     the two ragged lines is only about a third of the screen wide, which made
     her too small to read as a photograph at all. So here she goes back to
     sitting behind the words, as in the first sketch of this: she is behind
     them in the stacking order, her coat is white where the type crosses it,
     and the die-cut rim keeps the two apart. The kicker is still hers to avoid
     — green handwriting over dark hair was unreadable. */
  .hero-kicker > span { display: block; }
  .hero-sticker { width: min(46vw, 185px); right: -8px; bottom: 16px; }
  .hero h1 { font-size: clamp(47px, 14.2vw, 66px); line-height: 1.08; letter-spacing: 0; }
  .hero-kicker { font-size: 15px; letter-spacing: 0; margin-bottom: 24px; }
  .hero-description { font-size: 16px; line-height: 1.5; margin-top: 17px; max-width: 440px; }
  .hero-ctas { margin-top: 26px; gap: 20px; }
  .hero-ctas .button { font-size: 12px; min-height: 54px; padding: 16px 18px; gap: 16px; }
  .hero-ctas .text-link { font-size: 11px; gap: 9px; }
  .hero-features { width: 100%; gap: 15px; justify-content: space-between; margin-top: 37px; }
  .hero-features > span { font-size: 10px; gap: 9px; max-width: 102px; }
  .hero-features .feature-icon { width: 34px; height: 34px; }
  .hero-visual { height: clamp(370px, 112vw, 520px); margin-left: 24px; }
}