/* =====================================================================
   Opus Spark: HOME PAGE design mockup (v3)
   Loaded only by /index.html, and every rule is scoped to body.home,
   so no other page changes.
   Principles: calm off-white/cream base, navy text, orange reserved for
   the primary call to action, generous whitespace, fewer boxes.
   ===================================================================== */

body.home {
  --h-base: #FCFAF6;          /* off-white page base */
  --h-cream: #F6EFE3;         /* warm cream band (from site sand palette) */
  --h-sky: #E8F2F6;           /* soft light blue (from site blue-soft) */
  --h-ink: #1B2A4A;           /* navy text */
  --h-body: #5A6273;          /* readable gray body text */
  --h-muted: #7A8194;         /* labels */
  --h-line: rgba(27, 42, 74, 0.09);
  --h-radius: 16px;
  --h-shadow: 0 1px 2px rgba(27, 42, 74, 0.04), 0 12px 32px rgba(27, 42, 74, 0.06);
  --h-shadow-hover: 0 2px 4px rgba(27, 42, 74, 0.05), 0 18px 44px rgba(27, 42, 74, 0.09);
  --h-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--h-base);
  color: var(--h-ink);
  font-size: 17px;
  cursor: auto;
}

/* ---------- Layout: narrower, calmer measure + generous whitespace ---------- */
body.home .section { padding: 144px 48px; background: var(--h-base); }
body.home .section-inner { max-width: 1120px; }
body.home .section-cream,
body.home .home-story,
body.home .home-models,
body.home .home-roles { background: var(--h-cream); }
body.home .home-roles { padding-top: 0; }            /* models + roles read as one band */
body.home .home-playbook { padding-top: 0; }         /* FAQ + reading list read as one band */

/* ---------- Typography: fewer sizes and weights, tighter display ---------- */
body.home .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--h-muted);
  margin-bottom: 20px;
}
body.home .section h2 {
  font-size: 54px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--h-ink);
  max-width: 760px;
  margin-bottom: 24px;
}
body.home .section-lead {
  font-size: 19px;
  font-weight: 400;
  color: var(--h-body);
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 72px;
}
body.home h3 { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Header ---------- */
body.home .site-header {
  background: rgba(252, 250, 246, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--h-line);
}
body.home .nav-links a { font-weight: 500; transition: color 0.3s var(--h-ease); }
body.home .nav-links a:hover { color: var(--h-ink); opacity: 0.7; }
/* Nav "Contact us" is a secondary action on the home page; orange is kept for "Book your 15-minute call" */
body.home .nav-cta {
  background: transparent;
  color: var(--h-ink) !important;
  border: 1px solid rgba(27, 42, 74, 0.22);
  border-radius: 999px;
  transition: all 0.3s var(--h-ease);
}
body.home .nav-cta { white-space: nowrap; }
body.home .nav-cta:hover { background: var(--h-ink); color: #fff !important; border-color: var(--h-ink); }

/* ---------- Buttons ---------- */
body.home .btn-primary,
body.home .btn-secondary {
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 17px 34px;
  transition: transform 0.35s var(--h-ease), box-shadow 0.35s var(--h-ease), background-color 0.35s var(--h-ease), border-color 0.35s var(--h-ease);
}
body.home .btn-primary {
  background: var(--orange);
  box-shadow: 0 8px 22px rgba(232, 119, 34, 0.24);
}
body.home .btn-primary:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(232, 119, 34, 0.30);
}
body.home .btn-secondary {
  background: transparent;
  border: 1px solid rgba(27, 42, 74, 0.2);
}
body.home .btn-secondary:hover { border-color: var(--h-ink); background: rgba(27, 42, 74, 0.03); }
body.home a:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 3px; }

/* ---------- Hero ---------- */
/* Hero background, padding and grid (photo size/position) come straight from
   styles.css so the hero matches the live site exactly (v4c). Only the hero
   typography and buttons below are restyled. */
body.home .pill {
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--h-muted);
  margin-bottom: 28px;
}
body.home .hero h1 {
  font-size: 68px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 32px;
}
body.home .hero h1 .accent { color: var(--h-body); font-weight: 600; }
body.home .hero-subtitle { font-size: 19px; color: var(--h-body); line-height: 1.65; max-width: 500px; margin-bottom: 44px; }
body.home .hero .btn-row { margin-bottom: 64px; }
body.home .benefits-row { border-top: 1px solid var(--h-line); gap: 32px; }
body.home .benefits-row::before { display: none; }
body.home .benefit h3 { font-size: 16px; font-weight: 600; }
body.home .benefit p { font-size: 14px; color: var(--h-muted); }

