/* ==========================================================================
   Restorative Roots Counseling — "Snyder-Inspired" design system
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette tokens — APPLIED PALETTE: Forest Floor (lifted)
   Trauma-informed: muted moss and oat, softened off-white ground, warm ink.
   The deep greens are deliberately held at mid-value — the darkest green in
   the range is the hero's own gradient corner at #55604C, and nothing on the
   page goes below it. Do not darken --color-deep, --hero-from, or
   --color-primary-dark to chase a bigger contrast number; the whole point of
   this palette is that the dark fields stay open rather than enveloping. They
   clear AA as they stand, against these three pairs:
     white on --color-deep .............. 4.5:1  (hero + footer text)
     white on --color-primary-dark ...... 4.5:1  (solid button labels)
     --color-ink-soft on --color-tertiary  4.5:1  (body copy in tinted bands)
   Changing a token means re-checking those three.

   No rule below this block should ever name a literal color — if you find
   yourself typing a hex further down, add a token here instead, or that color
   will be stranded the next time these values change.
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #ADB89D;      /* light moss — hairlines, borders, offset blocks.
                                    Decorative only: too light to carry text, so text
                                    roles use --color-primary-dark instead. */
  --color-primary-dark: #5C6650; /* solid fills; primary is too light under white text */
  --color-mist: #D5DBC8;         /* pale moss, icon circles */
  --color-secondary: #E4DCC9;    /* oat, accents + footer hover */
  --color-tertiary: #F0EEE4;     /* tinted band background */
  --color-sand: #E2DAC7;         /* hairlines: form fields, accordion dividers */
  --color-accent: #D8CDA6;       /* soft wheat, used on the dark hero only */
  --color-deep: #5F6A57;         /* mid-value moss, hero + footer */
  --color-ink: #3D4239;          /* warm charcoal-green, not a black */
  --color-ink-soft: #626759;
  --color-white: #FBFAF6;        /* softened ground — never pure white, that glares */

  --hero-from: #55604C;          /* hero gradient, dark corner — the floor of the palette */
  --hero-to: #808B72;            /* hero gradient, light corner */
  --hero-line: #DFE4D6;          /* illustrated roots stroke */
  --shadow-photo: rgba(95,106,87,0.15);

  --font-serif: "EB Garamond", Georgia, serif;
  --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;

  --container-w: 1180px;
  --radius: 4px;
  --transition: 0.25s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, blockquote, cite {
  font-family: var(--font-serif);
  font-weight: 500;
  margin: 0 0 0.5em;
  color: var(--color-ink);
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.2; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: 0.03em; text-transform: uppercase; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; color: var(--color-ink-soft); }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-primary-dark); color: #fff; padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Pill buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all var(--transition);
  border: 1.5px solid transparent;
}
.btn-outline-dark { border-color: var(--color-deep); color: var(--color-deep); background: transparent; }
.btn-outline-dark:hover { background: var(--color-deep); color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,0.85); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,0.15); }
.btn-solid { background: var(--color-primary-dark); color: #fff; border-color: var(--color-primary-dark); }
.btn-solid:hover { background: var(--color-deep); border-color: var(--color-deep); }
.btn-small { padding: 10px 22px; font-size: 0.7rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Tracks the palette's ground, not a literal white, or a softened ground
     would show a bright band under the sticky header. Solid first as fallback. */
  background: var(--color-white);
  background: color-mix(in srgb, var(--color-white) 96%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header-inner {
  max-width: var(--container-w); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 70px; width: auto; }
.main-nav ul { display: flex; gap: 34px; }
.main-nav a {
  font-family: var(--font-sans);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.main-nav a:hover, .main-nav a.active { color: var(--color-deep); border-color: var(--color-primary); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 24px; }
.nav-toggle span { display: block; height: 2px; background: var(--color-deep); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero — forest photo with a translucent panel drawn over it
   ==========================================================================
   The photo is clean, so it can crop freely on narrow screens. The panel is
   .hero-content itself: centred, 74.2% of the hero wide and at least 47.9%
   tall, matching the proportions it had when it was baked into the image. The
   hero holds the photo's 1366:768 ratio on wide screens and type is sized in
   vw so the copy scales with the panel. */
.hero {
  position: relative;
  overflow: hidden;
  /* AVIF first (98KB), MozJPEG for anything that can't take it (154KB). WebP is
     skipped: on this dense foliage it came out larger than the JPEG. The plain
     url() line above image-set() is the fallback for browsers that don't
     understand image-set. */
  background-color: var(--color-deep);
  background-image: url("../images/hero.jpg");
  background-image: image-set(url("../images/hero.avif") type("image/avif"),
                              url("../images/hero.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* The explicit width matters: with width left auto, aspect-ratio turns
     max-height into a max-width (760 × 1366/768 = 1352px), and past that the
     hero stops short and sits against the left edge. */
  width: 100%;
  aspect-ratio: 1366 / 768;
  min-height: 460px;
  max-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 74.2%;
  max-width: 1014px;
  min-height: 47.9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.6vw, 40px) clamp(20px, 3vw, 44px);
  /* Pale blue-white at 79% — sampled from the panel that used to be baked in. */
  background: rgba(230,240,245,0.79);
  backdrop-filter: blur(2px);
  border-radius: clamp(12px, 1vw, 18px);
}
/* The tagline sits above as the quiet line; the practice line below carries the
   display weight. */
.hero h1 {
  color: var(--color-deep);
  font-size: clamp(0.9rem, 1.5vw, 1.35rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin-bottom: clamp(8px, 1.2vw, 16px);
  text-wrap: balance;
}
.hero-kicker {
  font-family: var(--font-serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.25rem, 2.6vw, 2.45rem);
  line-height: 1.22;
  color: var(--color-deep);
  margin-bottom: clamp(10px, 1.5vw, 20px);
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.8rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: var(--color-ink);
  margin-bottom: clamp(14px, 2vw, 28px);
}
.hero .btn {
  padding: clamp(8px, 0.9vw, 14px) clamp(16px, 2vw, 30px);
  font-size: clamp(0.6rem, 0.85vw, 0.8rem);
}

/* ---------- Page banner (interior pages) ---------- */
.page-banner {
  padding: 150px 24px 70px;
  text-align: center;
  background: var(--color-tertiary);
}
.page-banner .eyebrow {
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-ink-soft); margin-bottom: 16px;
}
.page-banner h1 { color: var(--color-deep); }
.page-banner p { max-width: 640px; margin: 18px auto 0; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 100px 0; }
.section-tint { background: var(--color-tertiary); }
.section-white { background: var(--color-white); }

/* ---------- Problem / narrative two-column ---------- */
.narrative-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: center;
}
.narrative-grid h2 { color: var(--color-deep); text-align: center; }
.narrative-copy p:last-child { margin-bottom: 0; }

/* ---------- Centered narrative block ---------- */
.narrative-center { max-width: 700px; margin: 0 auto; text-align: center; }
.narrative-center h2 { color: var(--color-deep); }

/* ---------- Pull quote ---------- */
.pull-quote { margin: 46px auto 40px; max-width: 620px; }
.pull-quote blockquote {
  margin: 0 0 16px;
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.45;
  color: var(--color-deep);
  text-wrap: balance;
}
.pull-quote figcaption {
  font-family: var(--font-sans);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  /* primary-dark, not primary: these small caps are text and have to clear AA.
     Same for the other three caption roles below. */
  color: var(--color-primary-dark);
}
/* Hairlines above and below rather than a left rule — the section is centered */
.pull-quote::before, .pull-quote::after {
  content: ""; display: block; width: 54px; height: 1px;
  background: var(--color-primary); margin: 0 auto;
}
.pull-quote::before { margin-bottom: 28px; }
.pull-quote::after { margin-top: 28px; }

/* ---------- Offset photo card ---------- */
/* Arched top: 50% of the width across, 40% of the 4:5 height down, so the curve
   stays a true semicircle at any card size. */
.photo-card {
  --photo-arch: 50% 50% 12px 12px / 40% 40% 12px 12px;
  position: relative;
  display: block;
  max-width: 420px;
}
.photo-card::before {
  content: "";
  position: absolute;
  top: -18px; left: -18px;
  width: 100%; height: 100%;
  background: var(--color-primary);
  border-radius: var(--photo-arch);
  z-index: 0;
}
.photo-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--photo-arch);
  box-shadow: 0 24px 48px var(--shadow-photo);
}
.photo-card--right::before { top: -18px; left: auto; right: -18px; }

/* ---------- Founder intro ---------- */
.founder-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
}
.founder-copy h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--color-deep);
  margin-bottom: 22px;
}
.founder-copy .bio-subhead {
  font-size: 1.25rem;
  color: var(--color-deep);
  margin: 32px 0 12px;
}
.founder-copy .bio-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 1em;
}
.founder-copy .bio-list li {
  color: var(--color-ink-soft);
  margin-bottom: 12px;
}
.founder-copy .bio-list strong { color: var(--color-deep); }
.founder-photo-wrap { display: flex; justify-content: center; }
/* Long-bio variant: photo tracks the top of the copy instead of floating mid-column */
.founder-grid--long { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.founder-grid--long .founder-photo-wrap { position: sticky; top: 110px; }

/* ---------- Services / card row (Snyder therapist-card style) ---------- */
.service-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 50px;
}
.service-card {
  text-align: left;
}
.service-card-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-mist);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.service-card-icon svg { width: 28px; height: 28px; color: var(--color-deep); }
.service-card h3 { color: var(--color-ink); margin-bottom: 10px; }
.service-card-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--color-deep);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
}

