/* =============================================================
   Belle Élégante Beauty Studio — main.css
   Design tokens + all shared component styles
   ============================================================= */

/* ---------- WEBFONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,400;1,300;1,400;1,500&family=Poppins:wght@300;400;500&display=swap');

@font-face {
  font-family: 'TAN Angleton';
  src: url('../fonts/TAN_-_Angleton_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0021, U+0023-0026, U+0028-007E;
}

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Olive / forest green */
  --be-olive-900: #2a331f;
  --be-olive-800: #343f26;
  --be-olive-700: #3e4c30;
  --be-olive-600: #4a5939;
  --be-olive-500: #5a6a48;
  --be-olive-400: #7d8a6b;
  --be-olive-300: #a9b398;
  --be-olive-200: #ccd2be;
  --be-olive-100: #e5e8dc;
  --be-olive-50:  #f2f4ec;

  /* Champagne gold */
  --be-gold-900: #7a6a3d;
  --be-gold-800: #9c8a58;
  --be-gold-700: #b8a374;
  --be-gold-600: #c9b687;
  --be-gold-500: #d9c99a;
  --be-gold-400: #e3d5ad;
  --be-gold-300: #ecdfc0;
  --be-gold-200: #f2e9d3;
  --be-gold-100: #f8f1e2;

  /* Rose gold */
  --be-rose-700: #a3765f;
  --be-rose-600: #c1937c;
  --be-rose-500: #d9a68b;
  --be-rose-400: #e3b7a0;
  --be-rose-300: #eccab6;
  --be-rose-200: #f3dccd;
  --be-rose-100: #f9ebe1;

  /* Blush */
  --be-blush-500: #d9b8a9;
  --be-blush-400: #e5cbbe;
  --be-blush-300: #edd7ca;
  --be-blush-200: #f2e1d8;
  --be-blush-100: #f8edde;
  --be-blush-50:  #fbf6ef;

  /* Ivory */
  --be-ivory-500: #e8e1d1;
  --be-ivory-400: #efe8d9;
  --be-ivory-300: #f3eee4;
  --be-ivory-200: #f7f2e9;
  --be-ivory-100: #faf6ee;
  --be-ivory-50:  #fdfbf6;

  /* Warm ink */
  --be-ink-900: #231f18;
  --be-ink-800: #3a3427;
  --be-ink-700: #544c3b;
  --be-ink-600: #6f6652;
  --be-ink-500: #8c836c;
  --be-ink-400: #ada590;
  --be-ink-300: #cac4b2;
  --be-ink-200: #e3ddcc;
  --be-ink-100: #efebdd;

  --be-white: #ffffff;
  --be-black: #0d0b07;

  /* Semantic surfaces */
  --be-bg:          var(--be-ivory-300);
  --be-bg-raised:   var(--be-ivory-200);
  --be-bg-sunken:   var(--be-ivory-400);
  --be-bg-inverse:  var(--be-olive-700);
  --be-bg-accent:   var(--be-blush-300);

  /* Foreground */
  --be-fg:          var(--be-olive-800);
  --be-fg-muted:    var(--be-olive-600);
  --be-fg-subtle:   var(--be-ink-600);
  --be-fg-faint:    var(--be-ink-400);
  --be-fg-inverse:  var(--be-ivory-200);
  --be-fg-brand:    var(--be-gold-600);

  /* Borders */
  --be-border:        rgba(62, 76, 48, 0.14);
  --be-border-strong: rgba(62, 76, 48, 0.32);
  --be-border-gold:   rgba(201, 182, 135, 0.55);
  --be-border-inverse: rgba(248, 241, 226, 0.18);
  --be-hairline:      rgba(62, 76, 48, 0.08);

  /* Actions */
  --be-action:         var(--be-olive-700);
  --be-action-hover:   var(--be-olive-800);
  --be-action-press:   var(--be-olive-900);
  --be-action-fg:      var(--be-ivory-200);
  --be-action-gold:    var(--be-gold-600);

  /* Typography */
  --be-font-script:       'Pinyon Script', 'Allura', 'Apple Chancery', cursive;
  --be-font-serif:        'TAN Angleton', 'Cormorant Garamond', 'Didot', 'Times New Roman', serif;
  --be-font-serif-italic: 'Cormorant Garamond', 'Didot', serif;
  --be-font-sans:         'Poppins', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;

  /* Motion */
  --be-ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --be-ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --be-ease-io:    cubic-bezier(0.65, 0, 0.35, 1);
  --be-dur-quick:  160ms;
  --be-dur-base:   240ms;
  --be-dur-slow:   420ms;
  --be-dur-slower: 700ms;

  /* Shadows */
  --be-shadow-md:  0 10px 24px -12px rgba(42,51,31,0.18), 0 2px 4px rgba(42,51,31,0.05);
  --be-shadow-lg:  0 24px 48px -20px rgba(42,51,31,0.25), 0 4px 10px rgba(42,51,31,0.06);
  --be-shadow-xl:  0 40px 80px -30px rgba(42,51,31,0.35), 0 8px 16px rgba(42,51,31,0.08);
}

