/* ============================================
   BUSINESS FOUNDERS: Premium Dark Theme
   ============================================ */

:root {
  --bg: #060607;
  --bg-elev: #0c0c0f;
  --bg-card: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(212, 175, 55, 0.45);
  --text: #eceae4;
  --text-dim: #9d9a92;
  --gold: #d4af37;
  --gold-soft: #c9a227;
  --gold-glow: rgba(212, 175, 55, 0.25);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3D canvas backdrop ---------- */
#scene-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 1;
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 500;
}

.gold { color: var(--gold); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  background: rgba(6, 6, 7, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

/* The wordmark is two faces: BUSINESS in Poppins Bold, FOUNDERS in
   Adlery Pro. Adlery is a commercial Sudtipos face, not on Google Fonts,
   so it comes from the Adobe Fonts kit linked in each page's head.
   Until that kit is in place the second word falls back to the display
   serif, which is what the logo used before, so nothing looks broken
   while it is missing. Confirm the family name in the kit: Adobe uses a
   lowercase slug and it may not be exactly "adlery-pro". */
.nav-logo {
  font-family: "Poppins", var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo span {
  font-family: "adlery-pro", var(--font-display);
  /* the brighter gold, on the wordmark only for now: the rest of the
     site stays on --gold #d4af37 until the theme decision is made */
  color: #ffc000;
  font-weight: 400;
  /* 1.15em: the script sits a touch above the caps without the gap
     reading as a mistake. Its ink lands at about 1.10x the Poppins caps.
     Not 1.75em. The artwork's script is 1.674x the caps, but that is a
     stacked lockup whose two words are set to the same width (0.984
     measured), so the script has to be far taller to fill that width
     with fewer, wider letterforms. Side by side there is no width to
     match and the ratio does not transfer: it just makes the script
     tower over the caps. The useful figure for a horizontal lockup is
     that at equal font-size Adlery's ink is 0.959x Poppins Bold's
     (0.695 of font-size against 0.725), so 1em reads as level, which is
     where this sits: the script's ink lands just under the cap height
     rather than above it. */
  font-size: 1em;
  letter-spacing: 0.01em;
  /* the markup separates the words with a single space, which the brush
     script's own left sidebearing then eats into. This is the gap. */
  margin-left: 0.2em;
  /* the two faces share a baseline, and the script's larger body would
     otherwise push the bar taller than its caps need */
  line-height: 0.8;
}

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: color 0.25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }

.nav-cta {
  padding: 9px 22px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold) !important;
  transition: all 0.25s;
}
.nav-cta:hover { background: var(--gold); color: #0a0a0a !important; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 26px;
  cursor: pointer;
  /* the glyph alone measured about 23x35, under the 44px guidance, and
     below 680px this button is the only way to reach the nav at all */
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 140px 24px 80px;
}

.hero h1 {
  font-size: clamp(42px, 7vw, 84px);
  max-width: 900px;
  margin-bottom: 26px;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero .sub {
  max-width: 620px;
  color: var(--text-dim);
  font-size: 18px;
  margin-bottom: 44px;
}

.hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 38px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.btn-gold {
  background: linear-gradient(135deg, #e6c65c, var(--gold-soft));
  color: #0a0a0a;
  font-weight: 600;
  box-shadow: 0 0 32px var(--gold-glow);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 44px rgba(212, 175, 55, 0.4); }

.btn-ghost {
  border-color: var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Sections ---------- */
.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 110px 24px;
}

.section-head {
  text-align: center;
  margin-bottom: 64px;
}
.section-head h2 { font-size: clamp(30px, 4.4vw, 48px); margin-bottom: 16px; }
.section-head p { color: var(--text-dim); max-width: 560px; margin: 0 auto; }

/* ---------- Card grid ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 38px 32px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.14);
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s;
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(212, 175, 55, 0.06);
}

.card h2,
.card h3 { font-size: 22px; margin: 18px 0 12px; }
.card p { color: var(--text-dim); font-size: 15px; }

.card-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  color: var(--gold);
  font-size: 22px;
}

a.card { text-decoration: none; color: inherit; display: block; }
.card-link {
  margin-top: 22px;
  display: inline-block;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Product cards ---------- */
.product { display: flex; flex-direction: column; }

.product-cover {
  height: 220px;
  border-radius: 4px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.16), transparent 60%),
    linear-gradient(160deg, #131318, #0a0a0d);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--text);
}

.badge {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--gold);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  z-index: 2;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 20px 0 6px;
}
.price { font-family: var(--font-display); font-size: 32px; color: var(--gold); }
.price-old { color: var(--text-dim); text-decoration: line-through; font-size: 16px; }

.product ul {
  list-style: none;
  margin: 14px 0 26px;
  flex: 1;
}
.product ul li {
  color: var(--text-dim);
  font-size: 14px;
  padding: 7px 0 7px 26px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.product ul li::before {
  content: "✦";
  position: absolute;
  left: 2px;
  color: var(--gold);
  font-size: 11px;
}

.product .btn { text-align: center; }

/* ---------- Trust bar ---------- */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 6vw, 80px);
  flex-wrap: wrap;
  padding: 34px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}