/* ---------- Book / resource cards (resources page) ---------- */
/* A class-level `display` beats the UA [hidden] rule, so restate it */
.book-grid[hidden] { display: none; }
.book-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.book-card {
  background: var(--color-white);
  border: 1px solid var(--color-tertiary);
  border-left: 3px solid var(--color-primary);
  padding: 28px 30px;
  text-align: left;
}
.book-card h3 {
  font-style: italic;
  font-size: 1.25rem;
  margin-bottom: 6px;
  color: var(--color-deep);
}
.book-card .book-author {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 14px;
}
.book-card p:last-child { margin-bottom: 0; }
.resource-note {
  max-width: 620px;
  margin: 0 auto;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

/* ---------- CTA band with botanical corners ---------- */
.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--color-tertiary);
  padding: 110px 0;
}
.cta-leaf { position: absolute; width: 260px; height: 260px; opacity: 0.5; }
.cta-leaf--tl { top: -20px; left: -20px; }
.cta-leaf--br { bottom: -20px; right: -20px; transform: rotate(180deg); }
.cta-leaf svg { width: 100%; height: 100%; }
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { color: var(--color-deep); }
.cta-section p { max-width: 460px; margin: 0 auto 30px; }

/* ---------- Pill list (modalities/tags) ---------- */
.pill-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 780px; margin: 0 auto; }
.pill {
  padding: 9px 20px; border-radius: 999px;
  background: var(--color-white); border: 1px solid var(--color-primary);
  color: var(--color-deep); font-size: 0.8rem; letter-spacing: 0.03em;
}
.section-tint .pill { background: var(--color-white); }
/* Primary focuses read as filled; everything else stays outlined so the
   hierarchy is visible before anyone reads a single word. */
