/* akila-quiet.css: the shared "quiet" page language (from careers and about, 2026-09-24) (cream, Newsreader light, hairlines, one yellow button per view),
   for the <main class="ab"> of any page, so the site header, mobile menu, sticky booking bar and footer stay the site's own.
   Everything here is prefixed ab- to stay clear of akila-tokens.css, akila-service.css and akila-chrome.css. */

/* The site declares Newsreader at 400-700 only; this face reuses the same file (already cached) at its full
   weight range, so the light display weights match the careers page. */
@font-face { font-family: "Newsreader AB"; src: url("fonts/newsreader-var-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader AB"; src: url("fonts/newsreader-var-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
/* Width-matched fallbacks (measured 2026-09-24 for careers) with the web fonts' ascent and descent (Newsreader 73.5/26.5, General Sans 101/24, measured in
   Chrome; Chrome scales the overrides by size-adjust, so each is divided by it), so the swap neither re-wraps lines nor changes line heights. */
@font-face { font-family: "Newsreader AB Fallback"; src: local("Georgia"); size-adjust: 100.5%; ascent-override: 73.13%; descent-override: 26.37%; line-gap-override: 0%; }
/* Italic measured separately on this page's italic lines: Newsreader italic is 91.5% of Georgia italic. */
@font-face { font-family: "Newsreader AB Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 91.5%; ascent-override: 80.33%; descent-override: 28.96%; line-gap-override: 0%; }
@font-face { font-family: "General Sans AB Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 100.7%; ascent-override: 100.3%; descent-override: 23.83%; line-gap-override: 0%; }

:root {
  --ab-paper: #faf6ee;
  --ab-white: #fffefa;
  --ab-ink: #161310;
  --ab-text: #36302a;
  --ab-muted: #6b6258;
  --ab-line: #e5ddcd;
  --ab-line-strong: #d8ccb6;
  --ab-edge: #968a7c;          /* 3.3:1 on paper: control edges that must meet WCAG 1.4.11 */
  --ab-accent: #f7dc00;
  --ab-accent-dark: #d4bd00;

  --ab-serif: "Newsreader AB", "Newsreader AB Fallback", Georgia, serif;
  --ab-sans: "General Sans", "General Sans AB Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ab-fs-display: clamp(2.75rem, 1.55rem + 4.1vw, 4.5rem);   /* 44 -> 72 */
  --ab-fs-h2: clamp(2rem, 1.45rem + 1.9vw, 3rem);              /* 32 -> 48 */
  --ab-fs-statement: clamp(1.5rem, 1.2rem + 1.05vw, 2.125rem); /* 24 -> 34 */
  --ab-fs-line: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);     /* 19 -> 22 */
  --ab-fs-body: 1.0625rem;                                     /* 17 */
  --ab-fs-small: .9375rem;                                     /* 15 */
  --ab-fs-label: .75rem;                                       /* 12 */

  --ab-gutter: clamp(1.25rem, 5vw, 4rem);
  --ab-max: 1240px;
  --ab-section: clamp(4.5rem, 3rem + 5vw, 8rem);
  --ab-ease: cubic-bezier(.22, .61, .36, 1);
  --ab-nav: 85px;
}

.ab { display: block; background: var(--ab-paper); }
/* Text defaults and resets only on the quiet sections, so an owner-settled legacy section inside .ab renders exactly as
   before. Zero specificity (:where), so every component rule below still wins. */
:where(.ab > :is(.ab-hero, .ab-facts, .ab-section, .ab-close, .ab-still)) { color: var(--ab-text); font-family: var(--ab-sans); font-size: var(--ab-fs-body); line-height: 1.6; }
:where(.ab > :is(.ab-hero, .ab-facts, .ab-section, .ab-close, .ab-still)) :where(h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(.ab > :is(.ab-hero, .ab-facts, .ab-section, .ab-close, .ab-still)) :where(ol, ul) { padding: 0; list-style: none; }
:where(.ab > :is(.ab-hero, .ab-facts, .ab-section, .ab-close, .ab-still)) :where(h1, h2, h3) { font-weight: 400; color: var(--ab-ink); }
:where(.ab > :is(.ab-hero, .ab-facts, .ab-section, .ab-close, .ab-still)) :is(img, video) { display: block; max-width: 100%; }
.ab svg { flex: none; }
.ab:focus { outline: none; }
.ab [hidden] { display: none !important; }

.ab-wrap { width: 100%; max-width: calc(var(--ab-max) + var(--ab-gutter) * 2); margin-inline: auto; padding-inline: var(--ab-gutter); }
.ab-label { font-family: var(--ab-sans); font-size: var(--ab-fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ab-muted); line-height: 1.5; }
.ab-center { text-align: center; }
.ab .ab-display { font-family: var(--ab-serif); font-size: var(--ab-fs-display); font-weight: 330; line-height: 1.04; letter-spacing: -.022em; color: var(--ab-ink); text-wrap: balance; }
.ab .ab-h2 { font-family: var(--ab-serif); font-size: var(--ab-fs-h2); font-weight: 350; line-height: 1.1; letter-spacing: -.012em; color: var(--ab-ink); text-wrap: balance; }
.ab .ab-display em, .ab .ab-h2 em { font-style: italic; font-weight: 330; }
.ab-body { margin-top: 1.25rem; max-width: 34rem; font-size: 1.125rem; color: var(--ab-text); text-wrap: pretty; }
.ab-small { margin-top: 1.5rem; font-size: var(--ab-fs-small); color: var(--ab-muted); }

.ab-link {
  color: var(--ab-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: var(--ab-edge); transition: text-decoration-color .25s var(--ab-ease);
}
.ab-link:hover { text-decoration-color: var(--ab-ink); }

.ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.75rem; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--ab-sans); font-size: 1rem; font-weight: 500; letter-spacing: .01em; line-height: 1;
  text-decoration: none; cursor: pointer; transition: background-color .25s var(--ab-ease);
}
.ab-btn--accent { background: var(--ab-accent); color: var(--ab-ink); }
.ab-btn--accent:hover { background: var(--ab-accent-dark); }

/* ---------- Hero: copy on cream, Zara's photo to the right edge at its own 3:4 ---------- */
/* The site header is fixed (85px from 901px up, 72px below), and the page style gives every section 112px of
   padding; the hero clears the header exactly and nothing else. */
.ab-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 72px 0 0; border-bottom: 1px solid var(--ab-line); }
@media (min-width: 901px) { .ab-hero { padding-top: var(--ab-nav); } }
.ab-facts { padding: 0; }
/* Some pages pad <main> for the fixed header (colour correction); the hero already clears it. */
body #main.ab { padding-top: 0; }
.ab-hero__copy {
  padding: 3rem clamp(2rem, 5vw, 6rem) 3rem max(var(--ab-gutter), calc((100vw - var(--ab-max)) / 2));
}
.ab-hero .ab-display { max-width: 11em; }
.ab-hero .ab-label { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.ab-hero .ab-label span { margin-inline: .7em; }
.ab-hero__lede { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); max-width: 30rem; font-size: 1.125rem; line-height: 1.65; color: var(--ab-muted); text-wrap: pretty; }
.ab-hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.ab-hero__call { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
.ab-hero__rating { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: 1.25rem; font-size: var(--ab-fs-small); color: var(--ab-muted); text-decoration: none; }
.ab-hero__rating:hover { color: var(--ab-ink); }
.ab-star { color: var(--ab-ink); font-size: .95em; }
/* Height fills the first screen, but the photo never takes more than half the width (--ab-photo-w = width / height). */
.ab-hero__photo { position: relative; height: min(clamp(560px, calc(100svh - var(--ab-nav)), 920px), calc(var(--ab-photo-share, 50vw) / var(--ab-photo-w, .75)), var(--ab-photo-hmax, 920px)); aspect-ratio: var(--ab-photo-ratio, 3 / 4); align-self: start; }
@media (min-width: 960px) and (max-width: 1199px) { .ab-hero .ab-display { font-size: 3.125rem; } }
.ab-hero__photo picture { display: block; width: 100%; height: 100%; background: #e9dfcd; }
.ab-hero__photo img { width: 100%; height: 100%; }
.ab-hero__photo img { object-fit: cover; }
.ab-hero__photo figcaption {
  position: absolute; left: 1rem; bottom: 1rem; padding: .3rem .65rem; border-radius: 999px;
  background: rgba(250, 246, 238, .9); color: var(--ab-ink); font-size: .75rem; letter-spacing: .02em;
}
/* Tablet and phone: the words first (the Book button stays on the first screen), then the photo, full width. */
@media (max-width: 959px) {
  .ab-hero { grid-template-columns: 1fr; }
  .ab-hero__copy { padding: 2.5rem var(--ab-gutter) 2.25rem; max-width: none; }
  .ab-hero__photo { height: auto; width: 100%; aspect-ratio: auto; }
  .ab-hero__photo picture { height: auto; aspect-ratio: var(--ab-photo-ratio, 3 / 4); }
  .ab-hero__photo figcaption { position: static; display: block; padding: .75rem var(--ab-gutter) 0; background: none; color: var(--ab-muted); border-radius: 0; font-size: .8125rem; }
  .ab-hero { border-bottom: 0; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .ab-hero__photo { width: min(100%, 560px); margin-inline: auto; }
}
@media (max-width: 599px) {
  .ab-hero__lede { font-size: 1.0625rem; }
  .ab-hero__ctas { flex-direction: column; align-items: stretch; gap: .25rem; }
  .ab-hero__ctas .ab-btn { width: 100%; }
  .ab-hero__call { justify-content: center; }
  .ab-hero__rating { width: 100%; justify-content: center; margin-top: .25rem; }
}

/* Entrance: quiet, one pass, CSS only. */
@keyframes ab-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ab-rise { animation: ab-rise .9s var(--ab-ease) both; }
.ab-rise:nth-child(2) { animation-delay: .06s; }
.ab-rise:nth-child(3) { animation-delay: .12s; }
.ab-rise:nth-child(4) { animation-delay: .18s; }
.ab-rise:nth-child(5) { animation-delay: .24s; }

/* ---------- Facts ---------- */
.ab-facts { border-bottom: 1px solid var(--ab-line); }
.ab-facts__list { display: grid; grid-template-columns: repeat(5, 1fr); }
.ab-facts__list--4 { grid-template-columns: repeat(4, 1fr); }
.ab-facts__list > div { padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) clamp(.75rem, 1.5vw, 1.5rem); text-align: center; }
.ab-facts__list > div + div { border-left: 1px solid var(--ab-line); }
.ab-facts dt { font-size: var(--ab-fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ab-muted); }
.ab-facts dd { margin-top: .75rem; font-family: var(--ab-serif); font-size: 1.1875rem; line-height: 1.35; color: var(--ab-ink); text-wrap: balance; }
@media (max-width: 959px) {
  .ab-facts__list { grid-template-columns: 1fr; }
  .ab-facts__list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; align-items: baseline; text-align: left; padding: 1rem 0; }
  .ab-facts__list > div + div { border-left: 0; border-top: 1px solid var(--ab-line); }
  .ab-facts dd { margin: 0; font-size: 1.125rem; }
}

/* ---------- Sections ---------- */
.ab-section { padding-block: var(--ab-section); }
.ab-section + .ab-section { border-top: 1px solid var(--ab-line); }
.ab-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem); }
.ab-grid__label { grid-column: 1 / span 3; padding-top: .55rem; }
.ab-grid__body { grid-column: 4 / -1; }
@media (max-width: 959px) {
  .ab-grid__label, .ab-grid__body { grid-column: 1 / -1; }
  .ab-grid__label { padding-top: 0; margin-bottom: 1.25rem; }
}

/* ---------- The route (signature): four stops on one hairline ---------- */
.ab-route { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.ab-route li { position: relative; padding: 1.75rem 1.5rem 0 0; border-top: 1px solid var(--ab-line-strong); }
.ab-route li::before {
  content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 999px;
  background: var(--ab-paper); border: 1px solid var(--ab-ink);
}
.ab-route li.is-here::before { background: var(--ab-ink); }
.ab-route__place { display: block; font-family: var(--ab-serif); font-size: var(--ab-fs-statement); font-weight: 350; line-height: 1.2; color: var(--ab-ink); }
.ab-route li.is-here .ab-route__place { font-style: italic; }
.ab-route__note { display: block; margin-top: .5rem; font-size: var(--ab-fs-small); color: var(--ab-muted); }
.ab-farsi { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.ab-farsi [lang="fa"] { font-family: "Vazirmatn", var(--ab-sans); font-size: 1.25rem; color: var(--ab-ink); }
.ab-farsi__en { font-size: var(--ab-fs-small); color: var(--ab-muted); }
/* Phones: the same line, turned vertical. */
@media (max-width: 767px) {
  .ab-route { grid-template-columns: 1fr; margin-top: 2.5rem; margin-left: 4px; }
  .ab-route li { padding: 0 0 1.75rem 1.75rem; border-top: 0; border-left: 1px solid var(--ab-line-strong); }
  .ab-route li:last-child { padding-bottom: 0; border-left-color: transparent; }
  .ab-route li::before { left: -5px; top: .55em; }
  .ab-route__place { line-height: 1; }
}

/* ---------- First visit ---------- */
.ab-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.ab-step { border-top: 1px solid var(--ab-line-strong); padding-top: 1.5rem; }
.ab-step__n { font-family: var(--ab-serif); font-size: 1rem; color: var(--ab-muted); font-feature-settings: "lnum"; }
.ab .ab-step__title { margin-top: 1.25rem; font-family: var(--ab-serif); font-size: var(--ab-fs-line); font-weight: 400; line-height: 1.3; color: var(--ab-ink); }
.ab-step__text { margin-top: .5rem; max-width: 22rem; font-size: 1rem; line-height: 1.55; color: var(--ab-text); }
@media (max-width: 767px) {
  .ab-steps { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .ab-step { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .5rem; padding: 1.25rem 0; border-top: 1px solid var(--ab-line); }
  .ab-step__n { grid-row: 1 / span 2; padding-top: .2rem; }
  .ab .ab-step__title { margin-top: 0; }
}

/* ---------- In their words ---------- */
.ab-quote { margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) auto 0; max-width: 46rem; text-align: center; }
.ab-quote p { font-family: var(--ab-serif); font-style: italic; font-weight: 330; font-size: var(--ab-fs-h2); line-height: 1.2; color: var(--ab-ink); text-wrap: balance; }
.ab-quote figcaption { margin-top: 1.25rem; }
.ab-voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ab-voices li { border-top: 1px solid var(--ab-line-strong); padding-top: 1.5rem; }
.ab-voices p { font-family: var(--ab-serif); font-size: 1.1875rem; line-height: 1.45; color: var(--ab-ink); text-wrap: pretty; }
.ab-voices figcaption { margin-top: 1rem; font-size: .875rem; color: var(--ab-muted); }
.ab-rating { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); text-align: center; font-size: var(--ab-fs-small); }
.ab-rating a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) {
  .ab-voices { grid-template-columns: 1fr; gap: 0; margin-top: 3rem; }
  .ab-voices li { padding: 1.5rem 0; }
  .ab-voices li:last-child { padding-bottom: 0; }
}

/* ---------- What I do most ---------- */
.ab-menu { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-bottom: 1px solid var(--ab-line-strong); }
.ab-menu li { border-top: 1px solid var(--ab-line-strong); }
.ab-menu a {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 1.25rem; align-items: baseline; gap: .35rem 2rem;
  padding: 1.35rem 0; text-decoration: none; color: var(--ab-ink);
}
.ab-menu__name { font-family: var(--ab-serif); font-size: var(--ab-fs-line); line-height: 1.3; }
.ab-menu__note { font-size: var(--ab-fs-small); color: var(--ab-muted); line-height: 1.45; }
.ab-menu__arrow { width: 1.25rem; height: 1.25rem; align-self: center; color: var(--ab-muted); transition: transform .25s var(--ab-ease), color .25s var(--ab-ease); }
.ab-menu a:hover .ab-menu__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.ab-menu a:hover .ab-menu__arrow { transform: translateX(4px); color: var(--ab-ink); }
@media (max-width: 599px) {
  .ab-menu a { grid-template-columns: minmax(0, 1fr) 1.25rem; padding: 1.1rem 0; }
  .ab-menu__note { grid-column: 1; grid-row: 2; }
  .ab-menu__arrow { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- The salon ---------- */
.ab-salon__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; }
.ab-salon__media { grid-column: 1 / span 7; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #2a2622; }
.ab-salon__media picture, .ab-salon__media img, .ab-salon__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-salon__media video { opacity: 0; transition: opacity 1.2s var(--ab-ease); }
.ab-salon__media video.is-playing { opacity: 1; }
.ab-salon__body { grid-column: 9 / -1; }
.ab-salon__body .ab-h2 { margin-top: 1.25rem; }
.ab-visit { margin-top: 2rem; border-bottom: 1px solid var(--ab-line); }
.ab-visit > div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--ab-line); }
.ab-visit dt { padding-top: .2rem; font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ab-muted); }
.ab-visit dd { font-size: 1rem; line-height: 1.5; color: var(--ab-text); }
.ab-directions { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; font-size: var(--ab-fs-small); }
.ab-loop-toggle {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2; width: 44px; height: 44px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(22, 19, 16, .18); background: rgba(250, 246, 238, .86); color: var(--ab-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ab-loop-toggle svg { width: 1rem; height: 1rem; }
.ab-loop-toggle .i-play { display: none; }
.ab-loop-toggle.is-paused .i-play { display: block; }
.ab-loop-toggle.is-paused .i-pause { display: none; }
@media (max-width: 959px) {
  .ab-salon__media, .ab-salon__body { grid-column: 1 / -1; }
  .ab-salon__body { margin-top: 2.25rem; }
}
@media (max-width: 599px) {
  .ab-salon__grid { padding-inline: 0; }
  .ab-salon__media { border-radius: 0; }
  .ab-salon__body { padding-inline: var(--ab-gutter); }
}

/* ---------- Before you book ---------- */
.ab-faq { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-bottom: 1px solid var(--ab-line-strong); }
.ab-faq details { border-top: 1px solid var(--ab-line-strong); }
/* akila-chrome.css styles every summary; these rules are more specific and replace its marker and padding. */
.ab .ab-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; padding: 1rem 0;
  cursor: pointer; list-style: none; font-family: var(--ab-serif); font-size: var(--ab-fs-line); font-weight: 400; line-height: 1.3; color: var(--ab-ink);
}
.ab .ab-faq summary::-webkit-details-marker { display: none; }
.ab .ab-faq summary::after {
  content: "+"; position: static; transform: none; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border: 1px solid var(--ab-edge); border-radius: 999px; background: none;
  font-family: var(--ab-sans); font-size: 1rem; font-weight: 400; line-height: 1; color: var(--ab-ink);
}
.ab .ab-faq details[open] summary::after { content: "\2212"; transform: none; }
.ab-faq details p { max-width: 38rem; padding: 0 3rem 1.5rem 0; font-size: 1rem; line-height: 1.6; color: var(--ab-text); }

/* ---------- Close: on cream, one yellow button ---------- */
.ab-close { padding-block: var(--ab-section); border-top: 1px solid var(--ab-line); text-align: center; }
.ab-close__sub { margin: 1.25rem auto 0; max-width: 32rem; color: var(--ab-muted); font-size: 1.0625rem; }
.ab-close__ctas { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2.25rem; }
@media (max-width: 599px) {
  .ab-close { padding-bottom: calc(var(--ab-section) + 3rem); }
  .ab-close__ctas { flex-direction: column; align-items: stretch; gap: .25rem; }
  .ab-close__ctas .ab-hero__call { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-rise { animation: none; }
  .ab-salon__media video, .ab-loop-toggle { display: none; }
  .ab-menu__arrow { transition: none; }
}

/* ======================= Service pages (added for Nanoplastia, 2026-09-24) ======================= */

/* Phones: service heroes show the whole photo first, edge to edge, at its own ratio (ruling 95). Tablets keep
   the words first, like About, so the Book button stays on the first screen. */
@media (max-width: 599px) {
  .ab-hero--photo-first .ab-hero__photo { order: -1; }
  .ab-hero--photo-first .ab-hero__photo,
  .ab-hero--photo-first .ab-hero__photo picture { width: 100%; max-width: none; margin: 0; }
  .ab-hero--photo-first .ab-hero__copy { padding-top: 1.75rem; }
}
.ab-hero__trust { margin-top: 1.25rem; font-size: var(--ab-fs-small); color: var(--ab-text); }
.ab-hero__trust + .ab-hero__rating { margin-top: .1rem; }

/* Two hairline lists side by side. */
.ab-lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.ab .ab-lists h3 { font-family: var(--ab-sans); font-size: var(--ab-fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ab-muted); }
.ab-lists ul { margin-top: .75rem; border-bottom: 1px solid var(--ab-line-strong); }
.ab-lists li { padding: .95rem 0; border-top: 1px solid var(--ab-line-strong); font-family: var(--ab-serif); font-size: var(--ab-fs-line); line-height: 1.35; color: var(--ab-ink); }
@media (max-width: 767px) { .ab-lists { grid-template-columns: 1fr; gap: 2.5rem; } }

/* A product named with its own photo, small. */
.ab-product { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.ab-product img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--ab-white); }
.ab-product p { font-size: var(--ab-fs-small); color: var(--ab-muted); line-height: 1.4; }
.ab-product strong { display: block; font-family: var(--ab-serif); font-size: 1.125rem; font-weight: 400; color: var(--ab-ink); }

/* The before/after wipe (ruling 79) keeps its own markup and akila-service.css rules; this only spaces it. */
.ab-proof { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.ab-proof .proof-visual { margin: 0; }
.ab-score { display: inline-flex; align-items: center; min-height: 44px; margin-top: .75rem; font-size: var(--ab-fs-small); }

/* Photo beside three steps. */
.ab-process { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem); align-items: start; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.ab-process__photo { grid-column: 1 / span 5; margin: 0; border-radius: 12px; overflow: hidden; background: #e9dfcd; }
.ab-process__photo img { width: 100%; height: auto; }
.ab-process__steps { grid-column: 7 / -1; }
.ab-process__steps .ab-step:first-child { border-top: 1px solid var(--ab-line-strong); }
.ab-process__steps .ab-step { padding: 1.5rem 0; border-top: 1px solid var(--ab-line); }
.ab-process__steps .ab-step__meta { display: block; margin-top: .6rem; font-size: .8125rem; letter-spacing: .04em; color: var(--ab-muted); }
@media (max-width: 959px) {
  .ab-process { grid-template-columns: 1fr; }
  .ab-process__photo { grid-column: 1; max-width: 420px; }
  .ab-process__steps { grid-column: 1; margin-top: 2rem; }
}
/* The wipe's plate is sized by height (4:5), so between 721px and ~1100px it left no room for the side column
   and pushed the page sideways (the 768px bug). Cap its height so the plate plus a 13rem side column always fit. */
@media (min-width: 721px) {
  .ab-proof .proof-stage { --ab-pair-h: min(calc(100svh - var(--nav-h) - 48px), 780px, calc((100vw - 2 * var(--ab-gutter) - 64px - 13rem) * 1.25)); min-height: calc(var(--ab-pair-h) + 70vh); }
  .ab-proof .proof-stage .proof-pair { height: var(--ab-pair-h); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) { .ab-proof .proof-stage { min-height: 0; } }
/* The wipe's divider moved with `left`, which browsers count as layout shift (CLS 0.004 per pass). Same line,
   drawn at the left edge of a full-width layer and moved with a transform, which is not a layout shift. */
@media (min-width: 721px) {
  .ab-proof .proof-stage .proof-pair::after {
    left: 0; width: 100%; margin-left: -2px; box-shadow: none;
    background: linear-gradient(to right, rgba(22, 16, 12, .22) 0 1px, var(--paper) 1px 3px, rgba(22, 16, 12, .22) 3px 4px, transparent 4px);
    transform: translateX(var(--reveal));
  }
}

/* Reviews: the house pattern (ruling 54): four equal cards, each with a small uppercase category label, a star
   row, the quote, and the reviewer's name and source. Never a single pull-quote. Quiet version: white cards on cream. */
.ab-reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.ab-reviews > li { display: flex; }
.ab-review { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 1.5rem 1.4rem 1.35rem; background: var(--ab-white); border: 1px solid var(--ab-line); border-radius: 12px; }
.ab-review__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ab-review__tag { font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ab-muted); }
.ab-review__stars { font-size: .75rem; letter-spacing: .12em; color: var(--ab-ink); white-space: nowrap; }
.ab-review blockquote { margin: 1.1rem 0 0; flex: 1; }
.ab-review blockquote p { font-family: var(--ab-serif); font-size: 1.125rem; line-height: 1.45; color: var(--ab-ink); text-wrap: pretty; }
.ab-review figcaption { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--ab-line); font-size: .875rem; color: var(--ab-ink); }
.ab-review figcaption span { display: block; color: var(--ab-muted); font-size: .8125rem; }
@media (max-width: 1099px) { .ab-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .ab-reviews { grid-template-columns: 1fr; } }

/* Ruling 48: on hover the yellow deepens and lifts; the label stays dark. */
.ab-btn--accent { transition: background-color .25s var(--ab-ease), transform .25s var(--ab-ease), box-shadow .25s var(--ab-ease); }
.ab-btn--accent:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(22, 19, 16, .45); }
@media (prefers-reduced-motion: reduce) { .ab-btn--accent:hover { transform: none; } }

/* ======================= Colour correction (2026-09-24) ======================= */
/* Photo beside copy. */
.ab-split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; }
.ab-split__media { grid-column: 1 / span 5; margin: 0; border-radius: 12px; overflow: hidden; background: #e9dfcd; }
.ab-split__media img { width: 100%; height: auto; }
.ab-split__body { grid-column: 7 / -1; }
.ab-split__body .ab-h2 { margin-top: 1.25rem; }
.ab-small--tight { margin-top: .5rem; }
@media (max-width: 959px) {
  .ab-split { grid-template-columns: 1fr; }
  .ab-split__media { grid-column: 1; max-width: 420px; }
  .ab-split__body { grid-column: 1; margin-top: 2rem; }
}

/* A row of results at one height, each photo at its own ratio (flex-grow = aspect ratio). */
.ab-gallery { display: flex; gap: clamp(.75rem, 1.5vw, 1.25rem); margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.ab-gallery figure { flex: calc(var(--ar)) 1 0; aspect-ratio: var(--ar); margin: 0; border-radius: 12px; overflow: hidden; background: #e9dfcd; }
.ab-gallery img { width: 100%; height: 100%; }
@media (max-width: 767px) {
  .ab-gallery { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .ab-gallery figure { aspect-ratio: auto; }
  .ab-gallery img { height: auto; }
}

/* The colour-correction wipe (.cc-ba-*, ruling 79): same height cap and transform divider as the Nanoplastia one. */
@media (min-width: 721px) {
  .cc-v3 .ab-proof .cc-ba-stage { --ab-pair-h: min(calc(100svh - var(--nav-h) - 48px), 780px, calc((100vw - 2 * var(--ab-gutter) - 64px - 13rem) * 1.25)); min-height: calc(var(--ab-pair-h) + 70vh); }
  .cc-v3 .ab-proof .cc-ba-pair { height: var(--ab-pair-h); }
  .cc-v3 .ab-proof .cc-ba-pair::after {
    left: 0; width: 100%; margin-left: -2px; box-shadow: none;
    background: linear-gradient(to right, rgba(22, 16, 12, .22) 0 1px, var(--paper) 1px 3px, rgba(22, 16, 12, .22) 3px 4px, transparent 4px);
    transform: translateX(var(--reveal));
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) { .cc-v3 .ab-proof .cc-ba-stage { min-height: 0; } }

/* ======================= Balayage (2026-09-24): owner-settled hero and results stay as they are ======================= */
.ab-facts--after-card { border-top: 1px solid var(--ab-line); }
.ab > #proof.proof-v2 { border-top: 1px solid var(--ab-line); }
.ab > #proof.proof-v2 + .ab-section { border-top: 1px solid var(--ab-line); }
/* The settled results block keeps its markup; its heading takes the quiet type so it matches the sections around it. */
.ab #proof.proof-v2 .chapter-num { font-family: var(--ab-sans); font-size: var(--ab-fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ab-muted); }
.ab #proof.proof-v2 .chapter-num .num { display: none; }
.ab #proof.proof-v2 .section-title { font-family: var(--ab-serif); font-size: var(--ab-fs-h2); font-weight: 350; letter-spacing: -.012em; line-height: 1.1; }
/* The settled hero's rating link is 21px tall; a larger invisible hit area makes it a 44px tap target without moving anything. */
.ab #hero .hero-rating { position: relative; }
.ab #hero .hero-rating::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* A wide still life (Higgsfield, objects only) with one line set on its open side. Desktop: 21:9, text over the
   plain wall and stone on the left, a cream wash behind it, never a dark scrim. Phones: the 4:5 detail, text below. */
.ab-still { position: relative; margin: 0; background: #e9dfcd; border-top: 1px solid var(--ab-line); }
.ab-still picture, .ab-still img { display: block; width: 100%; }
.ab-still img { height: auto; }
.ab-still__line { display: grid; gap: .75rem; padding: 1.5rem var(--ab-gutter) 0; background: var(--ab-paper); }
.ab-still__text { font-family: var(--ab-serif); font-size: var(--ab-fs-statement); font-weight: 350; line-height: 1.25; color: var(--ab-ink); text-wrap: balance; }
.ab-still__text em { font-style: italic; font-weight: 330; }
@media (min-width: 768px) {
  .ab-still { aspect-ratio: 2688 / 1152; max-height: 86vh; overflow: hidden; }
  .ab-still img { height: 100%; object-fit: cover; object-position: 70% 60%; }
  .ab-still::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 55% 80% at 12% 50%, rgba(250, 246, 238, .82) 0%, rgba(250, 246, 238, .5) 55%, rgba(250, 246, 238, 0) 100%); }
  .ab-still__line { position: absolute; z-index: 1; left: max(var(--ab-gutter), calc((100vw - var(--ab-max)) / 2)); top: 50%; transform: translateY(-50%);
    max-width: min(26rem, 34vw); padding: 0; background: none; }
}
@media (max-width: 767px) { .ab-still { border-top: 0; } .ab-still__line { padding-bottom: .5rem; } }

/* Detail still beside a statement and steps (the careers "role" layout). The image is hidden below 960px, where
   the band above already shows it. */
.ab-role { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; }
.ab-role__image { grid-column: 1 / span 5; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #e9dfcd; }
.ab-role__image img { width: 100%; height: 100%; object-fit: cover; }
.ab-role__body { grid-column: 7 / -1; }
.ab-role__body .ab-h2 { margin-top: 1.25rem; }
.ab-role__steps { margin-top: 2rem; }
.ab-role__body .ab-hero__ctas { margin-top: 2rem; }
@media (max-width: 959px) {
  .ab-role { grid-template-columns: 1fr; }
  .ab-role__image { display: none; }
  .ab-role__body { grid-column: 1; }
}
.ab-steps__cta { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
@media (max-width: 599px) { .ab-steps__cta .ab-btn { width: 100%; } }

/* ======================= Balayage v3 (2026-09-24): split headline hero, editorial suitability ======================= */
/* One big word, then the promise as a quieter line: the H1 text is unchanged. */
.ab .ab-display--split { max-width: none; }
.ab-display--split .ab-display__word { display: block; font-size: clamp(3.75rem, 1.6rem + 6.4vw, 7rem); line-height: .92; letter-spacing: -.035em; font-weight: 320; }
.ab-display--split .ab-display__line { display: block; margin-top: clamp(1rem, .6rem + 1vw, 1.5rem); max-width: 17em; font-size: clamp(1.5rem, 1.1rem + 1.25vw, 2.25rem); line-height: 1.2; letter-spacing: -.012em; font-weight: 350; }
.ab-display--split .ab-display__line em { font-weight: 330; }
.ab-hero--bal .ab-hero__lede { margin-top: 1.25rem; }
.ab-hero--bal .ab-hero__ctas { margin-top: 2rem; }

/* Three facts in the hero on one hairline row. */
.ab-hero__facts { display: flex; flex-wrap: wrap; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ab-line-strong); max-width: 30rem; }
.ab-hero__facts > div { padding-right: clamp(1.25rem, 2.5vw, 2.25rem); }
.ab-hero__facts > div + div { padding-left: clamp(1.25rem, 2.5vw, 2.25rem); border-left: 1px solid var(--ab-line); }
.ab-hero__facts dt { font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ab-muted); }
.ab-hero__facts dd { margin: .3rem 0 0; font-family: var(--ab-serif); font-size: 1.375rem; line-height: 1.2; color: var(--ab-ink); }
.ab-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: 1rem; font-size: var(--ab-fs-small); color: var(--ab-muted); }
.ab-hero__proof .ab-hero__rating { margin-top: 0; }
.ab-hero__proof .ab-star { letter-spacing: .1em; font-size: .75rem; }
.ab-hero__by { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 960px) { .ab-hero--bal .ab-hero__photo figcaption { display: none; } }
@media (max-width: 599px) {
  .ab-hero__facts { max-width: none; justify-content: space-between; }
  .ab-hero__facts > div, .ab-hero__facts > div + div { padding-left: 0; padding-right: 0; border-left: 0; }
  .ab-hero__proof { justify-content: center; text-align: center; }
}

/* Suitability: the skein held in view on the left while the list is read on the right. */
.ab-fit__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem); align-items: start; }
.ab-fit__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h, 85px) + 2rem); margin: 0; }
.ab-fit__media picture { display: block; aspect-ratio: var(--ab-fit-ratio, 4 / 5); overflow: hidden; border-radius: 12px; background: #eee5d6; }
.ab-fit__media img { width: 100%; height: 100%; object-fit: cover; }
.ab-fit__media figcaption { margin-top: .85rem; font-size: .8125rem; color: var(--ab-muted); }
.ab-fit__body { grid-column: 7 / -1; }
.ab-fit__body .ab-h2 { margin-top: 1.25rem; }
.ab .ab-fit__head { margin-top: clamp(2.25rem, 2rem + 1vw, 3rem); font-family: var(--ab-sans); font-size: var(--ab-fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ab-muted); }
.ab-fit__list { margin-top: .75rem; border-bottom: 1px solid var(--ab-line-strong); counter-reset: none; }
.ab-fit__list li { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding: 1.2rem 0; border-top: 1px solid var(--ab-line-strong); font-family: var(--ab-serif); font-size: var(--ab-fs-line); line-height: 1.35; color: var(--ab-ink); }
.ab-fit__n { font-size: .9375rem; color: var(--ab-muted); font-feature-settings: "lnum"; }
@media (max-width: 959px) {
  .ab-fit__grid { grid-template-columns: 1fr; }
  .ab-fit__media { position: static; grid-column: 1; max-width: 420px; }
  .ab-fit__body { grid-column: 1; margin-top: 2.25rem; }
}
@media (max-width: 599px) { .ab-fit__media { max-width: none; } }
@media (min-width: 960px) and (max-width: 1199px) {
  .ab-display--split .ab-display__word { font-size: 4.75rem; }
  .ab-display--split .ab-display__line { font-size: 1.625rem; }
  .ab-hero--bal .ab-hero__copy { padding-block: 2rem; }
}

/* ======================= Balayage "loom" sequence (Codex GPT Image stills, 2026-09-24) ======================= */
/* Desktop: a pinned full-width frame; three stills of one loom crossfade with scroll (loom.js) as the light moves
   from the dark roots of the threads to the honey ends. Phones and reduced motion: the last frame, as a still. */
.ab-loom { position: relative; padding: 0; background: #efe6d6; border-top: 1px solid var(--ab-line); }
.ab-loom__stage { position: relative; overflow: hidden; }
.ab-loom__frame { display: block; width: 100%; }
.ab-loom__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-loom__frame[data-frame="1"], .ab-loom__frame[data-frame="2"] { display: none; }
.ab-loom__line { display: grid; gap: .75rem; padding: 1.5rem var(--ab-gutter) 2rem; background: var(--ab-paper); }
.ab-loom__text { font-family: var(--ab-serif); font-size: var(--ab-fs-statement); font-weight: 350; line-height: 1.25; color: var(--ab-ink); text-wrap: balance; }
.ab-loom__text em { font-style: italic; font-weight: 330; }
@media (max-width: 767px) { .ab-loom__frame[data-frame="3"] img { aspect-ratio: 4 / 5; object-position: 82% 50%; } }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .ab-loom { height: 240vh; }
  .ab-loom__stage { position: sticky; top: var(--nav-h, 85px); height: calc(100svh - var(--nav-h, 85px)); }
  .ab-loom__frame, .ab-loom__frame[data-frame="1"], .ab-loom__frame[data-frame="2"] { display: block; position: absolute; inset: 0; }
  .ab-loom__frame[data-frame="2"], .ab-loom__frame[data-frame="3"] { opacity: 0; }
  .ab-loom__frame img { object-position: 70% 50%; }
}
@media (min-width: 768px) {
  .ab-loom__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse 55% 80% at 10% 50%, rgba(250, 246, 238, .78) 0%, rgba(250, 246, 238, .4) 55%, rgba(250, 246, 238, 0) 100%); }
  .ab-loom__line { position: absolute; z-index: 2; left: max(var(--ab-gutter), calc((100vw - var(--ab-max)) / 2)); top: 50%;
    transform: translateY(-50%); max-width: min(27rem, 36vw); padding: 0; background: none; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .ab-loom__stage { aspect-ratio: 16 / 9; max-height: 86vh; }
  .ab-loom__frame[data-frame="3"] { position: absolute; inset: 0; }
}

