/* Features Beauty — Prototype design system port (Phase 02.5)
 * Source of truth: RESEARCH/claude-design-prototype/
 * Loaded site-wide, priority 30 in functions.php — wins over Blocksy + per-phase stylesheets.
 */

/* Cormorant Garamond italic 300 — for the lyrical <em> accent inside Preston headlines.
 * Self-hosted (UK GDPR — no Google Fonts hotlink pre-consent). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant/CormorantGaramond-Italic300.woff2') format('woff2');
}

:root {
  --fb-black: #000000;
  --fb-ash: #807465;
  --fb-iced-latte: #B2A494;
  --fb-wave: #9AACB2;
  --fb-wave-80: #AEBDC1;
  --fb-wave-60: #C2CDD1;
  --fb-wave-40: #D7DEE0;
  --fb-wave-20: #EBEEF0;
  --fb-sea-foam: #D0D8D9;
  --fb-oatmeal: #E1D6CE;
  --fb-oatmeal-60: #EDE6DF;
  --fb-chalk: #ECE8E5;
  --fb-white: #FFFFFF;

  --surface-primary: var(--fb-chalk);
  --surface-warm: var(--fb-oatmeal);
  --surface-cool: var(--fb-wave-20);

  --font-display: 'Preston', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Montserrat', system-ui, sans-serif;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 160px;

  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.32, 0.72, 0.27, 1);
  --dur-1: 200ms;
  --dur-2: 400ms;
  --dur-3: 700ms;
}

/* ============================================================
   Page wrapper — kill default body margin and let sticky header dock to top */
body { margin: 0; background: var(--fb-white); color: var(--fb-black); }
body.fb-prototype { font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ============================================================
   Type roles */
.fb-eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fb-ash);
  margin: 0;
}
.fb-meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fb-ash);
}

/* ============================================================
   Buttons */
.fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 16px 28px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-2) var(--ease);
  white-space: nowrap;
}
/* Primary CTA in Iced Latte (warm brand tone) rather than Wave blue — Finley
   review 2026-06-10. Black text keeps ~8.6:1 contrast (AA). Site-wide: header
   pill, hero, sticky CTA, etc. */
/* Primary CTA = brand blue (Wave). Yasmin 2026-06-11 reverted the earlier
   Iced-Latte recolour back to the signature Wave blue (#9aacb2). */
/* Brand-blue (Wave) buttons use white text per brand guidelines (Yasmin 2026-06-18). */
.fb-btn--primary { background: var(--fb-wave); color: var(--fb-white); }
.fb-btn--primary:hover { background: #88999F; transform: translateY(-1px); color: var(--fb-white); }

.fb-btn--ghost {
  background: transparent;
  color: var(--fb-black);
  border: 1px solid currentColor;
}
.fb-btn--ghost:hover { background: var(--fb-black); color: var(--fb-white); }

.fb-btn--ghost-light {
  background: transparent;
  color: var(--fb-white);
  border: 1px solid rgba(255,255,255,0.7);
}
.fb-btn--ghost-light:hover { background: var(--fb-white); color: var(--fb-black); }

.fb-btn .arrow {
  width: 14px; height: 1px; background: currentColor; position: relative;
  transition: width var(--dur-2) var(--ease);
  display: inline-block;
}
.fb-btn .arrow::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.fb-btn:hover .arrow { width: 22px; }

/* Strip Blocksy/wp-element-button defaults when both classes are present (shortcode output) */
.fb-btn.wp-block-button__link,
.fb-btn.wp-element-button { box-shadow: none; }

/* ============================================================
   Photo placeholders (gradient stand-ins until real imagery) */
.fb-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--fb-oatmeal) 0%, var(--fb-iced-latte) 50%, var(--fb-ash) 100%);
}
.fb-photo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.45), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(154,172,178,0.35), transparent 60%);
  mix-blend-mode: soft-light;
}
.fb-photo--cool {
  background: linear-gradient(160deg, var(--fb-wave-20) 0%, var(--fb-wave) 60%, var(--fb-ash) 100%);
}
.fb-photo--cool::before {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(178,164,148,0.3), transparent 60%);
  mix-blend-mode: soft-light;
}
.fb-photo--warm {
  background: linear-gradient(150deg, var(--fb-chalk) 0%, var(--fb-oatmeal) 45%, var(--fb-iced-latte) 100%);
}
.fb-photo--warm::before {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(128,116,101,0.25), transparent 60%);
  mix-blend-mode: soft-light;
}
.fb-photo--deep {
  background: linear-gradient(180deg, #4a5559 0%, var(--fb-wave) 50%, var(--fb-iced-latte) 100%);
}
.fb-photo--deep::before {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.2), transparent 50%);
}
.fb-photo__caption {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  pointer-events: none;
}

/* ============================================================
   Reveal-on-scroll.
   Sharpened 2026-06-07 — was a soft 900ms/24px drift; now a crisper, snappier
   rise (620ms, 16px) for a clean, sharp feel sitewide. */
.fb-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.fb-reveal.is-in { opacity: 1; transform: none; }
.fb-reveal--delay-1 { transition-delay: 70ms; }
.fb-reveal--delay-2 { transition-delay: 140ms; }
.fb-reveal--delay-3 { transition-delay: 210ms; }

/* Auto-reveal — extends the scroll-reveal to the prose-heavy content blocks
   that aren't hand-tagged with .fb-reveal (service bodies, legal pages, FAQ
   answers, etc.) so animation feels consistent sitewide (Anas 2026-06-07).
   The hidden pre-state matches server-rendered class names and is gated on the
   `.js` class that fb-prototype adds to <html> BEFORE first paint:
     - JS off  → no `.js` → content never hidden (no blank pages)
     - JS on   → hidden at parse time → no hide-then-show flash; JS adds .is-in
   Scoped to known prose containers only — the .fb-* sections animate via their
   own .fb-reveal markup and are deliberately excluded. */
html.js .wp-block-post-content > *,
html.js .entry-content > .wp-block-post-title,
html.js .fb-faq-academy__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
html.js .wp-block-post-content > *.is-in,
html.js .entry-content > .wp-block-post-title.is-in,
html.js .fb-faq-academy__item.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Header — utility bar + sticky condensing nav + drawer */
.fb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fb-white);
  transition: box-shadow var(--dur-2) var(--ease);
}
.fb-header.is-condensed { box-shadow: 0 1px 0 var(--fb-wave-20); }

.fb-utility {
  /* Brand blue bar (Yasmin 2026-06-11) — black text for AA contrast on Wave. */
  background: var(--fb-wave);
  color: var(--fb-black);
  overflow: hidden;
  max-height: 30px;
  transition: max-height var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.fb-header.is-condensed .fb-utility { max-height: 0; opacity: 0; }
.fb-utility__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 5px 40px;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 24px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.fb-utility__link, .fb-utility a {
  color: var(--fb-black); text-decoration: none; opacity: 0.9;
  transition: opacity var(--dur-1);
}
.fb-utility__link:first-child { justify-self: start; }
.fb-utility__link:last-child { justify-self: end; }
.fb-utility__link:hover, .fb-utility a:hover { opacity: 1; color: var(--fb-black); }
.fb-utility__brandmark { display: flex; justify-self: center; }
.fb-utility__brandmark svg { width: 16px; height: 16px; }

.fb-nav__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 22px 40px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 48px;
  transition: padding var(--dur-2) var(--ease);
}
.fb-header.is-condensed .fb-nav__inner { padding: 14px 40px; }

.fb-nav__logo {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; line-height: 1;
  transition: transform var(--dur-2) var(--ease);
}
.fb-header.is-condensed .fb-nav__logo { transform: scale(0.92); transform-origin: left center; }
.fb-nav__logo-mark {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.18em;
  color: var(--fb-black);
  text-transform: uppercase;
}
.fb-nav__logo-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.5em;
  color: var(--fb-ash);
  margin-top: 6px;
  padding-left: 2px;
}
/* Real brand primary logo (FEATURES over centred BEAUTY) — replaces the
   text lockup so it matches the supplied artwork exactly. */
.fb-nav__logo-img { display: block; height: 38px; width: auto; }

.fb-nav__links {
  display: flex; justify-content: center; align-items: center;
  gap: 26px;
  list-style: none; padding: 0; margin: 0;
}
.fb-nav__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fb-black);
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  transition: color var(--dur-1);
}
.fb-nav__link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--fb-wave);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.fb-nav__link:hover { color: var(--fb-ash); }
.fb-nav__link:hover::after { transform: scaleX(1); }

.fb-nav__cta { justify-self: end; }

/* Tight desktop zone (just above the 900px mobile breakpoint) — pull the nav in
   so all 7 items + the Book Now button fit comfortably (Yasmin 2026-06-16). */
@media (min-width: 901px) and (max-width: 1120px) {
  .fb-nav__inner { gap: 28px; padding-left: 28px; padding-right: 28px; }
  .fb-nav__links { gap: 18px; }
  .fb-nav__link { font-size: 10.5px; letter-spacing: 0.12em; }
}

.fb-nav__burger {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 0;
}
.fb-nav__burger span {
  display: block; width: 22px; height: 1px;
  background: var(--fb-black);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1);
}
.fb-nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fb-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.fb-nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.fb-drawer {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--fb-chalk);
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-3) var(--ease);
}
.fb-drawer.is-open { max-height: 80vh; }
.fb-drawer__nav {
  display: flex; flex-direction: column;
  padding: 32px 32px 48px;
  gap: 8px;
}
.fb-drawer__link {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fb-black);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--fb-wave-40);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-2), transform var(--dur-2);
  display: flex; align-items: baseline; gap: 16px;
}
.fb-drawer.is-open .fb-drawer__link { opacity: 1; transform: none; }
.fb-drawer__num {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 400;
  color: var(--fb-ash);
  letter-spacing: 0.2em;
}
.fb-drawer__cta { margin-top: 16px; align-self: flex-start; }

/* ============================================================
   Hero */
.fb-hero {
  position: relative;
  width: 100%;
  /* Fit below the header (utility bar + nav ≈ 124px) with breathing room so
     the hero sits comfortably in view on first paint — not jammed at the fold
     edge. Capped so it never gets gangly on tall monitors, floored so it stays
     editorial on short laptops. (Home hero is overridden below to fill the fold.) */
  height: clamp(440px, calc(100vh - 124px - 140px), 680px);
  overflow: hidden;
  color: var(--fb-white);
}
.fb-hero__media {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #2c3437 0%, #5a6b6f 35%, #9aacb2 70%, #c8b8a4 100%);
}
.fb-hero__media::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 70%, rgba(178,164,148,0.4), transparent 65%),
    radial-gradient(ellipse 40% 100% at 50% 100%, rgba(0,0,0,0.5), transparent 70%);
}
.fb-hero__atmosphere {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.fb-hero__caption {
  position: absolute; top: 32px; right: 40px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  max-width: 280px;
  text-align: right;
}
.fb-hero__vertical {
  position: absolute;
  top: 50%; left: 40px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  white-space: nowrap;
}
.fb-hero__vertical span {
  display: inline-flex; align-items: center; gap: 16px;
}
.fb-hero__vertical span::before {
  content: ''; display: inline-block;
  width: 40px; height: 1px;
  background: rgba(255,255,255,0.5);
}
.fb-hero__title {
  position: absolute;
  left: 96px; bottom: 64px;
  right: 460px;
  max-width: 720px;
}
.fb-hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
  padding-left: 4px;
}
.fb-hero__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  color: var(--fb-white);
  text-transform: uppercase;
  margin: 0;
}
.fb-hero__line { display: block; }
.fb-hero__h1 em {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
  color: var(--fb-wave);
  letter-spacing: 0;
  /* Same size as the surrounding heading word (Finley review 2026-06-04 —
     "expert" was rendering tiny); the italic + lowercase still reads as an
     accent, just with a normal word gap. */
  font-size: 1em;
  display: inline;
  vertical-align: baseline;
}
.fb-hero__actions {
  position: absolute;
  right: 96px; bottom: 64px;
  max-width: 380px;
  text-align: right;
}
.fb-hero__lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin: 0 0 28px 0;
}
.fb-hero__btns { display: flex; gap: 12px; justify-content: flex-end; }
.fb-hero__scrollcue {
  position: absolute;
  right: 40px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  writing-mode: vertical-rl;
}
.fb-hero__scrollcue .line {
  display: block; width: 1px; height: 40px;
  background: rgba(255,255,255,0.5);
  animation: fbScrollcue 2.4s var(--ease) infinite;
}
@keyframes fbScrollcue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ============================================================
   Story */
