/* ==========================================================================
   Home page — scroll-driven redesign. Everything is scoped to .jh-home.
   Without html.jh-motion (reduced motion, or scripts blocked) the page is a
   complete static layout; .jh-motion only sets the starting states that
   assets/js/home.js animates from.
   ========================================================================== */

.jh-home {
  --jh-green: hsl(109, 37%, 36%);
  --jh-green-deep: hsl(109, 30%, 20%);
  --jh-cream: #f7f3ec;
  --jh-sand: #ece4d6;
  --jh-ink: #1f2a1c;
  --jh-muted: #5c6658;
  --jh-serif: var(--heading-font-font-family, "Cormorant Garamond"), Georgia, serif;
  --jh-sans: var(--body-font-font-family, "adelle-sans"), "Helvetica Neue", Arial, sans-serif;
  --jh-radius: 22px;
  --jh-gutter: clamp(20px, 5vw, 72px);

  background: var(--jh-cream);
  color: var(--jh-ink);
  font-family: var(--jh-sans);
  overflow-x: clip;
}
.jh-home *, .jh-home *::before, .jh-home *::after { box-sizing: border-box; }
.jh-home img, .jh-home video { display: block; max-width: 100%; }
.jh-home h1, .jh-home h2, .jh-home p, .jh-home figure, .jh-home blockquote { margin: 0; }
.jh-home h2 {
  font-family: var(--jh-serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: inherit;
}

.jh-wrap { width: min(1080px, 100% - 2 * var(--jh-gutter)); margin-inline: auto; }

.jh-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jh-green);
  margin-bottom: 18px !important;
}

/* ---------- buttons & links ---------- */
.jh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.jh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  border-radius: 999px;
  background: var(--jh-green); color: #fff !important;
  font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none !important;
  border: 2px solid var(--jh-green);
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.jh-btn:hover { transform: translateY(-2px); background: var(--jh-green-deep); border-color: var(--jh-green-deep); }
.jh-btn--light { background: #fff; color: var(--jh-ink) !important; border-color: #fff; }
.jh-btn--light:hover { background: var(--jh-sand); border-color: var(--jh-sand); }
.jh-btn--ghost { background: transparent; border-color: rgba(255,255,255,.8); }
.jh-btn--ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.jh-btn--outline { background: transparent; color: var(--jh-green) !important; }
.jh-btn--outline:hover { color: #fff !important; }
.jh-btn:focus-visible, .jh-link:focus-visible { outline: 3px solid var(--jh-green); outline-offset: 4px; }

.jh-link {
  display: inline-flex; gap: 8px; align-items: center;
  margin-top: 28px;
  font-weight: 600; font-size: 17px;
  color: var(--jh-green) !important;
  text-decoration: none !important;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
}
.jh-link span { transition: transform .3s ease; }
.jh-link:hover span { transform: translateX(5px); }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.jh-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; }
.jh-hero__stage { position: relative; height: 100%; overflow: hidden; }

/* static default: full-bleed photo, words hidden, content visible */
.jh-hero__media { position: absolute; inset: 0; overflow: hidden; }
.jh-hero__img { width: 100%; height: 100%; object-fit: cover; }
.jh-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,18,.15) 0%, rgba(20,28,18,.25) 45%, rgba(20,28,18,.7) 100%);
}
.jh-hero__content {
  position: absolute; left: var(--jh-gutter); right: var(--jh-gutter); bottom: clamp(48px, 10vh, 110px);
  color: #fff; max-width: 760px;
}
.jh-hero__content .jh-eyebrow { color: #e3ecd9; }
.jh-hero__lead {
  font-family: var(--jh-serif); font-weight: 700;
  font-size: clamp(42px, 6.6vw, 96px); line-height: .98; letter-spacing: -0.015em;
}
.jh-hero__title { display: none; }
.jh-hero__hint { display: none; }

/* motion: framed card that grows to fill the screen */
.jh-motion .jh-hero { height: 100vh; --jh-card-w: min(280px, 22vw); }
.jh-motion .jh-hero__stage { background: var(--jh-cream); }
.jh-motion .jh-hero__title {
  position: absolute; inset: var(--jh-head, 0px) 0 0 0; z-index: 2;
  /* side columns hold the words, the middle one is the card's footprint */
  display: grid; grid-template-columns: 1fr calc(var(--jh-card-w) + 5vw) 1fr; align-items: center;
  pointer-events: none;
  font-family: var(--jh-serif); font-weight: 700;
  font-size: clamp(40px, 7.6vw, 140px); line-height: 1; letter-spacing: -0.02em;
  color: var(--jh-ink);
}
.jh-motion .jh-hero__word { display: block; will-change: transform; }
.jh-motion .jh-hero__word--left { justify-self: end; }
.jh-motion .jh-hero__word--right { grid-column: 3; justify-self: start; }
.jh-motion .jh-hero__media {
  inset: auto; left: 50%; top: calc(50% + var(--jh-head, 0px) / 2);
  width: var(--jh-card-w); height: min(400px, calc(100vh - var(--jh-head, 0px) - 200px));
  transform: translate(-50%, -50%);
  border-radius: var(--jh-radius);
  box-shadow: 0 30px 80px rgba(31,42,28,.25);
  z-index: 1;
}
.jh-motion .jh-hero__img { transform: scale(1.3); transform-origin: 50% 60%; }
.jh-motion .jh-hero__content { opacity: 0; transform: translateY(30px); }
.jh-motion .jh-hero__hint {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--jh-muted);
}
.jh-hero__hint span {
  width: 1px; height: 38px; background: currentColor; transform-origin: top;
  animation: jh-hint 2.2s ease-in-out infinite;
}
@keyframes jh-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-height: 700px) {
  .jh-motion .jh-hero__hint { display: none; }
}
@media (max-width: 640px) {
  /* stacked: word above the card, word below it */
  .jh-motion .jh-hero { --jh-card-w: 58vw; }
  .jh-motion .jh-hero__title {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr calc(min(400px, 100vh - var(--jh-head, 0px) - 220px) + 4vh) 1fr;
    justify-items: center; font-size: clamp(36px, 12vw, 64px);
  }
  .jh-motion .jh-hero__word--left { justify-self: center; align-self: end; }
  .jh-motion .jh-hero__word--right { grid-column: 1; grid-row: 3; justify-self: center; align-self: start; }
  .jh-motion .jh-hero__media { height: min(400px, calc(100vh - var(--jh-head, 0px) - 220px)); }
  .jh-motion .jh-hero__hint { display: none; }
}

