/*
Theme Name: John Hugo Canvas
Theme URI: https://johnhugorealestate.com
Description: Minimal canvas theme for John Hugo Real Estate. All design — colors, fluid typography, buttons, sections, cards, testimonial carousel, header & footer — is defined here as reusable components driven by CSS variables. Pages use semantic .jh-* classes only; no inline styles. WordPress default CSS is dequeued so nothing interferes.
Author: John Hugo Real Estate
Version: 2.3.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: johnhugo-canvas
*/

/* ============================================================
   0. FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oranienbaum&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   1. DESIGN TOKENS  — change the whole site from here
   ============================================================ */
:root{
  /* ---- Colors ---- */
  --jh-primary:      #25671E;
  --jh-primary-dark: #1A4D14;
  --jh-gold:         #C5A455;
  --jh-text:         #1F2A23;
  --jh-muted:        #6B7670;
  --jh-bg:           #FFFFFF;
  --jh-sage:         #E5EDE5;
  --jh-cream:        #FAF6EC;
  --jh-border:       #E5E9E5;
  --jh-on-primary:   #FFFFFF;

  /* ---- Fonts ---- */
  --jh-font-serif: "Oranienbaum", Georgia, serif;
  --jh-font-sans:  "Inter", system-ui, -apple-system, sans-serif;
  --jh-weight-heading: 400;

  /* ---- Fluid type scale (min, preferred, max) ---- */
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5rem);   /* hero H1 */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-h3:      clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-quote:   clamp(1.15rem, 1rem + 0.7vw, 1.45rem);  /* testimonial text */
  --fs-lead:    clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-eyebrow: 0.6875rem;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.7;

  /* ---- Spacing ---- */
  --jh-section-y: clamp(4rem, 2rem + 6vw, 8rem);
  --jh-container: 80rem;
  --jh-gutter:    clamp(1.25rem, 0.5rem + 2vw, 2.5rem);

  /* ---- Radius ---- */
  --jh-radius:    0.6rem;
  --jh-radius-sm: 0.3rem;
  --jh-radius-lg: 1.25rem;

  /* ---- Shadows ---- */
  --jh-shadow-soft:    0 4px 20px -6px rgba(37,103,30,.12);
  --jh-shadow-card:    0 10px 30px -12px rgba(31,42,35,.12);
  --jh-shadow-elegant: 0 30px 60px -25px rgba(37,103,30,.35);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--jh-bg); color:var(--jh-text);
  font-family:var(--jh-font-sans); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
figure, blockquote{ margin:0; }
.jh-main{ display:block; }

/* ============================================================
   3. TYPOGRAPHY (uniform, reused everywhere)
   ============================================================ */
.jh-h1,.jh-h2,.jh-h3,.jh-h4,.jh-display{
  font-family:var(--jh-font-serif); font-weight:var(--jh-weight-heading);
  line-height:var(--lh-tight); letter-spacing:-.01em; margin:0; color:var(--jh-text);
}
.jh-display{ font-size:var(--fs-display); line-height:1.04; }
.jh-h1{ font-size:var(--fs-h1); }
.jh-h2{ font-size:var(--fs-h2); }
.jh-h3{ font-size:var(--fs-h3); }
.jh-h4{ font-size:var(--fs-h4); }
.jh-serif{ font-family:var(--jh-font-serif); }
.jh-em-gold{ font-style:italic; color:var(--jh-gold); }
.jh-em-primary{ font-style:italic; color:var(--jh-primary); }

.jh-lead{ font-size:var(--fs-lead); color:var(--jh-muted); line-height:var(--lh-body); }
.jh-muted{ color:var(--jh-muted); }

.jh-eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--jh-font-sans); font-size:var(--fs-eyebrow); font-weight:600;
  text-transform:uppercase; letter-spacing:.35em; color:var(--jh-primary);
}
.jh-eyebrow::before{ content:""; width:2rem; height:1px; background:currentColor; }
.jh-eyebrow--center{ justify-content:center; }
.jh-eyebrow--center::after{ content:""; width:2rem; height:1px; background:currentColor; }
.jh-eyebrow--gold{ color:var(--jh-gold); }
.jh-eyebrow--plain::before,.jh-eyebrow--plain::after{ display:none; }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.jh-container{ max-width:var(--jh-container); margin-inline:auto; padding-inline:var(--jh-gutter); }
.jh-container--narrow{ max-width:56rem; }
.jh-section{ padding-block:var(--jh-section-y); }
.jh-bg-sage{ background:var(--jh-sage); }
.jh-bg-cream{ background:var(--jh-cream); }
.jh-bg-primary{ background:var(--jh-primary); color:var(--jh-on-primary); }

/* ============================================================
   5. BUTTONS & LINKS (uniform)
   ============================================================ */