.fb-story { padding: 104px 0 96px; background: var(--surface-primary); }
.fb-story__inner { max-width: 1320px; margin: 0 auto; padding: 0 96px; }
.fb-story__intro { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-bottom: 64px; align-items: end; }
.fb-story__h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.fb-story__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-ash); letter-spacing: -0.01em;
}
.fb-story__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--fb-wave-40);
}
.fb-story__card { padding: 0; }
/* Centre the numbered value cards — number, title and body all centre-aligned
   under the centred section heading (Finley review 2026-06-07). Applies to the
   home story 3-up and reused .fb-story value sections (academy values, about),
   but NOT the .fb-story--2up course/"what's included" bullet lists, which read
   better left-aligned. */
.fb-story:not(.fb-story--2up) .fb-story__card { text-align: center; }
.fb-story__num {
  font-family: var(--font-body);
  font-size: 14px; letter-spacing: 0.3em;
  color: var(--fb-wave); display: block; margin-bottom: 32px;
}
.fb-story__title {
  font-family: var(--font-display);
  font-size: 28px; text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 20px 0;
}
.fb-story__copy {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.7; color: var(--fb-ash); margin: 0;
}

/* ============================================================
   Services grid */
/* Sea-foam tint (not pure white) so "The full collection" reads as its own
   section and doesn't blend into the page — Finley review 2026-06-04. */
.fb-services { padding: 104px 0; background: var(--fb-sea-foam); }
.fb-services__inner { max-width: 1320px; margin: 0 auto; padding: 0 96px; }
.fb-services__head {
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  gap: 64px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--fb-wave-40);
}
.fb-services__head .fb-eyebrow { grid-row: 1; align-self: start; padding-top: 8px; }
.fb-services__h2 {
  grid-row: 1 / 3; grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.fb-services__lede {
  grid-column: 2; grid-row: 3;
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.6;
  color: var(--fb-ash); max-width: 480px; margin: 24px 0 0 0;
}
.fb-services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px 32px;
}
/* 7 categories in a 3-col grid leaves an orphan in row 3 — centre it. */
.fb-services__grid > .fb-service:nth-child(7):last-child {
  grid-column: 2;
}
.fb-service {
  display: block; text-decoration: none; color: inherit;
  transition: transform var(--dur-2) var(--ease);
}
.fb-service__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 20px;
}
.fb-service__overlay {
  position: absolute; inset: 0;
  background: rgba(154, 172, 178, 0.0);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.fb-service:hover .fb-service__overlay { opacity: 1; background: rgba(154, 172, 178, 0.85); }
.fb-service__view {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fb-black); display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600;
}
.fb-service__view .arrow {
  width: 14px; height: 1px; background: currentColor; position: relative; display: inline-block;
}
.fb-service__view .arrow::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.fb-service__title {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.fb-service__sub {
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; color: var(--fb-ash); margin: 0;
  letter-spacing: 0.04em;
}

/* ============================================================
   50/50 Split (Academy) */
.fb-split {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface-warm);
  align-items: stretch;
}
.fb-split__media { position: relative; min-height: 720px; }
.fb-split__media .fb-photo { height: 100%; width: 100%; }
.fb-split__badge {
  position: absolute; top: 32px; left: 32px;
  background: var(--fb-white); color: var(--fb-black);
  font-family: var(--font-body); font-weight: 500;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-pill);
}
.fb-split__copy {
  padding: 120px 96px 120px 80px;
  display: flex; flex-direction: column; gap: 28px;
  align-self: center; max-width: 620px;
}
.fb-split__h2 {
  font-family: var(--font-display);
  /* Smaller so long words like "Eastbourne's" fit cleanly with margin at
     every width (Finley review 2026-06-04). */
  /* Slightly looser than 1 so the italic descender (e.g. the q in
     "technique") clears the uppercase line below it. */
  font-size: clamp(30px, 3.8vw, 54px); line-height: 1.12;
  letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0;
}
.fb-split__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
.fb-split__lede { font-size: 16px; line-height: 1.7; color: var(--fb-ash); margin: 0; }
.fb-split__list {
  list-style: none; padding: 0; margin: 8px 0;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--fb-iced-latte);
  padding-top: 24px;
}
.fb-split__list li {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--fb-black);
}
.fb-split__list span {
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--fb-wave); min-width: 24px;
}
.fb-split .fb-btn { align-self: flex-start; }

/* ============================================================
   Reviews */
.fb-reviews { padding: 104px 0; background: var(--surface-cool); }
.fb-reviews__inner { max-width: 1320px; margin: 0 auto; padding: 0 96px; }
.fb-reviews__head {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 56px;
}
/* Reviews header — proper editorial heading + a small subordinate rating line
   (was: the rating/count set AS the heading). Finley review 2026-06-10. */
.fb-reviews__h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0;
}
.fb-reviews__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
.fb-reviews__stat {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fb-ash); margin: 0;
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fb-reviews__stat .rating { color: var(--fb-wave); font-weight: 600; }
.fb-reviews__stat .stars { color: var(--fb-wave); letter-spacing: 0.12em; font-size: 15px; }
/* Smash Balloon "Write a Review" button ships a loud #0096CC blue — pull it
   into the brand button style (Iced Latte, pill) so it stops clashing.
   Finley review 2026-06-10. !important needed to beat the plugin's own CSS. */
.sb-btn.sb-feed-header-btn {
  background: var(--fb-wave) !important;
  color: var(--fb-black) !important;
  border-radius: var(--r-pill) !important;
}
.sb-btn.sb-feed-header-btn:hover,
.sb-btn.sb-feed-header-btn:focus { background: #88999F !important; color: var(--fb-black) !important; }
/* Hide the Smash Balloon feed's built-in bold "Reviews" title on the homepage
   — the section already has its own "In their own words" heading + rating line
   (Yasmin 2026-06-11). Scoped to the homepage feed only. */
.fb-reviews__feed .sb-feed-header-heading { display: none !important; }

.fb-reviews__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 72px;
}
.fb-review {
  background: var(--fb-white);
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.fb-review__stars { color: var(--fb-wave); letter-spacing: 0.15em; font-size: 14px; }
.fb-review__text {
  font-family: var(--font-body); font-weight: 400;
  font-size: 15px; line-height: 1.7;
  color: var(--fb-black); margin: 0; flex: 1;
}
.fb-review__meta {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 20px; border-top: 1px solid var(--fb-wave-40);
}
.fb-review__name { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.fb-review__service { font-family: var(--font-body); font-size: 11px; color: var(--fb-ash); letter-spacing: 0.1em; text-transform: uppercase; }

.fb-ig__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 24px; border-bottom: 1px solid var(--fb-wave-40);
  margin-bottom: 24px;
}
.fb-ig__follow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fb-black); text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
}
.fb-ig__follow .arrow { width: 14px; height: 1px; background: currentColor; position: relative; display: inline-block; }
.fb-ig__follow .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.fb-ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fb-ig__tile { aspect-ratio: 1; }

/* ============================================================
   CTA band */
.fb-ctaband { background: var(--fb-black); color: var(--fb-white); padding: 104px 0; position: relative; overflow: hidden; }
.fb-ctaband::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(154,172,178,0.25), transparent 60%);
}
.fb-ctaband__inner { max-width: 1100px; margin: 0 auto; padding: 0 96px; position: relative; }
.fb-ctaband__h2 {
  font-family: var(--font-display); font-size: clamp(34px, 6vw, 88px);
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 24px 0; color: var(--fb-white);
  /* Prevent long words like APPOINTMENT from word-breaking on narrow viewports */
  hyphens: none; overflow-wrap: normal; word-break: keep-all;
}
.fb-ctaband__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave);
}
.fb-ctaband__lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,0.85);
  max-width: 520px; margin: 0 0 40px 0;
}
.fb-ctaband__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Services CTA — centred invitation that replaces the old 7-card
   grid (removed 2026-06-08). Oatmeal/warm so it reads distinct from
   the sea-foam neighbours and the black booking band below. */
.fb-servcta { padding: 104px 0; background: var(--fb-oatmeal); }
.fb-servcta__inner {
  max-width: 1040px; margin: 0 auto; padding: 0 96px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.fb-servcta__h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--fb-black);
}
.fb-servcta__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  /* Sizing handled by the shared italic-accent rule below (matches Story et al.). */
  color: var(--fb-wave);
}
.fb-servcta__lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.7; color: var(--fb-ash);
  max-width: 760px; margin: 24px 0 36px;
}

/* ============================================================
   Team teaser — modal-free strip linking through to Meet the Team. */
.fb-teamteaser { padding: 104px 0; background: var(--fb-white); }
.fb-teamteaser__inner { max-width: 1320px; margin: 0 auto; padding: 0 96px; }
.fb-teamteaser__head { margin: 0 0 56px; }
.fb-teamteaser__h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--fb-black);
}
.fb-teamteaser__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave);
}
.fb-teamteaser__lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.7; color: var(--fb-ash);
  margin: 24px 0 0; max-width: 560px;
}
.fb-teamteaser__cards {
  list-style: none; margin: 0 0 40px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.fb-teamteaser__card {
  display: block; text-decoration: none; color: inherit;
  transition: transform var(--dur-2) var(--ease);
}
.fb-teamteaser__card:hover { transform: translateY(-2px); }
.fb-teamteaser__portrait-wrap {
  display: block; aspect-ratio: 4/5; overflow: hidden;
  background: var(--fb-sea-foam); margin-bottom: 16px;
}
.fb-teamteaser__portrait {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--ease);
}
.fb-teamteaser__card:hover .fb-teamteaser__portrait { transform: scale(1.04); }
.fb-teamteaser__name {
  display: block;
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase;
  margin: 0 0 4px; color: var(--fb-black);
}
.fb-teamteaser__role {
  display: block;
  font-family: var(--font-body); font-weight: 300;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fb-ash);
}
/* Push the "Meet the full team" button down to match the 36px gap above the
   academy split's button (Yasmin 2026-06-19). */
.fb-teamteaser .fb-btn { margin-top: 36px; }

@media (max-width: 900px) {
  .fb-servcta { padding: 80px 0; }
  .fb-servcta__inner { padding: 0 24px; }
  .fb-teamteaser { padding: 80px 0; }
  .fb-teamteaser__inner { padding: 0 24px; }
  .fb-teamteaser__head { margin-bottom: 40px; }
  .fb-teamteaser__cards { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}

/* ============================================================
   Footer */
.fb-footer { background: var(--fb-black); color: var(--fb-chalk); }
.fb-footer__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 96px 96px 64px;
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 64px;
}
.fb-footer__brand { display: flex; flex-direction: column; gap: 24px; }
.fb-footer__logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.fb-footer__logo .mark {
  font-family: var(--font-display); font-size: 32px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fb-white);
}
.fb-footer__logo .sub {
  font-family: var(--font-body); font-weight: 300;
  font-size: 10px; letter-spacing: 0.5em;
  color: var(--fb-wave); margin-top: 8px; padding-left: 2px;
}
.fb-footer__logo-img { display: block; height: 44px; width: auto; }
.fb-footer__tag {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6;
  color: var(--fb-chalk); opacity: 0.7;
  margin: 0; max-width: 280px;
}
.fb-footer__socials { display: flex; gap: 8px; }
.fb-footer__social {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--fb-chalk);
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.1em; font-weight: 500;
  transition: all var(--dur-2) var(--ease);
}
.fb-footer__social:hover { background: var(--fb-wave); color: var(--fb-black); border-color: var(--fb-wave); }
.fb-footer__social svg { width: 16px; height: 16px; }

.fb-footer__h {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 24px 0; color: var(--fb-white);
}
.fb-footer__col p,
.fb-footer__col address {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.7;
  color: var(--fb-chalk); opacity: 0.8;
  margin: 0 0 12px 0; font-style: normal;
}
.fb-footer__col a { color: inherit; text-decoration: none; transition: color var(--dur-1); }
.fb-footer__col a:hover { color: var(--fb-wave); }

