/* ---------- Fonts, served from this site ----------
   Archivo and Playfair Display (SIL Open Font License), the Latin files Google Fonts serves, kept in /fonts since
   Nov 12 2026 so no outside request holds up the first paint. Each is a variable-weight file. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/_astro/site/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/_astro/site/fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/_astro/site/fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================
   NOIR MEDICAL AESTHETICS — global system
   "The Warm Editorial Clinic" — see DESIGN.md
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* primitives */
  --noir-linen: #FFF9F3;
  --noir-cafe: #443223;
  --noir-olive: #44422D;
  --noir-clockwork: #72583E;
  --noir-cedar: #7C7960;
  --noir-weathered: #A08670;
  --noir-latte: #DBC4A5;

  /* surfaces */
  --surface-canvas: var(--noir-linen);
  --surface-tint: #F7EDE1;
  --surface-warm: #EFE4DA;
  --surface-dark: var(--noir-cafe);
  --surface-dark-2: #372A1E;

  /* text */
  --text-ink: var(--noir-cafe);
  --text-body: #4A4234;
  --text-muted: #6E6753;
  --text-on-dark: var(--noir-linen);
  --text-on-dark-muted: #D8CCBC;

  /* accent + lines */
  --accent: var(--noir-clockwork);
  --line: rgba(124, 121, 96, .35);
  --line-strong: rgba(68, 50, 35, .55);
  --line-on-dark: rgba(255, 249, 243, .18);
  --error: #8A3B2E;

  /* type */
  --font-serif: "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --size-display-xl: clamp(3rem, 1.7rem + 5.4vw, 5.5rem);
  --size-display: clamp(2.25rem, 1.5rem + 3.1vw, 3.75rem);
  --size-heading: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --size-heading-sm: clamp(1.5rem, 1.375rem + .5vw, 1.625rem);
  --size-body-lg: clamp(1.125rem, 1.06rem + .3vw, 1.25rem);
  --size-body: clamp(1rem, .98rem + .12vw, 1.0625rem);
  --size-small: .875rem;
  --size-eyebrow: clamp(.6875rem, .66rem + .15vw, .75rem);
  --size-micro: .6875rem;

  /* rhythm */
  --section-y: clamp(4rem, 2.8rem + 5vw, 8rem);
  --section-y-sm: clamp(3rem, 2.3rem + 3vw, 6rem);
  --gutter: clamp(1.25rem, .4rem + 4vw, 4rem);
  --content-max: 1280px;
  --prose-max: 720px;

  /* motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 200ms;
  --t-med: 250ms;
  --t-reveal: 500ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, picture, video { display: block; max-width: 100%; }
img { height: auto; } /* aspect ratio is sacred — fill containers only via explicit object-fit:cover rules */
button, input, textarea, select { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, .display-xl, .display, .heading, .heading-sm {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text-ink);
  text-wrap: balance;
}
.display-xl { font-size: var(--size-display-xl); line-height: 1.05; letter-spacing: -.01em; }
.display    { font-size: var(--size-display);    line-height: 1.1;  letter-spacing: -.005em; }
.heading    { font-size: var(--size-heading);    line-height: 1.15; }
.heading-sm { font-size: var(--size-heading-sm); line-height: 1.2; font-weight: 500; }
.display-xl, .display { max-width: 22ch; }
em.accent-italic { font-style: italic; }
.display-xl em.accent-italic, .display em.accent-italic {
  display: block;
  padding-left: clamp(1.75rem, 9vw, 7rem);
}

p { max-width: 65ch; }
.body-lg { font-size: var(--size-body-lg); line-height: 1.6; max-width: 58ch; }
.small { font-size: var(--size-small); line-height: 1.5; letter-spacing: .01em; }
.muted { color: var(--text-muted); }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.micro {
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}

a { color: var(--text-ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; transition: text-decoration-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface-dark); color: var(--text-on-dark);
  padding: 12px 20px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--prose-max); }
section { padding-block: var(--section-y); }
section.tight { padding-block: var(--section-y-sm); }
.band-tint { background: var(--surface-tint); }
.band-warm { background: var(--surface-warm); }
.band-dark { background: var(--surface-dark); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark p, .band-dark .heading, .band-dark .display { color: var(--text-on-dark); }
.band-dark .muted { color: var(--text-on-dark-muted); }
.band-dark a { color: var(--text-on-dark); text-decoration-color: var(--line-on-dark); }
.band-dark a:hover { text-decoration-color: var(--noir-latte); }
.band-dark .eyebrow { color: var(--noir-latte); }

.split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-75 { grid-template-columns: 7fr 5fr; }
  .split.split-57 { grid-template-columns: 5fr 7fr; }
  .split > .order-swap { order: -1; }
}

.hairline { border: 0; border-top: 1px solid var(--line); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 249, 243, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}
.logo-mask {
  display: inline-block;
  width: 118px; height: 46px;
  background-color: var(--text-ink);
  -webkit-mask: url("/images/logo-white.png") no-repeat center / contain;
  mask: url("/images/logo-white.png") no-repeat center / contain;
}
.band-dark .logo-mask, .logo-mask.on-dark { background-color: var(--noir-linen); }
.logo-link { display: inline-flex; text-decoration: none; }

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; gap: 2.25rem; align-items: center; }
  .nav-link { white-space: nowrap; }
}
/* 1024–1199: same items, tighter tracking and gaps so nothing wraps */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-desktop { gap: 1.4rem; }
  .nav-link { letter-spacing: .09em; }
  .site-header .bar { gap: 1rem; }
  .header-actions { gap: .9rem; }
}
.nav-link {
  position: relative;
  font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--text-ink); padding: 8px 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* "More" dropdown */
