/*
 * michellebachtold.com — site styles
 * Extracted from index.html. Single source of truth for visual design.
 * Edit this file; reload the page; commit.
 */

/* ── reset & tokens ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* WARM EDITORIAL — deep charcoal + warm muted gold + warm cream text */
  --cream:        #1c1f24;   /* page background — deep charcoal */
  --cream-soft:   #262a31;   /* alt section bg — LIGHTER than page (sections step UP) */
  --paper:        #2e323a;   /* cards / image boxes */
  --ink:          #fbf7ee;   /* primary text — warmer/brighter cream, max contrast on dark */
  --ink-soft:     #cfc6b5;   /* secondary text */
  --ink-mute:     #948b78;   /* tertiary / metadata — warmer than before */
  --rule:         #3b4049;   /* hairline dividers */
  --rule-soft:    #2f343c;
  --gold:         #f0c674;   /* brighter warm gold — primary accent (was #c9a86a) */
  --gold-deep:    #d4a445;   /* deeper warm gold for hover/press */
  --gold-soft:    #f7d98c;   /* lighter warm gold for borders/halos */
  --gold-tint:    rgba(240, 198, 116, 0.18);

  /* Height of the fixed top CTA bar. Used to offset the fixed topnav
     and to add top padding to the hero. Overridden in mobile media
     queries where the bar stacks and gets taller. */
  --cta-bar-h: 56px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── skip link (keyboard accessibility) ──
 * Hidden by default, only visible when focused (Tab-key users get it;
 * mouse users never see it). Jumps to #net, bypassing the nav and hero.
 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  background: var(--gold);
  color: #1c1f24;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  border: 1px solid var(--gold);
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: calc(var(--cta-bar-h) + 0.5rem);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ── top nav ── */
.topnav {
  position: fixed;
  top: var(--cta-bar-h); left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2.4rem;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(28, 31, 36, 0.85);  /* dark translucent — matches the charcoal page */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, color 0.4s ease;
  opacity: 1;
  transform: translateY(0);
}
.topnav.is-condensed { border-bottom-color: var(--rule); }
.topnav a { color: var(--ink-soft); text-decoration: none; transition: color 0.3s ease; }
.topnav a:hover { color: var(--gold-deep); }
.topnav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;   /* keep "Michelle Bachtold" on one line */
  flex-shrink: 0;
}
.topnav .brand em { font-style: italic; color: var(--gold-deep); }
.brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  opacity: 0.92;
}
.topnav .nav-links { display: flex; gap: 2.2rem; flex-shrink: 0; }
.topnav .nav-links a { white-space: nowrap; }   /* never let a link wrap mid-word */

/* Laptop / small-desktop band: tighten spacing so all eight links fit on ONE
   line instead of wrapping and getting cut off on the right. Below 961px the
   nav switches to the hamburger drawer (see the drawer media block further down). */
@media (min-width: 961px) and (max-width: 1300px) {
  .topnav { padding: 1.1rem 1.6rem; font-size: 0.66rem; letter-spacing: 0.13em; }
  .topnav .nav-links { gap: 1.2rem; }
}

@media (max-width: 700px) {
  .topnav { padding: 0.9rem 1.2rem; font-size: 0.62rem; }
  .topnav .nav-links { gap: 1.2rem; }
}

/* ── main wrapper ── */
main { position: relative; z-index: 2; }

/* ── hero ── */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8rem + var(--cta-bar-h)) 2rem 6rem;
  position: relative;
  background: var(--cream);
  overflow: hidden;
}
@media (max-width: 700px) {
  /* Drop the full-viewport min-height on phones so the content hugs the top
     instead of leaving empty space above the name circles. */
  .hero { min-height: 0; padding: calc(6rem + var(--cta-bar-h)) 1.4rem 4rem; align-items: flex-start; }
}
.hero::before { display: none; }
.hero::after { display: none; }

/* Two-column layout: name on left, intro on right */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(560px, 0.95fr) 1.05fr;
  gap: 4.5rem;
  align-items: center;
  max-width: 1280px;
  width: 100%;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; text-align: center; }
  .hero::before, .hero::after { display: none; }
}

