/* ============================================================
   Luminous Wealth — shared site styles
   Design: Direction 1b "Split Portrait". Self-contained, mobile-first.
   ============================================================ */

@import url("fonts/fonts.css");

:root {
  --navy: #1a2740;
  --navy-hover: #243559;
  --navy-stripe-a: #20304d;
  --navy-stripe-b: #233553;
  --gold-text: #876818;   /* AA-safe gold text on light */
  --gold: #c9a84c;        /* decorative + gold text on navy + gold buttons */
  --gold-hover: #d8bb63;
  --paper: #f7f5ef;
  --paper-alt: #f1eee4;
  --ink: #1f2430;
  --soft-ink: #56607a;
  --paper-stripe-a: #ece8dd;
  --paper-stripe-b: #e4dfd0;
  --portrait-stripe-a: #e4dfd0;
  --portrait-stripe-b: #dcd6c4;
  --hairline: rgba(135,104,24,.18);
  --hairline-soft: rgba(135,104,24,.16);
  --hairline-navy: rgba(201,168,76,.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

.serif {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-feature-settings: "onum" 1, "liga" 1;
}

/* entrance motion — reduced-motion safe */
@keyframes lumFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lum-in { animation: lumFade .9s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .lum-in { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- layout helpers ---------- */
.container { max-width: 1080px; margin: 0 auto; }
.container-wide { max-width: 1120px; margin: 0 auto; }
.container-narrow { max-width: 960px; margin: 0 auto; }
.section { padding: clamp(70px,9vw,120px) 6vw; }
.section-lg { padding: clamp(80px,11vw,150px) 6vw; }
.section-hero { padding: clamp(80px,11vw,150px) 6vw; }
.navy { background: var(--navy); color: var(--paper); }
.paper-alt { background: var(--paper-alt); }
.center { text-align: center; }

.eyebrow {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 26px;
}
.eyebrow.on-navy { color: var(--gold); }
.eyebrow.wide { letter-spacing: .28em; margin-bottom: 32px; }

h1, h2, h3 { font-weight: 400; margin: 0; }
.h1 { font-size: clamp(34px,5.4vw,58px); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; }
.h1-hero { font-size: clamp(34px,5vw,60px); line-height: 1.13; letter-spacing: -.015em; text-wrap: balance; max-width: 15ch; }
.h2 { font-size: clamp(26px,3.4vw,38px); line-height: 1.3; }
.statement { font-size: clamp(24px,3vw,32px); line-height: 1.45; }
.statement-lg { font-size: clamp(28px,4vw,44px); line-height: 1.32; text-wrap: balance; }
em.gold { color: var(--gold-text); font-style: italic; }
em.gold-navy { color: var(--gold); font-style: italic; }

.lede { font-size: 17px; line-height: 1.75; color: var(--soft-ink); }
.body { font-size: 16px; line-height: 1.75; color: var(--soft-ink); }
.body-navy { font-size: 16px; line-height: 1.75; color: rgba(247,245,239,.72); }
.measure { max-width: 56ch; }
.measure-sm { max-width: 46ch; }

/* ---------- buttons & links ---------- */
.btn { display: inline-block; cursor: pointer; border-radius: 2px; font-size: 15px;
  text-decoration: none; white-space: nowrap; border: none; transition: background .18s, color .18s; }
.btn-navy { background: var(--navy); color: var(--paper); padding: 16px 34px; }
.btn-navy:hover { background: var(--navy-hover); }
.btn-gold { background: var(--gold); color: var(--navy); font-weight: 600; padding: 16px 32px; }
.btn-gold:hover { background: var(--gold-hover); }
.btn-ghost { border: 1px solid var(--navy); color: var(--navy); padding: 15px 32px; background: transparent; }
.btn-ghost:hover { background: var(--navy); color: var(--paper); }

.link-gold { cursor: pointer; text-decoration: none; color: var(--navy);
  border-bottom: 1px solid var(--gold); padding-bottom: 3px; font-size: 15px; }
.link-gold.on-navy { color: var(--paper); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  padding: 18px 6vw;
  background: rgba(247,245,239,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline-soft);
}
.brand { text-decoration: none; margin-right: auto; font-size: 22px; color: var(--navy); letter-spacing: .01em; }
.brand span { color: var(--gold-text); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.site-nav a { position: relative; font-size: 14px; color: var(--soft-ink); text-decoration: none; padding-bottom: 3px; }
.site-nav a:hover { color: var(--navy); }
.site-nav a.active { color: var(--navy); }
.site-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .login {
  cursor: pointer; white-space: nowrap; font-size: 13px; letter-spacing: .04em; text-decoration: none;
  color: var(--gold-text); padding: 8px 14px; border: 1px solid rgba(135,104,24,.4); border-radius: 2px;
}
.header-actions .login:hover { background: rgba(135,104,24,.06); }
.header-actions .schedule {
  cursor: pointer; white-space: nowrap; font-size: 13px; letter-spacing: .04em; text-decoration: none;
  color: var(--paper); background: var(--navy); padding: 9px 16px; border-radius: 2px;
}
.header-actions .schedule:hover { background: var(--navy-hover); }

/* ---------- grids ---------- */
.grid-autofit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 64px; align-items: center; }
.split-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); align-items: stretch; }

/* photo placeholders (striped) — replaced by real imagery where available */
.ph { display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: monospace; font-size: 12px; letter-spacing: .05em; line-height: 1.6; color: #8a8064; padding: 20px; border-radius: 3px; }
.ph-paper { background: repeating-linear-gradient(135deg, var(--paper-stripe-a), var(--paper-stripe-a) 12px, var(--paper-stripe-b) 12px, var(--paper-stripe-b) 24px); }
.ph-portrait { background: repeating-linear-gradient(135deg, var(--portrait-stripe-a), var(--portrait-stripe-a) 12px, var(--portrait-stripe-b) 12px, var(--portrait-stripe-b) 24px); }
.ph-navy { background: repeating-linear-gradient(135deg, #22314f, #22314f 12px, #26375a 12px, #26375a 24px); color: rgba(247,245,239,.6); }

.photo { border-radius: 3px; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4x5 { aspect-ratio: 4/5; }
.ratio-3x4 { aspect-ratio: 3/4; }
.ratio-3x2 { aspect-ratio: 3/2; }

/* ---------- wealth wheel ---------- */
.wheel { position: relative; width: 100%; aspect-ratio: 1; }
.wheel .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(135,104,24,.30); }
.wheel .ring2 { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(135,104,24,.14); }
.wheel .orb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 26%; height: 26%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d8bb63, #876818);
  box-shadow: 0 0 44px rgba(201,168,76,.40);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.wheel .orb span { color: var(--navy); font-weight: 600; font-size: 9px; line-height: 1.3; letter-spacing: .08em; }
.wheel .dot { position: absolute; width: 4.4%; height: 4.4%; border-radius: 50%; background: var(--gold-text); transform: translate(-50%,-50%); }
.wheel.dark .ring { border-color: rgba(201,168,76,.35); }
.wheel.dark .ring2 { border-color: rgba(201,168,76,.16); }
.wheel.dark .orb { box-shadow: 0 0 60px rgba(201,168,76,.55); }
.wheel.dark .dot { background: var(--gold); }
/* 8 compass positions */
.wheel .d1 { top: 0;    left: 50%; }
.wheel .d2 { top: 15%;  left: 85%; }
.wheel .d3 { top: 50%;  left: 100%; }
.wheel .d4 { top: 85%;  left: 85%; }
.wheel .d5 { top: 100%; left: 50%; }
.wheel .d6 { top: 85%;  left: 15%; }
.wheel .d7 { top: 50%;  left: 0; }
.wheel .d8 { top: 15%;  left: 15%; }
.wheel-wrap-sm { width: clamp(240px,26vw,320px); height: clamp(240px,26vw,320px); }
.wheel-wrap-lg { width: clamp(260px,30vw,380px); height: clamp(260px,30vw,380px); }

/* ---------- gold dot marker + hairline rows ---------- */
.gold-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.hairline-row { border-top: 1px solid var(--hairline); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: rgba(247,245,239,.72); padding: clamp(64px,7vw,90px) 6vw 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }
.footer-brand { font-size: 22px; color: var(--paper); margin-bottom: 16px; }
.footer-brand span { color: var(--gold); }
.footer-col h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; font-weight: 400; }
.footer-col .links { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14px; color: rgba(247,245,239,.72); text-decoration: none; }
.footer-col a:hover { color: var(--paper); }
.footer-legal-row { padding-top: 28px; margin-top: 48px; border-top: 1px solid var(--hairline-navy);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.brokercheck { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .06em;
  color: var(--gold); border: 1px solid rgba(201,168,76,.4); border-radius: 2px; padding: 7px 12px; text-decoration: none; }
.footer-legal-row a:not(.brokercheck) { font-size: 13px; color: rgba(247,245,239,.72); text-decoration: none; }
.footer-legal-row a:not(.brokercheck):hover { color: var(--paper); }
.footer-fine { margin-top: 24px; font-size: 12px; line-height: 1.7; color: rgba(247,245,239,.5); }
.footer-fine p { margin: 0 0 10px; }
.footer-fine p:last-child { margin: 0; }

/* ============================================================
   Mobile — grids that use fixed fractions must stack.
   auto-fit grids collapse on their own; these need help.
   ============================================================ */
@media (max-width: 768px) {
  .split-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
  .split-2col .order-photo { order: -1; }
  .svc-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 13px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .header-actions .login { display: none; } /* keep the primary CTA, drop secondary on tiny screens */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .btn-navy, .btn-gold { padding-left: 26px; padding-right: 26px; }
}