.pill--focus {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--color-white);
}
.section-tint .pill--focus { background: var(--color-deep); }
.focus-note {
  max-width: 620px; margin: 0 auto;
  font-family: var(--font-serif); font-style: italic; font-size: 1.05rem;
}
.pill-group-label {
  font-family: var(--font-sans);
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary-dark);
  text-align: center;
  margin: 46px 0 20px;
}

/* ---------- Service detail blocks (services page) ---------- */
.service-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-tertiary);
  align-items: flex-start;
}
.service-detail:last-child { border-bottom: none; }
/* Supervision speaks to clinicians, not clients — the tag and rule above it mark
   the change of audience without breaking the list's rhythm. */
.service-detail--clinicians { border-top: 1px solid var(--color-tertiary); margin-top: 8px; }
.service-audience-tag {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.service-detail-icon {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--color-mist);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.service-detail-icon svg { width: 32px; height: 32px; color: var(--color-deep); }
.service-detail h3 { color: var(--color-deep); margin-bottom: 10px; }
.good-for { margin-top: 16px; font-size: 0.88rem; }
.good-for strong { color: var(--color-deep); }

/* ---------- FAQ accordion ---------- */
.accordion { max-width: 780px; margin: 0 auto; }
.accordion-item { border-bottom: 1px solid var(--color-sand); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4px; font-family: var(--font-serif); font-size: 1.1rem;
  color: var(--color-ink); text-align: left;
}
.accordion-icon { font-size: 1.3rem; color: var(--color-primary-dark); flex-shrink: 0; margin-left: 20px; }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding var(--transition); padding: 0 4px; }
/* max-height is the transition hack, not a real measurement — keep it well above the
   tallest answer or long ones get silently clipped. */
