/* ===================================================================
   Holistic Harmony Wellness — Design System (static production build)
   Palette: Navy / Soft Gold / Champagne / Cream
   Type: Playfair Display (serif headings) + Inter (sans body)
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#1f2a44;
  --navy-soft:#374868;
  --gold:#d8b876;
  --gold-deep:#85631f;
  --champagne:#f3e9d7;
  --cream:#fbf7f0;

  --background:#fdfbf8;
  --foreground:#23283a;
  --card:#ffffff;
  --muted:#f5f1ea;
  --muted-foreground:#5d6170;
  --border:#e7e0d3;
  --ring:#b8893f;

  --radius-sm:.4rem;
  --radius-md:.65rem;
  --radius-lg:1rem;
  --radius-xl:1.5rem;
  --radius-2xl:2rem;

  --font-serif:'Playfair Display', Georgia, serif;
  --font-sans:'Inter', system-ui, sans-serif;

  --shadow-md:0 8px 28px -8px rgba(31,42,68,.16);
  --shadow-lg:0 20px 48px -16px rgba(31,42,68,.22);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%;display:block;}
svg{width:20px;height:20px;flex-shrink:0;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{
  font-family:var(--font-serif);
  letter-spacing:-0.01em;
  color:var(--navy);
  margin:0;
  font-weight:600;
}
p{margin:0;}

/* Accessibility: visible focus state everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--navy);color:var(--cream);
  padding:.75rem 1.25rem;border-radius:0 0 .5rem 0;z-index:200;
  font-size:.85rem;font-weight:600;
}
.skip-link:focus{left:0;top:0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Layout helpers ---------- */
.container{width:100%;margin-inline:auto;padding-inline:1.25rem;max-width:80rem;}
.section{padding-block:3.5rem;}
.section-lg{padding-block:4.5rem;}
@media (min-width:1024px){
  .section{padding-block:4.5rem;}
  .section-lg{padding-block:6rem;}
}
.bg-cream{background:var(--cream);}
.bg-champagne{background:var(--champagne);}
.bg-navy{background:var(--navy);color:var(--cream);}
.bg-navy h2,.bg-navy h3{color:var(--cream);}

.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.65rem;
}
.gold-rule{width:2.25rem;height:1px;background:var(--gold-deep);display:inline-block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;padding:.85rem 1.6rem;font-size:.9rem;font-weight:600;
  border:1px solid transparent;transition:transform .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--navy);color:var(--cream);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-outline-light{border-color:rgba(251,247,240,.4);color:var(--cream);background:transparent;}
.btn svg{width:16px;height:16px;flex:none;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,251,248,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding-block:.85rem;}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-serif);font-weight:700;font-size:1.15rem;color:var(--navy);}
.brand img{height:38px;width:auto;}
.nav-links{display:none;align-items:center;gap:2rem;}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--foreground);position:relative;padding-block:.25rem;}
.nav-links a.active{color:var(--navy);font-weight:600;}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold-deep);border-radius:2px;}
.nav-cta{display:none;}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:.5rem;border:1px solid var(--border);background:var(--card);
}
.nav-toggle svg{width:20px;height:20px;}
@media (min-width:900px){
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
  .nav-toggle{display:none;}
}
.mobile-menu{
  display:none;flex-direction:column;gap:.25rem;padding:0 0 1.25rem;border-top:1px solid var(--border);margin-top:.5rem;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:.85rem .25rem;font-size:.95rem;font-weight:500;border-bottom:1px solid var(--border);}
.mobile-menu .btn{margin-top:.75rem;align-self:flex-start;}
@media (min-width:900px){.mobile-menu{display:none !important;}}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:rgba(251,247,240,.85);position:relative;overflow:hidden;}
.site-footer::before{
  content:"";position:absolute;top:50%;right:-4rem;transform:translateY(-50%);
  width:380px;height:380px;background:url('../img/hhw-logo-mark.png') no-repeat center/contain;
  opacity:.05;pointer-events:none;z-index:0;
}
.footer-grid,.footer-bottom{position:relative;z-index:1;}
.footer-grid{display:grid;gap:2.5rem;padding-block:3.5rem 2.5rem;grid-template-columns:1fr;}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-serif);font-size:1.1rem;font-weight:700;color:var(--cream);}
.footer-brand img{height:42px;width:auto;}
.footer-col h4{color:var(--gold);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-sans);font-weight:600;margin-bottom:.9rem;}
.footer-col ul{display:flex;flex-direction:column;gap:.6rem;}
.footer-col a{font-size:.85rem;color:rgba(251,247,240,.78);}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid rgba(251,247,240,.14);padding-block:1.5rem;display:flex;flex-direction:column;gap:.75rem;font-size:.78rem;color:rgba(251,247,240,.6);}
@media (min-width:768px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;}}
.footer-bottom a{color:rgba(251,247,240,.6);}
.footer-bottom a:hover{color:var(--gold);}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:1rem;}
.mb-disclosure{font-size:.72rem;color:rgba(251,247,240,.5);max-width:60ch;}

