/* ==========================================================================
   Welcome (index-option2.php only): arch photo, an overlapping photo and a
   rotating seal on the left; the welcome line and a button on the right.
   home.js lights the words up as they are read (.jh-reveal) and drifts the
   arch photo (.jh-parallax). welcome.js adds .is-in for the entrance.
   ========================================================================== */
.jh-wl {
  position: relative; overflow: hidden;
  padding: clamp(80px, 13vh, 140px) var(--jh-gutter, 48px);
  background: var(--jh-cream, #f7f3ec);
}
.jh-wl::before {   /* faint contour lines behind the text */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../images/pattern-topo.svg") right center / 620px;
  opacity: .35;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 85%);
          mask-image: linear-gradient(90deg, transparent 35%, #000 85%);
}
.jh-wl__in {
  position: relative; width: min(1180px, 100%); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 8vw, 120px); align-items: center;
}

/* ---------- photos ---------- */
.jh-wl__media { position: relative; max-width: 500px; justify-self: center; width: 100%; padding: 0 12% 12% 0; }
.jh-wl__arch {
  margin: 0; position: relative; overflow: hidden; aspect-ratio: 1 / 1.08;   /* wide enough for both faces */
  border-radius: 999px 999px 26px 26px;
  box-shadow: 0 34px 70px rgba(31, 42, 28, .18);
}
.jh-wl__arch img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; }
.jh-wl__small {
  margin: 0; position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1;
  border-radius: 22px; overflow: hidden; border: 8px solid var(--jh-cream, #f7f3ec);
  box-shadow: 0 24px 50px rgba(31, 42, 28, .2);
}
.jh-wl__small img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.jh-wl__seal {
  position: absolute; left: -34px; bottom: 20%; width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-items: center; background: var(--jh-green-deep, #1c3322); color: #f3ede1;
  box-shadow: 0 18px 40px rgba(20, 38, 25, .3);
}
.jh-wl__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: jh-wl-spin 22s linear infinite; }
.jh-wl__seal text { font-size: 9.6px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; fill: #b5d29a; }
.jh-wl__seal b { font-family: var(--jh-serif); font-style: italic; font-size: 28px; font-weight: 600; color: #fff; }
@keyframes jh-wl-spin { to { rotate: 360deg; } }

/* ---------- copy ---------- */
.jh-wl__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px !important;
  font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--jh-green, #467e3a);
}
.jh-wl__eyebrow::before { content: ""; width: 36px; height: 2px; background: currentColor; }
.jh-home .jh-wl__text {
  margin: 0; max-width: 19em;
  font-family: var(--jh-serif); font-weight: 600;
  font-size: clamp(28px, 2.9vw, 44px); line-height: 1.22; letter-spacing: -0.01em; color: var(--jh-ink, #1f2a1c);
}
.jh-wl__btn {
  display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(26px, 4vh, 40px);
  padding: 8px 8px 8px 26px; border-radius: 999px;
  background: var(--jh-green, #467e3a); color: #fff !important; text-decoration: none !important;
  font-weight: 700; font-size: 16px; letter-spacing: .01em;
  box-shadow: 0 14px 30px rgba(31, 42, 28, .18);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, box-shadow .35s ease;
}
.jh-wl__btn-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--jh-green, #467e3a); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.jh-wl__btn:hover { transform: translateY(-2px); background: var(--jh-green-deep, #1c3322); box-shadow: 0 20px 40px rgba(31, 42, 28, .24); }
.jh-wl__btn:hover .jh-wl__btn-ic { transform: rotate(-45deg); }
.jh-wl__btn:focus-visible { outline: 3px solid var(--jh-green, #467e3a); outline-offset: 4px; }

/* ---------- entrance (welcome.js adds .jh-wl-motion to <html>, .is-in here) ---------- */
.jh-wl-motion .jh-wl__arch { clip-path: inset(100% 0 0 0 round 999px 999px 26px 26px); transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1); }
.jh-wl-motion .jh-wl__small { opacity: 0; transform: translateY(40px) rotate(4deg); transition: opacity .8s ease .5s, transform 1.1s cubic-bezier(.22, 1, .36, 1) .5s; }
.jh-wl-motion .jh-wl__seal { scale: 0; rotate: -60deg; transition: scale .9s cubic-bezier(.34, 1.56, .64, 1) .8s, rotate .9s cubic-bezier(.34, 1.56, .64, 1) .8s; }
.jh-wl-motion :is(.jh-wl__eyebrow, .jh-wl__btn) { opacity: 0; translate: 0 20px; transition: opacity .8s ease, translate 1s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, box-shadow .35s ease; }
.jh-wl-motion .jh-wl__btn { transition-delay: .35s, .35s, 0s, 0s, 0s; }
.jh-wl-motion .jh-wl.is-in .jh-wl__arch { clip-path: inset(0 0 0 0 round 999px 999px 26px 26px); }
.jh-wl-motion .jh-wl.is-in .jh-wl__small { opacity: 1; transform: none; }
.jh-wl-motion .jh-wl.is-in .jh-wl__seal { scale: 1; rotate: 0deg; }
.jh-wl-motion .jh-wl.is-in :is(.jh-wl__eyebrow, .jh-wl__btn) { opacity: 1; translate: 0 0; }

@media (max-width: 860px) {
  .jh-wl__in { grid-template-columns: 1fr; gap: 56px; }
  .jh-wl__media { max-width: 380px; }
  .jh-wl__seal { left: -10px; width: 96px; height: 96px; }
  .jh-wl__seal b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .jh-wl__seal svg { animation: none; } }