/* =========================================================
   Health by Hanna — Complete CSS Bundle
   ========================================================= */

@import url('https://fonts.bunny.net/css?family=inter:400,500,600|newsreader:400,400i,500,500i,600&display=swap');

/* === DESIGN TOKENS === */
:root {
  --hbh-bone:        #F4EFE8;
  --hbh-bone-deep:   #ECE5DA;
  --hbh-stone:       #C9C1B7;
  --hbh-stone-soft:  #DDD6CC;
  --hbh-moss:        #31463D;
  --hbh-moss-deep:   #1F2E27;
  --hbh-oxblood:     #6D3A3A;
  --hbh-ink:         #1F2430;
  --hbh-ink-soft:    #3A3F4A;
  --hbh-plum:        #7B687C;
  --hbh-clay:        #B8826A;
  --hbh-bg:          var(--hbh-bone);
  --hbh-fg:          var(--hbh-ink);
  --hbh-fg-muted:    #5A5F6B;
  --hbh-line:        rgba(31, 36, 48, 0.14);
  --hbh-line-strong: rgba(31, 36, 48, 0.32);
  --font-serif: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.35rem);
  --step-2:  clamp(1.42rem, 1.28rem + 0.70vw, 1.70rem);
  --step-3:  clamp(1.75rem, 1.50rem + 1.20vw, 2.25rem);
  --step-4:  clamp(2.20rem, 1.80rem + 2.00vw, 3.20rem);
  --step-5:  clamp(2.80rem, 2.10rem + 3.20vw, 4.60rem);
  --step-6:  clamp(3.40rem, 2.40rem + 4.50vw, 6.00rem);
  --maxw:         1240px;
  --maxw-narrow:  780px;
  --maxw-reading: 680px;
  --gutter:       clamp(1.25rem, 3vw, 2.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* === RESET + BASE === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hbh-bg);
  color: var(--hbh-fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--hbh-ink);
  margin: 0;
}
h1 { font-size: var(--step-6); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); line-height: 1.25; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
p { margin: 0 0 1.1em; }

/* === UTILITIES === */
.wrap        { width: 100%; max-width: var(--maxw);        margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-read   { width: 100%; max-width: var(--maxw-reading);margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hbh-fg-muted);
}
.rule { height: 1px; background: var(--hbh-line); border: 0; margin: 0; }
.serif { font-family: var(--font-serif); font-weight: 400; }
.italic { font-style: italic; }
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
:focus-visible { outline: 2px solid var(--hbh-moss); outline-offset: 3px; }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em;
  border-radius: 2px;
  transition: transform 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary  { background: var(--hbh-ink); color: var(--hbh-bone); }
.btn-primary:hover { background: var(--hbh-moss); }
.btn-moss     { background: var(--hbh-moss); color: var(--hbh-bone); }
.btn-moss:hover { background: var(--hbh-moss-deep); }
.btn-ghost    { border-color: var(--hbh-line-strong); color: var(--hbh-ink); }
.btn-ghost:hover { background: var(--hbh-ink); color: var(--hbh-bone); }
.btn-subscribe-cta {
  display: inline-block;
  padding: 1.15rem 2.4rem;
  background: var(--hbh-bone);
  color: var(--hbh-ink);
  font-family: var(--font-sans);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.02em;
  border-radius: 2px;
  transition: background 180ms var(--ease), transform 180ms var(--ease), color 180ms var(--ease);
}
.btn-subscribe-cta:hover { background: var(--hbh-clay); color: var(--hbh-bone); transform: translateY(-1px); }

.link-underline {
  border-bottom: 1px solid var(--hbh-line-strong);
  padding-bottom: 2px;
  transition: border-color 160ms var(--ease);
}
.link-underline:hover { border-color: var(--hbh-ink); }

/* === TAG === */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--hbh-line-strong);
  border-radius: 2px;
  color: var(--hbh-ink-soft);
}