.nav-more { position: relative; display: inline-block; }
.nav-more-btn { background: none; border: 0; cursor: pointer; padding-block: 24px; }
.nav-more-btn::after { display: none; }
.nav-more-caret { font-size: .55em; margin-left: .4em; vertical-align: .25em; color: var(--accent); }
.nav-more-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 10.5rem; background: var(--surface-canvas); border: 1px solid var(--line);
  padding: .5rem 0; z-index: 120; box-shadow: none; text-align: left;
}
.nav-more:hover .nav-more-menu, .nav-more.open .nav-more-menu { display: block; }
.nav-more.focus .nav-more-menu { display: block; }
.nav-more-link {
  display: block; padding: .65rem 1.4rem; text-decoration: none;
  font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-ink);
}
.nav-more-link:hover { background: var(--surface-tint); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.header-phone { display: inline-block; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding-block: 12px; }
.header-phone .hp-num { display: none; }
@media (min-width: 1200px) { .header-phone .hp-num { display: inline; } }

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid var(--text-ink);
  border-radius: 2px;
  color: var(--text-ink);
  /* Ink fill (Nov 12 2026): on hover the button fills from the left like ink and, on leaving, empties to the
     right. The fill is a one-colour background whose width grows; --btn-ink is its colour. */
  --btn-ink: var(--text-ink);
  background: linear-gradient(var(--btn-ink), var(--btn-ink)) no-repeat 100% 0 / 0% 100% transparent;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-size 380ms var(--ease-out), color 300ms var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.btn:hover { background-size: 100% 100%; background-position: 0 0; color: var(--noir-linen); }
.btn.btn-sm { padding: 12px 22px; }
.band-dark .btn, .btn.on-dark { --btn-ink: var(--noir-linen); border-color: var(--noir-linen); color: var(--noir-linen); }
.band-dark .btn:hover, .btn.on-dark:hover { color: var(--text-ink); }
.text-link {
  font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--line);
}
.text-link:hover { text-decoration-color: var(--accent); }
.text-link.on-dark { color: var(--noir-linen); text-decoration-color: rgba(255,249,243,.45); }
.text-link.on-dark:hover { text-decoration-color: var(--noir-latte); }

/* mobile nav */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--text-ink); transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-mobile {
  position: fixed; inset: 0; z-index: 90;
  background: var(--surface-canvas);
  padding: 110px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: .25rem;
  visibility: hidden; opacity: 0;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
  overflow-y: auto;
}
.nav-mobile.open { visibility: visible; opacity: 1; transition-delay: 0s; }
.nav-mobile a.nav-mobile-link {
  font-family: var(--font-serif); font-size: 2rem; line-height: 1.3;
  text-decoration: none; color: var(--text-ink);
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(10px);
}
.nav-mobile.open a.nav-mobile-link { opacity: 1; transform: none; transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.nav-mobile .nav-mobile-meta { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 0; }
.hero-media { position: relative; min-height: min(88svh, 860px); display: flex; align-items: flex-end; }
.hero-media > picture, .hero-media > img { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 767px) {
  .hero-media img { object-position: 86% 28%; }
}
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,28,18,0) 40%, rgba(40,28,18,.42) 100%); }
.hero-content { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero-content .display-xl, .hero-content p { color: var(--noir-linen); }
.hero-content .eyebrow { color: var(--noir-latte); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; margin-top: 2.25rem; }

/* ---------- Imagery ---------- */
.photo { overflow: hidden; }
.photo img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 30%; transition: transform 700ms var(--ease-out); }
a.photo:hover img { transform: scale(1.03); }
.photo.ratio-45 { aspect-ratio: 4 / 5; }
.photo.ratio-34 { aspect-ratio: 3 / 4; }
.photo.ratio-23 { aspect-ratio: 2 / 3; }
@media (min-width: 900px) {
  .split > .photo.sticky-portrait { position: sticky; top: 96px; }
  .split > .photo.portrait-sm { width: 86%; justify-self: end; }
}
.photo.ratio-11 { aspect-ratio: 1 / 1; }
.photo.ratio-32 { aspect-ratio: 3 / 2; }
figcaption { margin-top: .75rem; }

/* before/after documentary system */
.ba-figure { max-width: 560px; }
.ba-figure .ba-img { position: relative; }
.ba-tag {
  position: absolute;
  font-size: var(--size-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255, 249, 243, .88); color: var(--text-ink);
  padding: 3px 10px;
}
.ba-tag.before { top: 10px; left: 10px; }
.ba-tag.after-lr { top: 10px; right: 10px; }
.ba-tag.after-tb { bottom: 10px; left: 10px; }
.ba-figure img { width: 100%; height: auto; }
.ba-figure figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--text-muted); }

/* ---------- Signature list (home overview) ---------- */
.sig-list { display: flex; flex-direction: column; gap: 1.75rem; }
.sig-item { display: block; text-decoration: none; }
.sig-item .sig-name { display: block; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.25; color: var(--text-ink); transition: color var(--t-fast) var(--ease-out); }
.sig-item:hover .sig-name { color: var(--accent); }
.sig-item .sig-line { display: block; font-size: .9375rem; color: var(--text-muted); margin-top: .25rem; }