/* ---------- LIGATURE FIX (trial font glyph fix) ---------- */
html, body, button, input, textarea, select {
  font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0, "calt" 0;
}

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

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

html { overflow-x: hidden; }
body {
  background: var(--be-ivory-100);
  color: var(--be-fg);
  font-family: var(--be-font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { transition: opacity var(--be-dur-base) var(--be-ease-out); }

/* Grain texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(62,76,48,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.6;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ---------- LAYOUT ---------- */
.be-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 720px)  { .be-container { padding: 0 32px; } }
@media (min-width: 1080px) { .be-container { padding: 0 48px; } }

.be-section { padding: 64px 0; }
@media (min-width: 720px)  { .be-section { padding: 96px 0; } }
@media (min-width: 1080px) { .be-section { padding: 128px 0; } }

/* ---------- REVEAL ANIMATIONS ---------- */
@media (prefers-reduced-motion: no-preference) {
  .be-reveal-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--be-ease-out), transform 700ms var(--be-ease-out);
  }
  .be-reveal-fade.is-visible { opacity: 1; transform: translateY(0); }
}

/* ---------- TYPOGRAPHY UTILITIES ---------- */
.be-display {
  font-family: var(--be-font-serif);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--be-fg);
  margin: 0;
  font-size: clamp(44px, 10vw, 104px);
}
.be-display-sm { font-size: clamp(36px, 7vw, 80px); }
.be-h1 { font-family: var(--be-font-serif); font-weight: 400; font-size: clamp(40px, 7.2vw, 76px); line-height: 1.02; }
.be-h2 { font-family: var(--be-font-serif); font-weight: 400; font-size: clamp(32px, 5.4vw, 56px); line-height: 1.08; }
.be-h3 { font-family: var(--be-font-serif); font-weight: 400; font-size: clamp(24px, 4.2vw, 36px); line-height: 1.15; }
.be-eyebrow {
  font-family: var(--be-font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--be-gold-800);
}
.be-lede {
  font-family: var(--be-font-serif-italic);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--be-fg-muted);
}

/* ---------- DIVIDER ---------- */
.be-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--be-gold-700);
}
.be-divider::before,
.be-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(201, 182, 135, 0.5);
}

/* ---------- SECTION KICKER ---------- */
.be-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.be-kicker::before,
.be-kicker::after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: var(--be-gold-600);
}
.be-kicker span {
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--be-gold-800);
}

/* ---------- BUTTONS ---------- */
.be-btn-primary {
  display: inline-block;
  background: var(--be-olive-700);
  color: var(--be-ivory-200);
  padding: 18px 40px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--be-font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: none;
  transition: background var(--be-dur-base) var(--be-ease-out);
}
.be-btn-primary:hover { background: var(--be-olive-800); opacity: 1; }

.be-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--be-olive-800);
  padding: 18px 0;
  text-decoration: none;
  font-family: var(--be-font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--be-gold-600);
}
.be-btn-ghost:hover { opacity: 0.7; }

/* ---------- IMAGE RATIOS ---------- */
.be-img-4x5 { aspect-ratio: 4/5; object-fit: cover; width: 100%; height: 100%; }
.be-img-3x4 { aspect-ratio: 3/4; object-fit: cover; width: 100%; height: 100%; }
.be-img-1x1 { aspect-ratio: 1/1; object-fit: cover; width: 100%; height: 100%; }