/* === HEADER === */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--hbh-bone) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--hbh-line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding-block: 1.1rem;
}
.brand {
  font-family: var(--font-serif);
  font-size: 1.35rem; letter-spacing: -0.01em; font-weight: 400;
  color: var(--hbh-ink); white-space: nowrap;
}
.brand em { font-style: italic; color: var(--hbh-moss); font-weight: 400; }
.nav { display: flex; gap: 2rem; justify-content: center; font-size: 0.92rem; }
.nav a {
  position: relative; color: var(--hbh-ink-soft);
  padding-block: 0.5rem; transition: color 160ms var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--hbh-ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--hbh-ink);
}
.header-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; padding: 0.65rem 1rem;
  background: var(--hbh-ink); color: var(--hbh-bone);
  border-radius: 2px; letter-spacing: 0.02em;
  transition: background 160ms var(--ease);
}
.header-cta:hover { background: var(--hbh-moss); }
.header-cta .arrow { transition: transform 160ms var(--ease); }
.header-cta:hover .arrow { transform: translateX(2px); }
.nav-toggle { display: none; padding: 0.5rem; }
.nav-toggle svg { width: 22px; height: 22px; }

.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 1rem var(--gutter) 1.5rem;
  gap: 0.5rem;
  border-top: 1px solid var(--hbh-line);
  background: var(--hbh-bone);
}
.nav-mobile a {
  font-size: 1rem; color: var(--hbh-ink-soft);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hbh-line);
  transition: color 160ms var(--ease);
}
.nav-mobile a:hover, .nav-mobile a[aria-current="page"] { color: var(--hbh-ink); }
.nav-mobile--open { display: flex; }

@media (max-width: 880px) {
  .site-header__inner { grid-template-columns: auto 1fr auto auto; gap: 1rem; }
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header-cta { padding: 0.55rem 0.85rem; font-size: 0.82rem; }
}

/* === FOOTER === */
.site-footer {
  background: var(--hbh-moss-deep);
  color: color-mix(in oklab, var(--hbh-bone) 90%, transparent);
  padding: clamp(4rem, 7vw, 6rem) 0 2.5rem;
  margin-top: 4rem;
}
.site-footer h4 {
  color: var(--hbh-bone); font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 1.2rem; opacity: 0.6;
}
.site-footer a { color: inherit; opacity: 0.82; transition: opacity 160ms var(--ease); }
.site-footer a:hover { opacity: 1; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 3rem; align-items: start;
}
.footer-brand .brand-lg {
  font-family: var(--font-serif); font-size: 1.8rem;
  color: var(--hbh-bone); line-height: 1.1; margin-bottom: 1rem;
}
.footer-brand p { opacity: 0.7; font-size: 0.95rem; max-width: 28ch; margin-bottom: 1rem; }
.footer-brand .tagline { font-family: var(--font-serif); font-style: italic; opacity: 0.85; font-size: 1.02rem; }
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.95rem; }
.footer-bottom {
  margin-top: 4rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(244,239,232,0.1);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.82rem; opacity: 0.6; gap: 1rem; flex-wrap: wrap;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* === STICKY SUBSCRIBE === */
.sticky-sub {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 40;
  background: var(--hbh-ink); color: var(--hbh-bone);
  padding: 0.85rem 1.15rem; border-radius: 2px;
  font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.6rem;
  box-shadow: 0 10px 30px rgba(31, 36, 48, 0.18);
  transition: transform 220ms var(--ease), background 160ms var(--ease);
}
.sticky-sub:hover { background: var(--hbh-moss); transform: translateY(-2px); }
.sticky-sub .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hbh-clay); }

/* === NEWSLETTER FORM === */
.nl-form {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; max-width: 520px;
}
.nl-form input[type="email"] {
  font: inherit; padding: 1rem 1.1rem;
  border: 1px solid var(--hbh-line-strong);
  background: transparent; color: inherit; border-radius: 2px; min-width: 0;
}
.nl-form input[type="email"]::placeholder { color: var(--hbh-fg-muted); }
.nl-form input[type="email"]:focus { outline: none; border-color: var(--hbh-ink); background: rgba(255,255,255,0.4); }
.nl-form button {
  padding: 1rem 1.4rem; background: var(--hbh-ink); color: var(--hbh-bone);
  border-radius: 2px; font-size: 0.92rem; font-weight: 500;
  transition: background 160ms var(--ease);
}
.nl-form button:hover { background: var(--hbh-moss); }
.nl-note { font-size: 0.82rem; color: var(--hbh-fg-muted); margin-top: 0.6rem; }
.nl-form--dark input[type="email"] { border-color: rgba(244,239,232,0.3); color: var(--hbh-bone); }
.nl-form--dark input[type="email"]::placeholder { color: rgba(244,239,232,0.55); }
.nl-form--dark input[type="email"]:focus { border-color: var(--hbh-bone); background: rgba(244,239,232,0.08); }
.nl-form--dark button { background: var(--hbh-bone); color: var(--hbh-ink); }
.nl-form--dark button:hover { background: white; }