/* Footer hours table — clean two-column table, no cell boxes */
.fb-footer__col .fb-hours,
.fb-footer__col .fb-hours tbody {
  border: 0; border-collapse: collapse; width: 100%; table-layout: fixed;
}
.fb-footer__col .fb-hours tr {
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.fb-footer__col .fb-hours tr:last-child { border-bottom: 0; }
.fb-footer__col .fb-hours th,
.fb-footer__col .fb-hours td {
  border: 0;
  padding: 8px 0;
  font-family: var(--font-body); font-weight: 300; font-size: 13px;
  line-height: 1.5; color: var(--fb-chalk); opacity: 0.85;
  text-align: left; vertical-align: top;
}
.fb-footer__col .fb-hours th {
  font-weight: 500; opacity: 1; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 11px;
  width: 3.5rem; white-space: nowrap;
}
.fb-footer__col .fb-hours td { padding-left: 16px; }
/* General hours note (Yasmin 2026-06-11) — one caption under the table for all
   days. Inherits the surrounding text colour so it works on the dark/Wave
   footer and the light Contact panel alike. */
.fb-hours__note { font-family: var(--font-body); font-size: 11px; line-height: 1.5; margin: 10px 0 0; opacity: 0.8; }

.fb-footer__news { margin-bottom: 16px !important; }
.fb-footer__form {
  display: flex; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: border-color var(--dur-1);
}
.fb-footer__form:focus-within { border-color: var(--fb-wave); }
.fb-footer__form input {
  flex: 1; background: transparent; border: none;
  padding: 12px 0; color: var(--fb-white);
  font-family: var(--font-body); font-size: 13px;
  outline: none;
}
.fb-footer__form input::placeholder { color: rgba(255,255,255,0.4); }
.fb-footer__form button {
  background: transparent; border: none; color: var(--fb-wave);
  font-size: 18px; cursor: pointer; padding: 0 8px;
  transition: transform var(--dur-2) var(--ease);
}
.fb-footer__form button:hover { transform: translateX(4px); }

.fb-footer__legal {
  background: rgba(255,255,255,0.03);
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fb-footer__legal-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 0 96px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.fb-footer__legal-links { display: flex; gap: 24px; flex-wrap: wrap; }
.fb-footer__legal-links a { color: inherit; text-decoration: none; }
.fb-footer__legal-links a:hover { color: var(--fb-wave); }

/* ============================================================
   Mobile (< 900px) */
@media (max-width: 900px) {
  .fb-utility__inner {
    padding: 4px 16px; font-size: 9px; gap: 10px;
    grid-template-columns: auto auto;
  }
  .fb-utility__link { letter-spacing: 0.02em; white-space: nowrap; }
  .fb-utility__brandmark { display: none; }
  .fb-nav__inner { padding: 16px 20px; grid-template-columns: 1fr auto; gap: 16px; }
  .fb-header.is-condensed .fb-nav__inner { padding: 12px 20px; }
  .fb-nav__links, .fb-nav__cta { display: none; }
  .fb-nav__burger { display: flex; }
  .fb-nav__logo-mark { font-size: 20px; }
  .fb-nav__logo-sub { font-size: 8px; letter-spacing: 0.4em; }
  .fb-nav__logo-img { height: 30px; }

  .fb-hero { height: auto; min-height: 0; display: flex; flex-direction: column; padding-top: 0; }
  .fb-hero__media { position: relative; inset: auto; height: 560px; min-height: 480px; }
  .fb-hero__h1 { font-size: 44px; line-height: 0.96; white-space: normal; }
  .fb-hero__line { white-space: normal; }
  .fb-hero__h1 em { font-size: 1em; }
  .fb-hero__atmosphere { z-index: 1; }
  .fb-hero__caption { font-size: 8px; max-width: 160px; top: 16px; right: 16px; }
  .fb-hero__vertical, .fb-hero__scrollcue { display: none; }
  .fb-hero__title {
    position: absolute; left: 24px; right: 24px;
    top: auto; bottom: 32px;
    max-width: none; z-index: 2;
  }
  .fb-hero__eyebrow { margin-bottom: 16px; font-size: 10px; }
  .fb-hero__actions {
    position: relative;
    right: auto; bottom: auto;
    max-width: none; text-align: left;
    background: var(--fb-black); color: var(--fb-white);
    padding: 32px 24px 40px;
  }
  .fb-hero__lede { color: rgba(255,255,255,0.85); }
  .fb-hero__btns { justify-content: flex-start; flex-wrap: wrap; }

  .fb-story { padding: 80px 0 72px; }
  .fb-story__inner { padding: 0 24px; }
  .fb-story__intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .fb-story__grid { grid-template-columns: 1fr; gap: 48px; padding-top: 40px; }

  .fb-services { padding: 80px 0; }
  .fb-services__inner { padding: 0 24px; }
  .fb-services__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
  .fb-services__h2 { grid-row: auto; grid-column: auto; font-size: 40px; line-height: 1; }
  .fb-services__lede { grid-row: auto; grid-column: auto; margin-top: 8px; font-size: 14px; }
  .fb-services__grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  /* Mobile 2-col: 7-card grid leaves orphan in row 4 — span full width. */
  .fb-services__grid > .fb-service:nth-child(7):last-child { grid-column: 1 / -1; }
  .fb-service__media { aspect-ratio: 1; margin-bottom: 12px; }
  .fb-service__title { font-size: 15px; letter-spacing: 0.04em; }
  .fb-service__sub { font-size: 11px; line-height: 1.4; }
  .fb-service__view { font-size: 9px; letter-spacing: 0.14em; gap: 8px; }
  .fb-service__view .arrow { width: 10px; }

  .fb-split { grid-template-columns: 1fr; }
  .fb-split__media { min-height: 420px; }
  /* min-width:0 lets the 1fr column shrink to the viewport so long headings
     (e.g. "Eastbourne's home of") wrap at spaces instead of overflowing —
     pairs with the no-mid-word-break rule (Finley review 2026-06-04). */
  .fb-split__copy { padding: 56px 24px 72px; max-width: none; min-width: 0; }

  .fb-reviews { padding: 80px 0; }
  .fb-reviews__inner { padding: 0 24px; }
  .fb-reviews__grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 64px; }
  .fb-ig__grid { grid-template-columns: repeat(3, 1fr); }
  .fb-ig__head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .fb-ctaband { padding: 80px 0; }
  .fb-ctaband__inner { padding: 0 24px; }

  .fb-footer__inner { grid-template-columns: 1fr; padding: 56px 24px 32px; gap: 40px; }
  .fb-footer__legal-inner { padding: 0 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Narrow phones: scale display headings down so long single words (e.g.
   "Eastbourne's", "Appointment") fit the line without breaking mid-word or
   clipping — also honours Finley's "smaller text" note (review 2026-06-04). */
@media (max-width: 420px) {
  .fb-hero__h1 { font-size: 38px; }
  .fb-story__h2,
  .fb-services__h2,
  .fb-ctaband__h2,
  .fb-intro__h1,
  .fb-faq-section__h2 { font-size: 32px; }
}

/* ============================================================
   Inner-page additions (Phase 02.5 sweep — phases 04, 06, 07, 08) */

/* ---- Full-bleed breakout for prototype sections inside page content ----
   page.html / single-service.html / single.html render raw-HTML patterns
   inside wp-block-post-content, whose constrained layout caps every direct
   child at the 720px contentSize. That collapsed the .fb-* section grids
   (uneven columns, shrunk media) and boxed their full-bleed backgrounds.
   Break the section out to the viewport; its own __inner keeps content
   width. Normal prose blocks stay constrained for readability. */
.entry-content > section[class^="fb-"] {
  max-width: none;
  width: 100vw;
  /* !important is required: WP core's constrained-layout rule applies
     `margin-left/right: auto !important` to every post-content child. Without
     !important here, our breakout margins lose, both sides resolve to `auto`,
     and the over-constrained 100vw width dumps the whole overflow onto
     margin-right — shoving the section off the right edge. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* 100vw includes the scrollbar width, so the breakout above bleeds ~scrollbar
   px past the viewport. Clip it — `clip` (not `hidden`) keeps the sticky
   header working since it doesn't create a scroll container. */
html { overflow-x: clip; }

/* ---- Hide the duplicate WP post title on hero-led pages (Finley review
   2026-06-04 — stray "ABOUT" sat above the About hero). Pages that open with
   a full-bleed .fb-hero/.fb-intro already carry their own H1, so suppress the
   template post title and the gap above it. Plain pages (legal, etc.) keep
   their title because their content doesn't open with a hero. */
main:has(> .entry-content > section.fb-hero:first-child) > .wp-block-post-title,
main:has(> .entry-content > section.fb-intro:first-child) > .wp-block-post-title {
  display: none;
}
main:has(> .entry-content > section.fb-hero:first-child),
main:has(> .entry-content > section.fb-intro:first-child) {
  padding-top: 0 !important;
}

/* ---- Kill the white gaps between full-bleed sections (Finley review
   2026-06-04). Templates like Contact/Team/Academy stack .fb-* sections as
   separate top-level blocks; WP's block-gap then inserts a ~24px white strip
   between each. These coloured bands must sit flush. */
.wp-site-blocks > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
/* On page.html (About/Reviews/Gallery/Services) the constrained <main> adds a
   5rem bottom pad; when the page ends in a full-bleed section that becomes a
   white strip above the footer. Drop it when the last block is an fb section.
   (Plain prose pages — legal — don't end in an fb section, so keep their pad.) */
main:has(> .entry-content > [class*="fb-"]:last-child) {
  padding-bottom: 0 !important;
}

/* ---- Intro section heading addition (page-reviews/page-gallery/category-intro) ---- */
.fb-intro__h1 {
  font-family: var(--font-display);
  /* Preston ships a single (regular) weight; without this the UA h1 default
     (bold/700) makes the browser synthesise a faux-bold, reading "too thick"
     vs the home hero. Pin to 400 to match .fb-hero__h1 (Finlay 2026-06-11). */
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--fb-black);
}
.fb-intro__h1 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .fb-intro__h1 { font-size: 36px; }
}
/* CTAs inside a clean .fb-intro header (About + Academy page headers) */
.fb-intro__btns {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
/* Per-page header tints so each clean header reads as its own band, distinct
   from the (lighter) section below it — Finley review 2026-06-10. Button-bearing
   headers (About, Academy) use cool tints so the warm Iced Latte CTAs still pop. */
.fb-intro--seafoam { background: var(--fb-sea-foam); }
.fb-intro--wave    { background: var(--fb-wave-20); }
.fb-intro--oatmeal { background: var(--fb-oatmeal); }
.fb-intro--sand    { background: var(--fb-oatmeal-60); }
/* Meet the Team hero — the band carries only an eyebrow + heading, so the
   default tall asymmetric intro padding left the heading sitting low. Tighten
   to a balanced band so it reads centred and sits slightly higher
   (Finlay 2026-06-11). */
.fb-main--team .fb-intro { padding-top: 56px; padding-bottom: 48px; }
@media (max-width: 900px) {
  .fb-main--team .fb-intro { padding-top: 40px; padding-bottom: 40px; }
}
/* Contact hero ("Come and say hello") — the default 120/64 intro padding left
   the heading sitting below the band's optical centre on desktop. Balance the
   padding so the single heading reads vertically centred (Finlay 2026-06-11). */
/* Contact hero — brand blue band, smaller "Contact us" heading (Yasmin
   2026-06-11). Black text on Wave passes AA at heading sizes. */
.fb-main--contact .fb-intro { padding-top: 88px; padding-bottom: 88px; background: var(--fb-wave); }
/* White heading on the Wave band (Yasmin 2026-06-19). */
.fb-main--contact .fb-intro__h1 { font-size: clamp(30px, 3vw, 42px); color: var(--fb-white); }
.fb-main--contact .fb-intro .fb-eyebrow { color: var(--fb-black); }
@media (max-width: 900px) {
  .fb-main--contact .fb-intro { padding-top: 48px; padding-bottom: 48px; }
}
/* Compact rating line on the Reviews header (replaces the big vertical badge) */
.fb-intro__stat {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fb-ash); margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.fb-intro__stat .stars { color: var(--fb-wave); letter-spacing: 0.12em; font-size: 15px; }

/* ---- Academy mid-page CTA strip (patterns/academy-cta-mid.php) ----
   Compact conversion point dropped between content sections so visitors don't
   have to reach the closing .fb-ctaband to act (Finlay 2026-06-11). Lighter
   than the closing band: Sea Foam surface, centred heading + button pair. */
.fb-academy-midcta { background: var(--fb-sea-foam); padding: 56px 0; }
.fb-academy-midcta__inner {
  max-width: 760px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 18px;
}
.fb-academy-midcta__h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0; color: var(--fb-black);
}
.fb-academy-midcta__h2 em {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-weight: 300; text-transform: lowercase; color: var(--fb-wave);
}
.fb-academy-midcta__btns {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
@media (max-width: 900px) { .fb-academy-midcta { padding: 40px 0; } }

/* ---- Generic FAQ / accent section used across academy + service ---- */
.fb-faq-section { padding: 80px 0; background: var(--surface-primary); }

/* Section tone modifier — opts an individual section out of its default
   surface onto a warm Oatmeal band. Used down the Training Academy page so
   consecutive sections alternate warm/cool tones instead of reading as one
   flat near-white wash (Finlay 2026-06-11). Declared after the section base
   rules so it wins on source order (equal single-class specificity). */
.fb-tone--oatmeal { background: var(--fb-oatmeal); }
.fb-faq-section__inner {
  max-width: 880px; margin: 0 auto; padding: 0 96px;
  display: flex; flex-direction: column; gap: 24px;
}
/* The academy FAQ list (phase-06.css) sets margin-inline:auto, so inside this
   centred flex column it shrank to its content width — which changed between the
   closed and open states and slid the whole box sideways on toggle. Pin it to
   full width so it stays put while answers animate. (Anas 2026-06-07.) */
.fb-faq-academy { width: 100%; }
.fb-faq-section__h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}
.fb-faq-section__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
.fb-faq-section__lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.7; color: var(--fb-ash); margin: 0;
}
@media (max-width: 900px) {
  .fb-faq-section { padding: 64px 0; }
  .fb-faq-section__inner { padding: 0 24px; }
}

/* ---- Contact form section ---- */
/* Sea Foam background (Yasmin 2026-06-11). */
.fb-contact-form-section { padding: 120px 0; background: var(--fb-sea-foam); }
.fb-contact-form-section__inner {
  max-width: 760px; margin: 0 auto; padding: 0 96px;
}
.fb-contact-form-section__head {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 40px;
}
.fb-contact-form-section__h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.1; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0;
}
.fb-contact-form-section__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
.fb-contact-form-section__lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.7; color: var(--fb-ash); margin: 0;
}
.fb-form-placeholder {
  font-family: var(--font-body); color: var(--fb-ash);
  font-size: 14px;
}
/* Centre the Fluent Forms submit button (Finley review 2026-06-07). The form
   ships it in a left-aligned wrapper; centre the wrapper + make the button
   inline-block so text-align takes effect. */