.hero-left {
  opacity: 0;
  animation: fadeUp 1.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tightly-fit text wrap so the concentric circles can be centered on it.
   .name-wrap wraps only the name+credentials+sub (no extra padding) so the
   circles naturally hug the text. */
.name-wrap {
  position: relative;
  display: inline-block;
  padding: 2.6rem 2.2rem;
  text-align: center;
}
.name-wrap::before,
.name-wrap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.name-wrap::before {
  width: min(560px, 130%); height: min(560px, 130%);
  transform: translate(-50%, -50%);
  border: 1px solid var(--rule);
  opacity: 0.45;
  animation: heartbeat 1.6s ease-in-out infinite;
  will-change: transform;
}
.name-wrap::after {
  width: min(420px, 100%); height: min(420px, 100%);
  transform: translate(-50%, -50%);
  border: 1px solid var(--rule-soft);
}

.hero-right {
  border-left: 1px solid var(--rule);
  padding-left: 4.5rem;
  opacity: 0;
  animation: fadeUp 1.6s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-right p {
  color: var(--ink);
  font-size: clamp(1.18rem, 1.6vw, 1.35rem);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.hero-right p:last-child { margin-bottom: 0; }
.hero-intro {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.55rem, 2.2vw, 1.85rem) !important;
  color: var(--gold) !important;
  margin-bottom: 1.4rem !important;
}
@media (max-width: 880px) {
  .hero-right { border-left: none; padding-left: 0; }
}

/* ── top CTA bar ("Take the Wellness Check") ──
   Fixed at the very top of the viewport, above the fixed topnav. Solid gold
   bar (same family as the rest of the site's accents) so it pops against
   the dark theme without introducing a new color. The label and button
   sit centered as a unit on desktop; on tablet/mobile they stack and
   the bar grows taller (see media blocks at the bottom). */
.cta-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;                            /* above the topnav (z-index 50) */
  height: var(--cta-bar-h);
  background: var(--gold);
  color: var(--cream);
  display: flex;
  align-items: center;
  padding: 0 2.4rem;
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  box-shadow: 0 1px 0 var(--gold-deep);   /* crisp 1px bottom edge so the bar reads as its own band */
}
.cta-bar-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;               /* center the label+button as a unit */
  gap: 0.85rem;                          /* tight — they read as a single CTA */
}
.cta-bar-text {
  font-weight: 500;
  font-size: 1rem;                       /* ~28% bigger than before */
  letter-spacing: 0.16em;
  color: var(--cream);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;                   /* keep on one line on desktop */
}
.cta-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);                     /* gold text on dark button ties back to the bar */
  background: var(--cream);
  border: 1px solid var(--cream);
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cta-bar-btn:hover,
.cta-bar-btn:focus-visible {
  background: transparent;
  color: var(--ink);                     /* cream text on the gold bar */
  transform: translateY(-1px);
  outline: none;
}
.cta-bar-btn:focus-visible {
  /* Visible focus ring for keyboard users */
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--ink);
}
.cta-arrow {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.25s ease;
}
.cta-bar-btn:hover .cta-arrow,
.cta-bar-btn:focus-visible .cta-arrow { transform: translate(3px, -3px); }

/* Tablet & mobile (≤880px, matching the hero single-column breakpoint):
   stack the label over the button, both centered. The bar grows taller
   to accommodate; --cta-bar-h keeps the nav's top and the hero's top
   padding in sync with the actual bar height. */
@media (max-width: 880px) {
  :root { --cta-bar-h: 90px; }
  .cta-bar { padding: 0.75rem 1.2rem; }
  .cta-bar-inner {
    flex-direction: column;
    gap: 0.55rem;
    text-align: center;
  }
  .cta-bar-text {
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    white-space: normal;                 /* allow wrap if a very small viewport can't fit one line */
  }
}

/* Phone (≤700px): tighter label/button sizes for small screens. Allow the
   bar to grow a touch more so a wrapped 2-line label never overflows. */
