/* =========================================================================
   MICHELLE LIAM PRIVATE PRACTICE
   Stylesheet — organized in sections below. This file is intentionally a
   single stylesheet (fewer requests, easier to hand off) but is divided
   into clearly labeled sections. Use your editor's "find" for the banner
   comments (e.g. "COMPONENTS: BUTTONS") to jump around.

   Editing guide for non-developers:
   - Colors live in "DESIGN TOKENS" below — change a hex value once and it
     updates everywhere.
   - Fonts and type sizes are also in "DESIGN TOKENS".
   ========================================================================= */

/* -------------------------------------------------------------------------
   DESIGN TOKENS

   Five-color brand palette: Espresso, Latte, Stone, Linen, Sage. Every
   button, link, background and text color on the site pulls from these
   five values (plus two derived tones — --color-paper and
   --color-accent-deep — which are themselves just blends of two palette
   colors, not new hues).
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --color-espresso: #3E3A32;
  --color-latte: #A08978;
  --color-stone: #C9C1B7;
  --color-linen: #EDEAE3;
  --color-sage: #6B705F;

  /* Derived (blends of the five above — see README for the exact mix) */
  --color-paper: #E0DCD4;        /* Stone blended into Linen — card/panel surfaces */
  --color-accent-deep: #5D6052;  /* Espresso blended into Sage — hover/active state */

  /* Functional aliases used throughout the component CSS below */
  --color-ink: var(--color-espresso);
  --color-ink-soft: rgba(62, 58, 50, 0.78);
  --color-canvas: var(--color-linen);
  --color-accent: var(--color-sage);
  --color-line: rgba(62, 58, 50, 0.18);
  --color-line-soft: rgba(62, 58, 50, 0.1);
  --color-focus: var(--color-sage);

  /* Type families */
  --font-display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Alex Brush", "Brush Script MT", cursive;

  /* Fluid type scale */
  --fs-label: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  --fs-hero: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);

  /* Spacing */
  --space-section: clamp(4.5rem, 4rem + 3vw, 8.5rem);
  --space-block: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --container-max: 74rem;
  --container-pad: clamp(1.5rem, 4vw, 3.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;

  /* Radius — used sparingly; this brand favors precise, architectural edges */
  --radius-sm: 2px;
  --radius-md: 3px;
}

/* -------------------------------------------------------------------------
   RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100svh; overflow-x: hidden; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   BASE / TYPOGRAPHY
   ------------------------------------------------------------------------- */
body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.3; color: var(--color-ink); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: 62ch; }
p + p { margin-top: 1.1em; }

.lead {
  font-size: var(--fs-lg);
  color: var(--color-ink-soft);
  max-width: 42ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}

a.text-link {
  color: var(--color-accent);
  font-weight: 700;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a.text-link:hover { opacity: 0.65; }

::selection { background: var(--color-sage); color: var(--color-linen); }

/* Visible keyboard focus — applies site-wide */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--color-ink);
  color: var(--color-linen);
  padding: 0.85em 1.4em;
  z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-section);
}
/* Scroll reveal: calm fade + rise, never bouncy. .is-visible is added by
   js/main.js when a section enters the viewport (not applied to .hero,
   which is already visible on load). Falls back to fully visible, no
   motion, if JS doesn't run or reduced motion is set. */
.section {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .section { opacity: 1; transform: none; transition: none; }
}
.section--paper { background: var(--color-paper); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 1.5rem); }

/* -------------------------------------------------------------------------
   HEADER / NAV
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid background rather than translucent + backdrop-filter:
     backdrop-filter creates a CSS containing block for position:fixed
     descendants, which breaks the full-height mobile nav drawer below. */
  background: var(--color-canvas);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  gap: 1.5rem;
}

/* -------------------------------------------------------------------------
   COMPONENTS: BRAND MARK (logo lockup)
   A large script "ml" monogram with a hand-drawn-style flourish flanking
   it (drawn as an inline SVG — two thin curved strokes either side of the
   lettering — rather than a plain text glyph, to match the client's
   reference logo), with "Michelle Liam" / "Private Practice" stacked
   tight beneath it in the body sans-serif, mixed case (not uppercase).
   The unit is vertically centered against the nav row (align-items:center
   on .site-header__inner), not stretched to match its height.
   ------------------------------------------------------------------------- */
