/*
 * Brand tokens are the contract with docs/brand.md. Two greens, one warm
 * neutral, one peach accent — nothing else. New colours get derived, not added.
 */

:root {
  --luna-ink:        #2D3837;
  --luna-sage:       #495957;
  --luna-sand:       #DDD9D0;
  --luna-peach:      #EEB097;
  --luna-peach-deep: #D9906F;
  --luna-paper:      #FFFFFF;

  /* The pebble's fill on dark grounds — lifted off --luna-sage so it separates
     from the ink footer behind it rather than sinking into it. */
  --luna-mark-pebble-dark: #647875;

  --luna-body:  rgba(73, 89, 87, 0.92);
  --luna-rule:  rgba(73, 89, 87, 0.16);

  /* Tenor Sans has exactly one weight. Hierarchy comes from size, spacing and
     colour — never from a synthesised bold. */
  --font-display: "Tenor Sans", "Optima", "Palatino Linotype", Georgia, serif;
  --font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /*
   * Corners: soft frames, square actions.
   *
   * A pill button is the most generic shape on any site — it reads as a
   * template, not as this brand, and it sits badly under Tenor Sans, which is
   * wide and classical. Squaring it is what makes the type look deliberate.
   * Cards go the other way: at a gentle radius they echo the pebble mark
   * rather than competing with it (the competition is between the pebble and a
   * full capsule, not between the pebble and a soft rectangle).
   *
   * Both are tokens — the whole site's corner language is these two values.
   */
  --radius-frame:  1rem;
  --radius-action: 2px;

  --measure: 34rem;   /* readable line length for body copy */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  /* Two adjacent sections stack their padding, so this is half the visual gap
     between them — 7rem each read as 14rem of nothing between two white blocks. */
  --section: clamp(2.75rem, 6vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--luna-paper);
  color: var(--luna-body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--luna-ink);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1.25em; max-width: var(--measure); }

a { color: var(--luna-ink); text-decoration-color: var(--luna-peach); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--luna-peach-deep); }

img { max-width: 100%; height: auto; display: block; }