/* ---------- Results rail (treatment discovery) ---------- */
.results-rail { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.results-rail .result-plate { flex: 0 0 auto; width: clamp(280px, 38vw, 440px); scroll-snap-align: start; }
.results-rail .ba-figure { max-width: none; }
/* Captions in the rail may run to two lines (a series caption says what its panels are): the "results vary" note
   stays on one line, and every caption reserves two lines so the treatment names under the plates line up. */
.results-rail .ba-figure figcaption { min-height: 2.2rem; }
.results-rail .ba-figure figcaption .small { white-space: nowrap; }
@media (max-width: 600px) { .results-rail .ba-figure figcaption { flex-wrap: wrap; row-gap: .125rem; } }   /* narrow plates: a long caption takes its own lines and the note drops beneath it */
.result-plate h3 { margin-top: 1rem; }
.result-plate .plate-actions { display: flex; gap: 1.5rem; align-items: baseline; margin-top: .75rem; }
.results-rail::-webkit-scrollbar { height: 6px; }
.results-rail::-webkit-scrollbar-thumb { background: var(--line); }

/* ---------- Review rotator ---------- */
.rating-line { font-family: var(--font-sans); font-size: .9375rem; letter-spacing: .04em; color: var(--text-body); margin-bottom: 1.5rem; display: flex; align-items: baseline; gap: .625rem; }
.rating-line .rating-num { font-family: var(--font-serif); font-size: 2rem; color: var(--accent); }
.review-rotator { position: relative; }
.review-rotator blockquote { display: none; }
.review-rotator blockquote.is-active { display: block; }
.review-rotator cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--font-sans); font-size: .875rem; }
/* Each dot is an 8px mark inside a 24x32px button, so it can be tapped (WCAG 2.5.8); the marks sit where they did. */
.rotator-dots { display: flex; margin: .5rem 0 -.75rem -8px; }
.rotator-dots button { display: inline-grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rotator-dots button::before { content: ""; box-sizing: border-box; width: 8px; height: 8px; border: 1px solid var(--accent); border-radius: 50%; }
.rotator-dots button[aria-selected="true"]::before { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .review-rotator blockquote.is-active { animation: quoteIn 600ms var(--ease-out); }
  @keyframes quoteIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- World band descriptor ---------- */
.world-band .wb-line .wb-desc { display: block; font-size: .875rem; letter-spacing: .04em; color: var(--noir-latte); margin-top: .125rem; }

/* ---------- World bands (full-bleed editorial chapters) ---------- */
.world-band {
  position: relative;
  margin: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.world-band img { width: 100%; height: 100% !important; object-fit: cover; position: absolute; inset: 0; transition: transform 900ms var(--ease-out); }
.world-band:hover img { transform: scale(1.025); }
@media (min-width: 768px) {
  .world-band.wb-shift img { transform: scale(1.3) translateX(11%); object-position: 50% 44%; }
  .world-band.wb-shift:hover img { transform: scale(1.33) translateX(11%); }
}
.world-band .wb-inner {
  position: relative; z-index: 2;
  min-height: clamp(420px, 62vh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.world-band.wb-right .wb-inner { align-items: flex-end; text-align: right; }
.world-band.wb-right .display em.accent-italic { padding-left: 0; padding-right: clamp(1.75rem, 9vw, 7rem); }
@media (max-width: 899px) { .world-band.wb-right img { object-position: 52% 22% !important; } }
@media (max-width: 600px) { .world-band.wb-right img { object-position: 40% 22% !important; } }
@media (max-width: 899px) { .world-band.wb-biostim img { object-position: 70% 50% !important; } }
@media (max-width: 600px) { .world-band.wb-biostim img { object-position: 70% 50% !important; transform: translateY(-11%) scale(1.25); } }
.world-band .wb-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,28,18,.02) 45%, rgba(40,28,18,.48) 100%); z-index: 1; }
.world-band .eyebrow { color: var(--noir-latte); margin-bottom: .75rem; }
.world-band .display { color: var(--noir-linen); }
.world-band p.wb-sub { color: var(--noir-linen); max-width: 44ch; margin-top: .875rem; }
.world-band .text-link { color: var(--noir-linen); text-decoration-color: rgba(255,249,243,.45); margin-top: 1.25rem; align-self: flex-start; }
.world-band .wb-line { text-decoration: none; display: block; margin-top: .5rem; }
.world-band .wb-line .display { color: var(--noir-linen); transition: color var(--t-fast) var(--ease-out); }
.world-band .wb-line:hover .display { color: var(--noir-latte); }
.world-band + .world-band { margin-top: 0; }

/* ---------- Contents (chapter index nav) ---------- */
.contents { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.contents ol { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
@media (min-width: 768px) { .contents ol { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .contents ol { grid-template-columns: repeat(4, 1fr); } }
.contents a {
  display: flex; gap: .875rem; align-items: baseline;
  padding: .8rem 0; text-decoration: none;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
}
.contents a .n { font-size: var(--size-micro); letter-spacing: .1em; color: var(--accent); }
.contents a:hover { color: var(--accent); }

/* ---------- Price list ---------- */
.price-group { margin-bottom: 3.5rem; }
.price-group:last-child { margin-bottom: 0; }
.price-group > .eyebrow { margin-bottom: .25rem; }
.price-group-note { color: var(--text-muted); margin-bottom: 1.25rem; }
.menu-row {
  display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: baseline; column-gap: 1rem;
  padding: .875rem .875rem; margin-inline: -.875rem;
  text-decoration: none; border-radius: 2px;
  transition: background 250ms var(--ease-out);
}
.menu-row:hover, .menu-row:focus-visible { background: var(--surface-canvas); }
.menu-row .mr-name {
  font-size: 1.0625rem; font-weight: 500; letter-spacing: .01em; color: var(--text-ink);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px;
  transition: text-decoration-color 250ms var(--ease-out);
}
.menu-row:hover .mr-name { text-decoration-color: var(--accent); }
.menu-row .mr-tail { white-space: nowrap; }
.menu-row .mr-arrow {
  display: inline-block; margin-left: .375rem; color: var(--accent);
  font-size: .9375rem; transition: transform 250ms var(--ease-out);
}
.menu-row:hover .mr-arrow { transform: translateX(4px); }
.menu-row .mr-price { font-family: var(--font-serif); font-size: 1.25rem; color: var(--accent); white-space: nowrap; }
.menu-row .mr-lead { border-bottom: 1px dotted var(--noir-cedar); opacity: .5; transform: translateY(-5px); min-width: 2rem; }
.menu-row .mr-note { grid-column: 1 / -1; font-size: .875rem; color: var(--text-muted); margin-top: 2px; }


/* ---------- Treatment chapters ---------- */
.chapter { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.chapter:nth-of-type(even) { background: var(--surface-tint); }
.chapter .tagline-lead { font-size: 1.125rem; color: var(--text-muted); max-width: 48ch; }
.chapter-index {
  font-family: var(--font-sans); font-size: var(--size-eyebrow); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  display: inline-block; margin-bottom: .75rem;
}
.chapter h2, .chapter h3:not(.micro) { margin-bottom: 1.5rem; }
.chapter .heading { font-size: clamp(2.75rem, 2rem + 3.2vw, 4.25rem); line-height: 1.05; letter-spacing: -.005em; }
.chapter .lists { display: grid; gap: 2rem; margin-top: 1.75rem; }
@media (min-width: 768px) { .chapter .lists { grid-template-columns: 1fr 1fr; } }
.chapter .lists h3 { font-family: var(--font-sans); text-wrap: auto; }
.chapter ul { list-style: none; margin-top: .75rem; }
.chapter ul li { padding: .4rem 0 .4rem 1.4rem; position: relative; }
.chapter ul li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 14px; height: 1px; background: var(--accent);
}
.chapter-meta { display: flex; flex-direction: column; gap: .375rem; margin-top: 1.75rem; }
.chapter-meta .small { font-size: .875rem; }
.chapter-meta .price-tag { font-family: var(--font-serif); font-size: 1.375rem; color: var(--accent); }
.chapter-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }

/* related-reading links */
.related-reading { margin-top: 1.75rem; }
.related-reading p.micro { color: var(--text-muted); margin-bottom: .625rem; }
.related-reading a { display: block; padding: .3rem 0; font-size: .9375rem; line-height: 1.45; max-width: 52ch; }

/* ---------- Accordion ---------- */
.accordion { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem 0;
  font-family: var(--font-serif); font-size: var(--size-heading-sm); line-height: 1.3; color: var(--text-ink);
  border-top: 1px solid var(--line);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+"; font-family: var(--font-sans); font-size: 1.375rem; font-weight: 300;
  color: var(--accent); flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease-out);
}
.accordion[open] summary::after { transform: rotate(45deg); }
/* Questions on a treatment page; a page covering several treatments heads each set */
.treatment-faq .faq-sub { margin: 2.75rem 0 .5rem; }
.treatment-faq .faq-sub:first-child { margin-top: 0; }
.accordion .accordion-body { padding: 0 0 1.5rem; max-width: 62ch; }

/* ---------- Reviews ---------- */
.review-plate blockquote {
  font-family: var(--font-serif); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem); line-height: 1.45;
  color: var(--text-ink); max-width: 26ch;
}
@media (min-width: 1024px) {
  .review-plate { display: grid; grid-template-columns: 260px 1fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .review-plate > .eyebrow, .review-plate > .rating-line { grid-column: 1; }
  .review-plate > .review-rotator, .review-plate > .rotator-dots, .review-plate > .mt-3 { grid-column: 2; }
  .review-plate .rating-line { flex-direction: column; align-items: flex-start; gap: .25rem; margin-bottom: 0; }
  .review-plate .rating-num { font-size: 4.5rem; line-height: 1; }
  .review-plate blockquote { max-width: 44ch; }
}
.review-plate cite { display: block; font-style: normal; margin-top: 1.25rem; }

/* ---------- Journal teasers ---------- */
.journal-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }
.journal-teaser { display: block; text-decoration: none; }
.journal-teaser .micro { color: var(--text-muted); margin-bottom: .625rem; }
.journal-teaser h3 { font-size: 1.5rem; line-height: 1.3; transition: color var(--t-fast) var(--ease-out); }
.journal-teaser:hover h3 { color: var(--accent); }
.journal-teaser .read { margin-top: .875rem; }

/* journal index list */
.post-list { list-style: none; }
.post-list li { border-bottom: 1px solid var(--line); }
.post-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.125rem 0; text-decoration: none;
}
.post-list a .t { font-family: var(--font-sans); font-weight: 500; font-size: 1.0625rem; line-height: 1.4; color: var(--text-ink); transition: color var(--t-fast) var(--ease-out); }
.post-list a:hover .t { color: var(--accent); }
.post-list .c { flex-shrink: 0; color: var(--text-muted); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.5rem; }
.field label { display: block; margin-bottom: .5rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.field .error-msg { color: var(--error); font-size: var(--size-small); margin-top: .375rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-dark); color: var(--text-on-dark); padding-block: clamp(2.5rem, 4vw, 4rem) 2rem; border-top: 1px solid var(--line-on-dark); }
.site-footer a { color: var(--text-on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--noir-latte); text-underline-offset: 5px; }
.footer-grid { display: grid; gap: 2.75rem; margin-top: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid .micro { color: var(--noir-latte); margin-bottom: 1.125rem; }
.footer-grid ul { list-style: none; }
.footer-grid li { padding: .3rem 0; font-size: .9375rem; }
.footer-grid address { font-style: normal; line-height: 1.8; color: var(--text-on-dark-muted); }
/* Bottom row. Wide screens: legal line left, "Follow Along" with the three social marks in the true centre,
   small logotype right. Below 1024px the three stack, centred, with the social block first. */
.footer-bottom {
  margin-top: 3.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line-on-dark);
  display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 1.25rem 2rem;
  text-align: center;
  color: var(--text-on-dark-muted); font-size: .8125rem;
}
@media (min-width: 1024px) {
  .footer-bottom { grid-template-columns: 1fr auto 1fr; text-align: left; }
  .footer-bottom > :first-child { justify-self: start; }
  .footer-bottom > :last-child { justify-self: end; }
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .display { margin-inline: auto; }
.cta-band .btn { margin-top: 2.25rem; }
.cta-band p.sub { margin: 1.25rem auto 0; max-width: 46ch; }

/* ---------- Reveal motion ---------- */
html.js-reveal .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
html.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; } .mt-8 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 3rem; }
.center { text-align: center; }
.center .display, .center .display-xl, .center p { margin-inline: auto; }
.footer-bottom-logo { width: 88px; height: 34px; }
/* Social links in the footer's bottom row: a "Follow Along" label over Instagram, TikTok, Facebook, centred */
.footer-follow { order: -1; display: flex; flex-direction: column; align-items: center; gap: .375rem; }
@media (min-width: 1024px) { .footer-follow { order: 0; } }
.footer-follow .micro { color: var(--noir-latte); margin: 0; }
.footer-social { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--text-on-dark-muted); transition: color var(--t-fast) var(--ease-out); }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--text-on-dark); }
.disclaimer { font-size: .875rem; color: var(--text-muted); max-width: 60ch; }


