/* ==========================================================================
   THE REFINERY — Blue Ridge, GA
   Site stylesheet (dark edition)
   --------------------------------------------------------------------------
   This is the ACTUAL stylesheet the approved design was built with, not a
   reconstruction. It drives every colour, size, space and effect on the site.

   Install: upload to  wp-content/uploads/refinery/refinery.css
   It is already enqueued sitewide, so replacing the file updates the site.

   Structure:
     1  Tokens          — every colour/size lives here, change once
     2  Base + grain
     3  Typography
     4  Layout + sections
     5  Buttons
     6  Header / nav
     7  Hero
     8  Marquee
     9  Figures
     10 Stats
     11 Services menu
     12 Barber cards
     13 Gallery
     15 Dark band
     16 Hours / location
     17 Booksy embed
     18 Barber profile
     19 Footer
     20 Mobile dock
     21 Scroll reveal
     22 Responsive
     24 Elementor bridge — maps these styles onto native Elementor widgets
   ========================================================================== */

/* ==========================================================================
   THE REFINERY — Barbershop · Blue Ridge, GA
   Core stylesheet / design system  ·  LIGHT EDITION
   --------------------------------------------------------------------------
   Light, editorial and quiet, with black kept for the hero, one mid-page
   band and the footer. Gold does the accent work throughout.

   THEMING
   Components read semantic variables (--rf-bg / --rf-fg / --rf-line ...).
   Put `rf-on-dark` on any container to flip that whole subtree to the dark
   palette — nothing else needs to change.

   ELEMENTOR NOTE
   Paste this whole file into Elementor → Site Settings → Custom CSS
   (or enqueue it from a child theme). Class prefix `rf-` avoids collisions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Raw palette */
  --rf-paper: #0a0a09;   /* warm white — primary background      */
  --rf-bone: #121211;   /* off-white — alternating sections     */
  --rf-linen: #1c1c1a;   /* deeper off-white — hairlines, fills  */
  --rf-ink: #050505;   /* near-black — dark sections           */
  --rf-ink-deep: #000000;   /* footer, topbar                       */
  --rf-white:      #ffffff;
  --rf-charcoal: #f4f2ee;
  --rf-slate: #a5a29b;   /* muted body text on light             */
  --rf-slate-soft: #75726b;

  /* Gold — two tones so contrast holds on both backgrounds */
  --rf-gold:         #c9a227;
  --rf-gold-light:   #e8c86a;
  --rf-gold-pale:    #f4e5b0;
  --rf-gold-deep:    #8a6d1f;
  --rf-gold-ink:     #9c7c16;   /* gold text on white — accessible     */
  --rf-gold-grad:    linear-gradient(135deg, #8a6d1f 0%, #e8c86a 38%, #f4e5b0 52%, #c9a227 72%, #8a6d1f 100%);
  --rf-gold-glow:    0 0 0 1px rgba(201,162,39,.30), 0 0 18px rgba(201,162,39,.28), 0 0 46px rgba(201,162,39,.14);
  --rf-gold-glow-lg: 0 0 0 1px rgba(232,200,106,.5), 0 0 26px rgba(201,162,39,.42), 0 0 70px rgba(201,162,39,.22);

  /* ---- SEMANTIC (light is the default) ---- */
  --rf-bg: var(--rf-paper);
  --rf-fg: #e9e7e2;
  --rf-fg-strong: #ffffff;
  --rf-fg-muted: #a5a29b;
  --rf-fg-faint: #75726b;
  --rf-accent: var(--rf-gold-light);
  --rf-line: rgba(255,255,255,.14);
  --rf-line-soft: rgba(255,255,255,.07);
  --rf-surface: #151513;
  --rf-watermark: rgba(255,255,255,.038);

  /* Type */
  --rf-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --rf-font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --rf-fs-hero:   clamp(3.1rem, 8.6vw, 8.5rem);
  --rf-fs-h1:     clamp(2.7rem, 6vw, 5.5rem);
  --rf-fs-h2:     clamp(2.2rem, 4.4vw, 4rem);
  --rf-fs-h3:     clamp(1.45rem, 2.2vw, 2rem);
  --rf-fs-body:   clamp(1rem, 1.05vw, 1.0625rem);

  --rf-track-wide: 0.34em;
  --rf-track-mid:  0.16em;

  /* Layout */
  --rf-max:         1280px;
  --rf-max-narrow:  820px;
  --rf-gutter:      clamp(1.25rem, 5vw, 5rem);
  --rf-section-y:   clamp(4.5rem, 9vw, 10rem);
  --rf-radius:      2px;
  --rf-radius-lg:   3px;
  --rf-radius-pill: 999px;

  /* Motion */
  --rf-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --rf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --rf-header-h: 88px;
}

/* Dark subtree */
.rf-on-dark {
  --rf-bg:        var(--rf-ink);
  --rf-fg:        #f4f2ee;
  --rf-fg-strong: #ffffff;
  --rf-fg-muted:  #a5a29b;
  --rf-fg-faint:  #75726b;
  --rf-accent:    var(--rf-gold-light);
  --rf-line:      rgba(255,255,255,.14);
  --rf-line-soft: rgba(255,255,255,.07);
  --rf-surface:   #191817;
  --rf-watermark: rgba(255,255,255,.038);
  color: var(--rf-fg);
  background-color: var(--rf-bg);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--rf-header-h);
}

body.rf-body {
  margin: 0;
  background: var(--rf-paper);
  color: var(--rf-fg);
  font-family: var(--rf-font-body);
  font-size: var(--rf-fs-body);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.rf-body.rf-nav-open { overflow: hidden; }

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--rf-gold); color: #16150f; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rf-bone); }
::-webkit-scrollbar-thumb { background: #cfcabf; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--rf-gold); }

/* Paper grain — reads as texture on light, as film on dark */
.rf-grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.rf-display, .rf-h1, .rf-h2, .rf-h3 {
  font-family: var(--rf-font-display);
  font-weight: 300;
  color: var(--rf-fg-strong);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
}
.rf-display { font-size: var(--rf-fs-hero); line-height: 0.98; }
.rf-h1      { font-size: var(--rf-fs-h1); }
.rf-h2      { font-size: var(--rf-fs-h2); }
.rf-h3      { font-size: var(--rf-fs-h3); line-height: 1.16; }

.rf-italic { font-style: italic; }

.rf-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(17,17,16,.35);
}
.rf-on-dark .rf-outline { -webkit-text-stroke-color: rgba(255,255,255,.34); }

.rf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--rf-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--rf-track-wide);
  text-transform: uppercase;
  color: var(--rf-accent);
  margin: 0 0 1.6rem;
}
.rf-eyebrow::before {
  content: "";
  width: 40px; height: 1px;
  background: var(--rf-gold-grad);
  box-shadow: 0 0 10px rgba(201,162,39,.55);
}
.rf-eyebrow.rf-eyebrow--center::after {
  content: "";
  width: 40px; height: 1px;
  background: var(--rf-gold-grad);
  box-shadow: 0 0 10px rgba(201,162,39,.55);
}

.rf-lede {
  font-family: var(--rf-font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--rf-fg-strong);
  letter-spacing: -0.005em;
}

.rf-muted { color: var(--rf-fg-muted); }
.rf-gold  { color: var(--rf-accent); }

.rf-gold-text {
  background: var(--rf-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rf-rule {
  width: 100%; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--rf-line), transparent);
}
.rf-rule--gold {
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.6), transparent);
  box-shadow: 0 0 14px rgba(201,162,39,.22);
}