/* Visible focus everywhere. Non-negotiable on a site people reach in distress. */
:focus-visible {
  outline: 2px solid var(--luna-peach-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.luna-skip {
  position: absolute; left: -9999px;
  background: var(--luna-ink); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 100;
}
.luna-skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------ layout */

.luna-wrap { width: min(72rem, 100% - var(--gutter) * 2); margin-inline: auto; }

/*
 * The reading column IS the measure. It used to be 46rem wide with paragraphs
 * capped at 34rem inside it — so the text block sat left of the container,
 * which sat centred in the viewport, and the whole page read as misaligned with
 * dead space down the right. Constrain once, here, and let the children fill it.
 */
.luna-narrow { width: min(36rem, 100% - var(--gutter) * 2); margin-inline: auto; }
/*
 * Card grids on a reading page. Wider than the prose column so three cards fit,
 * but close enough that the section heading lands on roughly the same left edge
 * — a grid at the full 72rem made its heading start 150px left of every other
 * heading on the page, which reads as a mistake rather than a rhythm change.
 */
.luna-wrap--tight { width: min(54rem, 100% - var(--gutter) * 2); margin-inline: auto; }

.luna-narrow p,
.luna-narrow .luna-list-check,
.luna-narrow .luna-faq,
.luna-narrow .luna-resources { max-width: none; }
.luna-section { padding-block: var(--section); }
.luna-section--sand { background: var(--luna-sand); }
.luna-section--ink { background: var(--luna-ink); color: rgba(255,255,255,0.86); }
.luna-section--sage { background: var(--luna-sage); color: rgba(255,255,255,0.88); }

.luna-section--ink h1, .luna-section--ink h2, .luna-section--ink h3,
.luna-section--sage h1, .luna-section--sage h2, .luna-section--sage h3 { color: #fff; }
.luna-section--ink a, .luna-section--sage a { color: #fff; }

/*
 * The CTA keeps its ink label on dark grounds. Inheriting the white link colour
 * above put white text on the peach pill — about 1.8:1, unreadable. Buttons opt
 * out of link colour everywhere.
 */
.luna-section--ink .luna-cta,
.luna-section--sage .luna-cta,
.luna-footer .luna-cta { color: var(--luna-ink); }

/* ------------------------------------------------------------------ pebble */

/*
 * The logo is an asymmetric organic blob. It is the brand's one distinctive
 * visual idea, so it recurs as an image mask rather than being decoration
 * bolted on beside the content.
 */
.luna-pebble {
  border-radius: 62% 38% 46% 54% / 54% 47% 53% 46%;
  overflow: hidden;
}
.luna-pebble--alt { border-radius: 44% 56% 63% 37% / 41% 58% 42% 59%; }

.luna-dot {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  background: var(--luna-peach);
  border-radius: 62% 38% 46% 54% / 54% 47% 53% 46%;
  vertical-align: baseline;
}

/* ------------------------------------------------------------------ header */

.luna-banner {
  background: var(--luna-peach);
  color: var(--luna-ink);
  text-align: center;
  padding: 0.6rem var(--gutter);
  font-size: 0.9rem;
  text-wrap: balance;
}
/* Tight side padding and a step down in size so the sentence holds one line
   on a phone instead of wrapping onto two. */
@media (max-width: 46rem) {
  .luna-banner { padding-inline: 0.75rem; font-size: 0.8rem; }
}
@media (max-width: 26rem) {
  .luna-banner { padding-inline: 0.5rem; font-size: 0.74rem; }
}

.luna-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.5rem; flex-wrap: wrap;
}
.luna-logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--luna-ink); text-decoration: none;
}
/* The wordmark IS type — no font-family needed, and no webfont to wait for. */
.luna-logo__mark { width: auto; height: 2.5rem; flex: none; }
.luna-logo__word { width: auto; height: 0.92rem; flex: none; }

@media (max-width: 30rem) {
  .luna-logo__mark { height: 2.1rem; }
  .luna-logo__word { height: 0.78rem; }
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.luna-nav { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------- mobile nav */

.luna-menu-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 0.6rem; margin-right: -0.6rem;
  color: var(--luna-ink);
}

/* Three lines from one element: the bar is the middle, the pseudo-elements
   are the outer two. They rotate into an X rather than swapping to a
   different glyph, so the control reads as one thing changing state. */
.luna-burger,
.luna-burger::before,
.luna-burger::after {
  display: block; width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform 220ms ease, opacity 160ms ease;
}
.luna-burger { position: relative; }
.luna-burger::before,
.luna-burger::after { content: ""; position: absolute; left: 0; }
.luna-burger::before { top: -7px; }
.luna-burger::after  { top: 7px; }

.is-menu-open .luna-burger { background: transparent; }
.is-menu-open .luna-burger::before { transform: translateY(7px) rotate(45deg); }
.is-menu-open .luna-burger::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 59.999rem) {
  .luna-menu-toggle { display: block; }

  .luna-header { padding-block: 1rem; gap: 1rem; }

  /* Gated on .js, like the reveal: without the script the links stay visible
     as a stacked list rather than hiding behind a button that cannot open. */
  .js .luna-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: none;
    border-top: 1px solid var(--luna-rule);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  .js .is-menu-open .luna-nav { display: flex; }

  .luna-nav a {
    padding-block: 0.85rem;
    font-size: 0.95rem;
  }
  /* The growing underline is a pointer affordance; on a stacked touch list it
     reads as a stray rule. */
  .luna-nav a::after { display: none; }

  .luna-nav .luna-cta {
    margin-top: 0.75rem;
    text-align: center;
  }
}
.luna-nav a {
  font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--luna-sage);
}
/* A rule that grows from the left rather than a static underline appearing. */
.luna-nav a {
  position: relative;
  padding-block: 0.25rem;
  transition: color 180ms ease;
}
.luna-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--luna-peach-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.luna-nav a:hover, .luna-nav a:focus-visible,
.luna-nav a[aria-current="page"] { color: var(--luna-ink); }
.luna-nav a:hover::after,
.luna-nav a:focus-visible::after,
.luna-nav a[aria-current="page"]::after { transform: scaleX(1); }
.luna-nav .luna-cta::after { display: none; }

/* -------------------------------------------------------------------- hero */

.luna-hero {
  padding-block: clamp(4.5rem, 13vw, 10rem);
  background: var(--luna-sand);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.luna-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}

/*
 * A scrim, not a wash. The artwork is already mid-dark, so this only has to
 * guarantee text contrast — weighted to the left where the copy sits, so the
 * right side of the image stays legible as an image.
 */