@media (max-width: 700px) {
  :root { --cta-bar-h: 100px; }
  .cta-bar-text {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
  }
  .cta-bar-btn {
    padding: 0.5rem 0.95rem;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
  }
}

.eyebrow {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.6rem;
}
h1 {
  font-weight: 500;
  font-size: clamp(3.2rem, 7.5vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

.hero-sub {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.9rem;
}
.hero-logo {
  display: block;
  margin: 1.1rem auto 0;
  width: clamp(112px, 14vw, 156px);
  height: auto;
}
.hero-credentials {
  display: block;                 /* renders on its own line inside the h1 */
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: 0.32em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.8rem;
}

    .scroll-cue {
      position: absolute;
      bottom: 2.4rem;
      left: 50%;
      transform: translateX(-50%);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.7rem;
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.6rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--ink-mute);
      opacity: 0;
      text-decoration: none;
      animation: fadeUp 1.6s 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards, bob 2.6s 2.4s ease-in-out infinite;
    }
.scroll-cue::after {
  content: '';
  display: block;
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--gold-soft), transparent);
}
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }
@keyframes heartbeat {
  /* two beats (lub-dub) then a rest, scaled around the center */
  0%   { transform: translate(-50%, -50%) scale(1); }
  14%  { transform: translate(-50%, -50%) scale(1.035); }   /* first beat (lub) */
  28%  { transform: translate(-50%, -50%) scale(1); }
  42%  { transform: translate(-50%, -50%) scale(1.025); }   /* second beat (dub, smaller) */
  70%  { transform: translate(-50%, -50%) scale(1); }      /* rest */
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ── shared section styling ── */
section.block {
  max-width: 1140px;
  margin: 0 auto;
  padding: 6.5rem 2.4rem;
}
section.block.alt { background: var(--cream-soft); max-width: none; }
section.block.alt > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { section.block { padding: 4.5rem 1.4rem; } }

.block-eyebrow {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-align: center;
  margin-bottom: 1rem;
}
.block-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 3.3rem);
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--ink);
  margin-bottom: 1rem;
}
.block-title em { font-style: italic; color: var(--gold-deep); font-weight: 500; }
.block-divider {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  margin: 0 auto 2.2rem; max-width: 220px;
}
.block-divider::before, .block-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-soft), transparent);
}
.block-divider svg { width: 7px; height: 7px; fill: var(--gold); flex-shrink: 0; }

/* Scroll-reveal: progressive enhancement.
 * By default .reveal elements are fully visible — works without JS, no
 * accessibility fall-through. JS adds the .js-reveals class to <html> on
 * load, which then enables the "hidden until intersected" behavior.
 */
.reveal { /* default: visible. No opacity 0. No transform. */ }
.js-reveals .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.js-reveals .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js-reveals .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── NET section ── */
.net-text {
  max-width: 820px;
  margin: 0 auto 3rem;
}
.net-text p {
  font-size: clamp(1.22rem, 1.6vw, 1.42rem);
  color: var(--ink);
  margin-bottom: 1.4rem;
  line-height: 1.7;
}
.net-text p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }

.net-how {
  max-width: 820px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 2rem 2.2rem;
}
.net-how-title {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.net-how p {
  font-size: clamp(1.18rem, 1.5vw, 1.38rem);
  color: var(--ink);
  line-height: 1.7;
  margin: 0;
}

/* ── About Me section ── */
.about-me-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem 4rem;
  align-items: start;
}
@media (max-width: 880px) { .about-me-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

.headshot-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.4rem 1.4rem 1.6rem;
  position: sticky;
  top: 6rem;
}
@media (max-width: 880px) { .headshot-card { position: static; } }

.headshot-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-soft);
}
.headshot-credit {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 0.9rem;
  margin-bottom: 1.4rem;
}