/* === CARD ARTICLE === */
.card-article { display: flex; flex-direction: column; gap: 1rem; }
.card-article .card-img { aspect-ratio: 4/3; background: var(--hbh-bone-deep); border-radius: 2px; overflow: hidden; background-size: cover; background-position: center; }
.card-article .eyebrow { color: var(--hbh-moss); }
.card-article h3 {
  font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2;
  letter-spacing: -0.01em; text-transform: none; color: var(--hbh-ink); font-weight: 400;
}
.card-article p { font-size: 0.97rem; color: var(--hbh-ink-soft); margin: 0; }
.card-article .meta { font-size: 0.82rem; color: var(--hbh-fg-muted); font-family: var(--font-sans); letter-spacing: 0.04em; }
.card-article a { display: flex; flex-direction: column; gap: 0.6rem; }
.card-article a:hover h3 { color: var(--hbh-moss); }

/* === PILLAR === */
.pillar {
  padding: 2rem; border: 1px solid var(--hbh-line); border-radius: 2px;
  background: var(--hbh-bone);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
  display: flex; flex-direction: column; gap: 1rem; min-height: 280px;
}
.pillar:hover { background: var(--hbh-bone-deep); border-color: var(--hbh-line-strong); transform: translateY(-2px); }
.pillar .pillar-num { font-family: var(--font-serif); font-size: 0.9rem; font-style: italic; color: var(--hbh-moss); margin-bottom: -0.5rem; }
.pillar h3 { font-family: var(--font-serif); font-size: 1.85rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; text-transform: none; margin: 0; }
.pillar p { color: var(--hbh-ink-soft); font-size: 0.98rem; line-height: 1.55; margin: 0; flex: 1; }
.pillar .pillar-more { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hbh-ink); }
.pillar--moss    { background: var(--hbh-moss); color: var(--hbh-bone); border-color: transparent; }
.pillar--moss h3, .pillar--moss .pillar-num, .pillar--moss .pillar-more { color: var(--hbh-bone); }
.pillar--moss p  { color: rgba(244,239,232,0.8); }
.pillar--moss:hover { background: var(--hbh-moss-deep); }
.pillar--oxblood { background: var(--hbh-oxblood); color: var(--hbh-bone); border-color: transparent; }
.pillar--oxblood h3, .pillar--oxblood .pillar-num, .pillar--oxblood .pillar-more { color: var(--hbh-bone); }
.pillar--oxblood p  { color: rgba(244,239,232,0.8); }
.pillar--oxblood:hover { background: #5A2E2E; }
.pillar--plum    { background: var(--hbh-plum); color: var(--hbh-bone); border-color: transparent; }
.pillar--plum h3, .pillar--plum .pillar-num, .pillar--plum .pillar-more { color: var(--hbh-bone); }
.pillar--plum p  { color: rgba(244,239,232,0.8); }

/* === COMING SECTION === */
.coming-section { padding: clamp(4rem, 6vw, 5rem) 0; background: var(--hbh-bone-deep); border-top: 1px solid var(--hbh-line); }
.coming-list { list-style: none; margin: 0; padding: 0; }
.coming-item { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: 1.75rem 0; border-top: 1px solid var(--hbh-line); align-items: start; }
.coming-item:last-child { border-bottom: 1px solid var(--hbh-line); }
.coming-num { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; color: var(--hbh-fg-muted); line-height: 1; }
.coming-body h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; color: var(--hbh-ink-soft); margin: 0 0 0.5rem; }
.coming-body p { font-size: 0.97rem; color: var(--hbh-fg-muted); line-height: 1.5; margin: 0 0 0.7rem; max-width: 56ch; }
.coming-meta { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hbh-fg-muted); display: inline-flex; align-items: center; gap: 0.5rem; }
.coming-meta .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.coming-meta .dot--soon { background: var(--hbh-moss); }
.coming-meta .dot--research { background: var(--hbh-clay); }
.coming-meta .dot--planned { background: var(--hbh-stone); }
@media (max-width: 640px) { .coming-item { grid-template-columns: 50px 1fr; gap: 1rem; } .coming-num { font-size: 1.1rem; } }