/* ---------- GOLD FRAME ---------- */
.be-gold-frame {
  position: relative;
}
.be-gold-frame::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(201, 182, 135, 0.6);
  pointer-events: none;
}

/* ---------- PRICE ROW ---------- */
.be-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--be-hairline);
}
.be-price-row .name {
  font-family: var(--be-font-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--be-fg);
  flex: 1;
  letter-spacing: -0.005em;
}
.be-price-row .note {
  display: block;
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--be-fg-subtle);
  margin-top: 4px;
  font-weight: 300;
}
.be-price-row .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(62,76,48,0.25);
  transform: translateY(-5px);
  min-width: 40px;
}
.be-price-row .price {
  font-family: var(--be-font-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--be-gold-800);
  font-variant-numeric: oldstyle-nums;
}
@media (min-width: 720px) {
  .be-price-row .name { font-size: 22px; }
  .be-price-row .price { font-size: 22px; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.be-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 238, 228, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: background 320ms var(--be-ease-out), border-color 320ms var(--be-ease-out);
}
.be-nav.scrolled {
  background: rgba(243, 238, 228, 0.92);
  border-bottom-color: rgba(62, 76, 48, 0.12);
}
.be-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 20px;
}
@media (min-width: 720px) { .be-nav-inner { padding: 0 32px; } }
@media (min-width: 1080px) { .be-nav-inner { padding: 0 48px; } }

.be-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.be-nav-logo img {
  height: 32px;
  width: auto;
  filter: brightness(0.55) sepia(0.4) saturate(1.4) hue-rotate(10deg);
}
.be-nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.be-nav-logo-text .script {
  font-family: var(--be-font-script);
  font-size: 22px;
  color: var(--be-olive-800);
  line-height: 0.9;
}
.be-nav-logo-text .tagline {
  font-family: var(--be-font-serif);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--be-gold-700);
}

/* Desktop links */
.be-nav-links {
  display: none;
  align-items: center;
  gap: 36px;
}
.be-nav-links a {
  font-family: var(--be-font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--be-olive-600);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color var(--be-dur-base), border-color var(--be-dur-base);
}
.be-nav-links a:hover { color: var(--be-olive-900); opacity: 1; }
.be-nav-links a.active {
  color: var(--be-olive-900);
  border-bottom-color: var(--be-gold-600);
}

/* Desktop book button */
.be-nav-book {
  display: none;
}

/* Hamburger */
.be-nav-hamburger {
  background: transparent;
  border: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.be-nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--be-olive-800);
  transition: transform var(--be-dur-base), opacity var(--be-dur-base);
}

@media (min-width: 880px) {
  .be-nav-links { display: flex; }
  .be-nav-book { display: inline-block; }
  .be-nav-hamburger { display: none; }
}

/* Mobile drawer */
.be-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
  pointer-events: none;
  transition: background 320ms var(--be-ease-out);
}
.be-nav-overlay.open {
  background: rgba(42, 51, 31, 0.4);
  pointer-events: auto;
}
.be-nav-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--be-ivory-200);
  transform: translateX(100%);
  transition: transform 420ms var(--be-ease-out);
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: -20px 0 60px -20px rgba(42, 51, 31, 0.3);
}
.be-nav-overlay.open .be-nav-drawer { transform: translateX(0); }

.be-nav-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.be-nav-drawer-header span {
  font-family: var(--be-font-serif);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--be-gold-700);
}
.be-nav-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--be-olive-800);
  padding: 4px;
  line-height: 1;
}

.be-nav-drawer-links {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.be-nav-drawer-links a {
  font-family: var(--be-font-serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--be-olive-800);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(62, 76, 48, 0.12);
  letter-spacing: -0.01em;
  transition: color var(--be-dur-base);
}
.be-nav-drawer-links a:last-child { border-bottom: 0; }
.be-nav-drawer-links a.active { color: var(--be-gold-800); }
.be-nav-drawer-links a:hover { opacity: 1; color: var(--be-gold-800); }

.be-nav-drawer-foot {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.be-nav-drawer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
}
.be-nav-drawer-meta .city {
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--be-olive-600);
}
.be-nav-drawer-meta a {
  font-family: var(--be-font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--be-gold-700);
  text-decoration: none;
}

