/* FULL-BLEED HERO */
/* The photographs are the hero, not a strip above it: they fill the section and
   the headline sits on them. The section is sticky so the page below scrolls up
   over it. */
/* The photographs run to the very top of the page: the nav floats on them
   rather than sitting above them. 73.4px is the nav pill plus its top gap. */
.hero--full{margin-top:calc(-1 * (59.8px + 13.6px));
  position:sticky;top:0;z-index:0;min-height:min(86vh,46rem);
  display:grid;grid-template-columns:1fr;place-items:center;overflow:hidden;border-bottom:0;padding:0}
.hero--full .pband--hero{position:absolute;inset:0;height:100%;width:100%}
.hero--full .pband__wm{display:none}
.hero--full:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,9,.30),rgba(31,24,9,.52))}
.heroC{position:relative;z-index:2;width:100%;text-align:center;color:#FFFFFF;
  padding:clamp(8rem,14vw,10.5rem) clamp(1.2rem,5vw,3rem) clamp(3rem,7vw,5rem);
  max-width:58rem;margin:0 auto}
.hero--full .hero__h{color:#FFFFFF;max-width:24ch;margin-inline:auto}
.hero--full .hero__acts{justify-content:center}
.hero--full .hero__text{max-width:52rem;margin-inline:auto;align-items:center;padding:0}
.hero--full .btn--o{border-color:rgba(255,255,255,.8);color:#FFFFFF;background:transparent}
.hero--full .btn--o:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
.hero--full .btn--f{background:#FFFFFF;color:var(--ink)}
.hero--full .btn--f:hover{background:var(--tint);color:var(--ink)}

/* Everything after the hero rides up over it on scroll. */
.riser{position:relative;z-index:1;background:var(--cream);
  border-radius:8px 8px 0 0;margin-top:-8px;
  box-shadow:0 -18px 40px -22px rgba(31,24,9,.35)}
@media(max-width:760px){
  /* On a phone the headline gets the screen and the photographs sit along the
     bottom edge, so the type is read on a quiet ground instead of over a face. */
  .hero--full{min-height:84vh;margin-top:calc(-1 * (56px + 9.6px));
    background:
      radial-gradient(115% 66% at 82% 4%, rgba(239,131,103,.46) 0%, rgba(239,131,103,0) 58%),
      radial-gradient(105% 58% at 6% 46%, rgba(225,188,184,.70) 0%, rgba(225,188,184,0) 62%),
      linear-gradient(168deg,#FDF6F4 0%,#F8E4DE 30%,#EFCEC5 62%,#E3B4A8 100%);
    align-content:start}
  .hero--full:after{display:none}
  .heroC{color:var(--ink);padding-top:7.5rem;padding-bottom:2rem}
  .hero--full .hero__h{color:var(--ink)}
  .hero--full .btn--f{background:var(--ink);color:var(--cream)}
  .hero--full .btn--f:hover{background:var(--pop);color:var(--ink)}
  .hero--full .btn--o{border-color:var(--ink);color:var(--ink)}
  .hero--full .btn--o:hover{background:var(--ink);color:var(--cream)}
  /* the strip anchors to the bottom of the hero rather than filling it */
  .hero--full .pband--hero{inset:auto 0 0 0;height:32vh}
  .hero--full .pband:after{background:none}
  .hero--full .pband__p:nth-child(1) img{object-position:52% 26%}
  .hero--full .pband__p:nth-child(2) img{object-position:46% 30%}
  .hero--full .pband__p:nth-child(3) img{object-position:58% 18%}
}
@media(prefers-reduced-motion:reduce){.hero--full{position:relative}}