/* ---------- Proof band (was navy): warm cream, navy numbers ---------- */
body.home .stats-band {
  background: var(--h-cream);
  border-top: 1px solid var(--h-line);
  border-bottom: 1px solid var(--h-line);
  padding: 64px 48px;
}
body.home .stats-row { max-width: 1040px; gap: 0; }
body.home .stat { padding: 0 40px; }
body.home .stat + .stat { border-left: 1px solid var(--h-line); }
body.home .stat-num {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--h-ink);
}
body.home .stat-lbl { margin-top: 10px; font-size: 15px; color: var(--h-body); line-height: 1.5; }

/* ---------- Cards: one radius, no hard borders, subtle shadow ---------- */
body.home .feature-card,
body.home .service-card,
body.home .step-card {
  border: none;
  border-radius: var(--h-radius);
  transition: transform 0.45s var(--h-ease), box-shadow 0.45s var(--h-ease);
}
body.home .feature-icon { display: none; }   /* emoji icons removed for a calmer look */

/* Problem/why section: open, borderless grid separated by hairlines */
body.home .home-problem .feature-grid { gap: 0 56px; }
body.home .home-problem .feature-card,
body.home .home-faq .feature-card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--h-line);
  padding: 32px 0 40px;
}
body.home .home-problem .feature-card:hover,
body.home .home-faq .feature-card:hover { transform: none; box-shadow: none; border-color: var(--h-line); }
body.home .feature-card h3 { font-size: 20px; margin-bottom: 10px; color: var(--h-ink); }
body.home .feature-card p { font-size: 16px; color: var(--h-body); line-height: 1.65; }

/* The four short promises become a quiet inline list instead of boxes */
body.home .home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -32px 0 64px !important;
}
body.home .home-chips .expertise-tag {
  background: transparent;
  border: 1px solid var(--h-line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--h-body);
}
body.home .home-chips .expertise-tag:hover { background: transparent; color: var(--h-body); border-color: var(--h-line); }

/* ---------- Why us: Our Story + founder as one section ---------- */
body.home .home-story .section-lead { margin-bottom: 40px; }
body.home .home-founder {
  max-width: 1000px;
  margin-top: 112px;
  padding-top: 112px;
  border-top: 1px solid var(--h-line);
}
body.home .about-founder { gap: 72px; grid-template-columns: 0.75fr 2fr; }
body.home .about-founder-photo { border-radius: var(--h-radius); box-shadow: var(--h-shadow); }
body.home .home-founder h2 { font-size: 44px; }
body.home .home-founder p { color: var(--h-body) !important; font-size: 18px !important; }
body.home .home-founder p:last-child { color: var(--h-ink) !important; font-weight: 600 !important; font-size: 16px !important; }

/* ---------- How it works: numbered, borderless steps ---------- */
body.home .steps-grid { gap: 40px; margin-top: 0; }
body.home .step-card {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid rgba(27, 42, 74, 0.18);
  padding: 28px 0 0;
}
body.home .step-num { color: var(--h-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; }
body.home .step-card h3 { font-size: 20px; }
body.home .step-card p { font-size: 16px; color: var(--h-body); line-height: 1.65; }

/* ---------- Models: the only boxed cards on the page ---------- */
body.home .service-grid { gap: 28px; }
body.home .service-card { background: #fff; box-shadow: var(--h-shadow); padding: 44px 36px; }
body.home .service-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); }
body.home .service-card h3 { font-size: 24px; font-weight: 600; }
body.home .service-card p { color: var(--h-body); }
body.home .service-card a { color: var(--h-ink); font-weight: 600; border-bottom: 1px solid rgba(27, 42, 74, 0.25); padding-bottom: 2px; transition: border-color 0.3s var(--h-ease); }
body.home .service-card a:hover { color: var(--h-ink); border-color: var(--h-ink); }

/* ---------- Roles we place: quiet pills ---------- */
body.home .home-roles .section-inner { border-top: 1px solid var(--h-line); padding-top: 112px; }
body.home .home-roles .section-lead { margin-bottom: 32px; }
body.home .home-roles .btn-row { margin-bottom: 0; }
body.home .home-roles .expertise-grid { gap: 12px; margin-top: 48px; justify-content: flex-start; }
body.home .home-roles .expertise-tag {
  flex: 0 0 auto !important;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--h-line);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--h-ink);
  transition: background-color 0.3s var(--h-ease), border-color 0.3s var(--h-ease);
}
body.home .home-roles .expertise-tag:hover { background: #fff; border-color: rgba(27, 42, 74, 0.25); color: var(--h-ink); }

/* ---------- FAQ + reading list ---------- */
body.home .home-faq .feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
  max-width: 960px;
}
body.home .home-faq .feature-grid > * { flex: none; }
body.home .home-playbook .section-inner { border-top: 1px solid var(--h-line); padding-top: 112px; }
body.home .home-playbook .feature-card {
  background: #fff;
  box-shadow: var(--h-shadow);
  padding: 36px 36px 40px;
}
body.home .home-playbook .feature-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); }
body.home .home-playbook .feature-card .eyebrow { margin-bottom: 14px; }
body.home .home-playbook h3 a { color: var(--h-ink) !important; }