.brand-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.brand-mark__script {
  display: block;
  width: clamp(9.5rem, 8.5rem + 3vw, 11.5rem);
  height: auto;
  margin-bottom: -0.3rem;
  color: var(--color-ink);
}
.brand-mark__name {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--color-ink);
}
.brand-mark__tagline {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--color-ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.5rem);
}

.nav__list a {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  position: relative;
  padding-block: 0.3em;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-ink);
  transition: right var(--dur-base) var(--ease-out);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { right: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0.4rem; right: 0.4rem;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle span { top: 50%; transform: translateY(-50%); }
.nav-toggle span::before { top: -0.5rem; }
.nav-toggle span::after { top: 0.5rem; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(0.5rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-0.5rem) rotate(-45deg); }

/* -------------------------------------------------------------------------
   COMPONENTS: BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-sage);
  color: var(--color-linen);
  border-color: var(--color-sage);
}
.btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.btn--ghost:hover { border-color: var(--color-ink); }

.btn--ink {
  background: var(--color-ink);
  color: var(--color-linen);
  border-color: var(--color-ink);
}
.btn--ink:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }

.btn--on-dark {
  background: var(--color-linen);
  color: var(--color-ink);
  border-color: var(--color-linen);
}
.btn--on-dark:hover { background: var(--color-stone); }

.btn--lg {
  padding: 1.15em 2.1em;
  font-size: var(--fs-body);
}

.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   COMPONENTS: CARDS
   ------------------------------------------------------------------------- */
.card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  border-radius: var(--radius-md);
}

/* -------------------------------------------------------------------------
   GRIDS
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1.5rem, 2vw, 2.5rem);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* A 3-across grid with a middle 2-column step, for content-heavier item
   grids (the About "what guides my work" grid and the Services "what we
   might explore" grid) so mobile never gets squeezed 3- or 6-wide. */
.item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) {
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .item-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   HERO
   Full-bleed lifestyle/interior photo band with headline content overlaid,
   anchored to the lower third via .hero__scrim for text legibility. Used
   on the About (landing) and Services pages. No portrait photography
   appears in any hero — see images/README.md.
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  max-width: 100rem;
  margin-inline: auto;
  aspect-ratio: 2.7 / 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 760px) {
  .hero { aspect-ratio: 4 / 5; }
}
@media (max-width: 500px) {
  .hero { aspect-ratio: 3 / 4; }
}
.hero__photo.img-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  --parallax-y: 0px;
  transform: translateY(var(--parallax-y));
}

/* No scrim: the photo's own plain-wall midground is light enough that dark
   ink text sits directly on it, legibly, without an overlay darkening the
   image. Text position (see .hero__text) is tuned to land there. */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.hero__text {
  max-width: 22rem;
  margin-left: 28%;
}
@media (max-width: 760px) {
  .hero__text { margin-left: 12%; }
}
@media (max-width: 500px) {
  .hero__text { margin-left: 6%; max-width: 17rem; }
}

.hero__tags {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.hero__rule {
  display: block;
  width: 4rem;
  height: 1px;
  margin-top: 1.25rem;
  background: var(--color-ink);
  opacity: 0.5;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-ink);
  max-width: 10.5rem;
}
.hero__headline .reveal-line {
  display: block;
  overflow: hidden;
}
.hero__headline .reveal-line span {
  display: block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: 0.05s;
}
.hero.is-revealed .hero__headline .reveal-line span { opacity: 1; transform: translateY(0); }

/* Services: shows the photo completely uncropped, at its own native
   ratio, rather than the fixed-aspect-ratio crop the base .hero above
   uses for About. The image flows normally (establishing the hero's
   height itself) instead of being absolutely positioned and cover-cropped
   to fill a preset box; the text overlay is what's absolutely positioned
   here, on top of it. These overrides have to come after the generic
   .hero__photo/.hero__content rules above — same specificity either way,
   so source order decides, and these need to win. */