/* ============================================================
   HERO (index only)
   ============================================================ */
.be-hero {
  position: relative;
  background: var(--be-ivory-100);
  padding-top: 32px;
  padding-bottom: 64px;
  overflow: hidden;
}
.be-hero-watermark {
  position: absolute;
  top: 64px;
  left: -10vw; right: -10vw;
  text-align: center;
  font-family: var(--be-font-script);
  font-size: clamp(180px, 36vw, 520px);
  line-height: 1;
  color: rgba(201, 182, 135, 0.08);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.be-hero-container {
  position: relative;
  z-index: 1;
}
.be-hero-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 880px) {
  .be-hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
  }
}
@media (min-width: 1080px) { .be-hero-grid { gap: 96px; } }

/* Hero copy */
.be-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.be-hero-kicker::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--be-gold-600);
}
.be-hero-kicker span {
  font-family: var(--be-font-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--be-gold-800);
}

/* Hero image column */
.be-hero-img-wrap {
  position: relative;
  aspect-ratio: 4/5;
}
.be-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: var(--be-shadow-xl);
}
.be-hero-img-frame {
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(201, 182, 135, 0.6);
  pointer-events: none;
}
.be-hero-badge {
  position: absolute;
  bottom: -24px;
  left: -24px;
  width: 104px;
  height: 104px;
  background: var(--be-olive-700);
  display: grid;
  place-items: center;
  box-shadow: var(--be-shadow-lg);
}
.be-hero-badge img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.be-hero-quote-card {
  display: none;
  position: absolute;
  top: 24px;
  right: -16px;
  background: var(--be-ivory-200);
  padding: 16px 20px;
  max-width: 220px;
  box-shadow: var(--be-shadow-lg);
}
@media (min-width: 880px) { .be-hero-quote-card { display: block; } }
.be-hero-quote-card p {
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--be-olive-800);
  margin: 0;
}
.be-hero-quote-card span {
  display: block;
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--be-gold-700);
  margin-top: 10px;
}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.be-page-header {
  background: var(--be-ivory-200);
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--be-border-gold);
  position: relative;
  overflow: hidden;
}
.be-page-header::before {
  content: attr(data-watermark);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  font-family: var(--be-font-script);
  font-size: clamp(100px, 20vw, 260px);
  color: rgba(201, 182, 135, 0.07);
  pointer-events: none;
  white-space: nowrap;
}
.be-page-header .be-container { position: relative; z-index: 1; }

/* ============================================================
   SIGNATURE CARDS (index - 2 featured services)
   ============================================================ */