.trust-item { text-align: center; }
.trust-item .num {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--gold);
}
.trust-item .label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Testimonials ---------- */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 20px;
}
.quote-author { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #7a6420);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: #0a0a0a;
  font-size: 15px;
}
.quote-author .name { font-size: 14px; font-weight: 600; }
.quote-author .role { font-size: 12.5px; color: var(--text-dim); }
.stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; font-size: 14px; }

/* ---------- Guarantee strip ---------- */
.guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 60px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.035);
}
.guarantee-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-size: 13.5px;
}
.guarantee-item svg { color: var(--gold); flex-shrink: 0; }

/* ---------- Forms ---------- */
.form-wrap {
  max-width: 680px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 52px 48px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--font-body);
  /* 16px, not 15: below 16 iOS Safari zooms in on focus and never back out */
  font-size: 16px;
  padding: 13px 16px;
  transition: border-color 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.field select { appearance: none; cursor: pointer; }
.field textarea { resize: vertical; min-height: 120px; }
.field select option { background: var(--bg-elev); }

.form-success {
  display: none;
  text-align: center;
  padding: 60px 20px;
}
.form-success h3 { font-size: 28px; margin: 18px 0 12px; }
.form-success p { color: var(--text-dim); }
.form-success .check {
  width: 70px; height: 70px;
  margin: 0 auto;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 30px;
}

/* ---------- Video clip cards ---------- */
.clip-preview {
  height: 190px;
  border-radius: 4px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #16161c, #0a0a0d);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.clip-preview::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 80%, rgba(212, 175, 55, 0.12), transparent 55%);
}
.play-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 18px;
  padding-left: 4px;
  z-index: 1;
  transition: all 0.3s;
}
.card:hover .play-btn { background: var(--gold); color: #0a0a0a; transform: scale(1.08); }
.res-tag {
  position: absolute;
  bottom: 12px; left: 12px;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  border: 1px solid var(--border-hover);
  padding: 3px 9px;
  border-radius: 2px;
  background: rgba(6, 6, 7, 0.7);
}

/* ---------- About page ---------- */
/* Single column while there is no brand artwork to sit beside the copy.
   The old wordmark was the sold brand's; restore the two-column grid and
   the .about-visual block once a Wealth Frame Media mark exists. */
.about-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 70px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
}
.about-story h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 24px; }
.about-story p { color: var(--text-dim); margin-bottom: 18px; }

/* No frame. This held a 90px "BF" in the display serif and needed a card
   behind it; it now holds the wordmark artwork, which is transparent and
   is meant to sit straight on the page background. The square aspect went
   with the card: the column collapses to the artwork and the grid's
   align-items:center keeps it level with the text beside it. */
.about-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

.values .card { text-align: center; }
.values .card-icon { margin: 0 auto; }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: 110px 24px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.08), transparent 60%);
}
.cta-band h2 { font-size: clamp(30px, 4.6vw, 52px); margin-bottom: 18px; }
.cta-band p { color: var(--text-dim); max-width: 520px; margin: 0 auto 40px; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 60px 40px 36px;
  background: rgba(0, 0, 0, 0.35);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer h3 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
}
.footer ul { list-style: none; }
/* body has overflow-x:hidden, so anything too wide is clipped rather
   than scrollable. Long addresses need somewhere to break. */
