/* Start custom CSS *//* ============================================
   MKV REBUILD 2026 — Page-scoped scaffold CSS
   This file lives here temporarily during the
   rebuild. When Site Settings is updated to
   match, delete this entire block.
   ============================================ */

body.elementor-page-7863 {
  /* Brand colours */
  --warm: #FAF7F2;
  --cream: #F2EDE4;
  --sand: #E8DFD0;
  --gold: #C9A96E;
  --gold-light: #E8D5B0;
  --charcoal: #2A2825;
  --mid: #6B6660;
  --teal: #3AAFA9;
  --teal-dark: #2A8A85;
  --teal-light: #E6F6F5;
  --border: rgba(42,40,37,0.1);

  /* Page background */
  background: var(--warm);
}

/* ============================================
   TYPOGRAPHY
   Body = Jost, Headings = Fraunces
   ============================================ */

body.elementor-page-7863,
body.elementor-page-7863 p,
body.elementor-page-7863 .elementor-widget-text-editor,
body.elementor-page-7863 .elementor-widget-heading {
  font-family: 'Jost', sans-serif;
  color: var(--charcoal);
}

body.elementor-page-7863 h1,
body.elementor-page-7863 h2,
body.elementor-page-7863 h3,
body.elementor-page-7863 h4,
body.elementor-page-7863 h5,
body.elementor-page-7863 h6,
body.elementor-page-7863 .elementor-heading-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  line-height: 1.15;
  color: var(--charcoal);
}

body.elementor-page-7863 h1, body.elementor-page-7863 .elementor-heading-title.elementor-size-xxl {
  font-size: clamp(38px, 4.5vw, 60px);
}

body.elementor-page-7863 h2, body.elementor-page-7863 .elementor-heading-title.elementor-size-xl {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.2;
}

body.elementor-page-7863 h3, body.elementor-page-7863 .elementor-heading-title.elementor-size-large {
  font-size: 32px;
  line-height: 1.2;
}

body.elementor-page-7863 p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--mid);
}

/* Italic gold accent — apply by adding "italic-gold" class to a heading */
body.elementor-page-7863 .italic-gold em,
body.elementor-page-7863 em.italic-gold {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}

/* ============================================
   UTILITY CLASSES
   Add these as CSS classes on widgets via the
   Advanced tab → CSS Classes field
   ============================================ */

/* Eyebrow tag (small uppercase label above section titles) */
body.elementor-page-7863 .eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal) !important;
  font-weight: 500;
}

/* Section background utility classes */
body.elementor-page-7863.bg-warm { background: var(--warm); }
body.elementor-page-7863 .bg-cream { background: var(--cream); }
body.elementor-page-7863 .bg-charcoal { background: var(--charcoal); }
body.elementor-page-7863 .bg-charcoal h1,
body.elementor-page-7863 .bg-charcoal h2,
body.elementor-page-7863 .bg-charcoal h3,
body.elementor-page-7863 .bg-charcoal p { color: white; }
body.elementor-page-7863 .bg-teal { background: var(--teal); }
body.elementor-page-7863 .bg-teal h1,
body.elementor-page-7863 .bg-teal h2,
body.elementor-page-7863 .bg-teal p { color: white; }

/* ============================================
   BUTTONS — pill style
   ============================================ */

body.elementor-page-7863 .elementor-button {
  border-radius: 100px !important;
  padding: 14px 28px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: all 0.2s ease !important;
}

body.elementor-page-7863 .elementor-button:hover {
  transform: translateY(-1px);
}
/* Hero photo collage — force all photos to fill columns evenly */
body.elementor-page-7863 .hero-photo-large img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 8px;
}
body.elementor-page-7863 .hero-photo-small img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 8px;
}/* End custom CSS */