.luna-hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(45,56,55,0.82) 0%, rgba(45,56,55,0.62) 45%, rgba(45,56,55,0.34) 100%);
}
.luna-hero--image, .luna-hero--image h1 { color: #fff; }
.luna-hero--image .luna-lede { color: rgba(255,255,255,0.92); }

.luna-hero__inner { max-width: 46rem; }
.luna-hero h1 { margin-bottom: 0.5em; }
.luna-hero .luna-lede { margin-bottom: 2rem; }

/* ------------------------------------------------------------------- split */

.luna-split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 52rem) {
  .luna-split { grid-template-columns: 1fr; }
  .luna-portrait { max-width: 20rem; }
}
.luna-portrait { margin: 0; }
.luna-portrait img { width: 100%; }
.luna-split__body > *:first-child { margin-top: 0; }

/* --------------------------------------------------------------------- cta */

.luna-cta {
  display: inline-block;
  background: var(--luna-peach);
  color: var(--luna-ink);
  padding: 0.85rem 1.75rem;
  text-decoration: none;
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--radius-action);
}
/*
 * Every interactive element gets the same two-part response — a colour shift
 * and a 1px lift — so the site feels like one thing. Focus-visible mirrors
 * hover throughout: a keyboard user should get the same affordance as a mouse.
 */
.luna-cta {
  transition: background 180ms ease, box-shadow 180ms ease,
              transform 180ms ease, color 180ms ease;
}
.luna-cta:hover,
.luna-cta:focus-visible {
  background: var(--luna-peach-deep);
  transform: translateY(-1px);
}
.luna-cta:active { transform: translateY(0); }

/*
 * Secondary. The ring and label darken together and a faint wash comes up
 * behind — tinted from the ink token rather than a fixed colour, so it works on
 * white, on sand and on the peach-adjacent grounds alike.
 */
.luna-cta--ghost {
  background: transparent;
  color: var(--luna-sage);
  box-shadow: inset 0 0 0 1px var(--luna-rule);
}
.luna-cta--ghost:hover,
.luna-cta--ghost:focus-visible {
  background: rgba(45, 56, 55, 0.05);
  color: var(--luna-ink);
  box-shadow: inset 0 0 0 1px var(--luna-peach-deep);
  transform: translateY(-1px);
}

.luna-section--ink .luna-cta--ghost,
.luna-section--sage .luna-cta--ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34);
}
.luna-section--ink .luna-cta--ghost:hover,
.luna-section--sage .luna-cta--ghost:hover,
.luna-section--ink .luna-cta--ghost:focus-visible,
.luna-section--sage .luna-cta--ghost:focus-visible {
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px var(--luna-peach);
}

/* --------------------------------------------------------------- cta band */

/*
 * The closing "Interested in working together?" band. Centred, matching her
 * original site — left-aligned in a full-width band left a large empty right
 * side and read as an unfinished section rather than a close.
 */
.luna-cta-band { padding-block: clamp(3rem, 6.5vw, 5rem); text-align: center; }
.luna-cta-band .luna-narrow { max-width: 42rem; }
.luna-cta-band h2 { margin-bottom: 0.6em; }
.luna-cta-band p { margin-inline: auto; }
.luna-cta-band p:last-child { margin-bottom: 0; margin-top: 2rem; }

/* -------------------------------------------------------------------- mark */

/*
 * The logo's pieces are coloured independently, because the mark needs two
 * different treatments to stay legible.
 *
 * On light grounds it is the artwork as drawn: peach pebble, ink moon.
 *
 * On dark grounds the whole line drawing goes white — moon included — and the
 * pebble becomes the lighter green instead of peach. Keeping the peach there
 * and whitening the moon puts white line art on peach at about 1.8:1 and the
 * crescent disappears; keeping the moon ink works but reads heavy. Swapping the
 * pebble is the cleaner answer: the mark becomes a single white line drawing
 * over a tinted shape, which is how it wants to behave on a dark ground.
 */
.luna-mark__pebble { fill: var(--luna-peach); }
.luna-mark__moon   { fill: var(--luna-ink); }
.luna-mark__hand,
.luna-mark__word   { fill: currentColor; }

.luna-footer .luna-mark__pebble,
.luna-section--ink .luna-mark__pebble,
.luna-section--sage .luna-mark__pebble { fill: var(--luna-mark-pebble-dark); }

.luna-footer .luna-mark__moon,
.luna-section--ink .luna-mark__moon,
.luna-section--sage .luna-mark__moon { fill: currentColor; }

/* ------------------------------------------------------------------- icons */

/*
 * The drawn icon set. Inlined SVG inheriting currentColor, so one file serves
 * white-on-ink, ink-on-sand and the peach hover state.
 */
