/* ==========================================================================
   Studio 47 Hairvilla — landing page styles.

   Design system and its trip-hazards are documented in docs/DESIGN-SPEC.md.
   Read it before changing type, colour or the quote-section layout.

   Typefaces are Google Fonts only (SIL Open Font License, cleared for
   commercial use). Two rules that are easy to break silently:
     - Jost is loaded as a VARIABLE font, which is what makes weights like
       650 and 800 real instances rather than snapping to the nearest.
     - Great Vibes has ONE weight and is already cursive - never ask it for
       bold or italic; the browser fakes both and smears the letterforms.
   ========================================================================== */

:root {
  --bg-dark: #110f0d;        /* hero, header — one dark tone sitewide [FB-075] */
  --bg-panel: #110f0d;       /* pricing, team */
  --bg-workshop: #232323;
  --bg-cta: #110f0d;
  --bg-footer: #110f0d;
  --ink-light: #0a0a0a;      /* headings on light sections */
  --accent: #cc3366;
  --steel: #b8bec5;
  --dim: rgba(255, 255, 255, 0.6);
  --hairline: rgba(216, 214, 207, 0.15);
  --hairline-strong: rgba(216, 214, 207, 1);
  --star: #f0ad4e;
  --review-card: #131210;
  --ph-bg: #1a1815;          /* media placeholder */
  --ph-border: rgba(255, 255, 255, 0.18);
  --ph-border-dark: rgba(0, 0, 0, 0.25);

  --ff-display: "Archivo Black", "Arial Black", sans-serif;      /* Swiss721Black sub */
  /* Reference is Nordique Pro Bold (paid, not on Google/Adobe Fonts).
     Swap this ONE line to change every headline on the site. [FB-081] */
  --ff-quote: "Jost", "Century Gothic", sans-serif;
  --ff-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --ff-mont: "Montserrat", "Segoe UI", sans-serif;
  --ff-serif: "Gentium Book Plus", Georgia, serif;
  --ff-price: "Cormorant Garamond", Georgia, serif;
  /* emphasis / second line of every split heading [FB-090].
     Great Vibes: single weight 400, already cursive - never ask it
     for bold or italic, both would be browser-synthesised. */
  --ff-emph: "Great Vibes", cursive;
  --ff-name: "IBM Plex Sans", "Segoe UI", sans-serif;
  --ff-tight: "Inter Tight", "Segoe UI", sans-serif;
  --ff-inter: "Inter", "Segoe UI", sans-serif;
  --ff-dm: "DM Sans", "Segoe UI", sans-serif;
  --ff-open: "Open Sans", "Segoe UI", sans-serif;

  --container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* the header overlays content, so anchor jumps need clearance */
section[id] { scroll-margin-top: 92px; }   /* MUST equal .site-header height */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--ff-body);
  font-size: 16px;
  color: #333;
  background: var(--bg-dark);   /* no white shows if anything ever overhangs */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

img, video { max-width: 100%; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* ---------- media placeholders ---------- */
.ph, .ph-flat {
  background: var(--ph-bg);
  position: relative;
}
.ph { border: 1px dashed var(--ph-border); }
.ph::after, .ph-flat::after {
  content: attr(data-label);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-inter);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  pointer-events: none;
}
.ph-logo { display: block; width: 70px; height: 70px; border-radius: 50%; }
.ph-logo::after { font-size: 8px; white-space: normal; text-align: center; width: 60px; }
.ph-logo-lg { display: block; width: 80px; height: 80px; border-radius: 50%; }
.ph-logo-lg::after { font-size: 8px; white-space: normal; text-align: center; width: 70px; }
.ph-fill { position: absolute; inset: 0; }

