/* ===================================================================
   Benito Brow Bar — Global Stylesheet
   Phase 1: tokens, typography, zero-shift reset, header, nav, sticky CTA
   Static build — vanilla CSS3, no framework. Mobile-first.
   =================================================================== */

/* ---- Design tokens (LOCKED — warm Japandi) ---- */
:root {
  --cream:        #F4F0EB; /* page background */
  --ink:          #2C2A29; /* body + headline text */
  --brand-orange: #F28D00; /* primary warm/script accent */
  --blush:        #E3D2BF; /* soft tint — retuned from #E3C4BE (hue 9.7 pink) to hue 31 */
  --jl-green:     #8DAD9B; /* John Lewis identity tone — JL refs only */
  --jl-green-dark:#789482; /* JL button hover */

  /* derived / functional */
  /* ---- ONE ORANGE — 31 Aug 2026 -----------------------------------
     Every orange on the site is now #F28D00, sampled directly from
     img/logo.svg. The site previously carried SEVEN different oranges
     (#F8911E, #A2590A, #834707, #CA7316, #7D5730 plus two aliases) and
     none of them was the logo's own colour — which is why the eyebrow
     labels, card borders and buttons never quite matched the wordmark.

     The separate tokens are kept as names so the ~90 rules referring to
     them keep working, but they now all resolve to the same value. If a
     genuine second shade is ever needed, change it here, not in a rule.

     ACCESSIBILITY — a deliberate, informed decision by Marco, 31 Aug.
     #F28D00 is 2.16:1 on cream. As SMALL TEXT that is below the 4.5:1
     WCAG AA threshold, so the eyebrow labels (SERVICES, OUR WORK,
     BROWS…) and the timings lines are now hard to read for anyone with
     reduced vision. Marco was shown the figures and chose brand
     consistency over the threshold. DO NOT "fix" this by quietly
     darkening these tokens — that reintroduces exactly the mismatch he
     asked to remove. Revert point: StylesRollback_v12_PreOrangeUnify.css
     As a FILL behind dark text it is 5.84:1 and passes comfortably;
     on the charcoal footer it is 5.21:1 and also passes. */
  --orange-soft:  #F1C89D; /* pale tint fill — not a brand orange, unused */
  --orange-mid:   #F28D00;
  --orange-deep:  #F28D00;
  --clay:         var(--orange-text);   /* alias, retired */
  --clay-dark:    var(--orange-deep);   /* alias, retired */
  --orange-dark:  #F28D00;
  --ink-gloss:    linear-gradient(158deg, #4c473f 0%, #35322e 34%, #2a2825 62%, #1f1d1c 100%); /* lush glossy charcoal */
  --ink-gloss-84: linear-gradient(158deg, rgba(76,71,63,0.84) 0%, rgba(53,50,46,0.84) 34%, rgba(42,40,37,0.84) 62%, rgba(31,29,28,0.84) 100%); /* translucent gloss — bird shows through */
  --ink-60:       rgba(44, 42, 41, 0.80);
  --ink-12:       rgba(44, 42, 41, 0.12);

  /* --- Accent text colours -------------------------------------
     --orange-text was the darkened, AA-safe stand-in for the brand
     orange. As of 31 Aug it IS the brand orange: Marco asked for one
     consistent colour across the site and accepted the contrast cost.
     See the ONE ORANGE note above before changing it.

     --jl-green is John Lewis's identity tone and is NOT part of the
     unification — it stays its own colour deliberately, and --jl-text
     remains the AA-safe version of it for small text. */
  --orange-text:  #F28D00; /* logo orange · 2.16:1 on cream — below AA by choice */
  --jl-text:      #4F6E5C; /* 4.98:1 on cream — verified AA, unchanged */

  /* layout constants — drive zero-shift sizing */
  --header-h:     60px;    /* explicit, matches spec max-height */
  --footer-cta-h: 68px;    /* reserved space for sticky CTA */
  --maxw:         440px;   /* mobile-first content column */
  --radius-box:   24px;    /* generous curve on cards / boxes */
  --radius-btn:   14px;    /* squarer, lightly-rounded buttons */

  /* ---- type -------------------------------------------------------
     TEMP — 10 Sep 2026 — one family everywhere: Omnes Pro (Darden
     Studio), via Adobe Fonts, replacing the three-font system below.
     All roles point at the same family now; the weight each rule
     already declares (300/400/500/600) is what picks Light / Regular
     / Medium / SemiBold — no per-rule weight changes needed.
     Rollback: restore the block below + the 3 Google Fonts <link>
     lines in every page's <head>.

     Previous system (30 Aug 2026) — three fonts, each with one job:
       --font-display  Cormorant Garamond — page headings, section
                       headings, service titles, prices
       --font-accent   Montserrat — eyebrows, section labels, buttons,
                       nav; anything letter-spaced and uppercase
       --font-body     Inter — descriptions, timings, running text

     --font-head is kept as an alias; ~40 rules still reference it. */
  --serif-weight: 500;
  --font-display: "omnes-pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-head:    var(--font-display);
  --font-accent:  "omnes-pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "omnes-pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Muted earth/gold for eyebrows and category labels.
     5.06:1 on cream — passes WCAG AA. */
  --accent-muted: #F28D00;

  /* motion */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Global background wash — flattened to solid cream (removed the
     radial/linear gradient graduation per Marco's request, so only the
     flat card-back image shows behind content, no competing gradient).
     Rollback: 2026-08-15_BBB_StylesRollback_v9_PreOrangeWash.css or any
     zip before 2026-09-15_BBB_SiteDeploy_v80. */
  --wash: var(--cream);
}

/* ---- Reset / zero-layout-shift baseline ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Kill ALL default top margins that could push content below the fold */
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: 0.01em;
  /* Clear the fixed header (not dead space) + clear the floating buttons */
  padding-top: var(--header-h);
  padding-bottom: 0;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

/* Global background wash — flat cream, no gradient (see --wash).
   One fixed layer so it never repeats or reflows. Sits behind the
   background image (-1) and content. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background: var(--wash);
}

/* Lock scroll when the nav overlay is open */
body.nav-open { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* High-tracking sans utility for eyebrow labels */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-60);
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 30px;
}

/* ===================================================================
   HEADER — persistent, centred wordmark, left hamburger, max 60px
   =================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  max-height: var(--header-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 18px;
  background: transparent;           /* bar lives on ::before so it can fade */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(244, 240, 235, 0.12);
}
.site-header__left, .site-header__right { display: flex; align-items: center; gap: 16px; }

/* Desktop inline nav + header actions (hidden on mobile) */
.site-nav, .site-header__social, .site-header__book { display: none; }

/* Hamburger — left aligned, minimalist */
.nav-toggle {
  margin-left: -8px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 1002; /* stays above overlay so it can also close */
}
.nav-toggle__bars {
  position: relative;
  width: 22px; height: 1.5px;
  background: var(--cream);          /* cream on the charcoal bar */
  transition: background 0.2s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 1.5px;
  background: var(--cream);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease), background 0.2s var(--ease);
}
.nav-toggle__bars::before { top: -6px; }  /* top line */
.nav-toggle__bars::after  { top: 6px; }   /* bottom line */

/* Hover — all three lines turn orange */
.nav-toggle:hover .nav-toggle__bars,
.nav-toggle:hover .nav-toggle__bars::before,
.nav-toggle:hover .nav-toggle__bars::after { background: var(--brand-orange); }

/* Open → X (middle line hides, top + bottom cross) */
body.nav-open .nav-toggle__bars,
body.nav-open .nav-toggle:hover .nav-toggle__bars { background: transparent; }
body.nav-open .nav-toggle__bars::before,
body.nav-open .nav-toggle__bars::after { background: var(--ink); }
body.nav-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* Wordmark — sits far right (home link). */
.wordmark {
  display: inline-flex; align-items: center;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.wordmark em { font-style: italic; color: var(--brand-orange); }
/* Logo SVG — the far-right home link, a touch larger */
.wordmark__img { height: 36px; width: auto; display: block; }

/* Desktop nav links */
.site-nav a {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream);
  transition: color 0.18s var(--ease);
}
.site-nav a:hover { color: var(--orange-text); }
.site-header__social a { color: rgba(244, 240, 235, 0.75); display: flex; transition: color 0.18s var(--ease); }
.site-header__social a:hover { color: var(--orange-text); }
.site-header__social svg { width: 18px; height: 18px; }
.site-header__book { padding: 10px 20px; font-size: 0.78rem; }

/* ===================================================================
   NAV OVERLAY — full-screen, z-index layered, resets on every toggle
   =================================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--wash);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  /* hidden default state — opacity + visibility so it fully resets */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.32s var(--ease),
              transform 0.32s var(--ease),
              visibility 0s linear 0.32s;
}
body.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.32s var(--ease),
              transform 0.32s var(--ease),
              visibility 0s linear 0s;
}

/* Animated bird on the burger / drop-down screen (plays while open) —
   centred whole bird with feathered edges, matching .plumage */
.nav-overlay__bird {
  /* TEMP — full-bleed logotype watermark, fills the overlay edge to
     edge (replaces the capped/centred swirl-texture version). */
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  opacity: 1; z-index: 0;
  pointer-events: none; user-select: none;
}
.nav-overlay__list {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Card was stretching to the full width of .nav-overlay (flex column
     parent defaults to align-items: stretch), leaving a big empty gap
     on the right of the shorter text. align-self: flex-start makes it
     hug its own content width instead, so left/right padding matches. */
  align-self: flex-start;
  /* TEMP — readability fix: nav-overlay__bird now runs full-opacity
     behind these links with no scrim. Tinted white at 62% (matching
     the .signup card look) per Marco's request — the peach tint read
     too creamy and hurt legibility. Rollback: delete background/
     padding/border-radius below. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-box);
  padding: 20px 28px;
}
.nav-overlay__link {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  padding: 5px 0;
  transition: color 0.2s var(--ease);
}
.nav-overlay__link:hover,
.nav-overlay__link:focus-visible { color: var(--clay); }

/* v207 — avatar centred ABOVE the menu list with a clear gap before "Home"
   (Marco, 18 Oct: on the right of Home it read as a tappable button).
   Same image as the JustB header. Rollback: restore the v204 block
   (top-right, level with Home) from the v206 zip. */
.nav-overlay__home {
  --av: clamp(2.6rem, 11vw, 4.2rem);
  position: relative;
  padding-top: calc(var(--av) + 22px);
}
.nav-overlay__avatar {
  position: absolute; top: 0; left: 50%;
  width: var(--av); height: auto; aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none; user-select: none;
}
/* v207 — very faint chevron on the right of every menu item, so the rows
   read as tappable (Marco chose mock-up A, 18 Oct). Brand orange at 38%,
   aligned in one column at the card's right edge. Decorative only. */
.nav-overlay__link {
  display: flex; align-items: center; justify-content: space-between;
  column-gap: 36px;
}
.nav-overlay__link::after {
  content: ""; flex: none;
  width: 8px; height: 8px; margin-right: 3px;
  border-top: 1.5px solid rgba(242, 141, 0, 0.38);
  border-right: 1.5px solid rgba(242, 141, 0, 0.38);
  transform: rotate(45deg);
}

.nav-overlay__footnote {
  margin-top: 36px;
  color: var(--ink-60);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* ===================================================================
   STICKY FOOTER CTA — fixed bottom, anchored through all scrolling
   =================================================================== */
/* Floating round "Book now" button — identical to the contact button,
   pinned to the far RIGHT (contact sits far left). */
.cta-bar {
  position: fixed;
  right: 16px; left: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 999; /* below the nav overlay (1001) so it hides when menu open */
}
.cta-bar .cta-bar__btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.02em; line-height: 1.1;
  background: radial-gradient(circle at 35% 28%, #43403a, #2b2928 72%); color: var(--cream);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.08s var(--ease);
}
.cta-bar .cta-bar__btn:hover,
.cta-bar .cta-bar__btn:focus-visible { background: var(--brand-orange); color: var(--ink); }
.cta-bar .cta-bar__btn:active { background: var(--brand-orange); color: var(--ink); transform: scale(0.95); }
/* When the menu is open, drop the CTA out of the way */
body.nav-open .cta-bar { opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease); }

/* Floating buttons are ALWAYS visible while scrolling (owner decision,
   round 28) — the old floats-hidden / at-footer auto-hide is disabled.
   They still hide when the nav overlay is open (it covers the screen). */
.cta-bar, .contact { transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }

/* Contact anchor clears the fixed header + sticky bar when jumped to */
#contact { scroll-margin-top: 76px; scroll-margin-bottom: 84px; }

/* ===================================================================
   FLOATING CONTACT WIDGET (bottom-right, above the sticky Book bar)
   =================================================================== */
.contact {
  position: fixed;
  left: 16px; right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 1002; /* above header + floating book button */
}
body.nav-open .contact { opacity: 0; pointer-events: none; }

.contact__fab {
  width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: radial-gradient(circle at 35% 28%, #43403a, #2b2928 72%); color: var(--cream); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: background 0.2s var(--ease), transform 0.08s var(--ease);
}
.contact__fab:hover { background: var(--brand-orange); color: var(--ink); }
.contact__fab:active { transform: scale(0.95); }
.contact__fab svg { width: 24px; height: 24px; }

.contact__panel {
  position: absolute; left: 0; bottom: calc(100% + 12px);
  width: 300px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--ink-12); border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,0.22);
  transform: translateY(8px) scale(0.98); transform-origin: bottom left;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}
