/* ============================================================
   Sandy Evenson · The House of You — Global Stylesheet
   ============================================================ */

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

:root {
  /* Brand colors */
  --anchor:       #1A3A38;
  --high-heart:   #14BACC;
  --solar:        #F7E030;
  --warm-white:   #F7F4EE;
  --muted-text:   #3a5450;
  --soft-aqua:    #E8F4F2;

  /* Chakra */
  --root:    #C0392B;
  --sacral:  #E67E22;
  --solar-c: #F7E030;
  --heart:   #52CFAD;
  --throat:  #3D6BBF;
  --crown:   #8E44AD;

  /* Semantic */
  --color-text-primary:        var(--anchor);
  --color-text-secondary:      var(--muted-text);
  --color-text-tertiary:       rgba(26,58,56,0.45);
  --color-background-primary:  var(--warm-white);
  --color-background-secondary: rgba(26,58,56,0.04);
  --color-border-secondary:    rgba(26,58,56,0.12);
  --color-border-tertiary:     rgba(26,58,56,0.08);

  --font-sans:  Verdana, Geneva, Tahoma, sans-serif;
  --font-serif: 'Palatino Linotype', Palatino, Georgia, serif;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); background: var(--warm-white); color: var(--muted-text); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── Shared nav ─────────────────────────────────────────── */
.site-nav {
  background: var(--warm-white);
  border-bottom: 0.5px solid rgba(26,58,56,0.1);
  padding: 0 40px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-brand-logo { height: 36px; width: auto; display: block; }
.nav-brand-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--anchor);
  white-space: nowrap;
}
.nav-links { margin-left: auto; }

@media (max-width: 480px) {
  .site-nav { padding: 0 14px; height: 52px; }
  .nav-brand-logo { height: 32px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 10px; }
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 13px;
  color: var(--anchor);
  opacity: 0.65;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--anchor);
  background: var(--solar);
  border-radius: 24px;
  padding: 9px 20px;
  opacity: 1 !important;
  transition: filter 0.2s;
}
.nav-cta:hover { filter: brightness(1.05); }
.nav-back {
  font-size: 12px;
  color: var(--anchor);
  opacity: 0.45;
}
.nav-back:hover { opacity: 0.75; }
.nav-tagline {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--high-heart);
  opacity: 1 !important;
}

/* ── Chakra bar ─────────────────────────────────────────── */
.chakra-bar { display: flex; height: 5px; }
.chakra-bar div { flex: 1; }

/* ── Shared buttons ─────────────────────────────────────── */
.btn-yellow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--anchor);
  background: var(--solar);
  border-radius: 24px;
  padding: 12px 28px;
  cursor: pointer;
  transition: filter 0.2s;
}
.btn-yellow:hover { filter: brightness(1.05); }
.btn-dark {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--warm-white);
  background: var(--anchor);
  border-radius: 24px;
  padding: 12px 28px;
  cursor: pointer;
}
.btn-ghost-light {
  display: inline-block;
  font-size: 13px;
  color: rgba(247,244,238,0.7);
  border: 0.5px solid rgba(247,244,238,0.2);
  border-radius: 24px;
  padding: 12px 28px;
}
.btn-ghost-dark {
  display: inline-block;
  font-size: 13px;
  color: var(--anchor);
  border: 0.5px solid rgba(26,58,56,0.25);
  border-radius: 24px;
  padding: 12px 28px;
}

/* ── Proof strip ────────────────────────────────────────── */
.proof-strip {
  background: var(--warm-white);
  border-top: 0.5px solid rgba(26,58,56,0.08);
  padding: 14px 40px;
  display: flex;
  gap: 32px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--anchor);
  white-space: nowrap;
}
.proof-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Site footer ─────────────────────────────────────────── */
.site-footer {
  background: var(--anchor);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.site-footer a {
  font-size: 12px;
  color: rgba(247,244,238,0.45);
  transition: color 0.2s;
}
.site-footer a:hover { color: rgba(247,244,238,0.85); }
.site-footer-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(247,244,238,0.2); }