/* =========================================================
   PERENNE GROWTH PARTNERS — Brand tokens
   Palette extracted from the brand guide (vector fills).
   ========================================================= */

:root {
  /* Core palette — mapped to brand guide swatch roles */
  --cream:        #fffaf2;  /* Primary neutral — main background */
  --cream-deep:   #f6efe3;  /* Slightly deeper warm panel */
  --paper:        #fffdf9;  /* Lightest card surface */
  --ink:          #2b383e;  /* Text / dark */
  --ink-soft:     #56656c;  /* Supporting text */
  --slate:        #697276;  /* Supporting */
  --blue:         #21518d;  /* PRIMARY brand blue */
  --blue-deep:    #1b416f;  /* Hover / deep */
  --gold:         #d2a865;  /* Supporting gold (logo "GROWTH PARTNERS") */
  --gold-soft:    #e3cfa6;
  --gold-deep:    #b88a44;
  --rose:         #e2b4a9;  /* WARM ACCENT — dusty rose */
  --rose-soft:    #f1d8d1;
  --rose-deep:    #c98e80;
  --sage:         #84a483;  /* DARK ACCENT — perennial green */
  --sage-pale:    #e4e9cd;  /* MUTED ACCENT — pale sage */
  --sage-soft:    #cdd9c5;
  --taupe:        #ded8d2;  /* Dividers / borders */
  --taupe-soft:   #ece7e0;

  /* Type — Cormorant Garamond stands in for Presti Display */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

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

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  font-size: 17px;
  line-height: 1.65;
}

/* Eyebrow / label — stands in for Agenda Light */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--ink); }

a { color: inherit; }

/* ---- Logo lockup (type-faithful; botanical mark is a placeholder) ---- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.logo__mark { width: 26px; height: 30px; flex: none; color: var(--gold); }
.logo__type {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.20em;
  font-size: 22px;
  line-height: .9;
  color: var(--blue);
  text-transform: uppercase;
}
.logo__sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.40em;
  color: var(--gold-deep);
  text-transform: uppercase;
  padding-left: 2px;
}
/* Reversed (for dark/gold backgrounds) */
.logo--rev .logo__name { color: var(--cream); }
.logo--rev .logo__sub { color: var(--cream); opacity: .82; }
.logo--rev .logo__mark { color: var(--cream); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 14.5px;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--ghost-light { background: transparent; color: var(--cream); border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); }

/* ---- Headshot placeholder ---- */
.headshot {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 18%, var(--cream-deep) 0%, var(--taupe-soft) 60%, var(--taupe) 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.headshot svg { width: 58%; height: 58%; opacity: .5; color: var(--slate); }
.headshot::after {
  content: "Megan Heinen — headshot";
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate); opacity: .75;
}

/* ---- Circular image placeholder (magazine style) ---- */
.circle { position: relative; aspect-ratio: 1; }
.circle .headshot { width: 100%; height: 100%; border-radius: 50%; }
.circle .headshot::after { bottom: 16%; font-size: 9.5px; }
.circle--ring::before {
  content:""; position: absolute; inset: -14px; border: 1px solid var(--gold);
  border-radius: 50%; pointer-events: none;
}
.circle--ring-rose::before { border-color: var(--rose-deep); }
.circle--ring-sage::before { border-color: var(--sage); }

/* ---- Floral accent (decorative botanical sprig) ---- */
.accent { position: absolute; pointer-events: none; z-index: 0; }
.accent use, .accent svg { color: currentColor; }

/* Magazine divider — short rule with a centered motif */
.divider { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0; }
.divider::before, .divider::after { content:""; height: 1px; width: 84px; background: var(--taupe); }
.divider svg { width: 24px; color: var(--gold); }

/* Note: scroll-reveal animation removed — preview iframes pause CSS
   transitions when unfocused, which would freeze content at opacity:0.
   All content is visible by default. */