.fb-contact-form-section .ff_submit_btn_wrapper { text-align: center; }
.fb-contact-form-section .ff_submit_btn_wrapper .ff-btn-submit {
  display: inline-block; float: none; margin-left: auto; margin-right: auto;
  color: var(--fb-white) !important; /* white button text (Yasmin 2026-06-19) */
}
@media (max-width: 900px) {
  .fb-contact-form-section { padding: 64px 0; }
  .fb-contact-form-section__inner { padding: 0 24px; }
}

/* ---- Contact info block (already used; ensure prototype look) ---- */
.fb-contact-info { padding: 120px 0; background: var(--fb-white); }
.fb-contact-info__inner {
  max-width: 1320px; margin: 0 auto; padding: 0 96px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
}
.fb-contact-info__col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.fb-contact-info__h2 {
  font-family: var(--font-display);
  /* Smaller "Find the salon" / "When we're open" headers (Yasmin 2026-06-11). */
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.05; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 8px 0 16px;
}
.fb-contact-info__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
.fb-contact-info__line {
  font-family: var(--font-body); font-size: 14px; line-height: 1.7;
  color: var(--fb-black); margin: 0;
}
.fb-contact-info__line strong {
  display: inline-block; min-width: 60px; font-weight: 500;
  color: var(--fb-ash); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fb-contact-info__hours { width: 100%; max-width: 380px; }
.fb-contact-info__hours .fb-hours,
.fb-contact-info__hours .fb-hours tbody,
.fb-contact-info__hours .fb-hours tr {
  border: 0; width: 100%; border-collapse: collapse;
}
.fb-contact-info__hours .fb-hours th,
.fb-contact-info__hours .fb-hours td {
  border: 0;
  border-bottom: 1px solid var(--fb-wave-40);
  padding: 10px 4px; text-align: left;
  font-family: var(--font-body); font-size: 13px;
  vertical-align: top;
}
.fb-contact-info__hours .fb-hours tr:last-child th,
.fb-contact-info__hours .fb-hours tr:last-child td { border-bottom: 0; }
.fb-contact-info__hours .fb-hours th {
  width: 5.5rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
}
.fb-contact-info__hours .fb-hours tr[aria-current="true"] th,
.fb-contact-info__hours .fb-hours tr[aria-current="true"] td {
  color: var(--fb-wave); font-weight: 500;
}
.fb-contact-info__note {
  font-family: var(--font-body); font-size: 13px;
  color: var(--fb-ash); margin: 8px 0 0;
}
@media (max-width: 900px) {
  .fb-contact-info { padding: 64px 0; }
  .fb-contact-info__inner { padding: 0 24px; grid-template-columns: 1fr; gap: 48px; }
}

/* ---- Map embed (re-styled for prototype look) ---- */
.fb-map-embed {
  position: relative; width: 100%; height: 480px;
  background: var(--fb-sea-foam); overflow: hidden;
}
.fb-map-embed__iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block;
}
.fb-map-embed__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: linear-gradient(160deg, var(--fb-wave-20) 0%, var(--fb-wave-40) 100%);
  z-index: 1;
}
.fb-map-embed__placeholder-inner {
  max-width: 460px; text-align: center;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.fb-map-embed__placeholder-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1; letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.fb-map-embed__placeholder-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-black);
}
.fb-map-embed__placeholder-body {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6; color: var(--fb-ash); margin: 0;
}
html.cmplz-accepted-marketing .fb-map-embed__placeholder { display: none; }
@media (max-width: 900px) {
  .fb-map-embed { height: 360px; }
}

/* ---- Wellness events shop (Shopify Buy-Button, consent-gated) ---- */
.fb-events-shop { margin: 48px 0 0; }
.fb-events-shop__placeholder {
  display: flex; align-items: center; justify-content: center;
  padding: 56px 32px;
  background: linear-gradient(160deg, var(--fb-wave-20) 0%, var(--fb-wave-40) 100%);
}
.fb-events-shop__placeholder-inner {
  max-width: 520px; text-align: center;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.fb-events-shop__placeholder-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0;
}
.fb-events-shop__placeholder-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-black);
}
.fb-events-shop__placeholder-body {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6; color: var(--fb-ash); margin: 0;
}
.fb-events-shop__placeholder-cta { margin: 8px 0 0; }
/* Click-to-load: once the visitor opts in, hide the placeholder and reveal the widget. */
.fb-events-shop.is-loaded .fb-events-shop__placeholder { display: none; }
.fb-events-shop__mount:empty { min-height: 0; }

/* ---- Academy courses shop (Shopify Buy-Button, consent-gated) ---- */
.fb-academy-shop { padding: 88px 0; }
@media (max-width: 900px) { .fb-academy-shop { padding: 56px 0; } }
.fb-academy-shop__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.fb-academy-shop__inner > .fb-events-shop { width: 100%; text-align: left; }

/* ---- Accreditation section (academy) ---- */
.fb-accreditation { padding: 96px 0; background: var(--fb-white); }
.fb-accreditation__inner { max-width: 1100px; margin: 0 auto; padding: 0 96px; }
.fb-accreditation__head {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 56px; text-align: center; align-items: center;
}
.fb-accreditation__h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0;
}
.fb-accreditation__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
.fb-accreditation__lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; color: var(--fb-ash); margin: 0;
}
.fb-accreditation-strip {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: center; align-items: center;
}
.fb-accreditation-strip__item {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--fb-black);
  padding: 8px; min-height: 96px; min-width: 120px; justify-content: center;
  transition: transform var(--dur-2) var(--ease);
}
.fb-accreditation-strip__item:hover { transform: translateY(-2px); }
.fb-accreditation-strip__item img {
  /* Uniform white chip so the three real accreditor logos (blue ABT,
     taupe Twenty, dark London Brow) read consistently on any surface. */
  width: 200px; height: 88px; box-sizing: border-box;
  object-fit: contain; display: block; opacity: 1;
  background: var(--fb-white);
  border: 1px solid var(--fb-wave-20);
  border-radius: var(--r-md);
  padding: 16px 24px;
}
.fb-accreditation-strip__label {
  font-family: var(--font-body); font-weight: 300;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fb-ash);
}
.fb-accreditation-strip__item:focus-visible {
  outline: 2px solid var(--fb-wave); outline-offset: 4px;
}
@media (max-width: 900px) {
  .fb-accreditation { padding: 56px 0; }
  .fb-accreditation__inner { padding: 0 24px; }
  .fb-accreditation-strip { gap: 16px; }
  .fb-accreditation-strip__item img { width: 150px; height: 72px; padding: 12px 18px; }
}

/* ---- Finance card additions (over .fb-story__card base) ---- */
.fb-finance-card .fb-disclosure {
  font-family: var(--font-body); font-weight: 300;
  font-size: 12px; line-height: 1.6; color: var(--fb-ash);
  margin-top: 16px;
}
.fb-finance-card__link {
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.06em; margin-top: 16px;
}
.fb-finance-card__link a {
  color: var(--fb-black); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.fb-finance-card__link a:hover { color: var(--fb-wave); }
.fb-finance-card__link .arrow {
  width: 12px; height: 1px; background: currentColor; position: relative;
  display: inline-block;
}
.fb-finance-card__link .arrow::after {
  content: ''; position: absolute; right: 0; top: -2px;
  width: 5px; height: 5px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.fb-disclosure--footer {
  display: block; text-align: center;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--fb-wave-40);
  font-family: var(--font-body); font-size: 11px;
  /* Black not Ash: 11px Ash on Chalk = 3.74:1 (fails WCAG AA). Legal fine print must hit 4.5:1. */
  color: var(--fb-black);
  letter-spacing: 0.06em;
}

/* ---- Practitioner attribution (single-service.html) ---- */
.fb-practitioner-attribution {
  padding: 32px 0; margin-top: 32px;
  border-top: 1px solid var(--fb-wave-40);
  border-bottom: 1px solid var(--fb-wave-40);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.fb-practitioner-attribution__name {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px 0; color: var(--fb-black);
}

/* ---- Service intro (single-service.html) ---- */
.fb-service-intro {
  padding: 80px 24px 40px; max-width: 760px; margin: 0 auto;
}
.fb-service-intro .wp-block-post-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0 0 24px 0;
}
.fb-service-meta { gap: 32px !important; margin: 24px 0 32px; }
.fb-service-meta__value {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--fb-black); margin: 4px 0 0; font-weight: 300;
}
.fb-service-featured { margin: 0 !important; }
.fb-service-featured img { width: 100%; height: 60vh; min-height: 420px; object-fit: cover; }

/* Hide service hero placeholder (we use post-featured-image as the hero) */
.fb-hero--service { display: none; }

/* ---- "You may also be interested" header ---- */
.fb-also { padding: 96px 0 32px; background: var(--fb-white); }
.fb-also__inner { max-width: 1320px; margin: 0 auto; padding: 0 96px; }
.fb-also__head {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 32px; border-bottom: 1px solid var(--fb-wave-40);
}
.fb-also__h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0;
}
.fb-also__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .fb-also { padding: 56px 0 16px; }
  .fb-also__inner { padding: 0 24px; }
}
/* "You may also be interested" related-service cards — centred, evenly spaced
   (Yasmin 2026-06-16). Titles centre within each card; the row stays centred
   even when a service has no banner image yet. */
.fb-also__grid .wp-block-post-template {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: clamp(24px, 4vw, 56px);
}
.fb-also__grid .wp-block-post {
  flex: 1 1 0; min-width: 0; text-align: center;
}
.fb-also__grid .wp-block-post-featured-image { margin: 0 auto 18px; }
.fb-also__grid .wp-block-post-title { margin: 0; }
@media (max-width: 900px) {
  .fb-also__grid .wp-block-post-template { flex-direction: column; align-items: stretch; gap: 28px; }
}

/* ---- Team grid restyle (page-meet-the-team) ---- */
.fb-team-section { padding: 96px 0 120px; background: var(--fb-white); }
.fb-team-grid { max-width: 1320px; margin: 0 auto; padding: 0 96px; }
.fb-team-grid__group + .fb-team-grid__group { margin-top: 80px; }
.fb-team-grid__role-heading {
  font-family: var(--font-body); font-weight: 300;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fb-ash);
  margin: 0 0 32px;
  padding-bottom: 16px; border-bottom: 1px solid var(--fb-wave-40);
}
.fb-team-grid__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 32px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) { .fb-team-grid__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fb-team-grid__cards { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 900px) {
  .fb-team-section { padding: 56px 0 72px; }
  .fb-team-grid { padding: 0 24px; }
}
.fb-team-card {
  background: var(--fb-white);
  display: flex; flex-direction: column;
  text-align: left;
  transition: transform var(--dur-2) var(--ease);
}
.fb-team-card:hover { transform: translateY(-2px); }
.fb-team-card__portrait-wrap {
  aspect-ratio: 4/5; overflow: hidden;
  background: var(--fb-sea-foam);
  margin-bottom: 16px;
}
.fb-team-card__portrait {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--ease);
}
.fb-team-card:hover .fb-team-card__portrait { transform: scale(1.04); }
.fb-team-card__name {
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase;
  margin: 0 0 4px; color: var(--fb-black);
}
.fb-team-card__role {
  font-family: var(--font-body); font-weight: 300;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fb-ash); margin: 0 0 16px;
}
.fb-team-card__trigger {
  align-self: flex-start; appearance: none; background: transparent; border: 0;
  border-bottom: 1px solid var(--fb-black);
  padding: 4px 0;
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fb-black); cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.fb-team-card__trigger:hover,
.fb-team-card__trigger:focus-visible {
  border-bottom-color: var(--fb-wave); color: var(--fb-wave);
  outline: none;
}
/* More breathing room between the role line and the See Info button on mobile.
   Placed AFTER the base .fb-team-card__role shorthand so it wins on source order. */
@media (max-width: 900px) {
  .fb-team-card__role { margin-bottom: 28px; }
}
.fb-team-card__trigger:focus-visible { outline: 2px solid var(--fb-wave); outline-offset: 4px; }