.rf-diamond {
  width: 8px; height: 8px;
  background: var(--rf-gold-grad);
  transform: rotate(45deg);
  margin: 1.5rem auto;
  box-shadow: 0 0 14px rgba(201,162,39,.6);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.rf-section {
  position: relative;
  padding: var(--rf-section-y) 0;
  background: var(--rf-bg);
  color: var(--rf-fg);
}
.rf-section--tight { padding: clamp(3rem, 5vw, 5.5rem) 0; }
.rf-section--bone  { background: var(--rf-bone); }
.rf-section--paper { background: var(--rf-paper); }

.rf-container {
  width: 100%;
  max-width: var(--rf-max);
  margin-inline: auto;
  padding-inline: var(--rf-gutter);
}
.rf-container--narrow { max-width: var(--rf-max-narrow); }
.rf-container--wide   { max-width: 1520px; }

.rf-grid { display: grid; gap: clamp(2rem, 4vw, 4.5rem); }
.rf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rf-grid--split { grid-template-columns: 1fr 1fr; align-items: center; }

.rf-center { text-align: center; }

.rf-section-head { margin-bottom: clamp(2.5rem, 4.5vw, 5rem); }
.rf-section-head p { max-width: 60ch; color: var(--rf-fg-muted); margin: 1.35rem 0 0; }
.rf-section-head.rf-center p { margin-inline: auto; }

.rf-watermark {
  position: absolute;
  top: clamp(1rem, 3vw, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--rf-font-display);
  font-style: italic;
  font-size: clamp(5rem, 16vw, 16rem);
  letter-spacing: -0.02em;
  color: var(--rf-watermark);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.rf-section > .rf-container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.rf-btn {
  --btn-py: 1.05rem;
  --btn-px: 2.4rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--rf-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  border-radius: var(--rf-radius-pill);
  border: 1px solid transparent;
  transition: color .4s var(--rf-ease), background-color .4s var(--rf-ease),
              border-color .4s var(--rf-ease), box-shadow .4s var(--rf-ease),
              transform .4s var(--rf-ease);
  white-space: nowrap;
  cursor: pointer;
}
.rf-btn:focus-visible { outline: 2px solid var(--rf-gold); outline-offset: 3px; }

/* Primary — gold with glow */
.rf-btn--gold {
  background: var(--rf-gold-grad);
  background-size: 220% 220%;
  background-position: 0% 50%;
  color: #16150f;
  font-weight: 600;
  box-shadow: var(--rf-gold-glow);
  animation: rf-goldPulse 5s ease-in-out infinite;
}
.rf-btn--gold:hover {
  background-position: 100% 50%;
  box-shadow: var(--rf-gold-glow-lg);
  transform: translateY(-2px);
}
@keyframes rf-goldPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(201,162,39,.30), 0 0 18px rgba(201,162,39,.26), 0 0 46px rgba(201,162,39,.13); }
  50%      { box-shadow: 0 0 0 1px rgba(232,200,106,.5), 0 0 24px rgba(201,162,39,.40), 0 0 60px rgba(201,162,39,.20); }
}

/* Ghost — adapts to the surrounding theme */
.rf-btn--ghost {
  background: transparent;
  color: var(--rf-fg-strong);
  border-color: var(--rf-line);
}
.rf-btn--ghost:hover {
  border-color: var(--rf-gold);
  color: var(--rf-accent);
  box-shadow: 0 0 22px rgba(201,162,39,.16);
  transform: translateY(-2px);
}

/* Gold outline */
.rf-btn--outline-gold {
  background: transparent;
  color: var(--rf-accent);
  border-color: rgba(201,162,39,.5);
}
.rf-btn--outline-gold:hover {
  background: var(--rf-gold-grad);
  color: #16150f;
  box-shadow: var(--rf-gold-glow);
  transform: translateY(-2px);
}

/* Solid ink */
.rf-btn--ink { background: var(--rf-ink); color: #fff; font-weight: 500; }
.rf-btn--ink:hover { background: var(--rf-charcoal); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }

.rf-btn--sm { --btn-py: .78rem; --btn-px: 1.55rem; font-size: .66rem; }
.rf-btn--lg { --btn-py: 1.25rem; --btn-px: 2.9rem; font-size: .78rem; }

.rf-btn__arrow {
  display: inline-grid;
  place-items: center;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: rgba(0,0,0,.14);
  transition: transform .4s var(--rf-ease);
}
.rf-btn--ghost .rf-btn__arrow,
.rf-btn--outline-gold .rf-btn__arrow { background: rgba(201,162,39,.16); }
.rf-btn:hover .rf-btn__arrow { transform: translate(3px,-3px); }

.rf-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.rf-btn-row--center { justify-content: center; }

.rf-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  color: var(--rf-fg-strong);
  padding-bottom: 4px;
}
.rf-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--rf-gold-grad);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--rf-ease);
}
.rf-link:hover { color: var(--rf-accent); }
.rf-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   6. TOP BAR + HEADER
   -------------------------------------------------------------------------- */
.rf-topbar {
  position: relative;
  z-index: 60;
  background: var(--rf-ink-deep);
  color: #b6b2aa;
  overflow: hidden;
  font-size: .625rem;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
}
.rf-topbar__track { display: flex; width: max-content; animation: rf-marquee 46s linear infinite; }
.rf-topbar__group { display: flex; align-items: center; padding: .58rem 0; }
.rf-topbar__item { display: inline-flex; align-items: center; gap: .8rem; padding: 0 1.6rem; white-space: nowrap; }
.rf-topbar__item i { color: var(--rf-gold); font-style: normal; }
@keyframes rf-marquee { to { transform: translateX(-50%); } }

.rf-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(252,251,249,.78);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--rf-line-soft);
  transition: background .4s var(--rf-ease), box-shadow .4s var(--rf-ease), border-color .4s var(--rf-ease);
}
.rf-header.is-stuck {
  background: rgba(252,251,249,.96);
  border-bottom-color: var(--rf-line);
  box-shadow: 0 10px 34px rgba(17,17,16,.07);
}
.rf-header__inner {
  height: var(--rf-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.rf-logo { display: inline-flex; align-items: center; }
.rf-logo img {
  height: 52px; width: auto;
  transition: filter .4s var(--rf-ease), transform .4s var(--rf-ease);
}
.rf-logo:hover img { filter: drop-shadow(0 0 12px rgba(201,162,39,.45)); transform: translateY(-1px); }

.rf-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.5rem); }
.rf-nav a {
  position: relative;
  font-size: .70rem;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  color: var(--rf-fg-muted);
  padding: .4rem 0;
  transition: color .35s var(--rf-ease);
}
.rf-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--rf-gold-grad);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--rf-ease);
}
.rf-nav a:hover, .rf-nav a.is-active { color: var(--rf-fg-strong); }
.rf-nav a:hover::after, .rf-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.rf-header__cta { display: flex; align-items: center; gap: 1.1rem; }
.rf-header__phone {
  font-size: .70rem;
  letter-spacing: var(--rf-track-mid);
  color: var(--rf-fg-muted);
  white-space: nowrap;
}
.rf-header__phone:hover { color: var(--rf-accent); }

.rf-burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--rf-line);
  border-radius: 50%;
  position: relative;
}
.rf-burger span {
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 1.4px;
  background: var(--rf-ink);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--rf-ease), opacity .3s;
}
.rf-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.rf-burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.rf-burger.is-open span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.rf-burger.is-open span:nth-child(2) { opacity: 0; }
.rf-burger.is-open span:nth-child(3) { transform: translate(-50%,-50%) rotate(-45deg); }

.rf-menu {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(252,251,249,.985);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--rf-header-h) + 2rem) var(--rf-gutter) 6rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--rf-ease), visibility .45s;
}
.rf-menu.is-open { opacity: 1; visibility: visible; }
.rf-menu__list { list-style: none; margin: 0; padding: 0; }
.rf-menu__list li { overflow: hidden; }
.rf-menu__list a {
  display: block;
  font-family: var(--rf-font-display);
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  font-weight: 300;
  color: var(--rf-fg-strong);
  line-height: 1.15;
  padding: .1em 0;
  transform: translateY(110%);
  transition: transform .6s var(--rf-ease), color .3s;
}
.rf-menu.is-open .rf-menu__list a { transform: translateY(0); }
.rf-menu__list li:nth-child(1) a { transition-delay: .06s; }
.rf-menu__list li:nth-child(2) a { transition-delay: .12s; }
.rf-menu__list li:nth-child(3) a { transition-delay: .18s; }
.rf-menu__list li:nth-child(4) a { transition-delay: .24s; }
.rf-menu__list li:nth-child(5) a { transition-delay: .30s; }
.rf-menu__list li:nth-child(6) a { transition-delay: .36s; }
.rf-menu__list a:hover { color: var(--rf-accent); font-style: italic; }
.rf-menu__foot {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rf-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2rem;
  font-size: .72rem;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  color: var(--rf-fg-muted);
}

/* --------------------------------------------------------------------------
   7. HERO (dark anchor)
   -------------------------------------------------------------------------- */
