/* ============================================================
   GIFTS INTO GOLD — brand.css
   Stef Garvin · The Abundance Story Architect
   giftsintogold.com
   Last updated: June 2026
   ============================================================

   PURPOSE
   -------
   Shared stylesheet for all standalone HTML landing pages.
   WordPress pages are styled separately via Kadence customizer.

   HOW TO USE
   ----------
   Add this line inside <head> of every landing page:
     <link rel="stylesheet" href="/brand.css">
   Then add a small <style> block in the page for anything unique
   to that specific page (e.g. a custom grid, a special section).

   CONTENTS
   --------
   1.  Reset & base
   2.  CSS custom properties (colors, fonts, spacing)
   3.  Typography
   4.  Layout primitives (.section, .dark-half, .light-half)
   5.  Navigation
   6.  Hero
   7.  Threshold divider
   8.  Section labels
   9.  Prose styles
   10. Quote block
   11. Image section
   12. Origin / dark panel
   13. Footer CTA
   14. Buttons & links
   15. Grid utilities
   16. Responsive
   ============================================================ */


/* ============================================================
   1. RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  /* Base font is Nunito (body copy) */
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  font-size: var(--fs-body); /* 18px minimum — mature audience. Set in :root */
  line-height: 1.9;
  overflow-x: hidden;
  /* Default background: Soft Cream */
  background: var(--cream);
  color: var(--ink);
}


/* ============================================================
   2. CSS CUSTOM PROPERTIES
   Colors, fonts, spacing — change here, updates everywhere.
   ============================================================ */

:root {

  /* ── PRIMARY COLORS ── */
  --burgundy:     #7D0A40;   /* primary accent, CTAs, headings */
  --gold:         #D4AF37;   /* secondary accent, highlights, logo */

  /* ── BACKGROUNDS ── */
  --cream:        #F5EED6;   /* primary light background */
  --cream-d:      #EDE4C4;   /* slightly deeper cream, used in boxes */
  --eggplant:     #34274A;   /* dark background (hero, origin sections) */
  --eggplant-d:   #241B36;   /* deepest dark — used for hero gradient base */
  --eggplant-m:   #3E3055;   /* mid eggplant — used in gradients */

  /* ── SUPPORTING COLORS ── */
  --terracotta:   #C35A38;   /* warmth, secondary section labels */
  --sage:         #8A9B6E;   /* calm, nature, tertiary labels */
  --forest:       #2D5D3C;   /* depth, grounding */
  --slate:        #627188;   /* quiet, reflective */

  /* ── INK SCALE (text on light backgrounds) ── */
  --ink:          #2A1F38;   /* primary text — dark eggplant */
  --ink-mid:      #4A3D58;   /* secondary text */
  --ink-light:    #7A6D88;   /* tertiary text */
  --ink-faint:    #B0A5BC;   /* placeholder, metadata */

  /* ── TRANSPARENCY SHORTCUTS ── */
  --gold-dim:     rgba(212,175,55,0.55);
  --gold-faint:   rgba(212,175,55,0.15);

  /* ── SPACING ── */
  --section-pad:  5rem;      /* standard section top/bottom padding */
  --content-max:  820px;     /* max width for text content */
  --side-pad:     2.5rem;    /* desktop side padding inside sections */
  --side-pad-mob: 1.25rem;   /* mobile side padding */

  /* ── FONT SIZING ── */
   --fs-label: 13px;                          /* Eyebrows, section labels, buttons, prices/tags, nav link */
   --fs-small: 16px;                          /* Secondary/supporting text, captions, footer name */
   --fs-body: 18px;                           /* Default paragraph text */
   --fs-title: 21px;                          /* Card/phase titles, h3-level emphasis */
   --fs-display-sm: clamp(20px, 2.8vw, 28px); /* Pull quotes */
   --fs-display-lg: clamp(36px, 6vw, 64px);   /* h1/hero headlines */
}


