/* ===========================================================================
   Green Life Medical Clinics — design tokens & base
   Botanical green-on-white clinical palette, keyed to the brand logo.
   =========================================================================== */
:root{
  /* palette (from CLAUDE-DESIGN.md) */
  --bg:        #FFFFFF;
  --surface:   #F3F7F2;
  --surface-2: #EAF1EA;
  --text:      #15241B;
  --muted:     #5C6B61;
  --primary:   #1E7A41;
  --primary-d: #196B39;
  --secondary: #15603A;
  --forest:    #0F3B24;
  --accent:    #C2A04A;
  --accent-d:  #A8853A;
  --border:    #DCE6DD;
  --focus:     #1E7A41;

  /* fonts (overridable via Tweaks) */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* rhythm */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px rgba(15,59,36,.04), 0 4px 14px rgba(15,59,36,.05);
  --shadow-md: 0 10px 30px rgba(15,59,36,.08), 0 2px 8px rgba(15,59,36,.05);
  --shadow-lg: 0 24px 64px rgba(15,59,36,.14), 0 6px 18px rgba(15,59,36,.08);
  --nav-h: 92px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }

/* ---- typography ---- */
.display{ font-family:var(--font-display); font-weight:400; line-height:1.04; letter-spacing:-.012em; }
h1,h2,h3,h4{ margin:0; }
.eyebrow{
  font-family:var(--font-sans);
  font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--primary); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; }
.serif-i{ font-style:italic; color:var(--secondary); }

/* ---- layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px, 9vw, 116px); }
.section.tight{ padding-block:clamp(44px,6vw,72px); }
.surface{ background:var(--surface); }
.center{ text-align:center; }
.lede{ color:var(--muted); font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.7; max-width:62ch; }
.lede.center{ margin-inline:auto; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-sans); font-weight:600; font-size:1rem;
  padding:14px 26px; border-radius:999px; min-height:50px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s, color .2s, border-color .2s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 8px 22px rgba(30,122,65,.26); }
.btn-primary:hover{ background:var(--primary-d); transform:translateY(-2px); box-shadow:0 12px 30px rgba(30,122,65,.34); }
.btn-ghost{ background:transparent; color:var(--secondary); border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); background:#fff; transform:translateY(-2px); }
/* Call button sitting on the dark hero — outline-on-dark */
.hero-cta .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); backdrop-filter:blur(2px); }
.hero-cta .btn-ghost:hover{ color:var(--secondary); border-color:#fff; background:#fff; transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--secondary); box-shadow:var(--shadow-sm); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-wa{ background:#1FA855; color:#fff; box-shadow:0 8px 22px rgba(31,168,85,.26); }
.btn-wa:hover{ background:#198f48; transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-lg{ padding:17px 32px; font-size:1.06rem; min-height:56px; }

/* link with arrow */
.tlink{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--primary); }
.tlink svg{ width:18px; height:18px; transition:transform .25s; }
.tlink:hover svg{ transform:translateX(4px); }

/* ---- reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---- pills / chips ---- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--surface); border:1px solid var(--border); color:var(--secondary);
  font-weight:500; font-size:.92rem; padding:9px 15px; border-radius:999px;
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--primary); flex:none; }

/* utility */
.grid{ display:grid; gap:24px; }
.flow > * + *{ margin-top:18px; }
.muted{ color:var(--muted); }
.accent-text{ color:var(--accent-d); }