.jh-btn{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--jh-font-sans); font-size:var(--fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; padding:1rem 1.75rem;
  border-radius:var(--jh-radius); border:1px solid transparent;
  transition:background-color .25s var(--ease), color .25s, box-shadow .25s, transform .25s var(--ease);
}
.jh-btn .ico{ width:16px; height:16px; transition:transform .25s var(--ease); }
.jh-btn:hover .ico{ transform:translateX(4px); }
.jh-btn--sm{ padding:.7rem 1.3rem; font-size:.72rem; }
.jh-btn--lg{ padding:1.125rem 2.1rem; }
.jh-btn--primary{ background:var(--jh-primary); color:var(--jh-on-primary); box-shadow:var(--jh-shadow-soft); }
.jh-btn--primary:hover{ background:var(--jh-primary-dark); transform:translateY(-2px); }
.jh-btn--white{ background:#fff; color:var(--jh-primary); box-shadow:var(--jh-shadow-elegant); }
.jh-btn--white:hover{ background:var(--jh-cream); transform:translateY(-2px); }
.jh-btn--outline{ border-color:var(--jh-border); color:var(--jh-text); }
.jh-btn--outline:hover{ background:var(--jh-sage); }

.jh-textlink{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--jh-primary);
  border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .25s;
}
.jh-textlink:hover{ color:var(--jh-primary-dark); }
.jh-textlink .ico{ width:16px; height:16px; transition:transform .25s var(--ease); }
.jh-textlink:hover .ico{ transform:translateX(4px); }
.jh-textlink--light{ color:#fff; border-color:rgba(255,255,255,.4); }
.jh-textlink--light:hover{ color:var(--jh-gold); border-color:var(--jh-gold); }

/* ============================================================
   6. SCROLL-REVEAL ANIMATION (driven by app.js)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-in{ opacity:1; transform:none; }
  .reveal[data-delay="1"]{ transition-delay:.08s; }
  .reveal[data-delay="2"]{ transition-delay:.16s; }
  .reveal[data-delay="3"]{ transition-delay:.24s; }
  .reveal[data-delay="4"]{ transition-delay:.32s; }
}

@keyframes jh-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes jh-ken{ 0%{transform:scale(1.05) translate(0,0);} 100%{transform:scale(1.15) translate(-1%,-1%);} }

/* ============================================================
   7. HEADER
   ============================================================ */
.jh-header a{ text-decoration:none; }
.jh-header svg{ display:block; }
.jh-topbar{ background:#fff; border-bottom:1px solid var(--jh-border); color:var(--jh-muted);
  font-size:var(--fs-sm); }
.jh-topbar__in{ max-width:var(--jh-container); margin-inline:auto; padding:.5rem var(--jh-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.jh-topbar__l{ display:flex; align-items:center; gap:.9rem; }
.jh-topbar__dot{ width:5px; height:5px; border-radius:50%; background:var(--jh-gold); flex:none; }
.jh-topbar__phone{ display:inline-flex; align-items:center; gap:.4rem; color:var(--jh-primary);
  font-weight:600; white-space:nowrap; }
.jh-topbar__phone:hover{ color:var(--jh-primary-dark); }
.jh-topbar__phone svg{ width:14px; height:14px; }
.jh-topbar__socials{ display:flex; align-items:center; gap:.6rem; }
.jh-soc{ width:28px; height:28px; border:1px solid var(--jh-border); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:var(--jh-muted); transition:.25s; }
.jh-soc:hover{ background:var(--jh-primary); border-color:var(--jh-primary); color:#fff; }
.jh-soc svg{ width:13px; height:13px; }
/* mobile top bar: keep phone + socials, drop the long tagline, center it */
@media (max-width:760px){
  .jh-topbar__in{ justify-content:center; gap:1.25rem; padding:.45rem var(--jh-gutter); }
  .jh-topbar__l{ gap:.6rem; }
  .jh-topbar__tagline{ display:none; }
  .jh-topbar__dot{ display:none; }
  .jh-topbar__phone{ font-size:.82rem; }
}

.jh-bar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--jh-border); transition:box-shadow .3s; }
.jh-bar.is-stuck{ box-shadow:var(--jh-shadow-card); }
.jh-bar__in{ max-width:var(--jh-container); margin-inline:auto; padding:.7rem var(--jh-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; position:relative; }
.jh-logo img{ height:54px; width:auto; }
.jh-nav{ display:flex; align-items:center; gap:2rem; }
.jh-nav__links{ display:flex; align-items:center; gap:1.9rem; }
.jh-nav__links a{ position:relative; font-size:.8rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.14em; color:var(--jh-text); padding:.35rem 0; transition:color .2s; }
.jh-nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--jh-gold); transition:width .28s var(--ease); }
.jh-nav__links a:hover{ color:var(--jh-primary); }
.jh-nav__links a:hover::after{ width:100%; }
.jh-drop{ position:relative; }
.jh-drop__toggle{ display:none; }
.jh-drop__btn{ display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }
.jh-drop__chev{ display:inline-flex; align-items:center; cursor:pointer; }
.jh-drop__chev svg{ width:12px; height:12px; transition:transform .25s; }
.jh-drop__menu{ position:absolute; top:100%; left:0; min-width:190px; background:#fff;
  border:1px solid var(--jh-border); border-radius:var(--jh-radius); box-shadow:var(--jh-shadow-card);
  padding:.4rem 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s; z-index:60; }
.jh-drop__menu a{ display:block; padding:.6rem 1.1rem; letter-spacing:.1em; }
.jh-drop__menu a::after{ display:none; }
.jh-drop:hover .jh-drop__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.jh-drop:hover .jh-drop__chev svg{ transform:rotate(180deg); }
.jh-cta{ display:inline-flex; align-items:center; gap:.55rem; background:var(--jh-primary); color:#fff;
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  padding:.7rem 1.3rem; border-radius:var(--jh-radius); box-shadow:var(--jh-shadow-soft); transition:.25s; }
.jh-cta:hover{ background:var(--jh-primary-dark); transform:translateY(-1px); }
.jh-cta svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.jh-cta:hover svg{ transform:translateX(3px); }
.jh-burger,.jh-toggle{ display:none; }
@media (max-width:1040px){
  .jh-nav{ position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:0 var(--jh-gutter); border-bottom:1px solid var(--jh-border);
    max-height:0; opacity:0; overflow:hidden; box-shadow:var(--jh-shadow-card);
    transition:max-height .4s var(--ease), opacity .3s ease, border-color .4s; border-bottom-color:transparent; }
  .jh-nav__links{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .jh-nav__links > a, .jh-drop{ padding:.95rem 0; border-top:1px solid var(--jh-border); }
  .jh-nav__links a::after{ display:none; }
  .jh-cta{ justify-content:center; margin:1.1rem 0 1.3rem; }
  .jh-burger{ display:inline-flex; cursor:pointer; color:var(--jh-primary); padding:.25rem; }
  .jh-burger svg{ width:28px; height:28px; }
  .jh-toggle:checked ~ .jh-nav{ max-height:720px; opacity:1; border-bottom-color:var(--jh-border); }

  /* dropdown becomes a tap-to-expand accordion on mobile */
  .jh-drop{ position:static; display:block; }
  .jh-drop__btn{ justify-content:space-between; }
  .jh-drop__btn a{ flex:1; }                 /* "About" still navigates */
  .jh-drop__chev{ padding:.25rem .25rem .25rem 1rem; } /* bigger tap target for the chevron */
  .jh-drop__menu{ position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; border-radius:0; padding:0; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
  .jh-drop__menu a{ padding:.7rem 0 .7rem 1.25rem; color:var(--jh-muted); }
  /* closed by default; open when its checkbox is checked */
  .jh-drop__toggle:checked ~ .jh-drop__menu{ max-height:12rem; }
  .jh-drop__toggle:checked ~ .jh-drop__btn .jh-drop__chev svg{ transform:rotate(180deg); }
  .jh-drop:hover .jh-drop__chev svg{ transform:none; } /* no hover-rotate on touch */

  .jh-logo img{ height:42px; }
}
@media (max-width:480px){ .jh-logo img{ height:36px; } }

/* ============================================================
   8. HERO (cinematic)
   ============================================================ */
.jh-hero{ position:relative; isolation:isolate; overflow:hidden; }
.jh-hero__bg{ position:absolute; inset:0; z-index:-1; }
.jh-hero__bg img{ width:100%; height:100%; object-fit:cover; animation:jh-ken 18s ease-out infinite alternate; }
.jh-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,28,14,.45) 0%, rgba(10,28,14,.55) 45%, rgba(10,28,14,.82) 100%); }
.jh-hero__in{ max-width:var(--jh-container); margin-inline:auto; min-height:88vh;
  display:flex; flex-direction:column; justify-content:flex-end; padding:9rem var(--jh-gutter) 4.5rem; }