/* ---------- Chapter detail expander ---------- */
.chapter details.more { margin-top: 1rem; }
.chapter details.more summary {
  list-style: none; cursor: pointer;
  font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); padding: .25rem 0;
}
.chapter details.more summary::-webkit-details-marker { display: none; }
.chapter details.more summary::marker { content: none; }
.chapter details.more summary::after { content: " +"; }
.chapter details.more[open] summary::after { content: " –"; }
.chapter details.more p { margin-top: .75rem; }

/* ---------- Chapter evidence figures ---------- */
.chapter-evidence { margin-top: 1.75rem; max-width: 380px; }
.chapter-evidence figcaption .micro { max-width: 34ch; }

/* ---------- Results gallery (a treatment with more than one documented result; client pin, Nov 9 2026) ----------
   Without script every result is shown, one under another. js/main.js adds .is-live: one result at a time, moved
   through with the arrows above the photo, the arrow keys, or a swipe. The controls sit above the photo so they
   never move when a caption runs to a second line. */
.ev-gallery { margin-top: 1.75rem; max-width: 380px; }
.ev-gallery .ev-slide { max-width: none; }
.ev-gallery .ev-slide + .ev-slide { margin-top: 1.5rem; }
.ev-gallery.is-live .ev-slide { display: none; margin-top: 0; }
.ev-gallery.is-live .ev-slide.is-active { display: block; }
.ev-gallery figcaption .micro { max-width: 34ch; }
.ev-gallery.is-live figcaption { min-height: 2.75rem; }
.ev-gallery figcaption .small { white-space: nowrap; }
@media (max-width: 600px) { .ev-gallery figcaption { flex-wrap: wrap; row-gap: .125rem; } }
.ev-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin-bottom: .625rem; color: var(--text-muted); }
.ev-nav { display: inline-flex; align-items: center; gap: .375rem; }
.ev-nav[hidden] { display: none; }
.ev-count { min-width: 4.25em; text-align: center; font-size: var(--size-small); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--text-ink); }
.ev-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text-ink);
  font-size: 1.0625rem; line-height: 1; cursor: pointer;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.ev-btn:hover { background: var(--text-ink); color: var(--noir-linen); }