.hero--wide {
  aspect-ratio: unset;
  height: auto;
  display: block;
}
.hero--wide .hero__photo.img-slot {
  position: static;
  overflow: visible;
}
.hero--wide .hero__photo img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: initial;
  transform: none;
}
.hero--wide .hero__content {
  position: absolute;
  inset: 0;
}
@media (max-width: 760px) {
  /* Not hidden — repositioned. The photo is short here (no crop, so its
     height is whatever 100% width naturally works out to), so the
     headline can't be legibly overlaid on it; it switches from an
     absolute overlay to a normal block directly below the image instead.
     This keeps the page's one <h1> visible at every width rather than
     duplicating it. (.hero__intro, the second column, is a true
     duplicate — hidden here in favor of the copy in #services-intro —
     since it's a <p>, not the heading.) */
  .hero--wide .hero__content {
    position: static;
    display: block;
    padding-block: 1.75rem 0.5rem;
  }
}

/* Services hero only: headline block + a second, italic intro column,
   both placed on a 100-column grid so each can be pinned to the exact
   percentage of the photo's width where the plain wall sits (measured
   from the source photo — see images/README.md). Grid auto-placement
   puts both items in the same row since neither sets grid-row. */
.hero__content--split {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
  align-items: center;
}
.hero__content--split .hero__text {
  grid-column: 30 / 58;
  margin-left: 0;
}
.hero__intro { grid-column: 64 / 94; }
.hero__intro-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-ink);
  max-width: 28ch;
}
.hero__intro-body {
  margin-top: 0.85rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 42ch;
}
@media (max-width: 760px) {
  .hero__content--split { grid-template-columns: 1fr; }
  .hero__content--split .hero__text { grid-column: 1; margin-left: 0; max-width: none; }
  .hero__intro { display: none; }
}
/* The standalone mobile intro section carries the same copy as
   .hero__intro once the hero is too short to show both text blocks —
   shown only under that same 760px breakpoint. */
#services-intro { display: none; }
@media (max-width: 760px) {
  #services-intro { display: block; }
}

/* -------------------------------------------------------------------------
   HERO — CONTACT
   Full-bleed, like the About/Services heroes, but with a single text block
   (eyebrow, rule, heading, body) anchored to the right side of the photo
   rather than split across two positions. Photo is cover-cropped to a
   wide-banner ratio (unlike the Services hero, which shows its photo
   completely uncropped by design) since this photo was never that wide to
   begin with.
   ------------------------------------------------------------------------- */
.hero--contact { aspect-ratio: 2.7 / 1; }
.hero--contact .hero__photo img { object-position: 50% 50%; }
@media (max-width: 760px) {
  .hero--contact { aspect-ratio: 4 / 5; }
}
@media (max-width: 500px) {
  .hero--contact { aspect-ratio: 3 / 4; }
}
.hero--contact .hero__content {
  display: flex;
  justify-content: flex-end;
}
/* This photo's plant branches spread wide enough that no crop keeps them
   clear of a right-side text column at every viewport width — rather
   than cropping the photo down to something unrecognizable to chase that,
   the text sits on its own soft panel so it stays legible regardless. */
.hero__contact-text {
  max-width: 26rem;
  background: rgba(237, 234, 227, 0.85);
  padding: 1.75rem 2rem;
  border-radius: var(--radius-md);
}
.hero__contact-text .lead { margin-top: 1rem; color: var(--color-ink-soft); }
@media (max-width: 760px) {
  .hero__contact-text { max-width: 22rem; }
}

/* -------------------------------------------------------------------------
   EDITORIAL PORTRAIT (About page — the black-and-white portrait only)
   ------------------------------------------------------------------------- */
.editorial-portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.editorial-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  /* Source file is genuinely black-and-white; a light warm grade keeps it
     from reading as a jarring format switch against the warm palette. */
  filter: sepia(18%) saturate(65%) brightness(1.03) contrast(1.02);
}

/* Portrait + copy row (About intro): portrait left, text right. */
.portrait-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
}
@media (max-width: 760px) {
  .portrait-row { grid-template-columns: minmax(0, 1fr); }
}
.portrait-row__photo { max-width: 26rem; }
@media (max-width: 760px) {
  .portrait-row__photo { max-width: none; }
}

/* -------------------------------------------------------------------------
   FIGURE fallback state (shown if an image file is missing — disappears
   once the real photo is placed at the path referenced in the <img src>)
   ------------------------------------------------------------------------- */
figure { margin: 0; }
.img-slot { position: relative; background: var(--color-paper); }