/* ======================= Balayage lookbook (real client photos, 2026-09-24) ======================= */
/* Three results side by side at their own ratio, the middle one set lower for rhythm. Phones: a swipe row. */
.ab-look__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); align-items: start; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ab-look__item:nth-child(2) { margin-top: clamp(2rem, 1rem + 4vw, 5.5rem); }
.ab-look__item figure { margin: 0; }
.ab-look__item picture { display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: 12px; background: #e9dfcd; }
.ab-look__item img { width: 100%; height: 100%; object-fit: cover; }
.ab-look__item figcaption { margin-top: 1rem; font-family: var(--ab-serif); font-size: var(--ab-fs-line); line-height: 1.3; color: var(--ab-ink); }
@media (max-width: 767px) {
  .ab-look__row { display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--ab-gutter) * -1); padding: 0 var(--ab-gutter) .5rem; scrollbar-width: none; }
  .ab-look__row::-webkit-scrollbar { display: none; }
  .ab-look__item { flex: 0 0 78%; scroll-snap-align: start; }
  .ab-look__item:nth-child(2) { margin-top: 0; }
  .ab-look__item figcaption { font-size: 1.0625rem; }
}
/* Two-photo spread: each photo five columns wide, the second set lower. */
.ab-look__row { grid-template-columns: repeat(12, 1fr); }
.ab-look__item:nth-child(1) { grid-column: 2 / span 5; }
.ab-look__item:nth-child(2) { grid-column: 7 / span 5; }
@media (max-width: 767px) { .ab-look__row { scroll-padding-inline: var(--ab-gutter); } .ab-look__item { flex-basis: 80%; } }