/* ---------- Grid / Card utilities ---------- */
.grid{display:grid;gap:1.25rem;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media (min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr 1fr;}
  .grid-4{grid-template-columns:repeat(4,1fr);}
}
/* Dedicated layout for groups of exactly 3 items (hero stats, program highlight cards).
   Skips the 2-column tablet breakpoint used by .grid-3, which leaves an orphaned
   third item in its own row with mismatched spacing. Goes straight from 1 to 3 columns. */
.grid-trio{grid-template-columns:1fr;}
@media (min-width:700px){
  .grid-trio{grid-template-columns:1fr 1fr 1fr;}
}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);}
.card-pad{padding:1.75rem;}
@media (min-width:1024px){.card-pad{padding:2.25rem;}}

.check-item{display:flex;align-items:flex-start;gap:.65rem;}
.check-item svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--gold-deep);}

.pill{border-radius:999px;background:var(--background);border:1px solid var(--border);padding:.5rem 1rem;font-size:.72rem;color:rgba(35,40,58,.85);}

/* ---------- Hero shapes ---------- */
.media-frame{position:relative;}
.media-frame::before{
  content:"";position:absolute;inset:-1rem;z-index:-1;border-radius:2.25rem;background:var(--champagne);
}
.media-frame img{border-radius:1.75rem;box-shadow:var(--shadow-lg);object-fit:cover;width:100%;height:auto;}

.botanical-panel{
  position:relative;border-radius:var(--radius-2xl);overflow:hidden;min-height:320px;
  background:
    radial-gradient(circle at 18% 20%, rgba(216,184,118,.35), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(184,137,63,.28), transparent 50%),
    linear-gradient(155deg, var(--champagne) 0%, var(--cream) 60%, #fff 100%);
  display:flex;align-items:flex-end;
}
.botanical-caption{
  position:relative;margin:1.5rem;padding:1.1rem 1.3rem;background:rgba(255,255,255,.78);
  backdrop-filter:blur(6px);border-radius:var(--radius-lg);max-width:18rem;
  box-shadow:var(--shadow-md);
}

/* ---------- Forms ---------- */
.field label{font-size:.875rem;font-weight:500;color:rgba(35,40,58,.85);}
.field input,.field textarea{
  margin-top:.5rem;width:100%;border-radius:.75rem;border:1px solid var(--border);
  background:var(--background);padding:.8rem 1rem;font-size:.9rem;font-family:inherit;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgba(184,137,63,.18);}

/* ---------- Misc text ---------- */
.text-muted{color:var(--muted-foreground);}
.lede{font-size:1.05rem;color:var(--muted-foreground);line-height:1.7;}
@media (min-width:1024px){.lede{font-size:1.15rem;}}
.max-prose{max-width:42rem;}

.stat dt{font-family:var(--font-serif);font-size:1.5rem;color:var(--navy);}
.stat dd{font-size:.72rem;color:var(--muted-foreground);margin-top:.25rem;line-height:1.4;}

.quote-mark{width:24px;height:24px;color:var(--gold-deep);}
.testimonial-card{background:var(--champagne);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;}
.testimonial-card blockquote{font-family:var(--font-serif);font-size:1.1rem;color:var(--navy);line-height:1.45;margin-top:1rem;}
.testimonial-card figcaption{margin-top:1.4rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);}

/* CTA banner */
.cta-banner{border-radius:var(--radius-2xl);background:var(--navy);color:var(--cream);overflow:hidden;}
.cta-banner .eyebrow{color:var(--gold);}

/* Legal pages */
.legal-content h2{font-size:1.4rem;margin-top:2.25rem;margin-bottom:.75rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p,.legal-content li{color:var(--muted-foreground);line-height:1.75;margin-bottom:.9rem;}
.legal-content ul{list-style:disc;padding-left:1.4rem;}
.legal-content ul li{margin-bottom:.5rem;}
.legal-content strong{color:var(--foreground);}
.legal-updated{font-size:.8rem;color:var(--muted-foreground);}

/* 404-safe utility */
.center-text{text-align:center;}
.flex-wrap-gap{display:flex;flex-wrap:wrap;gap:.75rem;}