// ev-pages-1.jsx — Home + About pages.

// ============================================================================
// HERO — three layouts driven by t.hero
// ============================================================================

function HomeHero() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();
  const go = (id) => { navigate(id); window.scrollTo({ top: 0, behavior: "instant" }); };
  const navH = v.isMobile ? 64 : 76;

  if (t.hero === "split") {
    // SUMMIT — bold split layout
    const padX = rv(v, 20, 40, 80);
    const padY = rv(v, 48, 56, 80);
    return (
      <section style={{ background: t.c.bg, paddingTop: navH }}>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1.05fr 1fr"), minHeight: v.isDesktop ? `calc(100vh - ${navH}px)` : "auto" }}>
          {/* LEFT — text */}
          <div style={{ display: "flex", alignItems: "center", padding: `${padY}px ${padX}px`, position: "relative", zIndex: 2 }}>
            <div style={{ maxWidth: 600 }}>
              <Eyebrow style={{ marginBottom: rv(v, 24, 28, 36) }}>Evergreen International / Est. 2024</Eyebrow>
              <h1
                style={{
                  fontFamily: t.fonts.display,
                  fontWeight: t.h.weight,
                  fontSize: "clamp(2.6rem, 10vw, 6.2rem)",
                  lineHeight: 0.95,
                  letterSpacing: t.h.ls,
                  color: t.c.ink,
                  margin: "0 0 28px",
                  textTransform: "uppercase",
                }}
              >
                Sustainability<br />
                <span style={{ color: t.c.primary }}>as</span><br />
                Security.
              </h1>
              <p
                style={{
                  fontFamily: t.fonts.body,
                  fontSize: "clamp(1rem, 2.4vw, 1.15rem)",
                  lineHeight: 1.6,
                  color: t.c.inkMid,
                  margin: "0 0 36px",
                  maxWidth: 520,
                }}
              >
                We help organizations turn environmental complexity into strategic clarity — through adaptive expertise, rigorous science, and cross-sector collaboration.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" }}>
                <Button onClick={() => go("contact")}>Begin the Conversation</Button>
                <Button variant="ghost" onClick={() => go("services")}>Our Services</Button>
              </div>
            </div>
          </div>
          {/* RIGHT — solid teal panel */}
          <div style={{ background: t.c.primary, color: "#fff", padding: `${padY}px ${padX}px`, display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 40, position: "relative", zIndex: 1, overflow: "hidden" }}>
            <div style={{ position: "absolute", top: -120, right: -120, width: 400, height: 400, border: "1px solid rgba(255,255,255,0.15)", borderRadius: "50%" }} />
            <div style={{ position: "absolute", top: -60, right: -60, width: 280, height: 280, border: "1px solid rgba(255,255,255,0.12)", borderRadius: "50%" }} />
            <div style={{ position: "relative" }}>
              <div style={{ fontSize: "0.7rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)", marginBottom: 24 }}>
                ◆ Our Conviction
              </div>
              <blockquote
                style={{
                  fontFamily: t.fonts.display,
                  fontWeight: t.h.weight,
                  fontSize: "clamp(1.4rem, 4.5vw, 2.6rem)",
                  lineHeight: 1.2,
                  margin: 0,
                  color: "#fff",
                  letterSpacing: "-0.02em",
                  textTransform: "uppercase",
                }}
              >
                The world doesn't need more plans. It needs people who can make them real.
              </blockquote>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: rv(v, 14, 18, 24), position: "relative" }}>
              {[["6", "Disciplines"], ["3", "Active Labs"], ["15+", "Partners"]].map(([n, l]) => (
                <div key={l} style={{ borderTop: "1px solid rgba(255,255,255,0.2)", paddingTop: 16 }}>
                  <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.8rem, 5vw, 2.6rem)", fontWeight: 700, lineHeight: 1, color: "#fff" }}>{n}</div>
                  <div style={{ fontSize: "0.68rem", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)", marginTop: 8 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (t.hero === "left") {
    // CANOPY — editorial left-aligned
    return (
      <section style={{ background: t.c.bg, paddingTop: navH, paddingBottom: rv(v, 56, 72, 0), minHeight: v.isDesktop ? `calc(100vh - ${navH}px)` : "auto", display: "flex", alignItems: "center", position: "relative", overflow: "hidden" }}>
        {/* Decorative organic shape, right side */}
        <svg
          width="600"
          height="600"
          viewBox="0 0 600 600"
          style={{ position: "absolute", right: v.isMobile ? -260 : -100, top: 100, opacity: v.isMobile ? 0.3 : 0.5, pointerEvents: "none" }}
        >
          <path
            d="M300 50 C 450 50, 550 150, 550 300 C 550 450, 450 550, 300 550 C 150 550, 50 450, 50 300 C 50 150, 150 50, 300 50 Z"
            fill={t.c.primaryLt}
          />
          <path
            d="M200 200 C 280 180, 380 220, 400 320 C 420 420, 320 450, 240 420 C 160 390, 140 280, 200 200 Z"
            fill={t.c.bgSoft}
          />
          <circle cx="320" cy="320" r="80" fill={t.c.primary} opacity="0.2" />
        </svg>
        <Container style={{ position: "relative", paddingTop: rv(v, 32, 40, 0), paddingBottom: rv(v, 32, 40, 0) }}>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1.4fr 1fr"), gap: rv(v, 40, 56, 80), alignItems: "center" }}>
            <div>
              <div style={{ width: 60, height: 1, background: t.c.primary, marginBottom: rv(v, 22, 28, 32) }} />
              <Eyebrow style={{ marginBottom: rv(v, 22, 28, 32) }}>Evergreen International Sustainability Solutions</Eyebrow>
              <h1
                style={{
                  fontFamily: t.fonts.display,
                  fontWeight: t.h.weight,
                  fontSize: "clamp(2.8rem, 11vw, 7rem)",
                  lineHeight: 1.02,
                  letterSpacing: t.h.ls,
                  color: t.c.ink,
                  margin: "0 0 28px",
                }}
              >
                Sustainability<br />as <em style={{ color: t.c.primary, fontStyle: "italic" }}>Security.</em>
              </h1>
              <p
                style={{
                  fontFamily: t.fonts.body,
                  fontSize: "clamp(1rem, 2.6vw, 1.2rem)",
                  lineHeight: 1.7,
                  color: t.c.inkMid,
                  margin: "0 0 36px",
                  maxWidth: 560,
                  fontWeight: 300,
                }}
              >
                A system of relationships between people, place, and purpose. Our work bridges these relationships — turning ideas into outcomes that endure.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: rv(v, 18, 22, 28), alignItems: "center" }}>
                <Button onClick={() => go("contact")}>Begin the Conversation</Button>
                <TextLink onClick={() => go("services")}>Explore our services</TextLink>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[
                { num: "06", label: "Expert disciplines", desc: "from environmental engineering to communications" },
                { num: "04", label: "Active LYF Labs", desc: "incubating tools for sustainability at scale" },
                { num: "100", label: "% Mission-driven", desc: "every engagement aligned to durable impact" },
              ].map((s, i) => (
                <div key={i} style={{ background: i === 0 ? t.c.primaryLt : t.c.bgSoft, padding: rv(v, "22px 24px", "24px 28px", "28px 32px"), border: `1px solid ${t.c.line}` }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
                    <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(2.2rem, 7vw, 3rem)", fontWeight: t.h.weight, color: t.c.ink, lineHeight: 1, fontStyle: "italic" }}>
                      {s.num}
                    </div>
                    <div>
                      <div style={{ fontFamily: t.fonts.body, fontSize: "0.92rem", color: t.c.ink, fontWeight: 400, letterSpacing: "0.02em" }}>{s.label}</div>
                      <div style={{ fontFamily: t.fonts.body, fontSize: "0.78rem", color: t.c.inkMid, marginTop: 4, fontWeight: 300, lineHeight: 1.5 }}>{s.desc}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </section>
    );
  }

  // MERIDIAN — centered clinical
  return (
    <section style={{ background: t.c.bgSoft, paddingTop: navH + (v.isMobile ? 24 : 0), paddingBottom: rv(v, 56, 72, 0), minHeight: v.isDesktop ? `calc(100vh - ${navH}px)` : "auto", display: "flex", alignItems: "center", position: "relative", overflow: "hidden" }}>
      <div
        style={{
          position: "absolute",
          inset: 0,
          opacity: 0.5,
          backgroundImage: `radial-gradient(circle at 1px 1px, ${t.c.line} 1px, transparent 0)`,
          backgroundSize: "32px 32px",
          pointerEvents: "none",
          maskImage: "radial-gradient(ellipse at center, black 50%, transparent 100%)",
          WebkitMaskImage: "radial-gradient(ellipse at center, black 50%, transparent 100%)",
        }}
      />
      <Container style={{ position: "relative", paddingTop: rv(v, 32, 40, 0), paddingBottom: rv(v, 32, 40, 0) }}>
        <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              background: "#fff",
              border: `1px solid ${t.c.line}`,
              color: t.c.primary,
              padding: "8px 18px",
              borderRadius: 999,
              fontSize: "0.72rem",
              fontWeight: 500,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              fontFamily: t.fonts.body,
              marginBottom: rv(v, 28, 32, 40),
            }}
          >
            <span style={{ width: 6, height: 6, background: t.c.primary, borderRadius: "50%" }} />
            {v.isMobile ? "Founded on belief" : "Evergreen International · Founded on belief"}
          </div>
          <h1
            style={{
              fontFamily: t.fonts.display,
              fontWeight: t.h.weight,
              fontSize: "clamp(2.8rem, 12vw, 7.5rem)",
              lineHeight: 0.98,
              letterSpacing: t.h.ls,
              color: t.c.ink,
              margin: "0 0 28px",
            }}
          >
            Sustainability<br />as Security.
          </h1>
          <p
            style={{
              fontFamily: t.fonts.body,
              fontSize: "clamp(1rem, 2.6vw, 1.2rem)",
              lineHeight: 1.65,
              color: t.c.inkMid,
              maxWidth: 580,
              margin: "0 auto 36px",
            }}
          >
            We help organizations align impact with strategy — through adaptive expertise, rigorous science, and cross-sector collaboration.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Button onClick={() => go("contact")}>Begin the Conversation</Button>
            <Button variant="ghost" onClick={() => go("services")}>Our Services</Button>
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: rcols(v, "repeat(2, 1fr)", "repeat(4, 1fr)", "repeat(4, 1fr)"),
              marginTop: rv(v, 56, 72, 100),
              borderTop: `1px solid ${t.c.line}`,
              borderBottom: `1px solid ${t.c.line}`,
              padding: "28px 0",
            }}
          >
            {[
              ["06", "Expert disciplines"],
              ["04", "Innovation labs"],
              ["15+", "Partner orgs"],
              ["100%", "Mission-driven"],
            ].map(([n, l], i) => (
              <div key={i} style={{ textAlign: "center", borderLeft: !v.isMobile && i > 0 ? `1px solid ${t.c.line}` : "none", borderTop: v.isMobile && i > 1 ? `1px solid ${t.c.line}` : "none", padding: v.isMobile ? "16px 12px" : "0 16px" }}>
                <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.6rem, 5vw, 2.2rem)", fontWeight: t.h.weight, color: t.c.primary, lineHeight: 1 }}>{n}</div>
                <div style={{ fontFamily: t.fonts.body, fontSize: "0.72rem", color: t.c.inkMid, marginTop: 8, letterSpacing: "0.06em", textTransform: "uppercase" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================================
// HOME PAGE
// ============================================================================

const SERVICES = [
  { id: "stakeholder", icon: "network", title: "Stakeholder Alignment", brief: "Engage communities, partners, and policymakers around shared sustainability goals." },
  { id: "strategy", icon: "compass", title: "Strategy & Roadmapping", brief: "Science-based sustainability plans with measurable milestones." },
  { id: "esg", icon: "chart", title: "ESG Reporting & Disclosure", brief: "Structure and showcase environmental, social, and governance performance." },
  { id: "assessment", icon: "flask", title: "Environmental Assessment", brief: "Lifecycle analysis, impact modeling, and risk evaluation." },
  { id: "innovation", icon: "spark", title: "Innovation Facilitation", brief: "Co-create scalable solutions with cross-disciplinary expert teams." },
  { id: "leadership", icon: "peak", title: "Leadership & Capacity Building", brief: "Equip your organization for lasting sustainable change." },
];

const TEAM = [
  { name: "Will Lytle", title: "PhD · Founder & Principal", color: "#2D6E5E", variant: 0, blurb: "Cross-disciplinary expert in resource governance, stakeholder partnerships, and equitable science-driven solutions." },
  { name: "Hossein Tavakoli", title: "PhD · Innovation Lead", color: "#007878", variant: 1, blurb: "Climate technology pioneer; co-founder of Climate Earth — the first on-demand digital EPD provider for the concrete industry." },
  { name: "Robert Handler", title: "PhD · Environmental Engineer", color: "#1B4A3B", variant: 2, blurb: "Civil & Environmental Engineering PhD; expert in lifecycle thinking, sustainability assessment, and remediation." },
  { name: "Kelly Froehlich", title: "PhD · Agricultural Systems", color: "#C25E2F", variant: 3, blurb: "Animal sciences PhD; leads producer education and sustainable agriculture initiatives through online and in-person curriculum." },
  { name: "Matt Gallagher", title: "Infrastructure & Technology", color: "#4A6058", variant: 1, blurb: "Network and cloud infrastructure specialist; SD-WAN deployment, security automation, and organizational resilience." },
  { name: "Whitney Warstler", title: "Communications & Strategy", color: "#D4A84B", variant: 2, blurb: "Strategic communications consultant with private sector and community leadership experience; storytelling, growth, content." },
];

const LABS = [
  { id: "stormweb", icon: "water", title: "StormWEB", subtitle: "Watershed Evaluation Benchmarking", desc: "Monitoring and modeling stormwater systems to reduce flood risk and protect water quality across municipal watersheds." },
  { id: "wholehouse", icon: "home", title: "Whole-House", subtitle: "Building Lifecycle Ledger", desc: "A QR-enabled platform that tracks the complete lifecycle of a home — permits, renovations, appliances, energy systems — in one accessible record." },
  { id: "trifi", icon: "fire", title: "TRI-FI", subtitle: "Fire-safe Infrastructure", desc: "Triage-based, Risk-Informed, Fire-safe Infrastructure: a decision framework for wildfire risk mitigation in vulnerable communities." },
  { id: "netzero", icon: "zero", title: "Net Zero", subtitle: "#emissionsfreefriday", desc: "A campaign and operational toolkit for organizations committing to emissions-free operations — one day at a time." },
];

function ServiceCard({ s, compact }) {
  const t = useTheme();
  const navigate = useNavigate();
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={() => { navigate("services"); window.scrollTo({ top: 0, behavior: "instant" }); }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: t.c.bg,
        border: `1px solid ${hover ? t.c.primary : t.c.line}`,
        borderRadius: t.r.card,
        padding: compact ? "32px 28px" : "40px 36px",
        cursor: "pointer",
        transition: "all 0.25s ease",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        boxShadow: hover ? `0 12px 32px -16px ${t.c.primary}40` : "none",
        display: "flex",
        flexDirection: "column",
        gap: 20,
        height: "100%",
      }}
    >
      <div
        style={{
          width: 56,
          height: 56,
          background: t.c.primaryLt,
          borderRadius: t.r.card,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {Icon[s.icon](t.c.primary, 28)}
      </div>
      <H3>{s.title}</H3>
      <Body style={{ fontSize: "0.95rem", lineHeight: 1.65, flex: 1 }}>{s.brief}</Body>
      <div
        style={{
          fontFamily: t.fonts.body,
          fontSize: "0.82rem",
          color: t.c.primary,
          fontWeight: 500,
          letterSpacing: t.id === "summit" ? "0.06em" : "0.02em",
          textTransform: t.id === "summit" ? "uppercase" : "none",
          display: "inline-flex",
          alignItems: "center",
          gap: 6,
          opacity: hover ? 1 : 0.7,
        }}
      >
        Learn more <span style={{ transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform 0.2s" }}>→</span>
      </div>
    </div>
  );
}

function ServicesPreview() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();
  return (
    <Section bg={t.c.bg}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1.6fr"), gap: rv(v, 24, 40, 80), marginBottom: rv(v, 40, 52, 64), alignItems: v.isDesktop ? "end" : "start" }}>
          <div>
            <Eyebrow style={{ marginBottom: 20 }}>What We Do</Eyebrow>
            <H2>
              From insight<br />to <em style={{ color: t.c.primary, fontStyle: t.id === "canopy" ? "italic" : "normal" }}>impact.</em>
            </H2>
          </div>
          <Lead style={{ maxWidth: 540, paddingBottom: v.isDesktop ? 16 : 0 }}>
            Six interlocking practices that move organizations from sustainability ambition to durable, measurable, science-backed outcomes.
          </Lead>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "repeat(3, 1fr)"), gap: rv(v, 16, 20, 24) }}>
          {SERVICES.slice(0, 3).map((s) => (
            <ServiceCard key={s.id} s={s} />
          ))}
        </div>
        <div style={{ marginTop: rv(v, 32, 40, 48), textAlign: "center" }}>
          <Button variant="ghost" onClick={() => { navigate("services"); window.scrollTo({ top: 0, behavior: "instant" }); }}>
            View all six services →
          </Button>
        </div>
      </Container>
    </Section>
  );
}

function FounderQuote() {
  const t = useTheme();
  const v = useViewport();
  return (
    <Section bg={t.c.bgSoft} py={140}>
      <Container max={1100}>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "auto 1fr", "auto 1fr"), gap: rv(v, 28, 48, 64), alignItems: "center" }}>
          <Avatar name="Will Lytle" color={t.c.primary} size={rv(v, 88, 120, 140)} variant={0} />
          <div>
            <Eyebrow style={{ marginBottom: rv(v, 20, 24, 28) }}>Founder's Vision</Eyebrow>
            <blockquote
              style={{
                fontFamily: t.fonts.display,
                fontWeight: t.h.weight,
                fontSize: "clamp(1.3rem, 4vw, 2.4rem)",
                lineHeight: 1.3,
                letterSpacing: t.h.ls,
                color: t.c.ink,
                margin: 0,
                quotes: "none",
              }}
            >
              <span style={{ color: t.c.primary, fontSize: "1.5em", lineHeight: 0, verticalAlign: "-0.4em", marginRight: "0.1em" }}>"</span>
              Sustainability isn't a compliance exercise. It's a system of relationships — between people, place, and purpose — that we have a responsibility to make stronger.
            </blockquote>
            <div style={{ marginTop: rv(v, 24, 28, 32), display: "flex", alignItems: "center", gap: 16 }}>
              <div style={{ width: 32, height: 1, background: t.c.primary }} />
              <div>
                <div style={{ fontFamily: t.fonts.body, fontSize: "0.92rem", fontWeight: 500, color: t.c.ink }}>Will Lytle, PhD</div>
                <div style={{ fontFamily: t.fonts.body, fontSize: "0.8rem", color: t.c.inkMid, marginTop: 2 }}>Founder & Principal · Evergreen International</div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function LYFTeaser() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();
  return (
    <Section bg={t.c.bgDark} py={140}>
      <div style={{ position: "absolute", top: 80, right: -200, width: rv(v, 300, 400, 500), height: rv(v, 300, 400, 500), background: t.c.primary, opacity: 0.15, filter: "blur(120px)", borderRadius: "50%", pointerEvents: "none" }} />
      <Container style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1fr"), gap: rv(v, 28, 48, 80), alignItems: "center", marginBottom: rv(v, 40, 52, 64) }}>
          <div>
            <Eyebrow color={t.c.primaryLt} style={{ marginBottom: rv(v, 20, 24, 28), color: t.c.primaryLt }}>LYF Labs</Eyebrow>
            <h2
              style={{
                fontFamily: t.fonts.display,
                fontWeight: t.h.weight,
                fontSize: "clamp(2rem, 6vw, 4rem)",
                lineHeight: 1.05,
                letterSpacing: t.h.ls,
                color: "#fff",
                margin: 0,
                textWrap: "balance",
              }}
            >
              Linking your<br />footprint to your<br /><em style={{ color: t.c.primaryLt, fontStyle: t.id === "canopy" ? "italic" : "normal" }}>future.</em>
            </h2>
          </div>
          <div>
            <p style={{ fontFamily: t.fonts.body, fontSize: "clamp(1rem, 2.4vw, 1.1rem)", lineHeight: 1.7, color: "rgba(255,255,255,0.7)", margin: "0 0 28px", fontWeight: t.id === "canopy" ? 300 : 400 }}>
              Our LYF Labs initiative invites collaboration with visionary entrepreneurs, scientists, and decision-makers — all united in co-creating shared ownership of our environmental impact.
            </p>
            <Button variant="light" onClick={() => { navigate("lyflabs"); window.scrollTo({ top: 0, behavior: "instant" }); }}>
              View the Labs →
            </Button>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "repeat(4, 1fr)"), gap: rv(v, 12, 14, 16) }}>
          {LABS.map((lab) => (
            <div
              key={lab.id}
              onClick={() => { navigate("lyflabs"); window.scrollTo({ top: 0, behavior: "instant" }); }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.06)"; e.currentTarget.style.borderColor = t.c.primaryLt; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.02)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)"; }}
              style={{
                background: "rgba(255,255,255,0.02)",
                border: "1px solid rgba(255,255,255,0.12)",
                borderRadius: t.r.card,
                padding: rv(v, "22px 20px", "24px 22px", "28px 24px"),
                cursor: "pointer",
                transition: "all 0.25s",
              }}
            >
              <div style={{ marginBottom: 18 }}>{Icon[lab.icon](t.c.primaryLt, 28)}</div>
              <div style={{ fontFamily: t.fonts.display, fontSize: "1.3rem", fontWeight: t.h.weight, color: "#fff", letterSpacing: t.h.ls, marginBottom: 6 }}>
                {lab.title}
              </div>
              <div style={{ fontFamily: t.fonts.body, fontSize: "0.76rem", color: t.c.primaryLt, letterSpacing: "0.04em", marginBottom: 10, fontWeight: 500 }}>
                {lab.subtitle}
              </div>
              <div style={{ fontFamily: t.fonts.body, fontSize: "0.82rem", color: "rgba(255,255,255,0.55)", lineHeight: 1.6 }}>
                {lab.desc.slice(0, 70)}…
              </div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

function TeamPreview() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();
  return (
    <Section bg={t.c.bg}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1.6fr"), gap: rv(v, 24, 40, 80), marginBottom: rv(v, 40, 52, 64), alignItems: v.isDesktop ? "end" : "start" }}>
          <div>
            <Eyebrow style={{ marginBottom: 20 }}>Affiliated Experts</Eyebrow>
            <H2>The right team,<br />assembled for the work.</H2>
          </div>
          <Lead style={{ maxWidth: 540, paddingBottom: v.isDesktop ? 16 : 0 }}>
            Cross-disciplinary specialists drawn from engineering, agricultural science, communications, climate technology, and infrastructure.
          </Lead>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "repeat(3, 1fr)"), gap: rv(v, 16, 20, 24) }}>
          {TEAM.slice(0, 3).map((m) => (
            <div
              key={m.name}
              style={{
                background: t.c.bg,
                border: `1px solid ${t.c.line}`,
                borderRadius: t.r.card,
                padding: rv(v, 24, 28, 32),
                display: "flex",
                flexDirection: "column",
                gap: 20,
              }}
            >
              <Avatar name={m.name} color={m.color} size={88} variant={m.variant} />
              <div>
                <H3 style={{ fontSize: "1.3rem", marginBottom: 4 }}>{m.name}</H3>
                <div style={{ fontFamily: t.fonts.body, fontSize: "0.78rem", color: t.c.primary, letterSpacing: "0.04em", fontWeight: 500 }}>
                  {m.title}
                </div>
              </div>
              <Body style={{ fontSize: "0.92rem", lineHeight: 1.6 }}>{m.blurb}</Body>
            </div>
          ))}
        </div>
        <div style={{ marginTop: rv(v, 32, 40, 48), textAlign: "center" }}>
          <Button variant="ghost" onClick={() => { navigate("team"); window.scrollTo({ top: 0, behavior: "instant" }); }}>
            Meet the full team →
          </Button>
        </div>
      </Container>
    </Section>
  );
}