/* ======================= Balayage v6: woven bands, expansive results (2026-09-24) ======================= */
/* A band of the homepage's woven-brick motif, drawn as an SVG basketweave (32px tile, lit from the top left). */
.ab-weave { height: 56px; background: #f3ecdf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23b08f5a' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M17.00,17.00L39.00,17.00L39.00,39.00L17.00,39.00Z'/%3E%3Cpath d='M28.00,12.44L43.56,28.00L28.00,43.56L12.44,28.00Z'/%3E%3Cpath d='M43.56,28.00L56.00,28.00M12.44,28.00L0,28M28.00,12.44L28,0M28.00,43.56L28,56' stroke-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='1.6' fill='%23b08f5a'/%3E%3C/svg%3E") center / 56px 56px repeat-x; border-block: 1px solid var(--ab-line-strong); }
@media (max-width: 599px) { .ab-weave { height: 44px; background-size: 44px 44px; } }
.ab-weave + .ab-section, .ab-weave + .ab-close { border-top: 0; }

/* Suitability panel: the woven wall, decorative. */
.ab-fit__media--woven picture { aspect-ratio: 4 / 5; }
@media (max-width: 959px) { .ab-fit__media--woven { display: none; } }


/* Suitability without an image: the text sits on the page's label/body grid. */
@media (min-width: 960px) { .ab-fit--text .ab-fit__body { grid-column: 4 / -1; } }

/* ======================= Balayage results v7 (2026-09-25): one premium spread ======================= */
/* Scoped to .ab-results so the page's legacy #proof / .proof-v2 rules cannot reach in. */
.ab .ab-results { padding-block: var(--ab-section); background: var(--ab-paper); }
.ab-results__top { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.ab-results__pair { margin: 0; }
/* The owner's pair at its full 3:4 frame, as tall as the screen allows. */
.ab .ab-results .ba-slider { aspect-ratio: 3 / 4; height: min(calc(100svh - var(--nav-h, 85px) - 4rem), 860px); width: auto; border-radius: 4px; box-shadow: 0 30px 60px -40px rgba(22, 19, 16, .45); }
.ab .ab-results .ba-slider img { object-fit: cover; }
.ab-results__hint { margin-top: .9rem; font-size: .8125rem; letter-spacing: .02em; color: var(--ab-muted); }
.ab-results__side .ab-h2 { margin-top: 1.25rem; font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); line-height: 1.04; }
.ab-results__side .ab-body { margin-top: 1.5rem; color: var(--ab-muted); }
.ab-results__story { margin-top: 2.25rem; border-top: 1px solid var(--ab-line-strong); }
.ab-results__story > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--ab-line-strong); }
.ab-results__story dt { font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ab-muted); }
.ab-results__story dd { margin: 0; font-family: var(--ab-serif); font-size: var(--ab-fs-line); line-height: 1.3; color: var(--ab-ink); }
.ab-results__side .ab-hero__ctas { margin-top: 2.25rem; }

