/* ── SHARED VARIABLES & BASE ── */
:root {
  --red:        #C0272D;
  --red-dark:   #8B1A1E;
  --gold:       #B8860B;
  --gold-light: #D4A017;
  --navy:       #0A0F2C;
  --black:      #080808;
  --white:      #FFFFFF;
  --off-white:  #F8F6F2;
  --gray:       #6B6B6B;
  --light-gray: #E8E4DC;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

/* ── SHARED SECTION UTILITIES ── */
.section  { padding: 7rem 0; }
.inner    { max-width: 1200px; margin: 0 auto; padding: 0 3rem; }

.s-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.s-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: currentColor; }
.s-eyebrow.gold    { color: var(--gold-light); }

.s-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem;
}
.s-title em        { font-style: normal; }
.s-title.dark      { color: var(--navy); }
.s-title.dark em   { color: var(--red); }
.s-title.light     { color: var(--white); }
.s-title.light em  { color: var(--gold-light); }

.gold-bar { width: 48px; height: 3px; background: var(--gold); margin-bottom: 3rem; }

/* ── BUTTONS ── */
.btn-red {
  background: var(--red); color: var(--white); border: none;
  font-family: 'DM Sans', sans-serif; font-size: .65rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  padding: 1rem 2.5rem; cursor: pointer; transition: all .3s;
}
.btn-red:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(192,39,45,.35); }

.btn-ghost {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,.3);
  font-family: 'DM Sans', sans-serif; font-size: .65rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  padding: 1rem 2.5rem; cursor: pointer; transition: all .3s;
}
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.07); }

.btn-gold {
  background: var(--gold-light); color: var(--black); border: none;
  font-family: 'DM Sans', sans-serif; font-size: .65rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  padding: 1rem 2.5rem; cursor: pointer; transition: all .3s;
}
.btn-gold:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(184,134,11,.3); }

.btn-outline-gold {
  background: transparent; color: var(--gold-light);
  border: 1.5px solid rgba(212,160,23,.4);
  font-family: 'DM Sans', sans-serif; font-size: .65rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  padding: 1rem 2.5rem; cursor: pointer; transition: all .3s;
}
.btn-outline-gold:hover { border-color: var(--gold-light); background: rgba(212,160,23,.07); }

/* ── FADE-IN ── */
.fi { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.fi.in { opacity: 1; transform: translateY(0); }
.fi-d1 { transition-delay: .1s; }
.fi-d2 { transition-delay: .2s; }
.fi-d3 { transition-delay: .3s; }

/* ── SCROLL OBSERVER INIT (call in each page) ── */

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .inner { padding: 0 1.5rem; }
}