.contact.is-open .contact__panel {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
}
.contact__head {
  background: var(--ink); color: var(--cream);
  display: flex; align-items: center; gap: 8px; padding: 14px 16px;
}
.contact__title { font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; flex: 1; }
.contact__ico { background: none; border: 0; color: rgba(244,240,235,0.75); cursor: pointer; display: flex; padding: 4px; }
.contact__ico:hover { color: var(--orange-text); }
.contact__ico svg { width: 18px; height: 18px; }
.contact__ico--x { margin-left: auto; }
.contact__body { padding: 12px; }
.contact__hint { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); padding: 6px 6px 10px; }
.contact__stores { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; }
.contact__store { text-align: left; background: none; border: 0; cursor: pointer; padding: 10px; border-radius: 10px; display: flex; flex-direction: column; }
.contact__store:hover { background: var(--blush); }
.contact__store-name { font-weight: 600; font-size: 0.95rem; transition: color 0.15s var(--ease); }
.contact__store:hover .contact__store-name { color: var(--orange-text); }
.contact__store-host { font-size: 0.78rem; color: var(--ink-60); }
.contact__body--actions { display: flex; flex-direction: column; gap: 10px; }
.contact__action {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px;
  background: var(--blush); color: var(--ink); font-size: 0.92rem; font-weight: 500;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.contact__action:hover { background: var(--brand-orange); color: var(--ink); }
.contact__action svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* v124 — "Remind me" treatment + date step */
.contact__body--treat { display: flex; flex-direction: column; gap: 10px; }
.contact__treats { max-height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.contact__treat-cat { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); padding: 8px 6px 2px; }
.contact__treat { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 1px solid var(--ink-12); border-radius: 10px; padding: 9px 10px; cursor: pointer; font-size: 0.9rem; color: var(--ink); }
.contact__treat:hover { background: var(--blush); }
.contact__treat.is-on { background: var(--blush); border-color: var(--brand-orange); font-weight: 600; }
.contact__treat-tick { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--ink-12); display: grid; place-items: center; font-size: 0.8rem; line-height: 1; }
.contact__treat.is-on .contact__treat-tick { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink); }
.contact__date { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--ink-60); padding: 2px 6px; }
.contact__date-input { font: inherit; font-size: 0.9rem; color: var(--ink); border: 1px solid var(--ink-12); border-radius: 10px; padding: 7px 9px; background: #fff; }
.contact__name { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--ink-60); padding: 2px 6px; }
.contact__name-input { font: inherit; font-size: 1rem; color: var(--ink); border: 1px solid var(--ink-12); border-radius: 10px; padding: 9px 10px; background: #fff; }
/* v133 — JL green for John Lewis bars in the Remind me steps */
.treat--jl .contact__treat:hover { background: rgba(141,173,155,0.18); }
.treat--jl .contact__treat.is-on { background: rgba(141,173,155,0.24); border-color: var(--jl-green); }
.treat--jl .contact__treat.is-on .contact__treat-tick { background: var(--jl-green); border-color: var(--jl-green); color: #fff; }
.treat--jl input:focus, .treat--jl input:focus-visible { outline: 2px solid var(--jl-green); outline-offset: 2px; border-color: var(--jl-green); }
.treat--jl .contact__treat:focus-visible, .treat--jl .contact__next:focus-visible { outline-color: var(--jl-green); }
/* v133 — "email ready" confirmation */
.contact__sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px 16px; }
.contact__sent-tick { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; background: var(--brand-orange); margin-bottom: 6px; }
.sent--jl .contact__sent-tick { background: var(--jl-green); }
.contact__sent-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.contact__sent-body { font-size: 0.88rem; color: var(--ink-60); margin-bottom: 10px; }
.contact__sent .contact__next { width: 100%; }
/* v135 — sending / failed states */
.contact__sent-tick--wait { background: transparent !important; border: 3px solid rgba(44,42,41,0.15); border-top-color: var(--brand-orange); animation: bbbspin 0.9s linear infinite; }
.sent--jl .contact__sent-tick--wait { border-top-color: var(--jl-green); }
@keyframes bbbspin { to { transform: rotate(360deg); } }
.contact__sent--failed .contact__sent-title { color: #8A3B30; }
.contact__sent .contact__body--actions { width: 100%; margin-top: 4px; }
.contact__err { color: #8A3B30; background: rgba(181,103,92,0.12); border-radius: 10px; padding: 8px 10px; font-size: 0.8rem; }
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact__body [hidden] { display: none !important; }
.contact__next { border: 0; border-radius: 12px; padding: 12px 14px; background: var(--ink); color: var(--cream); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; }
.contact__next:disabled { opacity: 0.35; cursor: not-allowed; }

/* Global button — pebble shape (matches the outer boxes), outline at rest,
   fills solid orange ONLY on hover (desktop) or tap/active (mobile).
   Nothing is solid orange until it's interacted with. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  padding: 15px 26px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);   /* squarer, lightly rounded */
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.08s var(--ease);
}
.btn:hover,
.btn:focus-visible,
.btn:active {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--ink);
}
.btn:active { transform: translateY(1px); }

/* Primary + secondary: outline at rest (no solid orange until interacted). */
.btn--primary { background: transparent; border-color: var(--ink); color: var(--ink); }

/* Dark — the recommended/working booking route per store (filled charcoal). */
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--cream); }
/* Booking buttons — black text + black outline by default, fill in the
   identity colour on hover. John Lewis = green, Benito = orange (round 49). */
/* Black edge at rest, green on hover — as asked, nothing more.
   (I briefly made this green at rest too. Marco didn't ask for it, so
   it's reverted. Worth knowing if it ever comes up again: :hover never
   fires on a phone, so a hover-only colour is invisible to mobile
   visitors. That's an observation, not a licence to change it.) */
.btn--jl { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--jl:hover, .btn--jl:focus-visible { background: var(--jl-green); border-color: var(--jl-text); color: var(--ink); }
.btn--benito { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--benito:hover, .btn--benito:focus-visible { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink); }
.btn--dark:hover,
.btn--dark:focus-visible,
.btn--dark:active { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink); }

.btn--block { width: 100%; }

/* ---- Accessibility helpers ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Secondary button — inherits the global outline→orange pill.
   Quieter than primary (which is filled at rest). */
.btn--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

/* Disabled / placeholder (holders, coming-soon links) */
.btn--disabled {
  background: var(--blush);
  border-color: transparent;
  color: var(--ink-60);
  cursor: default;
  pointer-events: none;
}
.btn--disabled:hover { background: var(--blush); color: var(--ink-60); }
.btn--secondary.btn--disabled {
  background: transparent;
  border-color: var(--ink-12);
}

/* ===================================================================
   BOOKING FUNNEL OVERLAY (the only way to book)
   =================================================================== */
body.bk-open { overflow: hidden; }

.bk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;             /* above header (1000) + nav (1001) */
  background: var(--wash);
  display: flex;
  flex-direction: column;
}
.bk-overlay[hidden] { display: none; }

/* Bird watermark inside the booking overlay (it covers the page one) */
.bk-overlay::before {
  /* TEMP — swirl-texture swap, full opacity. */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/texture-card-orange-pale.webp?v=210") no-repeat center center / cover;
  opacity: 1;
}

.bk-panel {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  height: 100%;
  /* TEMP — readability fix: the booking-overlay watermark now runs
     full-opacity with no mask, so the panel needs its own opaque
     backing (the step headline previously had no card at all).
     Tinted faint orange per Marco's request (was flat cream).
     Rollback: delete background/blur below. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.bk-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  padding-inline: 18px;
  border-bottom: 1px solid var(--ink-12);
  flex: 0 0 auto;
}
.bk-back, .bk-close {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  padding: 6px;
}
.bk-back  { justify-self: start; font-size: 0.9rem; letter-spacing: 0.02em; }
.bk-close { justify-self: end; font-size: 1.6rem; line-height: 1; }
.bk-progress {
  justify-self: center; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60vw;
}

.bk-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px));
}

.bk-eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 6px;
}
.bk-title { font-size: 1.7rem; margin-bottom: 22px; }
.bk-host {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-60); margin: 18px 0 8px;
}

.bk-list { display: flex; flex-direction: column; gap: 10px; }

.bk-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: rgba(255, 255, 255, 0.92); /* TEMP: bumped from 0.72 — texture behind is now full opacity */
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-box);
  padding: 16px 18px;
  font-family: var(--font-head); font-size: 1.15rem;
  color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color 0.18s var(--ease), transform 0.06s var(--ease);
}
.bk-item:hover, .bk-item:focus-visible { border-color: var(--brand-orange); color: var(--orange-text); }
.bk-item:hover .bk-chev, .bk-item:focus-visible .bk-chev { color: var(--brand-orange); }
.bk-item:active { transform: translateY(1px); }
.bk-chev { color: var(--ink-60); font-size: 1.4rem; line-height: 1; transition: color 0.18s var(--ease); }

.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-card {
  background: var(--blush);
  border: 0; border-radius: var(--radius-box);
  padding: 38px 16px;
  font-family: var(--font-head); font-size: 1.4rem; color: var(--ink);
  cursor: pointer;
  transition: transform 0.06s var(--ease), filter 0.18s var(--ease);
}
.bk-card:hover, .bk-card:focus-visible { filter: brightness(0.97); }
.bk-card:active { transform: translateY(1px); }

.bk-service {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--ink-12); border-radius: var(--radius-box);
  padding: 16px 18px; cursor: pointer;
  transition: border-color 0.18s var(--ease);
}
.bk-service:hover, .bk-service:focus-visible { border-color: var(--brand-orange); }
.bk-service:hover .bk-service__name, .bk-service:focus-visible .bk-service__name { color: var(--orange-text); }
.bk-service:hover .bk-tick, .bk-service:focus-visible .bk-tick { border-color: var(--brand-orange); color: var(--brand-orange); }
.bk-service.is-on:hover .bk-tick, .bk-service.is-on:focus-visible .bk-tick { color: var(--ink); }
.bk-service__main { display: flex; flex-direction: column; gap: 3px; }
.bk-service__name { font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; transition: color 0.18s var(--ease); }
.bk-service__desc { font-size: 0.85rem; color: var(--ink-60); line-height: 1.4; }
.bk-service__meta { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--orange-deep); margin-top: 2px; }
.bk-service__price { font-family: var(--font-head); font-weight: 500; font-size: 1.25rem; flex: 0 0 auto; }

.bk-summary {
  background: #fff; border: 1px solid var(--ink-12); border-radius: var(--radius-box);
  padding: 20px; margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink-60); font-size: 0.95rem;
}
.bk-summary__price { font-family: var(--font-head); font-weight: 500; font-size: 1.8rem; color: var(--ink); }
.bk-note { font-size: 0.8rem; color: var(--orange-deep); margin-top: 6px; }

.bk-actions { display: flex; flex-direction: column; gap: 12px; }
.bk-holder { display: flex; flex-direction: column; gap: 8px; }
.bk-holder__note {
  text-align: center; font-family: var(--font-head); font-style: italic;
  color: var(--clay); font-size: 0.95rem;
}

/* ---- Build step: sub-line, filter chips, add toggles ---- */
.bk-sub { color: var(--ink-60); font-size: 0.9rem; margin: -12px 0 18px; }

.bk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bk-chip {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--ink-12); background: transparent; color: var(--ink-60);
  cursor: pointer; transition: all 0.18s var(--ease);
}
.bk-chip:hover { border-color: var(--ink); color: var(--ink); }
.bk-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* add/remove tick on each service row */
.bk-tick {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-12); color: var(--ink-60);
  font-size: 1.1rem; line-height: 1; margin-top: 2px;
  transition: all 0.18s var(--ease);
}
.bk-service.is-on { border-color: var(--brand-orange); }
.bk-service.is-on .bk-tick {
  background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink);
}
.bk-service.is-on .bk-service__name { color: var(--orange-text); }

/* ---- Booking wizard: optional add-on toggle (Full Face "+ Neck") ----
   24 Sep: shown only once its base treatment is ticked (js/booking-ui.js
   removes it from the DOM entirely when the base is unticked). Same
   tick/price language as the service row above it, one level down. */
.bk-addon {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin: -6px 0 2px; padding: 12px 18px 12px 44px;
  background: #fff; border: 1px solid var(--ink-12); border-top: none;
  border-radius: var(--radius-btn);  /* matches standard button radius */
  font-size: 0.88rem; color: var(--ink-60); cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.bk-addon:hover, .bk-addon:focus-within { border-color: var(--brand-orange); }
.bk-addon.is-on { border-color: var(--brand-orange); background: rgba(242,141,0,0.06); }
.bk-addon__input { width: 17px; height: 17px; accent-color: var(--brand-orange); cursor: pointer; flex: 0 0 auto; }
.bk-addon__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.bk-addon__text { flex: 1 1 auto; }
.bk-addon.is-on .bk-addon__text { color: var(--ink); font-weight: 500; }
.bk-addon__save { font-size: 0.76rem; font-weight: 600; color: var(--orange-text); }
.bk-addon__price { font-family: var(--font-head); font-weight: 500; flex: 0 0 auto; }

/* ---- Sticky basket bar (build step) ----
   22 Sep: was a flat, edge-to-edge cream strip — now uses the site's
   standard rounded box shape (same radius/border language as the
   .bk-item / .bk-service cards above it), floating clear of the panel
   edges with its own shadow, and tinted to match the selected store:
   Benito orange by default, John Lewis sage when .bk-overlay--jl is
   set (booking-ui toggles this on the overlay per store). */
.bk-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  margin: 0 22px calc(16px + env(safe-area-inset-bottom, 0px));
  padding: 16px 20px;
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-box);
  background: rgba(242,141,0,0.22);           /* Benito orange (default) */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bk-overlay--jl .bk-bar {
  background: rgba(141,173,155,0.30);         /* John Lewis sage */
}
.bk-bar__sum { flex: 1 1 auto; font-size: 0.85rem; color: var(--ink-60); }
.bk-bar__sum strong { color: var(--ink); font-weight: 600; }
.bk-bar__btn { flex: 0 0 auto; padding: 13px 22px; }
.bk-bar__btn:disabled { background: transparent; border-color: var(--ink-12); color: var(--ink-60); cursor: default; }
.bk-bar__btn:disabled:hover { background: transparent; border-color: var(--ink-12); color: var(--ink-60); }

/* ---- Review card (Your booking) ---- */
.bk-summary {
  background: #fff; border: 1px solid var(--ink-12); border-radius: var(--radius-box);
  padding: 20px; margin-bottom: 22px;
}
.bk-summary__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.bk-summary__store { font-size: 0.9rem; color: var(--ink-60); }
.bk-edit {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
}
.bk-edit:hover { color: var(--orange-text); }

.bk-line {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--ink-12);
}
.bk-line__rm {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-60); font-size: 1.1rem; line-height: 1;
}
.bk-line__rm:hover { color: var(--clay); }
.bk-line__name { flex: 1 1 auto; font-size: 0.98rem; }
.bk-line__dur { display: block; font-size: 0.78rem; color: var(--ink-60); letter-spacing: 0.02em; }
.bk-line__price { flex: 0 0 auto; font-family: var(--font-head); font-size: 1.05rem; }

.bk-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 16px;
}
.bk-total__label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); }
.bk-total__price { font-family: var(--font-head); font-weight: 500; font-size: 1.9rem; }

.bk-fineprint { font-size: 0.74rem; color: var(--orange-text); text-align: center; line-height: 1.4; }
/* Deposit/no-show notice on the Square hand-off screen — deliberately
   NOT styled like .bk-fineprint (low-contrast, easy to skim past).
   This needs to actually be read before the customer leaves the site. */
.bk-notice {
  background: #fff; border: 1px solid var(--ink-12); border-radius: var(--radius-box);
  padding: 14px 16px;
  font-size: 0.86rem; line-height: 1.5; color: var(--ink);
}

/* ---- Contact split row (John Lewis stores): "Book with John Lewis" and
   "Contact the Brow Bar" as two equal-width buttons side by side, instead
   of one full-width stack. Wraps to stacked on very narrow screens.
   The expanding panel reuses .contact__action / .actions--jl as-is (see
   js/contact.js + the "2. Contact widget" rules above) — .bk-contact here
   is just spacing + the hidden toggle, no colour/shape rules of its own. ---- */
.bk-actions__row { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-actions__half { flex: 1 1 140px; width: auto; padding-left: 16px; padding-right: 16px; }
.bk-contact { margin-top: 2px; }
.bk-contact[hidden] { display: none; }

/* ===================================================================
   PHASE 3 — PAGE LAYOUTS
   =================================================================== */

/* shared section rhythm */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 30px; }
.section { padding: 46px 0; }
/* Charcoal feature band (matches the footer / rest of the dark chrome) */
/* Semi-transparent GLOSSY charcoal — the bird passes behind like a
   watermark, and a faint reflective streak keeps the surface from
   reading flat */
.section--tint { background: var(--ink-gloss-84); position: relative; }
.section--tint::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 42%);
}
.section--tint .eyebrow { color: rgba(244,240,235,0.6); }
.section--tint .section__title { color: var(--cream); }
.section--tint .nails-line { color: rgba(244,240,235,0.75); }
.section--tint .nails-line button { color: var(--brand-orange); }
/* Editorial, left-aligned section headers with a confident display scale */
.section__head {
  text-align: left; margin-bottom: 30px;
  /* TEMP — readability fix: .plumage now runs full-opacity behind every
     plain section, so heading/lead text needs an opaque card. Cancelled
     below inside .section--tint, which already has good contrast on its
     own dark background. Tinted white at 62% (matching the .signup card
     look) per Marco's request — the peach tint read too creamy.
     Rollback: delete this background/padding block. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-box);
  padding: 24px 20px;
}
.section--tint .section__head { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.section__title { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.18; margin-top: 6px; }
.section__lead { color: var(--ink-60); font-size: 1rem; margin-top: 14px; max-width: 46ch; }

/* ---- Homepage hero — full-bleed image, text in front ---- */
.hero {
  position: relative;
  width: 100%;
  height: min(78vh, 620px);
  min-height: 440px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
/* Hero video at full opacity (v122 — blend slider removed; 0% chosen). */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(44,42,41,0.62) 0%, rgba(44,42,41,0.28) 50%, rgba(44,42,41,0.5) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 22px clamp(64px, 13vh, 150px); text-align: center;
}
.hero__logo { width: min(62vw, 240px); height: auto; margin: 0 auto 14px; display: block; }
.hero__tag { font-family: var(--font-head); font-weight: 500; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.1; color: var(--cream); }
.hero__since { margin-top: 16px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-orange); }