/* -------------------------------------------------------------------------
   COMPONENTS: SIGNATURE + CREDENTIAL LINE (About)
   ------------------------------------------------------------------------- */
.signature {
  display: block;
  width: clamp(9rem, 8rem + 3vw, 11rem);
  height: auto;
  margin-top: 1.5rem;
  color: var(--color-ink);
}
.credential-line {
  margin-top: 0.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* -------------------------------------------------------------------------
   COMPONENTS: NUMBERED ITEM GRID (About — "What guides my work")
   Number + title sit inline on one line, a short rule beneath, then body
   copy. The 3x2 grid gets thin dividers between columns and between the
   two rows on desktop; both are dropped once the grid stacks to fewer
   columns (see the matching breakpoints on .item-grid itself).
   ------------------------------------------------------------------------- */
.guide-item__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.guide-item__num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
}
.guide-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--color-ink);
}
.guide-item__rule {
  display: block;
  width: 2rem;
  height: 1px;
  margin-top: 0.6rem;
  background: var(--color-line);
}
.guide-item__body {
  margin-top: 0.7rem;
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
}

.item-grid--divided .guide-item { padding-bottom: 1.5rem; }
@media (min-width: 861px) {
  .item-grid--divided .guide-item:nth-child(3n+2),
  .item-grid--divided .guide-item:nth-child(3n) {
    border-left: 1px solid var(--color-line);
    padding-left: 1.75rem;
  }
  .item-grid--divided .guide-item:nth-child(n+4) {
    border-top: 1px solid var(--color-line);
    padding-top: 1.5rem;
  }
}
@media (max-width: 860px) and (min-width: 561px) {
  .item-grid--divided .guide-item:nth-child(2n) {
    border-left: 1px solid var(--color-line);
    padding-left: 1.75rem;
  }
  .item-grid--divided .guide-item:nth-child(n+3) {
    border-top: 1px solid var(--color-line);
    padding-top: 1.5rem;
  }
}
@media (max-width: 560px) {
  .item-grid--divided .guide-item {
    border-bottom: 1px solid var(--color-line);
  }
  .item-grid--divided .guide-item:last-child { border-bottom: none; padding-bottom: 0; }
}

/* -------------------------------------------------------------------------
   COMPONENTS: CREDENTIALS BOX (About — "A broad lens")
   ------------------------------------------------------------------------- */
.credentials-box__heading {
  margin-bottom: 1.1rem;
}
.credentials-box ul { display: flex; flex-direction: column; }
.credentials-box li {
  padding-block: 0.7rem;
  border-top: 1px solid var(--color-line-soft);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.credentials-box li:first-child { border-top: none; padding-top: 0; }

/* -------------------------------------------------------------------------
   COMPONENTS: QUOTE BAND (closing band — About + Services)
   ------------------------------------------------------------------------- */
.quote-band {
  background: var(--color-paper);
  padding-block: var(--space-block);
  text-align: center;
}
.quote-band blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.4;
  max-width: 38ch;
  margin-inline: auto;
  color: var(--color-ink);
}

/* -------------------------------------------------------------------------
   COMPONENTS: SERVICE ROWS (Services page — 01/02/03)
   Each row is full-bleed: text content padded to align with the rest of
   the page, a photo bleeding to the outer viewport edge, alternating
   sides. Photo and content stretch to match each other's height (grid's
   default align-items:stretch) — the row's height is however tall its
   own text content naturally is, and the image is cover-cropped to fill
   that space. (The hero photo above this section is handled differently
   — see .hero--wide — and is never cropped.)
   ------------------------------------------------------------------------- */
.svc-rows { border-top: 1px solid var(--color-line); }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(14rem, 26vw, 22rem);
  border-bottom: 1px solid var(--color-line);
}
.svc-row--image-left { grid-template-columns: clamp(14rem, 26vw, 22rem) minmax(0, 1fr); }
.svc-row--image-left .svc-row__content { order: 2; }
.svc-row--image-left .svc-row__image { order: 1; }