.accordion-item.is-open .accordion-panel { max-height: 1000px; padding-bottom: 22px; }
.accordion-panel p { margin: 0; }
.accordion-panel p + p { margin-top: 16px; }
.accordion-panel a {
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-primary);
}
.accordion-panel a:hover { color: var(--color-deep); border-color: var(--color-deep); }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.contact-info h3 { color: var(--color-deep); margin-bottom: 20px; }
.contact-info p { margin-bottom: 22px; }
.contact-info a { color: var(--color-deep); border-bottom: 1px solid var(--color-primary); }
.contact-map { margin-top: 30px; border: 1px solid var(--color-tertiary); overflow: hidden; }
.contact-map iframe { width: 100%; height: 260px; border: 0; display: block; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-deep); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--color-sand);
  border-radius: var(--radius); background: var(--color-white);
  font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-ink);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); }
.form-note { font-size: 0.78rem; color: var(--color-ink-soft); margin-top: 14px; }
.form-crisis-note {
  font-size: 0.85rem; line-height: 1.6; color: var(--color-ink);
  background: var(--color-tertiary);
  border-left: 3px solid var(--color-primary-dark);
  border-radius: 4px; padding: 14px 18px; margin: 0 0 26px;
}
.form-crisis-note strong { color: var(--color-ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-deep); color: rgba(255,255,255,0.85); padding: 70px 0 0; }
.site-footer .logo img { height: 78px; filter: brightness(0) invert(1); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-contact { margin-top: 24px; font-size: 0.9rem; }
.footer-contact p { color: rgba(255,255,255,0.75); }
.footer-contact strong { color: #fff; }
.footer-contact a { color: rgba(255,255,255,0.9); }
.footer-links h3 {
  font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin-bottom: 18px;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 0.9rem; color: rgba(255,255,255,0.75); transition: color var(--transition); }
.footer-links a:hover { color: var(--color-secondary); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15); padding: 22px 24px; text-align: center;
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
}
.footer-bottom p { margin: 0; color: inherit; }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary-dark); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition); z-index: 90;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-deep); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ==========================================================================
   Blog — listing cards and article body
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-tertiary);
  border-left: 3px solid var(--color-primary);
}
.post-card-image { display: block; overflow: hidden; }
.post-card-image img {
  width: 100%; height: 200px; object-fit: cover;
  transition: transform var(--transition);
}
.post-card:hover .post-card-image img { transform: scale(1.03); }
.post-card-body { padding: 28px 30px; }
.post-meta {
  font-family: var(--font-sans);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
}
.post-meta-sep { opacity: 0.6; margin: 0 4px; }
.post-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.post-card h3 a { color: var(--color-deep); transition: color var(--transition); }
.post-card h3 a:hover { color: var(--color-ink); }
.post-card-link {
  font-family: var(--font-sans);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
}
.post-card-link:hover { color: var(--color-deep); border-color: var(--color-deep); }

/* ---------- Single post ---------- */
.page-banner--post h1 { max-width: 760px; margin-left: auto; margin-right: auto; }
.page-banner--post .eyebrow { color: var(--color-primary-dark); }