/* ---------- opening frame (after 21st.dev "Scroll Expand Media") ----------
   Only with motion: a soft green glow and contour pattern behind the card,
   letters that rise in, the card wiping open, two photos drifting in the
   corners, the caregiver-ratio badge, tagline, scroll seal and phone number.
   Load animations run on inner elements; home.js scrolls the outer ones, so
   the two never fight over the same property. */
.jh-hero__bg, .jh-hero__extras { display: none; }
.jh-motion .jh-hero { --jh-card-h: min(400px, calc(100vh - var(--jh-head, 0px) - 200px)); }
.jh-motion .jh-hero__media { height: var(--jh-card-h); }

.jh-motion .jh-hero__bg {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../images/pattern-topo.svg") center / 640px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 0%, transparent 75%);
}
.jh-hero__glow {
  position: absolute; left: 50%; top: 55%; width: min(900px, 90vw); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, rgba(181, 210, 154, .55) 0%, rgba(181, 210, 154, 0) 62%);
  animation: jh-glow 9s ease-in-out infinite alternate;
}
@keyframes jh-glow { from { scale: .9; } to { scale: 1.08; } }

.jh-motion .jh-hero__extras { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.jh-hero__extras a { pointer-events: auto; }

/* letters: home.js wraps each in .jh-hl inside the word, which masks them */
.jh-motion .jh-hero__word { padding-bottom: .18em; margin-bottom: -.18em; clip-path: inset(-.4em -.2em 0 -.2em); }
.jh-hl { display: inline-block; }
.jh-hero.is-in .jh-hl { animation: jh-ch-rise 1.1s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.35s + var(--c) * 45ms); }
@keyframes jh-ch-rise { from { translate: 0 115%; rotate: 8deg; } to { translate: 0 0; rotate: 0deg; } }
.jh-motion .jh-hero:not(.is-in) .jh-hl { translate: 0 115%; }

/* card wipes open from the bottom while the photo settles */
.jh-hero.is-in .jh-hero__media { animation: jh-card-in 1.3s cubic-bezier(.65, 0, .35, 1) .1s both; }
.jh-hero.is-in .jh-hero__img { animation: jh-img-in 2.2s cubic-bezier(.22, 1, .36, 1) .1s both; }
@keyframes jh-card-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes jh-img-in { from { scale: 1.35; } to { scale: 1; } }
.jh-motion .jh-hero:not(.is-in) .jh-hero__media { clip-path: inset(100% 0 0 0); }

/* corner photos */
.jh-hero__float { position: absolute; margin: 0; width: clamp(130px, 12vw, 190px); aspect-ratio: 4 / 3; }
.jh-hero__float img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 16px; border: 5px solid #fff; box-shadow: 0 22px 48px rgba(31, 42, 28, .2); }
.jh-hero__float--a { left: clamp(24px, 6vw, 110px); top: calc(var(--jh-head, 90px) + clamp(40px, 9vh, 90px)); }
.jh-hero__float--b { right: clamp(24px, 7vw, 120px); top: calc(var(--jh-head, 90px) + clamp(16px, 5vh, 56px)); }
.jh-hero__float--a img { rotate: -7deg; }
.jh-hero__float--b img { rotate: 6deg; }
.jh-hero.is-in .jh-hero__float img { animation: jh-float-in 1.2s cubic-bezier(.22, 1, .36, 1) both, jh-bob 6s ease-in-out infinite alternate; }
.jh-hero.is-in .jh-hero__float--a img { animation-delay: .9s, 2.1s; }
.jh-hero.is-in .jh-hero__float--b img { animation-delay: 1.05s, 2.4s; }
@keyframes jh-float-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes jh-bob { from { translate: 0 0; } to { translate: 0 -12px; } }
.jh-motion .jh-hero:not(.is-in) .jh-hero__float img { opacity: 0; }

/* kicker above the title */
.jh-hero__kicker {
  position: absolute; left: 0; right: 0; top: calc(var(--jh-head, 90px) + clamp(12px, 4vh, 40px));
  display: flex; justify-content: center; overflow: hidden;
  font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--jh-green);
}
.jh-hero__kicker span { display: inline-flex; align-items: center; gap: 14px; }
.jh-hero__kicker span::before, .jh-hero__kicker span::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }

/* badge on the lower-right corner of the card */
.jh-hero__badge {
  position: absolute;
  left: calc(50% + var(--jh-card-w) / 2 - 52px);
  top: calc(50% + var(--jh-head, 0px) / 2 + var(--jh-card-h) / 2 - 64px);
}
.jh-hero__badge > span {
  display: grid; place-content: center; width: 112px; aspect-ratio: 1; border-radius: 50%;
  background: var(--jh-green-deep); color: #e3ecd9; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35;
  box-shadow: 0 18px 40px rgba(20, 38, 25, .35), inset 0 0 0 5px var(--jh-green-deep), inset 0 0 0 6px rgba(181, 210, 154, .45);
}
.jh-hero__badge b { display: block; margin-bottom: 2px; font-family: var(--jh-serif); font-size: 30px; letter-spacing: 0; color: #fff; text-transform: none; }

/* bottom row: tagline, seal, phone */
.jh-hero__tag, .jh-hero__call { position: absolute; bottom: clamp(24px, 5vh, 44px); overflow: hidden; }
.jh-hero__tag { left: var(--jh-gutter); font-family: var(--jh-serif); font-style: italic; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.2; color: var(--jh-ink); }
.jh-hero__tag span { display: block; padding-left: 16px; border-left: 2px solid var(--jh-green); }
.jh-hero__call { right: var(--jh-gutter); padding: 4px; font-weight: 600; font-size: 16px; color: var(--jh-ink) !important; text-decoration: none !important; }
.jh-hero__call svg { width: 16px; height: 16px; margin-right: 8px; vertical-align: -2px; }
.jh-hero__call span { display: inline-block; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(31, 42, 28, .2); background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.jh-hero__call:hover span { background: var(--jh-green); border-color: var(--jh-green); color: #fff; }
.jh-hero__call:focus-visible { outline: none; }
.jh-hero__call:focus-visible span { outline: 3px solid var(--jh-green); outline-offset: 1px; }
.jh-hero__seal { position: absolute; left: 50%; bottom: clamp(14px, 3vh, 30px); width: 92px; height: 92px; margin-left: -46px; display: grid; place-items: center; color: var(--jh-green); }
.jh-hero__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: jh-seal 16s linear infinite; }
.jh-hero__seal text { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; fill: var(--jh-muted); }
.jh-hero__seal i { font-style: normal; font-size: 20px; animation: jh-arrow 1.8s ease-in-out infinite; }
@keyframes jh-seal { to { rotate: 360deg; } }
@keyframes jh-arrow { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 4px; } }

/* text pieces slide up out of their masks */
.jh-hero.is-in .jh-hero__kicker span,
.jh-hero.is-in .jh-hero__tag span,
.jh-hero.is-in .jh-hero__call span { animation: jh-up 1s cubic-bezier(.22, 1, .36, 1) both; }
.jh-hero.is-in .jh-hero__kicker span { animation-delay: .2s; }
.jh-hero.is-in .jh-hero__tag span { animation-delay: 1.1s; }
.jh-hero.is-in .jh-hero__call span { animation-delay: 1.2s; }
.jh-hero.is-in .jh-hero__badge > span { animation: jh-pop .9s cubic-bezier(.34, 1.56, .64, 1) 1.15s both; }
.jh-hero.is-in .jh-hero__seal { animation: jh-fade 1s ease 1.3s both; }
@keyframes jh-up { from { translate: 0 110%; } to { translate: 0 0; } }
@keyframes jh-pop { from { scale: 0; rotate: -40deg; } to { scale: 1; rotate: 0deg; } }
@keyframes jh-fade { from { opacity: 0; } to { opacity: 1; } }
.jh-motion .jh-hero:not(.is-in) :is(.jh-hero__kicker span, .jh-hero__tag span, .jh-hero__call span) { translate: 0 110%; }
.jh-motion .jh-hero:not(.is-in) .jh-hero__badge > span { scale: 0; }
.jh-motion .jh-hero:not(.is-in) .jh-hero__seal { opacity: 0; }

@media (max-width: 1100px) { .jh-hero__float { display: none; } }
@media (max-height: 780px) {
  .jh-hero__seal { display: none; }
  .jh-hero__float { width: clamp(120px, 10vw, 150px); }
  .jh-hero__tag { bottom: 28px; }
}
@media (max-height: 560px) { .jh-hero__tag { display: none; } }
@media (max-width: 640px) {
  .jh-motion .jh-hero { --jh-card-h: min(400px, calc(100vh - var(--jh-head, 0px) - 220px)); }
  .jh-hero__kicker, .jh-hero__tag, .jh-hero__seal { display: none; }
  .jh-hero__badge { left: calc(50% + var(--jh-card-w) / 2 - 46px); top: calc(50% + var(--jh-head, 0px) / 2 + var(--jh-card-h) / 2 - 56px); }
  .jh-hero__badge > span { width: 88px; font-size: 9px; }
  .jh-hero__badge b { font-size: 24px; }
  .jh-hero__call { left: 0; right: 0; text-align: center; bottom: 18px; font-size: 15px; }
}

/* phones: no scroll intro (home.js only runs it from 641px), the hero opens
   straight on the full-screen photo with its content, which fades up on load */
@media (max-width: 640px) {
  .jh-motion .jh-hero { height: 100vh; height: 100svh; }
  .jh-motion .jh-hero__title, .jh-motion .jh-hero__bg, .jh-motion .jh-hero__extras, .jh-motion .jh-hero__hint { display: none; }
  .jh-motion .jh-hero__media,
  .jh-hero.is-in .jh-hero__media {
    inset: 0; left: 0; top: 0; width: 100%; height: 100%;
    transform: none; border-radius: 0; box-shadow: none; clip-path: none; animation: none;
  }
  .jh-motion .jh-hero:not(.is-in) .jh-hero__media { clip-path: none; }
  .jh-motion .jh-hero__img { transform: none; }
  .jh-motion .jh-hero__content { opacity: 1; transform: none; }
  .jh-motion .jh-hero__content > * { animation: jh-hero-up .9s cubic-bezier(.22, 1, .36, 1) both; }
  .jh-motion .jh-hero__content > :nth-child(2) { animation-delay: .12s; }
  .jh-motion .jh-hero__content > :nth-child(3) { animation-delay: .24s; }
}
@keyframes jh-hero-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   2. Intro — word reveal
   ========================================================================== */
.jh-intro { padding: clamp(96px, 16vh, 180px) 0; text-align: center; }
.jh-intro__text {
  font-family: var(--jh-serif); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -0.01em;
  max-width: 980px; margin-inline: auto !important;
}
.jh-reveal .jh-w { display: inline-block; }
.jh-motion .jh-reveal .jh-w { opacity: .14; }

/* ==========================================================================
   3. Chapters — one pinned screen; scrolling moves through three chapters
   (after 21st.dev "Sticky Scroll Reveal" / "Feature Steps"). chapters.js adds
   .is-live on wide screens: the section grows to --count screens of scroll,
   the screen stays put while each chapter is read, tabs fill with progress
   and can be clicked. Without it (phones, reduced motion, no JS) the
   chapters are simply stacked, each on its own colour.
   ========================================================================== */
.jh-tone-forest { --ch-bg: #1c3322; --ch-fg: #f6f1e6; --ch-soft: rgba(246, 241, 230, .84); --ch-rule: rgba(246, 241, 230, .2); --ch-accent: #b5d29a; --ch-card: rgba(255, 255, 255, .06); --ch-btn: #b5d29a; --ch-btn-fg: #14261a; --ch-line: url("../images/pattern-topo.svg"); }
.jh-tone-paper  { --ch-bg: #f3ece0; --ch-fg: #1f2a1c; --ch-soft: #3c4638; --ch-rule: rgba(31, 42, 28, .16); --ch-accent: hsl(109, 37%, 36%); --ch-card: #fff; --ch-btn: hsl(109, 37%, 30%); --ch-btn-fg: #fff; --ch-line: none; }
.jh-tone-gold   { --ch-bg: #e2c88c; --ch-fg: #1f2a1c; --ch-soft: #35301f; --ch-rule: rgba(31, 42, 28, .2); --ch-accent: #2f4f2a; --ch-card: rgba(255, 255, 255, .42); --ch-btn: #1c3322; --ch-btn-fg: #f6f1e6; --ch-line: none; }

.jh-ch { position: relative; }
.jh-ch__in { width: min(1180px, 100%); margin-inline: auto; }
.jh-ch__tabs, .jh-ch__count { display: none; }

/* ---------- a chapter ---------- */
.jh-ch__panel {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 4.5vw, 72px); row-gap: clamp(16px, 3vh, 28px);
  padding: clamp(72px, 12vh, 120px) var(--jh-gutter);
  background: var(--ch-bg) var(--ch-line) center / 620px; color: var(--ch-fg);
}
.jh-ch__copy { grid-column: 1; grid-row: 1; align-self: center; position: relative; }
.jh-ch__kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ch-accent); }
.jh-ch__kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.jh-ch .jh-ch__title {
  margin-top: clamp(10px, 2vh, 18px) !important;
  font-family: var(--jh-serif); font-weight: 700;
  font-size: clamp(36px, min(4.8vw, 7.6vh), 78px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ch-fg);
}
.jh-ch__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.jh-ch__line > span { display: block; }
.jh-ch__title em { font-style: italic; font-weight: 500; color: var(--ch-accent); }
.jh-ch .jh-ch__lead { margin-top: clamp(12px, 2.4vh, 22px); max-width: 48ch; font-size: clamp(16px, min(1.3vw, 2.5vh), 19px); line-height: 1.65; color: var(--ch-soft); }

/* the call to action: a real button, arrow in its own circle */
.jh-ch__btn {
  display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(16px, 3vh, 28px);
  padding: 8px 8px 8px 24px; border-radius: 999px;
  background: var(--ch-btn); color: var(--ch-btn-fg) !important; text-decoration: none !important;
  font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.jh-ch__btn-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ch-btn-fg); color: var(--ch-btn); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.jh-ch__btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0, 0, 0, .22); }