/* === FEATURED ESSAY === */
.featured-essay { border: 1px solid var(--hbh-line); background: var(--hbh-bone); transition: border-color 200ms var(--ease), transform 200ms var(--ease); }
.featured-essay:hover { border-color: var(--hbh-line-strong); transform: translateY(-2px); }
.featured-essay__link { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; text-decoration: none; color: inherit; }
.featured-essay__img { aspect-ratio: 4/3; min-height: 360px; background-size: cover; background-position: center; }
.featured-essay__body { padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.featured-essay__body .eyebrow { display: block; margin-bottom: 1.2rem; color: var(--hbh-moss); }
.featured-essay__body h3 { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.018em; text-transform: none; color: var(--hbh-ink); margin: 0 0 1rem; }
.featured-essay__body p { font-size: 1.05rem; color: var(--hbh-ink-soft); line-height: 1.55; margin: 0 0 1.5rem; }
.featured-essay__cta { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hbh-ink); border-bottom: 1px solid var(--hbh-line-strong); padding-bottom: 4px; align-self: flex-start; transition: border-color 160ms var(--ease); }
.featured-essay:hover .featured-essay__cta { border-bottom-color: var(--hbh-ink); }
@media (max-width: 880px) { .featured-essay__link { grid-template-columns: 1fr; } .featured-essay__img { min-height: 240px; } }

/* === HUB HERO === */
.hub-hero {
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
  background-size: cover; background-position: center;
  color: var(--hbh-bone);
}
.hub-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hub-hero h1 { color: var(--hbh-bone); font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 0.95; margin-bottom: 1rem; }
.hub-hero .sub { font-size: 1.1rem; line-height: 1.5; opacity: 0.85; margin: 0; }
.hub-hero .intro { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.65; opacity: 0.88; margin: 0; }
.breadcrumb { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.04em; opacity: 0.7; margin-bottom: 1.5rem; }
.breadcrumb a { color: inherit; border-bottom: 1px solid rgba(244,239,232,0.4); }
@media (max-width: 880px) { .hub-hero__grid { grid-template-columns: 1fr; } }