/* ---------- entrance animation (Elementor fadeIn) ---------- */
.fade-in {
  opacity: 0;
  transition: opacity 1.25s ease;
}
.fade-in.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transition: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 3px;
  padding: 15px 35px;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.btn-gold {
  /* Polished metallic gold, sampled directly from the "47" in the logo
     [FB-065]. The banding — deep bronze into a near-white highlight and back
     — is what reads as metal rather than flat colour. */
  color: #17100322;
  color: #1a1206;
  background: linear-gradient(100deg,
    #6f470e 0%,
    #a97d24 10%,
    #cb9e3b 20%,
    #fef5b2 31%,
    #fffdda 37%,
    #e7c86e 45%,
    #cb9e3b 55%,
    #8a5c16 64%,
    #cb9e3b 74%,
    #fef5b2 86%,
    #c79a37 94%,
    #6f470e 100%);
  border: 1px solid rgba(255, 245, 205, 0.35);
  text-shadow: 0 1px 0 rgba(255, 250, 220, 0.35);
}
.btn-gold:hover { filter: brightness(1.06) saturate(1.05); }
.btn-sm {
  font-size: 13px;
  padding: 9px 25px;
  border: 1px solid #cbb15e;
}

/* floating Book Now (appears after scrolling) */
.floating-book {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  padding: 13px 25px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  background: rgba(10, 10, 10, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease;
}
.floating-book.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.floating-book:hover { background: rgba(10, 10, 10, 0.65); }
.btn-ghost {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  padding: 15px 40px;
  background: transparent;
}
.btn-ghost:hover { background: #363636; }
.btn-underline { border-bottom: 1px solid var(--steel); }
.btn-dark {
  background: var(--ink-light);
  color: #fff;
}
.btn-dark:hover { background: #2a2a2a; }
.btn-cta { font-weight: 700; letter-spacing: 0; padding: 14px 40px; }

/* plain text links (section headers) */
.link-plain {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  padding: 10px 0;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s ease;
}
.link-steel { color: var(--steel); }
.link-steel:hover { color: #fff; }
.link-dark { color: var(--ink-light); }
.link-dark:hover { color: var(--accent); }

/* ---------- eyebrows & dividers ---------- */
.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.eyebrow-center { justify-content: center; }
.eyebrow-dash {
  width: 15px;
  height: 1px;
  background: var(--steel);
  flex: 0 0 auto;
}
.eyebrow-dash.dark { background: var(--ink-light); }
.eyebrow {
  font-family: var(--ff-mont);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.eyebrow.dark { color: var(--ink-light); }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.divider-line { display: none; }
.divider-label {
  font-family: var(--ff-mont);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--steel);
}
.divider-label.dark { color: var(--ink-light); }

/* section header rows (pricing / team / blog) */
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.section-head.align-end { align-items: flex-end; }
.section-head-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 798px;
}
.display-heading {
  font-family: var(--ff-display);
  font-size: 41.6px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
}
.display-heading.dark { color: var(--ink-light); }

/* ---------- 2026 editorial type system [FB-021..028] ----------
   Emphasis treatment shared site-wide: clean PJS sans line + Cormorant
   Garamond italic display line. Labels: small caps, wide tracking. */
.section-label {
  font-family: var(--ff-mont);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}
.section-label.ink { color: rgba(10, 10, 10, 0.6); }
.editorial-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
}
.editorial-heading .line-sans {
  font-family: var(--ff-body);
  font-size: 35px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.01em;
}
.editorial-heading .line-serif {
  font-family: var(--ff-emph);
  font-style: normal;      /* already cursive - italic would double-slant it */
  font-weight: 400;        /* the only weight it has */
  font-size: 58px;         /* small x-height needs the bump */
  line-height: 1.12;   /* tight: the initial no longer inflates this box */       /* descenders on a script run deep */
  letter-spacing: 0;
}
.editorial-heading.caps .line-sans { text-transform: uppercase; }
.editorial-heading.caps .line-serif { text-transform: none; letter-spacing: 0; }
.editorial-heading.ink { color: #101010; }
/* quote variant: sentence case, second line carries the weight */
.quote-heading2 .line-sans { font-weight: 500; font-size: 32px; color: #1c1c1c; }
.quote-heading2 .line-serif { font-size: 46px; color: #0a0a0a; }
.quote-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.reviews-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.trust-line {
  font-family: var(--ff-mont);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.85);
  margin-top: 4px;
}
.trust-line .trust-stars {
  color: #d9a441;
  letter-spacing: 2px;
  margin-right: 8px;
}
/* editorial arrow links (replace the old bordered links) */
.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mont);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 0;
  transition: color 0.3s ease;
}
.arrow-link .arr { transition: transform 0.3s ease; }
.arrow-link:hover .arr { transform: translateX(4px); }
.arrow-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 0.3s ease, transform 0.35s ease;
}
.arrow-link:hover::after { opacity: 1; }
.arrow-link.steel { color: var(--steel); }
.arrow-link.steel:hover { color: #fff; }
/* hero eyebrow mark — small gold point [FB-021] */
.eyebrow-mark {
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, #cbb15e, #8a7433);
  flex: 0 0 auto;
}
.eyebrow-sep { color: rgba(203, 177, 94, 0.8); }
.eyebrow-hl { color: #cbb15e; white-space: nowrap; }
/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 92px;
  /* the services-panel tone rather than flat black [FB-066] */
  background: var(--bg-panel);
  z-index: 9;
  padding: 0 10px;
  transition: height 0.35s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.site-header.is-scrolled { height: 80px; }
.header-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px 0;
}
.header-inner .logo { justify-self: start; }
.main-nav { justify-self: start; margin-left: 32px; }
.main-nav ul {
  display: flex;
  justify-content: flex-start;
}
.icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--steel);
  transition: color 0.3s ease;
}
.icon-link:hover { color: #fff; }
/* hamburger — mobile only */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--steel);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* no X morph — the menu dismisses on any outside tap [FB-015 r1.2] */
.main-nav a {
  display: block;
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dim);
  padding: 8px 14px;
  transition: color 0.3s ease;
}
.main-nav a:hover { color: #fff; }
.main-nav a.is-active {
  color: var(--steel);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.header-cta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

/* ==========================================================================
   1. HERO — cinematic film stage [FB-045]
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  background: var(--bg-dark);
  overflow: hidden;
}
/* the film */
.hero-right {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-right .ph-fill { border: none; }

/* layered cinematic overlay — readable canvas on the left, film alive on the
   right. Four stacked gradients, no single flat scrim. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* edge vignette */
    radial-gradient(120% 100% at 50% 50%,
      transparent 55%, rgba(6, 6, 5, 0.42) 100%),
    /* top, behind the navigation */
    linear-gradient(to bottom,
      rgba(17, 15, 13, 0.68) 0%, rgba(17, 15, 13, 0.22) 14%, transparent 26%),
    /* bottom, anchoring the stats */
    linear-gradient(to top,
      rgba(17, 15, 13, 0.8) 0%, rgba(17, 15, 13, 0.34) 18%, transparent 42%),
    /* warm light behind the CTA + stats, so the gold reads as lit [FB-053] */
    radial-gradient(58% 42% at 20% 78%, rgba(203, 177, 94, 0.13), transparent 66%),
    /* left, the type canvas */
    linear-gradient(100deg,
      rgba(17, 15, 13, 0.94) 0%, rgba(17, 15, 13, 0.86) 22%,
      rgba(17, 15, 13, 0.6) 44%, rgba(17, 15, 13, 0.18) 66%, transparent 82%);
}

.hero-left {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 128px 0 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

/* eyebrow — gold rule + metadata, never a second headline */
.hero .eyebrow-row { gap: 14px; padding: 0; }
.hero .eyebrow-mark {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, #cbb15e, rgba(203, 177, 94, 0.15));
}
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mont);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(228, 222, 208, 0.82);
}
.eyebrow-meta {
  position: relative;
  padding-left: 15px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(203, 177, 94, 0.85);
}
.eyebrow-meta::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(203, 177, 94, 0.6);
}