.post-body {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
}
.post-hero-image { width: 100%; margin-bottom: 40px; }
.post-body h2 {
  font-size: 1.6rem; text-transform: none; letter-spacing: 0.01em;
  color: var(--color-deep); margin-top: 1.6em;
}
.post-body h3 { font-size: 1.25rem; margin-top: 1.5em; color: var(--color-deep); }
.post-body p { margin-bottom: 1.2em; }
.post-body a {
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-primary);
}
.post-body a:hover { color: var(--color-deep); border-color: var(--color-deep); }
.post-body ul, .post-body ol {
  margin: 0 0 1.2em; padding-left: 1.3em; color: var(--color-ink-soft);
}
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 0.5em; }
.post-body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--color-primary);
  font-style: italic; font-size: 1.15rem; color: var(--color-ink);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body img { margin: 1.6em auto; }
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
}
.post-body pre {
  background: var(--color-tertiary);
  padding: 18px 20px;
  overflow-x: auto;
  border-left: 3px solid var(--color-primary);
}
.post-body pre code { background: none; padding: 0; }
.post-body hr {
  border: 0; border-top: 1px solid var(--color-sand); margin: 2.4em 0;
}
.post-back {
  max-width: 680px; margin: 50px auto 0;
  font-family: var(--font-sans);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.post-back a { color: var(--color-primary-dark); }
.post-back a:hover { color: var(--color-deep); }

/* ---------- Affiliate links on the resources page ---------- */
.affiliate-disclosure {
  max-width: 620px; margin: 24px auto 0;
  font-size: 0.82rem; line-height: 1.6;
  color: var(--color-ink-soft);
}
.book-card .book-category {
  font-family: var(--font-sans);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary-dark);
  background: var(--color-tertiary);
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 14px;
}
.book-card .book-link {
  margin-top: 18px; margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.book-card .book-link a {
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
}
.book-card .book-link a:hover { color: var(--color-deep); border-color: var(--color-deep); }


/* Below 760px the hero drops its fixed ratio and grows with the copy; the photo
   crops to fill and the panel takes the full width. */
@media (max-width: 760px) {
  .hero {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    padding: 90px 24px;
  }
  .hero-content {
    width: 100%;
    min-height: 0;
    border-radius: 18px;
    padding: 34px 24px;
  }
  .hero h1 { font-size: 1.12rem; margin-bottom: 12px; }
  .hero-kicker { font-size: 1.5rem; margin-bottom: 14px; }
  .hero-sub { font-size: 1rem; margin-bottom: 24px; }
  .hero .btn { padding: 12px 24px; font-size: 0.72rem; }
}

@media (max-width: 900px) {
  .narrative-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .narrative-copy { text-align: left; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .founder-grid--long { grid-template-columns: 1fr; }
  .founder-grid--long .founder-photo-wrap { position: static; }
  .founder-photo-wrap { order: -1; }
  .photo-card { margin: 0 auto; }
  .service-cards { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; text-align: center; }
  .service-detail-icon { margin: 0 auto; }
}

/* Tablet band: the full desktop header needs ~929px (logo 149 + nav 578 + button 106
   + gaps/padding). Below that but above the hamburger breakpoint it overflowed, so
   drop the redundant Contact button (Contact is already in the nav) and tighten the
   nav's gap and type until the row fits. */
@media (max-width: 930px) and (min-width: 761px) {
  .header-inner { gap: 16px; padding: 10px 20px; }
  .logo img { height: 58px; }
  .main-nav ul { gap: 18px; }
  .main-nav a { font-size: 0.72rem; letter-spacing: 0.05em; }
  /* Whole group, not just the button: an empty flex child would leave the nav
     stranded mid-row under space-between. Hidden, the nav sits flush right. */
  .header-actions { display: none; }
}

@media (max-width: 760px) {
  .main-nav {
    position: fixed; top: 74px; left: 0; right: 0; background: var(--color-white);
    border-bottom: 1px solid rgba(0,0,0,0.08); max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  }
  .main-nav.is-open { max-height: 460px; }
  .book-grid { grid-template-columns: 1fr; gap: 22px; }
  .post-grid { grid-template-columns: 1fr; gap: 26px; }
  .main-nav ul { flex-direction: column; padding: 10px 24px 26px; gap: 4px; }
  .main-nav a { display: block; padding: 12px 0; }
  .nav-toggle { display: flex; }
  .header-actions .btn-small { display: none; }
  .section { padding: 70px 0; }
  .service-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-brand .logo { justify-content: center; }
  .page-banner { padding: 130px 24px 56px; }
}