/* === HUB TOPICS === */
.hub-topics { padding: clamp(2.5rem, 4vw, 3.5rem) 0; border-bottom: 1px solid var(--hbh-line); }
.hub-topics h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-bottom: 1.5rem; }
.topic-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.topic-tag {
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem; border: 1px solid var(--hbh-line-strong); border-radius: 2px;
  color: var(--hbh-ink-soft); transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.topic-tag:hover { background: var(--hbh-ink); color: var(--hbh-bone); border-color: var(--hbh-ink); }

/* === HOMEPAGE === */
.hero { padding: clamp(3rem, 7vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__text .eyebrow { margin-bottom: 1.5rem; display: block; }
.hero__headline { font-size: clamp(2.8rem, 1.8rem + 4.2vw, 5.8rem); line-height: 0.98; letter-spacing: -0.028em; margin-bottom: 1.6rem; }
.hero__headline em { font-style: italic; font-weight: 300; color: var(--hbh-moss); }
.hero__sub { font-size: 1.15rem; color: var(--hbh-ink-soft); max-width: 52ch; margin-bottom: 2rem; line-height: 1.55; }
.hero__cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero__figure { display: flex; flex-direction: column; gap: 1.2rem; }
.hero__img { aspect-ratio: 4/5; min-height: 420px; background: linear-gradient(160deg, #31463D 0%, #4A6457 60%, #5F7B6C 100%); background-size: cover; background-position: center top; border-radius: 2px; }
.hero__caption { display: flex; align-items: flex-start; gap: 1rem; }
.hero__caption p { font-size: 0.98rem; color: var(--hbh-ink-soft); margin: 0; line-height: 1.5; }
.hero__proof { margin-top: 1.8rem; display: flex; align-items: center; gap: 0.9rem; font-size: 0.92rem; color: var(--hbh-ink-soft); }
.hero__proof p { margin: 0; }
.hero__proof strong { color: var(--hbh-ink); font-weight: 600; }
.avatars { display: flex; }
.ava { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--hbh-bone); margin-left: -10px; background: var(--hbh-stone); }
.ava:first-child { margin-left: 0; }
.ava-1 { background: linear-gradient(135deg, #31463D, #5F7B6C); }
.ava-2 { background: linear-gradient(135deg, #6D3A3A, #B8826A); }
.ava-3 { background: linear-gradient(135deg, #7B687C, #9A879B); }
.ava-4 { background: linear-gradient(135deg, #C9C1B7, #DDD6CC); }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } .hero__img { min-height: 360px; } }

.pain-strip { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--hbh-bone-deep); border-top: 1px solid var(--hbh-line); border-bottom: 1px solid var(--hbh-line); }
.pain-strip__head { max-width: 680px; margin-bottom: 3rem; }
.pain-strip__head .eyebrow { display: block; margin-bottom: 1rem; }
.pain-strip__head h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.pain-strip__head h2 em { font-style: italic; color: var(--hbh-oxblood); font-weight: 300; }
.pain-grid { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 880px) { .pain-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-grid li { padding: 1.5rem 0; border-top: 1px solid var(--hbh-line-strong); display: flex; flex-direction: column; gap: 0.8rem; }
.pain-num { font-family: var(--font-serif); font-style: italic; color: var(--hbh-oxblood); font-size: 1rem; }
.pain-grid p { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.4; color: var(--hbh-ink); margin: 0; }
.pain-strip__close { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); color: var(--hbh-ink-soft); max-width: 48ch; margin: 0; }

.pillars-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.pillars-head .eyebrow { display: block; margin-bottom: 1rem; }
.pillars-head h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 4rem); line-height: 1.02; letter-spacing: -0.022em; }
.pillars-intro { font-size: 1.1rem; color: var(--hbh-ink-soft); max-width: 46ch; margin: 0; line-height: 1.55; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .pillars-head { grid-template-columns: 1fr; gap: 1.5rem; } .pillars-grid { grid-template-columns: 1fr; } }

.dual { border-top: 1px solid var(--hbh-line); border-bottom: 1px solid var(--hbh-line); }
.dual__grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(2rem, 5vw, 5rem); }
.dual__divider { background: var(--hbh-line); }
.dual__title { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); margin: 1rem 0 1.2rem; line-height: 1.08; }
.dual__title em { font-style: italic; color: var(--hbh-oxblood); font-weight: 300; }
.dual__col p { font-size: 1.05rem; color: var(--hbh-ink-soft); max-width: 42ch; line-height: 1.6; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .dual__grid { grid-template-columns: 1fr; } .dual__divider { height: 1px; width: 100%; } }

.latest__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--hbh-line); padding-bottom: 1.5rem; }
.latest__head .eyebrow { display: block; margin-bottom: 0.6rem; }
.latest__head h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); }
.latest__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 900px) { .latest__grid { grid-template-columns: 1fr; } }

.meet { background: var(--hbh-bone-deep); }
.meet__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 880px) { .meet__grid { grid-template-columns: 1fr; } }
.meet__text .eyebrow { display: block; margin-bottom: 1rem; }
.meet__text h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); margin-bottom: 1.4rem; letter-spacing: -0.02em; }
.meet__text p { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.6; color: var(--hbh-ink); max-width: 56ch; margin-bottom: 1.2em; }
.meet__text em { color: var(--hbh-moss); font-style: italic; }
.meet__img div { border-radius: 2px; background-size: cover; background-position: center top; }

.cta-big { background: var(--hbh-ink); color: var(--hbh-bone); text-align: center; padding: clamp(5rem, 9vw, 9rem) 0; }
.cta-big__inner { max-width: 720px; margin-inline: auto; padding-inline: var(--gutter); }
.cta-big__label { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1.5rem; }
.cta-big__title { color: var(--hbh-bone); font-size: clamp(2.2rem, 1.5rem + 2.8vw, 4rem); line-height: 1.02; margin-bottom: 1.5rem; letter-spacing: -0.022em; }
.cta-big__title em { color: var(--hbh-clay); font-style: italic; font-weight: 300; }
.cta-big__sub { opacity: 0.8; font-size: 1.1rem; max-width: 52ch; margin: 0 auto 2.5rem; line-height: 1.55; }

