/* ══════════════════════════════════════════
   GLOBAL — YT Capital Group
   Shared by every page. Includes reset,
   CSS variables, base, bg texture,
   page banner, buttons, cta strip, animations.
══════════════════════════════════════════ */

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

/* ── VARIABLES ── */
:root {
  --navy:       #0d1628;
  --navy-deep:  #0d1628;
  --navy-mid:   #162040;
  --navy-light: #1e2f55;
  --gold:       #d4a94a;
  --gold-dim:   #9e7929;
  --white:      #ffffff;
  --cream:      #f5f2eb;
  --cream-dark: #edeadf;
  --text-muted: rgba(255,255,255,0.6);
  --text-body:  rgba(255,255,255,0.82);
}

/* ── BASE ── */
html { scroll-behavior:smooth; }
body { font-family:"Raleway",sans-serif; background:var(--navy); color:var(--white); overflow-x:hidden; }

/* ── BG TEXTURE ── */
.bg-fixed { position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-fixed::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(212,169,74,0.1) 1px,transparent 1px); background-size:38px 38px; opacity:0.35; }

/* ── PAGE BANNER (short hero) ── */
.page-banner {
  position:relative; z-index:1;
  height:46vh; min-height:320px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:4rem; overflow:hidden;
}
.page-banner::before {
  content:""; position:absolute; inset:0;
  background: var(--navy-mid);
}
.page-banner::after {
  content:""; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity:0.4;
}
.banner-monogram {
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(10rem,20vw,18rem); font-weight:300; line-height:1;
  color:rgba(212,169,74,0.08); user-select:none; pointer-events:none;
  letter-spacing:-0.05em;
}
.banner-inner {
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:0 3rem;
}
.banner-label {
  font-size:0.65rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:0.7rem;
  opacity:0; animation:fadeUp 0.7s 0.2s ease forwards;
}
.banner-label::before { content:""; display:inline-block; width:28px; height:1px; background:var(--gold); }
.banner-heading {
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2.8rem,6vw,5.5rem); font-weight:300; line-height:1.0;
  color:var(--white); letter-spacing:-0.01em;
  opacity:0; animation:fadeUp 0.7s 0.35s ease forwards;
}
.banner-heading em { font-style:italic; background:linear-gradient(135deg,var(--gold),var(--gold-dim)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── BUTTONS ── */
.btn-gold { padding:0.85rem 2.2rem; background:linear-gradient(135deg,var(--gold),var(--gold-dim)); color:var(--navy); font-family:"Raleway",sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; border-radius:2px; transition:opacity 0.25s,transform 0.25s; box-shadow:0 4px 20px rgba(212,169,74,0.25); }
.btn-gold:hover { opacity:0.9; transform:translateY(-1px); }
.btn-outline { padding:0.85rem 2.2rem; border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.8); font-family:"Raleway",sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; border-radius:2px; transition:border-color 0.25s,color 0.25s; }
.btn-outline:hover { border-color:var(--white); color:var(--white); }

/* ── CTA STRIP ── */
.cta-strip {
  position:relative; z-index:1;
  background:linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-light) 100%);
  padding:4rem 3rem;
  border-top:1px solid rgba(212,169,74,0.15);
  text-align:center;
}
.cta-strip-heading { font-family:"Cormorant Garamond",serif; font-size:2.4rem; font-weight:300; color:var(--white); margin-bottom:1rem; }
.cta-strip-sub { font-size:0.9rem; font-weight:300; color:var(--text-muted); margin-bottom:2rem; }
.cta-strip-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .banner-inner { padding:0 1.5rem; }
  .page-banner { padding-bottom:2.5rem; }
  .cta-strip { padding:3.5rem 1.5rem; }
}
@media (max-width:540px) {
  .cta-strip-btns { flex-direction:column; align-items:center; }
}