.svc-row__content {
  padding: var(--space-block) clamp(1.5rem, 4vw, 3rem);
}
.svc-row__image { position: relative; overflow: hidden; }
.svc-row__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svc-row__head {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
.svc-row__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
  line-height: 1;
  color: var(--color-latte);
  flex-shrink: 0;
}
.svc-row__divider {
  display: block;
  width: 1px;
  align-self: stretch;
  min-height: 2.25rem;
  background: var(--color-line);
  flex-shrink: 0;
}
.svc-row__title { font-size: var(--fs-h3); }
.svc-row__subhead {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--color-ink-soft);
  max-width: 42ch;
}
.svc-row__body { margin-top: 1.25rem; max-width: 60ch; }
.svc-row__body p { color: var(--color-ink-soft); }

.svc-row--dark {
  background: var(--color-ink);
  color: var(--color-linen);
  border-bottom: none;
}
.svc-row--dark .svc-row__title { color: var(--color-linen); }
.svc-row--dark .svc-row__num { color: var(--color-linen); }
.svc-row--dark .svc-row__divider { background: rgba(237, 234, 227, 0.3); }
.svc-row--dark .svc-row__subhead { color: var(--color-stone); }
.svc-row--dark .svc-row__body p { color: var(--color-stone); }

.svc-row__main {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 1.25rem;
}
.svc-row__main .svc-row__body { margin-top: 0; flex: 1 1 20rem; }
.svc-row__details {
  flex: 0 0 14rem;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  color: var(--color-stone);
}
.svc-row--dark .svc-row__details { border-left-color: rgba(237, 234, 227, 0.3); }
.svc-row__details-label {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-label);
  color: var(--color-linen);
}
.svc-row__details-rule {
  display: block;
  width: 1.5rem;
  height: 1px;
  margin: 0.6rem 0 0.9rem;
  background: currentColor;
  opacity: 0.5;
}
.svc-row__details p + p { margin-top: 0.4rem; }

.often-explored {
  margin-top: 1.5rem;
  font-size: var(--fs-sm);
}
.often-explored__label {
  display: block;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--fs-label);
  color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
}
.often-explored__list { color: var(--color-ink-soft); }

@media (max-width: 760px) {
  .svc-row, .svc-row--image-left {
    grid-template-columns: minmax(0, 1fr);
  }
  .svc-row__image { order: -1; aspect-ratio: 4 / 3; }
  .svc-row--image-left .svc-row__content,
  .svc-row--image-left .svc-row__image { order: unset; }
  .svc-row__main { flex-direction: column; gap: 1.25rem; }
  .svc-row__details {
    border-left: none;
    border-top: 1px solid var(--color-line);
    padding-left: 0;
    padding-top: 1.25rem;
  }
  .svc-row--dark .svc-row__details { border-top-color: rgba(237, 234, 227, 0.3); }
}

/* -------------------------------------------------------------------------
   COMPONENTS: CALLOUT BOX (Services — "You don't need to know which one")
   ------------------------------------------------------------------------- */
.callout-box {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}
.callout-box p { margin-inline: auto; }
.callout-box .btn { margin-top: 1.5rem; }

/* -------------------------------------------------------------------------
   COMPONENTS: JUMP LIST (Services — anchor row down to Details)
   ------------------------------------------------------------------------- */
.jump-list {
  border-top: 1px solid var(--color-line);
  max-width: 40rem;
  margin-inline: auto;
  margin-top: 2rem;
}
.jump-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.jump-list__item:hover { color: var(--color-accent); }

/* -------------------------------------------------------------------------
   COMPONENTS: PLUS ICON — shared by the jump list and the Details accordion
   ------------------------------------------------------------------------- */
.plus-icon {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: var(--color-sage);
  transition: transform var(--dur-fast) var(--ease-out);
}
.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.plus-icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.plus-icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }

/* -------------------------------------------------------------------------
   COMPONENTS: THE DETAILS — numbered FAQ categories, native <details>
   Category level (01–04) numbers via a CSS counter; each category holds a
   plain stack of question-level <details> (no numbers, just a plus icon).
   Native <details>/<summary> means a browser will automatically open a
   closed one when it's the target of a same-page link (e.g. the jump list
   above), with no extra JS required.
   ------------------------------------------------------------------------- */