.jh-ch__btn:hover .jh-ch__btn-ic { transform: rotate(-45deg); }
.jh-ch__btn:focus-visible { outline: 3px solid var(--ch-accent); outline-offset: 4px; }

/* photo: clickable, with its number and a hover chip */
.jh-ch__photo {
  grid-column: 2; grid-row: 1 / 3; position: relative; display: block; overflow: hidden;
  min-height: 300px; border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
  cursor: pointer; isolation: isolate;
}
.jh-ch__photo img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 30%; transition: scale 1.2s cubic-bezier(.22, 1, .36, 1); }
.jh-ch__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 22, 14, .55), transparent 45%); }
.jh-ch__photo:hover img { scale: 1.05; }
.jh-ch__num { position: absolute; z-index: 1; right: 22px; top: 14px; font-family: var(--jh-serif); font-size: clamp(56px, 7vw, 96px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }
.jh-ch__chip {
  position: absolute; z-index: 1; left: 18px; bottom: 18px; padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #1f2a1c; font-size: 14px; font-weight: 700;
  transform: translateY(8px); opacity: .0; transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.jh-ch__photo:hover .jh-ch__chip { opacity: 1; transform: none; }

/* three short points */
.jh-ch__cols { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jh-ch__cols li { margin: 0; padding: 16px 16px 18px; border-radius: 16px; background: var(--ch-card); border: 1px solid var(--ch-rule); }
.jh-ch__cols li::before { display: none; }
.jh-ch__cols b { display: block; line-height: 1.3; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ch-accent); }
.jh-ch__cols span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ch-fg); }