/* ---- Category cards [Brows] [Lashes] ---- */
.cat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cat-card {
  background: var(--cream);
  border: 1px solid var(--ink-12); border-radius: var(--radius-box);
  padding: 16px 16px; text-align: center; cursor: pointer;   /* same height as location rows */
  font-family: var(--font-head); font-size: 1.2rem; color: var(--ink);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.06s var(--ease);
}
.section--tint .cat-card { background: #fff; }
.cat-card:hover, .cat-card:focus-visible { border-color: var(--brand-orange); color: var(--orange-text); }
.cat-card:active { transform: translateY(1px); }
.nails-line { text-align: center; margin-top: 16px; font-size: 0.9rem; color: var(--ink-60); }
.nails-line button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--clay); text-decoration: underline; text-underline-offset: 3px;
}
.nails-line button:hover { color: var(--brand-orange); }

/* Nails — small version of the [Brows][Lashes] buttons; "only at Reading →"
   sits to the LEFT, arrow pointing at the (clickable) pill */
.nails-mini { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; }
.cat-card--mini {
  display: inline-block; padding: 8px 34px; border-radius: var(--radius-box);
  border: 1px solid var(--ink-12); background: var(--cream);
  font-family: var(--font-head); font-size: 1rem; color: var(--jl-text); /* Reading is John Lewis → green */
  cursor: pointer; user-select: none;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.cat-card--mini:hover,
.cat-card--mini:focus-visible { border-color: var(--jl-text); color: var(--jl-text); }
.nails-mini__note { font-size: 0.82rem; color: var(--ink-60); }
.nails-mini__arrow { display: inline-block; color: var(--jl-text); margin-left: 2px; animation: nailsNudge 1.6s ease-in-out infinite; }
@keyframes nailsNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .nails-mini__arrow { animation: none; } }
.nails-mini__note button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--jl-text); text-decoration: underline; text-underline-offset: 3px;
}
.nails-mini__note button:hover { color: var(--jl-green-dark); }

/* ---- Homepage heritage box (v115, 7 Oct 2026) ----
   "One craft. Refined." sits between Find Us and the reviews as a box in
   the same language as the location rows above it: same inset (14px, as
   .loc-grid), same 0.92 white + blur, hairline border, 24px radius and
   halo. Static — no hover, it is not a button. */
.heritage { padding-top: 0; }
.heritage .section__head {
  margin: 0 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-box);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 2px 10px rgba(44,42,41,0.05);
  padding: 22px 18px;
}

/* ---- Homepage location quick-select (rendered by pages.js, .bk-item style) ---- */
.loc-grid { display: flex; flex-direction: column; gap: 10px; padding-inline: 14px; }
.text-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--brand-orange); }

/* ---- Locations page — flat cards (location name, then host) ---- */
#locations-list { display: grid; gap: 16px; padding-inline: 14px; }
.loc-card {
  background: rgba(255, 255, 255, 0.92); /* TEMP: bumped from 0.72 — texture behind is now full opacity */
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12); border-radius: var(--radius-box);
  padding: 22px;
  scroll-margin-top: 78px; /* clears fixed header when jumped to via #id */
}
.loc-card__name { font-family: var(--font-head); font-weight: 500; font-size: 1.5rem; line-height: 1.05; }
.loc-card__host { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text); margin-top: 6px; }
.loc-card__meta { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.loc-card__meta li { display: flex; gap: 11px; font-size: 0.92rem; color: var(--ink-60); line-height: 1.45; }
.loc-card__meta svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; stroke: var(--ink-60); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.loc-card__meta a { color: var(--clay); }
.loc-card__meta a:hover { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }
/* address is a subtle map link — quieter than phone/email, but tappable */
.loc-card__addr { color: var(--ink-60) !important; text-decoration: none; }
.loc-card__addr:hover { color: var(--orange-text) !important; text-decoration: underline; text-underline-offset: 2px; }
.loc-card__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
.loc-card__actions .btn { font-size: 0.9rem; padding: 15px 16px; }
@media (min-width: 560px) {
  .loc-card__actions { grid-template-columns: 1fr 1fr; }
  /* Single-button cards (Sutton, Solihull): match a paired button's width, centred */
  .loc-card__actions > :only-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
}

/* ---- Our Work — before/after compare slider ---- */
.work-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.work-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
/* Round 110 -- readability card, same convention as .section__head /
   .treat-groups .menu-group: captions were sitting straight on the
   watermark. Rollback: delete this rule. */
.work-item {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-box); padding: 12px 12px 22px;
}
.work-item__cat, .work-item__title, .work-item__caption, .work-item__note { padding-inline: 6px; }
.work-item__cat { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text); margin-top: 16px; }
.work-item__title { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; margin-top: 4px; }
.work-item__caption { color: var(--ink-60); font-size: 0.92rem; margin-top: 6px; line-height: 1.5; }
.work-item__note { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); opacity: 0.75; margin-top: 10px; }
.work-note { text-align: center; color: var(--ink-60); font-size: 0.82rem; margin-top: 40px; max-width: 38ch; margin-inline: auto; line-height: 1.5; }

.compare {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-box); background: var(--blush);
  cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  --pos: 50%;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.compare__before { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__tag {
  position: absolute; top: 12px; z-index: 10; pointer-events: none;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.compare__tag--after { right: 12px; background: rgba(44,42,41,0.72); color: var(--cream); }
.compare__tag--before { left: 12px; background: rgba(244,240,235,0.88); color: var(--ink); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: rgba(244,240,235,0.92); z-index: 20; pointer-events: none;
}
.compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--cream);
  box-shadow: 0 2px 12px rgba(0,0,0,0.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-size: 0.74rem; letter-spacing: -0.05em;
}

/* ---- Global footer (Contact embedded) ---- */
.site-footer {
  background: var(--ink-gloss-84); color: var(--cream); /* translucent gloss — bird shows through faintly */
  position: relative;
  padding: 40px 22px 44px;
  margin-top: 8px;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 42%);
}
.site-footer a { color: var(--cream); }
.footer__mark { font-family: var(--font-head); font-weight: 500; font-size: 1.6rem; }
.footer__mark em { font-style: italic; color: var(--brand-orange); }
.footer__logo { height: 30px; width: auto; display: block; }
.footer__tag { font-family: var(--font-head); font-style: italic; font-size: 0.95rem; color: rgba(244,240,235,0.7); margin-top: 4px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0; font-size: 0.95rem; }
.footer__nav a { opacity: 0.85; }
.footer__nav a:hover { opacity: 1; color: var(--brand-orange); }
.footer__contact { font-size: 0.9rem; line-height: 1.7; color: rgba(244,240,235,0.8); }
.footer__contact a:hover { color: var(--brand-orange); }
.footer__social { display: flex; gap: 16px; margin: 22px 0 4px; }
.footer__social a { color: rgba(244,240,235,0.75); display: flex; transition: color 0.18s var(--ease); }
.footer__social a:hover { color: var(--brand-orange); }
.footer__social svg { width: 22px; height: 22px; }
.footer__since { margin-top: 16px; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,240,235,0.55); }

/* ===================================================================
   Feather plumage watermark — soft depth behind content
   =================================================================== */
/* Oversize bird — bleeds off the page like a soft wallpaper motif */
.plumage {
  /* TEMP — full-bleed logotype watermark, touches all four edges at
     any viewport size (replaces the capped/centred swirl-texture
     version). Rollback: restore the <video class="plumage">
     markup + prior block from git history / the pre-change zip. */
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; max-width: none;
  object-fit: cover;
  opacity: 1; z-index: -1;
  pointer-events: none; user-select: none;
}

/* ---- Slim footer (replaces the heavy multi-column footer) ---- */
.site-footer--slim { background: var(--ink-gloss); color: var(--cream); padding: 20px 0; margin-top: 0; }
.footer__slim { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.footer__copy { font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(244,240,235,0.55); }
.footer__legal { font-size: 0.78rem; color: rgba(244,240,235,0.7); }
.footer__legal:hover { color: var(--brand-orange); }
@media (min-width: 768px) { .footer__slim { flex-direction: row; justify-content: space-between; } }

/* ---- Social icons: thin halo so they read on the charcoal ---- */
.site-header__social a, .footer__social a, .site-nav__book {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(244,240,235,0.4);
  display: flex; align-items: center; justify-content: center;
  color: rgba(244,240,235,0.85);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
  flex: 0 0 auto;
}
.site-header__social a:hover, .footer__social a:hover,
.site-nav__book:hover { color: var(--brand-orange); border-color: var(--brand-orange); }
.site-header__social svg, .footer__social svg, .site-nav__book svg { width: 16px; height: 16px; }

/* Header book control — "Book now" text only, in the site's pebble shape
   (matches .btn radius; round 29) */
.site-nav__book {
  width: auto; border-radius: var(--radius-btn);
  padding: 0 16px;
  border: 1px solid rgba(244, 240, 235, 0.9);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream); white-space: nowrap;
}
.site-nav__book:hover,
.site-nav__book:focus-visible { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink); }

/* ---- Glossy header bar + sheen (both on pseudo-layers so they can fade) ---- */
.site-header { position: fixed; overflow: hidden; }
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ink-gloss-84);
  transition: opacity 0.45s var(--ease);
}
.site-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 34%);
  transition: opacity 0.45s var(--ease);
}
.site-header > * { position: relative; z-index: 1; }

/* ALL pages: no bar at the top — header content floats over the page;
   the glossy bar fades back in once you scroll (round 43). */
body.home { padding-top: 0; } /* hero runs flush under the transparent header */
body:not(.scrolled) .site-header::before,
body:not(.scrolled) .site-header::after { opacity: 0; }
body:not(.scrolled) .site-header {
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Inner pages sit on cream at the top, so the floating header content
   switches to ink until the bar returns (home keeps cream — it floats
   over the dark hero video). */
body:not(.home):not(.scrolled) .site-nav a { color: var(--ink); }
body:not(.home):not(.scrolled) .site-nav a:hover { color: var(--orange-text); }
body:not(.home):not(.scrolled) .nav-toggle__bars,
body:not(.home):not(.scrolled) .nav-toggle__bars::before,
body:not(.home):not(.scrolled) .nav-toggle__bars::after { background: var(--ink); }
body:not(.home):not(.scrolled).nav-open .nav-toggle__bars { background: transparent; }
body:not(.home):not(.scrolled) .site-header__social a {
  color: rgba(44, 42, 41, 0.75);
  border-color: rgba(44, 42, 41, 0.30);
}
body:not(.home):not(.scrolled) .site-header__social a:hover { color: var(--brand-orange); border-color: var(--brand-orange); }
body:not(.home):not(.scrolled) .site-nav__book {
  color: var(--ink);
  border-color: rgba(44, 42, 41, 0.55);
}
body:not(.home):not(.scrolled) .site-nav__book:hover,
body:not(.home):not(.scrolled) .site-nav__book:focus-visible { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink); }
/* colour changes glide rather than snap */
.site-nav a, .site-header__social a, .site-nav__book,
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  transition-duration: 0.45s;
}

/* ---- Homepage: the bird sits a touch stronger ---- */
body.home .plumage { opacity: 1; }

/* ---- Subtle halo + slightly dynamic lift on cards ---- */
.bk-item, .loc-card, .cat-card, .bk-service, .bk-summary, .work-item {
  box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 2px 10px rgba(44,42,41,0.05);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.bk-item:hover, .loc-card:hover, .cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 10px 26px rgba(44,42,41,0.09);
}

/* ---- Social-proof strip just below the header ---- */
.proof-bar {
  background: var(--ink-gloss); color: rgba(244,240,235,0.82);
  text-align: center; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 18px; line-height: 1.7;
}
.proof-bar b { color: var(--brand-orange); font-weight: 600; }
.proof-bar i { font-style: normal; color: rgba(244,240,235,0.4); margin: 0 10px; }

/* ---- Client reviews (real Google reviews) — 3 across, boxless editorial ---- */
.reviews-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, calc((100% - 36px) / 3));
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px; scroll-padding-left: 2px;
}
.reviews-grid::-webkit-scrollbar { display: none; }
.reviews-grid:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 6px; }
.review-card { scroll-snap-align: start; }

/* header row: title left, arrows right */
.reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.reviews-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.reviews-nav[hidden] { display: none; }
.reviews-arrow {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ink-12); color: var(--ink);
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.reviews-arrow:hover:not(:disabled) { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.reviews-arrow:disabled { opacity: 0.3; cursor: default; }
.review-card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.review-quote { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.45; color: var(--ink); }
.review-author { margin-top: 10px; font-weight: 600; font-size: 0.74rem; }
.review-stars { color: #C6A24B; letter-spacing: 2px; font-size: 0.74rem; margin-top: 6px; }
.review-source { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); margin-top: 3px; }
@media (max-width: 767px) {
  .reviews-grid { grid-auto-columns: minmax(0, 78%); }
}
@media (min-width: 768px) {
  .reviews-grid { gap: 36px; grid-auto-columns: minmax(0, calc((100% - 72px) / 3)); }
  .review-stars { letter-spacing: 4px; font-size: 0.85rem; margin-top: 8px; }
  .review-quote { font-size: 0.98rem; line-height: 1.6; }
  .review-author { margin-top: 16px; font-size: 0.92rem; }
  .review-source { font-size: 0.76rem; letter-spacing: 0.14em; margin-top: 4px; }
}

/* ---- Pulse on the floating Book button ----
   Inner pages keep the original subtle halo. The HOMEPAGE gets a
   stronger treatment (Task 3): a wider double halo plus a gentle
   breath on the button itself, so it reads as the primary action
   without changing the 52px circle, its position or its label. ---- */
@keyframes bookPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 0 rgba(242,141,0,0.5); }
  50%      { box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 12px rgba(242,141,0,0); }
}
.cta-bar .cta-bar__btn { animation: bookPulse 2.8s ease-in-out infinite; }

@keyframes bookPulseHome {
  0% {
    box-shadow: 0 6px 18px rgba(0,0,0,0.30),
                0 0 0 0 rgba(242,141,0,0.85),
                0 0 0 0 rgba(242,141,0,0.45);
    transform: scale(1);
  }
  45% {
    box-shadow: 0 8px 22px rgba(0,0,0,0.34),
                0 0 0 14px rgba(242,141,0,0),
                0 0 0 26px rgba(242,141,0,0);
    transform: scale(1.06);
  }
  70%, 100% {
    box-shadow: 0 6px 18px rgba(0,0,0,0.30),
                0 0 0 0 rgba(242,141,0,0),
                0 0 0 0 rgba(242,141,0,0);
    transform: scale(1);
  }
}
body.home .cta-bar .cta-bar__btn {
  animation: bookPulseHome 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-color: rgba(242,141,0,0.55);
}
body.home .cta-bar .cta-bar__btn:hover { animation-play-state: paused; transform: scale(1.06); }
body.home .cta-bar .cta-bar__btn:active { transform: scale(0.95); transition: transform 0.08s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .cta-bar .cta-bar__btn,
  body.home .cta-bar .cta-bar__btn { animation: none; transform: none; }
}

/* ---- Task 7: Review booking button salience ----
   Enabled state is now a filled, high-contrast block so it reads as
   the step forward. Disabled state stays deliberately quiet so the
   contrast between the two carries the meaning. ---- */
