/* ==========================================================================
   Speak Medical Aesthetics — brand-guide restyle (2026-10-06)
   Palette from the Speak brand guide: #000000 black, #FFFFFF white, #F7F4E9 cream.
   Black type on white or cream only. Montserrat throughout (Medium for headings, eyebrows and
   buttons); the Lobster script appears only inside the logo artwork. Mobile-first.
   ========================================================================== */

:root {
  /* refresh-v2 palette (Miry's spec, 2026-10-17) */
  --ivory: #F2EFE8;
  --taupe: #D1C4B5;
  --sage: #9EA697;
  --olive: #39433D;
  --charcoal: #292B2A;
  /* surfaces */
  --paper: var(--ivory);
  --paper-2: #F8F6F1;
  --card: #F8F6F1;
  --cream-deep: #E6DED3;      /* taupe at low strength for tints */
  /* text */
  --ink: var(--charcoal);
  --ink-soft: var(--olive);
  --grey: #4A4D4A;            /* about 7.9:1 on ivory */
  --grey-wash: #4A4D4A;
  --paper-on-ink: #F8F6F1;
  --muted-on-ink: #E6DED3;
  /* accents (tokens read by the motion layer) */
  --gold: var(--olive);
  --blush: var(--ivory);
  --lilac: #E3E6DF;
  --lilac-deep: var(--sage);
  --blush-light: #F8F6F1;
  --blush-rgb: 242 239 232;
  --lilac-rgb: 158 166 151;
  --wash-gradient: var(--ivory);   /* spec: no gradients */
  /* lines */
  --hairline: #DCD3C7;
  --rule-strong: rgba(41, 43, 42, 0.3);

  /* type: editorial serif headlines, clean sans body */
  --font-serif: var(--font-sans);
  --font-sans: "Montserrat", "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-cond: var(--font-sans);
  --font-body: var(--font-sans);
  --fs-h1: clamp(2.625rem, 1.7rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.5rem + 1.9vw, 3.125rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);

  --wrap: 78rem;
  --gutter: 1rem;
  --header-h: 4rem;
  --bar-h: 4.25rem;          /* fixed bottom Book bar; 0 from 64em where Book is back in the header */
  --hdr-spacer: 0px;         /* desktop header: balances the Book pill so the brand is page-centred */
  --pill: 25px;
  --radius: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 40em) {
  :root { --gutter: 1.5rem; }
}
@media (min-width: 64em) {
  :root { --gutter: 2.5rem; --header-h: 4.5rem; }
}
@media (min-width: 80em) {
  :root { --bar-h: 0px; }
}
@media (min-width: 67em) {
  /* Book pill minus the width the left link group exceeds the right by: measured, brand lands within ±2px of centre */
  :root { --hdr-spacer: 7rem; }
}
@media (min-width: 80em) {
  :root { --hdr-spacer: 8rem; }   /* nav labels step up to 15px here, widening the left group */
}

/* Local fallbacks sized toward the web fonts so the swap moves little. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 112%;
  ascent-override: 86%;
  descent-override: 22%;
}


/* ---- reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 0.75rem); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  padding-bottom: var(--bar-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure, blockquote, address { margin: 0; }
h1, h2, h3, p, li, figcaption { overflow-wrap: break-word; }   /* a word that cannot fit breaks instead of widening the page (text scaling) */
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, picture { display: block; max-width: 100%; }
/* The removed preview wrapper forced [hidden] and img max-width. img is covered above;
   [hidden] must beat any author display (the hero canvas uses the attribute). */