/* ---- Team modal — prototype look ---- */
.fb-team-modal {
  padding: 0; border: 0; background: transparent;
  max-width: min(720px, 100vw); width: 100%;
  max-height: 100dvh; color: var(--fb-black);
}
.fb-team-modal__content {
  background: var(--fb-chalk);
  padding: 56px 48px 48px;
  position: relative; max-height: 100dvh; overflow-y: auto;
}
@media (min-width: 720px) {
  .fb-team-modal { max-height: 90dvh; }
  .fb-team-modal__content { max-height: 90dvh; }
}
@media (max-width: 600px) {
  .fb-team-modal__content { padding: 40px 24px 32px; }
}
.fb-team-modal__close {
  position: absolute; top: 16px; right: 16px;
  appearance: none; background: transparent; border: 0;
  font-size: 28px; line-height: 1; cursor: pointer;
  color: var(--fb-black);
  width: 40px; height: 40px;
  transition: color var(--dur-1);
}
.fb-team-modal__close:hover { color: var(--fb-wave); }
.fb-team-modal__close:focus-visible { outline: 2px solid var(--fb-wave); outline-offset: 2px; }
.fb-team-modal__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 40px 8px 0; line-height: 1;
}
.fb-team-modal__role {
  font-family: var(--font-body); font-weight: 300;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  /* Black not Ash: 11px Ash on Chalk modal bg = 3.74:1 (fails WCAG AA). */
  color: var(--fb-black); margin: 0 0 32px;
}
.fb-team-modal__bio {
  font-family: var(--font-body); font-weight: 300;
  font-size: 15px; line-height: 1.7; color: var(--fb-black);
}
.fb-team-modal__qualifications {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--fb-wave-40);
}
.fb-team-modal__qualifications-heading {
  font-family: var(--font-body); font-weight: 300;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fb-ash); margin: 0 0 8px;
}
.fb-team-modal__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 32px;
  background: var(--fb-wave); color: var(--fb-black);
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none;
  padding: 16px 28px; border-radius: var(--r-pill);
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.fb-team-modal__cta:hover {
  background: var(--fb-wave-80); transform: translateY(-1px);
}
.fb-team-modal__socials {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.fb-team-modal__socials a {
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fb-black); text-decoration: none;
  border-bottom: 1px solid var(--fb-wave);
  padding-bottom: 2px;
  transition: color var(--dur-1);
}
.fb-team-modal__socials a:hover { color: var(--fb-wave); }
.fb-team-modal::backdrop { background: rgba(0, 0, 0, 0.55); }
.fb-team-modal {
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease,
              overlay 200ms allow-discrete, display 200ms allow-discrete;
}
.fb-team-modal[open] { opacity: 1; transform: translateY(0); }
@starting-style {
  .fb-team-modal[open] { opacity: 0; transform: translateY(8px); }
}
/* ============================================================
   Newsletter slide-in popup (inc/email-popup.php). Slides in from the right a
   few seconds after arrival; dismissible, once per browser (JS). Added
   2026-06-07; Mailchimp/MC4WP wired 2026-06-08. */
.fb-emailpop {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 998;
  width: min(370px, calc(100vw - 32px));
  background: var(--fb-chalk);
  color: var(--fb-black);
  padding: 34px 30px 30px;
  border-top: 3px solid var(--fb-wave);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  visibility: hidden;
  transition: transform 620ms var(--ease), opacity 620ms var(--ease), visibility 0s linear 620ms;
}
.fb-emailpop.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 620ms var(--ease), opacity 620ms var(--ease);
}
.fb-emailpop__close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fb-ash);
  padding: 4px 8px; transition: color var(--dur-1);
}
.fb-emailpop__close:hover { color: var(--fb-black); }
.fb-emailpop__eyebrow {
  display: block; font-family: var(--font-body); font-weight: 300;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fb-ash); margin-bottom: 12px;
}
.fb-emailpop__h2 {
  font-family: var(--font-display);
  font-size: 32px; line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; word-spacing: -0.3em;
  margin: 0 0 14px 0;
}
.fb-emailpop__h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; text-transform: lowercase;
  color: var(--fb-wave); letter-spacing: -0.01em; word-spacing: -0.04em;
}
.fb-emailpop__copy {
  font-family: var(--font-body); font-weight: 300;
  font-size: 13.5px; line-height: 1.65; color: var(--fb-ash);
  margin: 0 0 20px 0;
}
.fb-emailpop__form { display: flex; flex-direction: column; gap: 12px; }
.fb-emailpop__input {
  font-family: var(--font-body); font-size: 14px;
  padding: 14px 16px; border: 1px solid var(--fb-wave-40);
  background: var(--fb-white); color: var(--fb-black);
  border-radius: var(--r-md); width: 100%;
  transition: border-color var(--dur-1);
}
.fb-emailpop__input:focus { outline: none; border-color: var(--fb-wave); }
.fb-emailpop__form .fb-btn { justify-content: center; }
.fb-emailpop__success {
  font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--fb-black); margin: 8px 0 0;
}
@media (max-width: 900px) {
  /* Dock flush to the bottom as a full-width sheet with rounded top corners
     (Finlay 2026-06-11). The sticky mobile CTA is in-flow at the page end, not
     a fixed overlay, so the sheet has nothing to clear at the viewport bottom.
     Slides up from the bottom instead of in from the right. */
  .fb-emailpop {
    right: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 26px 22px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .fb-emailpop__h2 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-team-modal, .fb-team-modal::backdrop,
  .fb-team-card, .fb-team-card__portrait { transition: none; }
  .fb-reveal,
  html.js .wp-block-post-content > *,
  html.js .entry-content > .wp-block-post-title,
  html.js .fb-faq-academy__item { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.fb-btn:focus-visible {
  outline: 2px solid var(--fb-black);
  outline-offset: 3px;
}

/* ============================================================
   Cascade overrides for WordPress core block defaults.
   `wp-element-button` + `wp-block-button__link` ship with
   color:#fff and background:#2872fa baked into the per-block
   inline stylesheet, which beats class selectors. We bump
   specificity with .wp-block-button__link.fb-* to win cleanly.
   ============================================================ */

/* Prose links inside post content: WP/Blocksy default link colour (#2872fa)
   on white = 4.3:1, fails WCAG AA (4.5:1). Unclassed content links (Yasmin's
   copy, e.g. the consent-register link on service pages) get an accessible
   Black + underline; styled links (buttons, .fb-* CTAs) are untouched. */
.wp-block-post-content a:not([class]) {
  color: var(--fb-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wp-block-post-content a:not([class]):hover { color: var(--fb-wave); }

/* #9 — sticky mobile CTA: mobile-only. On desktop the header keeps a
   permanent Book Now + the full nav is visible, so the bar is redundant.
   Doubled class to out-specify WP's .wp-container-* flex-layout rule. */
.wp-block-group.fb-sticky-cta { display: none; }
@media (max-width: 900px) {
  .wp-block-group.fb-sticky-cta { display: flex; }
}

/* #9 — sticky CTA buttons (Black-on-Wave per D-12) */
.wp-block-button__link.fb-sticky-cta__book,
.wp-block-button__link.fb-sticky-cta__call,
.wp-block-button__link.fb-sticky-cta__whatsapp {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-block-button__link.fb-sticky-cta__book {
  background: var(--fb-wave);
  color: var(--fb-black);
  border: 1px solid var(--fb-wave);
}
.wp-block-button__link.fb-sticky-cta__call,
.wp-block-button__link.fb-sticky-cta__whatsapp {
  background: transparent;
  color: var(--fb-black);
  border: 1px solid var(--fb-black);
}
.wp-block-button__link.fb-sticky-cta__book:hover,
.wp-block-button__link.fb-sticky-cta__book:focus-visible {
  background: var(--fb-black);
  color: var(--fb-chalk);
  border-color: var(--fb-black);
}
.wp-block-button__link.fb-sticky-cta__call:hover,
.wp-block-button__link.fb-sticky-cta__whatsapp:hover {
  background: var(--fb-black);
  color: var(--fb-chalk);
}

/* #10 — phone/email links inherit local copy colour, not WP default link blue */
/* Base: NAP links in plain prose (legal pages, body copy) where neither the
   footer nor contact-info scope applies. Without this they fall back to WP's
   #2872fa (4.3:1 on white, fails WCAG AA). Footer (Chalk) + contact-info scopes
   below out-specify this. */
a.fb-phone,
a.fb-email {
  color: var(--fb-black);
  text-decoration: underline;
  text-decoration-color: var(--fb-wave);
  text-underline-offset: 3px;
}
.fb-contact-info a.fb-phone,
.fb-contact-info a.fb-email {
  color: var(--fb-black);
  text-decoration: underline;
  text-decoration-color: var(--fb-wave);
  text-underline-offset: 3px;
}
.fb-contact-info a.fb-phone:hover,
.fb-contact-info a.fb-email:hover {
  text-decoration-color: var(--fb-black);
}
/* Footer sits on Black — phone/email must read in Chalk, not Black-on-Black */
.fb-footer a.fb-phone,
.fb-footer a.fb-email {
  color: var(--fb-chalk);
  text-decoration: underline;
  text-decoration-color: var(--fb-wave);
  text-underline-offset: 3px;
}
.fb-footer a.fb-phone:hover,
.fb-footer a.fb-email:hover {
  color: var(--fb-wave);
  text-decoration-color: var(--fb-wave);
}
/* The base a.fb-phone/.fb-email rule forces black, which renders invisible in
   the dark utility bar and inside ghost-light buttons (Finley review
   2026-06-04 — phone/email were black-on-black). Re-colour for those scopes. */
.fb-utility a.fb-phone,
.fb-utility a.fb-email {
  color: var(--fb-chalk);
  text-decoration: none;
}
.fb-utility a.fb-phone:hover,
.fb-utility a.fb-email:hover {
  color: var(--fb-wave);
}
.fb-btn.fb-phone,
.fb-btn.fb-email {
  color: inherit;            /* take the button's own colour, not the black base */
  text-decoration: none;
}
.fb-btn--ghost-light.fb-phone,
.fb-btn--ghost-light.fb-email { color: var(--fb-white); }
.fb-btn--ghost-light.fb-phone:hover,
.fb-btn--ghost-light.fb-email:hover { color: var(--fb-black); }
.fb-btn--primary.fb-phone,
.fb-btn--primary.fb-email { color: var(--fb-white); }

/* #11 — Wave-on-white em fails Pitfall 6. Use Ash for the italic accent (4.83:1 on white). */
.fb-contact-info__h2 em {
  color: var(--fb-ash);
}

/* #12 — Fluent Forms inputs need contrast against the Oatmeal section bg.
   Switch input bg to white + darken text. */
.fb-contact-form-section .ff-el-form-control,
.fb-contact-form-section input.ff-el-form-control,
.fb-contact-form-section textarea.ff-el-form-control,
.fb-contact-form-section select.ff-el-form-control {
  background: var(--fb-white);
  color: var(--fb-black);
  border: 1px solid var(--fb-iced-latte);
}
.fb-contact-form-section .ff-el-form-control::placeholder {
  color: var(--fb-ash);
  opacity: 1;
}
.fb-contact-form-section .ff-el-form-control:focus {
  outline: 2px solid var(--fb-black);
  outline-offset: 1px;
  border-color: var(--fb-black);
}

/* ============================================================
   Top-level layout: no white strips between full-bleed sections.
   theme.json sets --wp--style--block-gap:1.5em, which WP applies
   as margin-block-start to every direct child of .wp-site-blocks.
   For a full-bleed brochure layout we want sections to butt up
   against each other — no auto gap between <main>, the sticky
   CTA template-part, and the footer template-part.
   ============================================================ */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > div > main,
.wp-site-blocks > div.wp-block-template-part {
  margin-top: 0;
  margin-bottom: 0;
}
/* Same block-gap leaks BETWEEN the full-bleed .fb-* sections — whether they
   sit directly inside <main> (academy / contact / team templates stack 5–7
   of them) or inside .entry-content (page.html-rendered pages: reviews /
   gallery / about). WP gives each a 1.5em margin-block, painting a white
   strip between adjacent coloured sections. Zero it; the sections own their
   vertical rhythm via padding. Only .fb-* sections are targeted, so prose
   blocks inside .entry-content keep their paragraph spacing. */
.wp-site-blocks main > section[class^="fb-"],
.entry-content > section[class^="fb-"] {
  margin-top: 0;
  margin-bottom: 0;
}

/* ---- Academy: intro lede / footnote, course-list cards, 2-up grids ---- */
.fb-story__lede {
  grid-column: 2;
  font-family: var(--font-body); font-weight: 300;
  font-size: 17px; line-height: 1.7; color: var(--fb-ash);
  margin: 16px 0 0;
}
.fb-story__footnote {
  font-family: var(--font-body); font-weight: 300;
  font-size: 15px; line-height: 1.7; color: var(--fb-ash);
  max-width: 760px; margin: 56px auto 0; text-align: center;
}
.fb-story--2up .fb-story__grid { grid-template-columns: repeat(2, 1fr); }
/* Centre both course columns — intro + cards + lists (Finley review 2026-06-04). */
.fb-story--2up .fb-story__intro { display: block; text-align: center; }
.fb-story--2up .fb-story__intro .fb-eyebrow { display: block; }
.fb-story--2up .fb-story__lede { max-width: 680px; margin-left: auto; margin-right: auto; }
.fb-story--2up .fb-story__card { text-align: center; }
.fb-story--2up .fb-story__card .fb-academy-list li { padding-left: 0; padding-right: 0; }
.fb-story--2up .fb-story__card .fb-academy-list li::before { display: none; }
.fb-academy-list { list-style: none; margin: 8px 0 0; padding: 0; }
.fb-academy-list li {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.6; color: var(--fb-black);
  position: relative; padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--fb-wave-20);
}
.fb-academy-list li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--fb-wave);
}
.fb-reviews__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 940px; margin-inline: auto;
}
@media (max-width: 900px) {
  .fb-story__lede { grid-column: 1; }
  .fb-story--2up .fb-story__grid { grid-template-columns: 1fr; }
  .fb-reviews__grid--two { grid-template-columns: 1fr; }
}

/* ============================================================
   PHOTOGRAPHY LAYER (0.27.6)
   Stock stand-in imagery wired over the .fb-photo gradient slots.
   Source: Pexels (free commercial licence, no attribution required).
   These are placeholders — swap for Features Beauty's own brand
   photography (storefront, real treatments, team) when supplied.
   Paths are relative to this file (assets/css/) → ../images/.
   ============================================================ */

/* Real photos now fill every slot: drop the decorative soft-light sheen
   and the [bracketed] placeholder caption notes. */
.fb-photo::before,
.fb-photo--cool::before,
.fb-photo--warm::before,
.fb-photo--deep::before { display: none; }
.fb-photo__caption,
.fb-hero__caption { display: none; }

/* Shared rendering for every imaged slot. */
.fb-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Site-wide defaults by gradient variant — guarantees a real photo in
   every slot, including pattern-built pages we don't scope individually. */
.fb-photo--warm { background-image: url('../images/salon-3.webp?v=2'); }
.fb-photo--cool { background-image: url('../images/salon-2.webp?v=2'); }
.fb-photo--deep { background-image: url('../images/aesthetics.webp?v=2'); }

/* Service category cards — same per-category order on the home grid and
   the /services/ hub, so one mapping serves both. */
.fb-services__grid .fb-service:nth-child(1) .fb-service__media { background-image: url('../images/brows.webp?v=2'); }
.fb-services__grid .fb-service:nth-child(2) .fb-service__media { background-image: url('../images/facial.webp?v=2'); }
.fb-services__grid .fb-service:nth-child(3) .fb-service__media { background-image: url('../images/aesthetics.webp?v=2'); }
.fb-services__grid .fb-service:nth-child(4) .fb-service__media { background-image: url('../images/wellness-facial.webp?v=2'); }
.fb-services__grid .fb-service:nth-child(5) .fb-service__media { background-image: url('../images/lashes.webp?v=2'); }
.fb-services__grid .fb-service:nth-child(6) .fb-service__media { background-image: url('../images/nails-1.webp?v=2'); }
.fb-services__grid .fb-service:nth-child(7) .fb-service__media { background-image: url('../images/makeup-bridal.webp?v=2'); }

/* Home hero — salon interior with a left-weighted scrim so the white
   Preston headline stays legible. */
.home .fb-hero__media {
  background-image:
    linear-gradient(100deg, rgba(14,17,19,0.74) 0%, rgba(14,17,19,0.46) 52%, rgba(14,17,19,0.58) 100%),
    url('../images/hero-salon.webp?v=3');
}

/* Home academy split (the generic .fb-photo default handles About's story
   split + any other 50/50 split). */
.home .fb-split__media .fb-photo { background-image: url('../images/massage-face.webp?v=2'); }

/* Instagram strip tiles (home social-proof). */
.fb-ig__grid .fb-ig__tile:nth-child(1) { background-image: url('../images/skin-macro.webp?v=2'); }
.fb-ig__grid .fb-ig__tile:nth-child(2) { background-image: url('../images/makeup-bridal.webp?v=2'); }
.fb-ig__grid .fb-ig__tile:nth-child(3) { background-image: url('../images/massage-back.webp?v=2'); }
.fb-ig__grid .fb-ig__tile:nth-child(4) { background-image: url('../images/nails-2.webp?v=2'); }
.fb-ig__grid .fb-ig__tile:nth-child(5) { background-image: url('../images/portrait-glow.webp?v=2'); }
.fb-ig__grid .fb-ig__tile:nth-child(6) { background-image: url('../images/skincare-mask.webp?v=2'); }

/* Real Features Beauty salon interior as the hero/header image on every
   page, with a flat dark scrim so white overlay text stays legible.
   Beats the per-variant defaults (later source order, equal specificity);
   .home keeps its stronger directional scrim variant below. Covers the
   contact hero too — no separate rule needed. */
.fb-hero__media {
  background-image:
    linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)),
    url('../images/hero-salon.webp?v=3');
}