.bk-bar__btn:not(:disabled) {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
  box-shadow: 0 4px 14px rgba(0,0,0,0.20), 0 0 0 3px rgba(242,141,0,0.28);
  font-weight: 600;
}
.bk-bar__btn:not(:disabled):hover,
.bk-bar__btn:not(:disabled):focus-visible {
  background: var(--brand-orange); border-color: var(--brand-orange); color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24), 0 0 0 4px rgba(242,141,0,0.42);
}
.bk-overlay--jl .bk-bar__btn:not(:disabled):hover,
.bk-overlay--jl .bk-bar__btn:not(:disabled):focus-visible {
  background: var(--jl-green); border-color: var(--jl-text); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.24), 0 0 0 4px rgba(141,173,155,0.45);
}
.bk-overlay--jl .bk-bar__btn:not(:disabled) { box-shadow: 0 4px 14px rgba(0,0,0,0.20), 0 0 0 3px rgba(141,173,155,0.32); }

/* ===================================================================
   Footer — multi-column (Visit / Find us / Connect)
   =================================================================== */
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.footer__blurb { color: rgba(244,240,235,0.62); font-size: 0.9rem; line-height: 1.6; max-width: 34ch; margin-top: 14px; }
.footer__h { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,240,235,0.5); margin-bottom: 14px; }
.footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.footer__col a { color: rgba(244,240,235,0.8); font-size: 0.92rem; transition: color 0.18s var(--ease); }
.footer__col a:hover { color: var(--brand-orange); }
.footer__bottom {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(244,240,235,0.12);
  font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(244,240,235,0.45);
}

/* ===================================================================
   Menu / Services page — editorial price list
   =================================================================== */
.menu-group { margin-bottom: 42px; }
.menu-group__title { font-size: clamp(1.7rem, 5vw, 2.3rem); margin-bottom: 4px; }
.menu-group__sub { color: var(--ink-60); font-size: 0.9rem; margin-bottom: 16px; }

/* ---- Nails: John Lewis Reading exclusive — green identity throughout ----
   22 Sep: was easy to miss ("Available at Reading only." in quiet grey
   under the heading); now a bold green badge plus the whole card set
   tinted/bordered in JL green, so the "JL Reading only" scope reads at
   a glance rather than needing a hover to notice. */
.menu-group--jl .menu-group__title { color: var(--jl-text); }
.menu-group__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(141,173,155,0.22);
  border: 1px solid var(--jl-text);
  color: var(--jl-text);
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  line-height: 1.35;
  padding: 9px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.menu-group__badge svg {
  width: 19px; height: 19px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
.menu-group__badge strong { font-weight: 700; }
/* v156 (Marco, 12 Oct): the Nails cards now use exactly the same surface
   and border as every other menu card (the green tint made them read as a
   different component). The John Lewis green stays on the title, the
   Reading badge, the "Book at Reading" link and the hover/focus outline. */
.menu-group--jl .menu-row:hover,
.menu-group--jl .menu-row:focus-visible {
  border-color: var(--jl-text);
}
.menu-group--jl .menu-row:focus-visible {
  box-shadow: 0 0 0 3px rgba(141,173,155,0.40), 0 10px 26px rgba(0,0,0,0.07);
}
.menu-group--jl .menu-row:hover .menu-row__name,
.menu-group--jl .menu-row:focus-visible .menu-row__name { color: var(--jl-text); }
.menu-group--jl .menu-row__cta { color: var(--jl-text); }
.menu-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--ink-12); }
.menu-row__name { font-family: var(--font-head); font-weight: 500; font-size: 1.15rem; }
.menu-row__desc { color: var(--ink-60); font-size: 0.88rem; margin-top: 3px; max-width: 54ch; line-height: 1.5; }
/* 15 Aug 2026 — "orange looks dim" fix. The colour was already at the
   brightest it could go and still clear AA, so presence was added via
   font-weight rather than colour. The weight is why this rule exists.

   18 Aug 2026 — superseded in part: --orange-text itself was darkened
   (#F28D00 -> #F28D00) when the background wash went orange, because
   orange-on-orange fell to 2.94:1. The weight below still stands; the
   old reasoning about 4.66:1 on cream no longer describes the token.
   See the --orange-text comment in :root for the current figures. */
.menu-row__meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--orange-text); margin-top: 4px; }
.menu-row__price { font-family: var(--font-head); font-weight: 500; font-size: 1.15rem; white-space: nowrap; }
.menu-note { color: var(--ink-60); font-size: 0.85rem; margin-top: 26px; }

/* ===================================================================
   Larger screens — keep the editorial column, never full-bleed text
   =================================================================== */
@media (min-width: 768px) {
  :root { --maxw: 640px; }
  .nav-overlay__link { font-size: 3rem; }
  /* Galleries go wider than the editorial column on desktop */
  .wrap--wide { max-width: 1080px; }
  #locations-list { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .work-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  /* desktop plumage override removed — bird is centred at all sizes (round 39) */
}

/* Desktop: inline nav + header actions, hamburger hidden.
   v147: was 900px — between 900 and ~1180px the labels wrapped onto
   2-3 lines (iPad landscape, small laptops). Hamburger until it fits. */
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; gap: 24px; align-items: center; }
  .site-header__social { display: flex; gap: 12px; }
  .site-header__book { display: inline-flex; }
}

/* ===================================================================
   MOTION LAYER — round 25 (Ottografie / Exo Ape reference language)
   Masked headline word-rises, batch-staggered reveals, cinematic
   hero de-zoom, curtain page transitions. Gated on html.motion-on
   (added by js/motion.js) so the site is fully visible without JS.
   =================================================================== */
:root {
  --ease-luxe: cubic-bezier(0.19, 1, 0.22, 1);  /* long expo-out — the signature */
  --ease-veil: cubic-bezier(0.76, 0, 0.24, 1);  /* firm in-out for the curtain */
}

/* ---- Generic reveal: fade + soft rise ---- */
html.motion-on .m-rev {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s var(--ease-luxe), transform 1.1s var(--ease-luxe);
}
html.motion-on .m-rev.is-in { opacity: 1; transform: translateY(0); }

/* ---- Masked word-rises for serif headlines ---- */
html.motion-on .m-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;  /* keep serif descenders inside the mask */
  margin-bottom: -0.14em;
}
html.motion-on .m-word {
  display: inline-block;
  transform: translateY(118%);
  transition: transform 1.2s var(--ease-luxe);
}
html.motion-on .m-split.is-in .m-word { transform: translateY(0); }
html.motion-on .m-split.m-done .m-word { transform: none; transition: none; }

/* ---- Hero: JS-driven de-zoom + parallax needs the overscale base ---- */
html.motion-on .hero__img { will-change: transform; transform: scale(1.18); }

/* ---- Plumage: static at 34% (owner decision, round 32) ---- */

/* ---- Curtain page transition (glossy charcoal + orange thread) ---- */
.page-veil {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--ink-gloss);
  transform: translateY(102%);
  pointer-events: none;
  transition: transform 0.6s var(--ease-veil);
}
.page-veil::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brand-orange);
}
body.veil-active .page-veil { transform: translateY(0); pointer-events: auto; }
/* content sinks softly as the curtain rises */
html.motion-on main { transition: transform 0.6s var(--ease-veil), opacity 0.6s var(--ease-veil); }
html.motion-on body.veil-active main { transform: translateY(-18px); opacity: 0.55; }

/* ---- Nav overlay: staggered link rise ---- */
html.motion-on .nav-overlay__list li {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.45s var(--ease-luxe), transform 0.45s var(--ease-luxe);
  transition-delay: 0s;
}
html.motion-on body.nav-open .nav-overlay__list li { opacity: 1; transform: translateY(0); }
/* Round 111 -- stagger now covers every item. It previously stopped at
   item 6, so "Book now" (item 7+) had no delay and popped in first
   while the links above it were still fading up -- the "buttons
   appearing and disappearing" flicker. Tighter 0.05s steps so the
   full 8-item list lands in under half a second. */
html.motion-on body.nav-open .nav-overlay__list li:nth-child(1)  { transition-delay: 0.06s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(2)  { transition-delay: 0.11s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(3)  { transition-delay: 0.16s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(4)  { transition-delay: 0.21s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(5)  { transition-delay: 0.26s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(6)  { transition-delay: 0.31s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(7)  { transition-delay: 0.36s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(8)  { transition-delay: 0.41s; }
html.motion-on body.nav-open .nav-overlay__list li:nth-child(n+9) { transition-delay: 0.46s; }

/* ---- Micro-interactions: slow, weighted lift (post-reveal) ---- */
html.motion-on .loc-card {
  transition: transform 0.55s var(--ease-luxe), box-shadow 0.55s var(--ease-luxe);
}
html.motion-on .loc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(44, 42, 41, 0.10);
}
html.motion-on .cat-card {
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.55s var(--ease-luxe), box-shadow 0.55s var(--ease-luxe);
}
html.motion-on .cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(44, 42, 41, 0.10);
}

/* ---- Reduced motion: the whole layer goes inert ---- */
@media (prefers-reduced-motion: reduce) {
  html.motion-on .m-rev,
  html.motion-on .m-word { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.motion-on .hero__img { transform: none; }
  .page-veil { display: none; }
}

/* ===================================================================
   JOHN LEWIS identity overrides — placed LAST so they beat the base
   .loc-card__host / .bk-host / .bk-item:hover orange rules (round 46)
   =================================================================== */
.loc-card__host--jl,
.bk-host--jl,
.host--jl { color: var(--jl-text); }

/* JL location pebbles hover green (not orange) */
.bk-item--jl:hover,
.bk-item--jl:focus-visible { border-color: var(--jl-text); color: var(--jl-text); }
.bk-item--jl:hover .bk-chev,
.bk-item--jl:focus-visible .bk-chev { color: var(--jl-text); }

/* ===================================================================
   JOHN LEWIS booking flow — green accent when a JL store is selected
   (overlay gets .bk-overlay--jl from booking-ui). Overrides the base
   orange service-selection accents. (round 47)
   =================================================================== */
.bk-overlay--jl .bk-eyebrow { color: var(--jl-text); }
.bk-overlay--jl .bk-edit { color: var(--jl-text); }
.bk-overlay--jl .bk-edit:hover { color: var(--jl-green-dark); }
.bk-overlay--jl .bk-fineprint { color: var(--jl-text); }
.bk-overlay--jl .bk-service:hover,
.bk-overlay--jl .bk-service:focus-visible,
.bk-overlay--jl .bk-service.is-on { border-color: var(--jl-text); }
.bk-overlay--jl .bk-service:hover .bk-service__name,
.bk-overlay--jl .bk-service:focus-visible .bk-service__name,
.bk-overlay--jl .bk-service.is-on .bk-service__name { color: var(--jl-text); }
.bk-overlay--jl .bk-service:hover .bk-tick,
.bk-overlay--jl .bk-service:focus-visible .bk-tick { border-color: var(--jl-text); color: var(--jl-text); }
.bk-overlay--jl .bk-service.is-on .bk-tick { background: var(--jl-green); border-color: var(--jl-text); color: var(--ink); }
.bk-overlay--jl .bk-service.is-on:hover .bk-tick,
.bk-overlay--jl .bk-service.is-on:focus-visible .bk-tick { color: var(--ink); }
.bk-overlay--jl .bk-service__meta { color: var(--jl-text); }
.bk-overlay--jl .bk-addon:hover, .bk-overlay--jl .bk-addon:focus-within { border-color: var(--jl-text); }
.bk-overlay--jl .bk-addon.is-on { border-color: var(--jl-text); background: rgba(141,173,155,0.14); }
.bk-overlay--jl .bk-addon__input { accent-color: var(--jl-green); }
.bk-overlay--jl .bk-addon__save { color: var(--jl-text); }

/* Footer "Find us" — all white by default; colour only on hover.
   John Lewis stores hover green; Solihull/Sutton hover orange (from
   the base .footer__col a:hover rule). (round 51) */
.site-footer a.footer__jl:hover { color: #A9C9B7; }

/* Location card live links (phone + email) follow the host colour;
   address stays muted (has its own !important). (round 49) */
.loc-card--jl .loc-card__meta a { color: var(--jl-text); }
.loc-card--jl .loc-card__meta a:hover { color: var(--jl-green-dark); }
.loc-card--benito .loc-card__meta a { color: var(--orange-text); }
.loc-card--benito .loc-card__meta a:hover { color: var(--orange-dark); }
/* Address / map link too (has its own !important, so override per host) */
.loc-card--jl .loc-card__addr { color: var(--jl-text) !important; }
.loc-card--jl .loc-card__addr:hover { color: var(--jl-green-dark) !important; }
.loc-card--benito .loc-card__addr { color: var(--orange-text) !important; }
.loc-card--benito .loc-card__addr:hover { color: var(--orange-dark) !important; }


/* ===================================================================
   Men's Grooming + Legal pages (Round 61)
   =================================================================== */
.wrap--narrow { max-width: 720px; margin: 0 auto; }

/* ---- Men's grooming ---- */
.mg-grid { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
.mg-group__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  color: var(--ink); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ink-12);
}
.mg-list { display: flex; flex-direction: column; gap: 12px; }
.mg-list li {
  font-family: var(--font-body); font-size: 0.98rem; line-height: 1.5; color: var(--ink);
}
.mg-list li span { display: block; font-size: 0.8rem; color: var(--ink-60); margin-top: 2px; }
.mg-note { font-size: 0.8rem; color: var(--orange-text); margin-top: 14px; letter-spacing: 0.02em; }
.mg-note--top { margin-top: 0; margin-bottom: 14px; }
.mg-cta {
  margin: 46px auto 0;
  max-width: 420px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 26px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-card, 24px);
}
.mg-cta .btn { width: 100%; max-width: 280px; }
.mg-cta .mg-note { color: var(--ink-60); }
.mg-cta a { color: var(--ink); border-bottom: 1px solid var(--ink-12); }
.mg-cta a:hover { color: var(--orange-text); border-color: var(--orange-text); }
@media (min-width: 768px) {
  .mg-grid { grid-template-columns: repeat(3, 1fr); gap: 44px; }
}

/* ---- Legal prose (terms + privacy) ---- */
.legal {
  margin-top: 30px;
  /* TEMP — same readability fix as .section__head: long-form copy was
     sitting directly on the full-opacity texture. Tinted white at 62%
     (matching the .signup card look) per Marco's request. Rollback:
     delete the background/padding lines below. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-box);
  padding: 26px 22px;
}
.legal-updated {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 34px;
  padding-bottom: 16px; border-bottom: 1px solid var(--ink-12);
}
.legal h2 {
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 500;
  color: var(--ink); margin: 38px 0 14px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li {
  font-family: var(--font-body); font-size: 0.96rem; line-height: 1.72; color: var(--ink);
}
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.legal ul li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.legal ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-orange);
}
.legal strong { font-weight: 600; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--brand-orange); transition: color 0.18s var(--ease); }
.legal a:hover { color: var(--orange-text); }
.legal-note { font-size: 0.92rem; color: var(--ink-60); margin-top: 8px; }
.legal-note a { color: var(--ink); border-bottom: 1px solid var(--brand-orange); }
.legal-note a:hover { color: var(--orange-text); }
@media (min-width: 768px) {
  .legal h2 { font-size: 1.5rem; margin-top: 46px; }
  .legal p, .legal li { font-size: 1rem; }
}


/* ---- Men's grooming: two groups + before/after (Round 62) ---- */
@media (min-width: 768px) {
  .mg-grid--two { grid-template-columns: repeat(2, 1fr); }
}
.mg-ba { margin-top: 52px; }
.mg-ba__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--ink);
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-12);
}
.mg-ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-ba__item { margin: 0; }
.mg-ba__item img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card, 24px); background: rgba(255,255,255,0.5);
}
.mg-ba__item figcaption {
  margin-top: 10px; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-60); text-align: center;
}
@media (min-width: 768px) {
  .mg-ba__grid { gap: 22px; }
  .mg-ba__item figcaption { font-size: 0.78rem; margin-top: 14px; }
}