[hidden]:not([hidden=until-found i]) { display: none !important; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
.icon { width: 1em; height: 1em; flex: 0 0 auto; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
/* The skip link's target is programmatic focus only (tabindex="-1"), not a control: no ring, which
   otherwise draws a page-wide hairline above the footer while <main> holds focus. */
#main:focus, #main:focus-visible { outline: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- type ------------------------------------------------------------- */
h1, h2, h3, .quote blockquote p {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}
/* Accents stay in Montserrat: a lighter weight, not a second typeface (Lobster lives only in the logo artwork) */
.tone, .step-num, .pull-line, .signature, .photo-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
}
h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
  text-wrap: balance;
}
h2 .tone, h1 .tone { color: var(--ink); font-weight: 400; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
.intro {
  color: var(--grey);
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 58ch;
  margin-top: 1.25rem;
}

/* Eyebrows: the BRIEF's own section names, uppercase condensed with side hairlines (Skinney device). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before, .eyebrow::after { content: ""; flex: 0 0 2.5rem; height: 1px; background: var(--rule-strong); }
.centered .eyebrow, .wash-inner .eyebrow { justify-content: center; }
.eyebrow-left::after { display: none; }
/* The H1 uses the eyebrow classes so the big line can stay a paragraph. Cap the
   width so the longer phrase wraps inside the column instead of overflowing. */
.hero-copy .hero-eyebrow { max-width: 100%; }
.hero-eyebrow > span { min-width: 0; }

/* ---- placeholder tokens ------------------------------------------------ */
[data-token] {
  background: rgba(0, 0, 0, 0.05);
  color: var(--grey-wash);
  border-bottom: 1px dotted var(--ink);
  border-radius: 2px;
  padding-inline: 0.1em;
  margin-inline: -0.1em;   /* zero net advance: the following apostrophe or period stays attached (copy-2) */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
h1 [data-token], h2 [data-token] { color: inherit; }

/* ---- buttons (pills) --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  max-width: 100%;           /* a wrapped label at 200% text scaling widens the pill no further than its column */
  padding: 0.9375rem 1.5625rem;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn .icon { width: 1.125em; height: 1.125em; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--paper-on-ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
/* translucent white pill for photos and washes; border ≥ 3:1 against its surface (a11y-5) */
.btn-glass { background: rgba(255, 255, 255, 0.6); color: var(--ink); border-color: var(--ink); }
.btn-glass:hover { background: var(--card); }
.btn-paper { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-paper:hover { background: var(--ink); color: var(--paper-on-ink); }

/* ---- skip link --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper-on-ink);
  border-radius: var(--pill);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

/* ---- header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  column-gap: 0.5rem;
  min-height: var(--header-h);
}
.menu-toggle {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -0.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
}
.menu-toggle .icon { width: 1.5rem; height: 1.5rem; }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.brand {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  max-width: 100%;
  padding-inline: 0.5rem;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.brand > span { min-width: 0; }
.brand [data-token] { color: var(--ink); background: transparent; border-bottom-color: var(--rule-strong); }
.brand-logo { height: 2.125rem; width: auto; max-width: 100%; }

.btn-header { display: none; }

/* mobile nav panel (the <ul> is the disclosure; nav itself stays in flow) */
.nav-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: 0.5rem var(--gutter) 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.3);
}
.nav-list.is-open { display: flex; }
.nav-list a {
  display: block;
  padding: 0.75rem 0;
  min-height: 3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.nav-list li:last-child a { border-bottom: 0; }
/* Without JS the disclosure cannot open, so the links render as a plain list under the bar (code-3). */
html:not(.js) .menu-toggle { display: none; }
html:not(.js) .site-nav { grid-column: 1 / -1; grid-row: 2; }
html:not(.js) .nav-list { position: static; display: flex; box-shadow: none; padding-inline: 0; }

/* Fixed bottom Book bar (phones and tablets) */
.book-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}
.book-bar .btn { width: 100%; }
.menu-open .book-bar { display: none; }

/* Desktop header: links split 3 | 3 around the centred brand, Book far right. One nav, one list —
   subgrid places the list items on the header's own tracks so list semantics stay intact.
   Tracks: spacer · 3 links · gap · brand · gap · 3 links · Book. */
@media (min-width: 80em) {
  .header-inner {
    grid-template-columns: var(--hdr-spacer) repeat(3, max-content) minmax(1.25rem, 1fr) max-content minmax(1.25rem, 1fr) repeat(3, max-content) max-content;
    column-gap: 0.25rem;
  }
  .menu-toggle { display: none; }
  .brand { grid-column: 6; grid-row: 1; font-size: 1.25rem; padding-inline: 0.75rem; }
  .brand-logo { height: 2.5rem; }
  .site-nav { grid-column: 2 / 11; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: center; }
  .nav-list {
    position: static;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-list li:nth-child(1) { grid-column: 1; }
  .nav-list li:nth-child(2) { grid-column: 2; }
  .nav-list li:nth-child(3) { grid-column: 3; }
  .nav-list li:nth-child(4) { grid-column: 7; }
  .nav-list li:nth-child(5) { grid-column: 8; }
  .nav-list li:nth-child(6) { grid-column: 9; }
  .nav-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;               /* every label ≥ 44px wide (a11y-4) */
    padding: 0.75rem 0.625rem;
    border: 0;
    font-family: var(--font-cond);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: underline transparent;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 160ms var(--ease);
  }
  .nav-list a:hover { text-decoration-color: var(--ink); }
  .btn-header { display: inline-flex; grid-column: 11; grid-row: 1; justify-self: end; }
  .book-bar { display: none; }
  /* the desktop header needs no JS, so the no-JS overrides step back here */
  html:not(.js) .site-nav { grid-column: 2 / 11; grid-row: 1; }
  html:not(.js) .nav-list { display: grid; }

  /* Browsers without subgrid (Chrome/Edge < 117, Safari < 16): brand left, links centred in one row,
     Book right. Lives inside the same 64em block as the subgrid layout it replaces, and resets the
     phone panel's flex-direction: column, so the links never stack inside the header. */
  @supports not (grid-template-columns: subgrid) {
    .header-inner { display: flex; gap: 1.5rem; }
    .brand { flex: 0 1 auto; }
    .site-nav { flex: 1 1 auto; display: block; }
    .nav-list, html:not(.js) .nav-list { display: flex; flex-direction: row; justify-content: center; gap: 0.25rem; }
    .btn-header { flex: 0 0 auto; }
  }
}
@media (min-width: 80em) {
  .nav-list a { font-size: 0.8125rem; }
}

/* ---- hero -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(calc(100vh - var(--header-h) - var(--bar-h)), 54rem);    /* engines without svh keep this line */
  min-height: min(calc(100svh - var(--header-h) - var(--bar-h)), 54rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--wash-gradient);
}
.hero-media, .hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-media { z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-canvas { z-index: 1; pointer-events: none; }
.hero::after {
  /* film grain over the wash */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("assets/img/placeholders/grain.png") repeat;
  opacity: 0.35;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 3vw, 2.5rem);
}
.hero-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.hero-title {
  max-width: 11em;
  text-wrap: pretty;   /* not balance: balance breaks 'Physician-/led' at the hyphen on 360 */
  /* was the h1; keep the same type so the hero line doesn't change when the element is a p */
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* Text-only scaling (Android 200%): the root rem doubles but the viewport does not, and 'around&nbsp;you.'
   cannot break, so cap the h1 at 14vw. A no-op at 100% (36px vs 55px at 390); at 200% it keeps the last
   line inside the gutter at 320-390 with the same line map instead of clipping the period. */
.hero-title { font-size: min(var(--fs-h1), 14vw); }
.hero-sub { max-width: 36rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; width: 100%; max-width: 30rem; }
.hero-actions .btn { flex: 1 1 auto; }

.trust {
  font-size: 0.875rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.trust li { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding-block: 0.5rem; }
.trust li + li { border-top: 1px solid var(--rule-strong); }
.trust .mark { width: 1rem; height: 1rem; }

@media (max-width: 24.99em) {
  .hero-actions .btn, .final-actions .btn { flex-basis: 100%; }
}
@media (min-width: 64em) {
  .hero-copy {
    align-items: flex-start;
    text-align: left;
    max-width: 55%;
    padding-right: 2rem;
  }
  .hero-actions { justify-content: flex-start; max-width: none; }
  .hero-actions .btn { flex: 0 0 auto; }
  .trust { flex-direction: row; align-items: center; gap: 0; }
  .trust li { padding-block: 0.25rem; padding-inline: 1.5rem; min-height: 3rem; white-space: nowrap; }
  .trust li:first-child { padding-left: 0; }
  .trust li + li { border-top: 0; border-left: 1px solid var(--rule-strong); }
}

/* Footer legal links: one unbreakable run, so a separator never starts or ends a line (visual-3, then
   reference-6). On phones the run is its own flush-left line and its leading dot is dropped. */
.small-print .legal { white-space: nowrap; }
@media (max-width: 39.99em) {
  .small-print .legal { display: block; }
  .small-print .legal > .dot:first-child { display: none; }
}
@media (min-width: 64em) {
  /* keeps 'Physician-led' whole in the desktop hero; below 64em the word may break at its hyphen rather than widen the column */
  .hero-title .nowrap { white-space: nowrap; }
}

/* ---- section rhythm ---------------------------------------------------- */
/* Single-column layout grids never widen for an oversized word (text scaling, long tokens): the word clips inside its section instead. */
.wash-inner, .ask-inner, .profile, .split, .steps, .quotes, .footer-grid, .footer-bottom, .hero-inner { grid-template-columns: minmax(0, 1fr); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-tight { padding-top: 0; }
.section-head { max-width: 46rem; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered .intro { margin-inline: auto; }
.section-cta { margin-top: clamp(2rem, 5vw, 3rem); display: flex; justify-content: center; }

/* ---- 3. treatments ----------------------------------------------------- */
.cards {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* minmax(0) so long words never widen the column (a11y-1) */
  gap: 1.25rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-media { aspect-ratio: 4 / 3; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.75rem; padding: 1.5rem; }
.card h3 { font-size: clamp(1.1875rem, 1.07rem + 0.4vw, 1.3125rem); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }   /* balance: 'Hyperpigmentation / & Dark Spots', never a one-word last line */
.card p { flex: 1 1 auto; color: var(--grey); line-height: 1.55; }
.card-cta { background: var(--cream-deep); color: var(--ink); border-color: var(--ink); }
.card-cta .card-body { padding: 2rem 1.5rem; justify-content: center; }
.card-cta p { flex: 0 0 auto; color: var(--grey); }   /* no flex-grow here, so the body's justify-content: center actually centres the group */
.card-cta .btn { align-self: flex-start; margin-top: 0.5rem; }


.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.arrow-link .arrow { width: 1.125em; height: 1.125em; transition: transform 160ms var(--ease); }
.arrow-link:hover .arrow { transform: translateX(3px); }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.arrow-link-underline { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

@media (min-width: 40em) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .card-body { padding: 1.5rem 1.125rem; }
  .card h3 { font-size: 1rem; letter-spacing: -0.02em; }   /* 'Hyperpigmentation' must fit the ~185px column at 1024 */
  .card-cta .btn { padding-inline: 1rem; font-size: 0.8125rem; letter-spacing: 0.04em; }   /* one-line pill in the 1024 column */
  .card-cta .btn .icon { display: none; }
}
@media (min-width: 80em) {
  .card-body { padding: 1.5rem 1.375rem; }
  .card h3 { font-size: 1.1875rem; }
  .card-cta .btn { padding-inline: 1.5625rem; font-size: 0.875rem; letter-spacing: 0.06em; }
  .card-cta .btn .icon { display: block; }
}

/* ---- 4. how it works --------------------------------------------------- */
.band-media {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.steps {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}
.step-num {
  grid-row: 1 / span 2;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);       /* 5.36:1 on white; the numeral is the sighted step marker (list markers are off), so it must pass the large-text floor */
}
.step h3 { grid-column: 2; margin-bottom: 0.5rem; font-size: clamp(1.1875rem, 1.07rem + 0.45vw, 1.375rem); }
.step p { grid-column: 2; color: var(--grey); line-height: 1.55; max-width: 36rem; }   /* 36rem caps 640-899 lines (visual-4) */

@media (min-width: 40em) {
  .band-media { aspect-ratio: 16 / 9; }
}
@media (min-width: 64em) {
  .band-media { aspect-ratio: 21 / 9; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; border-top: 0; }
  .step { display: block; padding: 0; border-bottom: 0; }
  .step-num { display: block; font-size: 4rem; line-height: 1; margin-bottom: 1rem; }
  .step h3 { margin-bottom: 0.75rem; }
}

/* ---- washes (pricing, final CTA) --------------------------------------- */
.wash {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wash-gradient);
  color: var(--ink);
}
.wash-media { position: absolute; inset: 0; z-index: 0; }
.wash-media img { width: 100%; height: 100%; object-fit: cover; }
.wash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("assets/img/placeholders/grain.png") repeat;
  opacity: 0.3;
}
.wash-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.25rem;
}
.wash-inner .eyebrow { margin-bottom: 0; }
.wash h2 .tone { color: var(--grey-wash); }   /* sampled: #6B6B6B was 3.8:1 on the deepest wash pixels; #555 is ≥ 5:1 */
.wash-inner h2 { max-width: 20ch; }
.wash-body { max-width: 60ch; line-height: 1.65; }
.pull-line {
  margin-top: 0.75rem;
  letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* ---- 6. reviews -------------------------------------------------------- */
.stars {
  display: inline-flex;
  gap: 0.2em;
  color: var(--gold);
  font-size: 1rem;
}
.stars-lg { font-size: 1.125rem; margin-bottom: 1rem; }
.placeholder-note { margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.5; color: var(--grey); }
.placeholder-note [data-token] {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  margin: 0;
  border: 1px dashed var(--rule-strong);
  border-radius: 4px;
  background: var(--paper-2);
}
.quotes {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.25rem;
}
.quote { display: flex; }
.quote figure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.quote blockquote { flex: 1 1 auto; }          /* attributions share the row bottom (visual-5) */
.quote blockquote p {
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: 32rem;                              /* caps 640-899 lines (visual-4) */
  text-wrap: pretty;
}
.quote figcaption { font-size: 0.9375rem; color: var(--grey); }
@media (min-width: 64em) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .quote figure { padding: 2rem; gap: 1.25rem; }
  .quote blockquote p { font-size: 1.0625rem; }
}

/* ---- 7. meet miry ------------------------------------------------------ */
.profile { display: grid; gap: 2.5rem; }
.profile-media { position: relative; padding: 1.5rem 18% 0 0; max-width: 28rem; }
.profile-wash {
  position: absolute;
  inset: 0 0 2.5rem 14%;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--card) 0%, var(--cream-deep) 100%);
  border: 1px solid var(--hairline);
}
.profile-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/placeholders/grain.png") repeat;
  opacity: 0.3;
}
.botanical {
  position: absolute;
  right: -4%;
  bottom: -4%;
  width: 46%;
  height: auto;
  aspect-ratio: 600 / 900;
  color: var(--ink);
  opacity: 0.22;
}
.photo {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--lilac);
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.35);
}
.photo picture, .photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.profile-text p { line-height: 1.65; max-width: 62ch; }
.profile-text h2 { margin-bottom: 1.5rem; }
.profile-text p + p { margin-top: 1.1rem; }
.signature { font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.profile-text p + .signature { margin-top: 1.75rem; }
@media (min-width: 64em) {
  /* Equal halves: the portrait is the chapter's anchor (Skinney's founder split), so it gets ~475px at
     1440 instead of ~354px; the text column still sits inside its 62ch cap. */
  .profile { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 4rem; align-items: center; }
  .profile-media { max-width: none; padding: 2.5rem 14% 0 0; }
  .profile-wash { inset: 0 0 3rem 16%; }
}

/* ---- 8. resources ------------------------------------------------------ */
.split { display: grid; gap: 2rem; align-items: center; }
.split-media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-body h2 { margin-bottom: 1.25rem; text-wrap: pretty; }   /* not balance: balance splits 'before you / go — and after.'; pretty gives 'Know before you go — / and after.' so the grey tone starts the line */
.split-body p { line-height: 1.65; max-width: 52ch; }
.split-body .arrow-link { margin-top: 1rem; }
@media (min-width: 64em) {
  .split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 5rem; }
}