@media (prefers-reduced-motion: no-preference) {
  .ev-gallery.is-live .ev-slide.is-active { animation: quoteIn 400ms var(--ease-out); }
}

/* ---------- Journal: lead article, section row, cards (redesigned Nov 2026) ---------- */
/* Lead article: a tall frame beside a large serif title, the article's opening words and one quiet link. */
.journal-feature { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; text-decoration: none; }
@media (min-width: 900px) { .journal-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.journal-feature .jf-img { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--surface-warm); }
.journal-feature .jf-img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 700ms var(--ease-out); }
.journal-feature:hover .jf-img img { transform: scale(1.03); }
.journal-feature .jf-text { display: block; }
.journal-feature .micro { display: block; color: var(--accent); }
.journal-feature .jf-title { display: block; margin-top: 1rem; font-family: var(--font-serif); font-size: clamp(2rem, 3.8vw, 3.375rem); line-height: 1.1; letter-spacing: -.01em; color: var(--text-ink); text-wrap: balance; }
.journal-feature .jf-excerpt { display: block; margin-top: 1.25rem; max-width: 44ch; font-size: var(--size-body-lg); line-height: 1.6; color: var(--text-body); }
.journal-feature .jf-meta { display: block; margin-top: 1.5rem; font-size: var(--size-small); color: var(--text-muted); }
.journal-feature .jf-more { display: inline-block; margin-top: 1.75rem; padding-bottom: 5px; border-bottom: 1px solid var(--line-strong); font-size: var(--size-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-ink); transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.journal-feature:hover .jf-more { color: var(--accent); border-color: var(--accent); }

/* Section row: the Journal's contents line, ruled above and below. On a phone it scrolls sideways. */
.journal-nav { display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 2.6vw, 2.5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); padding-block: .375rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journal-nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; font-size: var(--size-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--text-muted); transition: color var(--t-fast) var(--ease-out); }
.journal-nav a:hover, .journal-nav a[aria-current="page"] { color: var(--text-ink); }
.journal-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--text-ink); }
@media (max-width: 767px) { .journal-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .journal-nav::-webkit-scrollbar { display: none; } }