/* ============================================================
   3. TYPOGRAPHY
   Fonts loaded via Google Fonts — add this to every page <head>:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Lato:wght@300;400&family=Nunito:wght@300;400&display=swap" rel="stylesheet">

   FONT ROLES:
   Playfair Display — titles, headings, pull quotes, large display text
   Lato            — subtitles, labels, eyebrows, nav, buttons
   Nunito          — body copy, descriptions, list items
   ============================================================ */




/* P | paragraph text */
p {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-body);  /* or 20px */
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink-mid);
  margin-bottom: 1.5rem;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-display-lg);
  font-style: italic;
  font-weight: 400;
  color: var(--eggplant); /* Default H3 font color */
  line-height: 1.2;
  margin-bottom: 2rem;
  max-width: 800px;
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--eggplant); /* Default H2 font color */
  margin-bottom: 2rem;
}

h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--burgundy);  /* Default H3 font color */
  margin-bottom: 1rem;
}

/* ── H2 / Section heading ── */
.t-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.3;
}

/* ── Pull quote / large italic ── */
.t-pull {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
}

/* ── Subtitle ── */
.t-subtitle {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.7;
}

/* ── Body ── */
.t-body {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.9;
}

/* ── Eyebrow / label ── */
.t-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

/* Full-width dark panel — Eggplant background */
.dark-half {
  background: var(--eggplant-d);
  position: relative;
}

/* Full-width light panel — Soft Cream background */
.light-half {
  background: var(--cream);
  position: relative;
  z-index: 2;
}

/* Centered content column — use inside .dark-half or .light-half */
.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--side-pad);
  border-bottom: 0.5px solid rgba(52,39,74,0.08);
}
.section:last-child { border-bottom: none; }

/* Wider variant — for image sections or full-bleed content */
.section--wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--section-pad) var(--side-pad);
}


/* ============================================================
   5. NAVIGATION
   Intentionally minimal — program name left, one CTA right.
   No links to other pages. Landing pages have one focus.
   ============================================================ */

.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  background: rgba(36,27,54,0.92);
  border-bottom: 0.5px solid rgba(212,175,55,0.12);
}

/* Program name in nav — Playfair italic */
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-body);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.nav-link {
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 24px;
  text-decoration: none;
  padding: 8px 20px;
  font-size: var(--fs-small);
}
.nav-link:hover {
  background: rgba(212,175,55,0.1);
  border-color: var(--gold);
}


/* ============================================================
   6. HERO
   Full-viewport-height section. Dark background (Eggplant).
   Contains: eyebrow · H1 · pull quote · subhead · CTA button.
   ============================================================ */

.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 2rem 6rem;
  position: relative;
  z-index: 1;
  /* Radial gradient gives depth — feels like emerging from darkness */
  background: radial-gradient(ellipse at 50% 30%, #4A3560 0%, var(--eggplant) 45%, var(--eggplant-d) 100%);
}

.hero-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.25rem;
}

/* H1 — Playfair Display italic on dark */
.hero-h1 {
  /* font-family: 'Playfair Display', serif;  NOTE: These style elements are in H1 */
  font-size: var(--fs-display-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15; 
  color: var(--cream);
  margin-bottom: 1.75rem;
  max-width: 680px;
}
.hero-h1 em {
  /* font-style: italic;   NOTE: This style element is in H1  */
  color: var(--gold);
}

/* Pull quote / subtitle below H1 */
.hero-bright {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 2vw, 22px);
  font-style: italic;
  font-weight: 400;
  color: rgba(245,238,214,0.8);
  margin-bottom: 2rem;
}

/* Body subhead in hero */
.hero-sub {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-small);
  font-weight: 300;
  color: rgba(245,238,214,0.75);
  line-height: 1.85;
  max-width: 460px;
  margin: 0 auto 3rem;
}


/* ============================================================
   7. THRESHOLD DIVIDER
   Thin horizontal gold gradient line.
   Marks the transition between dark and light sections.
   ============================================================ */

.threshold {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,175,55,0.3), transparent);
  position: relative;
  z-index: 2;
}