.rf-hero {
  position: relative;
  min-height: clamp(580px, 88vh, 940px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
}
.rf-hero__media { position: absolute; inset: 0; z-index: 0; }
.rf-hero__media img,
.rf-hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.55) contrast(1.05) brightness(.66);
  transform: scale(1.04);
  animation: rf-slowZoom 24s ease-in-out infinite alternate;
}
@keyframes rf-slowZoom { to { transform: scale(1.13); } }

.rf-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(8,8,7,.94) 0%, rgba(8,8,7,.5) 42%, rgba(8,8,7,.28) 70%, rgba(8,8,7,.62) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(201,162,39,.12) 0%, transparent 62%);
}
.rf-hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(6rem, 10vw, 9rem);
}
.rf-hero__title { margin-bottom: 1.6rem; max-width: 15ch; }
.rf-hero__title .rf-line { display: block; }
.rf-hero__sub {
  max-width: 44ch;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: rgba(255,255,255,.78);
  margin: 0 0 2.6rem;
}
.rf-hero__meta {
  display: flex; flex-wrap: wrap; gap: .8rem 2.2rem;
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .66rem; letter-spacing: var(--rf-track-mid); text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.rf-hero__meta strong { color: #fff; font-weight: 500; }

.rf-scrollcue {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .58rem; letter-spacing: var(--rf-track-wide); text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.rf-scrollcue__line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(201,162,39,.7));
  position: relative; overflow: hidden;
}
.rf-scrollcue__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--rf-gold-light);
  animation: rf-cue 2.4s var(--rf-ease-in-out) infinite;
}
@keyframes rf-cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* Page hero — light editorial variant used on the barber pages */
.rf-pagehero {
  position: relative;
  background: var(--rf-bone);
  overflow: hidden;
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.rf-pagehero__glow {
  position: absolute;
  top: -25%; right: -10%;
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(201,162,39,.16) 0%, transparent 62%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. MARQUEE
   -------------------------------------------------------------------------- */
.rf-marquee {
  border-top: 1px solid var(--rf-line-soft);
  border-bottom: 1px solid var(--rf-line-soft);
  background: var(--rf-bg);
  overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.7rem) 0;
}
.rf-marquee__track { display: flex; width: max-content; animation: rf-marquee 38s linear infinite; }
.rf-marquee:hover .rf-marquee__track { animation-play-state: paused; }
.rf-marquee__group { display: flex; align-items: center; }
.rf-marquee__item {
  display: inline-flex; align-items: center; gap: 1.7rem;
  padding: 0 1.7rem;
  font-family: var(--rf-font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.9rem);
  color: var(--rf-fg-muted);
  white-space: nowrap;
}
.rf-marquee__item::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--rf-gold-grad);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(201,162,39,.65);
}

/* --------------------------------------------------------------------------
   9. FIGURES
   -------------------------------------------------------------------------- */
.rf-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--rf-radius-lg);
  background: var(--rf-linen);
}
.rf-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.03);
  transition: transform 1.1s var(--rf-ease), filter .7s var(--rf-ease);
}
.rf-figure:hover img { transform: scale(1.055); filter: grayscale(0) contrast(1.05); }
.rf-figure--ratio-45  { aspect-ratio: 4/5; }
.rf-figure--ratio-11  { aspect-ratio: 1/1; }
.rf-figure--ratio-169 { aspect-ratio: 16/9; }
.rf-figure--ratio-34  { aspect-ratio: 3/4; }

.rf-figure--framed::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(255,255,255,0);
  border-radius: 2px;
  transition: border-color .5s var(--rf-ease), inset .5s var(--rf-ease);
  pointer-events: none;
}
.rf-figure--framed:hover::after { border-color: rgba(244,229,176,.75); inset: 16px; }

/* Offset gold hairline behind an image */
.rf-framed-wrap { position: relative; }
.rf-framed-wrap::before {
  content: "";
  position: absolute;
  inset: -16px -16px 16px 16px;
  border: 1px solid rgba(201,162,39,.4);
  border-radius: var(--rf-radius-lg);
  pointer-events: none;
  z-index: 0;
}
.rf-framed-wrap > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   10. STATS
   -------------------------------------------------------------------------- */
.rf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.75rem;
  border-top: 1px solid var(--rf-line);
  border-bottom: 1px solid var(--rf-line);
}
.rf-stat { padding: 1.7rem 1rem; text-align: center; border-right: 1px solid var(--rf-line-soft); }
.rf-stat:last-child { border-right: 0; }
.rf-stat__num {
  display: block;
  font-family: var(--rf-font-display);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 300;
  line-height: 1;
  color: var(--rf-fg-strong);
}
.rf-stat__label {
  display: block;
  margin-top: .6rem;
  font-size: .58rem;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  color: var(--rf-fg-faint);
}

/* --------------------------------------------------------------------------
   11. SERVICES
   -------------------------------------------------------------------------- */
.rf-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 5.5rem); }

.rf-service {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rf-line-soft);
  transition: border-color .4s var(--rf-ease);
}
.rf-service:hover { border-bottom-color: rgba(201,162,39,.55); }
.rf-service__name {
  font-family: var(--rf-font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 400;
  color: var(--rf-fg-strong);
  white-space: nowrap;
  margin: 0;
  transition: color .35s var(--rf-ease);
}
.rf-service:hover .rf-service__name { color: var(--rf-accent); }
.rf-service__dots {
  flex: 1 1 30px;
  min-width: 30px;
  height: 1px;
  margin-bottom: 5px;
  background-image: radial-gradient(circle, var(--rf-line) 1px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}
.rf-service__price {
  font-family: var(--rf-font-display);
  font-size: 1.2rem;
  color: var(--rf-accent);
  white-space: nowrap;
}
.rf-service__desc {
  flex-basis: 100%;
  font-size: .8125rem;
  color: var(--rf-fg-faint);
  margin: .3rem 0 0;
  line-height: 1.65;
}

.rf-service-note {
  margin-top: 3rem;
  padding: 1.5rem 1.9rem;
  border: 1px solid var(--rf-line);
  border-left: 2px solid var(--rf-gold);
  border-radius: var(--rf-radius);
  background: rgba(201,162,39,.05);
  font-size: .875rem;
  color: var(--rf-fg-muted);
}

/* --------------------------------------------------------------------------
   12. BARBER CARDS
   -------------------------------------------------------------------------- */
.rf-barbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); }

.rf-barber { display: block; }
.rf-barber__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--rf-radius-lg);
  background: var(--rf-linen);
}
.rf-barber__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) contrast(1.04);
  transition: transform 1.2s var(--rf-ease), filter .6s var(--rf-ease);
}
.rf-barber:hover .rf-barber__media img { transform: scale(1.06); filter: grayscale(0); }
.rf-barber__media::after {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(244,229,176,0);
  transition: border-color .5s var(--rf-ease);
  pointer-events: none;
}
.rf-barber:hover .rf-barber__media::after { border-color: rgba(244,229,176,.8); }

.rf-barber__body { padding: 1.6rem .25rem 0; }
.rf-barber__role {
  font-size: .58rem; letter-spacing: var(--rf-track-wide); text-transform: uppercase;
  color: var(--rf-accent); margin: 0 0 .6rem;
}
.rf-barber__name {
  font-family: var(--rf-font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  color: var(--rf-fg-strong);
  line-height: 1.05;
  margin: 0 0 .9rem;
  transition: color .35s var(--rf-ease);
}
.rf-barber:hover .rf-barber__name { color: var(--rf-accent); }
.rf-barber__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.rf-tag {
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--rf-fg-muted);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius-pill);
  padding: .38rem .85rem;
}
.rf-tag--gold { color: var(--rf-accent); border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.07); }

/* --------------------------------------------------------------------------
   13. GALLERY
   -------------------------------------------------------------------------- */
.rf-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 15.5vw, 250px);
  gap: clamp(.6rem, 1.1vw, 1rem);
}
.rf-gallery .rf-figure { height: 100%; min-height: 0; }
.rf-gallery .rf-figure img { height: 100%; }
.rf-gallery__tall { grid-row: span 2; }
.rf-gallery__wide { grid-column: span 2; }

/* --------------------------------------------------------------------------
   14. TESTIMONIALS
   -------------------------------------------------------------------------- */