/* Cards: three across, two, then one. Tall frames, so a portrait photo is shown close to whole. */
.journal-cards, .journal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 640px) { .journal-cards, .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .journal-cards, .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.journal-card { display: block; text-decoration: none; }
.journal-card .jc-img { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--surface-warm); margin-bottom: 1.125rem; }
.journal-card .jc-img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 600ms var(--ease-out); }
.journal-card:hover .jc-img img { transform: scale(1.04); }
.journal-card .micro { display: block; color: var(--accent); }
.journal-card .jc-title { display: block; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.9vw, 1.625rem); line-height: 1.25; color: var(--text-ink); margin-top: .5rem; text-wrap: balance; transition: color var(--t-fast) var(--ease-out); }
.journal-card .jc-meta { display: block; margin-top: .625rem; font-size: var(--size-small); color: var(--text-muted); }
.journal-card:hover .jc-title { color: var(--accent); }
/* Twelve articles first; "More articles" uncovers the next twelve. Without scripts every article simply shows. */
html.js-reveal .journal-card[data-more] { display: none; }
.journal-more { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }

/* ---------- Instagram feed preview ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 820px; }
.center .ig-grid { margin-inline: auto; }
.center .display em.accent-italic { display: inline; padding-left: 0; }
.ig-tile { display: block; overflow: hidden; aspect-ratio: 1; position: relative; }
.ig-tile img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 500ms var(--ease-out); }
.ig-tile:hover img { transform: scale(1.04); }
/* A reel or video in the live feed: a small play mark in the corner, as Instagram's own grid shows it */
.ig-tile.is-video::after { content: ""; position: absolute; top: .75rem; right: .75rem; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 3px rgba(40, 28, 18, .6)); pointer-events: none; }
@media (max-width: 600px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   Nov 5 2026 — dedicated treatment pages, category hubs, nav
   dropdown, Journal post template (client decisions on the audit)
   ============================================================ */

/* ---------- Services dropdown: hover, focus or tap on the caret ---------- */
.site-header .bar { position: relative; }   /* the Services panel spans the header, not the link */
.nav-svc { position: static; display: inline-flex; align-items: center; }
.nav-dd-btn { background: none; border: 0; cursor: pointer; padding: 24px 18px 24px 4px; margin-right: -10px; color: var(--accent); line-height: 1; }   /* 27px wide to tap (a clear 24px beside the link it touches); the extra 10px reaches into the gap beside it, so nothing moves */   /* the caret is the click/tap toggle; the title links to the Services page */
.nav-dd-btn .nav-more-caret { margin-left: 0; font-size: .5rem; vertical-align: .15em; }
.nav-svc-menu {
  display: none; position: absolute; top: 100%; left: var(--gutter); right: var(--gutter); z-index: 120;
  grid-template-columns: repeat(5, 1fr); gap: 0 2rem;
  background: var(--surface-canvas); border: 1px solid var(--line);
  padding: 1.5rem 1.75rem 1.25rem; text-align: left;
}
.nav-svc:hover .nav-svc-menu, .nav-svc.open .nav-svc-menu { display: grid; }
.nav-svc.focus .nav-svc-menu { display: grid; }   /* keyboard focus inside (main.js sets "focus"); a mouse click on the title toggles "open" instead */
.nav-svc-col ul { list-style: none; }
.nav-svc-col-wide { grid-column: span 2; }
.nav-svc-col-wide ul { columns: 2; column-gap: 2rem; }
.nav-svc-col-wide ul li { break-inside: avoid; }
.nav-svc-head {
  display: block; font-size: var(--size-eyebrow); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; padding: .25rem 0 .75rem;
}
.nav-svc-head:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-svc-item { display: block; padding: .3rem 0; font-size: .9375rem; line-height: 1.35; letter-spacing: .01em; text-decoration: none; color: var(--text-ink); }
.nav-svc-item:hover { color: var(--accent); }
.nav-svc-all {
  grid-column: 1 / -1; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--text-ink);
}
.nav-svc-all:hover { color: var(--accent); }
.nav-mobile .nav-mobile-sub { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: .4rem 0 .45rem; border-bottom: 1px solid var(--line); opacity: 0; }
.nav-mobile.open .nav-mobile-sub { opacity: 1; transition: opacity 350ms var(--ease-out) 120ms; }
.nav-mobile-sub a { font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--text-muted); padding: .7rem 0; }   /* ≥ 42px tall: a comfortable tap target (Nov 9 2026) */

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: 1.25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .75rem; font-size: .8125rem; letter-spacing: .04em; color: var(--text-muted); }
.crumbs li + li::before { content: "/"; margin-right: .75rem; color: var(--line-strong); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text-ink); }

