/* ============================================================
   modern.css — layered design refinements for the "Refined" preview
   Loads AFTER styles.css. Pure overrides — original design untouched.

   Intent: keep the warm, grounded, somatic brand, but trade a few
   "template" tells (flanking-rule eyebrows, flat cream, equal cards,
   generic markers) for editorial detailing that reads as intentional
   and human-made.
   ============================================================ */

/* ---------- 1. Tactile paper grain ----------
   A fixed, non-interactive noise layer gives the flat cream a subtle
   tooth — the single biggest move away from the "rendered-by-default"
   look. Kept very faint so it never competes with content. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:3; pointer-events:none;
  mix-blend-mode:multiply; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Testimonial privacy disclosure */
#testimonials.panel{ padding-bottom:calc(48px * var(--space, 1)); }
.testimonial-disclosure{
  margin:calc(48px * var(--space, 1)) auto 0; max-width:none;
  text-align:center; white-space:nowrap;
  font-size:.8rem; line-height:1.6; font-style:italic;
  color:var(--muted); opacity:.85;
}
@media (max-width:640px){
  #testimonials.panel{ padding-bottom:2rem; }
  .testimonial-disclosure{
    margin-top:2rem; white-space:normal; max-width:34ch;
  }
}

/* ---------- 5. A standout pull-quote for the clinician endorsement ----
   Large, faint serif quotation glyph behind the text — editorial, and
   it earns the "from a fellow clinician" moment. */
.endorse{ position:relative; overflow:hidden; }
.endorse > *{ position:relative; z-index:1; }
.endorse::before{
  content:"\201C";
  position:absolute; z-index:0; top:-.18em; left:50%; transform:translateX(-50%);
  font-family:"Lora", Georgia, serif; font-style:italic;
  font-size:11rem; line-height:1; color:var(--accent); opacity:.1;
  pointer-events:none;
}

/* ---------- 6. Testimonial cards: quieter, more editorial ----------
   Top hairline accent + lifted cite instead of three identical boxes. */
.quote{ position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.quote::before{
  content:""; position:absolute; left:clamp(26px,3vw,38px); right:clamp(26px,3vw,38px); top:0;
  height:2px; background:color-mix(in srgb,var(--accent) 55%, transparent);
}
.quote cite{ color:var(--clay); }

/* ---------- 7. The consultation steps as a journey ----------
   A dotted connector links 1 → 2 → 3 behind the number badges. */
.steps{ position:relative; }
@media (min-width:760px){
  .steps::before{
    content:""; position:absolute; top:21px; left:16.66%; right:16.66%;
    border-top:2px dotted color-mix(in srgb,var(--accent) 55%, transparent);
    z-index:0;
  }
  .step{ position:relative; z-index:1; }
  .step .n{
    position:relative; z-index:1;
    box-shadow:0 0 0 6px var(--bg); /* mask the line behind each badge */
  }
}

/* ---------- 8. Gentle hover life on the content cards ---------- */
.outcome{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.outcome:hover,
.quote:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--accent) 32%, var(--line));
}

/* ---------- 9. Nav links: underline that draws in ---------- */
.nav-links a:not(.nav-sched-m){ position:relative; }
.nav-links a:not(.nav-sched-m)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1.5px;
  background:var(--accent); transition:right .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:not(.nav-sched-m):hover::after{ right:0; }

/* ---------- 10. Button + focus polish ---------- */
.btn{ transition:transform .18s ease, filter .18s ease, box-shadow .28s ease; }
.btn.lg:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px -16px color-mix(in srgb,var(--sage) 72%, transparent);
}
/* visible, on-brand keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:8px;
}

/* honor reduced-motion: drop the hover translates/transitions */
@media (prefers-reduced-motion: reduce){
  .outcome, .quote, .btn{ transition:none; }
  .outcome:hover, .quote:hover, .btn.lg:hover{ transform:none; }
}