.luna-card__icon {
  width: 2.5rem; height: 2.5rem;
  display: block; margin-bottom: 1rem;
  color: var(--luna-sage);
  transition: color 200ms ease, transform 200ms ease;
}
.luna-card:hover .luna-card__icon { color: var(--luna-peach-deep); transform: translateY(-2px); }

.luna-page-icon {
  width: 3.75rem; height: 3.75rem;
  display: block; margin-bottom: 1.5rem;
  color: var(--luna-peach-deep);
}

.luna-section--ink .luna-card__icon,
.luna-section--ink .luna-page-icon { color: rgba(255,255,255,0.9); }

/* ----------------------------------------------------------------- actions */

.luna-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  max-width: none;
}

.luna-profile-link {
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--luna-sage);
  text-decoration-color: var(--luna-peach);
  text-underline-offset: 0.35em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.luna-profile-link:hover,
.luna-profile-link:focus-visible {
  color: var(--luna-ink);
  text-decoration-color: var(--luna-peach-deep);
}

/* ------------------------------------------------------------------- cards */

.luna-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding: 0; margin: 0; list-style: none;
}
.luna-card {
  background: var(--luna-paper);
  padding: 1.75rem;
  box-shadow: inset 0 0 0 1px var(--luna-rule);
  border-radius: var(--radius-frame);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.luna-card:hover,
.luna-card:focus-within {
  box-shadow: inset 0 0 0 1px var(--luna-peach-deep),
              0 6px 22px rgba(45, 56, 55, 0.08);
  transform: translateY(-2px);
}
.luna-card h3 a { transition: color 180ms ease; }
.luna-card:hover h3 a { color: var(--luna-peach-deep); }
.luna-card h3 { margin-bottom: 0.4rem; }
.luna-card p { font-size: 0.95rem; margin-bottom: 0; }
.luna-card a { text-decoration: none; }
.luna-card a::after { content: ""; position: absolute; inset: 0; }
.luna-card { position: relative; }

/* --------------------------------------------------------------------- faq */

.luna-faq {
  border-top: 1px solid var(--luna-rule);
  max-width: var(--measure);
  /* The list ends on a rule, so anything following it — the "All questions"
     button, the crisis box — needs its own clearance or it reads as another
     row of the accordion. */
  margin-bottom: 2.25rem;
}
.luna-faq details { border-bottom: 1px solid var(--luna-rule); }
.luna-faq summary {
  cursor: pointer; padding: 1.15rem 2rem 1.15rem 0;
  font-family: var(--font-display); color: var(--luna-ink);
  font-size: 1.05rem; list-style: none; position: relative;
  transition: color 180ms ease;
}
.luna-faq summary:hover { color: var(--luna-peach-deep); }
.luna-faq summary::after { transition: transform 200ms ease, color 180ms ease; }
.luna-faq summary:hover::after { transform: translateY(-50%) scale(1.15); }
.luna-faq summary::-webkit-details-marker { display: none; }
.luna-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); color: var(--luna-peach-deep); font-size: 1.3rem;
}
.luna-faq details[open] summary::after { content: "\2013"; }
.luna-faq details > *:not(summary) { padding-bottom: 1rem; }

/* --------------------------------------------------------------- resources */

.luna-resources {
  background: var(--luna-sand);
  padding: 1.75rem;
  border-radius: var(--radius-frame);
  margin-block: 2rem;
}
.luna-resources h3 { font-size: 1.1rem; }
.luna-resources ul { padding-left: 1.1rem; margin: 0; }
.luna-resources li { margin-bottom: 0.65rem; }
.luna-resources a { transition: color 180ms ease; }
.luna-resources a:hover { color: var(--luna-peach-deep); }

/* ------------------------------------------------------------------ footer */

/*
 * Tighter than a full --section: the sage CTA band directly above already
 * gives the page its closing breath, so the footer only needs enough room to
 * be legible. The previous version ran a full section of padding on top of
 * that and read as dead space.
 */