/* ---------- live: pinned screen ---------- */
.jh-ch.is-live { height: calc(100vh + var(--count) * 95vh); }
.jh-ch.is-live .jh-ch__pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; padding: var(--jh-nav-space, 96px) var(--jh-gutter) clamp(18px, 3.4vh, 32px);
  background: var(--ch-bg); color: var(--ch-fg);
  transition: background-color .8s ease, color .8s ease;
}
.jh-ch.is-live .jh-ch__pin::before {   /* contour lines, only on the forest chapter */
  content: ""; position: absolute; inset: 0; background: url("../images/pattern-topo.svg") center / 620px; opacity: 0; transition: opacity .8s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.jh-ch.is-live .jh-ch__pin.jh-tone-forest::before { opacity: .2; }
.jh-ch.is-live .jh-ch__in { position: relative; display: flex; flex-direction: column; }

.jh-ch.is-live .jh-ch__tabs { display: flex; align-items: stretch; gap: clamp(10px, 2vw, 24px); padding-bottom: clamp(12px, 2.2vh, 20px); }
.jh-ch__tab {
  flex: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; position: relative;
  padding: 6px 0 14px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--ch-fg); opacity: .55; transition: opacity .3s ease, color .8s ease;
}
.jh-ch__tab:hover, .jh-ch__tab.is-on { opacity: 1; }
.jh-ch__tab-n { font-family: var(--jh-serif); font-size: 22px; font-weight: 700; color: var(--ch-accent); transition: color .8s ease; }
.jh-ch__tab-l { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.jh-ch__tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--ch-rule); overflow: hidden; }
.jh-ch__tab-bar b { position: absolute; inset: 0; background: var(--ch-accent); transform-origin: left; transform: scaleX(var(--f, 0)); transition: background-color .8s ease; }
.jh-ch__tab:focus-visible { outline: 3px solid var(--ch-accent); outline-offset: 4px; border-radius: 4px; }
.jh-ch.is-live .jh-ch__count { display: block; align-self: center; padding-left: 8px; font-size: 13px; letter-spacing: .12em; color: var(--ch-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jh-ch__count b { font-family: var(--jh-serif); font-size: 26px; color: var(--ch-fg); }

.jh-ch.is-live .jh-ch__stage { position: relative; flex: 1; min-height: 0; }
.jh-ch.is-live .jh-ch__panel {
  position: absolute; inset: 0; padding: 0; background: none; color: var(--ch-fg);
  visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s linear .45s;
}
.jh-ch.is-live .jh-ch__panel.is-active { visibility: visible; opacity: 1; transition: opacity .2s ease, visibility 0s; }
.jh-ch.is-live .jh-ch__photo { min-height: 0; }
.jh-ch.is-live .jh-ch__photo img { transform: translateY(calc((var(--lp, .5) - .5) * -5%)); }

/* entrance of the active chapter */
.jh-ch.is-live .jh-ch__panel :is(.jh-ch__kicker, .jh-ch__lead, .jh-ch__btn, .jh-ch__cols li) { opacity: 0; translate: 0 22px; transition: opacity .5s ease, translate .7s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.jh-ch.is-live .jh-ch__line > span { translate: 0 108%; transition: translate .9s cubic-bezier(.22, 1, .36, 1); }
.jh-ch.is-live .jh-ch__photo { clip-path: inset(0 0 100% 0 round 26px); transition: clip-path 1s cubic-bezier(.65, 0, .35, 1); }
.jh-ch.is-live .jh-ch__photo img { scale: 1.18; transition: scale 1.4s cubic-bezier(.22, 1, .36, 1); }

.jh-ch.is-live .is-active :is(.jh-ch__kicker, .jh-ch__lead, .jh-ch__btn, .jh-ch__cols li) { opacity: 1; translate: 0 0; }
.jh-ch.is-live .is-active .jh-ch__line > span { translate: 0 0; transition-delay: calc(.12s + var(--k) * .09s); }
.jh-ch.is-live .is-active .jh-ch__kicker { transition-delay: .05s; }
.jh-ch.is-live .is-active .jh-ch__lead { transition-delay: .3s; }
.jh-ch.is-live .is-active .jh-ch__btn { transition-delay: .4s, .4s, 0s, 0s; }
.jh-ch.is-live .is-active .jh-ch__cols li { transition-delay: calc(.45s + var(--k) * .08s); }
.jh-ch.is-live .is-active .jh-ch__photo { clip-path: inset(0 0 0 0 round 26px); transition-delay: .05s; }
.jh-ch.is-live .is-active .jh-ch__photo img { scale: 1; transition-delay: .05s; }
.jh-ch.is-live .is-active .jh-ch__photo:hover img { scale: 1.05; transition-delay: 0s; }

/* shorter screens: tighter type, points without the card padding */
@media (max-height: 720px) {
  .jh-ch.is-live .jh-ch__title { font-size: clamp(34px, min(4.4vw, 7vh), 64px); }
  .jh-ch.is-live .jh-ch__lead { line-height: 1.55; }
  .jh-ch.is-live .jh-ch__cols li { padding: 12px 14px; }
  .jh-ch.is-live .jh-ch__cols span { font-size: 13.5px; }
  .jh-ch.is-live .jh-ch__btn { margin-top: 14px; }
}

/* ---------- stacked (phones, tablets) ---------- */
@media (max-width: 899px) {
  .jh-ch__panel { grid-template-columns: 1fr; grid-template-rows: auto; padding-block: 64px; }
  .jh-ch__copy, .jh-ch__photo, .jh-ch__cols { grid-column: 1; grid-row: auto; }
  .jh-ch__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .jh-ch__cols { grid-template-columns: 1fr; }
  .jh-ch__chip { opacity: 1; transform: none; }
}

/* ==========================================================================
   4. Life at the house — zoom spotlight (after "Zoom Parallax" by Efferd).
   Without JS / with reduced motion it is a one-screen collage; zoom-parallax.js
   adds .is-live (640vh of scroll), lays each photo out at its large size and
   brings them to the middle one by one, then grows the house to full screen.
   ========================================================================== */
.jh-zp { position: relative; height: 100vh; height: 100svh; background: var(--jh-cream); }
.jh-zp.is-live { height: 640vh; }
.jh-zp__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.jh-zp__head {
  position: absolute; left: 0; right: 0; top: calc(var(--jh-nav-space, 96px) - 4px); z-index: 6;
  text-align: center; pointer-events: none;
}
.jh-zp__head .jh-eyebrow { margin-bottom: 10px !important; }
.jh-zp__head h2 { font-size: clamp(30px, min(3.6vw, 5.6vh), 52px); }

/* every photo sits in a full-screen layer centred on the screen, so scaling
   the layer pushes off-centre photos outward as they grow */
.jh-zp__el {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: transform; pointer-events: none;
}
.jh-zp__img {
  position: relative; margin: 0; flex: none;
  width: 25vw; height: 25vh;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(31, 42, 28, .18);
}
.jh-zp__img img { width: 100%; height: 100%; object-fit: cover; }
/* Frames keep each photo's own shape (3:2, the house 16:9) so nothing is
   cropped; sizes follow the screen height, and the side positions are derived
   from those sizes so photos never overlap the house, the heading or the nav. */
.jh-zp__img img { object-position: 50% 30%; }
/* --u follows whichever screen dimension is tighter, so the collage keeps its
   proportions on wide and on 4:3 screens alike */
.jh-zp { --u: min(1vh, .62vw); }
/* centre: the house */
.jh-zp__el[data-i="0"] .jh-zp__img { width: auto; height: calc(31 * var(--u)); aspect-ratio: 16 / 9; }
/* top-left / top-right */
.jh-zp__el[data-i="1"] .jh-zp__img { width: auto; height: calc(32 * var(--u)); aspect-ratio: 3 / 2; top: calc(-10 * var(--u)); left: max(calc(-51.6 * var(--u) - 3vw), calc(-50vw + 24 * var(--u) + 16px)); }
.jh-zp__el[data-i="2"] .jh-zp__img { width: auto; height: calc(32 * var(--u)); aspect-ratio: 3 / 2; top: calc(-9 * var(--u));  left: min(calc(51.6 * var(--u) + 3vw), calc(50vw - 24 * var(--u) - 16px)); }
/* bottom-left / bottom-right */
.jh-zp__el[data-i="3"] .jh-zp__img { width: auto; height: calc(29 * var(--u)); aspect-ratio: 3 / 2; top: calc(31 * var(--u)); left: calc(-22 * var(--u) - 4vw); }
.jh-zp__el[data-i="4"] .jh-zp__img { width: auto; height: calc(29 * var(--u)); aspect-ratio: 3 / 2; top: calc(31 * var(--u)); left: calc(22 * var(--u) + 4vw); }

.jh-zp__end {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 12vh; pointer-events: none;
  opacity: 0;
}
.jh-zp__end p {
  margin: 0; padding: 14px 28px; border-radius: 999px;
  font-family: var(--jh-serif); font-weight: 600; font-style: italic;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1;
  color: #fff; background: rgba(20, 30, 18, .35); backdrop-filter: blur(6px);
}

/* live: photos are positioned and scaled by zoom-parallax.js */
.jh-zp.is-live .jh-zp__el { will-change: auto; }
.jh-zp.is-live .jh-zp__img { will-change: transform; transform-origin: 50% 50%; transition: box-shadow .5s ease; }
.jh-zp.is-live .jh-zp__img.is-spot { box-shadow: 0 40px 90px rgba(31, 42, 28, .3); }
.jh-zp__veil, .jh-zp__count { display: none; }
.jh-zp__cap { display: none; }
.jh-zp.is-live .jh-zp__cap {
  display: flex; flex-direction: column; gap: 6px;
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 30px 26px;
  background: linear-gradient(to top, rgba(14, 26, 17, .9), rgba(14, 26, 17, .5) 55%, transparent);
  color: #fff; pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
}
.jh-zp__cap span { font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #b5d29a; translate: 0 14px; transition: translate .7s cubic-bezier(.22, 1, .36, 1); }
.jh-zp__cap b { font-family: var(--jh-serif); font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; line-height: 1.1; translate: 0 20px; transition: translate .8s cubic-bezier(.22, 1, .36, 1) .06s; }
.jh-zp.is-live .jh-zp__img.is-cap .jh-zp__cap { opacity: 1; }
.jh-zp.is-live .jh-zp__img.is-cap .jh-zp__cap :is(span, b) { translate: 0 0; }
@media (max-width: 760px) { .jh-zp.is-live .jh-zp__cap { padding: 44px 18px 16px; } .jh-zp__cap b { font-size: 22px; } }

.jh-zp.is-live .jh-zp__veil {
  display: block; position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  background: rgba(247, 243, 236, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.jh-zp.is-live .jh-zp__count {
  display: flex; align-items: center; gap: 18px; position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 8;
  padding: 10px 20px; border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: 0 10px 30px rgba(31, 42, 28, .12);
  font-size: 13px; letter-spacing: .12em; color: var(--jh-muted); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.jh-zp.is-live.has-spot .jh-zp__count { opacity: 1; transform: none; }
.jh-zp__count b { font-family: var(--jh-serif); font-size: 22px; color: var(--jh-ink); }
.jh-zp__dots { display: flex; gap: 6px; }
.jh-zp__dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(31, 42, 28, .2); transition: width .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.jh-zp__dots i.is-on { width: 24px; background: var(--jh-green); }

@media (max-width: 760px) {
  .jh-zp__el[data-i="0"] .jh-zp__img { width: 46vw; height: auto; aspect-ratio: 16 / 9; }
  .jh-zp__el[data-i="1"] .jh-zp__img { width: 38vw; height: auto; aspect-ratio: 3 / 2; top: -15vh; left: -26vw; }
  .jh-zp__el[data-i="2"] .jh-zp__img { width: 38vw; height: auto; aspect-ratio: 3 / 2; top: -16vh; left: 26vw; }
  .jh-zp__el[data-i="3"] .jh-zp__img { width: 40vw; height: auto; aspect-ratio: 3 / 2; top: 15vh; left: -24vw; }
  .jh-zp__el[data-i="4"] .jh-zp__img { width: 40vw; height: auto; aspect-ratio: 3 / 2; top: 16vh; left: 24vw; }
}

/* ==========================================================================
   5. Band — early signs. Parallax photo under a green tint, a dot grid that
   lights up around the cursor (after "Hero Highlight"), and a marker sweep
   behind "early stage" (after "Text Highlighter"). Motion: assets/js/band.js.
   ========================================================================== */
.jh-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(88px, 15vh, 150px) var(--jh-gutter);
  background: #1a2f1f; color: #f3ede1;
  --mx: 50%; --my: 50%; --lit: 0;
}
/* photo, drifting slower than the page */
.jh-band__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.jh-band__bg img {
  position: absolute; left: 0; top: -15%; width: 100%; height: 130%;
  object-fit: cover; object-position: 50% 40%;
  filter: grayscale(.35) contrast(1.05);
  will-change: transform;
}
.jh-band__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 120% at 50% 50%, rgba(22, 40, 26, .72) 0%, rgba(14, 26, 17, .94) 70%),
    linear-gradient(180deg, rgba(20, 36, 24, .55), rgba(12, 22, 15, .85));
}
/* dot grid: a faint base layer, and a lit copy revealed in a circle at the cursor */
.jh-band__dots {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(243, 237, 225, .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.jh-band__dots--lit {
  z-index: -1;
  background-image: radial-gradient(#b5d29a 1.2px, transparent 1.7px);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, transparent 70%);
          mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, transparent 70%);
  opacity: var(--lit);
  transition: opacity .4s ease;
}

.jh-band__in { position: relative; width: min(960px, 100%); margin-inline: auto; text-align: center; }
.jh-band__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px !important;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #b5d29a;
}
.jh-band__eyebrow span { width: 28px; height: 1px; background: currentColor; }
.jh-band .jh-band__title {
  font-family: var(--jh-serif); font-weight: 700;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.015em;
  color: #f8f3e8; margin: 0;
}
/* the marker: a green-gold band that sweeps in behind the words */
.jh-band__mark {
  position: relative; z-index: 0;
  color: #142619; background: none; padding: 0 .14em; white-space: nowrap;
  font-style: italic;
  transition: color .5s ease .35s;
}
.jh-band__mark::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: .12em; bottom: .02em;
  border-radius: .18em;
  background: linear-gradient(100deg, #a8c98c 0%, #d9c58a 100%);
  transform: scaleX(var(--sweep, 1)); transform-origin: left;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}
.jh-band.is-armed .jh-band__mark { color: inherit; }
.jh-band.is-armed .jh-band__mark::before { --sweep: 0; }
.jh-band.is-armed.is-in .jh-band__mark { color: #142619; }
.jh-band.is-armed.is-in .jh-band__mark::before { --sweep: 1; transition-delay: .25s; }

.jh-band .jh-band__lead {
  max-width: 58ch; margin: 24px auto 0 !important;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: rgba(243, 237, 225, .74);
}

.jh-band__row { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 5vh, 48px); }
.jh-band__card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 230px; padding: 16px 52px 16px 20px; text-align: left;
  border-radius: 16px; border: 1px solid rgba(243, 237, 225, .18);
  background: rgba(243, 237, 225, .06); backdrop-filter: blur(6px);
  color: #f3ede1 !important; text-decoration: none !important;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, border-color .3s ease;
}
.jh-band__card:hover { transform: translateY(-4px); background: rgba(181, 210, 154, .14); border-color: rgba(181, 210, 154, .55); }
.jh-band__card-k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #b5d29a; }
.jh-band__card b { margin-top: 4px; font-family: var(--jh-serif); font-size: 21px; font-weight: 700; line-height: 1.15; }
.jh-band__card-go {
  position: absolute; right: 16px; top: 50%; translate: 0 -50%;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(243, 237, 225, .12); font-size: 14px;
  transition: background-color .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.jh-band__card:hover .jh-band__card-go { background: #b5d29a; color: #142619; transform: rotate(45deg); }
.jh-band__talk {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 26px; min-height: 56px; align-self: center; border-radius: 999px;
  background: #f3ede1; color: #142619 !important; font-weight: 600; font-size: 15px; text-decoration: none !important;
  transition: background-color .3s ease, transform .3s ease;
}
.jh-band__talk:hover { background: #b5d29a; transform: translateY(-2px); }
.jh-band__talk span { transition: transform .3s ease; }
.jh-band__talk:hover span { transform: translateX(4px); }
.jh-band a:focus-visible { outline: 2px solid #b5d29a; outline-offset: 4px; }

/* entrance (band.js adds .is-armed, then .is-in once it is on screen) */
.jh-band.is-armed .jh-band__in > * { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
.jh-band.is-armed.is-in .jh-band__in > * { opacity: 1; transform: none; }
.jh-band.is-armed.is-in .jh-band__in > :nth-child(2) { transition-delay: .08s; }
.jh-band.is-armed.is-in .jh-band__in > :nth-child(3) { transition-delay: .18s; }
.jh-band.is-armed.is-in .jh-band__in > :nth-child(4) { transition-delay: .28s; }

@media (max-width: 640px) {
  .jh-band__mark { white-space: normal; }
  .jh-band__card { width: 100%; }
  .jh-band__talk { width: 100%; justify-content: center; }
}

/* ==========================================================================
   6. Marquee
   ========================================================================== */
.jh-marquee { overflow: hidden; padding: clamp(36px, 6vh, 64px) 0; border-bottom: 1px solid rgba(31,42,28,.1); }
.jh-marquee__track {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content;
  font-family: var(--jh-serif); font-weight: 700; font-style: italic;
  font-size: clamp(40px, 7vw, 104px); line-height: 1; white-space: nowrap; color: var(--jh-ink);
}
.jh-marquee__track i { font-style: normal; font-size: .4em; color: var(--jh-green); }
/* ==========================================================================
   7. Voices — circular testimonials (adapted from "Circular Testimonials"
   by Maxim Bortnikov). Motion: assets/js/testimonials.js.
   ========================================================================== */
/* The whole section fits one screen: room for the floating nav on top, the
   heading row, then the carousel sized from the remaining height. */
.jh-voices {
  --jh-v-top: calc(var(--jh-nav-space, 96px) + 2vh);
  --jh-v-head: clamp(80px, 13vh, 120px);
  overflow: hidden;
  padding: var(--jh-v-top) 0 clamp(28px, 5vh, 56px);
}
.jh-voices__head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 32px;
  min-height: var(--jh-v-head); margin-bottom: clamp(16px, 3vh, 36px);
}
.jh-voices__head .jh-eyebrow { grid-column: 1 / -1; margin-bottom: 10px !important; }
.jh-voices__head h2 { font-size: clamp(28px, min(3.6vw, 5.4vh), 50px); }
.jh-voices__head .jh-link { margin-top: 0; white-space: nowrap; }
@media (min-width: 861px) and (min-height: 560px) {
  .jh-voices { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .jh-voices > .jh-wrap { width: min(1080px, 100% - 2 * var(--jh-gutter)); }
}

.jh-ct { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 96px); }

/* stacked photos: active in front, neighbours tilted behind */
.jh-ct__stage {
  position: relative;
  /* neighbours tilt up above the stack, so leave head-room for them */
  margin-top: clamp(36px, 7vh, 64px);
  height: clamp(240px, calc(100svh - var(--jh-v-top) - var(--jh-v-head) - 7vh - 130px), 440px);
  /* the family photos are square: a square stage shows each one whole */
  aspect-ratio: 1 / 1; width: auto; max-width: 100%;
  justify-self: center;
  perspective: 1000px;
}
.jh-ct__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(31, 42, 28, .22);
  background: var(--jh-sand);
  opacity: 0;
  transition: transform .8s cubic-bezier(.4, 2, .3, 1), opacity .8s cubic-bezier(.4, 2, .3, 1);
}
.jh-ct__img.is-active { opacity: 1; z-index: 3; }

.jh-ct__content { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.jh-ct__mark {
  position: absolute; top: -.42em; left: -.08em; z-index: 0;
  font-family: var(--jh-serif); font-weight: 700; font-size: 180px; line-height: 1;
  color: var(--jh-green); opacity: .14; pointer-events: none;
}
.jh-ct__text { position: relative; z-index: 1; min-height: 12.5em; }
.jh-ct__name {
  font-family: var(--jh-serif) !important; font-weight: 700 !important;
  font-size: clamp(28px, 2.6vw, 38px) !important; line-height: 1.1 !important; margin: 0 !important;
  color: var(--jh-ink) !important;
}
.jh-ct__role { margin-top: 6px !important; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jh-green); }
.jh-ct__quote {
  margin: clamp(12px, 2.6vh, 26px) 0 0 !important; padding: 0 !important; border: 0 !important;
  font-size: clamp(16px, min(1.5vw, 2.6vh), 21px); line-height: 1.7; color: #3a4436;
}
.jh-ct__name, .jh-ct__role { transition: opacity .35s ease, transform .35s ease; }
.jh-ct.is-swapping .jh-ct__name, .jh-ct.is-swapping .jh-ct__role { opacity: 0; transform: translateY(-14px); }
.jh-ct .jh-ct__quote .jh-qw {
  display: inline-block;
  animation: jh-qw .22s ease-in-out backwards;
  animation-delay: calc(var(--i) * 25ms);
}
@keyframes jh-qw { from { filter: blur(10px); opacity: 0; transform: translateY(5px); } }
/* Mobile browsers (iOS Safari especially) can leave words rasterised at the
   blurred size once the filter animation ends, so phones get a plain fade. */
@media (hover: none), (max-width: 860px) {
  .jh-ct .jh-ct__quote .jh-qw { animation-name: jh-qw-m; }
}
@keyframes jh-qw-m { from { opacity: 0; transform: translateY(5px); } }

.jh-ct__nav { display: flex; align-items: center; gap: 14px; margin-top: clamp(16px, 3.5vh, 36px); }
.jh-ct__arrow {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--jh-ink); color: #fff;
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}
.jh-ct__arrow:hover { background: var(--jh-green); }
.jh-ct__arrow:active { transform: scale(.92); }
.jh-ct__arrow svg { transition: transform .3s ease; }
.jh-ct__arrow[data-dir="-1"]:hover svg { transform: rotate(-360deg); }
.jh-ct__arrow[data-dir="1"]:hover svg { transform: rotate(360deg); }
.jh-ct__arrow:focus-visible { outline: 3px solid var(--jh-green); outline-offset: 3px; }
.jh-ct__count { margin-left: 10px; font-size: 15px; color: var(--jh-muted); font-variant-numeric: tabular-nums; }
.jh-ct__count b { color: var(--jh-ink); }
.jh-ct__progress { flex: 1; max-width: 140px; height: 2px; background: rgba(31, 42, 28, .12); border-radius: 2px; overflow: hidden; }
.jh-ct__progress span { display: block; height: 100%; width: 100%; background: var(--jh-green); transform: scaleX(0); transform-origin: left; }
.jh-ct.is-playing .jh-ct__progress span { animation: jh-ct-progress var(--jh-ct-ms, 6000ms) linear forwards; }
@keyframes jh-ct-progress { to { transform: scaleX(1); } }

@media (max-width: 860px) {
  .jh-ct { grid-template-columns: 1fr; }
  .jh-ct__stage { width: min(340px, 74%); height: auto; margin-top: 40px; }
  .jh-ct__text { min-height: 0; }
  .jh-voices__head { grid-template-columns: 1fr; min-height: 0; }
  .jh-voices__head .jh-link { justify-self: start; margin-top: 14px; }
  /* the nav-height top padding is only needed for the one-screen desktop layout */
  .jh-voices { padding-top: 44px; }
  .jh-marquee { padding: 26px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jh-ct__img, .jh-ct__name, .jh-ct__role { transition: none; }
  .jh-ct .jh-ct__quote .jh-qw { animation: none; }
}

/* the page behind the footer's rounded top matches the home cream */
#siteWrapper:has(.jh-home) { background: #f7f3ec; }