/* ---- Careers apply ---- */
.careers-apply { margin-top: 22px; }
.careers-label {
  display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 10px;
}
.careers-select {
  display: block; width: 100%; padding: 14px 16px; margin-bottom: 18px;
  font-family: var(--font-body); font-size: 0.96rem; color: var(--ink);
  background: rgba(255,255,255,0.72); backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12); border-radius: var(--radius-btn, 14px);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232C2A29' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color 0.18s var(--ease);
}
.careers-select:focus { outline: none; border-color: var(--brand-orange); }
.careers-btn { display: inline-block; }
.careers-hint { color: var(--ink-60) !important; margin-top: 14px; }


/* ---- JustB index + posts (Round 63) ---- */
.feed-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
.feed-card {
  display: block; padding: 24px 22px;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12); border-radius: var(--radius-card, 24px);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.feed-card:hover, .feed-card:focus-visible {
  border-color: var(--brand-orange); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.07);
}
.feed-card__cat {
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-text); margin-bottom: 10px;
}
.feed-card__title {
  font-family: var(--font-display); font-size: 1.24rem; font-weight: 500;
  line-height: 1.28; color: var(--ink); margin-bottom: 8px;
  transition: color 0.22s var(--ease);
}
.feed-card:hover .feed-card__title { color: var(--orange-text); }
.feed-card__dek { font-size: 0.9rem; line-height: 1.55; color: var(--ink-60); margin-bottom: 14px; }
.feed-card__more { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.feed-card:hover .feed-card__more { color: var(--orange-text); }
@media (min-width: 768px) {
  .feed-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .feed-card { padding: 30px 28px; }
  .feed-card__title { font-size: 1.42rem; }
}
.post-meta {
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 30px; padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-12);
}
.post-body h2 { font-size: 1.18rem; }
@media (min-width: 768px) { .post-body h2 { font-size: 1.36rem; } }
.post-cta { margin-top: 44px; }
.post-back { margin-top: 30px; text-align: center; font-size: 0.86rem; }
.post-back a { color: var(--ink-60); }
.post-back a:hover { color: var(--orange-text); }


/* ===================================================================
   Accessibility pass (design audit, 9 Aug 2026)
   =================================================================== */

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 3000;
  padding: 12px 18px; border-radius: var(--radius-btn);
  background: var(--ink); color: var(--cream);
  font-family: var(--font-body); font-size: 0.9rem; text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* WCAG 2.5.8 — 44px minimum hit area without changing the visual size */
.site-header__social a,
.footer__social a,
.reviews-arrow,
.contact__ico {
  position: relative;
}
.site-header__social a::after,
.footer__social a::after,
.reviews-arrow::after,
.contact__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.cta-bar__btn, .contact-fab { min-width: 52px; min-height: 52px; }


/* ===================================================================
   Instagram grid + reminder signup (Round 70)
   Same card language as the rest of the site: 24px radius, ink-12
   hairline border, translucent white, orange on hover.
   =================================================================== */
.ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
.ig-tile {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-box, 24px);
  border: 1px solid var(--ink-12);
  background: rgba(255,255,255,0.5);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.ig-tile img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 0.5s var(--ease-luxe, var(--ease));
}
.ig-tile:hover, .ig-tile:focus-visible {
  border-color: var(--brand-orange); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
.ig-tile:hover img, .ig-tile:focus-visible img { transform: scale(1.05); }
.ig-follow { margin-top: 22px; text-align: center; font-size: 0.86rem; }
.ig-follow a { color: var(--ink); border-bottom: 1px solid var(--ink-12); transition: color 0.18s var(--ease), border-color 0.18s var(--ease); }
.ig-follow a:hover { color: var(--orange-text); border-color: var(--orange-text); }
.ig-follow a.ig-follow__icon { display: inline-flex; align-items: center; justify-content: center; border-bottom: none; padding: 4px; }
.ig-follow a.ig-follow__icon svg { width: 26px; height: 26px; }
@media (min-width: 768px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---- Reminder signup ---- */
.signup {
  margin-top: 10px; padding: 38px 30px; text-align: center;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12); border-radius: var(--radius-box, 24px);
}
.signup__title {
  font-family: var(--font-head); font-weight: 500; font-size: 1.6rem;
  line-height: 1.2; color: var(--ink); margin: 8px 0 16px;
}
.signup__title-sub {
  display: block;
  font-family: var(--font-body); font-style: italic; font-weight: 400;
  font-size: 1rem; line-height: 1.3; color: var(--ink-60);
  margin-top: 6px; letter-spacing: 0.01em;
}
.signup__body {
  font-family: var(--font-body); font-size: 0.98rem; line-height: 1.65;
  color: var(--ink); max-width: 44ch; margin: 0 auto 14px;
}
.signup__body--quiet { color: var(--ink-60); font-size: 0.9rem; }
.signup__btn { margin-top: 12px; min-width: 200px; }
@media (min-width: 768px) {
  .signup { padding: 48px 44px; }
  .signup__title { font-size: 2rem; }
  .signup__title-sub { font-size: 1.1rem; }
}


/* ---- Instagram heading: smaller handle, strapline carries the voice ---- */
.ig-handle { font-size: 1.9rem; }
.ig-strap { font-family: var(--font-head); font-style: italic; font-size: 1.15rem; color: var(--ink); }
@media (min-width: 768px) {
  .ig-handle { font-size: 2.4rem; }
  .ig-strap { font-size: 1.35rem; }
}


/* ===================================================================
   TYPOGRAPHY SYSTEM — Cormorant Garamond + Plus Jakarta Sans
   Appended last so it resolves against the rules above without
   needing to touch ~100 individual declarations.

   NOTE ON SIZING: Cormorant Garamond has a markedly smaller x-height
   than Playfair Display. A like-for-like size swap reads ~15% smaller,
   so display sizes are scaled up to hold the same optical weight.
   =================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

/* ---- A. Hero & major display ------------------------------------ */
/* 30 Aug 2026 — Baskervville removed; page headings return to Cormorant
   Garamond at weight 300. Cormorant ships 300–500 where Baskervville had
   only 400, so the large headline can be genuinely light while card
   titles stay at 400 — one family covering both display roles instead
   of two competing serifs on the same page.

   The old Baskervville rules lived here and are gone rather than
   commented out; 2026-08-30_BBB_StylesRollback_v11_PreFontSystem.css
   has them if they are ever wanted back.

   Weight 300 at headline size only. Cormorant Light is delicate and
   goes weak below about 2rem, so nothing small uses it. */
h1.section__title {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.005em;
}
.hero__tag {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.hero__tag { font-size: clamp(2.6rem, 9vw, 4.6rem); }

h1 i, h1 em, .hero__tag i, .hero__tag em, .italic, .m-word--em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

/* ---- B. Section headings ---------------------------------------- */
h2, h3, .section__title, .signup__title, .mg-group__title,
.mg-ba__title, .work-item__title, .feed-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.005em;
}
.section__title { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.signup__title  { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.ig-handle      { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.feed-card__title, .work-item__title, .mg-group__title, .mg-ba__title {
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.22;
}
.legal h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; }
.post-body h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); font-weight: 500; }

/* ---- C. Eyebrows / category labels ------------------------------ */
.eyebrow, .work-item__cat, .feed-card__cat, .loc-card__host,
.footer__h, .careers-label, .post-meta, .legal-updated,
.hero__since, .footer__since, .bk-host {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  line-height: 1.4;
}
.eyebrow, .work-item__cat, .feed-card__cat, .loc-card__host {
  color: var(--accent-muted);
}
/* on charcoal these need the light tone, not the earth tone */
.footer__h, .footer__since { color: rgba(244,240,235,0.55); }
.hero__since { color: var(--brand-orange); }

/* ---- D. Body copy ------------------------------------------------ */
p, li, .section__lead, .legal p, .legal li, .post-body p,
.work-item__caption, .feed-card__dek, .signup__body, .mg-list li {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  font-size: 0.95rem;
}
.section__lead { font-weight: 400; }
@media (min-width: 768px) {
  p, li, .section__lead, .legal p, .legal li, .post-body p,
  .work-item__caption, .feed-card__dek, .signup__body, .mg-list li {
    font-size: 1.05rem;
    line-height: 1.82;
  }
}

/* ---- E. Navigation & buttons ------------------------------------ */
.site-nav a, .nav-overlay__link, .site-nav__book,
.btn, .bk-chip, .cta-bar__btn, .careers-btn, .signup__btn,
.reviews-arrow, .feed-card__more, .ig-follow a {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}
.nav-overlay__link {
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
}
.btn { border-width: 1px; border-style: solid; transition: background 0.28s var(--ease), border-color 0.28s var(--ease), color 0.28s var(--ease); }
.reviews-arrow { letter-spacing: 0; font-size: 0.9rem; }

/* ---- F. Reviews & quotes ---------------------------------------- */
.review-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
}
.review-author {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  margin-top: 14px;
}
@media (min-width: 768px) {
  .review-quote { font-size: 1.4rem; line-height: 1.52; }
}

/* ---- G. Footer & utility ---------------------------------------- */
.footer__blurb, .footer__col a, .footer__bottom, .post-back a, .legal-note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
.footer__col a { font-weight: 400; }

/* ---- Serif numerals in the menu read better lining --------------- */
.menu-row__price, .bk-service__price, .bk-bar__sum {
  font-variant-numeric: lining-nums tabular-nums;
}


/* ===================================================================
   Round 77 — owner feedback fixes
   =================================================================== */

/* ---- 1. Men's before/after: match the Instagram tile treatment ---- */
.mg-ba__item img {
  cursor: zoom-in;
  border: 1px solid var(--ink-12);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.mg-ba__item img:hover, .mg-ba__item img:focus-visible {
  border-color: var(--brand-orange);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  outline: none;
}
.mg-ba__item img:focus-visible { box-shadow: 0 0 0 3px rgba(242,141,0,0.45), 0 10px 26px rgba(0,0,0,0.10); }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(28,26,25,0.92);
  backdrop-filter: blur(6px);
  animation: lbIn 0.22s var(--ease);
}
@keyframes lbIn { from { opacity: 0 } to { opacity: 1 } }
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__img {
  display: block; max-width: 100%; max-height: 82vh;
  border-radius: var(--radius-box, 24px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.lightbox__cap {
  margin-top: 16px; color: rgba(244,240,235,0.8);
  font-family: var(--font-body); font-size: 0.76rem;
  letter-spacing: 0.25em; text-transform: uppercase;
}
.lightbox__close {
  position: absolute; top: 18px; right: 18px;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(244,240,235,0.12); border: 1px solid rgba(244,240,235,0.3);
  color: var(--cream); font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease);
}
.lightbox__close:hover, .lightbox__close:focus-visible { background: var(--brand-orange); color: var(--ink); }
body.lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .mg-ba__item img:hover { transform: none; }
}

/* ---- 2. Contact widget: John Lewis green, Benito orange ---- */
.contact__body--actions.actions--jl .contact__action {
  background: rgba(141,173,155,0.30);          /* JL sage */
}
.contact__body--actions.actions--jl .contact__action:hover,
.contact__body--actions.actions--jl .contact__action:focus-visible {
  background: var(--jl-green); color: var(--ink);
}
.contact__body--actions.actions--benito .contact__action {
  background: rgba(242,141,0,0.22);           /* Benito orange */
}
.contact__body--actions.actions--benito .contact__action:hover,
.contact__body--actions.actions--benito .contact__action:focus-visible {
  background: var(--brand-orange); color: var(--ink);
}
.contact__store.store--jl:hover { background: rgba(141,173,155,0.24); }
.contact__store.store--jl:hover .contact__store-name { color: var(--jl-text); }
.contact__store.store--benito:hover { background: rgba(242,141,0,0.18); }
.contact__store.store--benito:hover .contact__store-name { color: var(--orange-text); }

/* ---- 3. Instagram handle link inherits the heading ----
   15 Aug 2026 — this link was already functional (correct href,
   opens Instagram) but had zero visible affordance at rest: same
   color as static text, no underline, hover-only color change.
   Fine on desktop, invisible on touch (most traffic) since there's
   no hover state to reveal it. Added a small inline Instagram glyph
   — reusing the exact icon already used in the header/footer social
   links, not a new asset — so it reads as clickable without hover,
   on any device, without breaking the site's deliberate no-default-
   underline link language elsewhere. */
.ig-handle a { color: inherit; transition: color 0.2s var(--ease); display: inline-flex; align-items: center; gap: 0.4em; }
.ig-handle a:hover, .ig-handle a:focus-visible { color: var(--orange-text); }
.ig-handle a svg { width: 0.62em; height: 0.62em; flex: none; stroke-width: 1.6; opacity: 0.75; }
.ig-handle a:hover svg, .ig-handle a:focus-visible svg { opacity: 1; }

/* ---- 4. Booking service rows: force left alignment ----
   Cormorant's flex children were inheriting a centred alignment from
   an ancestor; pin every text node in the row to the left. ---- */
.bk-service, .bk-service__main, .bk-service__name,
.bk-service__desc, .bk-service__meta {
  text-align: left;
}
.bk-service__main { align-items: flex-start; width: 100%; }
.bk-service__name, .bk-service__desc, .bk-service__meta { width: 100%; margin: 0; }
.bk-service__price { text-align: right; }

/* ---- 5. Readability: firmer muted tone ---- */
.bk-service__desc, .feed-card__dek, .work-item__caption,
.signup__body--quiet, .mg-list li span { color: var(--ink-60); }


/* ---- Round 78: one warm hue across the site ---- */
.bk-step, .bk-line__label { color: var(--orange-deep); }
.bk-holder__note { color: var(--orange-deep); }
.nails-line button, .loc-card__meta a { color: var(--orange-text); }
.nav-overlay__link:focus-visible { color: var(--orange-text); }


/* ===================================================================
   Round 79 — treatment-first booking entry
   A treatment on Services or For Men is now a clickable route into
   the wizard: pick your bar, and it arrives already ticked.
   =================================================================== */

/* ---- Menu rows: were static divs, now buttons ---- */
.menu-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: rgba(255,255,255,0.55); backdrop-filter: blur(3px);
  border: 1px solid var(--ink-12); border-radius: var(--radius-box, 24px);
  padding: 18px 20px; cursor: pointer;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease);
}
.menu-row__main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; width: 100%; }
.menu-row:hover, .menu-row:focus-visible {
  border-color: var(--brand-orange);
  background: rgba(255,255,255,0.85);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.07);
  outline: none;
}
.menu-row:focus-visible { box-shadow: 0 0 0 3px rgba(242,141,0,0.4), 0 10px 26px rgba(0,0,0,0.07); }
.menu-row:active { transform: translateY(0); }
.menu-row:hover .menu-row__name, .menu-row:focus-visible .menu-row__name { color: var(--orange-text); }
.menu-row__name { transition: color 0.22s var(--ease); }

/* the affordance — reveals on hover, always readable on touch */
.menu-row__cta {
  margin-top: 8px;
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-text);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.menu-row:hover .menu-row__cta, .menu-row:focus-visible .menu-row__cta { opacity: 1; transform: none; }
@media (hover: none) {                      /* touch: no hover, so always show it */
  .menu-row__cta { opacity: 1; transform: none; }
}