/* ============================================================
   8. SECTION LABELS
   Small uppercase eyebrow labels at the top of each section.
   Use color variants to distinguish sections visually.
   ============================================================ */

.section-label {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  display: block;
}

.lbl-gold     { color: var(--gold); }
.lbl-burg     { color: #A3452A; }
.lbl-sage     { color: #2D5D3C; }
.lbl-terra    { color: var(--terracotta); opacity: 0.8; }
.lbl-cream    { color: rgba(245,238,214,0.75); }  /* for use on dark backgrounds */


/* ============================================================
   9. PROSE STYLES
   ============================================================ */

/* Large intro paragraph — Playfair Display */
.prose-large {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.prose-large em { font-style: italic; }

/* Standard body paragraph — Nunito */
.prose {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-body); 
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.9;
  margin-bottom: 1rem;
}
.prose em { font-style: italic; color: var(--ink); }
.prose:last-child { margin-bottom: 0; }

/* Body paragraph on dark backgrounds */
.prose--dark {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-body);
  font-weight: 300;
  color: rgba(245,238,214,0.8);
  line-height: 1.9;
  margin-bottom: 1rem;
  max-width: 560px;
}
.prose--dark em { font-style: italic; color: rgba(245,238,214,0.85); }
.prose--dark:last-child { margin-bottom: 0; }


/* ============================================================
   10. QUOTE BLOCK
   Left-bordered pull quote. Use for testimonials or key statements.
   ============================================================ */

.quote-block {
  border-left: 1px solid rgba(125,10,64,0.2);
  padding-left: 1.75rem;
  margin-top: 2.5rem;
}

.quote-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
}

.quote-attr {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}


/* ============================================================
   11. IMAGE SECTION
   Full-width atmospheric photo with gradient overlay.
   Recommended: nature, portals, diverse people, soft light.
   Image treatment: saturate(0.75) brightness(0.88) — warm, muted.

   PLACEHOLDER: replace src with your image.
   Suggested Unsplash searches:
     "forest light path", "garden threshold", "healing hands",
     "dawn mist", "doorway light", "diverse women nature"
   ============================================================ */

.img-section {
  position: relative;
  overflow: hidden;
}

.img-wrap {
  width: 100%;
  height: 420px;   /* adjust per page — 280px mobile, 500px+ for hero images */
  position: relative;
  overflow: hidden;
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  /* Warm, muted treatment — consistent across all pages */
  filter: saturate(0.75) brightness(0.88);
}

/* Gradient fades image into surrounding section */
.img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(245,238,214,0.15) 0%,
    rgba(245,238,214,0) 40%,
    rgba(245,238,214,0.85) 100%);
}

/* Caption / text below image */
.img-caption {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--side-pad) var(--section-pad);
  border-bottom: 0.5px solid rgba(52,39,74,0.08);
}

.img-caption-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1rem;
}

.img-caption-desc {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.9;
  max-width: 620px;
}


/* ============================================================
   12. ORIGIN / DARK PANEL
   Returns to Eggplant background mid-page.
   Used for the founder's personal story behind the program.
   ============================================================ */

.origin-section {
  background: var(--eggplant);
  position: relative;
  z-index: 2;
}

.origin-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--side-pad);
}

/* Large display text — e.g. "Joy. → Prosper." */
.origin-display {
  margin: 1.75rem 0 2.75rem;
}
.origin-word-faded {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(58px, 10vw, 88px);
  font-style: italic;
  font-weight: 400;
  color: rgba(245,238,214,0.14);
  line-height: 1;
}
.origin-word-arrow {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  margin: 0.5rem 0;
  padding-left: 3px;
}
.origin-word-bright {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(58px, 10vw, 88px);
  font-style: italic;
  font-weight: 400;
  color: rgba(245,238,214,0.9);
  line-height: 1;
}

/* Opening pull quote in origin section */
.origin-pull {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.6vw, 27px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(245,238,214,0.9);
  margin-bottom: 1.5rem;
  max-width: 560px;
}


