/* ============================================================================
   theme.css: light "quiet luxury" theme (client request, Oct 2026)
   ----------------------------------------------------------------------------
   Colours and fonts only; the layout is unchanged. Loaded last on every page.
   Most colours were converted in place by build/theme-light.js. This file
   covers what a colour swap alone can't: the new fonts and their sizing,
   sentence-case serif headings, button contrast, text that sits on photos,
   the map, and her original black logo.

   Fonts (SIL OFL, self-hosted, variable):
     headings  Cormorant Garamond   text and labels  Jost
   ========================================================================== */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/CormorantGaramond-var.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/CormorantGaramond-Italic-var.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/Jost-var.woff2') format('woff2'); }

:root {
  /* per-font vertical metrics for .leading-trim (see tokens.css)
     Cormorant Garamond: asc .924 desc .287 cap .63  Jost: asc 1.07 desc .375 cap .70 */
  --display-fos: -0.19em;
  --display-foe: -0.18em;
  --text-fos: -0.15em;
  --text-foe: -0.15em;
  /* a serif runs far wider than the condensed face it replaces */
  --display-size-adjust: 0.6;
  --c-rose: #c9a196;
  --c-cream: #f7f1ec;
  --c-blush: #f1e6df;
  --c-card: #fffcfa;
  --c-title: #6e4f47;
  color-scheme: light;
}
body { font-weight: 400; letter-spacing: 0.06em; }
::selection { background: #e8cfc6; color: #3b2e29; }

/* ---- headings: light serif in sentence case, like the reference -------- */
.h1, .h2, .h3, .h4,
.title-lines, .services__name, .statement__word, .stats__value, .creds__index-head,
.pg-h1, .pg-h2, .pg-h3, .pg-card__t, .pg-table td:nth-child(2), .pg-steps li::before,
.er-title, .er-feature__lead, .er-score__num,
.eh-hero__title, .eh-cred__title, .eh-stats strong,
.header__promo-t, .pl__n, .menu__link {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.005em;
}
.title-lines__line--accent, .pg-h1, .pg-h2, .pg-h3, .er-title, .eh-hero__title { color: var(--c-title); }
.pg-h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.04; }
.pg-h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.pg-h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; }
.pg-card__t { font-size: 26px; line-height: 1.1; font-weight: 400; color: var(--c-title); }
.pg-table td:nth-child(2) { font-size: 24px; font-weight: 500; }
.er-title { font-size: clamp(48px, 6.4vw, 104px); line-height: .95; }
.er-feature__lead { font-size: clamp(30px, 3vw, 50px); line-height: 1.08; }
.eh-hero__title { font-size: clamp(42px, 3.6vw, 66px); line-height: 1.02; letter-spacing: 0; }
.eh-hero__accent { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--c-accent); }
.eh-cred__title { font-size: 24px; text-transform: none; font-weight: 400; }
.menu__link { font-weight: 300; }
.services__name { font-weight: 300; }

/* ---- buttons: dusty rose with ink text (5.4:1); deeper rose on hover --- */
.header__cta, .btn--cta, .header__qbook, .header__promo-btn, .pg-btn--solid, .eh-btn--solid {
  background: var(--c-rose);
  border-color: var(--c-rose);
  color: #3b2e29;
}
.has-hover .header__cta:hover, .has-hover .btn--cta:hover, .has-hover .header__qbook:hover,
.header__promo-btn:hover, .pg-btn--solid:hover, .eh-btn--solid:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-cream);
}
.btn--cta .btn__label { color: inherit; }
.has-hover .footer__directions:hover, .has-hover .footer__book:hover, .mbook__quick:active { color: var(--c-cream); }
.eh-btn { border-color: rgb(59 46 41 / 0.32); }
.pg-gal__tabs label { background: var(--c-card); }
[id^="gal-"]:checked ~ .pg-gal__tabs label[for^="gal-"] { color: inherit; }
#gal-all:checked ~ .pg-gal__tabs label[for="gal-all"],
#gal-g1:checked ~ .pg-gal__tabs label[for="gal-g1"],
#gal-g2:checked ~ .pg-gal__tabs label[for="gal-g2"],
#gal-g3:checked ~ .pg-gal__tabs label[for="gal-g3"],
#gal-g4:checked ~ .pg-gal__tabs label[for="gal-g4"],
#gal-g5:checked ~ .pg-gal__tabs label[for="gal-g5"] { background: var(--c-rose); border-color: var(--c-rose); color: #3b2e29; }

