/* MūlaM Wellness — Cloudflare Pages ready, dependency-light stylesheet */
:root {
  --forest: #173d2b;
  --forest-2: #0f2d20;
  --sage: #687c63;
  --gold: #b58a32;
  --gold-soft: #d6bd79;
  --cream: #f6f1e7;
  --paper: #fbf9f3;
  --ink: #243127;
  --muted: #697066;
  --line: rgba(23,61,43,.16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", "Manrope", Arial, sans-serif;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
.announcement {
  background: var(--forest); color: #eee8d8; text-align: center;
  padding: 7px 16px; letter-spacing: .22em; font-size: 10px; font-weight: 700;
}
.site-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; max-width: var(--max); margin: auto; padding: 12px 28px;
  background: rgba(251,249,243,.91); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
}
.brand img { width: 176px; height: 74px; object-fit: cover; object-position: center 48%; mix-blend-mode: multiply; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 600; }
.nav a { position: relative; padding: 8px 0; }
.nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 1px; background: var(--gold); transition: width .25s; }
.nav a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta { background: var(--forest); color: white; border-radius: 99px; padding: 10px 17px !important; }
.menu-toggle { display:none; background:none; border:0; font-size:24px; color:var(--forest); }

.hero {
  max-width: var(--max); min-height: 720px; margin: auto; padding: 84px 28px 76px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.eyebrow, .section-kicker, .phase-label {
  color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .23em;
}
.hero h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: .98; margin: 0; }
.hero h1 { font-size: clamp(60px, 7vw, 94px); color: var(--forest); letter-spacing: -.035em; }
.hero h1 em, h2 em { color: var(--gold); font-style: italic; }
.hero-lead { max-width: 600px; margin: 30px 0; font-size: 18px; color: #5c645d; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button { border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:14px 23px; border-radius:99px; font:700 13px var(--sans); letter-spacing:.02em; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow:0 8px 22px rgba(23,61,43,.16); }
.button-primary { background:var(--forest); color:white; }
.text-link { font-size:13px; font-weight:700; color:var(--forest); }
.text-link span { color:var(--gold); margin-left:7px; }
.hero-note { margin-top: 42px; color: #70766e; font-size:12px; }
.leaf-mark { color:var(--gold); margin-right:10px; }
.hero-art { min-height: 550px; display:flex; align-items:center; justify-content:center; }
.art-frame {
  width:min(480px, 100%); aspect-ratio: .82; position:relative; overflow:hidden;
  border-radius: 240px 240px 30px 30px; background:
  radial-gradient(circle at 45% 30%, rgba(207,218,186,.85), transparent 25%),
  linear-gradient(145deg,#ece7d9,#dfe6d5 58%,#c7d1bb);
  box-shadow: 0 28px 70px rgba(25,52,35,.18);
}
.art-frame::before { content:""; position:absolute; inset:20px; border:1px solid rgba(181,138,50,.45); border-radius:220px 220px 20px 20px; }
.orb { position:absolute; width:260px; height:260px; border-radius:50%; top:70px; left:50%; transform:translateX(-50%); background:rgba(250,247,234,.68); border:1px solid rgba(181,138,50,.4); }
.gold-ring { position:absolute; width:310px; height:310px; border:1px solid rgba(181,138,50,.38); border-radius:50%; top:45px; left:50%; transform:translateX(-50%); }
.herb-card {
  position:absolute; left:50%; transform:translateX(-50%); bottom:72px; width:76%;
  padding:28px; text-align:center; background:rgba(250,247,237,.9); border:1px solid rgba(181,138,50,.35);
  box-shadow:0 18px 40px rgba(44,58,39,.13);
}
.card-kicker { font-size:9px; letter-spacing:.25em; color:var(--gold); font-weight:800; }
.herb-card strong { display:block; font:600 42px/1 var(--serif); color:var(--forest); margin:16px 0; }
.card-line { display:block; width:42px; height:1px; background:var(--gold); margin:0 auto 15px; }
.herb-card small { color:#667064; font-size:11px; }
.plant { position:absolute; width:190px; height:300px; opacity:.55; }
.plant::before, .plant::after { content:""; position:absolute; background:#617a55; border-radius:100% 0 100% 0; width:55px; height:105px; transform:rotate(-28deg); }
.plant::before { left:30px; top:40px; box-shadow:55px 35px 0 #7d916a, 5px 115px 0 #71875e, 70px 155px 0 #82946f; }
.plant::after { right:20px; top:100px; transform:rotate(34deg); box-shadow:-45px 60px 0 #687f59; }
.plant-one { left:-10px; top:40px; transform:rotate(-22deg); }
.plant-two { right:-35px; top:25px; transform:rotate(25deg); }

.trust-strip {
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:repeat(4,1fr); max-width:var(--max); margin:auto;
}
.trust-strip div { padding:22px; text-align:center; font-size:11px; font-weight:700; letter-spacing:.1em; color:#586258; }
.trust-strip span { color:var(--gold); margin-right:8px; }

.section { max-width:var(--max); margin:auto; padding:115px 28px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:90px; margin-top:25px; }
.intro h2 { font-size:clamp(55px,6vw,78px); color:var(--forest); max-width:520px; }
.body-copy { max-width:550px; color:#656d65; font-size:16px; }
.body-copy p { margin-top:0; margin-bottom:22px; }

.dark { max-width:none; position:relative; overflow:hidden; background:var(--forest); color:#e9e8dc; padding-left:max(28px, calc((100vw - var(--max))/2 + 28px)); padding-right:max(28px, calc((100vw - var(--max))/2 + 28px)); }
.dark::before { content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(214,189,121,.18); border-radius:50%; right:-190px; top:-230px; }
.light { color:var(--gold-soft); }
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; margin-top:35px; position:relative; }
.mission h2 { font-size:clamp(54px,6vw,80px); color:#f2efe4; max-width:620px; }
.mission-text { padding-top:8px; max-width:570px; color:#c7cbbf; }
.mission-text .large { font:500 24px/1.45 var(--serif); color:#f1eee3; }
.mission-rule { width:70px; height:1px; background:var(--gold-soft); margin:30px 0; }

.center-head { text-align:center; max-width:730px; margin:auto; }
.center-head h2 { font-size:clamp(52px,5vw,72px); color:var(--forest); margin-top:12px; }
.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:65px; }
.pillar { min-height:265px; padding:30px; border:1px solid var(--line); background:#f7f4eb; transition:transform .25s, box-shadow .25s; }
.pillar:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(23,61,43,.08); }
.pillar:nth-child(4), .pillar:nth-child(5) { grid-column:span 1; }
.pillar .number { color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.15em; }
.pillar h3 { color:var(--forest); font-size:30px; margin:22px 0 13px; }
.pillar p { color:#687068; font-size:13px; margin:0; }

.roadmap { background:#eeeadf; max-width:none; padding-left:max(28px, calc((100vw - var(--max))/2 + 28px)); padding-right:max(28px, calc((100vw - var(--max))/2 + 28px)); }
.roadmap-top { max-width:var(--max); margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:100px; align-items:end; }
.roadmap h2 { color:var(--forest); font-size:clamp(56px,5.8vw,78px); margin-top:12px; }
.roadmap-top > p { color:#687068; max-width:490px; margin:0 0 4px; }
.timeline { max-width:var(--max); margin:70px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
.timeline::before { content:""; position:absolute; top:32px; left:7%; right:7%; height:1px; background:rgba(181,138,50,.5); }
.phase { padding:0 35px 10px 0; position:relative; }
.phase:not(:last-child) { border-right:1px solid var(--line); margin-right:35px; padding-right:35px; }
.phase-marker { width:65px; height:65px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--paper); border:1px solid var(--gold); color:var(--forest); font:600 27px var(--serif); position:relative; z-index:2; }
.phase-label { margin-top:28px; }
.phase h3 { color:var(--forest); font-size:38px; margin:8px 0 14px; }
.phase-content > p:not(.phase-label) { color:#667066; font-size:13px; min-height:76px; }
.phase ul { padding:0; list-style:none; border-top:1px solid var(--line); margin-top:20px; }
.phase li { padding:11px 0; border-bottom:1px solid var(--line); font-size:12px; color:#596159; }
.phase li::before { content:"✦"; color:var(--gold); margin-right:9px; }

.coming { max-width:none; text-align:center; background:
  linear-gradient(rgba(23,61,43,.96),rgba(23,61,43,.96)),
  url("assets/botanical-reference.jpg") center/cover;
  color:#f5f1e6; padding-top:125px; padding-bottom:125px;
}
.coming-inner { max-width:760px; margin:auto; }
.coming h2 { font-size:clamp(65px,7vw,92px); margin:18px 0; }
.coming p { color:#cbd0c3; max-width:650px; margin:0 auto 30px; font-size:17px; }
.coming-badge { display:inline-block; border:1px solid rgba(214,189,121,.55); padding:9px 17px; border-radius:99px; color:var(--gold-soft); letter-spacing:.16em; font-size:10px; font-weight:800; }

.contact { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.contact h2 { color:var(--forest); font-size:clamp(55px,5.5vw,75px); margin-top:12px; }
.waitlist label { display:block; color:#687068; font-size:13px; margin-bottom:12px; }
.email-row { display:flex; border-bottom:1px solid var(--forest); }
.email-row input { flex:1; min-width:0; border:0; background:transparent; outline:0; padding:15px 4px; font:14px var(--sans); }
.email-row .button { margin-bottom:6px; }
.form-note { font-size:11px; color:#8a9089; }

.footer { background:#102a1d; color:#c8cec1; padding:45px max(28px, calc((100vw - var(--max))/2 + 28px)); display:grid; grid-template-columns:1fr auto; gap:20px; }
.footer-brand img { width:160px; height:60px; object-fit:cover; object-position:center 48%; mix-blend-mode:screen; opacity:.92; }
.footer-brand p { margin:3px 0 0; font:16px var(--serif); color:#e5dfcf; }
.footer-links { display:flex; gap:25px; align-items:center; font-size:12px; }
.footer-links a:hover { color:var(--gold-soft); }
.copyright { grid-column:1/-1; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:10px; color:#8f9a8e; letter-spacing:.08em; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 850px) {
  .site-header { padding:10px 18px; }
  .brand img { width:150px; height:62px; }
  .menu-toggle { display:block; }
  .nav { display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); padding:12px 22px 22px; flex-direction:column; align-items:stretch; gap:4px; }
  .nav.open { display:flex; }
  .nav a { padding:12px 3px; }
  .nav-cta { text-align:center; margin-top:6px; }
  .hero { grid-template-columns:1fr; padding-top:65px; }
  .hero-art { min-height:470px; }
  .split, .mission-grid, .roadmap-top, .contact { grid-template-columns:1fr; gap:40px; }
  .pillar-grid { grid-template-columns:1fr 1fr; }
  .timeline { grid-template-columns:1fr; gap:48px; }
  .timeline::before { top:0; bottom:0; left:32px; right:auto; width:1px; height:auto; }
  .phase, .phase:not(:last-child) { border-right:0; border-bottom:1px solid var(--line); margin:0; padding:0 0 40px 0; }
  .phase-content { padding-left:0; }
  .phase-marker { margin-left:0; }
}
@media (max-width: 560px) {
  .announcement { font-size:8px; letter-spacing:.13em; }
  .hero { padding-left:20px; padding-right:20px; }
  .section { padding:80px 20px; }
  .hero h1 { font-size:56px; }
  .hero-lead { font-size:16px; }
  .trust-strip { grid-template-columns:1fr 1fr; }
  .trust-strip div { padding:15px 8px; font-size:9px; }
  .pillar-grid { grid-template-columns:1fr; }
  .pillar { min-height:auto; }
  .herb-card strong { font-size:34px; }
  .footer { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
  .copyright { grid-column:auto; }
}