/* === START HERE PAGE === */
.page-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--hbh-line); }
.page-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.6rem); line-height: 1.02; margin-bottom: 1.2rem; max-width: 18ch; }
.page-hero h1 em { color: var(--hbh-moss); }
.page-hero .lede { font-size: 1.2rem; color: var(--hbh-ink-soft); max-width: 54ch; }
.three-doors { padding: clamp(4rem, 7vw, 6rem) 0; }
.door-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .door-grid { grid-template-columns: 1fr; } }
.door { display: flex; flex-direction: column; padding: 2.5rem 2rem; background: var(--hbh-bone-deep); border: 1px solid var(--hbh-line); text-decoration: none; color: inherit; min-height: 360px; transition: background 200ms var(--ease); }
.door:hover { background: var(--hbh-bone); }
.door__num { font-family: var(--font-serif); font-style: italic; color: var(--hbh-moss); font-size: 1rem; margin-bottom: 2rem; }
.door__title { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.15; margin-bottom: 1rem; }
.door__desc { font-size: 0.98rem; color: var(--hbh-ink-soft); flex: 1; line-height: 1.55; }
.door__link { margin-top: 1.5rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--hbh-line-strong); padding-bottom: 3px; align-self: flex-start; }
.read-list { display: flex; flex-direction: column; }
.read-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--hbh-line); align-items: center; text-decoration: none; color: inherit; transition: background 160ms var(--ease); }
.read-item:hover { background: var(--hbh-bone-deep); }
.read-item__num { font-family: var(--font-serif); font-style: italic; color: var(--hbh-moss); font-size: 1.3rem; }
.read-item__title { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2; margin: 0 0 0.25rem; }
.read-item__meta { font-size: 0.85rem; color: var(--hbh-fg-muted); letter-spacing: 0.04em; }
.read-item__arrow { font-size: 1.4rem; color: var(--hbh-moss); }

/* === ABOUT PAGE === */
.about-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem); }
.about-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 880px) { .about-hero__grid { grid-template-columns: 1fr; } }
.about-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: 1.02; margin-bottom: 1.2rem; }
.about-hero h1 em { color: var(--hbh-moss); }
.about-hero .sub { font-size: 1.18rem; color: var(--hbh-ink-soft); line-height: 1.55; }
.about-portrait { aspect-ratio: 4/5; min-height: 420px; background-size: cover; background-position: center top; border-radius: 2px; background: linear-gradient(160deg, #31463D, #4A6457); }
.belief-strip { background: var(--hbh-ink); color: var(--hbh-bone); padding: clamp(3rem, 6vw, 5rem) 0; text-align: center; }
.belief-strip blockquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.25; max-width: 24ch; margin: 0 auto; border: 0; color: var(--hbh-bone); }
.belief-strip .cite { display: block; margin-top: 1.5rem; font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; }
.about-body { padding: clamp(4rem, 6vw, 5rem) 0; }
.about-body h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); margin-bottom: 1rem; }
.about-body p { font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.65; margin-bottom: 1.4em; }
.about-body .section-block { margin-bottom: 3.5rem; }
.beliefs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; }
@media (max-width: 720px) { .beliefs-grid { grid-template-columns: 1fr; } }
.belief-card { padding: 1.75rem; background: var(--hbh-bone-deep); border-left: 3px solid var(--hbh-moss); }
.belief-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; text-transform: none; margin-bottom: 0.5rem; }
.belief-card p { font-family: var(--font-sans); font-size: 0.98rem; color: var(--hbh-ink-soft); margin: 0; line-height: 1.55; }
.belief-card--oxblood { border-left-color: var(--hbh-oxblood); }
.belief-card--plum { border-left-color: var(--hbh-plum); }
.belief-card--ink { border-left-color: var(--hbh-ink); }