/* The four results: one row, larger, serif captions, a slow zoom on hover. */
.ab-results__more { margin-top: clamp(4.5rem, 3rem + 5vw, 8rem); }
.ab-results__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin-top: 1.5rem; }
.ab-results__grid figure { margin: 0; }
.ab-results__grid picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #e9dfcd; }
.ab-results__grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ab-ease); }
.ab-results__grid figure:hover img { transform: scale(1.03); }
.ab-results__grid figcaption { margin-top: .9rem; padding: 0; font-family: var(--ab-serif); font-size: 1.125rem; line-height: 1.3; color: var(--ab-ink); }

/* Reviews under the photos. */
.ab-results__voices { margin-top: clamp(4.5rem, 3rem + 5vw, 7rem); padding-top: 2rem; border-top: 1px solid var(--ab-line-strong); }
.ab-results__voices-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ab-results__voices-head .ab-score { margin-top: 0; }
.ab-results__voices .ab-reviews { margin-top: 1.25rem; }

@media (max-width: 1099px) {
  .ab-results__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab .ab-results .ba-slider { height: auto; width: 100%; }
}
@media (max-width: 767px) {
  .ab-results__top { grid-template-columns: 1fr; }
  .ab-results__pair { order: 2; margin-top: 2rem; }
  .ab-results__side { order: 1; }
  .ab-results__side .ab-hero__ctas { display: none; } /* the sticky Book bar is there on phones */
  .ab-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .875rem; }
  .ab-results__grid figcaption { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ab-results__grid img { transition: none; } .ab-results__grid figure:hover img { transform: none; } }