/* ---- For Men: service lines become pick buttons ---- */
.mg-list li { padding: 0; }
.mg-pick {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 9px 0; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mg-pick:hover, .mg-pick:focus-visible {
  color: var(--orange-text); border-bottom-color: var(--brand-orange); outline: none;
}
.mg-pick:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }
.mg-pick span { display: block; font-size: 0.8rem; color: var(--ink-60); margin-top: 2px; }
.mg-pick__go {
  flex: 0 0 auto; color: var(--brand-orange); margin: 0 !important;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.mg-pick:hover .mg-pick__go, .mg-pick:focus-visible .mg-pick__go { opacity: 1; transform: none; }
@media (hover: none) { .mg-pick__go { opacity: 0.6; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .menu-row:hover, .menu-row:focus-visible { transform: none; }
  .menu-row__cta, .mg-pick__go { transition: none; }
}

/* ===================================================================
   GLOSS PROTOTYPE — added 2026-08-10, limited edit.
   Scope: the "A nudge when you're due" reminder panel, and the two
   primary booking CTAs (floating circular "Book now"; "Remind me").
   Nothing else in the file is touched — no HTML changed anywhere.

   ROLLBACK: restore this file from
   Website ▸ 2026-08-10_BBB_StylesRollback_PreGloss_v1.css
   (byte-for-byte copy taken immediately before this block was added),
   or simply delete this block — both fully undo the prototype.
   =================================================================== */

/* Prototype-only tokens, kept separate from the LOCKED tokens block above
   so this section can be deleted cleanly without touching them. */
:root {
  --pearl-base:      rgba(250, 246, 240, 0.62); /* warm ivory, not cold white */
  --pearl-highlight: rgba(255, 250, 244, 0.55);
  --pearl-blush:     rgba(227, 210, 191, 0.28);  /* faint echo of --blush in the reflection */
  --pearl-edge:      rgba(255, 252, 247, 0.65);  /* thin light border */
}

/* ---- 1. Pearlescent reminder panel ----
   Composited contrast checked, not eyeballed: ink text on the resulting
   panel surface runs 12.6–13.4:1 across the wash's lightest/darkest
   points — comfortably clears WCAG AA. */
.signup {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 18% -10%, var(--pearl-highlight) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(90% 120% at 100% 120%, var(--pearl-blush) 0%, rgba(255,255,255,0) 55%),
    var(--pearl-base);
  border: 1px solid var(--pearl-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),        /* internal top-edge highlight */
    0 18px 40px -12px rgba(120, 90, 60, 0.22);   /* warm shadow — taupe, not grey */
}
/* Ambient sheen removed 2026-08-10 — read as a loading glitch on a real
   screen rather than a light catch. Panel keeps its static highlight,
   border and shadow only; no animation on this element now. */

/* ---- 2. Black lacquer CTAs ----
   Targets the existing "Remind me" (.signup__btn.btn--benito) and the
   floating circular "Book now" (.cta-bar .cta-bar__btn) exactly as they
   are today — same size, label and position. Only the surface changes,
   from outline→orange-on-hover to a filled lacquer base with a lift and
   deepened shadow on interaction. Selectors are deliberately compounded
   so this overrides the originals on specificity, not just source order.
   cream-on-ink-gloss contrast: 8.1–14.8:1 (reuses --ink-gloss, already
   proven elsewhere in this file — footer, proof bar — so no new colour
   risk is introduced). */
.signup__btn.btn--benito,
.cta-bar .cta-bar__btn {
  position: relative;
  overflow: hidden;
  background: var(--ink-gloss);
  border-color: transparent;
  color: var(--cream);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),  /* upper rim */
    inset 0 -8px 14px rgba(0,0,0,0.32),    /* lower inner shadow */
    0 10px 22px rgba(20,16,12,0.28);       /* external lift shadow */
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.signup__btn.btn--benito:hover,
.signup__btn.btn--benito:focus-visible,
.cta-bar .cta-bar__btn:hover,
.cta-bar .cta-bar__btn:focus-visible {
  background: var(--ink-gloss);
  border-color: transparent;
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -8px 14px rgba(0,0,0,0.36),
    0 16px 30px rgba(20,16,12,0.34);
}
.signup__btn.btn--benito:active,
.cta-bar .cta-bar__btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -4px 8px rgba(0,0,0,0.3),
    0 6px 14px rgba(20,16,12,0.24);
}
/* Static top reflection — no animation, just a fixed highlight so the
   surface reads as lacquer at rest, not flat charcoal. */
.signup__btn.btn--benito::before,
.cta-bar .cta-bar__btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
/* Shine sweep fires ONCE on hover/focus (not looping) — restrained per
   brief, and naturally satisfies reduced-motion without a duplicate rule
   since it never fires without the hover/focus trigger.
   Removed from "Remind me" 2026-08-10 (looked wrong on the review site)
   — kept only on the floating "Book now" circle. */
.cta-bar .cta-bar__btn::after {
  content: "";
  position: absolute; top: -40%; left: -60%;
  width: 40%; height: 260%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg) translateX(0);
  opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}
.cta-bar .cta-bar__btn:hover::after,
.cta-bar .cta-bar__btn:focus-visible::after {
  opacity: 1;
  transform: rotate(18deg) translateX(340%);
}
.signup__btn.btn--benito:focus-visible,
.cta-bar .cta-bar__btn:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
}
/* Touch devices never fire :hover — show the reflection statically
   instead of hiding the effect entirely on mobile. */
@media (hover: none) {
  .cta-bar .cta-bar__btn::after { opacity: 0.4; transform: rotate(18deg) translateX(180%); transition: none; }
}

/* ===================================================================
   Contact FAB label — added 2026-08-10, revised same day.
   First pass put "Get in touch" in a chip floating above the button —
   wrong call, flagged on a real screen: the icon itself was still the
   unclear part. Revised to match how the "Book now" circle beside it
   already works — the words live ON the button, replacing the chat-
   bubble icon outright, not floating near it. "Get in touch" is still
   reused verbatim from the panel's own heading in contact.js.
   =================================================================== */
.contact__fab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  padding: 4px;
}
/* The X-close icon (shown while the panel is open) keeps its own size —
   this only targets the label state. */
.contact__fab svg { width: 24px; height: 24px; }

/* ===================================================================
   Floating circle typography — added 2026-08-10.
   Every button on the site inherits a sitewide uppercase + 0.16em-
   tracked voice (see "Navigation & buttons" earlier in this file) —
   fine with room to breathe on a normal pill button, but cramped into
   a 52px circle it read as cheap rather than premium. Sentence case
   instead, matching how the site's plain links already look elsewhere
   (footer nav — "Terms & Conditions" etc. — is plain body text, no
   transform, no exaggerated tracking). Scoped to only these two
   circles; every other button on the site keeps the established
   voice untouched. */
.cta-bar .cta-bar__btn,
.contact__fab {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ===================================================================
   Re-applied 2026-08-10: "only at Reading →" contrast fix.
   This was built correctly once already, then lost as collateral
   damage when the footer/header vignette work was reverted wholesale
   — the revert point predated this fix, so rolling back to it silently
   undid a real, unrelated bug fix along with the disliked gloss work.
   Re-applying it standalone this time, with nothing else bundled in,
   so a future revert of anything else can't take it out again.

   The bug: .nails-mini__note uses --ink-60 and --jl-text, both
   documented elsewhere in this file as "text-safe on CREAM," but it
   sits directly on .section--tint's dark charcoal with no override —
   unlike its sibling .nails-line, which already has one. Measured:
   1.05:1 for the "Reading" link, 2.05:1 for the note text. Both far
   under AA, which is exactly what made it unreadable.

   Fix: a small solid --ink chip — a fixed, known background — rather
   than a translucent colour picked against a gradient of uncertain
   pixel value at this position. cream-on-ink: 12.6:1. jl-green-on-ink:
   5.8:1 (brand colour, unlightened, no compromise needed). */
.section--tint .nails-mini__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(244, 240, 235, 0.92);
  background: var(--ink);
  padding: 7px 14px 7px 16px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 12px rgba(0,0,0,0.3);
}
.section--tint .nails-mini__note button {
  color: var(--jl-green);
  text-decoration-color: rgba(141,173,155,0.5);
}
.section--tint .nails-mini__note button:hover,
.section--tint .nails-mini__note button:focus-visible { color: #A9CBBB; }
.section--tint .nails-mini__arrow { color: var(--jl-green); }

/* ---- Client Record (internal capture page, client-log.html) ----
   Uses the same bird watermark as the booking overlay so the internal
   tool feels like part of the site rather than a bare form. Content
   sits on a soft panel above it for legibility on the iPad. */
.capture-body { min-height: 100svh; background: var(--wash); }
.capture-main {
  position: relative;
  min-height: 100svh; display: flex; align-items: center;
  /* env(safe-area-inset-*) keeps content clear of the iPhone status
     bar and home indicator when launched from the home screen, where
     the page runs full-screen with no Safari chrome to protect it. */
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
.capture-main::before {
  /* TEMP — swirl-texture swap, full opacity. */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/texture-card-orange-pale.webp?v=210") no-repeat center center / cover;
  opacity: 1;
}
.capture-main > .wrap { position: relative; z-index: 1; }

/* Soft panel behind the content — same language as the "A nudge when
   you're due" card on the homepage. */
#stage-tech, #stage-client, #capture-success {
  background: rgba(255,255,255,0.92); /* TEMP: bumped from 0.62 — texture behind is now full opacity */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 26px;
  padding: clamp(26px, 5vw, 46px);
  box-shadow: 0 18px 50px rgba(60,50,42,0.07);
}

.capture-title { font-size: clamp(1.9rem, 6vw, 2.6rem); margin-bottom: 14px; }
.capture-main .section__lead { margin-bottom: 4px; }

.capture-form { margin-top: 26px; }
.capture-field { margin-bottom: 4px; }
.capture-input {
  display: block; width: 100%; padding: 14px 16px; margin-bottom: 18px;
  font-family: var(--font-body); font-size: 0.96rem; color: var(--ink);
  background: rgba(255,255,255,0.72); backdrop-filter: blur(4px);
  border: 1px solid var(--ink-12); border-radius: var(--radius-btn, 14px);
  transition: border-color 0.18s var(--ease);
}
.capture-input::placeholder { color: var(--ink-60); }
.capture-input:focus { outline: none; border-color: var(--brand-orange); }
.capture-input--err { border-color: #B5675C; }

.capture-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* v123 — the hidden attribute must always win on this page. Several
   capture elements set their own display (block / inline-block / flex),
   which silently overrode [hidden], so "+ Add a treatment not listed"
   and the "Describe the treatment" box showed before a bar was picked. */
.capture-main [hidden] { display: none !important; }

.capture-hint { color: var(--ink-60); font-size: 0.86rem; margin: -8px 0 16px; }
.capture-error {
  color: #8A3B30; background: rgba(181,103,92,0.12);
  border-radius: var(--radius-btn, 14px); padding: 10px 14px;
  font-size: 0.86rem; margin: -8px 0 16px;
}

.capture-check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 0.9rem; color: var(--ink-60); line-height: 1.45; margin-bottom: 24px;
}
.capture-check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--brand-orange); }
.capture-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.capture-submit { margin-top: 4px; }
.capture-note { color: var(--ink-60); font-size: 0.8rem; margin-top: 16px; line-height: 1.5; }

.capture-success__title { font-family: var(--font-display); font-weight: var(--serif-weight); font-style: italic; font-size: clamp(1.8rem, 5vw, 2.4rem); margin-top: 6px; }
/* v123 — failed save: same error red as .capture-error so staff spot it */
.capture-success--failed .eyebrow { color: #8A3B30; }
.capture-success--failed #capture-success__msg { color: #8A3B30; background: rgba(181,103,92,0.12); border-radius: var(--radius-btn, 14px); padding: 10px 14px; }
.capture-again { margin-top: 22px; }

/* Service picker reuses .bk-service/.bk-chip (booking flow) with no
   price column — let the name/desc take the full remaining width
   instead of being pushed to the far edge by space-between. */
.capture-services .bk-service { justify-content: flex-start; }
.capture-services .bk-service__main { flex: 1; }
.capture-services .bk-list { margin-bottom: 4px; }

.capture-other-toggle {
  display: inline-block; background: none; border: none; padding: 6px 0;
  font-family: var(--font-body); font-size: 0.86rem; color: var(--orange-text);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; margin-bottom: 10px;
}
.capture-other-toggle:hover, .capture-other-toggle:focus-visible { color: var(--orange-dark); }

.capture-radios { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-bottom: 6px; }

/* ---- Check-before-you-book lookup panel ---- */
.capture-lookup {
  background: rgba(255,255,255,0.6); border: 1px solid var(--ink-12);
  border-radius: var(--radius-box); padding: 18px; margin: 26px 0 30px;
}
.capture-lookup__label {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 12px;
}
/* Lookup row — wraps to stacked on narrow phones so the input never
   gets squeezed to a few characters wide. */
.capture-lookup__row { display: flex; flex-wrap: wrap; gap: 10px; }
.capture-lookup__input { margin-bottom: 0; flex: 1 1 180px; min-width: 0; }
.capture-lookup__btn { flex: none; padding-inline: 20px; }
/* The generic hint uses a negative top margin to sit tight under an
   input; inside the lookup panel that pulled it up over the row. */
.capture-lookup .capture-hint { margin: 10px 0 0; }
.capture-lookup__result {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-btn, 14px);
  font-size: 0.9rem; line-height: 1.5;
}
.capture-lookup__result--valid { background: rgba(141,173,155,0.18); color: #3E5A4A; }
.capture-lookup__result--expired { background: rgba(181,103,92,0.14); color: #8A3B30; }
.capture-lookup__result--none { background: var(--blush); color: var(--ink); }
.capture-radio { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; color: var(--ink); cursor: pointer; }
.capture-radio input { accent-color: var(--brand-orange); width: 17px; height: 17px; }

/* ---- Reaction flag — the one warning that must never look like the
   softer "expired" state. Solid, dark, impossible to skim past. ---- */
.capture-lookup__result--reaction {
  background: #7A2A1E; color: #fff; font-weight: 500;
  border: 2px solid #5C1F16;
}
.capture-error--reaction {
  color: #7A2A1E !important; background: rgba(122,42,30,0.1);
  border-radius: var(--radius-btn, 14px); padding: 10px 14px; font-size: 0.85rem;
}

/* ---- Two-stage flow: staff fills stage 1, hands the iPad over for
   stage 2. Stage 2 gets deliberately larger everything — this is the
   screen a client, not a technician, is looking at. ---- */
#cf-continue { margin-top: 22px; }
#stage-client { animation: capture-stage-in 0.28s var(--ease); }
@keyframes capture-stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.capture-label--big { font-size: 0.88rem; margin-bottom: 12px; }
.capture-input--big { padding: 18px 18px; font-size: 1.1rem; margin-bottom: 22px; }
.capture-radio--big { font-size: 1.05rem; }
.capture-radio--big input { width: 22px; height: 22px; }
.capture-check--big { font-size: 1rem; }
.capture-check--big input { width: 22px; height: 22px; }

.capture-back {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--ink-60); font-family: var(--font-body); font-size: 0.88rem;
  padding: 14px 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.capture-back:hover, .capture-back:focus-visible { color: var(--ink); }

/* ===================================================================
   Bright-orange accents extended — added 2026-08-10.
   Two real bugs fixed above (cat-card, loc-card__meta/addr hover text)
   used --brand-orange as small text on a light background — same
   category of failure as the "only at Reading" fix earlier in this
   file, just not yet caught. Both now use --orange-text like every
   other correct instance in this codebase.

   This section is the actual accent expansion: .loc-card gets the
   same hover border treatment its siblings (.feed-card, .cat-card,
   .menu-row) already have — border-color only, never text, so no
   contrast math changes. It was simply missing before.

   Also: every one of those hover-border accents is invisible on touch,
   since :hover never fires there — meaning phone visitors currently
   never see any of this orange at all. Given a beauty counter's traffic
   skews mobile, that's the bigger gap. The touch fallback below gives
   cards a soft, permanent orange-tinted edge (40% strength, not full
   brand-orange — full strength on every card at rest would read as a
   row of alerts, not a warm accent) so the accent actually reaches
   most visitors, not just desktop mouse users. */
.loc-card {
  transition: border-color 0.22s var(--ease), transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.loc-card:hover, .loc-card:focus-visible {
  border-color: var(--brand-orange);
}

/* v179 (Marco, 17 Oct): the permanent orange edge on phones is removed. Cards now look the
   same on a phone as on a computer (neutral edge); on touch the orange shows only while a
   card is being tapped. Rollback: restore border-color rgba(242,141,0,0.4) here. */
@media (hover: none) {
  .feed-card:active, .cat-card:active, .loc-card:active, .menu-row:active {
    border-color: var(--brand-orange);
  }
}


/* ===================================================================
   ██  CONSOLIDATED OVERRIDES  ·  2 Sep 2026
   ===================================================================
   WHAT THIS IS, AND WHY IT MATTERS.

   Between 30 Aug and 2 Sep this stylesheet grew SIX separate appended
   blocks — accent fonts, balance fixes, John Lewis green, type scale,
   location-card text, men's cards — each written to fix something an
   earlier one had broken. They overlapped, contradicted each other and
   were spread over 400 lines, which is why the John Lewis fix took
   four attempts: the rule was correct but a later block kept winning.

   Those six blocks are now merged into this one, grouped by DESIGN
   ROLE rather than by the date somebody noticed a problem. Every
   winning declaration is preserved exactly — verified by computing the
   final value of all 2,602 selector/property pairs before and after
   and confirming they are identical.

   HOW TO ADD TO THIS FILE FROM NOW ON
   Put the rule in the matching role section below. Do NOT append a new
   block at the bottom — that is precisely the habit that caused the
   problem. If a change does not fit a role here, it probably belongs
   in the main body of the stylesheet above.
   =================================================================== */

/* ---- TYPE ROLES — which font does which job ---- */
.eyebrow, .site-nav a, .site-nav__book, .nav-overlay__link, .cta-bar__btn, .btn, .contact__fab, .hero__since, .footer__since, .footer__h, .footer__copy, .footer__legal, .loc-card__host, .work-item__cat, .work-item__note, .feed-card__cat, .feed-card__more, .post-back a, .menu-group__sub, .bk-host, .bk-total__label, .bk-step, .bk-edit, .contact__hint, .review-source, .mg-note, .ig-follow a, .capture-label, .capture-back, .proof-bar {
  font-family: var(--font-accent);
}
.site-nav a {
  font-family: var(--font-accent);
  letter-spacing: 0.06em;
}

/* ---- TYPE SCALE — three sizes, used everywhere ---- */
.menu-row__name, .menu-row__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.15;
}
.menu-row__desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 7px;
}
.menu-row__from {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-60);
  margin-right: 5px;
}
.mg-list li {
  font-size: 0.95rem;
  font-family: var(--font-body);
  line-height: 1.55;
  padding: 0;
}
.mg-list li span {
  font-size: 0.78rem;
  font-family: var(--font-body);
  color: var(--ink-60);
}
.section__lead {
  font-size: 0.98rem;
}
.menu-group__title, .mg-group__title, .mg-ba__title, .bk-title, .reviews-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.18;
}
.menu-row__name, .menu-row__price, .loc-card__name, .work-item__title, .feed-card__title, .mg-pick span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.15;
}
.mg-list {
  gap: 10px;
}

