/* ==========================================================================
   Inner-page banner — the bkm page-hero pattern in the site greens.
   Markup: includes/page-banner.php. Motion: assets/js/page-banner.js adds
   .is-ready to play the entrance; without it everything is simply shown.
   ========================================================================== */
#page:has(.jh-pb) { padding-top: 0; }

.jh-pb {
  --pb-leaf: #a8c98c; --pb-green: hsl(109, 37%, 33%); --pb-forest: #12261a;
  --pb-serif: var(--heading-font-font-family, "Cormorant Garamond"), Georgia, serif;
  --pb-sans: var(--body-font-font-family, "adelle-sans"), "Helvetica Neue", Arial, sans-serif;
  --pb-gutter: clamp(20px, 5vw, 72px);
  --pb-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(460px, 72vh, 640px);
  display: flex; align-items: flex-end;
  background: var(--pb-forest); color: #fff; font-family: var(--pb-sans);
}
.jh-pb *, .jh-pb *::before, .jh-pb *::after { box-sizing: border-box; }

/* one photo, full bleed */
/* the photo starts just under the floating nav, so heads at the top of a
   picture are never hidden behind it; its top edge fades into the green */
.jh-pb__photo {
  position: absolute; inset: calc(var(--jh-nav-space, 96px) - 24px) 0 0 0; z-index: -2; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px); mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
}
.jh-pb__photo img { width: 100%; height: 108%; object-fit: cover; display: block; will-change: transform; transform-origin: 50% 0; }
/* strong green behind the copy, clearing toward the right; darker at the top for the nav */
.jh-pb__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 38, 26, .96) 0%, rgba(18, 38, 26, .88) 32%, rgba(18, 38, 26, .45) 60%, rgba(18, 38, 26, .1) 85%),
    linear-gradient(180deg, rgba(10, 22, 14, .55) 0%, transparent 30%, transparent 70%, rgba(10, 22, 14, .35) 100%);
}

.jh-pb__in {
  width: min(1180px, 100% - 2 * var(--pb-gutter)); margin-inline: auto;
  padding: calc(var(--jh-nav-space, 96px) + 40px) 0 clamp(56px, 9vh, 88px);
}
.jh-pb__in > * { max-width: 620px; }

/* breadcrumb, small and inline above the eyebrow */
.jh-pb__crumb { margin-bottom: 22px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.jh-pb__crumb a { color: rgba(255, 255, 255, .78) !important; text-decoration: none !important; transition: color .2s ease; }
.jh-pb__crumb a:hover { color: #fff !important; }
.jh-pb__sep { margin: 0 10px; color: rgba(255, 255, 255, .35); }
.jh-pb__crumb [aria-current] { color: var(--pb-leaf); }

.jh-pb .jh-pb__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pb-leaf);
}
.jh-pb__line { width: 32px; height: 1px; background: currentColor; transform-origin: left; }
.jh-pb .jh-pb__title {
  margin: 0; font-family: var(--pb-serif); font-weight: 700;
  font-size: clamp(40px, 4.8vw, 66px); line-height: 1.05; letter-spacing: -0.015em; color: #fff;
}
.jh-pb__title em { font-style: italic; font-weight: 500; color: var(--pb-leaf); }
.jh-pb .jh-pb__lead { margin: 18px 0 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: rgba(255, 255, 255, .8); }

.jh-pb__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.jh-pb__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  background: #f3ede1; color: var(--pb-forest) !important; font-size: 15px; font-weight: 600; text-decoration: none !important;
  border: 1.5px solid #f3ede1;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.jh-pb__btn:hover { background: var(--pb-leaf); border-color: var(--pb-leaf); transform: translateY(-2px); }
.jh-pb__btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.jh-pb__btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff !important; }
.jh-pb__btn span { transition: transform .3s ease; }
.jh-pb__btn:hover span { transform: translateX(4px); }
.jh-pb a:focus-visible { outline: 2px solid var(--pb-leaf); outline-offset: 3px; }

/* fact chip on the photo */
.jh-pb__chip {
  position: absolute; right: var(--pb-gutter); bottom: clamp(56px, 9vh, 88px);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px;
  background: rgba(18, 38, 26, .55); border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 600; color: #fff;
}
.jh-pb__chip-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pb-leaf); color: var(--pb-forest); }

/* ---------- entrance (page-banner.js adds .is-ready) ---------- */
.jh-pb__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.jh-pb__w > span { display: inline-block; }
.jh-pb.is-ready .jh-pb__photo img { animation: jh-pb-settle 2.2s var(--pb-ease) both; }
.jh-pb.is-ready .jh-pb__veil { animation: jh-pb-fade 1.2s ease both; }
.jh-pb.is-ready .jh-pb__crumb { animation: jh-pb-up .8s var(--pb-ease) .1s both; }
.jh-pb.is-ready .jh-pb__eyebrow { animation: jh-pb-up .8s var(--pb-ease) .2s both; }
.jh-pb.is-ready .jh-pb__line { animation: jh-pb-grow .9s var(--pb-ease) .3s both; }
.jh-pb.is-ready .jh-pb__w > span { animation: jh-pb-word 1s var(--pb-ease) both; animation-delay: calc(var(--w) * 60ms + 300ms); }
.jh-pb.is-ready .jh-pb__lead { animation: jh-pb-up .9s var(--pb-ease) .65s both; }
.jh-pb.is-ready .jh-pb__actions > * { animation: jh-pb-up .9s var(--pb-ease) both; }
.jh-pb.is-ready .jh-pb__actions > :nth-child(1) { animation-delay: .8s; }
.jh-pb.is-ready .jh-pb__actions > :nth-child(2) { animation-delay: .9s; }
.jh-pb.is-ready .jh-pb__chip { animation: jh-pb-up .9s var(--pb-ease) 1.1s both; }

@keyframes jh-pb-settle { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes jh-pb-fade { from { opacity: .4; } }
@keyframes jh-pb-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes jh-pb-grow { from { transform: scaleX(0); } }
@keyframes jh-pb-word { from { transform: translateY(110%); } }

@media (max-width: 760px) {
  .jh-pb { min-height: 0; }
  .jh-pb__veil { background: linear-gradient(180deg, rgba(18, 38, 26, .75) 0%, rgba(18, 38, 26, .88) 45%, rgba(18, 38, 26, .96) 100%); }
  .jh-pb__chip { position: static; margin: 0 var(--pb-gutter) 40px; align-self: flex-start; }
  .jh-pb { flex-direction: column; align-items: stretch; }
}

/* taller banner, and the "reveal" photo: laid out at its natural height
   (never cropped at the bottom) and moved up by page-banner.js on scroll */
.jh-pb--tall { min-height: clamp(560px, 86vh, 820px); }
@media (max-width: 760px) { .jh-pb--tall { min-height: 0; } }   /* phones: as tall as the content, like every other banner */
.jh-pb[data-reveal] .jh-pb__photo img { height: auto; min-height: 100%; object-fit: cover; }
.jh-pb[data-reveal].is-ready .jh-pb__photo img { animation-name: jh-pb-fade-in; }
@keyframes jh-pb-fade-in { from { opacity: 0; } }

/* ---------- shared: [data-split] headings (assets/js/reveal.js) ---------- */
.jh-sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.jh-sw > span { display: inline-block; transition: transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--w) * 60ms + 100ms); }
.jh-reveal-motion [data-split]:not(.is-in) .jh-sw > span { transform: translateY(110%); }