/* ---------- Final call to action (was navy): soft light blue ---------- */
body.home .cta-section {
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 70%),
    var(--h-sky);
  color: var(--h-ink);
  padding: 152px 48px;
}
body.home .cta-section h2 {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--h-ink);
  margin-bottom: 24px;
}
body.home .cta-section p { color: var(--h-body); font-size: 19px; margin-bottom: 44px; }
body.home .cta-section .btn-primary { padding: 20px 42px; font-size: 16px; }

/* ---------- Gentle fade-in on scroll (CSS only) ----------
   Uses scroll-driven animations where supported; elsewhere content is
   simply visible. Fully disabled for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body.home .section-inner,
    body.home .stats-row,
    body.home .cta-section > * {
      animation: home-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes home-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  body.home .section { padding: 96px 24px; }
  body.home .home-roles, body.home .home-playbook { padding-top: 0; }
  body.home .home-roles .section-inner, body.home .home-playbook .section-inner { padding-top: 80px; }
  body.home .section h2 { font-size: 40px; }
  body.home .hero h1 { font-size: 52px; }
  body.home .stat { padding: 16px 24px; }
  body.home .stat + .stat { border-left: none; }
  body.home .home-founder { margin-top: 72px; padding-top: 72px; }
  body.home .home-founder h2 { font-size: 36px; }
  body.home .about-founder { grid-template-columns: 1fr; gap: 40px; }
  body.home .cta-section { padding: 104px 24px; }
  body.home .cta-section h2 { font-size: 40px; }
}
@media (max-width: 640px) {
  body.home .nav-cta { padding: 9px 16px; font-size: 13px; }
  body.home .section h2 { font-size: 34px; }
  body.home .hero h1 { font-size: 42px; }
  body.home .home-problem .feature-grid, body.home .home-faq .feature-grid, body.home .home-playbook .feature-grid { grid-template-columns: 1fr !important; }
  body.home .cta-section h2 { font-size: 34px; }
}

/* =====================================================================
   v4b: restore the LIVE site's colored section backgrounds on the home
   page (Patricia's request). Same gradients/colors as styles.css
   (.hero / --bg-peach, .section-cream, .section-sky, white sections).
   Typography, spacing, light stats bar and light bottom CTA unchanged.
   ===================================================================== */

/* White sections, as on the live site */
body.home .home-problem,
body.home .home-models,
body.home .home-faq { background: #fff; }

/* Iridescent cream gradient (live .section-cream) */
body.home .home-story,
body.home .home-roles,
body.home .home-playbook {
  background:
    radial-gradient(ellipse 70% 60% at 8% 12%, rgba(184, 221, 232, 0.38) 0%, rgba(184, 221, 232, 0) 55%),
    radial-gradient(ellipse 65% 55% at 92% 10%, rgba(232, 168, 200, 0.18) 0%, rgba(232, 168, 200, 0) 55%),
    radial-gradient(ellipse 75% 60% at 85% 90%, rgba(246, 167, 5, 0.13) 0%, rgba(246, 167, 5, 0) 60%),
    radial-gradient(ellipse 60% 50% at 20% 92%, rgba(198, 183, 232, 0.20) 0%, rgba(198, 183, 232, 0) 55%),
    linear-gradient(135deg, #FCF6E8 0%, #F4EBD7 55%, #EBDDC0 100%);
}

/* Soft sky blue (live .section-sky) for How it works */
body.home .home-process { background: #E3F1F6; }

/* Roles and reading list are their own colored blocks again (as live),
   so give them full padding and drop the in-band divider */
body.home .home-roles,
body.home .home-playbook { padding-top: 144px; }
body.home .home-roles .section-inner,
body.home .home-playbook .section-inner { border-top: none; padding-top: 0; }

/* Cards on colored blocks: keep them readable on the gradient */
body.home .home-playbook .feature-card { background: #fff; }
body.home .home-process .step-card { border-top-color: rgba(27, 42, 74, 0.16); }

@media (max-width: 1024px) {
  body.home .home-roles,
  body.home .home-playbook { padding-top: 96px; }
  body.home .home-roles .section-inner,
  body.home .home-playbook .section-inner { padding-top: 0; }
}