/* ==========================================================================
   Contact page. Markup: contact-us.php. Banner: page-banner.css.
   Motion: assets/js/reveal.js.
   ========================================================================== */
.jh-contact {
  --ct-ink: #1f2a1c; --ct-body: #3a4436; --ct-muted: #5f695a;
  --ct-green: hsl(109, 37%, 33%); --ct-forest: #12261a; --ct-leaf: #b5d29a;
  --ct-cream: #f7f3ec; --ct-line: rgba(31, 42, 28, .12);
  --ct-serif: var(--heading-font-font-family, "Cormorant Garamond"), Georgia, serif;
  --ct-gutter: clamp(20px, 5vw, 72px);
  --ct-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--ct-cream); color: var(--ct-ink);
}
.jh-contact *, .jh-contact *::before, .jh-contact *::after { box-sizing: border-box; }
.jh-contact p { margin: 0; }
#siteWrapper:has(.jh-contact) { background: #f7f3ec; }

.jh-ct2 { padding: clamp(72px, 11vh, 120px) var(--ct-gutter); }
.jh-ct2__in { width: min(1180px, 100%); margin-inline: auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: stretch; }

/* cards */
.jh-ct2__cards { display: grid; gap: 16px; align-content: start; }
.jh-ct2__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center;
  padding: 26px 64px 26px 26px; border-radius: 22px;
  background: #fff; border: 1px solid var(--ct-line);
  color: var(--ct-ink) !important; text-decoration: none !important;
  transition: transform .45s var(--ct-ease), box-shadow .45s var(--ct-ease), border-color .3s ease;
}
.jh-ct2__card::before {   /* green fill that rises on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ct-forest);
  transform: translateY(101%); transition: transform .55s var(--ct-ease);
}
.jh-ct2__card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(31, 42, 28, .14); border-color: transparent; }
.jh-ct2__card:hover::before { transform: none; }
.jh-ct2__ic { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #eef4e7; color: var(--ct-green); transition: background-color .4s ease, color .4s ease; }
.jh-ct2__label { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ct-green); transition: color .4s ease; }
/* Same plain bold as the footer phone: Adelle Sans with even-height digits. */
.jh-ct2__value { margin-top: 4px; font-family: var(--body-font-font-family, "adelle-sans"), "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; letter-spacing: .005em; font-variant-numeric: lining-nums tabular-nums; transition: color .4s ease; }
.jh-ct2__go {
  position: absolute; right: 22px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ct-cream); font-size: 15px; transition: transform .45s var(--ct-ease), background-color .4s ease, color .4s ease;
}
.jh-ct2__card:hover .jh-ct2__ic { background: rgba(181, 210, 154, .16); color: var(--ct-leaf); }
.jh-ct2__card:hover .jh-ct2__label { color: var(--ct-leaf); }
.jh-ct2__card:hover .jh-ct2__value { color: #fff; }
.jh-ct2__card:hover .jh-ct2__go { background: var(--ct-leaf); color: var(--ct-forest); transform: rotate(45deg); }
.jh-ct2__card:focus-visible { outline: 3px solid var(--ct-green); outline-offset: 3px; }

.jh-contact .jh-ct2__note {
  padding: 26px; border-radius: 22px; background: var(--ct-forest); color: #f3ede1;
  font-family: var(--ct-serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.3;
}

/* map */
.jh-ct2__map { position: relative; min-height: 440px; border-radius: 24px; overflow: hidden; border: 1px solid var(--ct-line); box-shadow: 0 30px 70px rgba(31, 42, 28, .14); background: #e7e2d6; }
.jh-ct2__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.75) contrast(1.02); }
/* a pulsing ring over the map's own marker */
.jh-ct2__pin { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 18px; height: 18px; pointer-events: none; }
.jh-ct2__pin span, .jh-ct2__pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ct-green); animation: jh-ct-ping 2.4s ease-out infinite; }
.jh-ct2__pin::before { animation-delay: 1.2s; }
@keyframes jh-ct-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }

/* rise-in */
.jh-reveal-motion .jh-contact .jh-rise { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform 1s var(--ct-ease), box-shadow .45s var(--ct-ease), border-color .3s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.jh-reveal-motion .jh-contact .jh-rise.is-in { opacity: 1; transform: none; }
.jh-reveal-motion .jh-contact .jh-ct2__card.is-in:hover { transform: translateY(-4px); transition-delay: 0s; }
/* the wipe is on the map inside the box: a clipped observed element would never
   count as visible, so the box itself only fades */
.jh-reveal-motion .jh-contact .jh-ct2__map { transform: none; }
.jh-reveal-motion .jh-contact .jh-ct2__map iframe { transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1) .15s; clip-path: inset(0 0 0 0); }
.jh-reveal-motion .jh-contact .jh-ct2__map:not(.is-in) iframe { clip-path: inset(0 0 0 100%); }

@media (max-width: 900px) {
  .jh-ct2__in { grid-template-columns: 1fr; }
  .jh-ct2__map { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) { .jh-ct2__pin span, .jh-ct2__pin::before { animation: none; } }
.jh-ct2__value--solo { grid-row: 1 / 3; margin-top: 0; }