/* ============================================================
   NAN Design Token System — tokens.css
   Single source of truth for rachaelvanpelt.com,
   rightsizeretirement.com, and coach.rightsizeretirement.com
   ============================================================ */

:root {
  /* ── Primary Palette ── */
  --color-slate:        #2C4A6E;
  --color-ochre:        #C8872A;
  --color-sand:         #C4A882;
  --color-off-white:    #F7F4EF;
  --color-near-black:   #1E2B3A;

  /* ── Supporting Tints ── */
  --color-slate-10:     #E8EFF7;
  --color-slate-60:     #8BA3C0;
  --color-ochre-10:     #FDF5EC;
  --color-sand-50:      #F0EAE0;
  --color-white:        #FFFFFF;

  /* ── Semantic Aliases ── */
  --color-bg-page:        var(--color-off-white);
  --color-bg-card:        var(--color-white);
  --color-bg-section-alt: var(--color-sand-50);
  --color-bg-dark:        var(--color-slate);
  --color-text-primary:   var(--color-near-black);
  --color-text-muted:     var(--color-slate-60);
  --color-text-on-dark:   var(--color-white);
  --color-border:         var(--color-slate-60);
  --color-border-light:   var(--color-slate-10);
  --color-cta:            var(--color-ochre);
  --color-cta-hover:      var(--color-ochre-10);
  --color-link:           var(--color-slate);
  --color-link-hover:     var(--color-ochre);

  /* ── Font Families ── */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', Arial, Helvetica, sans-serif;

  /* ── Type Scale ── */
  --text-h1:      clamp(36px, 5vw, 52px);
  --text-h2:      clamp(26px, 3.5vw, 36px);
  --text-h3:      24px;
  --text-h4:      13px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-sm:      14px;
  --text-xs:      13px;

  /* ── Font Weights ── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Line Heights ── */
  --lh-heading: 1.15;
  --lh-subhead: 1.3;
  --lh-body:    1.7;

  /* ── Letter Spacing ── */
  --tracking-eyebrow: 0.08em;

  /* ── Spacing Scale (8px base) ── */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;
  --space-16: 128px;

  /* ── Section Padding ── */
  --section-pad-y: clamp(64px, 8vw, 120px);
  --section-pad-x: clamp(24px, 6vw, 80px);

  /* ── Max Widths ── */
  --max-width-content: 720px;
  --max-width-wide:    1200px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 100px;

  /* ── Borders ── */
  --border-default: 1px solid var(--color-border);
  --border-light:   0.5px solid var(--color-border-light);
}

/* ── Reset & Base ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family:            var(--font-body);
  font-size:              var(--text-body);
  font-weight:            var(--weight-regular);
  line-height:            var(--lh-body);
  color:                  var(--color-near-black);
  background:             var(--color-off-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-slate); text-decoration: none; transition: color .2s; }
a:hover { color: var(--color-ochre); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--weight-regular); }
h1 { font-size: var(--text-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--text-h2); line-height: 1.2; }
h3 { font-size: var(--text-h3); line-height: var(--lh-subhead); }

/* ── Layout Utilities ── */
.eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--text-h4);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color:          var(--color-slate-60);
  margin-bottom:  var(--space-2);
}
.container {
  max-width:     var(--max-width-wide);
  margin:        0 auto;
  padding-left:  var(--section-pad-x);
  padding-right: var(--section-pad-x);
}
.section {
  padding-top:    var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* ── Buttons ── */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      var(--color-ochre);
  color:           var(--color-near-black);
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     var(--weight-semibold);
  height:          48px;
  padding:         0 28px;
  border-radius:   var(--radius-pill);
  border:          2px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  transition:      all .25s;
  white-space:     nowrap;
}
.btn-primary:hover {
  background:   transparent;
  color:        var(--color-ochre);
  border-color: var(--color-ochre);
}
.btn-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      transparent;
  color:           var(--color-slate);
  border:          2px solid var(--color-slate);
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     var(--weight-semibold);
  height:          48px;
  padding:         0 28px;
  border-radius:   var(--radius-pill);
  cursor:          pointer;
  text-decoration: none;
  transition:      all .25s;
  white-space:     nowrap;
}
.btn-secondary:hover { background: var(--color-slate-10); }
.btn-secondary--light { color: #fff; border-color: rgba(255,255,255,.4); }
.btn-secondary--light:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* ── Card Link (inline arrow link pattern) ── */
.card-link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  margin-top:  14px;
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--color-ochre) !important;
  transition:  gap .2s;
}
.card-link:hover { gap: 8px; }