.jh-hero__copy{ max-width:48rem; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.jh-hero__eyebrow{ color:rgba(255,255,255,.8); margin-bottom:1.5rem; }
.jh-hero__eyebrow .hl{ color:var(--jh-gold); }
.jh-hero h1{ font-family:var(--jh-font-serif); font-weight:var(--jh-weight-heading); color:#fff;
  font-size:var(--fs-display); line-height:1.05; letter-spacing:-.01em; margin:0; }
.jh-hero h1 em{ color:var(--jh-gold); font-style:italic; }
.jh-hero__sub{ margin:2rem 0 0; max-width:36rem; font-size:var(--fs-lead); color:rgba(255,255,255,.85); }
.jh-hero__btns{ margin-top:2.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.jh-qlinks{ margin-top:3.5rem; display:grid; gap:1px; border:1px solid rgba(255,255,255,.15);
  border-radius:var(--jh-radius); overflow:hidden; background:rgba(255,255,255,.1); backdrop-filter:blur(12px); }
@media (min-width:768px){ .jh-qlinks{ grid-template-columns:repeat(4,1fr); } }
.jh-qlink{ display:flex; align-items:center; justify-content:space-between;
  background:rgba(37,103,30,.4); color:#fff; padding:1.25rem 1.5rem; transition:background .25s; }
.jh-qlink:hover{ background:var(--jh-primary); }
.jh-qlink__sub{ font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.3em; color:rgba(255,255,255,.6); }
.jh-qlink__label{ display:block; margin-top:.25rem; font-family:var(--jh-font-serif); font-size:1.5rem; }
.jh-qlink svg{ width:20px; height:20px; color:rgba(255,255,255,.6); transition:.25s var(--ease); }
.jh-qlink:hover svg{ transform:translateX(4px); color:var(--jh-gold); }

/* ============================================================
   9. MARQUEE
   ============================================================ */
.jh-marq{ background:var(--jh-cream); border-block:1px solid var(--jh-border); overflow:hidden; }
.jh-marq__row{ display:flex; align-items:center; gap:1.5rem; padding:1.25rem 0; }
.jh-marq__label{ margin-left:var(--jh-gutter); flex:none; font-size:.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.3em; color:var(--jh-primary); }
@media (max-width:767px){ .jh-marq__label{ display:none; } }
.jh-marq__track{ display:flex; flex:none; gap:3rem; white-space:nowrap; animation:jh-marquee 38s linear infinite; }
.jh-marq:hover .jh-marq__track{ animation-play-state:paused; }
.jh-marq__item{ display:flex; align-items:center; gap:.75rem; font-family:var(--jh-font-serif);
  font-size:1.5rem; color:var(--jh-primary); }
.jh-marq__item svg{ width:16px; height:16px; opacity:.6; }
.jh-marq__item .dot{ width:4px; height:4px; border-radius:50%; background:rgba(37,103,30,.4); }

/* ============================================================
   10. EDITORIAL / MEET JOHN
   ============================================================ */
.jh-edit{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:768px){ .jh-edit{ grid-template-columns:repeat(12,1fr); } }
.jh-edit__media{ grid-column:span 5; }
.jh-edit__sticky{ position:sticky; top:7rem; }
.jh-edit__imgwrap{ position:relative; width:100%; }
.jh-edit__imgwrap img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--jh-radius-sm); box-shadow:var(--jh-shadow-elegant); }
.jh-edit__badge{ position:absolute; right:-1.5rem; bottom:-1.5rem; background:var(--jh-primary); color:#fff; padding:1.5rem; box-shadow:var(--jh-shadow-elegant); }
.jh-edit__badge .n{ font-family:var(--jh-font-serif); font-size:3rem; line-height:1; }
.jh-edit__badge .n em{ color:var(--jh-gold); font-style:normal; }
.jh-edit__badge .t{ margin-top:.5rem; font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.25em; color:rgba(255,255,255,.8); }
@media (max-width:767px){
  .jh-edit__badge{ right:.75rem; bottom:.75rem; padding:.9rem 1rem; }
  .jh-edit__badge .n{ font-size:2rem; }
  .jh-edit__badge .t{ font-size:.5625rem; margin-top:.25rem; }
}
.jh-edit__body{ grid-column:span 7; }
@media (min-width:768px){ .jh-edit__body{ padding-left:2rem; } }
.jh-edit__body h2{ margin-top:1.5rem; }
.jh-edit__body .jh-lead{ font-size:var(--fs-body); color:var(--jh-text); }
.jh-prose{ margin-top:1.25rem; display:flex; flex-direction:column; gap:1rem; color:var(--jh-muted); line-height:var(--lh-body); }
.jh-stats{ margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  border-block:1px solid var(--jh-border); padding-block:2rem; }
.jh-stats .n{ font-family:var(--jh-font-serif); font-size:clamp(2.25rem,1.5rem+2vw,3rem); color:var(--jh-primary); line-height:1; }
.jh-stats .n em{ color:var(--jh-gold); font-style:normal; }
.jh-stats .l{ margin-top:.5rem; font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.25em; color:var(--jh-muted); }

/* ============================================================
   11. SECTION HEADINGS (shared)
   ============================================================ */
.jh-sec-head{ display:grid; gap:2rem; align-items:end; }
@media (min-width:768px){ .jh-sec-head{ grid-template-columns:repeat(12,1fr); } }
.jh-sec-head__l{ grid-column:span 7; }
.jh-sec-head__l h2{ margin-top:1.25rem; }
.jh-sec-head__r{ grid-column:span 5; color:var(--jh-muted); }
.jh-sec-head--center{ display:block; text-align:center; max-width:42rem; margin-inline:auto; }
.jh-sec-head--center h2{ margin-top:1.25rem; }

/* ============================================================
   12. SERVICE CARDS
   ============================================================ */
/* Overlay image cards — image with elegant gradient + content over it */
.jh-cards{ margin-top:clamp(2.5rem,4vw,4rem); display:grid; gap:clamp(1.25rem,2vw,1.75rem); grid-template-columns:1fr; }
@media (min-width:560px){ .jh-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .jh-cards{ grid-template-columns:repeat(4,1fr); } }
.jh-scard{ position:relative; display:block; aspect-ratio:3/4; border-radius:var(--jh-radius); overflow:hidden;
  background:var(--jh-sage); box-shadow:var(--jh-shadow-card); transition:box-shadow .4s, transform .4s var(--ease); }
.jh-scard:hover{ box-shadow:var(--jh-shadow-elegant); transform:translateY(-6px); }
.jh-scard__img{ position:absolute; inset:0; }
.jh-scard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.jh-scard:hover .jh-scard__img img{ transform:scale(1.08); }
/* green overlay — SOLID green at the bottom fading up to clear. No dark layer. */
.jh-scard__img::after, .jh-scard__veil{ content:""; position:absolute; inset:0; transition:.5s;
  background:linear-gradient(to top, var(--jh-primary) 0%, var(--jh-primary) 18%, rgba(37,103,30,.55) 48%, rgba(37,103,30,.12) 78%, rgba(37,103,30,0) 100%); }
.jh-scard:hover .jh-scard__img::after, .jh-scard:hover .jh-scard__veil{
  background:linear-gradient(to top, var(--jh-primary) 0%, var(--jh-primary) 45%, rgba(37,103,30,.6) 72%, rgba(37,103,30,.15) 92%, rgba(37,103,30,0) 100%); }
.jh-scard__num{ position:absolute; right:1rem; top:1rem; font-family:var(--jh-font-serif); font-size:1.5rem;
  color:var(--jh-gold); text-shadow:0 1px 10px rgba(0,0,0,.5); }
.jh-scard__body{ position:absolute; inset:auto 0 0 0; padding:1.5rem; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.45); }
.jh-scard__body h3{ font-family:var(--jh-font-serif); font-size:var(--fs-h3); color:#fff; line-height:1.15; }
.jh-scard__rule{ display:block; width:0; height:2px; background:var(--jh-gold); margin:0; transition:width .4s var(--ease); }
.jh-scard:hover .jh-scard__rule{ width:3.5rem; margin:.85rem 0 0; }
/* description + Explore: hidden, slide up on hover */
.jh-scard__body p{ font-size:var(--fs-sm); color:rgba(255,255,255,.92);
  max-height:0; opacity:0; margin:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .4s, margin .45s; }
.jh-scard:hover .jh-scard__body p{ max-height:14rem; opacity:1; margin-top:.85rem; }
.jh-scard__more{ display:inline-flex; align-items:center; gap:.5rem;
  font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.25em; color:#fff;
  max-height:0; opacity:0; margin:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .4s, margin .45s; }
.jh-scard:hover .jh-scard__more{ max-height:3rem; opacity:1; margin-top:1rem; }
.jh-scard__more svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.jh-scard:hover .jh-scard__more svg{ transform:translateX(4px); }

/* ============================================================
   13. WHY JOHN (split)
   ============================================================ */
.jh-split{ display:grid; }
@media (min-width:768px){ .jh-split{ grid-template-columns:repeat(2,1fr); } }
.jh-split__media{ position:relative; min-height:500px; overflow:hidden; }
.jh-split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.jh-split__panel{ background:var(--jh-primary); color:#fff; padding:clamp(3rem,5vw,8rem) clamp(1.5rem,4vw,4rem); }
.jh-split__panel h2{ margin-top:1.5rem; color:#fff; }
.jh-split__panel .jh-lead{ color:rgba(255,255,255,.85); }
.jh-flist{ margin-top:3rem; display:flex; flex-direction:column; gap:2rem; }
.jh-fitem{ display:flex; gap:1.25rem; border-top:1px solid rgba(255,255,255,.15); padding-top:2rem; }
.jh-fitem__ic{ flex:none; width:46px; height:46px; border-radius:50%; background:rgba(197,164,85,.22);
  display:flex; align-items:center; justify-content:center; }
.jh-fitem__ic svg{ width:20px; height:20px; color:var(--jh-gold); }
.jh-fitem h3{ font-family:var(--jh-font-serif); font-size:var(--fs-h4); color:#fff; }
.jh-fitem p{ margin-top:.4rem; font-size:var(--fs-sm); color:rgba(255,255,255,.82); }

/* ============================================================
   14. TESTIMONIALS — carousel ("Voices of Excellence")
   ============================================================ */
/* 3-up testimonial cards (carousel) */
.jh-tst{ background:var(--jh-cream); position:relative; overflow:hidden; }
.jh-tst__feature{ position:relative; margin-top:clamp(2.5rem,4vw,3.5rem); }
.jh-tst__viewport{ overflow:hidden; width:100%; min-width:0; padding-block:1rem; }
.jh-tst__track{ display:flex; transition:transform .6s var(--ease); align-items:stretch; }
.jh-tst__slide{ flex:0 0 100%; padding-inline:.75rem; display:flex; align-items:stretch; box-sizing:border-box; }
@media (min-width:640px){ .jh-tst__slide{ flex-basis:50%; } }
@media (min-width:1000px){ .jh-tst__slide{ flex-basis:33.3333%; } }
.jh-tst__card{ position:relative; display:flex; flex-direction:column; width:100%;
  background:#fff; border:1px solid var(--jh-border); border-radius:var(--jh-radius);
  padding:clamp(1.75rem,2.2vw,2.25rem); box-shadow:var(--jh-shadow-card);
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s, background .4s; }
.jh-tst__card:hover{ transform:translateY(-.6rem); box-shadow:var(--jh-shadow-elegant);
  border-color:rgba(37,103,30,.2); background:linear-gradient(180deg,#fff,#f4f8f3); }
.jh-tst__mark{ font-family:var(--jh-font-serif); font-size:3rem; line-height:.4; color:var(--jh-primary); opacity:.16; }
.jh-tst__stars{ color:var(--jh-gold); letter-spacing:.15em; font-size:.95rem; margin-top:1rem; }
.jh-tst__text{ margin-top:1rem; flex:1; font-family:var(--jh-font-serif); font-style:italic;
  font-size:1.15rem; line-height:1.55; color:var(--jh-text); }
.jh-tst__by{ display:flex; align-items:center; gap:.85rem; margin-top:1.75rem;
  border-top:1px solid var(--jh-border); padding-top:1.5rem; }
.jh-tst__av{ width:50px; height:50px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--jh-primary); color:#fff; font-family:var(--jh-font-serif); font-size:1.35rem;
  display:flex; align-items:center; justify-content:center; }
.jh-tst__meta{ display:flex; flex-direction:column; }
.jh-tst__name{ font-weight:600; font-size:.95rem; color:var(--jh-text); }
.jh-tst__role{ margin-top:.1rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--jh-primary); }
/* arrows — float over the edges so cards use full width */
.jh-tst__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid var(--jh-border); color:var(--jh-primary);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--jh-shadow-card); transition:.25s; }
.jh-tst__arrow[data-prev]{ left:-8px; }
.jh-tst__arrow[data-next]{ right:-8px; }
.jh-tst__arrow:hover{ background:var(--jh-primary); color:#fff; border-color:var(--jh-primary); transform:translateY(-50%) scale(1.06); }
.jh-tst__arrow svg{ width:20px; height:20px; }
@media (max-width:900px){ .jh-tst__arrow{ display:none; } }
/* dots */
.jh-tst__dots{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:1.75rem; }
.jh-tst__dot{ width:8px; height:8px; border-radius:99px; border:0; padding:0; cursor:pointer;
  background:rgba(37,103,30,.25); transition:width .3s var(--ease), background .3s; }
.jh-tst__dot.is-active{ width:28px; background:var(--jh-primary); }

/* ============================================================
   15. CTA STRIP
   ============================================================ */
.jh-ctastrip{ position:relative; isolation:isolate; overflow:hidden; background:var(--jh-primary); color:#fff;
  padding:var(--jh-section-y) var(--jh-gutter); text-align:center; }
.jh-ctastrip::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.3;
  background:radial-gradient(circle at 20% 50%, rgba(197,164,85,.4), transparent 50%),
             radial-gradient(circle at 80% 50%, rgba(26,77,20,.8), transparent 60%); }
.jh-ctastrip__in{ max-width:56rem; margin-inline:auto; }
.jh-ctastrip h2{ margin-top:1.5rem; color:#fff; }
.jh-ctastrip p{ margin:1.5rem auto 2.5rem; max-width:36rem; color:rgba(255,255,255,.85); }

/* ============================================================
   16. CONTACT
   ============================================================ */
.jh-contact{ display:grid; gap:clamp(2.5rem,5vw,3.5rem); }
@media (min-width:768px){ .jh-contact{ grid-template-columns:1fr 1fr; } }
.jh-contact h2{ margin-top:1.25rem; }
.jh-contact__lead{ margin:1.5rem 0 2.5rem; max-width:34rem; color:var(--jh-muted); }
.jh-cinfo{ display:flex; flex-direction:column; gap:1.5rem; }
.jh-cinfo__row{ display:flex; gap:1rem; align-items:flex-start; }
.jh-cinfo__ic{ flex:none; width:44px; height:44px; border-radius:var(--jh-radius-sm); background:var(--jh-primary);
  display:flex; align-items:center; justify-content:center; }
.jh-cinfo__ic svg{ width:18px; height:18px; color:#fff; }
.jh-cinfo__k{ font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.25em; color:var(--jh-muted); }
.jh-cinfo__v{ margin-top:.15rem; color:var(--jh-text); }
.jh-formcard{ background:#fff; border-radius:var(--jh-radius); padding:1.25rem; box-shadow:var(--jh-shadow-card); }
.jh-formcard .lacrm-embed{ margin:0; border:0; }
.jh-formcard iframe{ width:100% !important; border:0; }
/* hide LACRM "Powered by" footer badge */
#EmbedWrapper .PublicFormFooterClickTargetWrapper,
.PublicFormFooterClickTargetWrapper{ display:none !important; }

/* ============================================================
   16b. INNER PAGE COMPONENTS
   ============================================================ */
/* page hero (sage banner) */
.jh-phero{ background:var(--jh-sage); text-align:center; }
.jh-phero__in{ max-width:52rem; margin-inline:auto; padding:clamp(4rem,7vw,7rem) var(--jh-gutter); }
.jh-phero .jh-eyebrow{ justify-content:center; }
.jh-phero h1{ margin-top:1.25rem; font-size:var(--fs-h1); color:var(--jh-text); }
.jh-phero p{ margin:1.25rem auto 0; max-width:40rem; color:var(--jh-muted); font-size:var(--fs-lead); }

/* two-column image + text split (reused on inner pages) */
.jh-two{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center; }
@media (min-width:768px){ .jh-two{ grid-template-columns:1fr 1fr; } }
.jh-two__img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--jh-radius); box-shadow:var(--jh-shadow-card); }
.jh-two__img--tall{ aspect-ratio:4/5; }
.jh-two h2{ margin-top:1rem; }
.jh-two__rule{ display:block; width:3rem; height:2px; background:var(--jh-gold); margin:1rem 0 1.5rem; }
.jh-two p{ color:var(--jh-muted); }
.jh-two__list{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.jh-two__list li{ position:relative; padding-left:1.4rem; color:var(--jh-text); font-size:var(--fs-sm); }
.jh-two__list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--jh-gold); }
.jh-two__chips{ margin-top:1.75rem; display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.jh-chip{ display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm); color:var(--jh-text); }
.jh-chip svg{ width:18px; height:18px; color:var(--jh-primary); flex:none; }

/* feature / value / step cards (white cards w/ icon) */
.jh-fgrid{ margin-top:clamp(2.5rem,4vw,3.5rem); display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:560px){ .jh-fgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .jh-fgrid--4{ grid-template-columns:repeat(4,1fr); } }
.jh-fcard{ background:#fff; border:1px solid var(--jh-border); border-radius:var(--jh-radius);
  padding:1.75rem; box-shadow:var(--jh-shadow-card);
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.jh-fcard:hover{ transform:translateY(-5px); box-shadow:var(--jh-shadow-elegant); border-color:rgba(37,103,30,.18); }
.jh-fcard__num{ font-family:var(--jh-font-serif); font-size:1.75rem; color:rgba(37,103,30,.35); }
.jh-fcard__ic{ width:46px; height:46px; border-radius:50%; background:var(--jh-sage);
  display:flex; align-items:center; justify-content:center; }
.jh-fcard__ic svg{ width:22px; height:22px; color:var(--jh-primary); }
.jh-fcard h3{ margin-top:1rem; font-family:var(--jh-font-serif); font-size:var(--fs-h4); color:var(--jh-text); }
.jh-fcard p{ margin-top:.5rem; font-size:var(--fs-sm); color:var(--jh-muted); }

/* centered section heading w/ gold rule */
.jh-centerhead{ text-align:center; }
.jh-centerhead h2{ font-size:var(--fs-h2); color:var(--jh-text); }
.jh-centerhead__rule{ display:block; width:3rem; height:2px; background:var(--jh-gold); margin:1.25rem auto 0; }

/* inline stat grid (invest) */
.jh-statgrid{ margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.jh-statgrid .n{ font-family:var(--jh-font-serif); font-size:clamp(2rem,1.4rem+1.6vw,2.6rem); color:var(--jh-primary); line-height:1; }
.jh-statgrid .l{ margin-top:.4rem; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--jh-muted); }

/* highlight panel (invest holdings) */
.jh-panel{ margin-top:3rem; background:#fff; border:1px solid var(--jh-border); border-radius:var(--jh-radius);
  padding:clamp(2rem,3vw,2.75rem); text-align:center; box-shadow:var(--jh-shadow-card); }
.jh-panel h3{ font-family:var(--jh-font-serif); font-size:var(--fs-h3); color:var(--jh-text); }
.jh-panel p{ margin:1rem auto 0; max-width:44rem; color:var(--jh-muted); }

/* golf community cards */
.jh-comm{ margin-top:clamp(2.5rem,4vw,3.5rem); display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .jh-comm{ grid-template-columns:repeat(2,1fr); } }
.jh-commcard{ background:#fff; border:1px solid var(--jh-border); border-left:4px solid var(--jh-primary);
  border-radius:var(--jh-radius-sm); padding:1.75rem; box-shadow:var(--jh-shadow-card); transition:transform .3s var(--ease), box-shadow .3s; }
.jh-commcard:hover{ transform:translateY(-4px); box-shadow:var(--jh-shadow-elegant); }
.jh-commcard__town{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--jh-muted); }
.jh-commcard h3{ margin-top:.35rem; font-family:var(--jh-font-serif); font-size:var(--fs-h3); color:var(--jh-text); }
.jh-commcard p{ margin-top:.6rem; font-size:var(--fs-sm); color:var(--jh-muted); }
/* featured "where I live & play" community */
.jh-commcard--feature{ background:linear-gradient(180deg,#fff,#f4f8f3); border-left-width:5px; padding:clamp(1.75rem,3vw,2.5rem); }
.jh-commcard--feature h3{ font-size:clamp(1.6rem,1.2rem+1.2vw,2.2rem); }
.jh-commcard--feature p{ font-size:var(--fs-base); max-width:54rem; }
.jh-commcard__tag{ display:inline-block; margin-bottom:.85rem; background:var(--jh-gold); color:#3a2e0c;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; padding:.4rem .9rem; border-radius:99px; }
.jh-commcard__link{ margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--jh-primary); }
.jh-commcard__link svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.jh-commcard:hover .jh-commcard__link svg{ transform:translateX(4px); }

/* reversed two-column (image right on desktop) */
@media (min-width:768px){
  .jh-two--rev .jh-two__txt{ order:2; }
  .jh-two--rev .jh-two__media{ order:1; }
}
.jh-two__media{ position:relative; }
.jh-two__badge{ position:absolute; left:-1.25rem; bottom:-1.25rem; background:var(--jh-primary); color:#fff;
  padding:1.25rem 1.5rem; border-radius:var(--jh-radius); box-shadow:var(--jh-shadow-elegant); max-width:14rem; }
@media (max-width:767px){ .jh-two__badge{ left:.75rem; bottom:.75rem; padding:.9rem 1.1rem; } }
.jh-two__badge .n{ font-family:var(--jh-font-serif); font-size:2rem; line-height:1; }
.jh-two__badge .n em{ color:var(--jh-gold); font-style:normal; }
.jh-two__badge .t{ margin-top:.35rem; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.85); }

/* inline CTA band */
.jh-ctaband{ position:relative; isolation:isolate; overflow:hidden; background:var(--jh-primary); color:#fff;
  border-radius:var(--jh-radius-lg); padding:clamp(2.25rem,4vw,3.5rem); box-shadow:var(--jh-shadow-elegant);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.jh-ctaband::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.3;
  background:radial-gradient(circle at 15% 50%, rgba(197,164,85,.45), transparent 55%),
             radial-gradient(circle at 90% 30%, rgba(26,77,20,.9), transparent 60%); }
.jh-ctaband__txt h3{ font-family:var(--jh-font-serif); font-size:var(--fs-h3); color:#fff; }
.jh-ctaband__txt p{ margin-top:.5rem; color:rgba(255,255,255,.85); max-width:40rem; font-size:var(--fs-sm); }

/* process timeline (numbered steps) */
.jh-steps{ margin-top:clamp(2.5rem,4vw,3.5rem); display:grid; gap:1.25rem; grid-template-columns:1fr; max-width:60rem; margin-inline:auto; }
.jh-step{ position:relative; display:flex; gap:1.25rem; background:#fff; border:1px solid var(--jh-border);
  border-radius:var(--jh-radius); padding:1.5rem 1.75rem; box-shadow:var(--jh-shadow-card);
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.jh-step:hover{ transform:translateX(6px); box-shadow:var(--jh-shadow-elegant); border-color:rgba(37,103,30,.18); }
.jh-step__n{ flex:none; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--jh-primary); color:#fff;
  font-family:var(--jh-font-serif); font-size:1.2rem; display:flex; align-items:center; justify-content:center; }
.jh-step h3{ font-family:var(--jh-font-serif); font-size:var(--fs-h4); color:var(--jh-text); }
.jh-step p{ margin-top:.35rem; font-size:var(--fs-sm); color:var(--jh-muted); }
.jh-steps__note{ max-width:60rem; margin:2rem auto 0; text-align:center; color:var(--jh-muted); }

/* FAQ accordion (native details/summary) */
.jh-faq{ max-width:52rem; margin:clamp(2.5rem,4vw,3.5rem) auto 0; display:flex; flex-direction:column; gap:.85rem; }
.jh-faq__item{ background:#fff; border:1px solid var(--jh-border); border-radius:var(--jh-radius); overflow:hidden;
  transition:border-color .3s, box-shadow .3s; }
.jh-faq__item[open]{ border-color:rgba(37,103,30,.25); box-shadow:var(--jh-shadow-card); }
.jh-faq__q{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 1.5rem; font-family:var(--jh-font-serif); font-size:1.2rem; color:var(--jh-text); }
.jh-faq__q::-webkit-details-marker{ display:none; }
.jh-faq__q svg{ flex:none; width:20px; height:20px; color:var(--jh-primary); transition:transform .3s var(--ease); }
.jh-faq__item[open] .jh-faq__q svg{ transform:rotate(45deg); }
.jh-faq__a{ padding:0 1.5rem 1.4rem; color:var(--jh-muted); font-size:var(--fs-sm); line-height:1.7; }
.jh-faq__a p{ margin:0 0 .75rem; } .jh-faq__a p:last-child{ margin-bottom:0; }

/* two-up differentiator blocks */
.jh-diff{ margin-top:clamp(2.5rem,4vw,3.5rem); display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .jh-diff{ grid-template-columns:repeat(2,1fr); } }
.jh-diff__card{ background:#fff; border:1px solid var(--jh-border); border-radius:var(--jh-radius);
  padding:clamp(1.75rem,2.5vw,2.5rem); box-shadow:var(--jh-shadow-card); }
.jh-diff__card .jh-fcard__ic{ margin-bottom:1rem; }
.jh-diff__card h3{ font-family:var(--jh-font-serif); font-size:var(--fs-h3); color:var(--jh-text); }
.jh-diff__card p{ margin-top:.85rem; color:var(--jh-muted); font-size:var(--fs-sm); line-height:1.7; }

/* team member cards */
.jh-team{ margin-top:clamp(2.5rem,4vw,3.5rem); display:grid; gap:1.75rem; grid-template-columns:1fr; }
@media (min-width:700px){ .jh-team{ grid-template-columns:repeat(3,1fr); } }
.jh-tcard{ text-align:center; background:#fff; border:1px solid var(--jh-border); border-radius:var(--jh-radius);
  padding:2rem 1.5rem; box-shadow:var(--jh-shadow-card); transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.jh-tcard:hover{ transform:translateY(-6px); box-shadow:var(--jh-shadow-elegant); border-color:rgba(37,103,30,.18); }
.jh-tcard__photo{ width:130px; height:130px; margin:0 auto 1.25rem; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:var(--jh-shadow-soft); background:var(--jh-sage); }
.jh-tcard h3{ font-family:var(--jh-font-serif); font-size:var(--fs-h3); color:var(--jh-text); }
.jh-tcard__role{ margin-top:.4rem; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--jh-primary); }
.jh-tcard__bio{ margin-top:.85rem; font-size:var(--fs-sm); color:var(--jh-muted); }
.jh-tcard__link{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--jh-primary); }
.jh-tcard__link svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.jh-tcard__link:hover svg{ transform:translateX(4px); }

/* expertise pills */
.jh-pills{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.jh-pill-tag{ display:inline-flex; align-items:center; gap:.55rem; background:#fff; border:1px solid var(--jh-border);
  border-radius:99px; padding:.7rem 1.25rem; font-size:var(--fs-sm); font-weight:500; color:var(--jh-text);
  box-shadow:var(--jh-shadow-card); transition:transform .25s var(--ease), border-color .25s, color .25s; }
.jh-pill-tag:hover{ transform:translateY(-3px); border-color:var(--jh-primary); color:var(--jh-primary); }
.jh-pill-tag svg{ width:15px; height:15px; color:var(--jh-gold); }

/* numbered partnership cards */
.jh-ways{ margin-top:clamp(2.5rem,4vw,3.5rem); display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:900px){ .jh-ways{ grid-template-columns:repeat(3,1fr); } }
.jh-way{ position:relative; background:#fff; border:1px solid var(--jh-border); border-radius:var(--jh-radius);
  padding:2rem; box-shadow:var(--jh-shadow-card); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.jh-way::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--jh-gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.jh-way:hover{ transform:translateY(-6px); box-shadow:var(--jh-shadow-elegant); border-color:rgba(37,103,30,.18); }
.jh-way:hover::before{ transform:scaleX(1); }
.jh-way__n{ font-family:var(--jh-font-serif); font-size:2.5rem; color:rgba(37,103,30,.25); line-height:1; }
.jh-way h3{ margin-top:.5rem; font-family:var(--jh-font-serif); font-size:var(--fs-h3); color:var(--jh-text); }
.jh-way p{ margin-top:.85rem; font-size:var(--fs-sm); color:var(--jh-muted); line-height:1.7; }

/* static testimonials grid (Testimonials page) */
.jh-tstgrid{ margin-top:0; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .jh-tstgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .jh-tstgrid{ grid-template-columns:repeat(3,1fr); } }
.jh-tstgrid .jh-tst__card{ min-height:0; }

/* ===== BLOG — editorial "Journal" layout ===== */
/* overlay featured */
.jh-jfeat{ position:relative; display:block; border-radius:var(--jh-radius); overflow:hidden;
  min-height:clamp(20rem,42vw,30rem); background-size:cover; background-position:center;
  box-shadow:var(--jh-shadow-card); transition:box-shadow .4s, transform .4s var(--ease); }
.jh-jfeat:hover{ box-shadow:var(--jh-shadow-elegant); }
.jh-jfeat__veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,24,10,.88) 0%, rgba(8,24,10,.4) 45%, rgba(8,24,10,.05) 75%); }
.jh-jfeat__body{ position:absolute; inset:auto 0 0 0; padding:clamp(1.5rem,3vw,2.75rem); color:#fff; max-width:46rem; }
.jh-jfeat__pill{ display:inline-block; background:rgba(255,255,255,.92); color:var(--jh-primary);
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; padding:.45rem .9rem; border-radius:99px; }
.jh-jfeat__title{ margin-top:1rem; font-family:var(--jh-font-serif); font-weight:var(--jh-weight-heading);
  font-size:clamp(1.6rem,1.2rem+1.8vw,2.6rem); line-height:1.15; color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.4); }
.jh-jfeat__excerpt{ margin-top:.85rem; max-width:38rem; color:rgba(255,255,255,.9); font-size:var(--fs-sm); text-shadow:0 1px 12px rgba(0,0,0,.4); }
.jh-jfeat__meta{ margin-top:1rem; font-size:.75rem; color:rgba(255,255,255,.8); }

/* latest-stories bar + filters */
.jh-jbar{ margin-top:clamp(3rem,6vw,5rem); display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  border-bottom:1px solid var(--jh-border); padding-bottom:1.25rem; }
.jh-jfilters{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.jh-jfilter{ background:none; border:0; cursor:pointer; font-family:var(--jh-font-sans);
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--jh-muted); padding:0; transition:color .2s; }
.jh-jfilter:hover{ color:var(--jh-text); }
.jh-jfilter.is-active{ color:var(--jh-primary); }

/* grid */
.jh-bloggrid{ margin-top:2.5rem; display:grid; gap:1.75rem; grid-template-columns:1fr; }
@media (min-width:600px){ .jh-bloggrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .jh-bloggrid{ grid-template-columns:repeat(3,1fr); } }
.jh-bcard{ display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--jh-border);
  border-radius:var(--jh-radius); box-shadow:var(--jh-shadow-card); transition:transform .35s var(--ease), box-shadow .35s; }
.jh-bcard:hover{ transform:translateY(-6px); box-shadow:var(--jh-shadow-elegant); }
.jh-bcard__img{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; }
.jh-bcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.jh-bcard:hover .jh-bcard__img img{ transform:scale(1.06); }
.jh-bcard__pill{ position:absolute; left:1rem; top:1rem; background:rgba(255,255,255,.92); color:var(--jh-primary);
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; padding:.4rem .8rem; border-radius:99px; box-shadow:var(--jh-shadow-soft); }
.jh-bcard__body{ display:flex; flex-direction:column; flex:1; padding:1.5rem; }
.jh-bcard h3{ font-family:var(--jh-font-serif); font-size:1.35rem; color:var(--jh-text); line-height:1.2; }
.jh-bcard h3 a:hover{ color:var(--jh-primary); }
.jh-bcard p{ margin-top:.6rem; flex:1; font-size:var(--fs-sm); color:var(--jh-muted); }
.jh-bcard__foot{ margin-top:1.25rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--jh-muted); }
.jh-bcard__noimg{ display:block; width:100%; height:100%; background:linear-gradient(135deg, var(--jh-sage), var(--jh-cream)); }

/* load more */
.jh-jmore{ margin-top:2.5rem; display:flex; justify-content:center; }

/* blog cards inside the homepage carousel */
.jh-tst--plain{ background:transparent; }
.jh-tst__slide .jh-bcard{ height:100%; }
.jh-tst__slide .jh-bcard__body{ min-height:0; }

.jh-readlink{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--jh-primary); }
.jh-readlink svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.jh-readlink:hover svg{ transform:translateX(3px); }