.hero h1 {
  font-family: var(--ff-body);
  font-size: clamp(44px, 5.6vw, 82px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: #f7f5f0;
  /* whisper-soft, so type holds on bright frames without looking shadowed */
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.42);
}
/* The gold accent word sets in lowercase italic against the uppercase line:
   rigid caps for the promise, flowing lowercase for the result [FB-082].
   +15% optically matches its x-height to the surrounding cap-height, and the
   line's -0.022em tracking (tuned for Plus Jakarta Sans caps) is opened back
   up - negative tracking that flatters caps crowds lowercase italic. */
.h1-poppins {
  font-family: var(--ff-emph);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  font-size: 1.5em;        /* Great Vibes runs small; matches the cap height */
  letter-spacing: 0;
  /* h1's line-height is UNITLESS, so children inherit the number and a 1.5em
     font-size inflates the line box by 50% too - which opened a dead gap above
     this line. Pinned so the accent's line box matches the sans lines. The
     script's tall ascenders simply paint outside it, which is what you want
     from a display script. [FB-091] */
  line-height: 0.72;
}
.h1-accent {
  color: #cbb15e;
  background: linear-gradient(96deg, #b9a05a 0%, #e3cd8d 46%, #b08c32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  color: rgba(240, 237, 230, 0.72);
  max-width: 430px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.btn-primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 19px 42px;
  font-family: var(--ff-mont);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  border-radius: 2px;
  border: 1px solid rgba(255, 245, 214, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
  transition: filter 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.btn-primary-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.5), 0 0 26px rgba(203, 177, 94, 0.22);
}
.btn-primary-cta .arr { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.btn-primary-cta:hover .arr { transform: translateX(5px); }

/* secondary actions: quiet text links, never competing boxes */
.hero-secondary { display: flex; align-items: center; gap: 20px; }
.hero-link {
  position: relative;
  font-family: var(--ff-mont);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 237, 230, 0.66);
  padding: 6px 0;
  transition: color 0.3s ease;
}
.hero-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-link:hover { color: #e3cd8d; }
.hero-link:hover::after { transform: scaleX(1); }
.hero-link-sep {
  width: 1px; height: 11px;
  background: rgba(255, 255, 255, 0.2);
}

/* stats — integrated into the film, thin rules between, never wrapping */
.hero-stats {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 18px;
  max-width: 100%;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;      /* number sits centred over its label [FB-066] */
  justify-content: flex-end;
  text-align: center;
  gap: 7px;
  padding: 0 30px;
  min-width: 0;
}
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.stat-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;              /* the number must read as one token: 5.0 / 25K+ */
  font-family: var(--ff-serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: #f7f5f0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.stat-number svg { flex: 0 0 auto; margin-right: 9px; }
.stat-label {
  display: block;
  text-align: center;
  font-family: var(--ff-mont);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 237, 230, 0.55);
}

/* hero entrance: soft rise, gently staggered (delays set inline) */
.hero .fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms);
}
.hero .fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   2. QUOTE (light)
   ========================================================================== */
.quote-section {
  background: #fff;
  padding: 0 16px;
}
.quote-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 72px 0 96px;
}
.quote-heading {
  font-family: var(--ff-quote);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-light);
  padding: 9px 0;   /* live italic word enlarges its line box */
}
.quote-heading i {
  font-family: var(--ff-mont);
  font-style: italic;
  font-size: 40px;
  font-weight: 600;
}
/* The reel is re-cut to 16:9 with a per-shot vertical crop, so it fills the
   full container width again. `align-self` (not `margin: 0 auto`) — auto side
   margins collapse a flex item with no intrinsic size to zero. [FB-097] */
.quote-video {
  width: 100%;
  max-width: var(--container);
  align-self: center;
  aspect-ratio: 1080 / 606;
  border-radius: 3px;
}

/* ==========================================================================
   3. PRICING
   ========================================================================== */
.pricing-section { background: var(--bg-panel); }
.pricing-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 128px 0;
}
.pricing-section .section-head-left { max-width: 684px; }
.pricing-section .divider { justify-content: flex-start; }
.price-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  transition: opacity 0.2s ease;
}
/* pagination arrows — in flow (unlike carousel arrows), right-aligned */
.price-pager {
  position: static;
  display: flex;
  justify-content: flex-end;
  gap: 19px;
  margin-top: -20px;
}
.price-row {
  display: flex;
  gap: 20px;
  padding: 10px;
  border-bottom: 1px solid var(--hairline);
}
.price-num {
  flex: 0 0 110px;
  font-family: var(--ff-mont);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--dim);
  align-self: center;
}
.price-info {
  flex: 0 0 550px;
  display: flex;
  flex-direction: column;
}
.price-info h5 {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  /* warm off-white, not pure #fff — the gold price stays the loudest thing
     in the row and the type reads as one family with the hero [FB-048] */
  color: rgba(240, 236, 226, 0.88);
}
.price-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dim);
}
.price-duration {
  font-family: var(--ff-mont);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 2px;
}
.price-amount {
  flex: 1;
  font-family: var(--ff-price);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  color: #fff;
  align-self: center;
}

/* ==========================================================================
   5. REVIEWS (light, marquee)
   ========================================================================== */
.reviews-section {
  background: #fff;
  padding: 96px 0 88px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  overflow: hidden;
}
.reviews-heading {
  font-family: var(--ff-quote);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-light);
  margin-top: -54px;   /* live heading overlaps the eyebrow row */
  padding: 10px 0;
}
/* ---------- "Wall" reviews layout — counter-scrolling columns [FB-013] ---------- */
.review-wall {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  height: 640px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70px, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 70px, #000 calc(100% - 70px), transparent);
}
.review-wall.is-dragging { cursor: grabbing; }
.wall-col { flex: 1; display: flex; justify-content: center; min-width: 0; }
.wall-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  will-change: transform;
}
.wall-card { flex: 0 0 auto; user-select: none; }
.wall-card .review-card {
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.10);
}