function CTABand() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();
  return (
    <Section bg={t.c.bgSoft} py={120}>
      <Container max={1100}>
        <div
          style={{
            background: t.c.bg,
            border: `1px solid ${t.c.line}`,
            borderRadius: t.r.card,
            padding: rv(v, "44px 28px", "56px 48px", "72px 80px"),
            display: "grid",
            gridTemplateColumns: rcols(v, "1fr", "1fr", "1.4fr 1fr"),
            gap: rv(v, 28, 36, 48),
            alignItems: "center",
            position: "relative",
            overflow: "hidden",
          }}
        >
          <div style={{ position: "absolute", top: -100, right: -80, width: 300, height: 300, background: t.c.primaryLt, opacity: 0.5, borderRadius: "50%", pointerEvents: "none" }} />
          <div style={{ position: "relative" }}>
            <Eyebrow style={{ marginBottom: 16 }}>One Free Idea</Eyebrow>
            <H2 style={{ fontSize: "clamp(1.5rem, 5vw, 2.6rem)" }}>
              Have a challenge<br />worth solving?
            </H2>
            <Body style={{ marginTop: 18, maxWidth: 480 }}>
              Share your vision and receive one free strategic idea — no commitment, just a fresh perspective from a cross-disciplinary expert team.
            </Body>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
            <Button onClick={() => { navigate("contact"); window.scrollTo({ top: 0, behavior: "instant" }); }} style={{ justifyContent: "center", padding: "16px 28px" }}>
              Collaborate on a Solution
            </Button>
            <Button variant="ghost" onClick={() => { navigate("casestudies"); window.scrollTo({ top: 0, behavior: "instant" }); }} style={{ justifyContent: "center", padding: "16px 28px" }}>
              See our work
            </Button>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function HomePage() {
  return (
    <div data-screen-label="Home">
      <HomeHero />
      <ServicesPreview />
      <FounderQuote />
      <LYFTeaser />
      <TeamPreview />
      <CTABand />
    </div>
  );
}

// ============================================================================
// ABOUT PAGE
// ============================================================================

function AboutPage() {
  const t = useTheme();
  const v = useViewport();
  return (
    <div data-screen-label="About">
      <PageHero
        eyebrow="About Evergreen"
        title="Founded on belief."
        lead="That solving our planet's most complex challenges requires adaptive expertise, pragmatic innovation, and collaboration across boundaries."
      />

      {/* Mission narrative */}
      <Section bg={t.c.bg} py={120}>
        <Container max={1100}>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1.8fr"), gap: rv(v, 28, 48, 80) }}>
            <div>
              <Eyebrow style={{ marginBottom: 20 }}>Our Mission</Eyebrow>
              <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.2rem, 3.6vw, 1.4rem)", lineHeight: 1.3, color: t.c.primary, fontWeight: t.h.weight, letterSpacing: t.h.ls, fontStyle: t.id === "canopy" ? "italic" : "normal" }}>
                Bring solutions to market.
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <Lead style={{ fontSize: "clamp(1.05rem, 2.5vw, 1.25rem)" }}>
                Evergreen International Sustainability Solutions (EISS) was founded on a simple but powerful belief: that solving our planet's most complex challenges requires adaptive expertise, pragmatic innovation, and collaboration across boundaries.
              </Lead>
              <Body style={{ fontSize: "clamp(0.98rem, 2.2vw, 1.08rem)" }}>
                We see sustainability as security. A system of relationships between people, place, and purpose. Our work bridges these relationships to turn ideas into outcomes: measurable environmental gains, durable financial models, and empowered leadership.
              </Body>
              <Body style={{ fontSize: "clamp(0.98rem, 2.2vw, 1.08rem)" }}>
                Our mission is to bring solutions to market — solutions that are scalable, science-based, and rooted in the real-world conditions of the communities and ecosystems we serve. We operate with agility, integrity, and optimism. Because the world doesn't need more plans; it needs people who can make them real.
              </Body>
            </div>
          </div>
        </Container>
      </Section>

      {/* Three pillars */}
      <Section bg={t.c.bgSoft} py={120}>
        <Container>
          <div style={{ textAlign: "center", marginBottom: rv(v, 48, 64, 80), maxWidth: 720, margin: `0 auto ${rv(v, 48, 64, 80)}px` }}>
            <Eyebrow style={{ marginBottom: 20, justifyContent: "center", display: "inline-flex" }}>How We Work</Eyebrow>
            <H2>Three pillars of practice.</H2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "repeat(3, 1fr)"), gap: rv(v, 20, 24, 32) }}>
            {[
              { num: "01", title: "Adaptive Expertise", desc: "We assemble the right team for each challenge — drawing on engineering, agricultural science, communications, and policy. No two engagements look alike.", icon: "network" },
              { num: "02", title: "Pragmatic Innovation", desc: "Solutions rooted in the real-world conditions of the communities and ecosystems we serve. We build for the world that is, not the world we wish for.", icon: "spark" },
              { num: "03", title: "Cross-Sector Collaboration", desc: "Bridging communities, institutions, industry, and government — because durable outcomes require shared ownership of impact.", icon: "compass" },
            ].map((p) => (
              <div key={p.num} style={{ background: t.c.bg, border: `1px solid ${t.c.line}`, borderRadius: t.r.card, padding: rv(v, 28, 32, 40) }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
                  <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(2rem, 6vw, 2.6rem)", fontWeight: t.h.weight, color: t.c.primary, lineHeight: 1, letterSpacing: t.h.ls, fontStyle: t.id === "canopy" ? "italic" : "normal" }}>
                    {p.num}
                  </div>
                  <div style={{ width: 48, height: 48, borderRadius: t.r.card, background: t.c.primaryLt, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    {Icon[p.icon](t.c.primary, 24)}
                  </div>
                </div>
                <H3 style={{ marginBottom: 14 }}>{p.title}</H3>
                <Body style={{ fontSize: "0.95rem" }}>{p.desc}</Body>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Values */}
      <Section bg={t.c.bg} py={120}>
        <Container max={1100}>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1.8fr"), gap: rv(v, 28, 48, 80), alignItems: "start" }}>
            <div>
              <Eyebrow style={{ marginBottom: 20 }}>Operating Values</Eyebrow>
              <H2>Agility.<br />Integrity.<br /><em style={{ color: t.c.primary, fontStyle: t.id === "canopy" ? "italic" : "normal" }}>Optimism.</em></H2>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                { v: "Agility", d: "We operate at the speed of the challenge. Project teams form, deliver, and dissolve as the work requires — no overhead, no inertia." },
                { v: "Integrity", d: "Our recommendations are science-based and our scope is transparent. We say what we believe, and we believe what the data tells us." },
                { v: "Optimism", d: "We choose to believe that the most difficult environmental problems are solvable — and we behave accordingly, with rigor and resolve." },
              ].map((row, i) => (
                <div key={row.v} style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "140px 1fr", "160px 1fr"), gap: rv(v, 6, 28, 40), padding: rv(v, "22px 0", "26px 0", "32px 0"), borderTop: `1px solid ${t.c.line}`, borderBottom: i === 2 ? `1px solid ${t.c.line}` : "none", alignItems: "start" }}>
                  <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.2rem, 3.6vw, 1.5rem)", color: t.c.ink, fontWeight: t.h.weight, letterSpacing: t.h.ls }}>{row.v}</div>
                  <Body style={{ fontSize: "clamp(0.95rem, 2.2vw, 1.02rem)", lineHeight: 1.7 }}>{row.d}</Body>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </Section>

      <CTABand />
    </div>
  );
}

Object.assign(window, { HomePage, AboutPage, SERVICES, TEAM, LABS, CTABand });