/* ---------- Page hero on a world band (treatment and category pages) ---------- */
.wb-hero { margin-top: 1rem; }
.wb-hero .wb-inner { min-height: clamp(380px, 56vh, 600px); }
.wb-hero h1.display { color: var(--noir-linen); max-width: 18ch; }
.wb-hero .wb-sub { color: var(--noir-linen); max-width: 48ch; margin-top: .875rem; }
.wb-hero .wb-sub em.accent-italic { font-style: italic; }
.wb-hero .wb-scrim { background: linear-gradient(180deg, rgba(40,28,18,.08) 30%, rgba(40,28,18,.6) 100%); }
.wb-hero.wb-right .wb-inner { align-items: flex-end; text-align: right; }
.wb-hero.wb-right h1.display { text-align: right; }

/* ---------- Category grid (home page since Nov 9 2026; before that the Services hub) ---------- */
/* The grid owns the spacing: one 14px gutter around and between the four bands. (Per-band margins left the second
   band 14px taller than the first, because ".world-band + .world-band" drops its top margin and grid margins do not collapse.) */
.world-grid { display: grid; gap: 14px; margin: 14px; }
.world-grid .world-band { margin: 0; }
@media (min-width: 900px) { .world-grid { grid-template-columns: 1fr 1fr; } }
.world-grid .world-band .wb-inner { min-height: clamp(300px, 36vh, 420px); }
.world-grid .world-band .display { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); }
.world-grid .world-band .wb-desc { display: block; font-size: .875rem; letter-spacing: .04em; color: var(--noir-latte); margin-top: .5rem; }
.world-grid .world-band:hover .display { color: var(--noir-latte); }
.world-grid .world-band .wb-scrim { background: linear-gradient(180deg, rgba(40,28,18,.12) 25%, rgba(40,28,18,.66) 100%); }
@media (max-width: 899px) { .world-grid .world-band img { object-position: 50% 40% !important; transform: none !important; } }

/* ---------- A treatment chapter on its own page ---------- */
.chapter-page { padding-top: clamp(3rem, 6vw, 5rem); }
.chapter .lists h2.micro { font-family: var(--font-sans); font-size: var(--size-micro); text-wrap: auto; margin-bottom: 0; }
.chapter-page .chapter-actions { gap: 1rem 1.75rem; }

/* ---------- Journal post ---------- */
.post-head .eyebrow { margin-bottom: 1.25rem; }
.post-head h1.display { max-width: 24ch; }
.post-cover { max-width: 1100px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-warm); }
.post-cover img { width: 100%; height: 100% !important; object-fit: cover; }
/* A cover the author also placed inside the article is shown once, here, and whole: many are before/after pairs,
   which the 3:2 frame would cut through. Its copy in the text is left out (wix-site/src/lib/ricos.js). */
.post-cover.is-whole { aspect-ratio: auto; overflow: visible; background: none; }
.post-cover.is-whole img { display: block; width: auto; max-width: 100%; height: auto !important; max-height: min(80vh, 760px); object-fit: contain; }
.post-cover.is-whole figcaption { color: var(--text-muted); font-size: var(--size-small); margin-top: .75rem; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin-top: 1.25em; }
.post-body h2, .post-body h3 { margin-top: 2.5rem; margin-bottom: .25rem; text-wrap: auto; }
.post-body h2 { font-size: var(--size-heading); line-height: 1.2; }
.post-body h3 { font-size: var(--size-heading-sm); line-height: 1.25; font-weight: 400; }
.post-body ul, .post-body ol { margin-top: 1.25em; padding-left: 1.4rem; }
.post-body li { margin-top: .4em; }
.post-body li::marker { color: var(--accent); }
.post-body img { margin: 2.25rem auto; max-width: 100%; }
.post-body figure { margin: 2.25rem 0; }
.post-body figure img { margin: 0; }
.post-body figcaption { color: var(--text-muted); font-size: var(--size-small); margin-top: .75rem; }
/* A gallery inside an article (Wix Blog): pictures side by side, each shown whole, never cropped */
.post-body .post-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: start; margin: 2.25rem 0; }
.post-body .post-gallery figure { margin: 0; }
.post-body .post-gallery img { width: 100%; height: auto; }
.post-body blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 1px solid var(--accent); font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.4; color: var(--text-ink); }
.post-body a { text-decoration-color: var(--accent); }
.post-body strong { font-weight: 600; color: var(--text-ink); }
/* Legal text (Privacy Policy): numbered sections at sub-head size, body at reading width */
.legal { max-width: var(--prose-max); }
.legal > :first-child { margin-top: 0; }
.legal h2 { font-size: var(--size-heading-sm); line-height: 1.25; font-weight: 400; margin-top: 2.5rem; margin-bottom: .25rem; text-wrap: auto; }
.legal p { margin-top: 1em; }
.legal ul { margin-top: 1em; padding-left: 1.4rem; }
.legal li { margin-top: .4em; }
.legal li::marker { color: var(--accent); }
.post-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); max-width: var(--prose-max); }
.post-related .micro { color: var(--text-muted); margin-bottom: .75rem; }