/* ============================================================
   16c. SINGLE POST (article + comments)
   ============================================================ */
.jh-article{ max-width:46rem; margin-inline:auto; padding:clamp(2.5rem,5vw,4rem) var(--jh-gutter); }
.jh-article__img img{ width:100%; border-radius:var(--jh-radius); box-shadow:var(--jh-shadow-card); margin-bottom:2.5rem; }
/* readable long-form content */
.jh-prose-body{ color:var(--jh-text); font-size:1.075rem; line-height:1.8; }
.jh-prose-body > *{ margin-block:1.1rem; }
.jh-prose-body h2{ font-family:var(--jh-font-serif); font-weight:var(--jh-weight-heading); font-size:var(--fs-h2); margin-top:2.5rem; }
.jh-prose-body h3{ font-family:var(--jh-font-serif); font-weight:var(--jh-weight-heading); font-size:var(--fs-h3); margin-top:2rem; }
.jh-prose-body a{ color:var(--jh-primary); text-decoration:underline; text-underline-offset:2px; }
.jh-prose-body a:hover{ color:var(--jh-primary-dark); }
.jh-prose-body img{ border-radius:var(--jh-radius-sm); }
.jh-prose-body blockquote{ margin-inline:0; padding:.5rem 0 .5rem 1.5rem; border-left:3px solid var(--jh-gold);
  font-family:var(--jh-font-serif); font-style:italic; font-size:1.3rem; color:var(--jh-text); }
