/* Revision 12: the full introduction remains on the family photograph. */
@media(max-width:599px){
  .hero .hero-figure{height:clamp(570px,150vw,670px)}
  .hero .hero-overlay{inset:16px 18px auto}
  .hero .hero-overlay h1{font-size:clamp(28px,7.7vw,35px);line-height:1.04}
  .hero .hero-description{font-size:13px;line-height:1.4;max-width:310px;margin-top:10px}
  .hero .hero-actions{margin-top:12px;gap:14px}
  .hero .hero-actions>.button{min-height:44px;padding:10px 14px}
}
@media(max-width:359px){.hero .hero-overlay{inset:16px 14px auto}.hero .hero-overlay h1{font-size:27px}.hero .hero-description{margin-top:9px}.hero .hero-actions{margin-top:10px;gap:10px}}
@media(min-width:600px) and (max-width:899px){.hero .hero-description{max-width:420px}}
@media(min-width:900px){.hero .hero-description{max-width:350px}}

/* Revision 19: stronger introductory text directly on the photograph, without a paragraph backing. */
.hero .hero-description{position:relative;isolation:isolate;color:var(--green-dark);font-weight:600;line-height:1.45;text-shadow:none}
@media(max-width:599px){.hero .hero-description{font-size:14px}}
@media(max-width:359px){.hero .hero-description{font-size:13.5px}}

/* Revision 29: a smaller mobile hero, preserving the entire original photo. */
@media(max-width:599px){
  .hero.wrap{padding-top:0}
  .hero .hero-figure{height:auto;aspect-ratio:2/3}
  .hero picture{position:absolute;inset:0;width:100%;height:100%}
  .hero picture img{object-fit:contain;object-position:center}
  .hero .hero-overlay{inset:12px 14px auto}
  .hero .hero-overlay h1{font-size:25px;line-height:1.06;letter-spacing:-.04em}
  .hero .hero-overlay h1 br:first-of-type{display:none}
  .hero .hero-description{font-size:13px;line-height:1.38;max-width:none;margin-top:8px}
  .hero .hero-actions{margin-top:8px;gap:12px}
  .hero .hero-actions>.button{min-height:44px;padding:10px 12px;font-size:13px;gap:10px}
  .hero .hero-actions>.text-link{min-height:44px;font-size:12px;gap:6px}
}
@media(max-width:359px){
  .hero .hero-overlay{inset:12px 12px auto}
  .hero .hero-overlay h1{font-size:23px}
  .hero .hero-description{font-size:12.5px;line-height:1.38}
  .hero .hero-actions{gap:10px}
}

/* Revision 35: a little wider, with clearer lettering directly on the photo. */
.hero .hero-description{color:#102d21;text-shadow:0 1px 1px rgba(250,248,243,.85),0 0 2px rgba(250,248,243,.45)}
.hero .hero-overlay h1,.hero .hero-actions>.text-link{text-shadow:0 1px 1px rgba(250,248,243,.8)}
@media(max-width:599px){
  .hero .hero-overlay{inset:14px 16px auto}
  .hero .hero-overlay h1{font-size:27px;line-height:1.08}
  .hero .hero-description{font-size:14.5px;line-height:1.42;font-weight:700;margin-top:9px}
}
@media(max-width:359px){
  .hero .hero-overlay{inset:10px 12px auto}
  .hero .hero-overlay h1{font-size:24px}
  .hero .hero-description{font-size:13px;line-height:1.4;margin-top:6px}
  .hero .hero-actions{margin-top:6px}
}

/* The original photo is untouched. Only CSS adds space and a gradient above it. */
.hero.wrap{width:100%;max-width:none;margin-inline:0;padding:0}
.hero .hero-figure{display:flex;flex-direction:column;height:auto;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none;background:var(--cream)}
.hero .hero-figure::after{display:none}
.hero .hero-figure picture{position:relative;z-index:2;display:block;inset:auto;width:100%;height:auto;margin:0}
/* Match the text area's cream exactly, then ease gently to transparency.
   The fade ends above the first heads at 14.5% of the original photo height. */
.hero .hero-figure picture::before{content:"";position:absolute;z-index:1;inset:-2px 0 auto;height:calc(14.5% + 2px);background:linear-gradient(180deg,rgb(243,233,218) 0%,rgba(243,233,218,.972) 10%,rgba(243,233,218,.896) 20%,rgba(243,233,218,.784) 30%,rgba(243,233,218,.648) 40%,rgba(243,233,218,.5) 50%,rgba(243,233,218,.352) 60%,rgba(243,233,218,.216) 70%,rgba(243,233,218,.104) 80%,rgba(243,233,218,.028) 90%,rgba(243,233,218,0) 100%);pointer-events:none}
.hero .hero-figure picture img{position:static;display:block;width:100%;height:auto;margin:0;aspect-ratio:11/6;object-fit:contain;border-radius:0;filter:none;opacity:1}
.hero .hero-overlay{position:relative;order:-1;inset:auto;width:100%;padding:18px 20px 24px;background:linear-gradient(180deg,var(--cream) 0%,#f3e9da 78%,#f3e9da 100%)}
.hero .hero-description,.hero .hero-overlay h1,.hero .hero-actions>.text-link{text-shadow:none}
@media(max-width:599px){
  .hero .hero-overlay{padding:14px 16px 22px}
}
@media(max-width:359px){
  .hero .hero-overlay{padding:12px 12px 18px}
}
@media(min-width:900px){
  .hero .hero-overlay{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:32px max(42px,calc((100vw - 1240px)/2))}
  .hero .hero-overlay h1{font-size:clamp(38px,4vw,56px)}
  .hero .hero-overlay h1 br:first-of-type{display:none}
  .hero .hero-copy{margin:0}
  .hero .hero-description{max-width:480px}
}