.rf-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); }
.rf-quote {
  position: relative;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rf-line);
}
.rf-quote::before {
  content: "\201C";
  position: absolute;
  top: .35rem; left: -.06em;
  font-family: var(--rf-font-display);
  font-size: 5rem;
  line-height: 1;
  color: rgba(201,162,39,.30);
}
.rf-stars { display: flex; gap: .3rem; margin-bottom: 1.1rem; color: var(--rf-gold); font-size: .72rem; letter-spacing: .2em; }
.rf-quote p {
  font-family: var(--rf-font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--rf-fg-strong);
  margin: 0 0 1.5rem;
}
.rf-quote__by { font-size: .62rem; letter-spacing: var(--rf-track-mid); text-transform: uppercase; color: var(--rf-fg-faint); }
.rf-quote__by strong { display: block; color: var(--rf-fg); font-weight: 500; margin-bottom: .2rem; }

/* --------------------------------------------------------------------------
   15. DARK BAND
   -------------------------------------------------------------------------- */
.rf-band { position: relative; overflow: hidden; background: #000; }
.rf-band__media { position: absolute; inset: 0; }
.rf-band__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.7) brightness(.42);
}
.rf-band__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,7,.94) 0%, rgba(8,8,7,.72) 48%, rgba(8,8,7,.36) 100%),
    radial-gradient(80% 100% at 0% 50%, rgba(201,162,39,.14), transparent 62%);
}
.rf-band__inner { position: relative; z-index: 2; padding: clamp(5rem, 9.5vw, 10rem) 0; }

.rf-checklist { list-style: none; margin: 2.25rem 0 3rem; padding: 0; display: grid; gap: 1rem; max-width: 42ch; }
.rf-checklist li { display: flex; align-items: flex-start; gap: 1rem; font-size: .95rem; color: rgba(255,255,255,.76); }
.rf-checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: .7em;
  background: var(--rf-gold-grad);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(201,162,39,.7);
}

/* --------------------------------------------------------------------------
   16. HOURS / LOCATION
   -------------------------------------------------------------------------- */
.rf-hours { list-style: none; margin: 0; padding: 0; }
.rf-hours li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rf-line-soft);
  font-size: .875rem;
}
.rf-hours li:last-child { border-bottom: 0; }
.rf-hours__day { letter-spacing: var(--rf-track-mid); text-transform: uppercase; font-size: .64rem; color: var(--rf-fg-faint); }
.rf-hours__time { color: var(--rf-fg-strong); }
.rf-hours li.is-today .rf-hours__day,
.rf-hours li.is-today .rf-hours__time { color: var(--rf-accent); }

.rf-info { display: grid; gap: 1.75rem; margin-top: 2.5rem; }
.rf-info__item { display: flex; gap: 1.1rem; align-items: flex-start; }
.rf-info__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(201,162,39,.4);
  border-radius: 50%;
  color: var(--rf-accent);
  box-shadow: inset 0 0 18px rgba(201,162,39,.09);
}
.rf-info__label { font-size: .58rem; letter-spacing: var(--rf-track-wide); text-transform: uppercase; color: var(--rf-fg-faint); margin: 0 0 .3rem; }
.rf-info__value { color: var(--rf-fg-strong); margin: 0; font-size: 1rem; line-height: 1.5; }
.rf-info__value a:hover { color: var(--rf-accent); }

.rf-map {
  position: relative;
  aspect-ratio: 4/3;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius-lg);
  overflow: hidden;
  background: var(--rf-linen);
}
.rf-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.94); }

/* --------------------------------------------------------------------------
   17. BOOKSY EMBED PLACEHOLDER
   -------------------------------------------------------------------------- */
.rf-embed {
  position: relative;
  border: 1px dashed rgba(201,162,39,.5);
  border-radius: var(--rf-radius-lg);
  background:
    repeating-linear-gradient(45deg, rgba(201,162,39,.03) 0 12px, transparent 12px 24px),
    var(--rf-surface);
  min-height: 480px;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
}
.rf-embed__inner { max-width: 560px; }
.rf-embed__badge {
  display: inline-block;
  font-size: .58rem;
  letter-spacing: var(--rf-track-wide);
  text-transform: uppercase;
  color: var(--rf-accent);
  border: 1px solid rgba(201,162,39,.45);
  border-radius: var(--rf-radius-pill);
  padding: .45rem 1.1rem;
  margin-bottom: 1.5rem;
}
.rf-embed h3 { margin-bottom: 1rem; }
.rf-embed code {
  display: block;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .72rem;
  line-height: 1.7;
  text-align: left;
  color: var(--rf-fg-muted);
  background: var(--rf-bone);
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-radius);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   18. BARBER PROFILE
   -------------------------------------------------------------------------- */
.rf-profile { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.rf-crumb {
  display: flex; width: max-content; align-items: center; gap: .6rem;
  font-size: .64rem; letter-spacing: var(--rf-track-mid); text-transform: uppercase;
  color: var(--rf-fg-faint); margin-bottom: 2rem;
  transition: color .3s;
}
.rf-crumb:hover { color: var(--rf-accent); }
.rf-profile__name { margin: 0 0 .4rem; }
.rf-profile__role {
  font-family: var(--rf-font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--rf-accent);
  margin: 0 0 1.9rem;
}
.rf-profile__bio p { margin: 0 0 1.15rem; }
.rf-profile__bio p:last-child { margin-bottom: 0; }

.rf-spec { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rf-line); border-bottom: 1px solid var(--rf-line); }
.rf-spec__item { padding: 1.6rem 1.5rem 1.6rem 0; border-right: 1px solid var(--rf-line-soft); }
.rf-spec__item:last-child { border-right: 0; }
.rf-spec__label { font-size: .58rem; letter-spacing: var(--rf-track-wide); text-transform: uppercase; color: var(--rf-fg-faint); margin: 0 0 .45rem; }
.rf-spec__value { margin: 0; color: var(--rf-fg-strong); font-size: .95rem; }

.rf-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); }

/* --------------------------------------------------------------------------
   19. FOOTER (dark anchor)
   -------------------------------------------------------------------------- */
.rf-footer { background: var(--rf-ink-deep); padding-top: clamp(3.5rem, 6vw, 6.5rem); }
.rf-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.rf-footer__logo img { height: 82px; width: auto; margin-bottom: 1.5rem; }
.rf-footer h4 {
  font-family: var(--rf-font-body);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: var(--rf-track-wide);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.5rem;
}
.rf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.rf-footer ul a { font-size: .875rem; color: rgba(255,255,255,.55); transition: color .3s, padding-left .3s; }
.rf-footer ul a:hover { color: var(--rf-gold-light); padding-left: 4px; }
.rf-footer p { font-size: .875rem; color: rgba(255,255,255,.55); }

.rf-socials { display: flex; gap: .6rem; margin-top: 1.5rem; }
.rf-socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  transition: all .4s var(--rf-ease);
}
.rf-socials a:hover {
  border-color: var(--rf-gold);
  color: var(--rf-gold-light);
  box-shadow: 0 0 20px rgba(201,162,39,.28);
  transform: translateY(-2px);
}

.rf-footer__bar {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 1.6rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: rgba(255,255,255,.35);
}
.rf-footer__bar a:hover { color: var(--rf-gold-light); }

/* --------------------------------------------------------------------------
   20. STICKY MOBILE DOCK
   -------------------------------------------------------------------------- */
.rf-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 480;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(252,251,249,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rf-line);
  box-shadow: 0 -8px 30px rgba(17,17,16,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.rf-dock a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  padding: .8rem .5rem .9rem;
  font-size: .54rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rf-fg-muted);
  border-right: 1px solid var(--rf-line-soft);
}
.rf-dock a:last-child { border-right: 0; }
.rf-dock a.is-primary { color: var(--rf-gold-ink); }
.rf-dock a.is-primary svg { filter: drop-shadow(0 0 8px rgba(201,162,39,.55)); }