/* ---- JOHN LEWIS — partner identity, never brand orange ---- */
.loc-card__host--jl, .bk-host--jl, .host--jl, .loc-card--jl .loc-card__host, .bk-overlay--jl .bk-host {
  color: var(--jl-text);
}
.loc-card--jl, .bk-item--jl {
  border-color: var(--jl-text);
}
.loc-card--jl:hover, .loc-card--jl:focus-visible, .bk-item--jl:hover, .bk-item--jl:focus-visible {
  border-color: var(--jl-text);
  color: var(--jl-text);
}
.bk-item--jl:hover .bk-chev, .bk-item--jl:focus-visible .bk-chev {
  color: var(--jl-text);
}
.loc-card__meta a, .loc-card--jl .loc-card__meta a, .loc-card--benito .loc-card__meta a {
  color: var(--ink-60);
  text-decoration: none;
}
.loc-card__addr, .loc-card--jl .loc-card__addr, .loc-card--benito .loc-card__addr {
  color: var(--ink-60) !important;
  text-decoration: none;
}
.loc-card--jl .loc-card__meta a:hover, .loc-card--jl .loc-card__meta a:focus-visible {
  color: var(--jl-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.loc-card--benito .loc-card__meta a:hover, .loc-card--benito .loc-card__meta a:focus-visible {
  color: var(--orange-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.loc-card--jl .loc-card__addr:hover, .loc-card--jl .loc-card__addr:focus-visible {
  color: var(--jl-green-dark) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.loc-card--benito .loc-card__addr:hover, .loc-card--benito .loc-card__addr:focus-visible {
  color: var(--orange-text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- CARDS — the services page recipe, reused on the men's page ---- */
.mg-pick {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-box, 24px);
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.22s var(--ease),
              transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease),
              background 0.22s var(--ease);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
}
.mg-pick span:not(.mg-pick__go) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-60);
  margin-top: 5px;
  line-height: 1.45;
}
.mg-pick__go {
  flex: 0 0 auto;
  align-self: center;
  color: var(--brand-orange);
  transition: transform 0.22s var(--ease);
}
.mg-pick:hover, .mg-pick:focus-visible {
  border-color: var(--brand-orange);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
  outline: none;
}
.mg-pick:focus-visible {
  box-shadow: 0 0 0 3px rgba(242, 141, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.07);
}
.mg-pick:hover .mg-pick__go, .mg-pick:focus-visible .mg-pick__go {
  transform: translateX(3px);
}
.mg-pick:active {
  transform: translateY(0);
}

/* ---- MISC ---- */
.menu-row__meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-60);
  margin-top: 7px;
}
.bk-item--jl, .loc-card--jl {
  border-color: var(--jl-text);
}
.mg-group__title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}

@media (max-width: 760px) {.mg-grid--two { grid-template-columns: 1fr; }}

/* ---- HOVER BUGS from the 6 Sep screen recordings ----------------

   1. BOOK NOW went solid orange with NO text.
      Two rules both set the hover colour at identical specificity:
        line ~1005  .site-nav__book:hover { color: var(--brand-orange) }
        line ~1017  .site-nav__book:hover { color: var(--ink); background: var(--brand-orange) }
      The first is grouped in with the social icons, where orange-on-
      charcoal is correct. On the book pill it means orange text on an
      orange fill — invisible. Since the one-orange change these are the
      SAME hex, so it went from poor to unreadable.
      Fixed with a selector that cannot lose, rather than by editing the
      social-icon rule, which is right for the icons.

   2. John Lewis pebbles kept a dark edge on hover while Benito ones
      turned orange. The JL rule existed but the generic .bk-item:hover
      was matching too, and on the homepage list the dark border won.
      Now scoped tightly enough to win everywhere it applies.

   Both use a doubled class (.site-nav__book.site-nav__book) to raise
   specificity WITHOUT !important — that keeps the door open for a
   future rule to override deliberately, which !important would not. */

.site-nav__book.site-nav__book:hover,
.site-nav__book.site-nav__book:focus-visible {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--ink);
}

.bk-item--jl.bk-item--jl:hover,
.bk-item--jl.bk-item--jl:focus-visible,
.loc-card--jl.loc-card--jl:hover,
.loc-card--jl.loc-card--jl:focus-visible {
  border-color: var(--jl-text);
}
.bk-item--jl.bk-item--jl:hover .bk-chev,
.bk-item--jl.bk-item--jl:focus-visible .bk-chev {
  color: var(--jl-text);
}

/* ---- CLIENT LOG (private staff page) — same design language ----
   The staff capture page shares the stylesheet but had drifted: its
   surfaces used their own white values and radii rather than the card
   recipe every other page uses. It already inherits the celadon wash
   and the three fonts, so this is about surfaces, not colour.

   DELIBERATELY NOT UNIFIED — the safety states. The reaction warning
   (deep red), expired skin test (red) and valid (green) keep their own
   colours and must never be folded into the brand palette. They are
   the only thing standing between a technician and treating someone
   who has reacted before. A brand refresh must not touch them. */
.capture-lookup,
.capture-input,
.capture-services .bk-service {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-box, 24px);
}
.capture-input { border-radius: var(--radius-btn, 14px); }
.capture-input:focus {
  border-color: var(--brand-orange);
  background: rgba(255, 255, 255, 0.85);
  outline: none;
}
.capture-title { font-family: var(--font-display); font-weight: 300; }
.capture-label,
.capture-lookup__label { font-family: var(--font-accent); }
.capture-hint,
.capture-note { font-family: var(--font-body); }
.capture-submit,
.capture-lookup__btn { font-family: var(--font-accent); }

/* ===================================================================
   Round 102 — "Our Treatments Explained in Detail" page
   Long-form reference library, grouped Brows/Lashes/Nails to match
   the Menu page and the homepage "Where shall we begin?" pattern.
   =================================================================== */
.treat-groups .menu-group {
  margin-bottom: 52px;
  /* Readability fix, same convention as .section__head/.legal: the
     Brows/Lashes/Nails groups on this page were sitting directly on
     the full-opacity .plumage watermark with no card behind them,
     unreadable against the artwork. Tinted white at 62% + blur,
     matching the .signup card look. Rollback: delete the
     background/backdrop-filter/border-radius/padding lines below. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-box);
  padding: 30px 26px;
}
@media (max-width: 560px) {
  .treat-groups .menu-group { padding: 22px 18px; }
}
.treat-entry { padding: 22px 0; border-bottom: 1px solid var(--ink-12); }
.treat-entry:last-child { border-bottom: none; }
.treat-entry__name { font-family: var(--font-head); font-weight: 500; font-size: 1.25rem; margin-bottom: 4px; }
.treat-entry__meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--orange-text); margin-bottom: 10px; }
.treat-entry p { color: var(--ink-60); line-height: 1.6; margin-bottom: 10px; }
.treat-entry p:last-child { margin-bottom: 0; }
.treat-entry p strong { color: var(--ink); font-weight: 600; }
/* Round 109 -- small "photo coming soon" placeholder under each
   full treatment entry on the Treatments Explained page, so the
   entries have a visual anchor while real photography is pending.
   Kept compact (not the full-size .treat-video block) since there
   are 23 of these stacked down one long page. */
.treat-entry__img {
  /* v147: hidden until the real photos arrive (Marco, 10 Oct) — a
     .treat-entry__photo <img> then shows in the same slot. */
  display: none; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 360px; aspect-ratio: 4 / 3; margin-top: 14px;
  background: var(--ink-12); border-radius: var(--radius-box, 24px);
  color: var(--ink-60); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
}
.treat-entry__img svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.7; }
.treat-entry--mini .treat-entry__img { display: none; }
/* Round 110 -- real Benito photography (Legacy MARKETING archive) replaces
   the placeholder wherever a genuine photo of that treatment exists. Same
   footprint as the placeholder so entries with and without photos align. */
.treat-entry__photo {
  display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; margin-top: 14px; border-radius: var(--radius-box, 24px);
  background: var(--ink-12);
}

.treat-subgroup { padding: 22px 0; border-bottom: 1px solid var(--ink-12); }
.treat-subgroup > .treat-entry__name { margin-bottom: 4px; }
.treat-subgroup__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin-top: 18px; }
@media (max-width: 640px) { .treat-subgroup__grid { grid-template-columns: 1fr; } }
.treat-entry--mini { padding: 0; border: none; }
.treat-entry--mini .treat-entry__name { font-size: 1rem; margin-bottom: 2px; }
.treat-entry__dur { font-weight: 400; color: var(--ink-60); font-size: 0.85rem; }
.treat-entry--mini p { font-size: 0.88rem; margin-bottom: 0; }

/* ===================================================================
   Round 102 — SAMPLE ONLY: corner "More" control on one Menu row
   (Eyebrow Shape), for review before rolling out to all treatments.
   Sits as a sibling to .menu-row, not nested inside it — .menu-row
   stays its own full button (opens the wizard); "More" is a second,
   independent control docked in the row's corner.
   =================================================================== */
.menu-row-wrap { position: relative; }
.menu-row-wrap .menu-row { padding-right: 96px; }
.menu-row__more {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  padding: 6px 14px; font-family: var(--font-body); font-size: 0.76rem; font-weight: 600;
  border-radius: var(--radius-btn); border: 1px solid var(--ink-12);
  background: #fff; color: var(--ink); cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.menu-row__more:hover { border-color: var(--brand-orange); color: var(--orange-text); }
.menu-row__more[aria-expanded="true"] {
  background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ink);
}
.menu-row__panel {
  margin: -6px 0 2px; padding: 16px 20px 18px;
  background: #fff; border: 1px solid var(--ink-12); border-top: none;
  border-radius: var(--radius-btn);
  font-size: 0.88rem; color: var(--ink-60); line-height: 1.55;
}
.menu-row__panel[hidden] { display: none; }
.menu-row__discover {
  display: inline-block; margin-top: 10px; font-weight: 600; font-size: 0.82rem;
  color: var(--ink); border-bottom: 1px solid var(--brand-orange);
}
.menu-row__discover:hover { color: var(--orange-text); }

/* ===================================================================
   Round 102b — Treatment detail pages (2 samples: Eyebrow Shape & Tint,
   Lash Lift) — "how it's done" steps, before-you-book callout, video
   placeholder, FAQ. Reuses .legal/.post-body prose + existing tokens.
   =================================================================== */
.treat-steps { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: treatstep; }
.treat-steps li { position: relative; padding-left: 40px; margin-bottom: 16px; color: var(--ink-60); line-height: 1.6; }
.treat-steps li::before {
  counter-increment: treatstep; content: counter(treatstep);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-head); font-weight: 600; color: var(--orange-text); font-size: 1.1rem;
}
.treat-callout {
  background: #fff; border: 1px solid var(--ink-12); border-radius: var(--radius-box, 24px);
  padding: 20px 22px; margin: 8px 0 32px;
}
.treat-callout__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 6px; }
.treat-callout p { margin: 0; color: var(--ink-60); line-height: 1.55; }
.treat-video {
  background: var(--ink-12); border-radius: var(--radius-box, 24px);
  padding: 48px 20px; text-align: center; color: var(--ink-60); font-size: 0.86rem; margin-bottom: 32px;
}
.treat-faq__q { font-weight: 600; margin-bottom: 4px; }
.treat-faq__a { color: var(--ink-60); margin-bottom: 20px; line-height: 1.55; }
.treat-full-link { color: var(--orange-text); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: none; display: inline-block; margin-top: 4px; }
.treat-full-link:hover { color: var(--ink); }


/* Round 106 -- prominent "read every treatment" CTA card on the menu
   page. Was a small inline text link that blended into the paragraph
   above it -- easy to miss. Isolation effect (Von Restorff): a
   visually distinct card, set apart from surrounding body text,
   draws and holds attention far better than styled inline text does. */
.menu-treat-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 22px 0 8px;
  padding: 20px 26px 20px 24px;
  /* v154 (Marco, 12 Oct): solid cream removed — cream panels were rejected
     earlier. Same tinted white + blur as .section__head and the Services
     Explained groups. */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-box, 24px);
  /* Accent moved from border-left to an inset shadow: a real border-left
     with a different width than the other 3 sides fights the shared
     border-radius and makes the two left corners render unevenly next
     to every other box on the site (all of which use a plain uniform
     1px border, e.g. .treat-callout). An inset shadow paints the same
     orange cue on the left edge but respects the corner curve. */
  box-shadow: inset 3px 0 0 var(--brand-orange);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.menu-treat-cta:hover, .menu-treat-cta:focus-visible {
  transform: translateX(3px);
}
.menu-treat-cta__label {
  display: block;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-text); margin-bottom: 4px;
}
.menu-treat-cta__title {
  display: block;
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 500; color: var(--ink);
}
.menu-treat-cta__arrow {
  font-size: 1.5rem; color: var(--brand-orange); flex-shrink: 0; line-height: 1;
}
@media (max-width: 560px) {
  .menu-treat-cta { padding: 16px 20px; }
  .menu-treat-cta__title { font-size: 1rem; }
}