/* === NEWSLETTER PAGE === */
.nl-hero { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); background: var(--hbh-ink); color: var(--hbh-bone); text-align: center; position: relative; overflow: hidden; }
.nl-hero::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(109,58,58,0.25), transparent 60%); pointer-events: none; }
.nl-hero .eyebrow { color: rgba(244,239,232,0.55); margin-bottom: 1.5rem; display: block; position: relative; }
.nl-hero h1 { color: var(--hbh-bone); font-size: clamp(2.6rem, 1.7rem + 3.6vw, 5.2rem); line-height: 0.98; margin-bottom: 1.6rem; position: relative; }
.nl-hero h1 em { color: var(--hbh-clay); }
.nl-hero .sub { font-size: 1.18rem; line-height: 1.55; opacity: 0.82; max-width: 52ch; margin: 0 auto 2.5rem; position: relative; }
.brevo-frame { background: var(--hbh-bone); padding: 0; max-width: 540px; margin: 0 auto; box-shadow: 0 20px 50px rgba(31, 36, 48, 0.18); position: relative; }
.brevo-frame iframe { width: 100%; display: block; }
.nl-what { padding: clamp(4rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--hbh-line); }
.nl-what__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .nl-what__grid { grid-template-columns: 1fr; } }
.expect-list { list-style: none; padding: 0; margin: 0; }
.expect-list li { padding: 1.5rem 0; border-bottom: 1px solid var(--hbh-line); display: grid; grid-template-columns: 48px 1fr; gap: 1.5rem; align-items: start; }
.expect-list li:first-child { border-top: 1px solid var(--hbh-line); }
.expect-list .num { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--hbh-moss); }
.expect-list h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; margin: 0 0 0.35rem; text-transform: none; }
.expect-list p { font-size: 0.98rem; color: var(--hbh-ink-soft); margin: 0; line-height: 1.5; }
.preview { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--hbh-bone-deep); }
.letter-mock { max-width: 620px; margin: 0 auto; background: var(--hbh-bone); border: 1px solid var(--hbh-line); padding: 3rem 2.5rem; box-shadow: 0 30px 60px rgba(31, 36, 48, 0.08); }
.letter-mock .letter-meta { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hbh-fg-muted); border-bottom: 1px solid var(--hbh-line); padding-bottom: 1rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; }
.letter-mock h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); text-transform: none; line-height: 1.15; margin-bottom: 1.2rem; }
.letter-mock p { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.6; margin-bottom: 1.1em; }
.letter-mock .sig { font-style: italic; color: var(--hbh-moss); margin-top: 1.5rem; }
.testimonials { padding: clamp(4rem, 7vw, 5rem) 0; border-bottom: 1px solid var(--hbh-line); }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr; } }
.quote { padding: 2rem; background: var(--hbh-bone); border: 1px solid var(--hbh-line); }
.quote blockquote { font-family: var(--font-serif); font-size: 1.1rem; font-style: italic; line-height: 1.5; border: 0; padding: 0; margin: 0 0 1.5rem; }
.quote .attr { font-size: 0.82rem; color: var(--hbh-fg-muted); }
.quote .attr strong { color: var(--hbh-ink); font-weight: 500; }
.faq { padding: clamp(4rem, 7vw, 5rem) 0; }
.faq h2 { font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); margin-bottom: 2rem; }
.faq details { border-top: 1px solid var(--hbh-line); padding: 1.5rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--hbh-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-serif); font-size: 1.25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-sans); font-size: 1.5rem; color: var(--hbh-moss); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 1rem 0 0; color: var(--hbh-ink-soft); font-size: 1rem; line-height: 1.6; max-width: 62ch; }

/* === CONTACT PAGE === */
.contact-hero { padding: clamp(4rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--hbh-line); }
.contact-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); margin-bottom: 1rem; }
.contact-hero h1 em { color: var(--hbh-moss); }
.contact-hero p { font-size: 1.15rem; color: var(--hbh-ink-soft); max-width: 52ch; }
.contact-grid { padding: clamp(3rem, 5vw, 4rem) 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.info h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.4rem; text-transform: none; margin-bottom: 0.3rem; }
.info p { color: var(--hbh-ink-soft); line-height: 1.55; margin-bottom: 2rem; }
.info a { color: var(--hbh-ink); border-bottom: 1px solid var(--hbh-line-strong); }
.form-wrap { background: var(--hbh-bone-deep); padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--hbh-line); }
.field { display: flex; flex-direction: column; margin-bottom: 1.4rem; }
.field label { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hbh-ink-soft); margin-bottom: 0.5rem; }
.field input, .field select, .field textarea { font: inherit; padding: 0.85rem 1rem; background: var(--hbh-bone); border: 1px solid var(--hbh-line-strong); color: var(--hbh-ink); border-radius: 2px; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--hbh-moss); outline-offset: 2px; }

/* === REVEAL ANIMATION === */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}