/* --------------------------------------------------------------------------
   21. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.rf-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--rf-ease), transform .9s var(--rf-ease);
  will-change: opacity, transform;
}
.rf-reveal.is-in { opacity: 1; transform: none; }
.rf-reveal[data-delay="1"] { transition-delay: .10s; }
.rf-reveal[data-delay="2"] { transition-delay: .20s; }
.rf-reveal[data-delay="3"] { transition-delay: .30s; }
.rf-reveal[data-delay="4"] { transition-delay: .40s; }
.rf-reveal[data-delay="5"] { transition-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  .rf-reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rf-footer__grid { grid-template-columns: 1fr 1fr; }
  .rf-quotes { grid-template-columns: 1fr; gap: 2rem; }
  .rf-gallery { grid-template-columns: repeat(3, 1fr); }
  .rf-spec { grid-template-columns: repeat(2, 1fr); }
  .rf-spec__item { padding-left: 0; }
  .rf-spec__item:nth-child(2n) { border-right: 0; }
}

@media (max-width: 980px) {
  :root { --rf-header-h: 74px; }
  .rf-nav, .rf-header__phone { display: none; }
  .rf-burger { display: block; }
  .rf-grid--2, .rf-grid--3, .rf-grid--split, .rf-profile { grid-template-columns: 1fr; }
  .rf-services { grid-template-columns: 1fr; }
  .rf-barbers { grid-template-columns: 1fr; }
  .rf-dock { display: grid; }
  body.rf-body { padding-bottom: 66px; }
  .rf-header__cta .rf-btn { display: none; }
}

@media (max-width: 700px) {
  .rf-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 30vw, 180px); }
  .rf-gallery__wide { grid-column: span 2; }
  .rf-stats { grid-template-columns: 1fr; }
  .rf-stat { border-right: 0; border-bottom: 1px solid var(--rf-line-soft); }
  .rf-stat:last-child { border-bottom: 0; }
  .rf-spec { grid-template-columns: 1fr; }
  .rf-spec__item { border-right: 0; border-bottom: 1px solid var(--rf-line-soft); }
  .rf-spec__item:last-child { border-bottom: 0; }
  .rf-footer__grid { grid-template-columns: 1fr; }
  .rf-works { grid-template-columns: 1fr 1fr; }
  .rf-works > :last-child { grid-column: span 2; }
  .rf-logo img { height: 40px; }
  .rf-watermark { display: none; }
  .rf-btn { --btn-px: 1.9rem; }
  .rf-framed-wrap::before { inset: -9px -9px 9px 9px; }
}

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .rf-header, .rf-dock, .rf-grain, .rf-topbar, .rf-menu, .rf-scrollcue { display: none !important; }
  body.rf-body { background: #fff; color: #000; }
}


/* ==========================================================================
   THE REFINERY — DARK THEME OVERRIDE
   --------------------------------------------------------------------------
   Load this AFTER refinery.css and it turns the whole site dark. Nothing in
   the markup changes except two images (see the note at the bottom).

     <link rel="stylesheet" href="assets/css/refinery.css">
     <link rel="stylesheet" href="assets/css/refinery-dark.css">   <-- add

   The layout, spacing, type scale and every animation are identical to the
   light build. Only the palette moves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE INVERSION
   The base stylesheet drives everything from these tokens, so redefining them
   flips the alternating sections, cards, rules and muted text in one go.
   -------------------------------------------------------------------------- */


/* `rf-on-dark` still exists in the markup (hero, band, footer). On the dark
   build it simply needs to keep matching, so re-point it at the same values. */
.rf-on-dark {
  --rf-bg:        #050505;
  --rf-fg:        #e9e7e2;
  --rf-fg-strong: #ffffff;
  --rf-fg-muted:  #a5a29b;
  --rf-fg-faint:  #75726b;
  --rf-accent:    var(--rf-gold-light);
  --rf-line:      rgba(255,255,255,.14);
  --rf-line-soft: rgba(255,255,255,.07);
  --rf-surface:   #151513;
  --rf-watermark: rgba(255,255,255,.038);
}

body.rf-body { background: var(--rf-paper); }

/* --------------------------------------------------------------------------
   2. THE HANDFUL OF HARD-CODED LIGHT VALUES
   -------------------------------------------------------------------------- */

/* Grain reads as film on dark rather than paper texture */
.rf-grain { mix-blend-mode: overlay; opacity: 0.34; }

/* Scrollbar */
::-webkit-scrollbar-track { background: #0a0a09; }
::-webkit-scrollbar-thumb { background: #2b2b28; }
::-webkit-scrollbar-thumb:hover { background: var(--rf-gold-deep); }

::selection { background: var(--rf-gold); color: #16150f; }

/* Header */
.rf-header {
  background: rgba(10,10,9,.72);
  border-bottom-color: rgba(255,255,255,.07);
}
.rf-header.is-stuck {
  background: rgba(6,6,5,.95);
  border-bottom-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.62);
}
.rf-burger { border-color: rgba(255,255,255,.16); }
.rf-burger span { background: #ffffff; }

/* Overlay menu */
.rf-menu { background: rgba(5,5,5,.985); }

/* Outlined display text */
.rf-outline { -webkit-text-stroke-color: rgba(255,255,255,.34); }

/* Service leader dots read better a touch brighter */
.rf-service__dots {
  background-image: radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1px);
}

/* Gold note panel */
.rf-service-note { background: rgba(201,162,39,.06); }

/* Booksy placeholder */
.rf-embed {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 12px, transparent 12px 24px),
    var(--rf-surface);
}
.rf-embed code { background: #0b0b0a; border-color: rgba(255,255,255,.09); }

/* Map — invert so the tiles match the shell */
.rf-map iframe { filter: grayscale(1) invert(.92) contrast(.85); }

/* Page hero glow sits on a dark field now */
.rf-pagehero__glow {
  background: radial-gradient(circle, rgba(201,162,39,.13) 0%, transparent 62%);
}

/* Sticky mobile dock */
.rf-dock {
  background: rgba(8,8,7,.96);
  border-top-color: rgba(255,255,255,.14);
  box-shadow: 0 -8px 30px rgba(0,0,0,.5);
}
.rf-dock a.is-primary { color: var(--rf-gold-light); }

/* Footer already sits on --rf-ink-deep, now pure black */
.rf-footer { background: #000000; border-top: 1px solid rgba(255,255,255,.07); }

/* Ghost buttons on the dark field */
.rf-btn--ghost { border-color: rgba(255,255,255,.26); }

/* Solid-ink button becomes solid-white so it stays visible */
.rf-btn--ink { background: #ffffff; color: #0a0a09; }
.rf-btn--ink:hover { background: var(--rf-gold-light); color: #16150f; }

/* Print */
@media print { body.rf-body { background: #fff; color: #000; } }

/* --------------------------------------------------------------------------
   3. TWO IMAGE SWAPS
   The markup in the dark build already points at these, but if you are
   converting a light page by hand, change:
       assets/img/logo-ink.png      ->  assets/img/logo-white.png   (header)
       assets/img/favicon-light.png ->  assets/img/favicon.png      (icon)
   -------------------------------------------------------------------------- */


/* ==========================================================================
   THE REFINERY — ELEMENTOR BRIDGE  ·  LIGHT EDITION
   --------------------------------------------------------------------------
   Load this AFTER refinery.css.
   Elementor wraps every widget in its own markup, so a class added in
   Advanced → CSS Classes lands on the wrapper, not on the <h2> / <a> inside.
   These rules push the Refinery styling down onto Elementor's inner elements
   so you can keep using native Heading / Text / Button / Image widgets.
   ========================================================================== */

/* --- Kill Elementor's default max-width fight with our containers -------- */
.rf-section > .elementor-container,
.rf-section > .e-con-inner { width: 100%; }

/* --- Headings ------------------------------------------------------------ */
.rf-display .elementor-heading-title,
.rf-h1 .elementor-heading-title,
.rf-h2 .elementor-heading-title,
.rf-h3 .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}

/* --- Eyebrow / lede / muted text on Heading + Text Editor widgets --------- */
.rf-eyebrow .elementor-heading-title,
.rf-eyebrow .elementor-widget-container > p,
.rf-lede .elementor-widget-container > p,
.rf-muted .elementor-widget-container > p,
.rf-eyebrow > p,
.rf-lede > p,
.rf-muted > p {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  margin: 0;
}
/* Elementor renders eyebrows as block-level widgets — restore the flex rule */
.elementor-widget.rf-eyebrow { display: block; }.elementor-widget.rf-eyebrow .elementor-widget-container,
.elementor-widget.rf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
}.elementor-widget.rf-eyebrow .elementor-widget-container::before,
.elementor-widget.rf-eyebrow::before {
  content: "";
  width: 42px; height: 1px;
  background: var(--rf-gold-grad);
  box-shadow: 0 0 10px rgba(201,162,39,.6);
}
.elementor-widget.rf-eyebrow::before { content: none; }

/* --- Buttons ------------------------------------------------------------- */
.elementor-widget-button.rf-el-btn .elementor-button,
.elementor-widget-button.rf-el-btn .elementor-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1.05rem 2.4rem;
  font-family: var(--rf-font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  border-radius: var(--rf-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  transition: color .4s var(--rf-ease), background-color .4s var(--rf-ease),
              border-color .4s var(--rf-ease), box-shadow .4s var(--rf-ease),
              transform .4s var(--rf-ease);
}
.elementor-widget-button.rf-el-btn .elementor-button-content-wrapper { gap: .85rem; }

/* Gold */
.elementor-widget-button.rf-el-btn--gold .elementor-button {
  background: var(--rf-gold-grad);
  background-size: 220% 220%;
  background-position: 0% 50%;
  color: #16150f;
  font-weight: 600;
  box-shadow: var(--rf-gold-glow);
  animation: rf-goldPulse 5s ease-in-out infinite;
}
.elementor-widget-button.rf-el-btn--gold .elementor-button:hover {
  background-position: 100% 50%;
  box-shadow: var(--rf-gold-glow-lg);
  transform: translateY(-2px);
  color: #16150f;
}

/* Ghost — follows the surrounding light/dark theme */
.elementor-widget-button.rf-el-btn--ghost .elementor-button {
  color: var(--rf-fg-strong);
  border-color: var(--rf-line);
}
.elementor-widget-button.rf-el-btn--ghost .elementor-button:hover {
  border-color: var(--rf-gold);
  color: var(--rf-accent);
  box-shadow: 0 0 22px rgba(201,162,39,.18);
  transform: translateY(-2px);
}

/* Gold outline */
.elementor-widget-button.rf-el-btn--outline .elementor-button {
  color: var(--rf-accent);
  border-color: rgba(201,162,39,.5);
}
.elementor-widget-button.rf-el-btn--outline .elementor-button:hover {
  background: var(--rf-gold-grad);
  color: #16150f;
  box-shadow: var(--rf-gold-glow);
  transform: translateY(-2px);
}

/* Large modifier */
.elementor-widget-button.rf-el-btn--lg .elementor-button {
  padding: 1.25rem 3rem;
  font-size: .8125rem;
}

/* --- Images -------------------------------------------------------------- */
.elementor-widget-image.rf-figure .elementor-widget-container,
.elementor-widget-image.rf-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--rf-radius-lg);
  display: block;
}
.elementor-widget-image.rf-figure img {
  width: 100%;
  display: block;
  filter: grayscale(.35) contrast(1.03);
  transition: transform 1.1s var(--rf-ease), filter .7s var(--rf-ease);
}
.elementor-widget-image.rf-figure:hover img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.06);
}.elementor-widget-image.rf-figure--framed .elementor-widget-container::after,
.elementor-widget-image.rf-figure--framed::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(201,162,39,0);
  border-radius: 2px;
  transition: border-color .5s var(--rf-ease), inset .5s var(--rf-ease);
  pointer-events: none;
}.elementor-widget-image.rf-figure--framed:hover .elementor-widget-container::after,
.elementor-widget-image.rf-figure--framed:hover::after {
  border-color: rgba(244,229,176,.75);
  inset: 16px;
}

/* --- Icon list used as the gold-diamond checklist ------------------------- */
.elementor-widget-icon-list.rf-checklist .elementor-icon-list-items { display: grid; gap: .9rem; }
.elementor-widget-icon-list.rf-checklist .elementor-icon-list-item { align-items: flex-start; }
.elementor-widget-icon-list.rf-checklist .elementor-icon-list-icon { display: none; }
.elementor-widget-icon-list.rf-checklist .elementor-icon-list-text {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  color: var(--rf-fg-muted);
}
.elementor-widget-icon-list.rf-checklist .elementor-icon-list-text::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  background: var(--rf-gold-grad);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(201,162,39,.7);
}