/* ── Pull Quote (Ochre-bordered) ── */
.pull-quote {
  border-left:   3px solid var(--color-ochre);
  padding:       var(--space-3) var(--space-4);
  margin:        var(--space-4) 0;
  background:    var(--color-ochre-10);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pull-quote p {
  font-size:   var(--text-body-lg);
  font-style:  italic;
  line-height: var(--lh-body);
  color:       var(--color-near-black);
}

/* ── Nav ── */
.nav {
  position:                fixed;
  top:                     0;
  left:                    0;
  right:                   0;
  z-index:                 100;
  background:              rgba(247,244,239,.92);
  backdrop-filter:         blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:           1px solid rgba(139,163,192,.15);
  transition:              box-shadow .3s;
}
.nav.scrolled { box-shadow: 0 1px 24px rgba(30,43,58,.08); }
.nav__inner {
  max-width:       var(--max-width-wide);
  margin:          0 auto;
  padding:         0 var(--section-pad-x);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          72px;
}
.nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav__logo img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav__links a:not(.btn-primary) {
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--color-near-black);
  text-decoration: none;
  position:        relative;
  padding-bottom:  2px;
}
.nav__links a:not(.btn-primary)::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--color-ochre);
  transition: width .25s;
}
.nav__links a:not(.btn-primary):hover::after { width: 100%; }
.nav__cta .btn-primary { height: 40px; font-size: 13px; padding: 0 20px; }
.nav__toggle {
  display:        none;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        8px;
  flex-direction: column;
  gap:            5px;
}
.nav__toggle span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--color-near-black);
  border-radius: 1px;
  transition:    all .3s;
}

/* ── Footer ── */
.footer {
  background: var(--color-near-black);
  color:      #fff;
  padding:    var(--space-8) 0 var(--space-4);
}
.footer__grid {
  display:               grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap:                   var(--space-6);
  margin-bottom:         var(--space-6);
}
.footer__brand-logo { height: 36px; width: auto; margin-bottom: var(--space-3); opacity: .9; }
.footer__brand p { font-size: var(--text-sm); opacity: .55; line-height: 1.7; max-width: 300px; }
.footer__social { display: flex; gap: 10px; margin-top: var(--space-3); }
.footer__social a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      rgba(255,255,255,.06);
  border:          1px solid rgba(255,255,255,.08);
  transition:      all .25s;
}
.footer__social a:hover { background: rgba(200,135,42,.2); border-color: rgba(200,135,42,.3); }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.7); }
.footer h4 {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom:  var(--space-3);
  color:          rgba(255,255,255,.35);
}
.footer__links { list-style: none; }
.footer__links li { margin-bottom: 8px; }
.footer__links a { font-size: var(--text-sm); color: rgba(255,255,255,.6) !important; transition: color .2s; }
.footer__links a:hover { color: var(--color-ochre) !important; }
.footer__divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin-bottom: var(--space-3); }
.footer__bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--space-2);
}
.footer__bottom p, .footer__bottom a { font-size: var(--text-xs); color: rgba(255,255,255,.3); }
.footer__bottom a:hover { color: rgba(255,255,255,.6); }

/* ── Reveal Animations ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity:    0;
    transform:  translateY(24px);
    transition: opacity .7s cubic-bezier(.25,.46,.45,.94),
                transform .7s cubic-bezier(.25,.46,.45,.94);
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-d1      { transition-delay: .1s; }
  .reveal-d2      { transition-delay: .2s; }
  .reveal-d3      { transition-delay: .3s; }
}

/* ── Responsive: Nav ── */
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__links.open {
    display:        flex;
    flex-direction: column;
    position:       absolute;
    top:            72px;
    left:           0;
    right:          0;
    background:     var(--color-off-white);
    padding:        var(--space-2) var(--section-pad-x) var(--space-4);
    border-bottom:  1px solid rgba(139,163,192,.15);
    box-shadow:     0 8px 30px rgba(30,43,58,.08);
    gap:            6px;
  }
  .nav__links.open a:not(.btn-primary) { padding: 10px 0; }
  .nav__links.open .nav__cta { margin-top: 8px; }
}

/* ── Responsive: Footer ── */
@media (max-width: 960px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 768px) {
  .footer__bottom { flex-direction: column; text-align: center; }
}