/* =========================================================
   Natural ADHD Remedy — design tokens
   Palette: canopy greens + amber sunlight + sky-focus blue
   Type: Fraunces (display) / Work Sans (body)
   ========================================================= */

:root{
  --forest:      #1B3A2B;
  --moss:        #3F6B4A;
  --sage:        #8FAE8B;
  --sage-pale:   #DCE7D6;
  --paper:       #F6F1E4;
  --paper-deep:  #EFE7D2;
  --bark:        #2A241C;
  --amber:       #D9A441;
  --amber-deep:  #B9832E;
  --sky:         #5E8AA6;
  --sky-pale:    #E3EDF1;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, Segoe UI, sans-serif;

  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 10px 30px -12px rgba(27,58,43,0.25);
  --max: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--bark);
  background: var(--paper);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: var(--moss); }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--forest);
  line-height: 1.15;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 600; }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 600; }
h3{ font-size: 1.25rem; font-weight: 600; }
p{ margin: 0 0 1.1em; }
.wrap{ max-width: var(--max); margin-inline:auto; padding-inline: 24px; }
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--forest); color:#fff;
  padding:10px 16px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------------- Header / nav ---------------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(246,241,228,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(27,58,43,0.12);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--forest);
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  flex-shrink:0;
}
.brand__mark{ color: var(--moss); }
.brand__text strong{ color: var(--amber-deep); font-weight:600; }

.site-nav ul{
  display:flex; gap: 6px; list-style:none; margin:0; padding:0;
}
.site-nav a{
  display:inline-block; text-decoration:none; color: var(--bark);
  font-weight:500; font-size:0.97rem; padding: 8px 14px; border-radius: 999px;
  position:relative;
}
.site-nav a:hover{ background: var(--sage-pale); color: var(--forest); }
.site-nav a.is-active{ background: var(--forest); color: var(--paper); }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle__box{ display:flex; flex-direction:column; gap:5px; width:26px; }
.nav-toggle__bar{
  height:2.5px; background: var(--forest); border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; top:74px; left:0; right:0;
    background: var(--paper); border-bottom:1px solid rgba(27,58,43,0.12);
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  .site-nav.is-open{ max-height: 420px; }
  .site-nav ul{ flex-direction:column; padding: 8px 24px 18px; gap:2px; }
  .site-nav a{ display:block; padding:12px 10px; border-radius:8px; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--sage-pale) 0%, var(--paper) 78%);
  padding: 64px 0 40px;
}
.hero__inner{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--moss); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--amber); display:inline-block; }
.hero p.lead{ font-size:1.15rem; color:#3c3628; max-width:52ch; }
.button-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 22px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 24px; border-radius:999px; font-weight:600; text-decoration:none;
  font-size:0.98rem; transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background: var(--forest); color:#fff; }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost{ background:transparent; color: var(--forest); border:1.5px solid var(--forest); }
.btn-ghost:hover{ background: var(--forest); color:#fff; }

.hero__art{ position:relative; }

@media (max-width: 880px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:280px; margin-inline:auto; }
}

/* ---------------- Growth-ring signature element ---------------- */
.ring-diagram{ width:100%; height:auto; }
.ring-diagram circle{ fill:none; stroke-width:1.4; }

/* ---------------- Sections ---------------- */
section{ padding: 56px 0; }
.section-alt{ background: var(--paper-deep); }
.section-forest{ background: var(--forest); color: var(--sage-pale); }
.section-forest h2, .section-forest h3{ color:#fff; }
.section-forest a{ color: var(--amber); }

.section-head{ max-width:70ch; margin-bottom: 34px; }
.section-head .eyebrow{ margin-bottom:10px; }

/* Leaf divider */
.leaf-divider{ display:flex; justify-content:center; padding: 6px 0 30px; opacity:.55; }

/* ---------------- Cards / grids ---------------- */
.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background:#fff; border-radius: var(--radius-lg);
  padding: 26px 24px; border:1px solid rgba(27,58,43,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.card__icon{
  width:44px; height:44px; border-radius:12px; background: var(--sage-pale);
  display:flex; align-items:center; justify-content:center; color: var(--moss);
  margin-bottom:14px;
}
.card--sky .card__icon{ background: var(--sky-pale); color: var(--sky); }
.card--amber .card__icon{ background: #F6E7C7; color: var(--amber-deep); }

.pill{
  display:inline-block; background: var(--sage-pale); color: var(--moss);
  font-size:.78rem; font-weight:600; padding:4px 12px; border-radius:999px;
  margin-bottom: 10px;
}

/* Neurotransmitter comparison table-ish cards */
.compare{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
@media (max-width: 780px){ .compare{ grid-template-columns:1fr; } }
.compare .card{ border-top: 4px solid var(--moss); }
.compare .card.sky-border{ border-top-color: var(--sky); }

/* ---------------- Content pages (about/terms/privacy) ---------------- */
.prose{ max-width: 74ch; }
.prose h2{ margin-top: 1.6em; }
.prose ul, .prose ol{ padding-left: 1.3em; }
.prose li{ margin-bottom:.5em; }
.callout{
  background: var(--sage-pale); border-left: 4px solid var(--moss);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; margin: 1.6em 0;
}
.callout--amber{ background:#FBF0DA; border-left-color: var(--amber); }
.callout strong{ color: var(--forest); }

/* ---------------- Contact form ---------------- */
.form-grid{ display:grid; gap:18px; max-width:640px; }
label{ font-weight:600; display:block; margin-bottom:6px; font-size:.92rem; }
input, textarea, select{
  width:100%; font-family: var(--font-body); font-size:1rem;
  padding:12px 14px; border-radius:10px; border:1.5px solid #CBD3C6;
  background:#fff; color: var(--bark);
}
input:focus, textarea:focus, select:focus{
  outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(63,107,74,0.15);
}
textarea{ resize: vertical; min-height:140px; }
.field-error{ color:#B3421D; font-size:.85rem; margin-top:4px; }
.alert{ padding:16px 20px; border-radius: var(--radius); margin-bottom: 22px; font-weight:500; }
.alert-success{ background:#E1EEDD; color:#264B23; border:1px solid #B7D6AE; }
.alert-error{ background:#F8E2DA; color:#7A2E12; border:1px solid #EFC0AC; }

.contact-info{ display:flex; gap:16px; flex-wrap:wrap; margin: 20px 0 34px; }
.contact-info .card{ flex:1 1 220px; }

/* ---------------- Misc ---------------- */
.footnote{ font-size:.85rem; color:#5b5646; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--forest); color: var(--sage-pale); padding-top: 48px; }
.site-footer__inner{
  display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:32px;
  padding-bottom: 30px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.site-footer__grow p{ margin:0 0 4px; }
.site-footer__grow strong{ color: var(--amber); }
.site-footer__tagline{ opacity:.75; font-size:.92rem; }
.site-footer__nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.site-footer__nav a{ color: var(--sage-pale); text-decoration:none; opacity:.9; }
.site-footer__nav a:hover{ opacity:1; text-decoration:underline; }
.site-footer__contact a{ color: var(--amber); }
.site-footer__disclaimer{
  padding: 20px 24px 30px; font-size:.82rem; opacity:.75; max-width:900px;
}
@media (max-width: 780px){
  .site-footer__inner{ grid-template-columns:1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}