/* --- HTML widgets should never add their own spacing --------------------- */
.elementor-widget-html > .elementor-widget-container > *,
.elementor-widget-html > * { margin-block: 0; }

/* --- Reveal animation also works on Elementor widgets -------------------- */
.elementor-widget.rf-reveal { opacity: 0; transform: translateY(34px); }
.elementor-widget.rf-reveal.is-in { opacity: 1; transform: none; }

/* --- Editor safety: never hide content while editing --------------------- */
body.elementor-editor-active .rf-reveal,
body.elementor-editor-preview .rf-reveal {
  opacity: 1 !important;
  transform: none !important;
}


/* ==========================================================================
   ELEMENTOR BRIDGE — EXTENSION
   --------------------------------------------------------------------------
   Widget-level style overrides were stripped from the Elementor data, so every
   native widget now falls back to its own plugin default. Those defaults are
   built for a light site: Elementor resolves text to the kit's
   --e-global-color-primary (#0A0A09) and Xpro ships hard-coded slate/pale-blue.
   On this dark build that renders as invisible or near-invisible text.

   These rules push the Refinery tokens down onto the inner elements Elementor
   and Xpro actually paint, at a specificity that clears the generated
   post-<id>.css files (which load BEFORE this stylesheet).
   ========================================================================== */

/* --- Headings ------------------------------------------------------------
   post-30.css emits `.elementor-widget-heading .elementor-heading-title`
   with color:var(--e-global-color-primary) — near-black on a near-black page.
   The tag-qualified selectors below also beat Astra's h1..h6 sizing, which is
   what kept the hero off the display scale.
   `:not(.rf-eyebrow)` protects the eyebrow rules defined further up. */
.elementor-widget-heading:not(.rf-eyebrow) .elementor-heading-title {
  font-family: var(--rf-font-display);
  font-weight: 300;
  color: var(--rf-fg-strong);
  letter-spacing: -0.012em;
  margin: 0;
}
.elementor-widget-heading:not(.rf-eyebrow):not(.rf-display):not(.rf-h1):not(.rf-h2):not(.rf-h3) h1.elementor-heading-title { font-size: var(--rf-fs-h1); line-height: 1.02; }
.elementor-widget-heading:not(.rf-eyebrow):not(.rf-display):not(.rf-h1):not(.rf-h2):not(.rf-h3) h2.elementor-heading-title { font-size: var(--rf-fs-h2); line-height: 1.02; }
.elementor-widget-heading:not(.rf-eyebrow):not(.rf-display):not(.rf-h1):not(.rf-h2):not(.rf-h3) h3.elementor-heading-title,
.elementor-widget-heading:not(.rf-eyebrow) h4.elementor-heading-title,
.elementor-widget-heading:not(.rf-eyebrow) h5.elementor-heading-title,
.elementor-widget-heading:not(.rf-eyebrow) h6.elementor-heading-title { font-size: var(--rf-fs-h3); line-height: 1.16; }

/* Opt-in scale overrides — add the class in Advanced -> CSS Classes. */
.elementor-widget-heading.rf-display .elementor-heading-title { font-size: var(--rf-fs-hero); line-height: 0.98; }
.elementor-widget-heading.rf-h1 .elementor-heading-title { font-size: var(--rf-fs-h1); line-height: 1.02; }
.elementor-widget-heading.rf-h2 .elementor-heading-title { font-size: var(--rf-fs-h2); line-height: 1.02; }
.elementor-widget-heading.rf-h3 .elementor-heading-title { font-size: var(--rf-fs-h3); line-height: 1.16; }
.elementor-widget-heading.rf-gold .elementor-heading-title { color: var(--rf-accent); }

/* --- Divider used as the gold diamond ------------------------------------
   `.rf-diamond` lands on the widget wrapper, which Elementor stretches to the
   full container width. An 8px-tall, 1280px-wide box rotated 45deg is the
   giant diagonal line. Neutralise the wrapper and draw the diamond on the
   separator Elementor already renders inside it. */
.elementor-widget-divider.rf-diamond {
  width: 100%;
  height: auto;
  background: none;
  box-shadow: none;
  transform: none;
  margin: 1.5rem 0;
}
.elementor-widget-divider.rf-diamond .elementor-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.elementor-widget-divider.rf-diamond .elementor-divider-separator {
  display: block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  min-width: 0;
  max-width: 8px;
  border: 0;
  background: var(--rf-gold-grad);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(201,162,39,.6);
}