.jh-prose-body ul, .jh-prose-body ol{ padding-left:1.4rem; }
.jh-prose-body li{ margin-block:.4rem; }
.jh-article__cats{ margin-top:2.5rem; font-size:var(--fs-sm); color:var(--jh-muted); }
.jh-article__cats a{ color:var(--jh-primary); }

/* comments */
.jh-comments{ max-width:46rem; margin:3rem auto 0; padding:2.5rem var(--jh-gutter) 0; border-top:1px solid var(--jh-border); }
.jh-comments__title, .jh-comments .wp-block-comments-title{ font-family:var(--jh-font-serif); font-size:var(--fs-h3); margin-bottom:1.5rem; }
.jh-comments .wp-block-comment-author-name{ font-weight:600; color:var(--jh-text); }
.jh-comments .wp-block-comment-author-name a{ color:var(--jh-text); }
.jh-comments .wp-block-comment-date{ font-size:.78rem; color:var(--jh-muted); }
.jh-comments .wp-block-comment-date a{ color:var(--jh-muted); }
.jh-comments .wp-block-comment-content{ margin:.6rem 0; color:var(--jh-text); line-height:1.7; }
.jh-comments .wp-block-comment-reply-link a{ font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--jh-primary); }
.jh-comments .wp-block-columns{ gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--jh-border); }
.jh-comments .wp-block-avatar img{ border-radius:50%; }