/* Per-page hero photos so inner pages don't all reuse the home salon shot
   (Finley review 2026-06-04 — "academy/about look the same as the homepage").
   Later source order beats the generic .fb-hero__media at equal specificity. */
.fb-hero__media--about {
  background-image:
    linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)),
    url('../images/salon-3.webp?v=2');
}
.fb-hero__media--academy {
  background-image:
    linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)),
    url('../images/salon-2.webp?v=2');
}

/* Slightly stronger hero scrim across all heroes for white-text contrast
   over real photography (top + bottom darken). */
.fb-hero__atmosphere {
  background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.06) 32%, rgba(0,0,0,0.12) 58%, rgba(0,0,0,0.62) 100%);
}

/* ============================================================
   HEADING COLOUR HIERARCHY (0.27.7)
   The page title (h1, e.g. "SERVICES") stays the darkest — Black.
   Section sub-headings step down to a warm dark taupe (theme Ash
   #5C5249): clearly a notch lighter than the title, on-theme, and
   WCAG-AA on light surfaces. White-on-dark headings (hero, CTA band)
   and the brand italic <em> accents (Wave/ash) are left untouched.
   ============================================================ */
.fb-story__h2,
.fb-services__h2,
.fb-split__h2,
.fb-reviews__h2,
.fb-accreditation__h2,
.fb-also__h2 {
  color: #5C5249;
}

/* WP-rendered content pages (service categories, service singles, legal):
   prose section headings follow the same step-down; the post title h1
   stays Black (it lives outside .wp-block-post-content). */
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
  color: #5C5249;
}

/* ============================================================
   MOBILE WHITESPACE TRIM (0.27.7)
   Phones were giving up a lot of empty space at the top of each page
   and between sections. Tighten the vertical rhythm so it stays airy
   but not sparse. Desktop spacing is unchanged. Comes after the main
   mobile block above so these win on source order.
   ============================================================ */
@media (max-width: 900px) {
  /* Generic Page template (services, about, legal, reviews, gallery):
     pull the page title up and close the gap to the first section.
     !important needed to beat the inline padding from page.html. */
  main.wp-block-group { padding-top: 16px !important; }
  main.wp-block-group > .wp-block-post-title { margin-top: 0; margin-bottom: 8px; }

  /* Trim the generous ~80px section padding on phones. */
  .fb-services { padding: 36px 0; }
  .fb-story { padding: 40px 0 36px; }
  .fb-reviews { padding: 40px 0; }
  .fb-ctaband { padding: 52px 0; }
  .fb-accreditation { padding: 40px 0; }
  .fb-also { padding: 40px 0 16px; }
  .fb-services__head { margin-bottom: 24px; }
  .fb-story__intro { margin-bottom: 28px; }
  .fb-split__copy { padding: 40px 24px 48px; }
}

/* ============================================================
   FULL-SCREEN MOBILE MENU (0.27.9)
   The drawer was a max-height:80vh dropdown with overflow:hidden — with
   7 nav links the content overran it and clipped the Book Now button.
   Make it a full-screen overlay instead: every link + a full-width
   Book Now are always visible (and it scrolls if it ever needs to).
   ============================================================ */
@media (max-width: 900px) {
  .fb-drawer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    z-index: 90;                 /* header chrome raised above this below */
    background: var(--fb-chalk);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  .fb-drawer.is-open {
    max-height: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--dur-2) var(--ease);
  }
  /* Keep the logo + burger (now the close X) tappable above the overlay. */
  .fb-utility,
  .fb-nav { position: relative; z-index: 101; }
  /* Links start below the header and fill the sheet; Book Now full-width. */
  .fb-drawer__nav {
    padding: 112px 32px calc(56px + env(safe-area-inset-bottom));
    gap: 6px;
    justify-content: flex-start;
  }
  .fb-drawer__cta {
    margin-top: 28px;
    align-self: stretch;
    text-align: center;
  }
}

/* ============================================================
   FINLEY REVIEW 2026-06-04 — restore the Cormorant italic inline accent.
   Reverses the 2026-06-03 "drop accent" decision: Finley now wants the
   original lowercase-italic Cormorant emphasis word back on every display
   heading (the prototype treatment) — "the old italic, without the gaps".
   The per-heading `em` rules above (.fb-hero__h1 em, etc.) define the
   italic; we simply no longer neutralise them. The "gaps" came from the
   em-dashes that sat next to the accent words (now removed from copy) and
   from headings breaking mid-word — handled by the no-break rule below.
   ============================================================ */

/* Headings never break a word mid-letter (e.g. EASTBOU/RNE'S, TECHNIQU/E).
   Blocksy's global `overflow-wrap: break-word` was splitting long all-caps
   words; force normal wrapping (break at spaces only) on every display
   heading. */
.fb-hero__h1,
.fb-story__h2,
.fb-split__h2,
.fb-services__h2,
.fb-reviews__h2,
.fb-ctaband__h2,
.fb-intro__h1,
.fb-faq-section__h2,
.fb-contact-form-section__h2,
.fb-contact-info__h2,
.fb-accreditation__h2,
.fb-also__h2,
.fb-faq-academy h2,
.fb-team-section h2 {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  /* Tighten the gaps between words — Preston's all-caps space glyph reads very
     wide at display sizes (Finley/Anas review 2026-06-04 → -0.1, 2026-06-07 →
     -0.18 still too wide → -0.4). The italic Cormorant <em> accent has a much
     narrower space, so -0.4 crushed multi-word accents ("of your training") —
     it gets its own looser word-spacing in the emphasis block below. */
  word-spacing: -0.4em;
}

/* Preston card / sub-titles (smaller all-caps) — same wide-space problem, a
   touch less negative than the big display heads. (Finley/Anas 2026-06-07.) */
.fb-story__title,
.fb-service__title,
.fb-also__title,
.fb-review__name,
.fb-split__badge,
.has-preston-font-family {
  word-spacing: -0.3em;
}

/* ============================================================
   FINLEY REVIEW 2026-06-03 — unify review star colour to YELLOW.
   The Smash Balloon feed rendered item stars in its brand blue (#0096CC)
   and the header rating in navy (#141B38), clashing with our static
   stars. Finley asked for the stars "coloured in yellow" — use the
   conventional Google review gold (#FBBC04) for every star, feed +
   static. (Note: overrides the brand "no gold on the website" rule, per
   Finley/Anas.) Plugin star <svg>s use fill:currentColor, so recolouring
   `color` recolours the filled layer (partial ratings keep grey base).
   ============================================================ */
.fb-reviews__feed .sb-item-rating,
.fb-reviews__feed .sb-item-rating-ctn,
.fb-reviews__feed .sb-item-rating-icon,
.fb-reviews__feed .sb-feed-header-rating,
.fb-reviews__feed .sb-feed-header-rating-icon {
  color: #FBBC04 !important;
}
/* Our own static stars (homepage reviews header + prototype review cards). */
.fb-reviews__h2 .stars,
.fb-reviews__h2 .rating,
.fb-review__stars {
  color: #FBBC04;
}
.fb-reviews__feed .sb-item-rating-icon svg,
.fb-reviews__feed .sb-feed-header-rating svg {
  fill: currentColor !important;
}

/* ============================================================
   FINLEY REVIEW 2026-06-03 — card-style the service-category grid.
   Each /services/{cat}/ Page lists its child services via a seeded
   wp:query (post-title + excerpt, no image). Unstyled it read as bare
   text columns with a sparse, half-empty second row. Treat each item as
   a card; auto-fit keeps rows full (PMU's 4 services fill one row), so
   the "empty gap above the footer" Finley flagged is gone too.
   Scoped to .wp-block-post-content so the single-service "you may also"
   grid (outside post-content) and the /services/ hub (.fb-services__grid,
   not a query) are untouched.
   ============================================================ */