/* --- Counter widget = the rf-stat block ----------------------------------
   Elementor ships no colour for the counter number, so it inherited a dark
   value on a dark ground. `.elementor-counter` stays column-reverse: the
   number sits above its label. */
.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--rf-font-display);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 300;
  line-height: 1;
  color: var(--rf-fg-strong);
  justify-content: center;
}
.elementor-widget-counter .elementor-counter-number,
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix { color: inherit; flex-grow: 0; }
.elementor-widget-counter .elementor-counter-title {
  font-family: var(--rf-font-body);
  font-size: .58rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  color: var(--rf-fg-faint);
  line-height: 1.6;
  margin-top: .6rem;
}

/* --- Price list = the service menu ---------------------------------------
   Name in ink, dotted leader, price in gold — per the design contract. */
.elementor-widget-price-list .elementor-price-list-title {
  font-family: var(--rf-font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 300;
  color: var(--rf-fg-strong);
  letter-spacing: -0.005em;
  margin: 0;
  transition: color .4s var(--rf-ease);
}
.elementor-widget-price-list .elementor-price-list-price {
  font-family: var(--rf-font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 400;
  color: var(--rf-accent);
}
.elementor-widget-price-list .elementor-price-list-description {
  font-family: var(--rf-font-body);
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--rf-fg-muted);
  margin: .35rem 0 0;
}
.elementor-widget-price-list .elementor-price-list-item:hover .elementor-price-list-title { color: var(--rf-accent); }

/* --- Xpro widgets --------------------------------------------------------
   The news ticker ships a pale-blue field; the simple-heading and info-list
   resolve to the kit primary. All three read as broken on the dark ground. */
.elementor-widget-xpro-news-ticker { background-color: transparent; }
.xpro-simple-heading-wrapper .xpro-title-focus { color: var(--rf-fg); }
.xpro-infolist-title { font-family: var(--rf-font-body); color: var(--rf-fg-strong); }

/* --- Header CTA cluster --------------------------------------------------
   The Book Now label and the phone number both wrapped because the cluster is
   pinned to a fixed width. Let it size to its content and hold both on one
   line. Scoped to the header template (post 46). */
.elementor-widget-xpro-button .xpro-elementor-button,
.elementor-widget-xpro-button .xpro-elementor-button .xpro-button-text { white-space: nowrap; }
.elementor-46 .xpro-heading-title,
.elementor-46 .xpro-simple-heading-wrapper .xpro-title-focus { white-space: nowrap; }
.elementor-46 .e-con:has(> .elementor-widget-xpro-button) { --width: auto; width: auto; flex: 0 0 auto; }

@media (max-width: 1024px) {
  .elementor-46 .e-con:has(> .elementor-widget-xpro-button) { flex: 0 1 auto; }
}
/* --- Image treatment alias ------------------------------------------------
   The build tags image widgets `rf-frame`, but the bridge only ever defined
   `rf-figure`, so those images rendered with no Refinery treatment at all.
   Alias the two so the existing markup gets the intended offset gold frame. */
.elementor-widget-image.rf-frame .elementor-widget-container,
.elementor-widget-image.rf-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--rf-radius-lg);
  display: block;
}
.elementor-widget-image.rf-frame img {
  width: 100%;
  display: block;
  filter: grayscale(.35) contrast(1.03);
  transition: transform 1.1s var(--rf-ease), filter .7s var(--rf-ease);
}
.elementor-widget-image.rf-frame:hover img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.06);
}.elementor-widget-image.rf-frame .elementor-widget-container::after,
.elementor-widget-image.rf-frame::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(201,162,39,0);
  border-radius: 2px;
  transition: border-color .5s var(--rf-ease), inset .5s var(--rf-ease);
  pointer-events: none;
}.elementor-widget-image.rf-frame:hover .elementor-widget-container::after,
.elementor-widget-image.rf-frame:hover::after {
  border-color: rgba(244,229,176,.75);
  inset: 16px;
}
/* --- Icon-list checklist: suppress the static-markup bullet ---------------
   `.rf-checklist li::before` (written for the hand-coded build) and the
   Elementor bridge rule both fire on `.elementor-icon-list-item`, so every
   row drew two diamonds. Keep the bridge one. */
.elementor-widget-icon-list.rf-checklist .elementor-icon-list-item::before { content: none; }

/* --- Hero portrait -------------------------------------------------------
   Caps the barber portrait so the profile hero and its CTAs stay inside the
   first viewport instead of being pushed down by a full 4:5 image. */
.elementor-widget-image.rf-portrait .elementor-widget-container,
.elementor-widget-image.rf-portrait { display: flex; justify-content: flex-end; }
.elementor-widget-image.rf-portrait img {
  width: auto;
  max-width: 100%;
  max-height: 60vh;
  object-fit: cover;
}
@media (max-width: 1024px) {.elementor-widget-image.rf-portrait .elementor-widget-container,
.elementor-widget-image.rf-portrait { justify-content: flex-start; }
  .elementor-widget-image.rf-portrait img { max-height: 52vh; }
}
/* --- Social icons ---------------------------------------------------------
   Xpro paints each icon in its network's brand colour, which puts Facebook
   blue on a page whose design locks a single gold accent. Hairline circles
   that turn gold on hover instead. */
a.xpro-social-icon, a.xpro-social-icon[class*="elementor-social-icon"] {
  background-color: transparent;
  border: 1px solid var(--rf-line);
  color: var(--rf-fg-muted);
  transition: color .4s var(--rf-ease), border-color .4s var(--rf-ease), box-shadow .4s var(--rf-ease);
}
a.xpro-social-icon:hover, a.xpro-social-icon[class*="elementor-social-icon"]:hover {
  background-color: transparent;
  border-color: var(--rf-gold);
  color: var(--rf-accent);
  box-shadow: 0 0 18px rgba(201,162,39,.2);
}

/* ==========================================================================
   GENERATED ALIAS LAYER  -  do not hand-edit
   --------------------------------------------------------------------------
   Every declaration below is copied verbatim from the original Refinery
   stylesheet and re-pointed at the element Elementor actually renders, so a
   native Elementor widget renders identically to the hand-coded build.
   Emitted in source order, inside the same @media scope as the original.
   ========================================================================== */