.credentials {
  border-top: 1px solid var(--rule);
  padding-top: 1.3rem;
}
.credentials-title {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.credentials ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.credentials li {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.55;
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.credentials li:last-child { border-bottom: none; }
.credentials li::before {
  content: '';
  position: absolute;
  left: 0; top: 1rem;
  width: 6px; height: 1px;
  background: var(--gold);
}

.about-me-name {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.1vw, 1.75rem);
  color: var(--ink);
  margin-bottom: 1.3rem;
  letter-spacing: 0.01em;
}
.about-me-text p {
  font-size: clamp(1.18rem, 1.5vw, 1.38rem);
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 1.3rem;
}
.about-me-text p:last-child { margin-bottom: 0; }

/* ── "what it can help with" section ── */
/* Layout: 3 cards on top row, 2 cards on bottom row (centered).
   Implemented via explicit grid placement so the second row is centered
   regardless of viewport width. The .issue:nth-child rules keep cards
   1-3 in row 1 and cards 4-5 in row 2 columns 2-3. */
.issues {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 1.4rem;
  max-width: 980px;
  margin: 2.6rem auto 0;
}
/* 6 items in a 3-column grid flow naturally as 3+3. The explicit
   row/column placement was only needed when the grid held 5 items
   arranged 3+2; with 6 items every cell is filled. */
/* On phones, stack everything single-column. */
@media (max-width: 820px) {
  .issues { grid-template-columns: 1fr; }
  .issue:nth-child(n) { grid-column: 1; grid-row: auto; justify-self: stretch; }
}
.issue {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 2rem 1.5rem 1.8rem;
  text-align: center;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.issue:hover {
  border-color: var(--gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(43, 36, 28, 0.25);
}
.issue-icon {
  width: 60px; height: 60px;
  stroke: var(--gold-deep);
  fill: none;
  stroke-width: 1.2;
  margin: 0 auto 0.8rem;
  display: block;
}
.issue h3 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.issue p { font-size: 1.12rem; color: var(--ink); font-style: italic; line-height: 1.55; }

/* ── research / evidence section ── */
.research-intro {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
  color: var(--ink);                                  /* full primary cream — was ink-soft, hard to read */
  font-size: 1.28rem;
  line-height: 1.65;
}

.research-footnote {
  margin: 2.6rem auto 0;
  text-align: center;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.6;
  max-width: 720px;
}
.research-footnote a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.research-footnote a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}
.research-footnote a .arrow {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.85em;
  transition: transform 0.25s ease;
}
.research-footnote a:hover .arrow { transform: translate(2px, -2px); }

.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
}
@media (max-width: 820px) { .research-grid { grid-template-columns: 1fr; } }

/* the clickable white-box thumbnail */
figure.study {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1rem;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
figure.study:hover {
  border-color: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -32px rgba(43, 36, 28, 0.28);
}

.study-thumb {
  position: relative;
  display: block;
  background: #ffffff;            /* hardcoded white — the .webp files have alpha channels and the dark theme was bleeding through */
  border: 1px solid var(--rule-soft);
  cursor: zoom-in;
  overflow: hidden;
}
.study-thumb img {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;            /* explicit opaque white behind the image */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
figure.study:hover .study-thumb img { transform: scale(1.015); }

.study-thumb .zoom-badge {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(243, 237, 224, 0.92);
  border: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-deep);
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
figure.study:hover .study-thumb .zoom-badge { background: var(--gold); color: var(--paper); border-color: var(--gold); }

figure.study figcaption {
  padding: 1.3rem 0.6rem 0.5rem;
  text-align: center;
}
figure.study figcaption .cap-title {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.6rem;
}
figure.study figcaption .cap-body {
  font-size: 1rem;
  color: var(--ink);                                  /* full primary cream — was ink-soft */
  font-style: italic;
  line-height: 1.55;
}
.cap-ref {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: normal;
}

/* ── lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(43, 36, 28, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
  animation: fadeIn 0.25s ease forwards;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  height: auto;
  width: auto;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  background: #ffffff;            /* hardcoded white — the .webp files have alpha channels; without this the dark backdrop bleeds through */
  border: 1px solid var(--rule);
}
.lightbox-close {
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(243, 237, 224, 0.15);   /* using cream text color, translucent */
  color: var(--ink);                         /* cream text */
  border: 1px solid rgba(243, 237, 224, 0.3);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease;
}
.lightbox-close:hover { background: rgba(243, 237, 224, 0.3); }

/* ── resources / links section ── */
.resource-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}
@media (max-width: 820px) { .resource-groups { grid-template-columns: 1fr; } }

.resource-group {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.8rem 1.6rem 1.4rem;
}
.resource-group h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.resource-group ul { list-style: none; }
.resource-group li { margin-bottom: 1rem; }
.resource-group li:last-child { margin-bottom: 0; }
.resource-group a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.22rem;
  font-weight: 500;
  display: block;
  transition: color 0.3s ease, transform 0.3s ease;
}
.resource-group a:hover { color: var(--gold-deep); transform: translateX(3px); }
.resource-group a .arrow {
  display: inline-block;
  font-size: 0.85em;
  color: var(--gold-deep);
  margin-left: 0.3rem;
  transition: transform 0.3s ease;
}
.resource-group a:hover .arrow { transform: translate(2px, -2px); }
.resource-group a small {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* ── FAQ section ── */
.faq-list {
  max-width: 820px;
  margin: 2.6rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.faq-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  transition: border-color 0.3s ease;
}
.faq-item[open] {
  border-left-color: var(--gold-deep);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 1.6rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  color: var(--ink);
  position: relative;
  padding-right: 3rem;
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold-deep);
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.faq-answer {
  padding: 0 1.6rem 1.4rem;
  border-top: 1px solid var(--rule-soft);
}
.faq-answer p {
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  color: var(--ink);
  line-height: 1.7;
  margin-top: 1rem;
  margin-bottom: 0;
}
.faq-answer p + p { margin-top: 0.9rem; }
.faq-answer ul {
  margin-top: 0.9rem;
  padding-left: 1.4rem;
  color: var(--ink);
}
.faq-answer li {
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  line-height: 1.6;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
/* FAQ answer links match the resource page link palette: cream text by
   default, warm gold on hover, and explicitly cream on :visited (the
   resource page doesn't style :visited, but we set it explicitly here so
   the FAQ link never falls back to the browser's default purple). */
.faq-answer a,
.faq-answer a:visited {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s ease;
}
.faq-answer a:hover {
  color: var(--gold-deep);
}
.faq-answer a .arrow {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.85em;
  transition: transform 0.3s ease;
}
.faq-answer a:hover .arrow { transform: translate(2px, -2px); }
@media (max-width: 700px) {
  .faq-item summary { padding: 1.1rem 1.2rem; padding-right: 2.6rem; font-size: 1.12rem; }
  .faq-answer { padding: 0 1.2rem 1.2rem; }
  .faq-item summary::after { right: 1rem; }
}

/* ── footer ── */
footer.site {
  border-top: 1px solid var(--rule);
  text-align: center;
  padding: 3rem 2rem 2.6rem;
  background: var(--cream-soft);
  position: relative;
  z-index: 2;
}
footer.site .foot-mark {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}
footer.site .foot-tree {
  display: block;
  margin: 0 auto 1.1rem;
  width: clamp(54px, 6.5vw, 76px);
  height: auto;
  opacity: 0.92;
}
footer.site .foot-sub {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
footer.site .foot-legal {
  margin-top: 1rem;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
footer.site .foot-legal a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
footer.site .foot-legal a:hover { color: var(--gold); border-bottom-color: var(--gold-soft); }

/* ── animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── fees section ── */
.fees-list {
  max-width: 720px;
  margin: 2.6rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fee-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fee-name {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  color: var(--ink);
  margin: 0;
}
.fees-section-title {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 0.6rem 0 -0.2rem;
}
.fee-line {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  color: var(--ink);
  margin: 0;
}
.fee-duration {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  color: var(--ink-mute);
  margin: 0;
}
.fee-price {
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.fee-note {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
  line-height: 1.55;
}
.fee-foot {
  text-align: center;
  margin-top: 1.4rem;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.6;
}
.fee-foot p { margin: 0; }
.fee-foot strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 600px) {
  .fee-item { padding: 1.2rem 1.3rem; }
}

    /* ── contact section ── */
    .contact-wrap {
      max-width: 680px;
      margin: 0 auto;
    }
    .contact-lede {
      text-align: center;
      color: var(--ink);                              /* full primary cream — was ink-soft */
      font-size: 1.3rem;
      line-height: 1.7;
      margin-bottom: 2.4rem;
    }

    .office-card {
      background: var(--paper);
      border: 1px solid var(--rule);
      border-left: 3px solid var(--gold);
      padding: 1.6rem 1.8rem;
      margin-bottom: 2.4rem;
    }
    .office-title {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.78rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
    }
    .office-line {
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 1.12rem;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }
    .office-line strong {
      font-weight: 500;
      color: var(--ink);
    }
    .office-line a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-color: var(--gold-soft);
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      transition: color 0.25s ease, text-decoration-color 0.25s ease;
    }
    .office-line a:hover,
    .office-line a:focus-visible {
      color: var(--gold-deep);
      text-decoration-color: var(--gold);
    }
    .office-address {
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 1.12rem;
      color: var(--ink);
      margin: 0.1rem 0 0.9rem;
      line-height: 1.55;
    }
    .contact-form {
      background: var(--paper);
      border: 1px solid var(--rule);
      padding: 2.2rem 2rem;
      box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 24px 60px -32px rgba(43, 36, 28, 0.18);
    }
    @media (max-width: 600px) { .contact-form { padding: 1.6rem 1.2rem; } }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }
    @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; gap: 0; } }

    .field {
      display: flex;
      flex-direction: column;
      margin-bottom: 1.2rem;
    }
    .field label {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.72rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 0.55rem;
    }
    .field input,
    .field textarea {
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 1.1rem;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 2px;
      padding: 0.85rem 1rem;
      outline: none;
      transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
      width: 100%;
    }
    .field input::placeholder,
    .field textarea::placeholder {
      color: var(--ink-mute);
      font-style: italic;
      opacity: 1;
    }
    .field input:focus,
    .field textarea:focus {
      border-color: var(--gold-deep);
      background: var(--paper);
      box-shadow: 0 0 0 3px var(--gold-tint);
    }
    .field textarea {
      resize: vertical;
      min-height: 140px;
      line-height: 1.6;
    }
    .hp { display: none !important; }

    .form-submit {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.78rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: #1c1f24;                 /* hardcoded: dark text on a warm-gold button for crisp contrast */
      background: var(--gold);
      border: 1px solid var(--gold);
      padding: 0.95rem 1.8rem;
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
      margin-top: 0.4rem;
    }
    .form-submit:not(:disabled):hover {
      background: var(--gold-deep);
      border-color: var(--gold-deep);
      transform: translateY(-1px);
    }
    .form-submit:disabled {
      background: var(--ink-mute);
      border-color: var(--ink-mute);
      cursor: not-allowed;
      opacity: 0.65;
    }
    .form-submit-arrow {
      font-size: 1.1em;
      transition: transform 0.3s ease;
    }
    .form-submit:not(:disabled):hover .form-submit-arrow { transform: translateX(3px); }

    .form-foot {
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.75rem;
      color: var(--ink-mute);
      text-align: center;
      margin-top: 1.2rem;
      letter-spacing: 0.02em;
    }

    /* ── hamburger + drawer ── */
    .nav-toggle {
      display: none;
      background: transparent;
      border: 1px solid var(--rule);
      border-radius: 2px;
      padding: 0.55rem 0.7rem;
      cursor: pointer;
      flex-direction: column;
      justify-content: space-between;
      width: 42px;
      height: 36px;
      transition: border-color 0.3s ease;
    }
    .nav-toggle:hover,
    .nav-toggle:focus-visible { border-color: var(--gold-soft); outline: none; }
    .nav-toggle-bar {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--ink);
      border-radius: 1px;
      transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
    }
    .nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(11px) rotate(45deg); background: var(--gold-deep); }
    .nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-11px) rotate(-45deg); background: var(--gold-deep); }

    .nav-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(43, 36, 28, 0.55);
      z-index: 49;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

    @media (max-width: 960px) {
      /* Keep the topnav (and its toggle button) above the drawer so the
         hamburger stays clickable to close the menu. */
      .topnav { z-index: 60; }
      .nav-toggle { display: flex; }
      .nav-links {
        position: fixed;
        top: 0; right: 0;
        height: 100vh;
        height: 100dvh;
        width: min(320px, 86vw);
        background: var(--paper);
        border-left: 1px solid var(--rule);
        box-shadow: -16px 0 50px -20px rgba(43, 36, 28, 0.35);
        z-index: 51;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 5.5rem 1.4rem 2rem;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
      }
      .nav-links.is-open { transform: translateX(0); }
      .nav-links a {
        font-family: 'Jost', sans-serif;
        font-weight: 400;
        font-size: 1.05rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink);
        padding: 1.1rem 0.2rem;
        border-bottom: 1px solid var(--rule-soft);
        text-decoration: none;
        transition: color 0.25s ease, padding-left 0.25s ease;
      }
      .nav-links a:last-child { border-bottom: 0; }
      .nav-links a:hover,
      .nav-links a:focus-visible { color: var(--gold-deep); padding-left: 0.6rem; outline: none; }

      body.nav-open { overflow: hidden; }
      /* When drawer is open, give the topnav a solid background so the
         toggle button stays visible against the drawer's edge. */
      .nav-open .topnav { background: rgba(28, 31, 36, 0.95); }
    }

    /* ── mobile typography & spacing pass ── */
    @media (max-width: 700px) {
      body { font-size: 20px; line-height: 1.7; }
      .block-eyebrow { font-size: 0.88rem; letter-spacing: 0.34em; }
      .block-title   { font-size: clamp(2.1rem, 7.6vw, 2.8rem); line-height: 1.18; }
      .hero-sub        { font-size: 1.05rem; letter-spacing: 0.28em; }
      .hero-credentials{ font-size: 0.85rem; letter-spacing: 0.28em; }
      .hero-right p    { font-size: 1.22rem; line-height: 1.7; }
      .hero-intro      { font-size: 1.55rem !important; }
      .net-text p      { font-size: 1.25rem; line-height: 1.7; }
      .net-how p       { font-size: 1.22rem; line-height: 1.7; }
      .about-me-text p { font-size: 1.22rem; line-height: 1.7; }
      .credentials li  { font-size: 1.05rem; }
      .issue h3        { font-size: 1.45rem; }
      .issue p         { font-size: 1.15rem; }
      .contact-lede    { font-size: 1.28rem; }
      .form-foot       { font-size: 0.92rem; }
      .form-submit     { width: 100%; justify-content: center; }
    }
    @media (max-width: 420px) {
      body { font-size: 19px; }
      .field input, .field textarea { font-size: 1.1rem; padding: 0.85rem 0.95rem; }
      .contact-form { padding: 1.4rem 1rem; }
    }

    /* ── form "message sent" confirmation (shown when URL has ?sent=1) ── */
    .form-success {
      display: none;
      align-items: flex-start;
      gap: 0.9rem;
      background: var(--paper);
      border: 1px solid var(--gold-soft);
      border-left: 3px solid var(--gold);
      padding: 1.1rem 1.3rem;
      margin-bottom: 1.6rem;
      animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
    }
    .form-success.is-visible { display: flex; }
    .form-success-icon {
      flex-shrink: 0;
      width: 24px; height: 24px;
      border-radius: 50%;
      background: var(--gold);
      color: var(--bg, #1c1f24);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      margin-top: 0.05rem;
    }
    .form-success-body { flex: 1; }
    .form-success-title {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.78rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.3rem;
    }
    .form-success-text {
      font-size: 1rem;
      color: var(--ink-soft);
      font-style: italic;
      line-height: 1.5;
    }

@media (prefers-reduced-motion: reduce) {
  .eyebrow, h1, .hero-sub, .hero-left, .hero-right, .scroll-cue {
    animation: none; opacity: 1; transform: none;
  }
  .hero::before { animation: none; }                          /* stop the heartbeat too */
  .scroll-cue { display: none; }
}