.be-sig-grid {
  display: grid;
  gap: 32px;
  margin-top: 64px;
}
@media (min-width: 720px) {
  .be-sig-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.be-sig-card {
  background: var(--be-ivory-200);
  transition: transform 420ms var(--be-ease-out), box-shadow 420ms var(--be-ease-out);
}
.be-sig-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--be-shadow-xl);
}
.be-sig-card-img {
  position: relative;
  overflow: hidden;
}
.be-sig-card-img img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
.be-sig-card-cat {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--be-ivory-200);
  padding: 6px 12px;
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--be-olive-700);
}
.be-sig-card-body { padding: 32px 28px; }
.be-sig-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.be-sig-card-top h3 {
  font-family: var(--be-font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  color: var(--be-olive-800);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.be-sig-card-price {
  font-family: var(--be-font-serif);
  font-size: 20px;
  color: var(--be-gold-800);
  white-space: nowrap;
}
.be-sig-card-body p {
  font-family: var(--be-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--be-olive-600);
  margin: 0 0 24px;
  font-weight: 300;
}

/* ============================================================
   EXPECT SECTION (dark olive)
   ============================================================ */
.be-expect {
  background: var(--be-olive-700);
  color: var(--be-ivory-200);
}
.be-expect-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 880px) {
  .be-expect-grid { grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: start; }
}
.be-expect-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(248, 241, 226, 0.18);
}
.be-expect-num {
  font-family: var(--be-font-serif);
  font-weight: 400;
  font-size: 14px;
  color: var(--be-gold-500);
  letter-spacing: 0.2em;
  padding-top: 4px;
  align-self: start;
}
.be-expect-step h3 {
  font-family: var(--be-font-serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--be-ivory-200);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.be-expect-step p {
  font-family: var(--be-font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--be-ivory-400);
  margin: 0;
  font-weight: 300;
  max-width: 440px;
}

/* ============================================================
   SERVICES RAIL (4 smaller services)
   ============================================================ */
.be-rail-grid {
  display: grid;
  gap: 24px;
  margin-top: 0;
}
@media (min-width: 640px)  { .be-rail-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .be-rail-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

.be-rail-card {
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.be-rail-card-img {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.be-rail-card-img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 700ms var(--be-ease-out);
}
@media (hover: hover) {
  .be-rail-card:hover .be-rail-card-img img { transform: scale(1.04); }
}
.be-rail-card-cat {
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--be-gold-800);
  margin-bottom: 8px;
}
.be-rail-card h3 {
  font-family: var(--be-font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--be-olive-800);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.be-rail-card p {
  font-family: var(--be-font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--be-olive-600);
  margin: 0;
  font-weight: 300;
}

/* Mobile: JS-driven rail slider */
@media (max-width: 639px) {
  .be-rail-grid {
    display: block;
    overflow: hidden;
    margin-left: -20px;
    margin-right: -20px;
    padding-bottom: 16px;
    touch-action: pan-y;
  }
  .be-rail-track {
    display: flex;
    gap: 16px;
    padding: 0 20px;
    will-change: transform;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .be-rail-track.dragging { transition: none; }
  .be-rail-card {
    flex: 0 0 80vw;
    touch-action: pan-y;
  }
}

/* ============================================================
   ABOUT / FOUNDER
   ============================================================ */
.be-about-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 880px) {
  .be-about-grid { grid-template-columns: 1fr 1.15fr; gap: 96px; align-items: center; }
}
.be-about-img-wrap {
  position: relative;
  aspect-ratio: 4/5;
}
.be-about-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}
.be-about-img-frame {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(201, 182, 135, 0.5);
  pointer-events: none;
}
.be-about-caption {
  position: absolute;
  bottom: -32px;
  right: -16px;
  background: var(--be-olive-700);
  color: var(--be-gold-500);
  padding: 20px 24px;
  max-width: 220px;
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 879px) { .be-about-caption { right: 0; } }

/* ============================================================
   GALLERY
   ============================================================ */
.be-gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 48px;
}
.be-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 720px)  { .be-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1080px) { .be-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.be-gallery-item {
  overflow: hidden;
}
.be-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--be-ease-out);
}
.be-gallery-item:hover img { transform: scale(1.06); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.be-testi {
  background: var(--be-olive-700);
  color: var(--be-ivory-200);
  overflow: hidden;
  position: relative;
}
.be-testi-watermark {
  position: absolute;
  top: 40px; right: -40px; bottom: 40px; left: -40px;
  text-align: center;
  font-family: var(--be-font-script);
  font-size: clamp(200px, 40vw, 600px);
  line-height: 1;
  color: rgba(201, 182, 135, 0.04);
  pointer-events: none;
}
.be-testi .be-container { position: relative; z-index: 1; }
.be-testi .be-h2 { color: var(--be-ivory-100); }
.be-testi .be-h2 em { color: var(--be-gold-400); }

/* Review slider */
.be-review-slider {
  overflow: hidden;
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}
.be-review-track {
  display: flex;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.be-review-slide {
  flex-shrink: 0;
  box-sizing: border-box;
}

.be-review-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 182, 135, 0.2);
  padding: 56px 52px 48px;
  text-align: center;
}
@media (max-width: 600px) {
  .be-review-card { padding: 40px 28px 36px; }
}

.be-review-stars {
  color: var(--be-gold-500);
  font-size: 11px;
  letter-spacing: 0.3em;
  margin-bottom: 28px;
  display: block;
}

.be-review-card blockquote {
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.65;
  color: var(--be-ivory-200);
  margin: 0 0 32px;
  font-weight: 300;
}

.be-review-author {
  font-family: var(--be-font-sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--be-gold-500);
}