/* ============================================================
   Nov 8 2026 — header dropdowns: the pointer path from the title
   into the panel must never cross a dead zone
   ============================================================ */
/* The Services and More items fill the bar's full height, so the hover region runs edge to edge into the panel
   that opens at the bar's bottom edge (before: the items were centered, leaving a strip below them) */
@media (min-width: 1024px) {
  .nav-desktop { align-self: stretch; }
  .nav-svc, .nav-more { align-self: stretch; display: inline-flex; align-items: center; }
}
/* main.js keeps a dropdown open for a moment after the pointer leaves it (class "hover"), so moving diagonally from the
   title toward a far column, or brushing the next nav item on the way, doesn't close the panel */
.nav-svc.hover .nav-svc-menu { display: grid; }
.nav-more.hover .nav-more-menu { display: block; }

/* ============================================================
   Nov 9 2026 — phone header: the bar fits the screen
   ============================================================ */
/* Logo box (118px) + Text us + Book + menu button at the desktop gaps need 377px. A 390px phone has 346px between its
   gutters, so the menu button hung about 9px past the right edge and every page scrolled sideways on any screen
   narrower than 424px. (Not the accessibility widget: its off-screen keyboard is position: fixed, which adds nothing
   to the page width; the overflow is the same with the widget script removed.)
   Under 480px: 16px gaps; the menu button's three lines (inset 10px inside its 44px tap target) line up with the right
   gutter; and the logo box gives up its empty sides before anything is pushed out. The mark is 77px wide inside the
   118px box, so it keeps its full size. */
@media (max-width: 479px) {
  .site-header .bar, .header-actions { gap: 1rem; }
  .nav-toggle { margin-right: -10px; }
  .site-header .logo-link { flex: 0 1 118px; min-width: 77px; }
  .site-header .logo-mask { width: 100%; }
}
/* Under 350px (older small phones, a folded Galaxy Fold) three items no longer fit: Text us stays in the menu */
@media (max-width: 349px) { .header-phone { display: none; } }

/* ============================================================
   Small signature details (Nov 12 2026). Each is independent: delete its block to remove it.
   ============================================================ */

/* 1. Page-to-page fade. Moving between pages cross-fades instead of flashing blank, and the header holds still.
      Browsers without this simply change pages as before; people who ask for less motion get no fade. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
  .site-header { view-transition-name: site-header; }
}

/* 2. Paper grain. A barely visible speckle on the linen and tinted surfaces, so the page reads as paper.
      It is one tiny drawing tiled by the browser: no file, no request. Dark bands and photos are left clean. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .2 0 0 0 0 .14 0 0 0 1.1 -.33'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.14'/%3E%3C/svg%3E");
}
body, .band-tint, .chapter:nth-of-type(even) { background-image: var(--grain); background-size: 240px 240px; }

/* 3. Selected text in the brand's colours instead of the browser's blue. */
::selection { background: var(--noir-latte); color: var(--noir-cafe); }

/* 4. Journal articles: a large serif initial on the opening paragraph (ricos.js marks it), and a small N to
      close the article, the way a magazine does. The initial stands on the first line and rises above it, so it
      works whether the opening paragraph is one line or ten, and on a phone. */
.post-body > p.lede::first-letter {
  font-family: var(--font-serif); font-weight: 400; color: var(--text-ink);
  font-size: 3.1em; line-height: .78; margin-right: -.015em;
}
.end-mark { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 3.25rem; color: var(--accent); }
.end-mark::before, .end-mark::after { content: ""; width: 2.75rem; height: 1px; background: var(--line); }
.end-mark span { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1; }

/* 5. Journal articles: a hairline across the top of the window that fills as the article is read (js/main.js). */
.read-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 110; pointer-events: none; }
.read-line span { display: block; height: 100%; background: var(--noir-weathered); transform: scaleX(0); transform-origin: 0 50%; }

/* 6. The studio's coordinates under the copyright line, as a quiet signature. */
.footer-coords { display: block; margin-top: .45rem; font-size: var(--size-micro); letter-spacing: .14em; color: var(--noir-latte); font-variant-numeric: tabular-nums; }

/* ============================================================
   Second round of small details (Nov 12 2026). Each is independent: delete its block to remove it.
   (The ink-fill buttons are in the button rules above.)
   ============================================================ */

/* A. Review quotes: the opening quote mark hangs in the margin, so the words line up down the left edge. */
.review-plate blockquote { text-indent: -.43em; }
.review-plate blockquote cite { text-indent: 0; }

/* ---------- Browse by concern (the /concerns page) ----------
   Each area lists what a patient notices on the left and the treatments for it on the right, set as menu rows
   (the same rows as the Services menu: name, dotted leader, price, one line of why). */
.concern-area { margin-bottom: 4.5rem; scroll-margin-top: 100px; }
.concern-area:last-child { margin-bottom: 0; }
.concern-area > .heading { margin: .35rem 0 1.75rem; }
.concern { display: grid; gap: .25rem 3rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.concern:last-child { border-bottom: 1px solid var(--line); }
.concern-name { font-family: var(--font-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.3; color: var(--text-ink); padding-top: .75rem; }
@media (min-width: 860px) {
  .concern { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}