/* =========================================================
   Adventures with Maverick — shared styles
   Colors & fonts come from Brand Tokens v2.0. Edit tokens
   in :root only; never hardcode hex/fonts in the pages.
   ========================================================= */

:root{
  /* Logo (fixed) */
  --logo-purple:#3D3DB5; --logo-red:#8B1A1A; --logo-olive:#6B7800; --gold:#F5C53A;
  /* Working palette */
  --cream:#FFFBEC; --brown:#4A2E18; --brand-red:#D64533; --amber:#F4A62B;
  --amber-outline:#4E3320; --navy:#2A3A5A; --blue:#3A9FD4; --firefly:#F5F068;
  --forest:#0D3D28; --ginger:#C85C12; --cream-text:#FFFBEC;
  /* Fonts */
  --display:"Baloo 2", system-ui, sans-serif;
  --body:"Mali", system-ui, sans-serif;
  --loud:"Luckiest Guy", cursive;
  --soft:"Gochi Hand", cursive;
  /* Scale */
  --t-display:clamp(38px,7vw,64px); --t-h1:clamp(30px,5vw,48px);
  --t-h2:clamp(24px,4vw,36px); --t-h3:clamp(20px,3vw,28px); --t-h4:22px;
  --t-body:18px; --t-sm:14px;
  /* Spacing & radius */
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-md:16px; --r-lg:24px; --r-xl:40px; --r-full:9999px;
  --maxw:1080px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--body); font-size:var(--t-body); line-height:1.6;
  color:var(--brown); background:var(--cream); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:var(--blue); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.05; color:var(--logo-purple); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }
.section{ padding:var(--s8) 0; }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--display); font-weight:700; font-size:var(--t-body);
  border-radius:var(--r-full); padding:13px 26px; display:inline-block;
  text-decoration:none; border:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(74,46,24,.18); }
.btn-primary{ background:var(--brand-red); color:var(--cream-text); }
.btn-gold{ background:var(--amber); color:var(--brown); }
.btn-ghost{ background:transparent; border:2.5px solid var(--logo-olive); color:var(--logo-olive); }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,251,236,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(74,46,24,.10); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  max-width:var(--maxw); margin:0 auto; padding:10px var(--s5); }
.nav .logo img{ height:54px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:var(--s5); list-style:none; }
.nav-links a{ font-family:var(--display); font-weight:600; font-size:16px;
  color:var(--brown); text-decoration:none; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--brand-red); }
.nav-right{ display:flex; align-items:center; gap:var(--s4); }
.nav-toggle{ display:none; background:none; border:none; font-size:28px; color:var(--logo-purple); cursor:pointer; }
.social-ico{ color:var(--logo-purple); display:inline-flex; align-items:center; transition:color .15s ease; }
.social-ico:hover{ color:var(--brand-red); }
.social-ico svg{ width:22px; height:22px; }
.ad-slot{ padding:var(--s6) var(--s5); text-align:center; }
.ad-slot ins{ display:block; max-width:728px; margin:0 auto; }
.ad-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#b3a691; margin-bottom:6px; }

/* ---------- Hero ---------- */
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s7);
  align-items:center; padding:var(--s8) 0; }
.hero h1{ font-size:var(--t-display); color:var(--logo-purple); margin-bottom:var(--s4); }
.hero h1 .red{ color:var(--brand-red); }
.hero p.lead{ font-size:clamp(18px,2.4vw,22px); margin-bottom:var(--s5); max-width:34ch; }
.hero .cta-row{ display:flex; gap:var(--s4); flex-wrap:wrap; }
.hero-img{ border-radius:var(--r-lg); box-shadow:0 18px 40px rgba(42,58,90,.18);
  transform:rotate(1.5deg); overflow:hidden; background:#fff; }
.hero-img img{ width:100%; height:auto; }

/* ---------- Generic blocks ---------- */
.center{ text-align:center; }
.eyebrow{ font-family:var(--display); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:13px; color:var(--logo-olive); }
.section h2{ font-size:var(--t-h2); margin:6px 0 var(--s5); }
.bg-navy{ background:var(--navy); color:var(--cream-text); }
.bg-navy h2,.bg-navy h3{ color:#fff; }
.bg-forest{ background:var(--forest); color:var(--cream-text); }
.bg-forest h2,.bg-forest h3{ color:#fff; }
.bg-amber{ background:var(--amber); }
.muted{ opacity:.85; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:var(--s5); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.card{ background:#fff; color:var(--brown); border:1px solid rgba(74,46,24,.10); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:0 6px 18px rgba(74,46,24,.06); }
.card h3{ color:var(--brown); font-size:var(--t-h3); margin-bottom:var(--s2); }
.card .role{ font-family:var(--soft); color:var(--ginger); font-size:18px; margin-bottom:var(--s3); }
.card img{ border-radius:var(--r-md); margin-bottom:var(--s4); width:100%; object-fit:cover; }

/* ---------- Social proof / video ---------- */
.feature{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--s6); align-items:center; }
.feature .thumb{ position:relative; border-radius:var(--r-lg); overflow:hidden; display:block; }
.feature .thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.feature .thumb .play span{ background:var(--brand-red); color:#fff; width:64px; height:64px;
  border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; font-size:26px; }

/* ---------- Instagram strip ---------- */
.ig-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.ig-strip img{ aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-md); }

/* ---------- Email signup ---------- */
.signup{ text-align:center; }
.signup .embed-slot{ max-width:560px; margin:var(--s5) auto 0; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:var(--cream-text); padding:var(--s8) 0 var(--s6); }
.site-footer a{ color:var(--firefly); text-decoration:none; }
.footer-grid{ display:flex; flex-wrap:wrap; gap:var(--s7); justify-content:space-between; }
.footer-grid img{ height:60px; }
.footer-links{ list-style:none; display:flex; flex-direction:column; gap:var(--s2); }
.footer-bottom{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.15);
  font-size:13px; opacity:.8; display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; }

/* ---------- Sound word accents ---------- */
.sfx-loud{ font-family:var(--loud); color:var(--brand-red); }
.sfx-soft{ font-family:var(--soft); color:var(--amber); }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; text-align:center; }
  .hero p.lead{ margin-inline:auto; }
  .hero .cta-row{ justify-content:center; }
  .hero-img{ order:-1; transform:none; max-width:360px; margin:0 auto; }
  .feature{ grid-template-columns:1fr; }
  .cols-3,.cols-2{ grid-template-columns:1fr; }
  .ig-strip{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; position:absolute; top:74px; left:0; right:0; flex-direction:column;
    background:var(--cream); padding:var(--s5); gap:var(--s4); border-bottom:1px solid rgba(74,46,24,.1); }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  html{ scroll-behavior:auto; }
}