/* ---- 9. ask ------------------------------------------------------------ */
.ask { background: var(--card); border-block: 1px solid var(--hairline); }
.ask-inner { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.ask-inner .intro { margin-top: 0.75rem; }
.ask-inner .btn { margin-top: 1.5rem; }

/* ---- 10. final cta ----------------------------------------------------- */
.final { padding-block: clamp(4.5rem, 12vw, 8rem); }
.final h2 { max-width: 18ch; }
.final-sub { max-width: 40rem; line-height: 1.6; }
.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  width: 100%;
  max-width: 30rem;
  justify-self: center;         /* the row fills its column like the hero row (visual-2) */
}
.final-actions .btn { flex: 1 1 auto; }
@media (min-width: 40em) {
  .final-actions { max-width: none; width: auto; }
  .final-actions .btn { flex: 0 0 auto; }
}

/* ---- footer ------------------------------------------------------------ */
.site-footer {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3rem, 7vw, 5rem) 6.5rem;   /* room under the last line for the fixed chat bubble */
  font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: 2rem; }
.footer-brand { line-height: 0; }
.footer-logo { height: 2.75rem; width: auto; max-width: 100%; }
.footer-tagline { margin-top: 1rem; max-width: 30ch; line-height: 1.6; color: var(--grey); }
.footer-brand [data-token] { color: var(--ink); background: transparent; border-bottom-color: var(--rule-strong); }
.footer-heading {
  margin-bottom: 0.5rem;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer-col ul { display: flex; flex-direction: column; }
nav.footer-col ul a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  margin-left: -0.5rem;
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 0.25em;
}
nav.footer-col ul a:hover { text-decoration: underline; }
/* Contact and social rows share the quick-links 44px rhythm (visual-6). */
.footer-list { display: flex; flex-direction: column; color: var(--grey-wash); }
.footer-list li { display: block; }
.footer-list > *, .footer-list li > * {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  align-self: flex-start;
}
.footer-list .icon { width: 1rem; height: 1rem; color: var(--ink); }
/* Contact/social anchors are inert (no href, unfocusable) until SITE holds a real value;
   script.js then sets tel:/mailto:/https and they become ordinary links. */
.footer-list a { color: inherit; text-decoration: none; }
.footer-list a:not([href]) { cursor: default; }
.footer-list a[href] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.25em; overflow-wrap: anywhere; }
.footer-list a[href]:hover { text-decoration-color: var(--ink); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 1rem;
  color: var(--grey);
  font-size: 0.875rem;
  line-height: 1.5;
}
.small-print a {
  display: inline-block;
  padding: 0.75rem 0.25rem;
  margin-inline: -0.25rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.25em;
}
.small-print a:hover { text-decoration-color: var(--ink); }
.dot { margin-inline: 0.15rem; }
.disclaimer { max-width: 60ch; }

@media (min-width: 40em) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
  .footer-brand-col { grid-column: auto; }
  .footer-bottom { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 3rem; }
  .disclaimer { justify-self: end; text-align: right; }
}

/* ---- floating chat bubble ---------------------------------------------- */
.chat-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--bar-h) + 1rem);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.chat-fab-label {
  /* screen-reader-only below 48em; a white label pill beside the disc from 48em */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chat-fab-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-on-ink);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.chat-fab-disc .icon { width: 1.5rem; height: 1.5rem; }
.chat-fab:hover .chat-fab-disc { background: var(--ink-soft); }
.chat-fab:focus-visible { outline: none; }
.chat-fab:focus-visible .chat-fab-disc { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 48em) {
  .chat-fab { right: 1.5rem; bottom: calc(var(--bar-h) + 1.5rem); }
  .chat-fab-label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    padding: 0.75rem 1.125rem;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--pill);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.4);
    font-family: var(--font-cond);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
  }
}