/* ---- surfaces ------------------------------------------------------------ */
.pg-hero { background: radial-gradient(120% 80% at 85% 0%, rgb(201 161 150 / 0.22), transparent 60%), var(--c-blush); }
.pg-card, .pg-review, .pg-faq details, .fs__list, .header__panel-inner { background-color: var(--c-card); }
.pg-review { background: linear-gradient(160deg, rgb(201 161 150 / 0.16), var(--c-card) 60%); }
.contact { background: var(--c-blush); }
.footer { background: #efe3db; }
.mbook { box-shadow: 0 -6px 24px rgb(59 46 41 / 0.08); }

/* ---- text that sits on photos stays light ------------------------------- */
.pg-photos figcaption { color: #fff; }
.er-feature__tag { color: #fff; }
/* From 980px the intro quote sits on the photo and the copy straddles the
   cream ground and the photo; below that the template stacks them under it. */
@media (min-width: 980px) {
  .intro__quote {
    color: #fff;
    --c-white: #fff;
    --c-accent: #f0d3c8;
    --c-title: #f0d3c8;
    --c-white-40: rgb(255 255 255 / 0.8);
    --c-white-20: rgb(255 255 255 / 0.3);
  }
  .intro__copy {
    background: rgb(247 241 236 / 0.94);
    padding: 28px 30px 30px calc(var(--grid-col) * 0.5);
    box-shadow: 0 18px 40px rgb(59 46 41 / 0.12);
  }
}

/* ---- maps: light tiles, softened -------------------------------------- */
.footer__map iframe, .pg-map iframe { filter: grayscale(0.6) sepia(0.12) contrast(0.95); }

/* ---- her original black logo (mark + "Brows and Beauty" in one frame) --- */
.header__wordmark, .loader__word { display: none; }
.header__mark { height: 5.4rem; width: auto; }
.is-scrolled .header__mark { height: 4.2rem; }
.menu__brand img { height: 4.4rem; width: auto; }
.footer__mark { height: 9.6rem; width: auto; }
.loader__mark img { width: min(260px, 60vw); height: auto; }
@media (max-width: 667px) {
  .header__mark { height: 4.6rem; }
  .is-scrolled .header__mark { height: 3.8rem; }
}

/* ---- banner: calmer background so the text reads cleanly --------------- */
/* the outlined name becomes a soft filled watermark (no lines through text) */
.eh-hero__word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  color: rgb(201 161 150 / 0.13);
  -webkit-text-stroke: 0;
}
/* golden-ratio grid nearly invisible; the spiral stays as one fine line */
.eh-phi__grid rect { stroke: rgb(59 46 41 / 0.035); }
.eh-phi__spiral { stroke: rgb(201 161 150 / 0.38); stroke-width: 1; }
.eh-phi__dots circle { opacity: .5; }
/* a soft cream wash behind the copy column keeps every line crisp */
.eh-hero__copy { position: relative; }
.eh-hero__copy::before {
  content: '';
  position: absolute;
  inset: -40px -60px -40px -120px;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(247 241 236 / 0.92), rgb(247 241 236 / 0));
  pointer-events: none;
}

/* ---- intro heading ("Your brows, our artistry"): stronger contrast ------ */
.intro__head .title-lines { font-weight: 400; }
.intro__head .title-lines__line--accent { color: #6e4f47; }
.intro__head .title-lines__line--white { color: #3b2e29; }
.intro__kicker { font-size: 12px; letter-spacing: 0.24em; color: #8c5f54; }

/* serif numerals: less bottom trim so the label never runs into them */
.stats__value { --fos: -0.12em; --foe: 0.02em; display: block; margin-bottom: 12px; }

/* "Her work" list hidden (client request): the Real clients strip and the
   Gallery page already show the same photos */
.creds__index { display: none; }

/* the intro quote stays inside the photo (cols 3-10) so no letter lands on cream */
@media (min-width: 980px) {
  .intro__quote { grid-column: 7 / span 4; padding-right: calc(var(--grid-col) * 0.35); }
}

/* ---- her own page content (build.js herBody) ---------------------------- */
.pg-her { max-width: 78ch; display: grid; gap: 16px; color: rgb(59 46 41 / 0.82); font-size: 17px; line-height: 1.7; }
.pg-her p { margin: 0; }
.pg-her strong { color: #3b2e29; font-weight: 500; }
.pg-her a:not(.pg-btn) { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.pg-her__h2, .pg-her__h3, .pg-her__h4 { margin: 0; font-family: var(--font-display); color: var(--c-title); text-transform: none; letter-spacing: 0.005em; }
.pg-her__h2 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 400; line-height: 1.1; margin-top: 26px; }
.pg-her__h3 { font-size: clamp(25px, 2.4vw, 32px); font-weight: 400; line-height: 1.15; margin-top: 22px; }
.pg-her__h4 { font-size: clamp(21px, 1.9vw, 25px); font-weight: 500; line-height: 1.2; margin-top: 14px; color: #3b2e29; }
.pg-her > :first-child { margin-top: 0; }
.pg-her .pg-list { margin: 0; }
.pg-her .pg-actions { margin: 10px 0 6px; }
.pg-her .pg-photos { margin: 8px 0; }
.pg-her__quote { margin: 10px 0; padding: 18px 24px; border-left: 3px solid var(--c-rose); background: var(--c-card); font-family: var(--font-display); font-size: 24px; line-height: 1.35; color: #3b2e29; }
.pg-table--her td { color: rgb(59 46 41 / 0.85); font-family: var(--font-text); font-size: 15px; font-weight: 400; letter-spacing: 0.02em; }
.pg-table--her td:nth-child(2) { font-family: var(--font-text); font-size: 15px; color: rgb(59 46 41 / 0.85); white-space: normal; }
.pg-table--her tr:first-child td { font-weight: 500; color: #3b2e29; }

/* ---- "More" drop-down: a short list under its link --------------------- */
.header__drop--list { position: relative; }
.header__drop--list .header__panel { left: 50%; right: auto; width: 330px; padding: 0; transform: translate(-50%, -8px); }
.header__drop--list:hover .header__panel,
.header__drop--list:focus-within .header__panel { transform: translate(-50%, 0); }
.header__drop--list.is-closed .header__panel { transform: translate(-50%, -8px); }
.header__drop--list .header__panel-inner { display: block; max-width: none; padding: 12px 0; }
.header__drop--list .header__panel-inner a {
  display: block; padding: 11px 24px;
  font-size: 12.5px; letter-spacing: 0.08em; line-height: 1.45; color: rgb(59 46 41 / 0.85);
  transition: color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.header__drop--list .header__panel-inner a:hover,
.header__drop--list .header__panel-inner a:focus-visible { color: var(--c-accent); background: var(--c-blush); }
/* the mega panel now has three service groups + the consultation box */
.header__panel-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); }

/* ---- pop-out menu: "More" view on phones, all groups on larger screens -- */
@media (max-width: 767px) {
  .is-menu-more .menu__nav,
  .is-menu-more .menu__contact,
  .is-menu-more .menu__actions { display: none; }
  .is-menu-more .menu__services { display: block; animation: menu-svc-in .35s var(--e-out) both; }
  .is-menu-more .menu__group[data-group="svc"] { display: none; }
  .is-menu-svc .menu__group[data-group="more"] { display: none; }
  .is-menu-more .menu__back { display: inline-flex; }
  .menu__link[data-menu-more]::after { content: ' →'; font-size: 0.6em; vertical-align: middle; }
}
@media (min-width: 768px) {
  .menu__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* footer: brand + five link columns (her menu groups, More, Studio) */
html .footer { grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { html .footer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { html .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* phone menu: six main links (More added) still fit one screen */
@media (max-width: 767px) {
  .menu__link { font-size: clamp(24px, 4.2vh, 40px); }
}
@media (min-width: 768px) and (max-width: 1100px) and (max-height: 820px) {
  .menu__services { gap: 12px 24px; }
  .menu__sub { padding: 3px 0; font-size: 12px; }
  .menu__group-title { margin-bottom: 6px; padding-bottom: 6px; }
}

/* group titles take the same height (up to two lines), so every divider
   line sits level even when one title wraps */
.header__group-title, html .footer__col h4, .menu__group-title {
  min-height: calc(2 * 1.45em + 14px);
  display: flex;
  align-items: flex-end;
  line-height: 1.45;
}
@media (max-width: 767px) {
  html .footer__col h4, .menu__group-title { min-height: 0; }
}

/* About page photo captions: small, refined labels (the same words are the
   images' alt text) */
.pg-about__side figure { position: relative; margin: 0; }
.pg-about__side figcaption {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  font-family: var(--font-text); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-accent);
}
.pg-about__side figcaption::before { content: ''; width: 28px; height: 1px; background: var(--c-rose); flex: none; }

/* About page reviews: a balanced masonry so short and long reviews sit well */
.pg-reviews { display: block; columns: 3 300px; column-gap: 16px; }
.pg-reviews .pg-review { break-inside: avoid; margin-bottom: 16px; }

/* titles on one line where there is room: wider first column, tighter tracking */
.header__group-title, html .footer__col h4, .menu__group-title { letter-spacing: 0.18em; }
@media (min-width: 1101px) {
  html .footer { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  html .footer__col h4, .header__group-title { white-space: nowrap; min-height: 0; }
}
@media (min-width: 1101px) {
  .header__panel-inner { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); }
}

/* ---- banner stats: fine line icons; separate cards on phones ----------- */
.eh-ico {
  flex: none;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgb(201 161 150 / 0.55);
  border-radius: 50%;
  color: var(--c-accent);
  align-self: center;
}
.eh-ico svg { width: 20px; height: 20px; }
.eh-stats li { align-items: center; }
@media (max-width: 767px) {
  .eh-stats { gap: 12px; padding: 24px 0 40px; margin-bottom: 8px; border-bottom: 1px solid rgb(59 46 41 / 0.12); }
  .eh-stats li {
    align-items: flex-start; gap: 8px;
    padding: 18px 16px;
    background: var(--c-card);
    border: 1px solid rgb(201 161 150 / 0.35);
    box-shadow: 0 10px 24px rgb(59 46 41 / 0.06);
  }
  .eh-ico { width: 38px; height: 38px; margin-bottom: 4px; }
  .eh-ico svg { width: 18px; height: 18px; }
}

/* ---- section titles: one size on phones across every section ----------- */
@media (max-width: 767px) {
  .title-lines.h2, .title-lines.h3, .er-title {
    font-size: clamp(38px, 10.5vw, 50px);
    line-height: 1.04;
  }
}

/* ---- phone bottom bar: Book + Text + Contact ----------------------------- */
.mbook__quick { letter-spacing: 0.12em; }

/* drop-down consultation button: full width, never spills its label */
.header__promo-btn { width: 100%; padding: 0 14px; font-size: 10.5px; letter-spacing: 0.14em; white-space: nowrap; }

/* drop-down columns sized to their content (Lips is short) */
@media (min-width: 1101px) {
  .header__panel-inner {
    grid-template-columns: max-content max-content minmax(200px, 1fr) minmax(250px, 300px);
    gap: clamp(32px, 4vw, 72px);
  }
}

/* footer: brand + four link columns (Studio column removed; the header has those links) */
html .footer { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); }
@media (min-width: 1101px) { html .footer { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { html .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* footer phone with icon, like the header */
.footer__tel { display: inline-flex; align-items: center; gap: 10px; }
.footer__tel svg { width: 17px; height: 17px; color: var(--c-accent); flex: none; }

/* footer: the short Lips column takes only the width it needs */
@media (min-width: 1101px) {
  html .footer { grid-template-columns: minmax(220px, 1.15fr) minmax(0, 1.25fr) max-content minmax(0, 1.15fr) minmax(0, 1.25fr); }
}

/* ---- service pages: her words, arranged (build.js herServiceBody) ------- */
.pg-svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pg-svc-main { max-width: 70ch; }
.pg-her__lead { font-size: 19px; line-height: 1.65; color: #3b2e29; }
.pg-price {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 16px;
  background: var(--c-blush); border: 1px solid rgb(201 161 150 / 0.45);
  font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: 0.01em; color: var(--c-title);
}
.pg-price strong { font-weight: 600; color: var(--c-title); }
.pg-price--lg { font-size: 28px; padding: 10px 20px; }
.pg-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0; }
.pg-svc-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px;
  background: var(--c-card); border: 1px solid rgb(201 161 150 / 0.35);
  box-shadow: 0 12px 30px rgb(59 46 41 / 0.06);
}
.pg-svc-card__t { margin: 0; font-family: var(--font-display); font-size: 25px; font-weight: 500; line-height: 1.15; color: var(--c-title); }
.pg-svc-card .pg-price { font-size: 20px; padding: 6px 14px; }
.pg-svc-card p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.pg-svc-card em { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent); }

.pg-svc-aside { position: sticky; top: 110px; }
.pg-book-card {
  display: grid; gap: 12px;
  padding: 28px 26px;
  background: linear-gradient(160deg, rgb(201 161 150 / 0.2), var(--c-card) 55%);
  border: 1px solid rgb(201 161 150 / 0.45);
  box-shadow: 0 18px 40px rgb(59 46 41 / 0.08);
}
.pg-book-card .pg-kicker { margin-bottom: 4px; line-height: 1.5; }
.pg-book-card .pg-btn { width: 100%; }
.pg-book-card__rows { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid rgb(59 46 41 / 0.12); display: grid; gap: 6px; font-size: 13.5px; color: rgb(59 46 41 / 0.75); }

.pg-svc-faq .pg-her__h2 { margin: 0 0 22px; }
.pg-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pg-qa { padding: 24px; background: var(--c-card); border: 1px solid rgb(59 46 41 / 0.1); border-top: 2px solid var(--c-rose); }
.pg-qa h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 23px; font-weight: 500; line-height: 1.2; color: var(--c-title); text-transform: none; letter-spacing: 0; }
.pg-qa p { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgb(59 46 41 / 0.82); }
.pg-qa p + p { margin-top: 8px; }

@media (max-width: 1024px) {
  .pg-svc-layout { grid-template-columns: minmax(0, 1fr); }
  .pg-svc-aside { position: static; max-width: 480px; }
}
@media (max-width: 767px) {
  .pg-svc-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-her__lead { font-size: 17px; }
}
.pg-svc-card .pg-price, .pg-price { align-self: flex-start; width: auto; }
.pg-price, .pg-table td:nth-child(2), .eh-stats strong, .stats__value, .er-score__num { font-variant-numeric: lining-nums; }

/* drop-downs: while one is open, the band between the nav and its panel
   counts as part of it, so a diagonal mouse path doesn't close it */
.header__drop:hover > .header__link--drop::before { left: -100vw; right: -100vw; height: 56px; }
.header__drop .header__link--drop::before { z-index: 1; }

/* grace period: a panel stays open (and hoverable) for ~0.45s after the
   pointer leaves, so a diagonal path across other links still reaches it */
.header__panel {
  pointer-events: auto;
  transition: opacity .2s var(--e-out) .25s, transform .2s var(--e-out) .25s, visibility 0s linear .45s;
}
.header__drop:hover .header__panel,
.header__drop:focus-within .header__panel {
  transition: opacity .25s var(--e-out), transform .25s var(--e-out), visibility 0s;
}
.header__drop.is-closed .header__panel { transition: opacity .15s, transform .15s, visibility 0s linear .15s; }

/* ---- banner stats on desktop: frosted glass band (no line), like the
   scrolled header; the portrait runs behind it instead of fading out ----- */
@media (min-width: 1025px) {
  .eh-stats {
    margin: 0 calc(var(--eh-gutter, 40px) * -1);
    padding: 24px var(--eh-gutter, 40px) 30px;
    border-top: 0;
    background: rgb(247 241 236 / 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 -12px 30px rgb(59 46 41 / 0.05);
  }
  .eh-hero__portrait { -webkit-mask-image: none; mask-image: none; }
}

/* phones: stat icon tucked into the card's top-right corner, cards shorter */
@media (max-width: 767px) {
  .eh-stats li { position: relative; padding: 16px 52px 16px 16px; gap: 6px; text-align: left; }
  .eh-ico { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; margin: 0; }
  .eh-ico svg { width: 16px; height: 16px; }
}
@media (max-width: 767px) {
  .eh-stats li { padding-right: 14px; }
  .eh-stats li strong { padding-right: 38px; }
}

/* ---- homepage services list: bold names; tidy rows on phones ------------ */
.services__name { font-weight: 600; letter-spacing: 0; }
@media (max-width: 767px) {
  .services__link {
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 6px;
    padding: 22px 20px;
    align-items: start;
    align-content: start;
  }
  .services__thumb { width: 84px; height: 84px; align-self: start; grid-row: 1 / span 3; border: 1px solid rgb(201 161 150 / 0.4); }
  .services__num { font-size: 11px; letter-spacing: 0.2em; line-height: 1; padding-top: 2px; }
  .services__name {
    font-size: 25px; line-height: 1.12;
    transform: none !important;
  }
  .services__name::before, .services__name::after { content: none; }   /* no leading-trim pull on phones */
  .services__desc { font-size: 14.5px; line-height: 1.55; color: rgb(59 46 41 / 0.72); }
  .has-hover .services__list:hover .services__item:not(:hover) .services__name { color: var(--c-white); }
}

/* ---- intro stats (94 / +24): line icons like the banner; cards below 980px */
.stats__item { position: relative; }
.stats__item::before {
  content: '';
  width: 40px; height: 40px; margin-bottom: 6px;
  border: 1px solid rgb(201 161 150 / 0.55);
  border-radius: 50%;
  background: center / 18px 18px no-repeat;
}
.stats__item:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5f54' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); }
.stats__item:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c5f54' stroke-width='1.3' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='M8.6 13.4 7.5 21l4.5-2.6 4.5 2.6-1.1-7.6'/%3E%3C/svg%3E"); }
/* on the photo (980px and up) the icons are light, like the text */
@media (min-width: 980px) {
  .intro__quote .stats__item::before { border-color: rgb(255 255 255 / 0.45); filter: brightness(0) invert(1); opacity: 0.85; }
}
@media (max-width: 979px) {
  .intro__quote .stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    margin: 28px 0 0; padding: 0 0 40px; border-top: 0;
    border-bottom: 1px solid rgb(59 46 41 / 0.12);
  }
  .intro__quote .stats__item {
    padding: 16px 14px; gap: 6px;
    background: var(--c-card);
    border: 1px solid rgb(201 161 150 / 0.35);
    box-shadow: 0 10px 24px rgb(59 46 41 / 0.06);
  }
  .intro__quote .stats__item::before { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; margin: 0; background-size: 16px 16px; }
  .intro__quote .stats__value { font-size: 44px; padding-right: 38px; }
  .intro__quote .stats__label { font-size: 11px; letter-spacing: 0.16em; line-height: 1.5; }
  .services { padding-top: 48px; }
}

/* ---- six menu groups (Brows, Lips, Paramedical, Non-PMU, Lash, Policies) - */
/* links that jump to a treatment card land below the fixed header */
.pg-svc-card { scroll-margin-top: 120px; }

/* Services drop-down: 3 x 2 grid of groups, consultation box beside it */
@media (min-width: 1181px) {
  .header__panel-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(250px, 290px); row-gap: 30px; }
  .header__promo { grid-column: 4; grid-row: 1 / span 2; align-self: start; }
}
@media (min-width: 1101px) and (max-width: 1180px) {
  .header__panel-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
}
.header__group-title { white-space: normal; }

/* footer: logo column + two rows of three link groups */
@media (min-width: 1101px) {
  html .footer { grid-template-columns: minmax(230px, 1.1fr) repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  html .footer__brand { grid-row: span 2; }
  html .footer__col h4 { white-space: normal; }
}

/* phone pop-out menu: service groups flow in two columns under Back */
@media (max-width: 767px) {
  .is-menu-svc .menu__services { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; gap: 4px 20px; }
  .menu__back { grid-area: auto; grid-column: 1 / -1; }
  .menu__group:nth-of-type(n) { grid-area: auto; }
}

/* pop-out menu with six groups: three columns on wide screens, tighter on short ones */
@media (min-width: 1101px) {
  .menu__services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
}
@media (min-width: 768px) and (max-height: 700px) {
  .menu__group-title { min-height: 0; padding-bottom: 6px; margin-bottom: 4px; }
  .menu__sub { padding: 2px 0; font-size: 11.5px; }
  .menu__services { row-gap: 14px; }
}
@media (min-width: 768px) and (max-width: 1100px) and (max-height: 820px) {
  .menu__services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
@media (min-width: 768px) and (max-height: 700px) {
  .menu__link { font-size: clamp(26px, 5vh, 40px); padding: 2px 0; }
}

/* ---- Mayling's notes (21 Oct 2026) ---- */
/* menu: bigger (main items only; dropdown links have their own classes) */
.header__link { font-size: calc(var(--fs-small) * 1.4); }
/* banner: warm taupe background (her reference: soft beige → mushroom) */
.eh-hero { background: linear-gradient(100deg, #f1e7e0 0%, #e8dad0 45%, #dbc8bb 100%); }
/* hours: "Sat & Sun closed" on its own line */
.contact__value, .menu__value { white-space: pre-line; }
.eh-hero::before { background: radial-gradient(circle, rgb(255 255 255 / 0.32) 0%, rgb(255 255 255 / 0.18) 38%, transparent 66%); }
/* menu: a little less space between items (Mayling, 21 Oct 2026) */
.header__nav { gap: calc(var(--sp-2) * 0.7); }
/* "Confidence": her cut-out photo on a warm colour box; the part of the word
   inside the box shows in soft white behind her (assets/js/statement-ghost.js) */
.statement__portrait { position: relative; background: linear-gradient(165deg, #e9dbd0 0%, #dcc9bc 55%, #cfb9aa 100%); }
.statement__portrait img { position: relative; z-index: 3; }
.statement__ghost { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .3s; }
.statement__ghost.is-on { opacity: 1; }
.statement__ghost-word { position: absolute; left: 0; top: 0; margin: 0; color: rgb(255 255 255 / 0.6); }
/* phone: like desktop, the word spans the section behind her head, brown
   outside the box and soft white inside it (behind her) */
@media (max-width: 667px) {
  .statement { display: grid; }
  .statement__word { font-size: calc((100vw - 2 * var(--sp-2)) / 4.6); white-space: nowrap; }
  .statement__word:not(.statement__ghost-word) {
    grid-area: 1 / 1; align-self: start; justify-self: center; margin: 6% 0 0;
  }
  .statement__portrait { grid-area: 1 / 1; }
  .statement__copy { grid-area: 2 / 1; }
  .statement__ghost-word { margin: 0; text-align: left; }
}
/* About photo: no scrim over her face; darken only the lower part where the
   quote and copy sit on the picture (Mayling, 22 Oct 2026) */
.intro__media::after {
  background: linear-gradient(180deg, transparent 0%, transparent 52%, rgb(0 0 0 / 0.28) 70%, rgb(0 0 0 / 0.78) 100%);
}