/* ======================= Balayage results v8 (2026-09-25): "more premium" ======================= */
/* A warmer gallery band, full width. */
.ab .ab-results { background: #f3ece0; border-top: 1px solid var(--ab-line); border-bottom: 1px solid var(--ab-line); }
.ab .ab-results + .ab-section { border-top: 0; }

/* The before/after: a hairline divider and a small cream handle instead of the yellow bar, circle and pills. */
.ab .ab-results .ba-slider { border-radius: 2px; box-shadow: 0 40px 80px -50px rgba(22, 19, 16, .55); }
.ab .ab-results .ba-handle { width: 1px; background: rgba(255, 254, 250, .92); box-shadow: 0 0 0 .5px rgba(22, 19, 16, .18); }
.ab .ab-results .ba-handle::after { width: 46px; height: 46px; background: rgba(250, 246, 238, .94); border: 1px solid rgba(22, 19, 16, .12); box-shadow: 0 8px 24px -8px rgba(22, 19, 16, .45); transform: translate(-22.5px, -23px); }
.ab .ab-results .ba-handle::before { content: "\2039\2002\203A"; font-family: var(--ab-serif); font-size: 20px; line-height: 1; color: var(--ab-ink); transform: translate(-50%, -52%); white-space: nowrap; }
.ab .ab-results .ba-label, .ab .ab-results .ba-label-before, .ab .ab-results .ba-label-after {
  top: 16px; padding: .35rem .7rem; border-radius: 999px; background: rgba(250, 246, 238, .9); color: var(--ab-ink);
  font-family: var(--ab-sans); font-size: .625rem; font-weight: 500; letter-spacing: .22em;
}
.ab .ab-results .ba-label-before { left: 16px; }
.ab .ab-results .ba-label-after { right: 16px; }
.ab-results__hint { display: flex; align-items: center; gap: .6rem; }
.ab-results__hint::before { content: ""; width: 1.75rem; height: 1px; background: var(--ab-line-strong); }

/* The story beside it: bigger contrast, a quieter lede. */
.ab-results__side .ab-h2 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.02em; }
.ab-results__story { border-top-color: var(--ab-ink); }