.wp-block-post-content .wp-block-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Finley: "2 and then 2 below", wider cards */
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 600px) {
  .wp-block-post-content .wp-block-query .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}
/* WP's is-flex-container columns-3 puts a calc() width on each <li> and its
   justify-self doesn't resolve to stretch in our grid, so cards collapsed to
   content width. Force each to fill its track (selector is one class deeper
   than WP's so it wins). */
.wp-block-post-content .wp-block-query .wp-block-post-template > .wp-block-post {
  width: 100% !important;
}
.wp-block-post-content .wp-block-query .wp-block-post {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px;
  background: var(--fb-chalk);
  border: 1px solid var(--fb-wave-20);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.wp-block-post-content .wp-block-query .wp-block-post:hover {
  border-color: var(--fb-wave);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.wp-block-post-content .wp-block-query .wp-block-post-title {
  margin: 0 0 12px;
}
.wp-block-post-content .wp-block-query .wp-block-post-title a {
  color: var(--fb-black);
  text-decoration: none;
}
.wp-block-post-content .wp-block-query .wp-block-post:hover .wp-block-post-title a {
  color: var(--fb-ash);
}
.wp-block-post-content .wp-block-query .wp-block-post-excerpt,
.wp-block-post-content .wp-block-query .wp-block-post-excerpt__excerpt {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fb-ash);
}

/* ============================================================
   FINLEY REVIEW 2026-06-03 — kill the white strip above the footer.
   page.html gives <main> a 5rem (80px) bottom padding — right for prose
   pages, but when a Page closes on the full-bleed black CTA band it left
   an 80px white strip between two dark sections (flagged on About +
   category pages). Zero it only when the last content section is the
   CTA band; prose pages keep their breathing room. !important beats
   the inline padding from page.html.
   ============================================================ */
main.wp-block-group:has(> .wp-block-post-content > .fb-ctaband:last-child) {
  padding-bottom: 0 !important;
}

/* ============================================================
   FINLEY REVIEW 2026-06-03 (part 2) — centre section headings +
   tighten spacing for a sleeker, consistent format.
   The intro + accreditation blocks were already centred; Finley asked
   (on every page) to make the rest follow that one format. Centre the
   left-aligned editorial heads (WP page title, story, services, reviews,
   FAQ, contact form, "also") and trim the heaviest desktop spacing.
   ============================================================ */

/* WP page title — SERVICES / ABOUT / PERMANENT MAKEUP / CONTACT */
main.wp-block-group > .wp-block-post-title { text-align: center; }

/* Story head — was a 2-col grid (eyebrow | heading); stack + centre. */
.fb-story__intro {
  display: block;
  text-align: center;
  margin-bottom: 56px;
}
.fb-story__intro .fb-eyebrow { display: block; margin-bottom: 16px; }
.fb-story__intro .fb-story__h2 { margin: 0 auto; }

/* Services head — was a grid; stack + centre. */
.fb-services__head {
  display: block;
  text-align: center;
  margin-bottom: 56px;
}
.fb-services__head .fb-eyebrow { display: block; padding-top: 0; margin-bottom: 16px; }
.fb-services__lede { margin-left: auto; margin-right: auto; }

/* Reviews head — flex column → centre. */
.fb-reviews__head { text-align: center; align-items: center; }
.fb-reviews__h2 { justify-content: center; }

/* FAQ — centre the heading + lede only, NOT the accordion width. */
.fb-faq-section__h2,
.fb-faq-section__lede { text-align: center; }

/* Contact form head — flex column → centre. */
.fb-contact-form-section__head { text-align: center; align-items: center; }

/* "You may also" head — flex column → centre. */
.fb-also__head { text-align: center; align-items: center; }

/* Trim the heaviest desktop section padding so it reads sleeker
   (mobile already trimmed above; scope to desktop to avoid double-cut). */
@media (min-width: 901px) {
  .fb-story { padding: 112px 0 96px; }
  .fb-services { padding: 112px 0; }
  .fb-reviews { padding: 112px 0; }
}

/* ============================================================
   FINLEY REVIEW 2026-06-03 (pt2) — large-header heroes fill the screen.
   Finley/Anas: the big display-header hero sections should take the full
   viewport on open (the homepage hero's white gap / "touch the bottom").
   Make every page hero full-height on desktop. The HOME hero uses its own
   fill-the-fold value below. Mobile keeps its stacked layout (the global
   .fb-hero height:auto rule at <=900px).
   ============================================================ */
@media (min-width: 901px) {
  .fb-hero { height: calc(100dvh - 124px); }
  /* Home hero: fill the fold (header ≈124px) so the centred hero content takes
     the whole first screen on first paint (Anas 2026-06-09, Jasmines-style). */
  .home .fb-hero { height: calc(100dvh - 108px); min-height: 600px; }
}


/* ============================================================
   FINLEY REVIEW 2026-06-04 (pt5) — emphasis word sizing.
   The italic Cormorant accent word reads visually smaller than the all-caps
   Preston around it even at the same font-size (different cap/x-heights). Scale
   it up so it matches the surrounding word, and pull the following word in so
   the gap reads as a tight, natural word space (it was looking detached).
   Placed last so it wins over the per-heading em rules + the mobile override.
   ============================================================ */
.fb-hero__h1 em,
.fb-story__h2 em,
.fb-split__h2 em,
.fb-ctaband__h2 em,
.fb-intro__h1 em,
.fb-faq-section__h2 em,
.fb-contact-form-section__h2 em,
.fb-contact-info__h2 em,
.fb-accreditation__h2 em,
.fb-servcta__h2 em,
.fb-teamteaser__h2 em,
.fb-also__h2 em {
  /* Accent words now render in the same plain Preston as the rest of the heading
     (Cormorant italic was retired 2026-06-11). The old 1.22em scale-up — tuned
     to compensate for Cormorant's smaller x-height — left accents like "EXPERT"
     and "OF YOUR TRAINING" oversized. Match the surrounding word exactly so
     heading sizes are uniform (Yasmin 2026-06-18). */
  font-size: 1em;
  margin-right: 0;
  word-spacing: inherit;
}

/* ============================================================
   HOMEPAGE REVIEWS — auto-gliding, swipeable scroller (0.36.0)
   The free Reviews Feed has no working carousel (Pro-only — it ships the
   slider display:none). Instead we turn the feed's rendered review cards
   into our own horizontal scroller: JS (initReviewsScroller) clones the
   set for a seamless loop and auto-glides it; pointer-drag (desktop) and
   native touch (mobile) give manual swipe. Pauses on hover/touch.
   Scoped to .fb-reviews so ONLY the homepage reviews section is affected.
   ============================================================ */
.fb-reviews__feed .sb-feed-posts {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Soft edge fade — cards dissolve in/out at the start & end of the row
     instead of hard-cutting at the section edges. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.fb-reviews__feed .sb-feed-posts::-webkit-scrollbar { display: none; }
.fb-reviews__feed .sb-feed-posts.is-grabbing { cursor: grabbing; }
.fb-reviews__feed .sb-feed-posts.is-grabbing * { user-select: none; }
/* Fixed-width review blocks so the row is a true scroller, not a wrap grid.
   Beats the plugin's full-width list item with a flex-basis + width !important. */
.fb-reviews__feed .sb-post-item-wrap {
  flex: 0 0 clamp(258px, 78vw, 320px) !important;
  width: clamp(258px, 78vw, 320px) !important;
  max-width: clamp(258px, 78vw, 320px) !important;
  margin: 0 !important;
  box-sizing: border-box;
  /* Card chrome so each review reads as a distinct block in the scroller. */
  background: var(--fb-white);
  border: 1px solid var(--fb-iced-latte);   /* Iced Latte = brand divider colour */
  border-radius: 14px;
  padding: 28px 26px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
/* A scroller never needs a load-more / pagination control. */
.fb-reviews__feed .sbr-load-more,
.fb-reviews__feed #sbr_load,
.fb-reviews__feed [class*="load-more"],
.fb-reviews__feed [class*="loadmore"],
.fb-reviews__feed .sbr-pagination {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  /* No auto-glide (JS skips it); the row is still manually swipeable. */
  .fb-reviews__feed .sb-feed-posts { scroll-behavior: auto; }
}

/* ============================================================
   SERVICES MEGAMENU (0.39.0)
   The header "Services" link opens a full-width dropdown of the 7
   service categories + their services. Service pages are unchanged —
   this only changes navigation. Desktop = hover/focus megamenu (panel
   anchored to .fb-nav so it spans full width); mobile (<900px) uses an
   expandable group inside the drawer (categories only).
   ============================================================ */
.fb-nav { position: relative; }   /* positioning context for the full-width panel */
.fb-has-mega { display: inline-flex; align-items: center; position: static; }
.fb-nav__caret {
  display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-2, .22s) var(--ease, ease);
}
.fb-has-mega:hover .fb-nav__caret,
.fb-has-mega:focus-within .fb-nav__caret { transform: translateY(0) rotate(-135deg); }

.fb-mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--fb-white);
  border-top: 1px solid var(--fb-wave-20);
  box-shadow: 0 26px 44px rgba(0, 0, 0, 0.08);
  padding: 40px 0 44px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s var(--ease, ease), transform .22s var(--ease, ease), visibility .22s;
  z-index: 95;
}
.fb-has-mega:hover > .fb-mega,
.fb-has-mega:focus-within > .fb-mega {
  opacity: 1; visibility: visible; transform: none;
}
.fb-mega__inner {
  max-width: 1320px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 24px;
}
.fb-mega__head {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 13px; line-height: 1.3; color: var(--fb-black);
  text-decoration: none;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--fb-iced-latte);
  transition: color .18s var(--ease, ease);
}
/* Category heads are non-clickable labels now (Yasmin 2026-06-11) — no hover
   colour shift or pointer, since the category pages were retired. */
.fb-mega__head { cursor: default; }
.fb-mega__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.fb-mega__list a {
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.01em;
  color: var(--fb-ash); text-decoration: none;
  transition: color .16s var(--ease, ease);
}
.fb-mega__list a:hover { color: var(--fb-black); }

/* Mobile drawer — expandable Services group (categories only). */
.fb-drawer__group { display: flex; flex-direction: column; }
.fb-drawer__toggle {
  background: none; border: 0; cursor: pointer; width: 100%;
  display: flex; align-items: center; text-align: left;
  /* No `font: inherit` here — it reset the button to body Montserrat 16px, so
     "Services" rendered smaller/different from its sibling .fb-drawer__link
     items (Finlay 2026-06-11). The shared .fb-drawer__link class supplies the
     Preston 28px display font; the button must not override it. */
  color: inherit;
}
.fb-drawer__chev {
  margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .22s var(--ease, ease);
}
.fb-drawer__toggle[aria-expanded="true"] .fb-drawer__chev { transform: rotate(-135deg); }
.fb-drawer__sub {
  overflow: hidden; max-height: 0;
  transition: max-height .3s var(--ease, ease);
  display: flex; flex-direction: column;
  padding-left: 46px;
}
/* Tall enough for the full per-category service list (Yasmin 2026-06-11). */
.fb-drawer__group.is-open .fb-drawer__sub { max-height: 1800px; }
.fb-drawer__sub a {
  font-family: var(--font-body); text-transform: none;
  font-size: 15px; letter-spacing: 0.02em; color: var(--fb-ash);
  text-decoration: none; padding: 7px 0;
}
.fb-drawer__sub a:hover { color: var(--fb-black); }
/* Non-clickable category label inside the mobile Services dropdown. */
.fb-drawer__sublabel {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.1em; color: var(--fb-black);
  padding: 14px 0 4px; margin-top: 6px;
  border-bottom: 1px solid var(--fb-wave-40);
}
.fb-drawer__sublabel:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .fb-mega { display: none; }   /* drawer handles mobile */
}

/* ============================================================
   HOMEPAGE HERO — centred, cascading (Anas 2026-06-09)
   Jasmines-style: nav stays visible, full-bleed photo, content
   stacked + centred, buttons below. Hero fills the fold on first paint.
   Scoped to .fb-hero--center so the shared inner-page hero layout
   (.fb-hero__title / .fb-hero__actions) is left untouched.
   ============================================================ */
.fb-hero--center .fb-hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px;
}
.fb-hero--center .fb-hero__center {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
}
.fb-hero--center .fb-hero__eyebrow { padding-left: 0; margin-bottom: 26px; }
.fb-hero--center .fb-hero__h1 { letter-spacing: 0.02em; line-height: 1.04; }
.fb-hero--center .fb-hero__lede {
  max-width: 560px;
  margin: 30px 0 34px;
  text-align: center;
  font-size: 15px;
}
.fb-hero--center .fb-hero__btns { justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  /* Centred over the photo on mobile too — no black panel split. */
  .fb-hero--center .fb-hero__media {
    position: relative; inset: auto;
    height: auto; min-height: calc(100dvh - 112px);
    padding: 80px 24px;
  }
  .fb-hero--center .fb-hero__lede { color: rgba(255,255,255,0.9); font-size: 14px; }
}