/* ---------- Star-Drift reviews field [FB-013] ---------- */
.star-drift {
  position: relative;
  margin: 0 32px;
  height: 520px;
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(204, 51, 102, 0.07), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% -20%, #16141f 0%, transparent 70%),
    #0b0b10;
}
.star-drift.is-dragging { cursor: grabbing; }
.drift-bg { position: absolute; inset: 0; }
.drift-bg i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: rgba(235, 230, 220, 0.5);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.35; }
}
.drift-field { position: absolute; inset: 0; }
.drift-card {
  position: absolute;
  top: 0; left: 0;
  width: 321px;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
}
.drift-card .review-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
/* reduced-motion fallback: calm scrollable row */
.star-drift.drift-static {
  height: auto;
  padding: 40px 24px;
}
.star-drift.drift-static .drift-field {
  position: static;
  display: flex;
  gap: 20px;
  overflow-x: auto;
}

.marquee {
  width: 100%;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.review-card {
  width: 321px;
  height: 262px;
  flex: 0 0 auto;
  background: var(--review-card);
  border-radius: 4px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.stars {
  /* sticker-gold stars, sized to read like the reference [FB-079] */
  color: #f5a623;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.review-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-g { flex: 0 0 auto; }
.review-person {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--ff-inter);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex: 0 0 auto;
}
.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.review-person-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.review-name {
  font-family: var(--ff-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}
.review-date {
  font-family: var(--ff-tight);
  font-size: 13.6px;
  font-weight: 400;
  line-height: 1;
  color: var(--dim);
}

/* ==========================================================================
   6. TEAM
   ========================================================================== */
.team-section {
  background: var(--bg-panel);
  position: relative;
  overflow: hidden;
}
/* gold atmosphere: the space reads as lit, not empty. No object, no symbol —
   a scissors watermark was previewed and rejected as cliché [FB-052] */
.team-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 78% 32%, rgba(203, 177, 94, 0.10), transparent 62%),
    radial-gradient(90% 70% at 20% 90%, rgba(203, 177, 94, 0.05), transparent 60%);
}
/* the shop photograph moved to the footer [FB-079]; the team section is a
   plain panel so the portraits carry it */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/shop-interior.jpg") center/cover no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent);
}
.team-inner { position: relative; z-index: 1; }
.team-inner {
  /* cinematic full-viewport section: heading lands mid-screen [FB-039] */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 100svh;
  gap: 64px;
  padding: 120px 0;
}
.team-section .section-head-left { max-width: 684px; }

.carousel { position: relative; }
.carousel-viewport, .carousel { overflow: visible; }
.carousel .carousel-track {
  display: flex;
  gap: 15px;
  transition: transform 0.5s ease;
}
.team-marquee {
  overflow: visible;      /* arrows live below, inside the section padding */
  position: relative;
  cursor: grab;
  touch-action: pan-y;
}
.marquee-viewport, .carousel-viewport { overflow: hidden; }
.team-marquee.is-dragging { cursor: grabbing; }
.team-marquee .marquee-track {
  display: flex;
  gap: 15px;
  width: max-content;
  will-change: transform;
}
.team-marquee.is-dragging .marquee-track { user-select: none; }
.team-card {
  width: 330px;   /* bigger frame all round [FB-078] */
  flex: 0 0 auto;
  position: relative;
}
.team-photo {
  width: 100%;
  aspect-ratio: 274 / 420;   /* [FB-078] less extreme than 470 so square
                                sources keep room around the subject */
  border-radius: 6px;
}
.team-photo-img {
  display: block;
  width: 100%;
  aspect-ratio: 274 / 420;   /* [FB-078] less extreme than 470 so square
                                sources keep room around the subject */
  object-fit: cover;
  border-radius: 6px;
}
/* brand logo mounted from site-data.js [FB-065] */
.brand-logo {
  display: block;
  height: 64px;          /* cropped badge: wide, so height drives it [FB-071] */
  width: auto;
  max-width: 250px;
  object-fit: contain;
  /* the exported PNGs carry real alpha [FB-072] — no blend hack */
  align-self: center;
}
.brand-logo-footer {
  display: block;
  height: 62px;
  width: auto;
  object-fit: contain;
  /* the footer brand column is a flex container: without this the image is
     STRETCHED to the width of the text below it and object-fit centres the
     artwork, which reads as a left indent [FB-072] */
  align-self: flex-start;
}