.detail-categories { counter-reset: detail-cat; border-top: 1px solid var(--color-line); }
.detail-category { counter-increment: detail-cat; border-bottom: 1px solid var(--color-line); }
.detail-category > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-block: 1.75rem;
}
.detail-category > summary::-webkit-details-marker,
.detail-category > summary::marker { display: none; content: ""; }
.detail-category__num {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  flex-shrink: 0;
}
.detail-category__num::before { content: counter(detail-cat, decimal-leading-zero) "."; }
.detail-category__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
}
.detail-category[open] > summary .plus-icon { transform: rotate(45deg); }
.detail-category__body {
  padding: 0 0 2rem calc(var(--fs-label) * 2.6);
}
@media (max-width: 600px) {
  .detail-category__body { padding-left: 0; }
}

.qa-list { border-top: 1px solid var(--color-line-soft); }
.qa { border-bottom: 1px solid var(--color-line-soft); }
.qa > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.qa > summary::-webkit-details-marker,
.qa > summary::marker { display: none; content: ""; }
.qa[open] > summary .plus-icon { transform: rotate(45deg); }
.qa__answer { padding: 0 0 1.4rem; max-width: 60ch; }
.qa__answer p { color: var(--color-ink-soft); font-size: var(--fs-sm); }
.qa__answer p + p { margin-top: 1em; }

/* -------------------------------------------------------------------------
   CONTACT PAGE — two-column (book a session / get in touch)
   ------------------------------------------------------------------------- */
.contact-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4.5rem);
}
@media (max-width: 760px) {
  .contact-columns { grid-template-columns: minmax(0, 1fr); }
}
/* Number + short rule on one line, heading directly beneath — same idea
   as the "01 —" labels used for the Services offerings, just without the
   inline divider-and-title-on-one-line treatment those use. */
.numbered-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.numbered-label__num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
}
.numbered-label__rule {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--color-line);
}

.icon-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.icon-row + .icon-row { margin-top: 0.6rem; }
.icon-row__icon { flex-shrink: 0; }

.accent-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  margin-top: 1.75rem;
}
.accent-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Only darken the photo when it actually has overlay text that needs the
   contrast help — the contact-page accent photo already has its caption
   baked into the image itself, so no scrim there. */
.accent-photo:has(.accent-photo__text)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(62, 58, 50, 0.65), rgba(62, 58, 50, 0) 60%);
}
.accent-photo__text {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.1rem;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-linen);
}

/* -------------------------------------------------------------------------
   FORMS (contact page)
   ------------------------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-field label {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.form-field .hint {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  font-weight: 400;
}
.form-field input,
.form-field textarea {
  background: var(--color-linen);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  font-size: var(--fs-body);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:hover,
.form-field textarea:hover { border-color: var(--color-latte); }
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-sage);
  outline: none;
}
.form-field input:user-invalid,
.form-field textarea:user-invalid {
  border-color: var(--color-sage);
}
.form-field textarea { resize: vertical; min-height: 8rem; }
.form-note {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  margin-top: 1.25rem;
}
.form-success {
  display: none;
  background: var(--color-linen);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  font-size: var(--fs-sm);
}
.form-success.is-visible { display: block; }

/* -------------------------------------------------------------------------
   COMPONENTS: NOTICE BAND (Contact — crisis/emergency notice)
   ------------------------------------------------------------------------- */
.notice-band {
  background: var(--color-paper);
  border-top: 1px solid var(--color-stone);
  border-bottom: 1px solid var(--color-stone);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.notice-band__inner {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  max-width: 46rem;
  margin-inline: auto;
}
.notice-band__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-sage);
  margin-top: 0.15rem;
}
.notice-band__label {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-label);
  color: var(--color-ink);
}
.notice-band__body {
  margin-top: 0.4rem;
  color: var(--color-ink-soft);
}

/* -------------------------------------------------------------------------
   FOOTER — site-wide, three-part row
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-linen);
  padding-block: 2.25rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.site-footer__brand {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-linen);
}
.site-footer__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--color-stone);
}
.site-footer__loc {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone);
}
@media (max-width: 700px) {
  .site-footer__inner { flex-direction: column; text-align: center; }
}

/* -------------------------------------------------------------------------
   MOBILE NAV
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: block; z-index: 110; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 82vw);
    height: 100svh;
    background: var(--color-canvas);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem var(--container-pad);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: -8px 0 32px rgba(62, 58, 50, 0.18);
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .nav__list a { font-size: 1.25rem; }
}

/* -------------------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}