/* ===================================================================
   v120 (7 Oct 2026) — HERO RESTORED + SMALLER, LOWER TEXT
   Hero is back to the original full-height video, centred framing and
   dark scrim (the v116-v119 tab/cut-out experiments are removed). Only
   change: the headline and sub-line are set smaller and sit lower, so
   they cover less of the video. Rollback: delete this block.
   =================================================================== */
.hero .hero__img { opacity: 1; }   /* full opacity — final */
.hero .hero__content { padding-bottom: clamp(28px, 6vh, 56px); }
.hero .hero__tag {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
}
.hero .hero__since {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  text-transform: none; letter-spacing: 0.01em; line-height: 1.35;
}

/* ===================================================================
   v119 (7 Oct 2026) — homepage tidy
   =================================================================== */
/* Brows / Lashes / Nails pills in white, same 0.92 white + blur as the location rows */
.chooser .cat-card,
.chooser .cat-card--mini {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* less dead space between the chooser and Find your location: gap now 46px,
   same as Find your location -> One craft box */
.chooser { padding-bottom: 0; }
/* "A nudge when you're due" card: white at the same 62% as every other card,
   instead of the warm-ivory pearl tint */
.signup {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---- Cookie choice (v159) — js/consent.js. Shown only once analytics IDs are set.
   Accept and Decline share one style on purpose (equal prominence, ICO). ---- */
.cc {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1045;
  width: min(380px, calc(100vw - 32px));
  padding: 18px 20px 20px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(44, 42, 41, 0.14); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(44, 42, 41, 0.16);
  color: var(--ink); font-family: var(--font-body);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.cc.is-in { opacity: 1; transform: none; }
.cc__title { margin: 0 0 6px; font-weight: 600; font-size: 1rem; }
.cc__text { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.45; }
.cc__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cc__actions { display: flex; gap: 10px; }
.cc__btn { flex: 1 1 0; padding: 12px 14px; }
@media (max-width: 599px) {
  .cc { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .cc { transition: none; transform: none; } }

/* ---- v162 Our Work: hero bands (3 heroes, sliders 3-up from 1100px). Rollback: delete this block and restore our-work.html from v161 ---- */
.wrap--work{max-width:1240px;margin-inline:auto;padding-inline:16px}
.band{margin-top:64px;scroll-margin-top:90px}
.band-hero{position:relative;margin:0 auto 24px;max-width:820px;aspect-ratio:4/5;border-radius:var(--radius-box);overflow:hidden;background:var(--blush)}
.band-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band-hero__cap{position:absolute;left:0;right:0;bottom:0;padding:120px 22px 22px;background:linear-gradient(to top,rgba(44,42,41,.82) 0%,rgba(44,42,41,.6) 55%,rgba(44,42,41,0) 100%);color:#F4F0EB}
.band-hero__cat{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#F28D00}
.band-hero__title{font-family:var(--font-head);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;margin-top:4px;color:#F4F0EB}
.band-hero__line{font-size:.95rem;opacity:.9;margin-top:6px;max-width:44ch}
.band:first-child{margin-top:28px}
.band-hero__book{position:relative;display:inline-flex;align-items:center;height:26px;margin-top:14px;font:inherit;font-size:.66rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;padding:0 11px;border-radius:999px;border:0;background:rgba(244,240,235,0.88);color:var(--ink);cursor:pointer;transition:background .2s}
.band-hero__book::after{content:"";position:absolute;inset:-9px -4px}
.band-hero__book:hover,.band-hero__book:focus-visible{background:#F28D00;outline:none}
.band-hero__book:focus-visible{box-shadow:0 0 0 2px #F4F0EB,0 0 0 4px #F28D00}
@media (max-width:1099px){.band-hero__cap{padding-bottom:26px}}
.band-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:520px;margin-inline:auto}
@media (min-width:1100px){
  .band-hero{aspect-ratio:5/4}
  .band-grid--3{grid-template-columns:repeat(3,1fr);max-width:none}
  .band-grid--2{grid-template-columns:repeat(2,1fr);max-width:820px}
}

/* ---- v163 Golden-ratio eye line (Marco, 16 Oct). Any hero img with class "hero-gold" and --eye
   (the eye line measured as a fraction of the IMAGE height, e.g. .397) has its eye line placed on the
   golden section of the FRAME: 38.2% from the top (1 - 1/phi, phi = 1.618), at every screen size.
   --k = image height / frame height when the 4:5 image fills the frame width
         (phones/tablets: 4:5 frame -> 1; desktop: 5:4 frame -> (5/4)/(4/5) = 1.5625).
   --s = zoom, only when needed so the frame never shows a gap: max(1, 0.618 / (k * (1 - eye))). ---- */
.band-hero{--k:1}
@media (min-width:1100px){.band-hero{--k:1.5625}}
.band-hero img.hero-gold{--s:max(1, 0.618 / (var(--k) * (1 - var(--eye))));inset:auto;max-width:none;object-fit:cover;width:calc(var(--s) * 100%);height:calc(var(--k) * var(--s) * 100%);left:calc((1 - var(--s)) * 50%);top:calc((0.382 - var(--eye) * var(--k) * var(--s)) * 100%)}
/* ---- v164 small "Book Treatments Now" pill on each before/after slider (bottom-left, smaller than the Before/After tags) ---- */
.compare__book{position:absolute;left:12px;bottom:12px;z-index:25;display:inline-flex;align-items:center;height:22px;padding:0 9px;border:0;border-radius:999px;background:rgba(244,240,235,0.88);color:var(--ink);font:inherit;font-size:.58rem;line-height:1;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.compare__book::after{content:"";position:absolute;inset:-10px -6px}
.compare__book:hover,.compare__book:focus-visible{background:#F28D00;outline:none}
.compare__book:focus-visible{box-shadow:0 0 0 2px #F4F0EB,0 0 0 4px #F28D00}

/* ---- v166 image rings (Marco, 17 Oct): the peach frame was dropped — cards are
   back to the original white 62% box. Instead every image box gets a soft white
   62% ring so it sits in the page rather than looking stuck on top. Hero photos
   on Our Work get a 12px ring (same width as the slider card's white edge);
   smaller image tiles get a thin 6px ring. Rollback: delete this block. ---- */
.band-hero{box-shadow:0 0 0 12px rgba(255,255,255,.62),0 2px 14px rgba(44,42,41,.06)}
.ig-tile{border-color:transparent;box-shadow:0 0 0 6px rgba(255,255,255,.62)}
.ig-tile:hover,.ig-tile:focus-visible{box-shadow:0 0 0 6px rgba(255,255,255,.62),0 10px 26px rgba(0,0,0,.08)}
.mg-ba__item img{border-color:transparent;box-shadow:0 0 0 6px rgba(255,255,255,.62)}
.mg-ba__item img:hover{box-shadow:0 0 0 6px rgba(255,255,255,.62),0 10px 26px rgba(0,0,0,.10)}
.mg-ba__item img:focus-visible{box-shadow:0 0 0 6px rgba(255,255,255,.62),0 0 0 9px rgba(242,141,0,.45)}
.treat-entry__photo{box-shadow:0 0 0 6px rgba(255,255,255,.62)}
/* For Men: Joe's slider card sits under the before/after photos. */
.mg-ba__slider{max-width:520px;margin:32px auto 0;text-align:left}

/* ---- v166 four-slider band (Marco, 17 Oct): the brow band now holds four sliders,
   so on desktop it shows as a 2 x 2 grid at the hero's width instead of 3 + 1 orphan.
   Rollback: delete this block and set the brow band back to band-grid--3. ---- */
@media (min-width:1100px){.band-grid--4{grid-template-columns:repeat(2,1fr);max-width:820px}}

/* ---- v167 "What we do" film button moves into the hero (Marco, 17 Oct). On phones it sits
   under "Shaping the nation's brows since 1993" and is always there, instead of the floating
   chip at the bottom centre (which crowded Get in touch / Book now and showed once a visit).
   It's part of the page, not an overlay, so Google's pop-up rule doesn't apply. Desktop is
   unchanged (the film opens by itself after 2.5 s). Rollback: delete this block and the
   .hero__film button in index.html. ---- */
.hero__film{display:none}
@media (max-width:760px){
  .ip-teaser{display:none!important}
  .hero__film{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:6px 16px 6px 6px;border:0;border-radius:999px;cursor:pointer;
    background:rgba(244,240,235,.88);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:.86rem;line-height:1.1;text-align:left;
    box-shadow:0 4px 14px rgba(0,0,0,.18);transition:background .2s}
  .hero__film small{display:block;font-weight:500;font-size:.72rem;opacity:.7}
  .hero__film-play{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--brand-orange);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
  .hero__film-play svg{width:12px;height:12px;margin-left:2px}
  .hero__film:hover,.hero__film:focus-visible{background:#fff;outline:none}
  .hero__film:focus-visible{box-shadow:0 0 0 2px #F4F0EB,0 0 0 4px #F28D00}
}

/* ---- v168 hero film button (Marco, 17 Oct): subtle clear "glass" pill — a light white
   wash (14%) with white text and a fine white edge, so the video shows through (Marco: 30%
   read as grey). Moved
   down so the gap above it (from the strapline) equals the gap below it (to the hero's bottom
   edge): 30px each. Phones only. Rollback: delete this block. ---- */
@media (max-width:760px){
  .hero{--film-gap:30px}
  .hero .hero__content{padding-bottom:var(--film-gap)}
  .hero__film{margin-top:calc(var(--film-gap) - 2px);background:rgba(255,255,255,.14);color:#fff;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 2px 10px rgba(0,0,0,.10)}
  .hero__film small{opacity:.85}
  .hero__film:hover,.hero__film:focus-visible{background:rgba(255,255,255,.26)}
  .hero__film:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 3px #F28D00}
}

/* v183 (Marco, 17 Oct): For Men page re-ordered: before & after now sits at the top under the
   heading, the walk-in line sits under the service lists, and the big "Book an appointment"
   box is gone (Book now stays in the header and on every service row). Rollback: delete this
   block and restore mens-grooming.html from v182. */
.mg-ba--top { margin-top: 30px; }
.mg-walkin { text-align: center; margin-top: 38px; }
/* v184 (Marco, 17 Oct): the walk-in line is now a proper button, a bit bigger. */
.mg-walkin .btn { font-size: 0.95rem; padding: 18px 34px; min-width: 300px; justify-content: center; }
@media (max-width: 760px) { .mg-walkin .btn { width: 100%; min-width: 0; padding: 18px 14px; font-size: 0.88rem; letter-spacing: 0.1em; white-space: nowrap; } }

/* v185 (Marco, 17 Oct): the JustB header looked like one of the post cards below it, so people
   tried to click it. Flat editorial header instead: no rounded card, an orange rule down the
   left, white fading out to the right (keeps the text readable over the background).
   Rollback: delete this block and the section__head--flat class in justb.html. */
.section__head--flat {
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-left: 3px solid var(--brand-orange);
  padding: 10px 0 12px 20px;
  margin-bottom: 34px;
}
.section__head--flat .section__lead { max-width: 640px; }
@media (max-width: 760px) {
  .section__head--flat { background: linear-gradient(90deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0.35) 100%); padding: 8px 12px 10px 16px; }
}

/* ===================================================================
   v208 — mobile audit fixes (Marco approved, 18 Oct 2026).
   Desktop (1440) is unchanged: everything below is inside phone/touch
   media queries, except the open-menu header rule, which only applies
   while the burger menu is open (≤1024px only).
   Source: 2026-10-18_BBB_MobileVsDesktopAudit_v1.md, "Before launch".
   =================================================================== */

/* 1. Menu close: .site-header (z 1000) is its own stacking context, so the
      X (z 1002 inside it) sat UNDER .nav-overlay (z 1001) and taps hit the
      overlay. While the menu is open, lift the header above the overlay and
      drop its bar so only the X and wordmark float over the menu. */
body.nav-open .site-header {
  z-index: 1002;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
body.nav-open .site-header::before,
body.nav-open .site-header::after { opacity: 0; }

@media (max-width: 760px) {
  /* 4a. Phone-sized texture (centre crop of what phones show, 16 KB vs 94 KB) */
  .bk-overlay::before,
  .capture-main::before { background-image: url("../img/texture-card-orange-pale-phone.webp?v=210"); }

  /* 5. Tap targets ≥44px. Lists get real 44px rows; standalone small
        controls get an invisible 44px hit area (no visual change). */
  .footer__col ul { gap: 0; }
  .site-footer .footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .reviews-nav { gap: 10px; }   /* 34px arrows + 10px gap = 44px apart, so their 44px hit areas don't overlap */
  .loc-card__meta { gap: 0; }
  .loc-card__meta li { align-items: center; }
  .loc-card__meta svg { margin-top: 0; }
  .loc-card__meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-toggle, .wordmark, .footer__logo-link, .menu-row__more, .ig-follow a.ig-follow__icon,
  .nails-mini__note button, .hero__film, .text-link, .post-back a, .mg-note a,
  .wwb-social-apply a, .wwb-more a { position: relative; }
  .nav-toggle::after, .wordmark::after, .footer__logo-link::after, .menu-row__more::after,
  .ig-follow a.ig-follow__icon::after, .nails-mini__note button::after, .hero__film::after,
  .text-link::after, .post-back a::after, .mg-note a::after,
  .wwb-social-apply a::after, .wwb-more a::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .compare__book::after { inset: -11px -6px; }

  /* 6. Footer clears the floating "Get in touch" / "Book now" buttons */
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* 8. Articles + treatment pages: bigger text, wider column (330 → 338px) */
  .wrap:has(> .post-body) { padding-inline: 12px; }
  .legal.post-body { padding: 24px 14px; }
  .legal.post-body p:not(.treat-callout__label):not(.treat-faq__q),
  .legal.post-body li { font-size: 17px; line-height: 1.7; }
}

/* 7. Careers selects at 16px on phones/tablets so iOS doesn't zoom in */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .careers-select { font-size: 16px; }
}

/* ---- v213 (Marco, 18 Oct): no native ▶ over the background films.
   An iPhone in Low Power Mode blocks autoplay and draws a big play button on the
   poster. No video on this site uses native controls, so it is hidden everywhere;
   the hero film starts on the visitor's first tap instead (index.html). ---- */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls-overlay-play-button{display:none!important}
video::-webkit-media-controls-enclosure{display:none!important}
video::-webkit-media-controls{display:none!important}

/* ---- v213 (Marco, 18 Oct): smaller cookie banner. Phone: 233px → about 130px tall
   (title hidden, shorter text in js/consent.js). Accept and Decline still equal. ---- */
.cc{width:min(340px,calc(100vw - 32px));padding:14px 16px 16px}
.cc__title{font-size:.95rem;margin-bottom:4px}
.cc__text{font-size:.84rem;line-height:1.42;margin-bottom:12px}
.cc__btn{padding:10px 12px;font-size:.82rem}
@media (max-width:599px){
  .cc{padding:10px 12px;border-radius:12px}
  .cc__title{display:none}
  .cc__text{font-size:.76rem;line-height:1.38;margin-bottom:8px}
  .cc__text a{white-space:nowrap}
  .cc__actions{gap:8px}
  .cc__btn{position:relative;min-height:38px;padding:0 10px;font-size:.72rem}
  .cc__btn::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}  /* 46px tap area */
}