/* Slider controls */
.be-review-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
.be-review-btn {
  background: transparent;
  border: 1px solid rgba(201, 182, 135, 0.35);
  color: var(--be-gold-400);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background var(--be-dur-base) var(--be-ease-out), border-color var(--be-dur-base) var(--be-ease-out);
}
.be-review-btn:hover {
  background: rgba(201, 182, 135, 0.1);
  border-color: rgba(201, 182, 135, 0.65);
  opacity: 1;
}
.be-review-counter {
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201, 182, 135, 0.45);
  min-width: 52px;
  text-align: center;
}

/* ============================================================
   BOOKING MODAL
   ============================================================ */
.be-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(42, 51, 31, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--be-ease-out);
}
.be-booking-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.be-booking-modal-inner {
  position: relative;
  width: min(820px, 94vw);
  height: min(640px, 88vh);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.be-booking-iframe-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
}
.be-booking-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.be-booking-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: transparent;
  border: none;
  color: var(--be-ivory-300);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-family: var(--be-font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  transition: color 240ms;
}
.be-booking-modal-close:hover { color: var(--be-gold-400); opacity: 1; }

/* ============================================================
   CONTACT
   ============================================================ */
.be-contact-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 880px) {
  .be-contact-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
}
.be-contact-info {
  background: var(--be-ivory-200);
  padding: 40px 32px;
  border: 1px solid var(--be-border-gold);
}
.be-contact-block {
  padding: 16px 0;
  border-bottom: 1px solid rgba(62, 76, 48, 0.12);
}
.be-contact-block:last-child { border-bottom: none; }
.be-contact-block .label {
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--be-gold-800);
  margin-bottom: 10px;
}
.be-contact-block .value {
  font-family: var(--be-font-serif);
  font-size: 18px;
  color: var(--be-olive-800);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.be-footer {
  background: var(--be-olive-800);
  color: var(--be-ivory-200);
  padding: 80px 0 32px;
}
.be-footer-grid {
  display: grid;
  gap: 48px;
  margin-bottom: 64px;
}
@media (min-width: 720px) {
  .be-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}
.be-footer-logo { margin-bottom: 20px; }
.be-footer-logo img { height: 90px; width: auto; }
.be-footer-brand-desc {
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--be-ivory-400);
  line-height: 1.5;
  font-weight: 300;
  max-width: 280px;
}
.be-footer-col-head {
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--be-gold-500);
  margin-bottom: 20px;
}
.be-footer-col p, .be-footer-col a {
  font-family: var(--be-font-serif);
  font-size: 15px;
  color: var(--be-ivory-300);
  line-height: 1.9;
  font-weight: 400;
  text-decoration: none;
  display: block;
}
.be-footer-col a:hover { color: var(--be-gold-400); opacity: 1; }
.be-footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(248, 241, 226, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.be-footer-copy {
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248, 241, 226, 0.5);
}
.be-footer-locale {
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--be-gold-500);
}

/* ============================================================
   SERVICES PAGE — full service cards
   ============================================================ */
.be-services-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 720px) {
  .be-services-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (min-width: 1080px) {
  .be-services-grid { grid-template-columns: repeat(3, 1fr); }
}
.be-service-card {
  background: var(--be-ivory-200);
  transition: transform 420ms var(--be-ease-out), box-shadow 420ms var(--be-ease-out);
}
.be-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--be-shadow-xl);
}
.be-service-card-img {
  overflow: hidden;
}
.be-service-card-img img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform 700ms var(--be-ease-out);
}
.be-service-card:hover .be-service-card-img img { transform: scale(1.04); }
.be-service-card-body { padding: 28px; }
.be-service-card-cat {
  font-family: var(--be-font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--be-gold-800);
  margin-bottom: 10px;
}
.be-service-card h3 {
  font-family: var(--be-font-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  color: var(--be-olive-800);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.be-service-card-price {
  font-family: var(--be-font-serif-italic);
  font-style: italic;
  font-size: 18px;
  color: var(--be-gold-800);
  margin-bottom: 14px;
}
.be-service-card p {
  font-family: var(--be-font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--be-olive-600);
  margin: 0 0 20px;
  font-weight: 300;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}