/* Four results: numbered small-caps captions, staggered like a magazine spread, square-ish corners. */
.ab-results__grid { counter-reset: look; align-items: start; column-gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.ab-results__grid figure { counter-increment: look; }
.ab-results__grid picture { border-radius: 2px; }
.ab-results__grid figcaption { display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--ab-line-strong); }
.ab-results__grid figcaption::before { content: counter(look, decimal-leading-zero); font-family: var(--ab-sans); font-size: .6875rem; letter-spacing: .12em; color: var(--ab-muted); }
@media (min-width: 768px) {
  .ab-results__grid figure:nth-child(2n) { margin-top: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
}

/* Reviews: open columns on hairlines, no white boxes (still four equal cards: label, stars, quote, name, ruling 54). */
.ab-results__voices { border-top-color: var(--ab-ink); }
.ab-results .ab-review { background: none; border: 0; border-top: 1px solid var(--ab-line-strong); border-radius: 0; padding: 1.5rem 0 0; }
.ab-results .ab-review blockquote p { font-size: 1.25rem; font-style: italic; font-weight: 330; line-height: 1.4; }
.ab-results .ab-review figcaption { border-top: 0; padding-top: 0; margin-top: 1.25rem; }
.ab-results .ab-reviews { column-gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 767px) { .ab-results__grid figcaption { grid-template-columns: 1.75rem 1fr; font-size: .9375rem; } }

/* ======================= Balayage hero v9 (2026-09-25): "more premium" ======================= */
/* Desktop: the column spans the photo's full height; the word sits at the top, the details are pinned to the bottom,
   so both edges of the copy line up with the photo. Ink hairline over the facts, larger serif figures. */
@media (min-width: 960px) {
  .ab-hero--bal { align-items: stretch; }
  .ab-hero--bal .ab-hero__copy { display: flex; flex-direction: column; padding-block: clamp(2.25rem, 1rem + 3vw, 4rem) clamp(2rem, 1rem + 2vw, 3rem); }
  .ab-hero--bal .ab-hero__lede { margin-top: auto; padding-top: 2rem; }
  .ab-hero--bal .ab-hero__photo picture, .ab-hero--bal .ab-hero__photo img { border-radius: 0; }
}
.ab-display--split .ab-display__word { letter-spacing: -.045em; }
.ab-display--split .ab-display__line { color: var(--ab-text); }
.ab-hero--bal .ab-hero__lede { color: var(--ab-muted); font-size: 1.0625rem; }
.ab-hero__facts { border-top-color: var(--ab-ink); max-width: 34rem; }
.ab-hero__facts dd { font-size: clamp(1.375rem, 1.1rem + .6vw, 1.75rem); letter-spacing: -.01em; }
.ab-hero__facts > div + div { border-left-color: var(--ab-line-strong); }
.ab-hero__proof { margin-top: 1.25rem; font-size: .875rem; }
.ab-hero__proof .ab-star { color: var(--ab-ink); }
.ab-hero__by::before { content: ""; width: 1px; height: 12px; margin-right: 1.25rem; background: var(--ab-line-strong); }
@media (max-width: 599px) { .ab-hero__by::before { display: none; } }
/* The hero object (GPT Image cut-out): stands on the hero's bottom line and straddles the photo's left edge. */
.ab-hero__object { display: none; }
@media (min-width: 960px) {
  .ab-hero--bal .ab-hero__photo { overflow: visible; }
  .ab-hero__object { display: block; position: absolute; z-index: 2; left: 0; bottom: 0; height: 52%; aspect-ratio: 988 / 1521; transform: translateX(-58%); pointer-events: none; filter: drop-shadow(0 18px 22px rgba(22, 19, 16, .22)); }
  .ab-hero__object img { width: 100%; height: 100%; }
}
/* The hero photo rules (picture/img 100%, background) must not reach the cut-out. */
.ab-hero .ab-hero__photo picture.ab-hero__object { background: none; width: auto; }
.ab-hero .ab-hero__photo .ab-hero__object img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
@media (min-width: 960px) { .ab-hero .ab-hero__photo picture.ab-hero__object { height: 52%; } }
@media (min-width: 960px) {
  .ab-hero--bal .ab-hero__facts { max-width: 26rem; }
  .ab-hero .ab-hero__photo picture.ab-hero__object { height: 50%; transform: translateX(-45%); }
}
@media (min-width: 960px) {
  .ab-hero--bal .ab-hero__facts { flex-wrap: nowrap; max-width: 27rem; }
  .ab-hero--bal .ab-hero__facts > div { padding-right: clamp(.9rem, 1.6vw, 1.5rem); }
  .ab-hero--bal .ab-hero__facts > div + div { padding-left: clamp(.9rem, 1.6vw, 1.5rem); }
  .ab-hero--bal .ab-hero__facts dd { white-space: nowrap; font-size: clamp(1.25rem, 1rem + .5vw, 1.5rem); }
}
@media (min-width: 960px) { .ab-hero--bal .ab-hero__facts { max-width: 26rem; } }

/* ======================= Balayage hero art (2026-09-25, owner's blue Persian direction) ======================= */
/* Desktop: the artwork is a tall panel on the right; the real photo sits in front of it, offset to the lower left, so the
   tilework shows above and beside the photo. Phones: the photo full width, then a slim strip of the tilework. */
.ab-hero--art .ab-hero__photo picture.ab-hero__art { background: #1f3f78; }
.ab-hero--art .ab-hero__art img { object-fit: cover; object-position: 50% 0; }
@media (min-width: 960px) {
  .ab-hero--art .ab-hero__photo { overflow: visible; }
  .ab-hero--art .ab-hero__photo picture.ab-hero__art { position: absolute; top: 0; right: 0; bottom: 0; width: 70%; height: auto; }
  .ab-hero--art .ab-hero__photo picture.ab-hero__main { position: absolute; left: 0; bottom: 8%; width: 76%; height: auto; aspect-ratio: 1 / 1; z-index: 1; box-shadow: 0 40px 70px -40px rgba(10, 22, 48, .6); }
}
@media (max-width: 959px) {
  .ab-hero--art .ab-hero__photo { display: flex; flex-direction: column; }
  .ab-hero--art .ab-hero__photo picture.ab-hero__main { order: 1; }
  .ab-hero--art .ab-hero__photo picture.ab-hero__art { order: 2; height: 56px; aspect-ratio: auto; }
  .ab-hero--art .ab-hero__art img { object-position: 50% 12%; }
  .ab-hero--art .ab-hero__photo figcaption { order: 3; }
}

/* ======================= Balayage canvas hero (2026-09-25): the careers mechanism, blue Persian art ======================= */
/* The art (GPT Image) is made to melt into the page cream on its left, so the words sit on the cream and the art
   spreads in from the right edge. A soft cream wash from the left protects the text at narrower widths. */
.ab-hero--canvas { background: #fbf6ee; }
.ab-hero--canvas picture.ab-hero__canvas { display: block; background: #fbf6ee; }
.ab-hero--canvas .ab-hero__canvas img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .ab-hero--canvas { display: block; position: relative; overflow: hidden; min-height: clamp(640px, calc(100svh - var(--ab-nav)), 860px); }
  .ab-hero--canvas .ab-hero__canvas { position: absolute; top: var(--ab-nav); right: 0; bottom: 0; left: 0; }
  .ab-hero--canvas .ab-hero__canvas img { object-position: 100% 50%; }
  .ab-hero--canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: linear-gradient(90deg, rgba(251, 246, 238, .96) 0%, rgba(251, 246, 238, .9) 32%, rgba(251, 246, 238, 0) 52%); }
  .ab-hero--canvas .ab-hero__copy { position: relative; z-index: 1; max-width: min(40rem, 48vw); min-height: calc(clamp(640px, calc(100svh - var(--ab-nav)), 860px) - var(--ab-nav)); }
}
@media (max-width: 959px) {
  .ab-hero--canvas { display: flex; flex-direction: column; }
  .ab-hero--canvas .ab-hero__canvas { order: 2; aspect-ratio: 936 / 1024; max-height: 70svh; }
  .ab-hero--canvas .ab-hero__canvas img { object-position: 60% 50%; }
}

/* ======================= Balayage hero seam (2026-09-25, own design) ======================= */
/* The photo stays the hero. Behind its left edge, a narrow strip of the blue Persian art (dense side tucked under the
   photo, dissolving side out in the cream) makes the blue of the hair look as if it seeps into the page as ink and
   gold. The strip's outer edge is masked to nothing, so there is no box. Desktop only; phones stay clean. */
.ab-hero__seam { display: none; }
@media (min-width: 960px) {
  .ab-hero--seam .ab-hero__photo { overflow: visible; }
  .ab-hero--seam .ab-hero__photo picture.ab-hero__main { position: relative; z-index: 1; }
  .ab-hero .ab-hero__photo picture.ab-hero__seam {
    display: block; position: absolute; z-index: 0; top: 0; bottom: 0; right: calc(100% - 22%); width: auto; height: 100%;
    aspect-ratio: 640 / 1024; background: none; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  }
  .ab-hero .ab-hero__photo .ab-hero__seam img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
}
@media (min-width: 960px) {
  .ab-hero--seam { --seam-out: clamp(60px, 7vw, 130px); }
  .ab-hero--seam .ab-hero__copy { position: relative; z-index: 2; }
  .ab-hero .ab-hero__photo picture.ab-hero__seam {
    right: auto; left: calc(-1 * var(--seam-out));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--seam-out)); mask-image: linear-gradient(90deg, transparent 0, #000 var(--seam-out));
  }
  .ab-hero .ab-hero__photo .ab-hero__seam img { object-position: 0 50%; }
}
@media (min-width: 960px) { .ab-hero--seam { --seam-out: clamp(70px, 9vw, 170px); } }

/* ======================= Balayage hero v11 (2026-09-25): composed, two-tone ======================= */
/* A warm stone panel behind the words, the photo beside it: one composition, no void in the middle. */
@media (min-width: 960px) {
  .ab-hero--bal { background: #f3ece0; align-items: center; }
  .ab-hero--bal .ab-hero__copy { display: block; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
  .ab-hero--bal .ab-hero__lede { margin-top: clamp(1.75rem, 1rem + 1.5vw, 2.5rem); padding-top: 0; max-width: 26rem; }
  .ab-hero--bal .ab-hero__ctas { margin-top: 2rem; }
  .ab-hero--bal .ab-hero__facts { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
  .ab-display--split .ab-display__word { font-size: clamp(4.5rem, 1.6rem + 6.4vw, 8rem); }
}
/* Short ink rule between the word and the promise. */
.ab-display--split .ab-display__line::before { content: ""; display: block; width: 3rem; height: 1px; margin-bottom: clamp(1rem, .8rem + .6vw, 1.5rem); background: var(--ab-ink); }
/* One proof line: stars and rating, a dot, the colourist. */
.ab-hero__proof { flex-wrap: wrap; gap: .25rem .6rem; }
.ab-hero__by::before { display: none; }
.ab-hero__dot { color: var(--ab-muted); }
@media (max-width: 599px) { .ab-hero__dot { display: none; } .ab-hero__proof { flex-direction: column; gap: 0; } }
.ab-hero__dot { display: none; }
.ab-hero--bal .ab-hero__proof { flex-direction: column; align-items: flex-start; gap: 0; }
.ab-hero--bal .ab-hero__proof .ab-hero__rating, .ab-hero--bal .ab-hero__by { min-height: 30px; }
@media (min-width: 960px) { .ab-hero--bal .ab-hero__copy { padding-block: clamp(1.75rem, .75rem + 2vw, 3rem); } }
@media (max-width: 599px) { .ab-hero--bal .ab-hero__proof { align-items: center; } }
/* Rating link keeps a 44px tap area on touch screens; tighter on desktop. */
@media (max-width: 959px) { .ab-hero--bal .ab-hero__proof .ab-hero__rating { min-height: 44px; } }
/* 960-1199: the word a size down so the words fit beside the smaller photo. */
@media (min-width: 960px) and (max-width: 1199px) {
  .ab-display--split .ab-display__word { font-size: 4.25rem; }
  .ab-hero--bal .ab-hero__facts { margin-top: 1.75rem; }
  .ab-hero--bal .ab-hero__lede { margin-top: 1.25rem; }
}

/* ======================= Suitability v12 (2026-09-25): the choice, then who it suits ======================= */
.ab-fit--menu .ab-fit__grid { align-items: start; }
.ab-fit__lead { grid-column: 1 / span 5; }
.ab-fit--menu .ab-fit__body { grid-column: 7 / -1; padding-top: .55rem; }
.ab-fit__lead .ab-h2 { margin-top: 1.25rem; }
.ab-fit--menu .ab-fit__head { margin-top: 0; }
/* The menu: four services on ink-topped hairlines, this page's service marked. */
.ab-menu-table { width: 100%; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-collapse: collapse; border-top: 1px solid var(--ab-ink); }
.ab-menu-table caption { caption-side: top; text-align: left; padding-bottom: .9rem; }
.ab-menu-table th, .ab-menu-table td { padding: 1rem 0; border-bottom: 1px solid var(--ab-line-strong); text-align: left; vertical-align: baseline; font-weight: 400; }
.ab-menu-table tbody th { font-family: var(--ab-serif); font-size: var(--ab-fs-line); color: var(--ab-ink); }
.ab-menu-table td { font-size: var(--ab-fs-small); color: var(--ab-muted); white-space: nowrap; padding-left: 1rem; }
.ab-menu-table td:last-child { text-align: right; font-family: var(--ab-serif); font-size: 1.125rem; color: var(--ab-ink); }
.ab-menu-table tr.is-this th { font-style: italic; }
.ab-menu-table tr.is-this th::after { content: "This page"; margin-left: .75rem; font-family: var(--ab-sans); font-style: normal; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ab-muted); vertical-align: middle; }
.ab-fit__lead .ab-small { margin-top: 1rem; }
@media (max-width: 959px) {
  .ab-fit__lead, .ab-fit--menu .ab-fit__body { grid-column: 1 / -1; }
  .ab-fit--menu .ab-fit__body { margin-top: 3rem; padding-top: 0; }
}
@media (max-width: 599px) { .ab-menu-table tr.is-this th::after { display: none; } }

/* ======================= Suitability v13 (2026-09-25): "more premium" ======================= */
/* One composition instead of two stacks: a large editorial statement across the top, then the menu set like a
   restaurant card and the four reasons as an open two-by-two grid. More air, finer type, gold-free restraint. */
.ab .ab-fit--menu { padding-block: clamp(5.5rem, 3.5rem + 6vw, 10rem); }
.ab-fit--menu .ab-fit__grid { row-gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ab-fit--menu .ab-fit__lead { display: contents; }
.ab-fit--menu .ab-fit__lead > .ab-label { grid-column: 1 / span 3; grid-row: 1; padding-top: .9rem; }
.ab-fit--menu .ab-fit__lead > .ab-h2 { grid-column: 4 / -1; grid-row: 1; margin-top: 0; font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.5rem); line-height: 1.02; letter-spacing: -.022em; max-width: 14em; }
.ab-fit--menu .ab-menu-table { grid-column: 1 / span 5; grid-row: 2; margin-top: 0; align-self: start; }
.ab-fit--menu .ab-fit__lead > .ab-small { grid-column: 1 / span 5; grid-row: 3; margin-top: -2.5rem; }
.ab-fit--menu .ab-fit__body { grid-column: 7 / -1; grid-row: 2 / span 2; padding-top: 0; }

/* The menu card: small caps caption, dotted leaders between service and price, times in small caps. */
.ab-menu-table { border-top: 0; }
.ab-menu-table caption { padding-bottom: 1.25rem; border-bottom: 1px solid var(--ab-ink); }
.ab-menu-table th, .ab-menu-table td { padding: 1.35rem 0; border-bottom-color: var(--ab-line); }
.ab-menu-table tbody th { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); font-weight: 350; }
.ab-menu-table td:nth-child(2) { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; }
.ab-menu-table td:last-child { font-size: clamp(1.125rem, 1rem + .3vw, 1.3125rem); font-feature-settings: "lnum"; }
.ab-menu-table tr.is-this th::after { content: none; }
.ab-menu-table tr.is-this th { font-style: italic; }
.ab-menu-table tr.is-this td:last-child { font-style: italic; }
.ab-menu-table tr.is-this { background: linear-gradient(90deg, rgba(243, 236, 224, 0) 0, #f3ece0 12%, #f3ece0 88%, rgba(243, 236, 224, 0) 100%); }

/* The four reasons: an open 2 x 2, large serif numerals. */
.ab-fit--menu .ab-fit__head { padding-bottom: 1.25rem; border-bottom: 1px solid var(--ab-ink); }
.ab-fit--menu .ab-fit__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); margin-top: 0; border-bottom: 0; }
.ab-fit--menu .ab-fit__list li { display: block; padding: 1.75rem 0 2rem; border-top: 0; border-bottom: 1px solid var(--ab-line); font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); line-height: 1.4; }
.ab-fit--menu .ab-fit__n { display: block; margin-bottom: .9rem; font-family: var(--ab-serif); font-size: clamp(2rem, 1.5rem + 1.2vw, 2.75rem); font-weight: 300; font-style: italic; line-height: 1; color: #b9ab93; letter-spacing: -.02em; }
.ab-fit--menu .ab-fit__body > .ab-small { margin-top: 1.75rem; }

@media (max-width: 959px) {
  .ab-fit--menu .ab-fit__lead { display: block; grid-column: 1 / -1; }
  .ab-fit--menu .ab-fit__lead > .ab-h2 { margin-top: 1.25rem; }
  .ab-fit--menu .ab-menu-table { margin-top: 2.5rem; }
  .ab-fit--menu .ab-fit__lead > .ab-small { margin-top: 1rem; }
  .ab-fit--menu .ab-fit__body { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
}
@media (max-width: 599px) {
  .ab-fit--menu .ab-fit__list { grid-template-columns: 1fr; }
  .ab-fit--menu .ab-fit__list li { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding: 1.25rem 0; }
  .ab-fit--menu .ab-fit__n { margin: 0; font-size: 1.75rem; }
}
@media (min-width: 960px) {
  .ab-fit--menu .ab-fit__lead > .ab-small { grid-row: 3; margin-top: 0; align-self: end; }
  .ab-fit--menu .ab-fit__body { grid-row: 2; }
  .ab-fit--menu .ab-fit__body > .ab-small { position: absolute; }
  .ab-fit--menu .ab-fit__grid { position: relative; row-gap: 0; }
  .ab-fit--menu .ab-fit__lead > .ab-h2 { margin-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
}
.ab-menu-table tr.is-this { background: #f3ece0; }
.ab-menu-table tr.is-this th { padding-left: .9rem; }
.ab-menu-table tr.is-this td:last-child { padding-right: .9rem; }
.ab-fit--menu .ab-fit__body > .ab-small { position: static; }
@media (min-width: 960px) {
  .ab-fit--menu .ab-fit__note { grid-column: 7 / -1; grid-row: 3; margin-top: 0; align-self: end; }
  .ab-fit--menu .ab-fit__lead > .ab-small, .ab-fit--menu .ab-fit__note { padding-top: 1.75rem; }
}
@media (max-width: 959px) { .ab-fit--menu .ab-fit__note { grid-column: 1 / -1; } }
.ab-fit--menu .ab-fit__n { color: #8a7a62; }

/* ---------- One voice with the homepage (2026-09-25, owner: every page at the homepage's premium level) ----------
   The homepage's language, applied here: small-caps labels in warm brown, section ledes in italic serif, one fine
   bronze rule closing each section head, and grounds alternating paper / stone section by section (no two stone
   bands touching). Layout, copy, photos and actions unchanged. */
.ab-label { color: #6b5a4a; }
.ab .ab-h2 + .ab-body, .ab .ab-h2 + .ab-small {
  font-family: var(--ab-serif); font-style: italic; font-size: 1.1875rem; line-height: 1.5; color: #5c5046;
}
.ab .ab-section .ab-h2:not(:has(+ .ab-body)):not(:has(+ .ab-small))::after,
.ab .ab-section .ab-h2 + .ab-body::after,
.ab .ab-section .ab-h2 + .ab-small::after {
  content: ""; display: block; width: 56px; height: 1px; background: #b38a5e; margin-top: 24px;
}
.ab .ab-section .ab-h2.ab-center::after, .ab .ab-close .ab-h2::after { margin-inline: auto; }
.ab { background: #fffefa; }
.ab > .ab-section:nth-of-type(odd):not(.ab-hero):not(.ab-facts):not(.ab-close) { background: #f3ece0; }
.ab > .ab-section + .ab-section { border-top: 0; }
.ab .ab-close__sub { font-family: var(--ab-serif); font-style: italic; font-size: 1.1875rem; line-height: 1.5; color: #5c5046; }
/* One type scale, every page (2026-09-25): every section heading 32 -> 48px, H1 40 -> 72px. */
.ab { --ab-fs-display: clamp(2.5rem, 1.35rem + 4.3vw, 4.5rem); }
.ab .ab-section .ab-h2, .ab #suitability .ab-h2, .ab #proof .ab-h2, .ab .ab-results .ab-h2 { font-size: var(--ab-fs-h2); line-height: 1.1; }

/* Phones, nanoplasty (2026-09-26): the edge-to-edge photo (ruling 95) is tall enough to push the Book button below the
   first screen, so the sticky bar covered the lede instead. The Book row moves up under the headline; the photo is untouched. */
@media (max-width: 599px) {
  .ab-hero--cta-first .ab-hero__copy { display: flex; flex-direction: column; padding-top: 1.25rem; }
  .ab-hero--cta-first .ab-hero__copy > * { order: 3; }
  .ab-hero--cta-first .ab-label, .ab-hero--cta-first .ab-display { order: 1; }
  .ab-hero--cta-first .ab-hero__ctas { order: 2; margin-top: 1rem; }
  .ab-hero--cta-first .ab-hero__lede { margin-top: 1.25rem; }
}

/* Phones (2026-09-26): the results gallery used a plain 2-column grid, so photos of different ratios left ragged
   gaps. Two photos per row at one shared height, each at its own ratio (the desktop method), never cropped. */
@media (max-width: 767px) {
  .ab-gallery { display: flex; flex-wrap: wrap; align-items: stretch; }
  .ab-gallery figure { flex: calc(var(--ar)) 1 calc(var(--ar) * 38vw); aspect-ratio: var(--ar); }
  .ab-gallery img { height: 100%; }
}