/* real videos mounted from site-data.js take their placeholder's geometry */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* keep the barber right of the type canvas */
  background: #110f0d;
  /* cinematic pull-back: opens tight on the fade, eases out to the wide
     frame, then drifts back in. Alternates, so it never snaps. [FB-044] */
  animation: heroPull 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroPull {
  from { transform: scale(1.07); }
  to   { transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; }
}
video.quote-video { display: block; width: 100%; max-width: var(--container); align-self: center; aspect-ratio: 1080 / 606; object-fit: cover; border-radius: 3px; background: var(--bg-panel); }
.workshop-video { object-fit: cover; }
.team-meta {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-meta h4 {
  font-family: var(--ff-name);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
.team-meta h6 {
  font-family: var(--ff-tight);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--steel);
}
/* arrows sit inside the section's bottom padding on the live page */
.carousel-arrows {
  position: absolute;
  right: 0;
  bottom: -54px;
  display: flex;
  justify-content: flex-end;
  gap: 19px;
}
.arrow {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.arrow:hover { background: rgba(255, 255, 255, 0.12); }
.carousel-arrows.dark .arrow {
  border-color: rgba(10, 10, 10, 0.6);
  color: var(--ink-light);
}
.carousel-arrows.dark .arrow:hover { background: rgba(0, 0, 0, 0.06); }

/* TEAM: the stepper sits together in the bottom-right corner INSIDE the
   portrait frame — not below the cards, and not split across the sides
   [FB-069 -> FB-070]. */
.team-section .carousel-arrows {
  top: auto;
  bottom: 18px;
  left: auto;
  right: 18px;
  transform: none;
  justify-content: flex-end;
  padding: 0;
  gap: 10px;
  z-index: 3;
  pointer-events: none;   /* only the buttons catch input; swipes pass through */
}
.team-section .arrow {
  pointer-events: auto;
  width: 42px;
  height: 42px;
  background: rgba(12, 11, 9, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.team-section .arrow:hover {
  background: rgba(12, 11, 9, 0.8);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   CLOSING — "The Sign-Off" (CTA + footer as one field) [FB-029]
   ========================================================================== */
.closing { background: var(--bg-panel); }   /* was #050505 — too black [FB-067] */
.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;     /* recentred [FB-079] */
  text-align: center;
  gap: 34px;
  padding: 150px 0 130px;
}
.closing-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.closing-label h6 {
  font-family: var(--ff-mont);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
}
.closing-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
}
.closing-heading .line-sans {
  font-family: var(--ff-quote);   /* the reference geometric sans [FB-079] */
  font-size: 62px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: none;   /* sentence case, matching the reviews heading */
}
.closing-heading .line-serif {
  font-family: var(--ff-quote);   /* matches line 1 [FB-079] */
  font-style: italic;
  font-weight: 600;
  font-family: var(--ff-emph);
  font-weight: 400;
  font-style: normal;
  font-size: 96px;
  line-height: 1.12;   /* tight: the initial no longer inflates this box */
  text-transform: none;
  letter-spacing: 0;
}
.closing-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mont);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cbb15e;
  padding: 16px 2px 16px 0;          /* comfortable tap target */
  border-bottom: 1px solid rgba(203, 177, 94, 0.45);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.closing-cta .arr { transition: transform 0.3s ease; }
.closing-cta:hover { color: #e8d492; border-color: #e8d492; }
.closing-cta:hover .arr { transform: translateX(6px); }

/* ==========================================================================
   FOOTER — quiet colophon [FB-029/033/035]
   ========================================================================== */
.site-footer { background: var(--bg-panel); }   /* matches the closing [FB-067] */
.footer-inner {
  display: flex;
  flex-direction: column;
  padding: 0 0 28px;
}
.footer-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.footer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding: 52px 0 44px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 auto;
}
.footer-tagline {
  font-family: var(--ff-mont);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.footer-block {
  display: flex;
  flex-direction: column;
}
.footer-meta {
  font-family: var(--ff-mont);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 16px;
}
.footer-locations {
  display: flex;
  gap: 44px;
}
.footer-location {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 220px;
}
.footer-loc-name {
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.footer-address {
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}
a.footer-address { transition: color 0.3s ease; }
a.footer-address:hover { color: rgba(255, 255, 255, 0.9); }
.footer-social { text-align: left; }
.footer-ig {
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.3s ease;
}
.footer-ig .ig-arr {
  display: inline-block;
  font-size: 12px;
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease, color 0.3s ease;
}
.footer-ig:hover { color: #d5bd72; }
.footer-ig:hover .ig-arr { transform: translate(2px, -2px); color: #d5bd72; }
.footer-ig-handle {
  display: block;
  margin-top: 3px;
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.copyright {
  font-family: var(--ff-inter);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
  transition: color 0.3s ease;
}
.footer-legal a:hover { color: rgba(255, 255, 255, 0.8); }


/* ==========================================================================
   RESTRAINT PASS — gold is reserved [FB-061]
   Client direction: gold belongs to the booking action and a touch on the
   landing screen. Everything below the hero reads black / white / warm grey.
   The emphasis line keeps its serif italic voice, just not its colour.
   ========================================================================== */
:root {
  --gold: #cbb15e;
  --gold-bright: #e3cd8d;
  --gold-deep: #8a6a22;
  --gold-hairline: rgba(203, 177, 94, 0.16);
  --bone: #faf7f1;
  --warm-white: rgba(240, 236, 226, 0.92);
  --warm-dim: rgba(240, 236, 226, 0.55);
}

/* emphasis lines: off-white on dark, ink on light — no gold */
.editorial-heading .line-serif,
.closing-heading .line-serif {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--warm-white);
}
/* both closing lines share the cream tone - pure white on line 1 read as a
   mismatched second colour [FB-081] */
.closing-heading .line-sans { color: var(--warm-white); }
.editorial-heading.ink .line-serif,
.quote-heading2 .line-serif {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #14110c;
}

/* section labels: quiet warm grey, not gold */
.section-label { color: var(--warm-dim); }
.section-label.ink { color: rgba(20, 17, 12, 0.55); }

/* warm paper stays — it is neutral, not gold */
.quote-section,
.reviews-section { background: var(--bone); }

/* hairlines: neutral */
.price-row { border-bottom-color: rgba(240, 236, 226, 0.12); }
.price-list { border-top-color: rgba(240, 236, 226, 0.16); }
.team-section { border-top-color: rgba(255, 255, 255, 0.06); }

/* links + arrows: white, not gold */
.arrow-link.steel { color: var(--warm-white); }
.arrow-link.steel:hover { color: #fff; }

/* supporting meta: warm grey */
.team-meta h6 { color: var(--warm-dim); }
.price-num { color: rgba(240, 236, 226, 0.38); }
.footer-loc-label,
.footer-meta { color: rgba(240, 236, 226, 0.4); }
.footer-tagline { color: rgba(240, 236, 226, 0.6); }

/* review cards: neutral edge; stars stay warm (they are a rating, not decor) */
.review-card { border: 1px solid rgba(240, 236, 226, 0.10); }
.trust-line { color: rgba(28, 22, 10, 0.82); }
.trust-line .trust-stars { color: #b8933a; }

/* the closing CTA keeps gold — it is a booking action */
.closing-cta { color: var(--gold-bright); border-bottom-color: rgba(203, 177, 94, 0.5); }
.closing-label h6 { color: var(--warm-dim); }
.footer-big a:hover,
.footer-legal a:hover { color: #fff; }

/* pricing typography [FB-047] — italic kept, colour now off-white */
.price-amount {
  font-family: var(--ff-price);
  font-style: italic;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--warm-white);
  white-space: nowrap;
}
.price-plus {
  font-size: 0.5em;
  font-style: normal;
  font-weight: 600;
  vertical-align: 0.62em;
  margin-left: 1px;
  color: rgba(240, 236, 226, 0.6);
}
.price-pre {
  font-family: var(--ff-mont);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 236, 226, 0.55);
  margin-right: 7px;
  vertical-align: 0.28em;
}
.price-duration {
  font-family: var(--ff-mont);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 236, 226, 0.5);
}

/* ==========================================================================
   ATMOSPHERE — hero only [FB-061]
   The gold washes were removed from the lower sections at the client's
   request. The hero keeps its warm light behind the CTA; every other section
   is flat black / bone.
   ========================================================================== */
.pricing-section,
.reviews-section,
.quote-section,
.closing,
.site-footer { position: relative; overflow: hidden; }

.pricing-inner,
.quote-inner,
.reviews-head,
.reviews-stage,
.closing-inner,
.footer-inner { position: relative; z-index: 1; }

/* team keeps the shop photograph, but with no gold cast over it */
.team-section::before { background: none; }


/* ==========================================================================
   REVIEWS — horizontal row [FB-063]
   ========================================================================== */
.review-row {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.review-row.is-dragging { cursor: grabbing; }
.row-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
  padding: 4px 0;
}
.row-card { flex: 0 0 auto; user-select: none; }
.row-card .review-card {
  width: 330px;
  height: 100%;
  min-height: 250px;
}

/* ==========================================================================
   TEAM — static, swipeable row [FB-062]
   ========================================================================== */
.team-marquee[data-static="true"] .marquee-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.team-marquee[data-static="true"] .marquee-viewport::-webkit-scrollbar { display: none; }
.team-marquee[data-static="true"] .marquee-track {
  width: max-content;
  transform: none !important;   /* never driven by the marquee engine */
}
.team-marquee[data-static="true"] .team-card { scroll-snap-align: start; }
.team-marquee[data-static="true"] { cursor: default; }



/* ==========================================================================
   THE EXPERIENCE — four promises, not a sentence [FB-073]
   Set in the geometric sans the client pointed to (--ff-quote).
   ========================================================================== */
.promise-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  list-style: none;
}
.promise-row li {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 26px;
  font-family: var(--ff-quote);
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #14110c;
  text-align: center;
}
.promise-row li + li { border-left: 1px solid rgba(20, 17, 12, 0.16); }

/* Single-glyph emphasis [FB-074] — the reference sets one letter in a much
   heavier weight of the SAME geometric sans (not a different face, not
   italic). Slightly larger and tighter so it sits optically with its word. */
.glyph {
  /* Jost is loaded as a VARIABLE font (wght 100..900, upright + italic), so
     800 is a real interpolated instance — not a browser-synthesised fake bold.
     If the font request is ever reverted to discrete weights, this silently
     snaps back to 700 and the smearing of [FB-074] returns.
     Axis tops out at 900; 800 is a deliberate step back from it. [FB-089] */
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: -0.02em;
}

/* Inside a Great Vibes line the initial CANNOT take extra weight - the face
   ships one weight only, so 800 would be a synthesised fake bold and a script
   smears far worse than a sans [FB-074]. It grows by size instead, which is
   how script initials have always been set. [FB-090] */
.line-serif .glyph,
.h1-accent .glyph {
  font-weight: 400;
  font-size: 1.45em;
  letter-spacing: 0;
  /* Zero so the enlarged initial contributes NO height to the line box. It
     inherits the unitless line-height and multiplies it by its own 1.45em
     size, which inflated the box by ~43px and dumped half of that above the
     text as dead space. Same root cause as the hero gap [FB-091]. It still
     paints normally - only its contribution to line height is removed. */
  line-height: 0;
}

/* reviews headline in the same geometric sans as the client's reference */
.reviews-section .editorial-heading .line-sans,
.reviews-section .editorial-heading .line-serif {
  font-family: var(--ff-quote);
  text-transform: none;
  letter-spacing: -0.015em;
}
/* line-serif is a script here - undo the negative track, it breaks the joins */
.reviews-section .editorial-heading .line-serif { letter-spacing: 0; }
.reviews-section .editorial-heading .line-sans { font-weight: 500; }
.reviews-section .editorial-heading .line-serif {
  font-family: var(--ff-emph);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 66px);
  line-height: 1.12;   /* tight: the initial no longer inflates this box */
  letter-spacing: 0;
}


/* ==========================================================================
   RESPONSIVE — tablet (<=1024) and mobile (<=767), Elementor breakpoints
   ========================================================================== */
@media (max-width: 1240px) {
  .container { max-width: calc(100% - 60px); }
  .site-footer { padding: 0 32px; }
}

@media (max-width: 1024px) {
  .hero h1 { font-size: clamp(40px, 6.4vw, 62px); }
  .hero-left { padding-left: 32px; padding-right: 32px; }
  .main-nav a { padding: 8px 8px; font-size: 13px; }
  .team-card { width: 300px; }
  .display-heading { font-size: 34px; }
  .closing-heading .line-sans { font-size: 50px; }
  .closing-heading .line-serif { font-size: 78px; }
  .quote-heading { font-size: 34px; }
  .quote-heading i { font-size: 32px; }
  .reviews-heading { font-size: 38px; }
  .price-info { flex: 0 0 46%; }
  .price-num { flex: 0 0 60px; }
}

@media (max-width: 767px) {
  /* single-row header + hamburger: logo | instagram · book · menu.
     The nav collapses into a dropdown panel under the fixed header. */
  section[id] { scroll-margin-top: 74px; }   /* MUST equal mobile header height */
  .site-header { height: 74px; }
  .site-header.is-scrolled { height: 70px; }
  .ph-logo { width: 48px; height: 48px; }
  .brand-logo { height: 48px; max-width: 190px; }
  .header-inner {
    grid-template-columns: auto 1fr;
    padding: 8px 6px;
  }
  .header-inner .logo { justify-self: start; }
  .header-cta { gap: 10px; }
  .btn-sm { padding: 8px 14px; font-size: 12px; }
  .nav-toggle { display: flex; }
  /* compact dropdown anchored under the toggle, right side [FB-015 r1.2] */
  .main-nav {
    position: absolute;
    top: 64px;
    right: 6px;
    left: auto;
    margin-left: 0;
    min-width: 210px;
    background: var(--bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    display: none;
    overflow: hidden;
  }
  .main-nav.is-open { display: none; }   /* dropdown retired with the toggle */
  .main-nav ul { flex-direction: column; }
  .main-nav a {
    font-size: 13px;
    padding: 15px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .main-nav li:last-child a { border-bottom: none; }

  /* mobile hero: same film, art-directed for the portrait frame [FB-045].
     Content is bottom-weighted so the barber reads in the upper half. */
  .hero { align-items: flex-end; }
  .hero-video { object-position: 50% center; }
  .hero-scrim {
    background:
      radial-gradient(70% 34% at 42% 74%, rgba(203, 177, 94, 0.13), transparent 68%),
      linear-gradient(to bottom,
        rgba(17, 15, 13, 0.72) 0%, rgba(17, 15, 13, 0.2) 15%, transparent 30%),
      linear-gradient(to top,
        rgba(17, 15, 13, 0.94) 0%, rgba(17, 15, 13, 0.86) 26%,
        rgba(17, 15, 13, 0.5) 48%, rgba(17, 15, 13, 0.12) 70%, transparent 88%);
  }
  .hero-left {
    padding: 0 22px 44px;
    gap: 20px;
  }
  .hero .eyebrow-row { align-items: flex-start; gap: 12px; }
  .hero .eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.18em;
    line-height: 1.2;
  }
  .hero .eyebrow-mark { width: 24px; margin-top: 5px; }
  .eyebrow-meta { font-size: 9.5px; padding-left: 12px; }
  .hero h1 { font-size: clamp(38px, 11.5vw, 50px); line-height: 1.04; }
  .hero-copy { font-size: 14.5px; line-height: 1.65; max-width: none; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    width: 100%;
  }
  .btn-primary-cta { width: 100%; padding: 18px 24px; font-size: 12px; }
  .hero-secondary {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    width: 100%;
    margin: 0 auto;
  }
  .hero-link { font-size: 10px; letter-spacing: 0.1em; }
  .hero-stats { margin-top: 6px; width: 100%; }
  .stat { flex: 1 1 0; padding: 0 10px; gap: 5px; }
  .stat-number { font-size: 21px; gap: 0; }
  .stat-number svg { margin-right: 6px; }
  .stat-number svg { width: 14px; height: 14px; }
  .stat-label {
    font-size: 8px;
    letter-spacing: 0.1em;
    line-height: 1.25;
    white-space: nowrap;
  }
}

/* very small phones (iPhone 12 mini, older Samsung) */
@media (max-width: 400px) {
  .stat { padding: 0 7px; }
  .stat-number { font-size: 19px; }
  .stat-label { font-size: 7.5px; letter-spacing: 0.06em; }
  .hero-left { padding-left: 18px; padding-right: 18px; }

  .quote-inner { padding: 64px 0; gap: 28px; }
  .promise-row li {
    flex: 0 0 50%;
    padding: 14px 12px;
    font-size: 15.5px;
  }
  .promise-row li + li { border-left: none; }
  .promise-row li:nth-child(even) { border-left: 1px solid rgba(20, 17, 12, 0.16); }
  .promise-row li:nth-child(n+3) { border-top: 1px solid rgba(20, 17, 12, 0.16); }
  .editorial-heading .line-sans { font-size: 25px; }
  .editorial-heading .line-serif { font-size: 31px; }
  .quote-heading2 .line-sans { font-size: 23px; }
  .quote-heading2 .line-serif { font-size: 31px; }


  .pricing-inner, .team-inner { padding: 72px 0; gap: 28px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .display-heading { font-size: 27px; }

  .price-row { flex-wrap: wrap; }
  .price-num { flex: 0 0 100%; align-self: flex-start; }
  .price-info { flex: 1 1 60%; }
  .price-amount { font-size: 24px; }


  .reviews-section { padding: 64px 0; gap: 28px; }
  .reviews-heading { font-size: 28px; }
  .star-drift { margin: 0 16px; height: 380px; }
  .row-card .review-card { width: 290px; min-height: 240px; }
  .row-track { gap: 14px; }
  .drift-card { width: 300px; }
  .drift-card .review-card { width: 300px; height: auto; min-height: 240px; }

  /* phones: release the full-viewport height and lift the block up; the
     portraits get more of the screen. Desktop keeps the cinematic room.
     [FB-052 / FB-056] */
  .team-inner { min-height: auto; padding: 52px 0 84px; gap: 30px; }
  .team-card { width: 330px; }
  .marquee-track { gap: 14px; }
  /* stepper in the portrait's bottom-right corner [FB-070] */
  .team-section .carousel-arrows { left: auto; right: 14px; bottom: 14px; gap: 8px; }
  .team-section .arrow { width: 36px; height: 36px; }
  .site-footer::after { background-image: url("../img/shop-interior-mobile.jpg"); opacity: 0.20; }



  .closing-inner {
    flex-direction: column;
    align-items: center;      /* stay centred on mobile too [FB-081] */
    text-align: center;
    gap: 34px;
    padding: 88px 0 72px;
  }
  .closing-inner { padding: 104px 0 88px; }
  .closing-heading .line-sans { font-size: 37px; }
  .closing-heading .line-serif { font-size: 60px; }
  .closing-cta { font-size: 13.5px; margin-bottom: 0; }

  .site-footer { padding: 0 16px; }
  .footer-grid { flex-direction: column; gap: 30px; padding: 40px 0 34px; }
  .footer-locations { flex-direction: column; gap: 18px; }
  .footer-location { max-width: none; }
  .footer-meta { margin-bottom: 12px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 0 0;
  }
}

/* ==========================================================================
   PROMISE ROW — 2x2 on ALL phones, not just narrow ones [FB-096]
   The 2x2 rule lived in @media (max-width: 400px), so every phone WIDER than
   400px (Pixel 412, iPhone XR 414, Pro Max 428-440) still got four items in
   one row and the text collided. Four across needs ~140px per item; a 440px
   phone gives 110px. Two across gives every phone at least 180px.
   ========================================================================== */
@media (max-width: 767px) {
  .promise-row li {
    flex: 0 0 50%;
    padding: 14px 12px;
    font-size: 15.5px;
  }
  .promise-row li + li { border-left: none; }
  .promise-row li:nth-child(even) { border-left: 1px solid rgba(20, 17, 12, 0.16); }
  .promise-row li:nth-child(n+3)  { border-top: 1px solid rgba(20, 17, 12, 0.16); }
}

/* ==========================================================================
   MOBILE STRUCTURE — applies to ALL phones, not just narrow ones [FB-098]

   These layout rules previously lived in @media (max-width: 400px). Anything
   wider — Pixel 412, iPhone XR 414, Pro Max 428, iPhone 16 Pro Max 440 — kept
   the DESKTOP row layouts and overflowed. Because .site-footer is
   overflow:hidden, the overflow was clipped silently: at 440px the third
   address and the whole Instagram block were rendered off-screen at x=591 and
   simply never seen.

   Sizing tweaks stay at 400px; only STRUCTURE is promoted here.
   ========================================================================== */
@media (max-width: 767px) {
  /* side padding was also stepping at the 400px line (16px below, 32px
     above), so the address column changed width across that boundary too. */
  .site-footer { padding: 0 16px; }

  /* footer: stack the three columns.
     align-items MUST be stretch here. The desktop rule sets flex-start,
     which in COLUMN direction collapses every block to its content width —
     the addresses were sitting in a 151px column on a 440px screen. */
  .footer-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 40px 0 34px;
  }
  /* GRID, not flex. Flex made this device-dependent: below 400px an older
     rule sets flex-direction:column, where `flex: 1 1 150px` sets 150px of
     HEIGHT rather than width — so a 384px Galaxy got 150px-tall boxes with
     huge gaps while a 402px iPhone got normal ones. A single-column grid has
     no main-axis ambiguity: same layout, same 18px gap, every phone. */
  .footer-locations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer-location { max-width: none; }
  .footer-meta { margin-bottom: 12px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 0 0;
  }

  /* section headers stack instead of forcing title + link onto one line */
  .section-head { flex-direction: column; align-items: flex-start; }

  /* price rows wrap so the amount never collides with the description */
  .price-row { flex-wrap: wrap; }
  .price-num { flex: 0 0 100%; align-self: flex-start; }
  .price-info { flex: 1 1 60%; }

  /* closing block stays centred on every phone, not only below 400px */
  .closing-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   CTA + SPACING round [FB-099 / FB-100 / FB-101]
   ========================================================================== */

/* Floating Book Now: larger, and lifted clear of the thumb rest / iOS home bar */
.floating-book {
  font-size: 15px;
  padding: 16px 32px;
  bottom: 64px;
}

/* Closing CTA now uses the SAME metallic gold button as the header, one size
   up. It was an underlined gold text link, which read as a footnote next to the
   header's solid button. `.btn`/`.btn-gold` supply the metal; these override
   the underline-link styling that used to define it. [FB-100] */
.closing-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 17px;
  letter-spacing: 0.14em;
  color: #1a1206;
  padding: 19px 44px;
  border-bottom: 0;
  border-radius: 3px;
}
.closing-cta:hover { color: #1a1206; border-color: rgba(255, 245, 205, 0.35); }

/* Mobile spacing: the same @media 400px cutoff that hid the footer also left
   the full-viewport team section and 128px pricing padding in place on any
   phone above 400px, which is the dead gap between the last price and
   "Meet Your Barbers". [FB-101] */
@media (max-width: 767px) {
  .pricing-inner { padding: 72px 0; gap: 28px; }
  .team-inner {
    min-height: auto;              /* was 100svh — a whole empty screen */
    padding: 52px 0 84px;
    gap: 30px;
  }
  .closing-cta { font-size: 15px; padding: 17px 36px; }
  .floating-book { bottom: 56px; font-size: 14px; padding: 15px 28px; }
}


/* ==========================================================================
   SCRIPT LINE CLEARANCE [FB-103]
   `.glyph` is line-height: 0 [FB-093] so it adds no height to the line box —
   which is what killed the dead gap, but also means a tall Great Vibes capital
   paints straight up into the line above. Measured overlap: P 23px, O 14px,
   i 29px (the dot).

   Reserved in `em` so it tracks the font size: the overhang is a fixed ratio
   of the glyph, and the glyph is a fixed ratio of the line. A pixel value would
   be right at one breakpoint and wrong at the other two.
   ========================================================================== */
.editorial-heading .line-serif,
.closing-heading .line-serif {
  padding-top: 0.34em;
}