.card-link, .card p { overflow-wrap: anywhere; }
.footer ul li { margin-bottom: 9px; }
.footer a { color: var(--text-dim); text-decoration: none; font-size: 14px; transition: color 0.25s; }
.footer a:hover { color: var(--gold); }
.footer-brand { max-width: 300px; }
.footer-brand p { color: var(--text-dim); font-size: 14px; margin-top: 14px; }
.footer-bottom {
  max-width: var(--max-w);
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-dim);
  font-size: 13px;
}

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  padding: 190px 24px 70px;
  text-align: center;
}
.page-hero h1 { font-size: clamp(36px, 5.6vw, 64px); margin-bottom: 20px; }
.page-hero p { color: var(--text-dim); max-width: 580px; margin: 0 auto; font-size: 17px; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: none; }

/* ---------- 3D floating cards ---------- */
.grid { perspective: 1400px; transform-style: preserve-3d; }

@keyframes floatA { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

.float-wrap { animation: floatA 7s ease-in-out infinite; }
.float-wrap:nth-child(3n+2) { animation-duration: 8s; animation-delay: .5s; }
.float-wrap:nth-child(3n+3) { animation-duration: 7.5s; animation-delay: 1s; }

.card-3d {
  transform-style: preserve-3d;
  transition: transform .18s ease-out, border-color .3s, box-shadow .3s;
  height: 100%;
}
.card-3d:hover { border-color: var(--border-hover); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-story { grid-template-columns: 1fr; gap: 44px; }
}

/* The bar is frosted glass: 72% black plus a blur. That reads as solid
   on desktop, but Safari does not always sample a backdrop-filter through
   the compartments' own compositing layers, and when the blur silently
   does nothing the bar is just 72% black and the panel behind it shows
   through. Lean on opacity rather than the blur at phone widths, so it
   holds up either way. Desktop keeps the glass. */
@media (max-width: 900px) {
  .nav { background: rgba(6, 6, 7, 0.94); }
}

/* The menu button used to appear at 680, but the full link row plus the
   lockup needs about 890px on one line: 567 for the links, 243 for the
   lockup, 80 of padding. Between 681 and 890 the links were wrapping to
   two rows and the bar grew to 88px. That predates the new wordmark,
   which needed 870 before and only made the shortfall worse, so the
   button now covers the whole band rather than the row being cramped
   into a space it has never fitted. */
/* Tighter gap from 1100 down: the row is 457px of link text plus five
   gaps, so 34px gaps need 992px of bar and 22px gaps need 932. */
@media (max-width: 1100px) {
  .nav-links { gap: 22px; }
}

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: rgba(6, 6, 7, 0.97);
    border-bottom: 1px solid var(--border);
    padding: 24px;
    gap: 20px;
  }
  .nav-links.open { display: flex; }
  /* stretch, or each link stays as narrow as its own text inside a
     full-width panel and the row around it is not tappable */
  .nav-links { align-items: stretch; gap: 4px; }
  .nav-links a { display: block; padding: 12px 4px; }
}

/* phone-only from here: these are about column count and padding, not
   about whether the nav fits */
@media (max-width: 680px) {
  .nav { padding: 16px 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-wrap { padding: 36px 24px; }
  .section { padding: 70px 20px; }
}

/* 320 leaves only about 10px between the lockup and the menu button at
   the full size, so it steps down there */
@media (max-width: 380px) {
  .nav-logo { font-size: 17px; }
}

/* ---------- Coming-soon badge + form error ---------- */
.soon-badge {
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  padding: 6px 16px;
}
.form-error {
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 4px;
  background: rgba(212, 175, 55, 0.07);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.field-hint {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  color: var(--text-dim);
}
.field label .opt {
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* note shown when a link's destination is not published yet */
.pending-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gold);
}

/* Links inside running text had no styling at all, so browsers fell back
   to their default blue. Each context sets its own accent variable, so
   the cascade picks the compartment accent, then the book page accent,
   then the site gold. Scoped to paragraphs and list items, since links
   that wrap whole cards style themselves. */
.page p a:not([class]),
.page li a:not([class]) {
  color: var(--c-accent, var(--bk-accent, var(--gold)));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 0.25s;
}
.page p a:not([class]):hover,
.page p a:not([class]):focus-visible,
.page li a:not([class]):hover,
.page li a:not([class]):focus-visible {
  text-decoration-color: currentColor;
}

/* The footer is site chrome, not page content, so the per-page accent
   must not reach it. On book-03, whose accent is cobalt, footer links
   were landing at 2.67:1 against the footer's dark composite. Same
   specificity as the rule above, placed after it so it wins. */
.footer p a:not([class]),
.footer li a:not([class]) { color: var(--text-dim); }
.footer p a:not([class]):hover,
.footer li a:not([class]):hover { color: var(--gold); }