/* ---- toast ------------------------------------------------------------- */
/* The live region stays in the document at all times (so assistive tech is already listening);
   the toast is inserted into it when needed. It sits above the chat bubble and the bottom bar. */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + 1rem + 3.5rem + 1rem);
  z-index: 60;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), 26rem);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.35);
  font-size: 0.9375rem;
  pointer-events: auto;
}
.toast-text { flex: 1 1 auto; margin: 0; }
.toast-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--grey);
}
.toast-close .icon { width: 1.25rem; height: 1.25rem; }
.toast-close:hover { color: var(--ink); background: var(--paper-2); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 240ms var(--ease); }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---- motion layer (assets/js/motion.js) ---------------------------------- */
/* Nothing below applies until motion.js has added a class to <html>: html.js-motion (reveals,
   levels 'reduced' and 'full') and html.js-motion-full (everything else). No JS, a failed module,
   prefers-reduced-motion and SITE.motion 'off' therefore all render the plain, fully visible page.
   Transform and opacity only; no layout property changes. */

/* a) reveals: 600 ms ease-out, 14 px; the stagger delay is set inline per element by the module */
html.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(0, 0, 0.2, 1), transform 600ms cubic-bezier(0, 0, 0.2, 1);
}
html.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
html.js-motion-init [data-reveal] { transition: none !important; }   /* one frame: offscreen items snap to hidden */

/* b) parallax layers: the full-bleed media overscans by the ±40 px travel so no edge ever shows.
   Unconditional on purpose — the section's overflow: hidden clips it identically without motion, and
   applying it only once the module runs would move the picture after first paint (a layout shift). */
.hero-media, .wash-media { inset: -2.5rem 0; height: auto; }
html.js-motion-full [data-parallax] { will-change: transform; }
.wash-fill { background: var(--wash-gradient); }

/* c) tilt: perspective 900px, ≤ 6°, with a soft light that follows the pointer (--mx/--my in px) */
html.js-motion-full .tilt {
  position: relative;
  isolation: isolate;
  transition: transform 500ms var(--ease), opacity 600ms cubic-bezier(0, 0, 0.2, 1);   /* spring back; keeps the reveal fade */
}
html.js-motion-full .tilt.is-tilting { transition-duration: 90ms, 600ms; }
html.js-motion-full .tilt::after,
html.js-motion-full .tilt .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
/* behind the text (z-index −1 inside the isolated card): a pale blush glow, never over the copy */
html.js-motion-full .tilt::after {
  z-index: -1;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--blush-rgb) / 0.6), rgb(var(--lilac-rgb) / 0.25) 45%, rgb(var(--lilac-rgb) / 0) 70%);
}
html.js-motion-full .card-cta.tilt::after {
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--lilac-rgb) / 0.16), rgb(var(--lilac-rgb) / 0) 65%);
}
/* over the photo only: a moving specular sheen */
html.js-motion-full .tilt .card-media { position: relative; }
html.js-motion-full .tilt .card-media::after {
  background: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%);
}
html.js-motion-full .tilt.is-tilting::after,
html.js-motion-full .tilt.is-tilting .card-media::after { opacity: 1; }

/* d) magnetic pills: the module writes translate()/scale() inline; .btn already transitions transform 160 ms.
   The compositor layer is promoted only while a pointer is inside the pull range (.is-near), not for the session. */