/* ============================================================
   DISPLAY HEADINGS — lock the cascade across all PC viewports
   (Anas 2026-06-09: on Finley's wider laptop these re-wrapped into
   different rows than on Anas's screen). The line breaks are
   hard-coded in the markup; nowrap stops any line from re-wrapping
   by column width on ≥901px, so every PC width renders identically.
   Exception: the About "Our Story" split (.fb-split--wrap) carries a
   single long line ("Eastbourne's home of beauty & wellness") that
   clips under nowrap in the half-width column, so it wraps naturally
   (Finley review 2026-06-10).
   ============================================================ */
@media (min-width: 901px) {
  .fb-teamteaser__h2,
  .fb-split__h2 { white-space: nowrap; }
  .fb-split--wrap .fb-split__h2 { white-space: normal; }
}

/* ============================================================
   ACADEMY — distinct heading tone per section (Anas 2026-06-09).
   Each section head a slightly different brand tone so the sections
   read as distinct. All dark + AA-safe on the light section
   backgrounds; the Wave <em> accent keeps its own colour. Alternates
   cool/warm down the page.
   ============================================================ */
[data-screen-label="Academy Value"] .fb-story__h2 { color: #3f4e54; }
[data-screen-label="Academy Courses"] .fb-story__h2 { color: #6b5a47; }
[data-screen-label="Academy Finance"] .fb-story__h2 { color: #4b565b; }
[data-screen-label="Accreditation"] .fb-accreditation__h2 { color: #5c5249; }
[data-screen-label="Trainee Testimonials"] .fb-reviews__h2 { color: #3d4f57; }
[data-screen-label="Academy FAQ"] .fb-faq-section__h2 { color: #685844; }

/* ============================================================
   Yasmin review 2026-06-11 — REMOVE the Cormorant italic script accent.
   She flagged the lyrical italic accent words ("expert", "a beauty", "the
   results", "words", "salon", "open", etc.) as off-brand and asked for the
   font to be removed site-wide. Render every heading <em> accent in the same
   Preston display as the rest of the heading: no italic, no script, no
   lowercase, no Wave colour. Declared last so it wins on source order. */
.fb-hero__h1 em,
.fb-intro__h1 em,
.fb-story__h2 em,
.fb-split__h2 em,
.fb-reviews__h2 em,
.fb-ctaband__h2 em,
.fb-servcta__h2 em,
.fb-teamteaser__h2 em,
.fb-academy-midcta__h2 em,
.fb-faq-section__h2 em,
.fb-contact-form-section__h2 em,
.fb-contact-info__h2 em,
.fb-accreditation__h2 em,
.fb-map-embed__placeholder-title em,
.fb-also__h2 em,
.fb-emailpop__h2 em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ============================================================
   FOOTER — Yasmin review 2026-06-11. Wave (#9aacb2) footer with dark text,
   round submark logo, socials moved under the contact details, tighter
   single-line email. Declared after the original dark-footer palette so these
   win on source order (equal single-class specificity). */
.fb-footer { background: var(--fb-wave); color: var(--fb-black); }
.fb-footer__tag { color: var(--fb-black); opacity: 0.8; }
/* Square submark — pin width = height and stop the flex column from stretching
   it (was rendering squashed). object-fit:contain keeps it undistorted. */
.fb-footer__logo-img { width: 72px; height: 72px; object-fit: contain; align-self: flex-start; }
.fb-footer__h { color: var(--fb-black); }
.fb-footer__col p,
.fb-footer__col address { color: var(--fb-black); opacity: 0.85; }
.fb-footer__col a:hover { color: var(--fb-black); opacity: 0.6; }
.fb-footer__social { border-color: rgba(0,0,0,0.25); color: var(--fb-black); }
.fb-footer__social:hover { background: var(--fb-black); color: var(--fb-wave); border-color: var(--fb-black); }
.fb-footer__col .fb-hours tr { border-bottom-color: rgba(0,0,0,0.14); }
.fb-footer__col .fb-hours th,
.fb-footer__col .fb-hours td { color: var(--fb-black); }
.fb-footer__form { border-bottom-color: rgba(0,0,0,0.3); }
.fb-footer__form input { color: var(--fb-black); }
.fb-footer__form input::placeholder { color: rgba(0,0,0,0.5); }
.fb-footer__form button { color: var(--fb-black); }
.fb-footer__legal { background: rgba(0,0,0,0.06); border-top-color: rgba(0,0,0,0.12); }
.fb-footer__legal-inner { color: rgba(0,0,0,0.7); }
.fb-footer__legal-links a:hover { color: var(--fb-black); opacity: 0.6; }
/* Contact column: space phone from email, keep email small + on one line,
   socials sit beneath the contact details. */
.fb-footer__phone { margin-bottom: 4px !important; }
.fb-footer__email { font-size: 12px !important; white-space: nowrap; }
.fb-footer__col .fb-footer__socials { margin-top: 18px; }

/* ============================================================
   FOOTER — Finley review 2026-06-18. Centre every column, equal-width tracks
   with even gaps, address on separate lines, and all body text solid black
   (drop the opacity fades that read as faded/white on the Wave band). */
/* Desktop only — below 900px the footer stacks to one column (see the
   max-width:900px block). Without this guard the unconditional 3-col track
   wins on mobile by source order and squashes the hours one digit per line. */
@media (min-width: 901px) {
  .fb-footer__inner { grid-template-columns: repeat(3, 1fr); }
}
/* Left-align every footer column (Yasmin 2026-06-19, was centred 06-18). */
.fb-footer__inner { text-align: left; }
.fb-footer__brand { align-items: flex-start; }
.fb-footer__visit { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fb-footer__col .fb-footer__socials { justify-content: flex-start; }
.fb-footer__col .fb-hours { max-width: 240px; margin-left: 0; margin-right: auto; }
.fb-footer__form { justify-content: flex-start; }
/* Solid black, no fade — "make the white/faded text black" (Finley 2026-06-18). */
.fb-footer__h,
.fb-footer__col p,
.fb-footer__col address,
.fb-footer__col .fb-hours th,
.fb-footer__col .fb-hours td,
.fb-footer__news { color: var(--fb-black); opacity: 1; }
/* Phone + email links rendered Chalk (near-white) by the old dark-footer rule —
   force black on the Wave band (Finley 2026-06-18: "make the white text black"). */
.fb-footer a.fb-phone,
.fb-footer a.fb-email { color: var(--fb-black); text-decoration-color: rgba(0,0,0,0.4); }
.fb-footer a.fb-phone:hover,
.fb-footer a.fb-email:hover { color: var(--fb-black); opacity: 0.6; }
.fb-address--lines { line-height: 1.7; }

/* ============================================================
   Yasmin review 2026-06-11 — homepage refinements.
   Section tone util + smaller, calmer headings (she found the hero + story
   "very big / in your face"). */
.fb-tone--chalk { background: var(--fb-chalk); }
.fb-tone--seafoam { background: var(--fb-sea-foam); }
/* "View all FAQs" button centred under the academy FAQ accordion. */
.fb-faq-section__more { align-self: center; margin-top: 12px; }
/* Academy intro text section — small subheadings between copy blocks. */
.fb-academy-text__h3 {
  font-family: var(--font-display); text-transform: uppercase;
  /* Bumped 15px -> 20px so the section subheadings read clean (Finley 2026-06-18). */
  font-size: 20px; letter-spacing: 0.05em; color: var(--fb-black);
  margin: 32px 0 10px;
}
.fb-academy-text .fb-split__lede { margin-bottom: 12px; }
.fb-academy-text .fb-academy-list { margin: 0 0 6px; }
/* Finance — simple clickable boxes (Yasmin email 2026-06-11): whole box links
   out to the provider; no raw URL / long disclosure on the card face. */
.fb-finance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.fb-finance-box {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--fb-white); border: 1px solid var(--fb-wave-40);
  border-radius: 14px; padding: 28px 26px;
  text-decoration: none; color: var(--fb-black);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fb-finance-box:hover { border-color: var(--fb-wave); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.fb-finance-box h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; letter-spacing: .04em; margin: 0; }
.fb-finance-box p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--fb-ash); margin: 0; }
.fb-finance-box__cue { font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fb-black); margin-top: auto; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .fb-finance-grid { grid-template-columns: 1fr; } }
/* Hero heading a touch smaller across the site. */
.fb-hero__h1 { font-size: clamp(34px, 3.6vw, 52px); }
/* Homepage story + academy split: reduce size and tighten line-spacing. */
.home .fb-story__h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.06; }
.home .fb-story__copy { font-size: 13.5px; line-height: 1.65; }
/* "More than a beauty salon" — condensed but clean (Yasmin 2026-06-11). */
.home .fb-story { padding: 56px 0 52px; }
.home .fb-story__intro { margin-bottom: 32px; }
.fb-split__h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.06; }
/* Faces (team teaser) section — soft Sea Foam backdrop (Yasmin 2026-06-11). */
.fb-teamteaser { background: var(--fb-sea-foam); }

/* ============================================================
   Reusable IMAGE BANNER header (Yasmin 2026-06-11) — full-bleed photo with a
   soft dark wash so the white title reads. Replaces the flat tint on the
   Academy/About/Meet-the-Team/Service page heroes; swap background-image per
   page. Placeholder photos are in use until Yasmin supplies banners (2400x900). */
.fb-intro--image {
  position: relative;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.fb-intro--image::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.34));
}
.fb-intro--image .fb-intro__inner { position: relative; z-index: 1; }
.fb-intro--image .fb-eyebrow,
.fb-intro--image .fb-intro__h1,
.fb-intro--image .fb-intro__lede { color: var(--fb-white); }
/* Thin(ish) banner variant — title-only image header (Yasmin 2026-06-11). */
.fb-intro--banner { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 900px) { .fb-intro--banner { padding-top: 48px; padding-bottom: 48px; } }
/* Service page banner (featured-image cover + overlaid title), Yasmin 2026-06-11.
   Thinned 2026-06-16 to match the About banner height (~200px desktop / 150px mobile). */
/* Default service banner photo (Yasmin 2026-06-19). Every service page's hero
   cover uses useFeaturedImage; until a per-service photo is set this fills the
   band behind the 40% black dim. A real featured image renders an absolutely
   positioned .wp-block-cover__image-background on top, so it overrides this. */
.fb-service-banner { background-image: url('../images/service-default.webp'); background-size: cover; background-position: center; }
.fb-service-banner .wp-block-post-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1; margin: 0; }
@media (max-width: 900px) { .fb-service-banner { min-height: 150px !important; } }

/* ============================================================
   Finley review 2026-06-18 — page refinements.
   ------------------------------------------------------------ */

/* Academy intro — photo removed, single centred column (was a 50/50 split).
   Headings + lead paragraphs centre; lists stay left-aligned but the list block
   is centred so it reads tidy rather than ragged. */
.fb-academy-intro { padding: 88px 0; }
@media (max-width: 900px) { .fb-academy-intro { padding: 56px 0; } }
.fb-academy-intro__inner {
  max-width: 820px; margin: 0 auto; padding: 0 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.fb-academy-intro__inner > * { max-width: 720px; }
/* The intro H2 keeps the .fb-split__h2 styling but must wrap here — without the
   old .fb-split--wrap ancestor it inherited white-space:nowrap and overflowed
   the column (Finley 2026-06-18: "can't even see it fully"). */
/* Add a gap under the lead H2 — it had margin:0 so it sat flush on the first
   paragraph (Yasmin 2026-06-19: "this gap, there is literally none"). */
.fb-academy-intro .fb-split__h2 { white-space: normal; margin-bottom: 24px; }
.fb-academy-intro__inner .fb-academy-list {
  text-align: center; display: inline-block; margin-left: auto; margin-right: auto;
}
/* Centre the list items to match the rest of the centred intro (Yasmin
   2026-06-19) — drop the left bullet + indent so centred text reads clean. */
.fb-academy-intro__inner .fb-academy-list li { padding-left: 0; }
.fb-academy-intro__inner .fb-academy-list li::before { display: none; }

/* Academy finance heading — was 56px while every other academy heading is ~38px.
   Bring it in line so the page reads consistent + more refined (Finley 2026-06-18). */
[data-screen-label="Academy Finance"] .fb-story__h2 { font-size: clamp(28px, 3vw, 40px); }

/* About page intro lede — tighten the gap under the "About us." banner and keep
   the sentence centred (Finley 2026-06-18: "too much space"). */
.fb-intro--about-lede { padding-top: 40px; padding-bottom: 56px; }
@media (max-width: 900px) { .fb-intro--about-lede { padding-top: 28px; padding-bottom: 36px; } }