/* ============================================================
   GrowMint Media — Shared website chrome
   Nav, footer, section rhythm, inner-page hero, reveal motion.
   Pair with: tokens.css + brand.css (load this third).
   ============================================================ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
::selection { background: rgba(43,232,168,.25); }

/* ---------- shared rhythm ---------- */
.wrap { max-width: var(--gm-maxw); margin: 0 auto; padding: 0 var(--gm-space-6); }
.sec-pad { padding: var(--gm-space-9) 0; }
.sec-head { max-width: 62ch; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -.025em; margin: 12px 0 0; }
.sec-head p.lede { color: var(--gm-muted); font-size: var(--gm-text-lg); line-height: 1.55; margin: var(--gm-space-4) 0 0; max-width: 58ch; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(11,20,16,.72); border-bottom: 1px solid var(--gm-border); }
.nav-in { max-width: var(--gm-maxw); margin: 0 auto; padding: 14px var(--gm-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-5); }
.nav-in .brand { height: 28px; display: block; }
.nav-links { display: flex; gap: var(--gm-space-5); align-items: center; }
.nav-links a { color: var(--gm-muted); text-decoration: none; font-size: var(--gm-text-sm); font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--gm-text); }
.nav-links a.active { color: var(--gm-text); }
.nav-links a.gm-btn { color: #06120D; }

/* ---------- inner-page hero ---------- */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--gm-border); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(54% 60% at 78% -10%, rgba(14,158,114,.30) 0%, rgba(14,158,114,0) 60%),
             radial-gradient(40% 50% at 2% 110%, rgba(43,232,168,.12) 0%, rgba(43,232,168,0) 60%); }
.page-hero-in { position: relative; z-index: 1; max-width: var(--gm-maxw); margin: 0 auto; padding: var(--gm-space-9) var(--gm-space-6) var(--gm-space-8); }
.page-hero h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -.03em; margin: 14px 0 0; max-width: 18ch; }
.page-hero p.sub { color: var(--gm-muted); font-size: var(--gm-text-lg); line-height: 1.55; margin: var(--gm-space-5) 0 0; max-width: 56ch; }
.page-hero .cta-row { display: flex; gap: var(--gm-space-3); flex-wrap: wrap; align-items: center; margin-top: var(--gm-space-6); }

/* ---------- reusable final CTA band ---------- */
.cta-final { position: relative; overflow: hidden; border-radius: var(--gm-radius-xl); border: 1px solid rgba(43,232,168,.25); padding: var(--gm-space-9) var(--gm-space-8); text-align: center; background: var(--gm-radial-mint), var(--gm-surface); box-shadow: var(--gm-glow-mint); }
.cta-final h2 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 900; letter-spacing: -.03em; line-height: 1; margin: 0; }
.cta-final p { color: var(--gm-muted); font-size: var(--gm-text-lg); max-width: 48ch; margin: var(--gm-space-5) auto var(--gm-space-6); }
.cta-final .cta-row { display: flex; gap: var(--gm-space-3); flex-wrap: wrap; align-items: center; justify-content: center; }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--gm-border); margin-top: var(--gm-space-9); }
.foot-in { max-width: var(--gm-maxw); margin: 0 auto; padding: var(--gm-space-7) var(--gm-space-6); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gm-space-6); flex-wrap: wrap; }
.foot-in .brand img { height: 26px; }
.foot-in .tag { color: var(--gm-muted); font-size: var(--gm-text-sm); margin: var(--gm-space-3) 0 0; max-width: 36ch; }
.foot-cols { display: flex; gap: var(--gm-space-8); flex-wrap: wrap; }
.foot-col h5 { margin: 0 0 var(--gm-space-3); font-size: var(--gm-text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--gm-muted); }
.foot-col a { display: block; color: var(--gm-text); text-decoration: none; font-size: var(--gm-text-sm); padding: 5px 0; opacity: .85; }
.foot-col a:hover { color: var(--gm-mint); opacity: 1; }
.foot-bottom { border-top: 1px solid var(--gm-border); }
.foot-bottom-in { max-width: var(--gm-maxw); margin: 0 auto; padding: var(--gm-space-5) var(--gm-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-4); flex-wrap: wrap; color: var(--gm-muted); font-size: var(--gm-text-xs); }

/* ---------- reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- responsive nav ---------- */
@media (max-width: 720px) {
  .nav-links a:not(.gm-btn) { display: none; }
}