.elementor-widget-heading.rf-display .elementor-heading-title,
.elementor-widget-heading.rf-h1 .elementor-heading-title,
.elementor-widget-heading.rf-h2 .elementor-heading-title,
.elementor-widget-heading.rf-h3 .elementor-heading-title {
  font-family: var(--rf-font-display);
  font-weight: 300;
  color: var(--rf-fg-strong);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
}
.elementor-widget-heading.rf-display .elementor-heading-title { font-size: var(--rf-fs-hero); line-height: 0.98; }
.elementor-widget-heading.rf-h1 .elementor-heading-title { font-size: var(--rf-fs-h1); }
.elementor-widget-heading.rf-h2 .elementor-heading-title { font-size: var(--rf-fs-h2); }
.elementor-widget-heading.rf-h3 .elementor-heading-title { font-size: var(--rf-fs-h3); line-height: 1.16; }.elementor-widget-heading.rf-eyebrow .elementor-widget-container,
.elementor-widget-heading.rf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--rf-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--rf-track-wide);
  text-transform: uppercase;
  color: var(--rf-accent);
}
.elementor-widget-heading.rf-eyebrow { margin: 0 0 1.6rem; }
.elementor-widget-heading.rf-eyebrow .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; }
.elementor-widget-heading.rf-eyebrow::before { content: none; }.elementor-widget-heading.rf-eyebrow .elementor-widget-container::before,
.elementor-widget-heading.rf-eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--rf-gold-grad);
  box-shadow: 0 0 10px rgba(201,162,39,.55);
}.elementor-widget-heading.rf-eyebrow.rf-eyebrow--center .elementor-widget-container::after,
.elementor-widget-heading.rf-eyebrow.rf-eyebrow--center::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--rf-gold-grad);
  box-shadow: 0 0 10px rgba(201,162,39,.55);
}
.elementor-widget-text-editor.rf-lede { font-family: var(--rf-font-display); font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 300; font-style: italic; line-height: 1.5; color: var(--rf-fg-strong); letter-spacing: -0.005em; }
.elementor-widget-text-editor.rf-muted { color: var(--rf-fg-muted); }
.elementor-widget-button.rf-el-btn .elementor-button,
.elementor-widget-button.rf-btn .elementor-button {
  --btn-py: 1.05rem;
  --btn-px: 2.4rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--rf-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--rf-track-mid);
  text-transform: uppercase;
  border-radius: var(--rf-radius-pill);
  border: 1px solid transparent;
  transition: color .4s var(--rf-ease), background-color .4s var(--rf-ease),
              border-color .4s var(--rf-ease), box-shadow .4s var(--rf-ease),
              transform .4s var(--rf-ease);
  white-space: nowrap;
  cursor: pointer;
}
.elementor-widget-button.rf-el-btn .elementor-button:focus-visible,
.elementor-widget-button.rf-btn .elementor-button:focus-visible {
  outline: 2px solid var(--rf-gold);
  outline-offset: 3px;
}
.elementor-widget-button.rf-el-btn--gold .elementor-button,
.elementor-widget-button.rf-btn--gold .elementor-button {
  background: var(--rf-gold-grad);
  background-size: 220% 220%;
  background-position: 0% 50%;
  color: #16150f;
  font-weight: 600;
  box-shadow: var(--rf-gold-glow);
  animation: rf-goldPulse 5s ease-in-out infinite;
}
.elementor-widget-button.rf-el-btn--gold .elementor-button:hover,
.elementor-widget-button.rf-btn--gold .elementor-button:hover {
  background-position: 100% 50%;
  box-shadow: var(--rf-gold-glow-lg);
  transform: translateY(-2px);
}
.elementor-widget-button.rf-el-btn--ghost .elementor-button,
.elementor-widget-button.rf-btn--ghost .elementor-button {
  background: transparent;
  color: var(--rf-fg-strong);
  border-color: var(--rf-line);
}
.elementor-widget-button.rf-el-btn--ghost .elementor-button:hover,
.elementor-widget-button.rf-btn--ghost .elementor-button:hover {
  border-color: var(--rf-gold);
  color: var(--rf-accent);
  box-shadow: 0 0 22px rgba(201,162,39,.16);
  transform: translateY(-2px);
}
.elementor-widget-button.rf-el-btn--outline .elementor-button,
.elementor-widget-button.rf-btn--outline-gold .elementor-button {
  background: transparent;
  color: var(--rf-accent);
  border-color: rgba(201,162,39,.5);
}
.elementor-widget-button.rf-el-btn--outline .elementor-button:hover,
.elementor-widget-button.rf-btn--outline-gold .elementor-button:hover {
  background: var(--rf-gold-grad);
  color: #16150f;
  box-shadow: var(--rf-gold-glow);
  transform: translateY(-2px);
}
.elementor-widget-button.rf-el-btn--ink .elementor-button,
.elementor-widget-button.rf-btn--ink .elementor-button {
  background: var(--rf-ink);
  color: #fff;
  font-weight: 500;
}
.elementor-widget-button.rf-el-btn--ink .elementor-button:hover,
.elementor-widget-button.rf-btn--ink .elementor-button:hover {
  background: var(--rf-charcoal);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.elementor-widget-button.rf-el-btn--sm .elementor-button,
.elementor-widget-button.rf-btn--sm .elementor-button {
  --btn-py: .78rem;
  --btn-px: 1.55rem;
  font-size: .66rem;
}
.elementor-widget-button.rf-el-btn--lg .elementor-button,
.elementor-widget-button.rf-btn--lg .elementor-button {
  --btn-py: 1.25rem;
  --btn-px: 2.9rem;
  font-size: .78rem;
}

@media (max-width: 700px) {
  .elementor-widget-button.rf-el-btn .elementor-button,
  .elementor-widget-button.rf-btn .elementor-button {
    --btn-px: 1.9rem;
  }
}
.elementor-widget-button.rf-el-btn--ghost .elementor-button,
.elementor-widget-button.rf-btn--ghost .elementor-button {
  border-color: rgba(255,255,255,.26);
}
.elementor-widget-button.rf-el-btn--ink .elementor-button,
.elementor-widget-button.rf-btn--ink .elementor-button {
  background: #ffffff;
  color: #0a0a09;
}
.elementor-widget-button.rf-el-btn--ink .elementor-button:hover,
.elementor-widget-button.rf-btn--ink .elementor-button:hover {
  background: var(--rf-gold-light);
  color: #16150f;
}

/* --- Text Editor inner <p> inherits the widget's type ------------------- */
.elementor-widget-text-editor.rf-lede .elementor-widget-container > p,
.elementor-widget-text-editor.rf-muted .elementor-widget-container > p,
.elementor-widget-text-editor.rf-hero__sub .elementor-widget-container > p,
.elementor-widget-text-editor.rf-service-note .elementor-widget-container > p,
.elementor-widget-text-editor.rf-lede > p,
.elementor-widget-text-editor.rf-muted > p,
.elementor-widget-text-editor.rf-hero__sub > p,
.elementor-widget-text-editor.rf-service-note > p {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0;
}

/* --- Arrow modifier: reproduces the .rf-btn__arrow disc + glyph ---------- */
.elementor-widget-button.rf-el-btn--arrow .elementor-button::after {
  content: "";
  flex: 0 0 25px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.14);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2 10L10 2M10 2H4M10 2V8' stroke='%2316150f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .4s var(--rf-ease);
}
.elementor-widget-button.rf-el-btn--arrow.rf-el-btn--ghost .elementor-button::after,
.elementor-widget-button.rf-el-btn--arrow.rf-el-btn--outline .elementor-button::after {
  background-color: rgba(201,162,39,.16);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2 10L10 2M10 2H4M10 2V8' stroke='%23e8c86a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.elementor-widget-button.rf-el-btn--arrow .elementor-button:hover::after { transform: translate(3px,-3px); }

/* the literal rf-btn class would otherwise also paint the widget wrapper */
.elementor-widget-button[class*="rf-btn"] { background: none; border: 0; padding: 0; box-shadow: none; animation: none; }


/* --- Elementor 4.x drops .elementor-widget-container, so the eyebrow rule now
       lands on the widget itself, which Elementor stretches to full width. --- */
.elementor-widget-heading.rf-eyebrow, .elementor-widget.rf-eyebrow { width: auto; max-width: 100%; }


/* ==========================================================================
   CONTAINER LAYOUT RECONCILIATION
   --------------------------------------------------------------------------
   Elementor containers ship `flex-direction: column` by default. The original
   layout classes only declare `display`, so Elementor's direction survived and
   turned rows into stacks. Re-assert the original intent where it is implied.
   ========================================================================== */
.e-con.rf-btn-row { flex-direction: row; }
.e-con.rf-btn-row--center { justify-content: center; }
.e-con.rf-hero__inner { flex-direction: column; }
.e-con.rf-grid, .e-con.rf-grid--2, .e-con.rf-grid--3, .e-con.rf-grid--split,
.e-con.rf-services, .e-con.rf-barbers, .e-con.rf-stats, .e-con.rf-works,
.e-con.rf-gallery, .e-con.rf-quotes { display: grid; }

/* ==========================================================================
   WRAPPER LAYOUT CLASSES
   Elementor scopes `.e-con > .elementor-widget { max-width: 100% }` and resets
   widget margins, both of which outrank a bare original class sitting on the
   widget wrapper. Re-assert the original values at matching specificity.
   ========================================================================== */
.e-con > .elementor-widget.rf-hero__title { max-width: 15ch; margin-bottom: 1.6rem; }
.e-con > .elementor-widget.rf-hero__sub { max-width: 44ch; margin: 0 0 2.6rem; }
.e-con > .elementor-widget.rf-eyebrow { width: auto; max-width: 100%; margin: 0 0 1.6rem; }
.e-con > .elementor-widget.rf-lede { margin: 1.9rem 0 1.6rem; }
.e-con > .elementor-widget.rf-stats { margin-top: 2.75rem; }
/* Marquee/topbar tracks must keep their intrinsic width for a seamless loop */
.e-con > .elementor-widget.rf-marquee__track,
.e-con > .elementor-widget.rf-topbar__track { width: max-content; max-width: none; }