html.js-motion-full .magnet.is-near { will-change: transform; }

/* e) header after 40 px of scroll: hairline shadow and a slightly smaller brand. The header box keeps
   its height on purpose — shrinking it would shift every element below it (a layout shift on scroll). */
html.js-motion-full .site-header { transition: box-shadow 240ms var(--ease); }
html.js-motion-full .site-header.is-scrolled { box-shadow: 0 1px 0 var(--hairline), 0 10px 24px -18px rgba(0, 0, 0, 0.35); }
html.js-motion-full .brand { transition: transform 240ms var(--ease); }
html.js-motion-full .site-header.is-scrolled .brand { transform: scale(0.94); }

/* f) hero form cross-fades over the poster; the arc orbits stand in when 3D is wanted but unavailable */
.hero-canvas { opacity: 0; transition: opacity 1000ms var(--ease); }
.hero-canvas.is-live { opacity: 1; }
.hero-arcs {
  display: none;                 /* motion.js adds .is-shown when 3D was wanted but could not mount */
  position: absolute;
  z-index: 1;
  top: 46%;
  right: 9%;
  width: min(26vw, 22rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--ink);
  opacity: 0.92;               /* the flat Speak mark stands in when the 3D mark cannot mount */
  pointer-events: none;
}
@media (min-width: 64em) {
  /* Shown when 3D was wanted but could not mount (.is-shown), and whenever it is declined — reduced
     motion, SITE.motion 'reduced' / 'off', no JS — so the right half of the hero is never an empty wash.
     A static SVG is not motion. Hidden below 64em, where the hero has no right-hand column. */
  .hero-arcs.is-shown, html:not(.js-motion-full) .hero-arcs { display: block; }
}

/* g) chat bubble: parked just below its spot until the hero has scrolled out, then slides in and stays.
   The 0.75rem start offset keeps the disc above the bottom bar's top edge throughout the slide (its
   rest gap to the bar is 1rem), so the two never overlap even mid-animation. */
html.js-motion-full .chat-fab {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.94);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease), visibility 0s linear 500ms;
}
html.js-motion-full .chat-fab.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---- print / Save as PDF ----------------------------------------------- */
/* Print layout never scrolls, so the reveal observer never fires: without this, every unrevealed
   [data-reveal] block prints at opacity 0 and the fixed bar is stamped on every sheet. */
@media print {
  html.js-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .book-bar, .chat-fab, .toast-region, .hero-canvas, .hero-arcs, .skip-link { display: none !important; }
  .site-header { position: static; }
  body { padding-bottom: 0; }   /* the --bar-h allowance for the hidden bar */
}

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

/* ---- brand restyle: photo slots read as framed panels on cream until real photos land ---- */
.band-media, .split-media, .card-media, .photo { background: var(--cream-deep); }
.band-media, .split-media { border: 1px solid var(--hairline); }
.card-media { border-bottom: 1px solid var(--hairline); }

/* ---- four concerns + the consultation prompt as a full-width band under them ---- */
.card-cta .card-body { gap: 0.75rem; }
@media (min-width: 40em) {
  .card-cta { grid-column: 1 / -1; }
  .card-cta .card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title btn" "copy btn";
    column-gap: 2rem;
    align-items: center;
    padding: 1.75rem 2rem;
  }
  .card-cta h3 { grid-area: title; }
  .card-cta p { grid-area: copy; max-width: 52ch; }
  .card-cta .btn { grid-area: btn; align-self: center; margin-top: 0; }
}
@media (min-width: 64em) {
  .card-cta .card-body { padding: 2rem 2.5rem; }
  .card-cta .btn, .card-cta .btn .icon { padding-inline: 1.5625rem; font-size: 0.8125rem; letter-spacing: 0.1em; }
  .card-cta .btn .icon { display: block; padding: 0; width: 1.125em; height: 1.125em; }
}





/* ==========================================================================
   Copy blueprint build (2026-10-07): new sections
   ========================================================================== */
.hero-eyebrow { margin-bottom: 0; }
.hero-eyebrow::before { display: none; }
.hero-lede { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); font-weight: 500; line-height: 1.5; max-width: 36rem; }
.br-wide { display: none; }
@media (min-width: 40em) { .br-wide { display: inline; } }
.hero-title { max-width: 12em; }

/* founder intro */
.signature span { display: block; margin-top: 0.25rem; font-size: 0.875rem; font-weight: 400; color: var(--grey); }
.story { margin-top: 1.5rem; }
.story > summary { list-style: none; cursor: pointer; width: max-content; max-width: 100%; }
.story > summary::-webkit-details-marker { display: none; }
.story[open] > summary .arrow { transform: rotate(90deg); }
.story-body { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.story-body h3 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.story-body h3:first-child { margin-top: 0; }
.profile-text .story-body p + p { margin-top: 0.85rem; }

/* emotional statement */
.statement-inner { max-width: 44rem; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: 1rem; }
.statement-inner p { line-height: 1.7; }
.statement-inner .btn { margin-top: 0.75rem; }
.statement { padding-top: clamp(1rem, 3vw, 2rem); }

/* concerns: five cards — 1 / 2 / 3+2 */
@media (min-width: 64em) {
  .cards.cards-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards-5 > .card { grid-column: span 2; }
  .cards-5 > .card:nth-child(4), .cards-5 > .card:nth-child(5) { grid-column: span 3; }
  .cards-5 > .card:nth-child(4) .card-media, .cards-5 > .card:nth-child(5) .card-media { aspect-ratio: 16 / 9; }
  .cards-5 .card h3 { font-size: 1.1875rem; }
}

/* treatments */
.treatments-section { background: var(--card); border-block: 1px solid var(--hairline); }
.treatments { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .treatments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.treatment { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); }
.treatment:first-child { border-color: var(--ink); }
.treatment-kind { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.treatment h3 { font-size: 1.3125rem; }
.treatment-sub { font-weight: 500; }
.treatment-sum { color: var(--grey); line-height: 1.55; flex: 1 1 auto; }
.more { margin-top: 0.5rem; border-top: 1px solid var(--hairline); padding-top: 0.5rem; }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-weight: 500; font-size: 0.9375rem; }
.more > summary::-webkit-details-marker { display: none; }
.more-icon { width: 1rem; height: 1rem; transition: transform 160ms var(--ease); }
.more[open] .more-icon { transform: rotate(90deg); }
.more p { color: var(--grey); line-height: 1.6; font-size: 0.9375rem; }
.more p + p { margin-top: 0.6rem; }
.isi { margin-top: 0.5rem; padding: 0.875rem 1rem; background: var(--card); border: 1px solid var(--ink); border-radius: 6px; font-size: 0.8125rem; line-height: 1.5; }
.isi p + p, .isi ul { margin-top: 0.6rem; }
.isi ul { list-style: disc; padding-left: 1.25rem; }
.isi li + li { margin-top: 0.45rem; }
.isi a { text-decoration: underline; text-underline-offset: 0.15em; }
.treatment-xeomin { }
.isi .arrow-link { min-height: 2.75rem; font-size: 0.875rem; }
.fine-print { margin: 2rem auto 0; max-width: 60rem; font-size: 0.875rem; line-height: 1.6; color: var(--grey); }
.centered-text { text-align: center; }

/* steps: headings are full sentences now */
.step h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); }

/* pricing band */
.band { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--cream-deep); border: 1px solid var(--ink); border-radius: var(--radius); }
.band h2 { margin-bottom: 0.75rem; }
.band p { max-width: 52ch; line-height: 1.6; }
.band-note { margin-top: 0.75rem; font-size: 0.9375rem; }
.band .btn { justify-self: start; }
@media (min-width: 48em) { .band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem; } .band .btn { justify-self: end; } }

/* resources */
.split-text { align-items: start; }
.resource-list { border-top: 1px solid var(--rule-strong); }
.resource-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hairline); font-weight: 500; }
.resource-list span { flex: 0 0 auto; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }

/* faq */
.faq-wrap { max-width: 52rem; }
.faq { margin-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--rule-strong); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; padding-block: 1rem; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { width: 1.125rem; height: 1.125rem; transform: rotate(45deg); transition: transform 200ms var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(0deg); }
.faq-item p { padding-bottom: 1.25rem; max-width: 62ch; color: var(--grey); line-height: 1.65; }

/* footer */
.footer-note { margin-bottom: 0.5rem; color: var(--grey); line-height: 1.55; max-width: 32ch; }
.footer-col .footer-heading { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; font-weight: 600; }
nav.footer-col .footer-heading, .footer-col:last-child .footer-heading { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; font-weight: 500; }

/* Header from 80em: brand left, six links centred, Book right (flex; the longer labels no longer fit the 3 | brand | 3 split) */
@media (min-width: 80em) {
  .header-inner { display: flex; align-items: center; gap: 1rem; }
  .brand { order: 0; flex: 0 0 auto; padding-inline: 0; }
  .site-nav { order: 1; flex: 1 1 auto; display: block; }
  .nav-list, html:not(.js) .nav-list { display: flex; flex-direction: row; justify-content: center; gap: 0; }
  .nav-list a { font-size: 0.75rem; letter-spacing: 0.12em; padding-inline: 0.75rem; }
  .btn-header { order: 2; flex: 0 0 auto; }
}
.hero-lede { text-wrap: balance; }

/* Email: break only after the @, never mid-domain (overflow-wrap:anywhere would split it). */
.footer-list a[href] .email-text { overflow-wrap: normal; word-break: normal; }

/* Aura device feature in Your Consultation */
.aura-feature { margin: 2.5rem auto 0; max-width: 360px; text-align: center; }
.aura-feature img { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }
.aura-feature figcaption { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }

.step-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-top: 1.25rem; }


/* ==========================================================================
   refresh-v2 (2026-10-17): editorial serif headlines, whitespace, new sections
   ========================================================================== */
h1, h2, h3, .hero-title, .quote blockquote p { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.005em; }
h1, .hero-title { line-height: 1.04; }
h2 { line-height: 1.1; }
h3 { line-height: 1.18; }
body { line-height: 1.7; }
.eyebrow { color: var(--olive); letter-spacing: 0.22em; }
.section { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem); }
.section-tight { padding-top: 0; }
.section-flush { padding-top: 0; }
.wash::after { display: none; }               /* no grain/decoration */
.btn-primary:hover { background: var(--olive); border-color: var(--olive); }
.hero-lede { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.35; }
@media (max-width: 39.99em) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; flex: 0 0 auto; }
}

/* founder intro */
.profile-text h2 { margin-bottom: 0.5rem; }
.profile-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.3; color: var(--olive); margin-bottom: 1.5rem; }
.profile-text .profile-sub + p { margin-top: 0; }
.profile-cta { margin-top: 1.75rem; }