.luna-footer {
  background: var(--luna-ink);
  color: rgba(255,255,255,0.78);
  padding-block: clamp(2.75rem, 5vw, 4rem) 2rem;
}
.luna-footer a {
  color: rgba(255,255,255,0.92);
  text-decoration-color: rgba(255,255,255,0.35);
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.luna-footer a:hover,
.luna-footer a:focus-visible {
  color: var(--luna-peach);
  text-decoration-color: var(--luna-peach);
}
.luna-footer .luna-cta:hover { color: var(--luna-ink); }

.luna-legal__logo svg { transition: opacity 200ms ease; }
.luna-legal__logo:hover svg { opacity: 1; }
.luna-footer h4 {
  color: #fff; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-family: var(--font-body);
  margin-bottom: 0.9rem;
}
.luna-footer ul { list-style: none; padding: 0; margin: 0; }
.luna-footer li { margin-bottom: 0.35rem; font-size: 0.92rem; line-height: 1.5; }

/*
 * Links break only where the markup says they may — the footer email carries a
 * <wbr> after its @. `anywhere` was the first fix for the email overflowing its
 * column, but it let the break land mid-word, which reads like a typo.
 */
.luna-footer a { overflow-wrap: normal; word-break: normal; }
.luna-footer-cols {
  display: grid; gap: 2rem 2.25rem;
  /* 11.5rem keeps a column wide enough for "lunapsychcounseling.com" (~177px)
     at every width where the footer still shows five columns. */
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}

.luna-legal {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem 3rem; flex-wrap: wrap;
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.78rem; color: rgba(255,255,255,0.58);
}
.luna-legal__text { flex: 1 1 26rem; }
.luna-legal p { max-width: 46rem; margin-bottom: 0.5rem; }
.luna-legal p:last-child { margin-bottom: 0; }

/* Quieter than the legal text above it — a credit, not a claim on the page. */
.luna-credit { margin-top: 1rem; font-size: 0.74rem; }
.luna-credit a {
  color: rgba(255,255,255,0.5);
  text-decoration-color: rgba(255,255,255,0.2);
}
.luna-credit a:hover,
.luna-credit a:focus-visible { color: var(--luna-peach); }

/* The lockup sits bottom-right under the rule — a sign-off, not a headline. */
.luna-legal__logo { flex: none; display: block; line-height: 0; }
.luna-legal__logo svg { width: auto; height: 5rem; color: #fff; opacity: 0.92; }

/*
 * Touch targets. Links inside running prose are exempt (WCAG 2.5.8 says so, and
 * padding them would wreck the line rhythm) — this is for the standalone lists
 * where a miss means tapping the wrong destination.
 */
@media (max-width: 46rem) {
  .luna-footer li { margin-bottom: 0.15rem; }
  .luna-footer li a,
  .luna-legal__logo,
  .luna-profile-link {
    display: inline-block;
    padding-block: 0.62rem;
  }
  .luna-crumbs { padding-block: 1rem; }
  .luna-crumbs a { display: inline-block; padding-block: 0.35rem; }
  .luna-resources li { margin-bottom: 1rem; }
  .luna-faq summary { padding-block: 1.35rem; }
}

@media (max-width: 46rem) {
  .luna-legal { flex-direction: column; align-items: flex-start; }
  /* flex-basis follows the main axis: once this column-stacks, `flex: 1 1 26rem`
     stops meaning "at least 26rem wide" and starts meaning "26rem tall",
     which left ~400px of void under the copyright line. */
  .luna-legal__text { flex: 0 1 auto; }
  /* The lockup is a desktop sign-off in the corner. Stacked under the legal
     text on a phone it is just a second logo with nothing to balance, so the
     footer ends on the copyright line. */
  .luna-legal__logo { display: none; }
}

/* --------------------------------------------------------------- utilities */

.luna-eyebrow {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--luna-peach-deep); margin-bottom: 0.9rem; font-family: var(--font-body);
}
.luna-lede { font-size: 1.2rem; line-height: 1.65; color: var(--luna-sage); }
.luna-list-check { list-style: none; padding: 0; max-width: var(--measure); }
.luna-list-check li { padding-left: 1.6rem; position: relative; margin-bottom: 0.6rem; }
.luna-list-check li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 0.55rem; height: 0.55rem; background: var(--luna-peach);
  border-radius: 62% 38% 46% 54% / 54% 47% 53% 46%;
}
.luna-crumbs { font-size: 0.85rem; padding-block: 1.25rem; color: var(--luna-sage); }
.luna-crumbs a { text-decoration: none; }

/* ------------------------------------------------------------------ reveal */

/*
 * Scroll reveal. Deliberately restrained — a short rise and a fade, never a
 * slide-in from the side or a scale. This is a therapy practice: motion should
 * read as calm, not as a product launch.
 *
 * The `.js` guard matters. Without JS the class never lands and everything
 * stays visible, so a script failure can never leave the page blank.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* The hero is above the fold — fade it in on load rather than on scroll. */
.js .luna-hero [data-reveal] { transition-duration: 900ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Reveal targets must end up visible, not merely un-animated. */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}