/* ============================================================
   13. FOOTER CTA
   Closing section. Light background (Soft Cream).
   Contains: closing lines · primary CTA button · name/title.
   ============================================================ */

.footer-cta {
  background: var(--cream);
  text-align: center;
  padding: 6rem 2rem 5rem;
  position: relative;
  z-index: 2;
}

.footer-q {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 38px);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.footer-line {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-display-sm);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-light);
  margin-bottom: 0.5rem;
}

.footer-name-block {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 0.5px solid rgba(52,39,74,0.1);
}

.footer-name {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-mid);
}


/* ============================================================
   14. BUTTONS & LINKS
   ============================================================ */

/* ── PRIMARY BUTTON — filled Burgundy ──
   Use for: main CTA, "Begin the conversation", "Enroll now"
   Always on light (cream) backgrounds. */
.btn-primary {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 36px;
  background: var(--burgundy);
  color: var(--cream);
  border: none;
  border-radius: 24px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover {
  background: #6A0836;
}

/* ── SECONDARY BUTTON (light background) — outline Burgundy ──
   Use for: secondary actions, "Learn more", "See all programs" */
.btn-secondary {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 36px;
  background: transparent;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
  border-radius: 24px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover {
  background: var(--burgundy);
  color: var(--cream);
}

/* ── SECONDARY BUTTON (dark background) — outline Gold ──
   Use for: CTAs inside hero or origin sections */
.btn-secondary--dark {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 36px;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 24px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-secondary--dark:hover {
  background: rgba(212,175,55,0.1);
  border-color: var(--gold);
}

/* ── BODY TEXT LINKS ── */
a {
  color: var(--burgundy);
  text-decoration: underline;
  transition: color 0.2s;
}
a:hover {
  color: var(--gold);
}


/* ============================================================
   15. GRID UTILITIES
   Common grid patterns used across landing pages.
   ============================================================ */

/* Three-column content grid (features, pillars, circles)
   Collapses to single column on mobile */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(52,39,74,0.1);
  margin: 2.5rem 0;
}

.grid-3-cell {
  background: var(--cream);
  padding: 2rem 1.5rem;
}

/* Two-column content grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2.5rem 0;
}

/* Numbered phase/step row: large number left, content right */
.phase-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.5px solid rgba(52,39,74,0.07);
  align-items: start;
}
.phase-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.phase-num {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-display-lg);
  font-weight: 400;
  color: rgba(52,39,74,0.15);
  line-height: 1;
  font-style: italic;
}

.phase-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.phase-desc {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-small);
  color: var(--ink-mid);
  line-height: 1.75;
  font-weight: 300;
}

/* "This is for you if" box — slightly deeper cream background */
.for-you-box {
  background: var(--cream-d);
  padding: 2.25rem;
  margin-top: 2.5rem;
}

.for-you-title {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  opacity: 0.7;
  margin-bottom: 1.5rem;
}

.for-you-item {
  display: flex;
  gap: 16px;
  margin-bottom: 1rem;
  align-items: flex-start;
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-small);
  color: var(--ink-mid);
  line-height: 1.75;
  font-weight: 300;
}
.for-you-item:last-child { margin-bottom: 0; }

.for-you-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--burgundy);
  opacity: 0.5;
  margin-top: 10px;
  flex-shrink: 0;
}


/* ============================================================
   16. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .page-nav        { padding: 1rem var(--side-pad-mob); }
  .section         { padding: 3.5rem var(--side-pad-mob); }
  .img-caption     { padding: 2rem var(--side-pad-mob) 3.5rem; }
  .origin-inner    { padding: 3.5rem var(--side-pad-mob); }
  .footer-cta      { padding: 4rem var(--side-pad-mob); }
  .img-wrap        { height: 280px; }
  .grid-3          { grid-template-columns: 1fr; }
  .grid-2          { grid-template-columns: 1fr; }
  .phase-row       { grid-template-columns: 48px 1fr; gap: 1rem; }
  .for-you-box     { padding: 1.5rem; }
}