/* comment form */
.jh-commentform, .comment-respond{ margin-top:2.5rem; }
.comment-respond .comment-reply-title{ font-family:var(--jh-font-serif); font-size:var(--fs-h3); margin-bottom:1.25rem; }
.jh-commentform label, .comment-respond label{ display:block; font-size:.8rem; font-weight:600; margin:0 0 .4rem; color:var(--jh-text); }
.jh-commentform input[type=text], .jh-commentform input[type=email], .jh-commentform input[type=url],
.jh-commentform textarea, .comment-respond input[type=text], .comment-respond input[type=email],
.comment-respond input[type=url], .comment-respond textarea{
  width:100%; max-width:100%; padding:.8rem 1rem; border:1px solid var(--jh-border); border-radius:var(--jh-radius-sm);
  font-family:var(--jh-font-sans); font-size:1rem; margin-bottom:1.1rem; color:var(--jh-text); background:#fff; }
.jh-commentform input:focus, .comment-respond input:focus, .comment-respond textarea:focus{ outline:none; border-color:var(--jh-primary); }
.comment-form-captcha .req, .comment-respond .req{ color:#b23b3b; }
.comment-respond .form-submit input, .comment-respond .submit{
  display:inline-flex; cursor:pointer; background:var(--jh-primary); color:#fff; border:0;
  font-family:var(--jh-font-sans); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  padding:1rem 1.75rem; border-radius:var(--jh-radius); transition:background .25s; }
.comment-respond .form-submit input:hover, .comment-respond .submit:hover{ background:var(--jh-primary-dark); }
.comment-respond .comment-notes, .comment-respond .comment-form-cookies-consent{ font-size:.8rem; color:var(--jh-muted); }

/* ============================================================
   17. FOOTER
   ============================================================ */
.jh-footer{ background:var(--jh-primary); color:rgba(255,255,255,.82); font-size:var(--fs-sm); line-height:1.7; }
.jh-footer a{ color:rgba(255,255,255,.82); transition:color .2s; }
.jh-footer a:hover{ color:#fff; }
.jh-footer svg{ display:block; }
.jh-footer__top{ max-width:var(--jh-container); margin-inline:auto; padding:4rem var(--jh-gutter) 3rem;
  display:grid; grid-template-columns:1.6fr 1fr 1.4fr 1fr; gap:2.5rem; }
@media (max-width:900px){ .jh-footer__top{ grid-template-columns:1fr 1fr; gap:2.2rem; } }
@media (max-width:560px){ .jh-footer__top{ grid-template-columns:1fr; } }
.jh-footer__logo{ height:54px; width:auto; margin-bottom:1.1rem; filter:brightness(0) invert(1); }
.jh-footer__brand p{ margin:.4rem 0 0; max-width:34ch; }
.jh-footer h4{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:#fff; margin:0 0 1.1rem; }
.jh-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.jh-footer__contact li{ display:flex; align-items:flex-start; gap:.6rem; }
.jh-footer__contact svg{ width:15px; height:15px; margin-top:.2rem; flex:none; color:var(--jh-gold); }
.jh-footer__socials{ display:flex; gap:.65rem; }
.jh-footer__socials a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.28); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; }
.jh-footer__socials a:hover{ background:var(--jh-gold); border-color:var(--jh-gold); color:var(--jh-primary); }
.jh-footer__socials svg{ width:16px; height:16px; }
.jh-footer__bottom{ border-top:1px solid rgba(255,255,255,.15); }
.jh-footer__bottom-in{ max-width:var(--jh-container); margin-inline:auto; padding:1.2rem var(--jh-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:rgba(255,255,255,.6); }
.jh-footer__legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }