.elementor-205 .elementor-element.elementor-element-006b670{--display:flex;}/* Start custom CSS for html, class: .elementor-element-d7be0a4 */<!--
  ══════════════════════════════════════════════════════════════
  RAISE YOUR FLOOR — Global Styles
  ══════════════════════════════════════════════════════════════
  INSTRUCTIONS:
  1. In Elementor, add a new Section at the very top of the page
     (above the Hero section)
  2. Add a single HTML widget inside it
  3. Paste this entire file into the HTML widget content
  4. Set the section top/bottom padding to 0px
  5. This block renders nothing visible — it only loads fonts
     and defines shared styles used by every section below
  ══════════════════════════════════════════════════════════════
-->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Montserrat:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">

<style>
/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --ryf-black:  #0f0f0f;
  --ryf-gold:   #c9a464;
  --ryf-cream:  #e7ddcb;
  --ryf-c60:    rgba(231, 221, 203, 0.60);
  --ryf-c40:    rgba(231, 221, 203, 0.40);
  --ryf-c20:    rgba(231, 221, 203, 0.20);
  --ryf-g10:    rgba(201, 164, 100, 0.10);
  --ryf-g20:    rgba(201, 164, 100, 0.20);
  --ryf-g40:    rgba(201, 164, 100, 0.40);
  --ryf-card:   #191919;
  --ryf-card2:  #1f1f1f;
  --f-serif:    'Playfair Display', Georgia, serif;
  --f-sans:     'Montserrat', system-ui, sans-serif;
}

[class*="ryf-"],
[class*="ryf-"] * {
  box-sizing: border-box;
}

/* ── Section Label ─────────────────────────────────────────── */
.ryf-label {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ryf-gold);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ryf-g40);
  margin-bottom: 28px;
}

/* ── Primary CTA Button ────────────────────────────────────── */
.ryf-btn {
  display: inline-block;
  background: var(--ryf-gold);
  color: #0f0f0f !important;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 52px;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  line-height: 1;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ryf-btn:hover {
  background: #d6b36e;
  color: #0f0f0f !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* ── Eyebrow: line + label ─────────────────────────────────── */
.ryf-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.ryf-eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--ryf-gold);
  flex-shrink: 0;
}
.ryf-eyebrow span {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ryf-gold);
}

/* ── Centered eyebrow variant (no left line) ───────────────── */
.ryf-eyebrow-c {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}
.ryf-eyebrow-c::before,
.ryf-eyebrow-c::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--ryf-gold);
  flex-shrink: 0;
}
.ryf-eyebrow-c span {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ryf-gold);
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ce4f50a */<style>
/* ── FIX 1: full-bleed without the overlap bug ───────────── */
.s04 {
  position: relative !important;
  left: auto !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
}

/* ── FIX 2: problem list → editorial ghost numbers ───────── */
/* Uses CSS counters — no HTML change needed                  */
.s04-list {
  counter-reset: problem-counter;
}
.s04-item {
  counter-increment: problem-counter;
  display: grid !important;
  grid-template-columns: 56px 1fr !important; /* number col | text col — increase 56px to widen number column */
  gap: 28px !important;                        /* space between number and text */
  align-items: start !important;
}
.s04-item::before {
  content: counter(problem-counter, decimal-leading-zero); /* produces 01 02 03... */
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 48px;       /* ← ghost number size               */
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: rgba(201,164,100,0.09); /* ← opacity: higher = more visible */
  align-self: start;
  padding-top: 2px;
}
/* Hide old gold bar — replaced by the number */
.s04-item-line {
  display: none !important;
}
.s04-item-text {
  padding-top: 10px !important; /* aligns text with number baseline */
}

/* ── FIX 3: CTA box — stop elements stacking on each other ── */
.s04-minicta {
  position: relative !important; /* own stacking context           */
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}
.s04-minicta-q {
  display: block !important;
  margin-bottom: 12px !important;
}
.s04-minicta-sub {
  display: block !important;
  margin-bottom: 32px !important;
}
.s04-btn {
  display: inline-block !important;
}
</style>/* End custom CSS */