/* PAGE BANNER - top of every inner page: forest band, breadcrumb, headline, and a photo arch rising from the bottom edge */
.banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--forest);
    color: rgba(255,255,255,.8);
    padding: 40px 0 0 0;
}
.banner::before{content:"";position:absolute;z-index:-1;top:-260px;left:-180px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(185,208,108,.14),transparent 65%)}
.banner__leaf{position:absolute;z-index:-1;left:44%;bottom:-60px;width:190px;height:auto;aspect-ratio:120/220;color:#fff;opacity:.06;stroke-width:1.2;transform:rotate(18deg)}
.banner__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:40px clamp(32px,6vw,96px)}
.banner__copy{padding:clamp(40px,5vw,68px) 0 clamp(52px,6vw,84px)}

.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:26px;font-size:14px}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.4}
.crumbs a{color:rgba(255,255,255,.72);transition:color .25s}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{color:var(--lime)}

.banner h1{max-width:740px;color:#fff;}
.banner h1 em{color:var(--lime)}
.banner__copy > p{max-width:540px;margin-top:22px;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7}
.banner__meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-size:14px;color:rgba(255,255,255,.82)}
.banner__meta li{display:flex;align-items:center;gap:9px}
.banner__meta svg{width:17px;height:17px;color:var(--lime)}

.banner__copy nav.crumbs {
    display: none;
}

/* the photo arch sits on the bottom edge; a thin lime arch outlines it like a garden window */
.banner__arch{position:relative;justify-self:end;width:min(100%,400px);height:clamp(250px,26vw,370px)}
.banner__arch::before{content:"";position:absolute;inset:-14px -14px 0;border:1.5px solid rgba(185,208,108,.45);border-bottom:0;border-radius:999px 999px 0 0}
.banner__arch img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;border-radius:999px 999px 0 0}

@media only screen and (max-width:991px){
  .banner__in{grid-template-columns:1fr}
  .banner__arch{display:none}
  .banner__copy{padding-bottom:56px}
  .banner__leaf{left:auto;right:-50px}
}
@media only screen and (max-width:575px){
  .crumbs ol{margin-bottom:20px}
  .banner__leaf{width:130px}
}