/* approach: narrow column, no box */
.approach { background: var(--paper-2); border-block: 1px solid var(--hairline); }
.approach-inner { max-width: 40rem; margin-inline: auto; display: grid; gap: 1.5rem; text-align: left; }
.approach-inner .eyebrow { margin-bottom: 0; }
.approach-inner h2 { max-width: 16ch; }
.approach-body { display: grid; gap: 1.35rem; line-height: 1.8; color: var(--ink); }
.approach-lead { font-family: var(--font-serif); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.4; }
.approach-close { margin-top: 1rem; font-family: var(--font-serif); font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem); line-height: 1.25; color: var(--olive); }

/* pillars */
.pillars-section { background: var(--paper-2); padding-bottom: clamp(4.5rem, 3rem + 6vw, 8.5rem); }
.pillars { display: grid; grid-template-columns: minmax(0, 1fr); }
.pillar { padding: 2rem 0; border-top: 1px solid var(--rule-strong); }
.pillar-kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); margin-bottom: 0.875rem; }
.pillar h3 { margin-bottom: 0.875rem; }
.pillar p:last-child { color: var(--grey); line-height: 1.7; }
@media (min-width: 48em) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillar { padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem); border-top: 0; border-left: 1px solid var(--rule-strong); }
  .pillar:first-child { border-left: 0; padding-left: 0; }
  .pillar:last-child { padding-right: 0; }
}

/* cards & treatments */
.card-body h3 { font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem); margin-bottom: 0.5rem; }
.treatment h3 { font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); }
.treatment-sub { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.25rem; color: var(--olive); }
.treatment-sum { flex: 0 0 auto; color: var(--ink); }
.treatment-note { color: var(--grey); font-size: 0.875rem; line-height: 1.55; flex: 1 1 auto; }
.treatment-products { display: grid; gap: 0.25rem; flex: 1 1 auto; align-content: start; }
.more-link { margin-top: 0.5rem; border-top: 1px solid var(--hairline); padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-weight: 500; font-size: 0.9375rem; color: var(--ink); text-decoration: none; }
.more-link:hover { text-decoration: underline; }
.treatment:first-child { border-color: var(--hairline); }
.treatment-xeomin { border-color: var(--ink) !important; }

/* consultation */
.step-num { font-family: var(--font-serif); font-style: italic; color: var(--olive); }
.step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* brand moment */
.brand-moment { background: var(--olive); color: var(--ivory); }
.brand-inner { display: grid; gap: 2.5rem; align-items: center; }
.brand-photo { max-width: 22rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); margin: 0; }
.brand-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.brand-text { max-width: 36rem; display: grid; gap: 1.25rem; }
.brand-text .eyebrow { color: var(--taupe); margin-bottom: 0; }
.brand-text .eyebrow::before { background: rgba(242, 239, 232, 0.4); }
.brand-text h2 { color: var(--ivory); max-width: 16ch; }
.brand-text p { line-height: 1.75; }
.brand-line { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.35; }
.brand-moment .signature { color: var(--ivory); font-family: var(--font-serif); font-size: 1.375rem; }
@media (min-width: 48em) { .brand-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); } }

/* footer */
.footer-area { margin-top: 1rem; font-size: 0.875rem; color: var(--grey); }

/* about page */
.about-hero h1 { max-width: 14ch; margin-bottom: 1.5rem; }
.about-story { max-width: 40rem; margin-inline: auto; }
.about-story p { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.8; }
.about-story p + p { margin-top: 1.25rem; }
.about-story .pull { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.3; color: var(--olive); margin-block: 2.25rem; }
.credentials { background: var(--paper-2); border-block: 1px solid var(--hairline); }
.credentials-inner { max-width: 40rem; margin-inline: auto; display: grid; gap: 1.25rem; }
.credentials-inner .eyebrow { margin-bottom: 0; }
.credentials-inner p { line-height: 1.8; }
.cred-list { margin-top: 1rem; display: grid; border-top: 1px solid var(--rule-strong); }
.cred-list li { padding: 1rem 0; border-bottom: 1px solid var(--hairline); font-weight: 500; }
@media (min-width: 40em) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr; } }

.footer-heading-sub{margin-top:1.5rem}
.footer-social{list-style:none;padding:0;margin:0}
.footer-social li{margin:0 0 .4rem}
.footer-policies{list-style:none;padding:0;margin:1rem 0 0}.footer-policies li{margin:0 0 .4rem}
.policy-dialog{border:0;padding:0;max-width:44rem;width:calc(100% - 2rem);max-height:85vh;background:#F2EFE8;color:#292B2A;border-radius:6px}
.policy-dialog::backdrop{background:rgba(41,43,42,.55)}
.policy-inner{position:relative;padding:2.5rem 2rem 2rem;font-size:.95rem;line-height:1.6}
.policy-inner h2{margin:.25rem 0 1rem}.policy-inner h3{font-size:1.05rem;margin:1.5rem 0 .5rem;color:#39433D}
.policy-close{position:sticky;top:0;float:right;margin:-1.5rem -1rem 0 0;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:#39433D}
.policy-inner p{margin:0 0 .75rem}.policy-close{background:#F2EFE8;border-radius:50%;width:2.25rem;height:2.25rem}

/* a11y audit 2026-10-19: invisible fixes */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
h2.h3 { font-size: var(--fs-h3); line-height: 1.18; text-wrap: wrap; }   /* policy subheads: h2 for outline order, h3 size */