/*
 * cloudboiler — ecosystem design system (2026 reframe)
 *
 * Foundation stylesheet for the whole-home-thermal-ecosystem homepage +
 * 4 supporting pages (Platform / How It Works / Thermal Branches /
 * Pilot & Partners). Extracted from public_html/design/cloudboiler.html
 * (Figma export) and adapted to hook into design tokens + self-hosted
 * fonts (fonts-ecosystem.css). All shared utility classes live here; per-
 * module styles are scoped inside each modules/<Name>/styles.scss.
 *
 * Kept explicitly separate from the legacy base.css / style.css so the
 * two design systems don't clobber each other while the migration is in
 * flight; once all old modules are retired, base.css can be deleted.
 */

@import url("./fonts-ecosystem.css");

/* ============ ECOSYSTEM TOKENS ============ */
:root, [data-theme="dark"] {
    --eco-orange:      #e87a3a;
    --eco-orange-soft: rgba(232, 122, 58, 0.5);
    --eco-orange-glow: rgba(232, 122, 58, 0.6);
    --eco-orange-tint: rgba(232, 122, 58, 0.1);
    --eco-blue:        #3da3e3;
    --eco-blue-glow:   rgba(61, 163, 227, 0.6);
    --eco-blue-soft:   #3ac8e8;
    --eco-bg:          #000;
    --eco-bg-radial:   radial-gradient(ellipse at center, #150b06 0%, #000 75%);
    --eco-line:        rgba(255, 255, 255, 0.5);
    --eco-line-soft:   rgba(255, 255, 255, 0.3);
    --eco-line-dim:    rgba(255, 255, 255, 0.35);
    --eco-line-bright: rgba(255, 255, 255, 0.6);
    --eco-card:        rgba(255, 255, 255, 0.03);
    --eco-card-2:      rgba(255, 255, 255, 0.05);
    --eco-text-dim:    rgba(255, 255, 255, 0.4);
    --eco-text-soft:   rgba(255, 255, 255, 0.85);

    /* Fallback families (Inria Serif Fallback, EB Garamond Fallback,
     * Poppins Fallback) are defined in fonts-ecosystem.css using
     * size-adjust so text width matches the real font — swap is
     * invisible instead of causing a CLS spike. */
    --font-serif:    'Inria Serif', 'Inria Serif Fallback', Georgia, 'Times New Roman', serif;
    --font-display:  'EB Garamond', 'EB Garamond Fallback', Georgia, serif;
    --font-mono-alt: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;

    /* One-off container width matching Figma export. */
    --eco-wrap-max:  1440px;
    --eco-wrap-pad:  48px;
}

/* ============ ELEMENT RESETS (scoped so we don't clobber .waitlist-form etc.) ============ */
.eco-body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.eco-body {
    background: var(--eco-bg);
    color: #fff;
    font-family: var(--font-serif);
    -webkit-font-smoothing: antialiased;
}

.eco-body a {
    color: #fff;
    text-decoration: none;
    transition: color .15s;
}
.eco-body a:hover {
    color: var(--eco-orange);
}

.eco-body img {
    display: block;
    max-width: 100%;
}

/* ============ SECTION + WRAP ============ */

/* Every ecosystem section uses this radial-gradient dark background +
 * relative positioning so children can absolute-overlay. Divi's parent
 * `.et_pb_section` is neutralized in style.css (Phase 17); here we own
 * the visual container. */
.eco-section {
    position: relative;
    background: var(--eco-bg-radial);
    overflow: hidden;
}

.eco-wrap {
    max-width: var(--eco-wrap-max);
    margin: 0 auto;
    padding: 0 var(--eco-wrap-pad);
}

/* ============ SECTION EYEBROW (numbered header row) ============ */

/* Every content section leads with `<tick> 01 <dot> LABEL <rule>` — the
 * tiny horizontal marker + section number + label + trailing line. */
.eco-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 0 0;
}
.eco-eyebrow .tick {
    width: 35px;
    height: 1px;
    background: var(--eco-orange);
}
.eco-eyebrow .num {
    color: var(--eco-orange);
    font-family: var(--font-display);
    font-size: 20px;
}
.eco-eyebrow .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--eco-orange);
}
.eco-eyebrow .label {
    color: var(--eco-orange);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.eco-eyebrow .rule {
    flex: 1;
    max-width: 500px;
    height: 1px;
    background: var(--eco-line);
}

/* ============ BUTTONS + DOTS + GLOWS ============ */

.eco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.eco-odot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--eco-orange);
    flex: none;
}

.eco-glow-orange { box-shadow: 0 0 10px var(--eco-orange-glow); }
.eco-glow-blue   { box-shadow: 0 0 10px var(--eco-blue-glow); }

/* Primary solid CTA — paper on dark.
 * Selectors doubled up so specificity beats the sitewide `.eco-body a { color:#fff }`
 * rule (0,2,0) — without the .eco-body prefix the paper button rendered white-on-paper. */
.eco-body a.eco-btn-solid,
.eco-btn-solid {
    background: #f8fafc;
    color: #0b0b0b;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    padding: 15px 32px;
    letter-spacing: 0.05em;
}
.eco-body a.eco-btn-solid:hover,
.eco-btn-solid:hover  { background: #fff; color: #0b0b0b; }
.eco-btn-solid .arrow { font-size: 22px; line-height: 1; }

/* Ghost CTA — orange outline. */
.eco-body a.eco-btn-ghost,
.eco-btn-ghost {
    border: .5px solid var(--eco-orange);
    color: #fff;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    padding: 15px 26px;
    letter-spacing: 0.03em;
    background: transparent;
}
.eco-body a.eco-btn-ghost:hover,
.eco-btn-ghost:hover {
    background: var(--eco-orange-tint);
    color: #fff;
}

/* Line CTA — thin bordered pill (manifesto actions). */
.eco-btn-line {
    border: .3px solid var(--eco-orange-soft);
    border-radius: 14px;
    color: #fff;
    font-weight: 300;
    font-size: 30px;
    padding: 14px 59px;
    background: transparent;
    font-family: var(--font-serif);
}
.eco-btn-line:hover {
    background: rgba(232, 122, 58, 0.08);
    color: #fff;
}

/* ============ PILL (top-bar status / product-tier chips) ============ */
.eco-pill {
    display: flex;
    align-items: center;
    gap: 18px;
    border: .5px solid var(--eco-line-dim);
    border-radius: 14px;
    padding: 8px 18px;
    background: #000;
    font-family: var(--font-mono-alt);
    font-size: 11px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.eco-pill .live {
    color: var(--eco-orange);
    display: flex;
    align-items: center;
    gap: 7px;
}
.eco-pill .live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--eco-orange);
}
.eco-pill .dim {
    color: var(--eco-text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}
.eco-pill .dim::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--eco-text-dim);
}

/* ============ STICKY SITE HEADER (nav pill at top of every page) ============
 * Per feedback: no flanking chip pills (SYSTEM LIVE / tier chips);
 * one nav pill only, sticky on desktop, hamburger on mobile.
 * Rendered from page.php / front-page.php via cloudboiler_render_site_header
 * so it sits above the post content and can stick to viewport top.
 * z-index high enough to sit above ecosystem sections' backgrounds. */
.eco-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 16px var(--eco-wrap-pad) 12px;
    /* subtle scrim so the pill stays legible as content scrolls past */
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* full viewport width — sticky positioning applies to <body> parent */
    width: 100%;
    box-sizing: border-box;
}
/* WordPress admin bar offsets — logged-in views need the sticky nav
 * to sit BELOW the admin bar (32px at ≥783px, 46px on mobile) instead
 * of being covered by it. Same offset applies to the fixed hamburger
 * overlay so it doesn't overlap the admin bar when open. */
body.admin-bar .eco-header,
body.admin-bar .eco-nav-overlay { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .eco-header,
    body.admin-bar .eco-nav-overlay { top: 46px; }
}
.eco-header .eco-nav {
    /* Narrower than the full page wrap — the pill hugs its content
     * rather than stretching edge-to-edge which read as bloated. */
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(10, 10, 10, 0.95);
}

/* ============ MAIN NAV (rounded pill nav with grouped dropdowns) ============
 * Brief §2 SITE-WIDE NAVIGATION requires grouped nav items:
 * PLATFORM ▾ / ECOSYSTEM ▾ / DEPLOYMENT ▾ / WHY NOW / FAQ / JOIN THE PILOT.
 * Each group's top-level label is itself a link to that section's
 * overview page (per convention), so the dropdown is a bonus, not
 * required for wayfinding. Dropdown behavior is CSS-only (:hover +
 * :focus-within) — no JS, keyboard-accessible via tab-through. */
.eco-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    border: .5px solid var(--eco-line-soft);
    border-radius: 999px;
    padding: 6px 6px 6px 8px;
    font-size: 13px;
    font-family: var(--font-mono-alt);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.eco-nav > a,
.eco-nav > span { white-space: nowrap; }
.eco-nav .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.eco-nav .brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.eco-nav .sep {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}
/* nav-items takes the space between brand (left) and CTA (right) and
 * centers its contents, so the main nav sits in the middle of the
 * pill instead of huddled next to the brand mark. */
.eco-nav-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 1;
}
.eco-nav-group { position: relative; }
.eco-nav-top {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 6px 4px;
}
.eco-nav-top .chev {
    font-size: 10px; opacity: .7; transition: transform .18s, opacity .18s;
}
.eco-nav-group:hover .eco-nav-top .chev,
.eco-nav-group:focus-within .eco-nav-top .chev { opacity: 1; transform: rotate(180deg); }
/* dropdown panel */
.eco-nav-sub {
    position: absolute; top: calc(100% + 8px); left: -14px; z-index: 40;
    min-width: 220px;
    background: #0a0a0a;
    border: .5px solid var(--eco-line-dim);
    border-radius: 14px;
    padding: 10px 6px;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .15s, transform .15s;
}
.eco-nav-group:hover > .eco-nav-sub,
.eco-nav-group:focus-within > .eco-nav-sub {
    opacity: 1; pointer-events: auto; transform: none;
}
.eco-nav-sub a {
    display: block; padding: 10px 14px; border-radius: 8px;
    font-family: var(--font-mono-alt); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--eco-text-soft);
    transition: background .12s, color .12s;
}
.eco-nav-sub a:hover { background: var(--eco-orange-tint); color: var(--eco-orange); }
/* invisible bridge so cursor can move from top link → sub without dropdown closing */
.eco-nav-group::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px;
    display: none;
}
.eco-nav-group:hover::after,
.eco-nav-group:focus-within::after { display: block; }

.eco-body a.eco-nav-cta,
.eco-nav .cta {
    background: var(--eco-orange);
    color: #0b0b0b;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.eco-body a.eco-nav-cta:hover,
.eco-nav .cta:hover { background: #ff8d4f; color: #0b0b0b; }

/* ============ TOPBAR (three-column status/nav/tier row) ============
 * Pills wrap to their content only. Center nav is allowed to shrink if
 * space is tight; outer pills stay their intrinsic size. */
.eco-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0 0;
}
.eco-topbar > .eco-pill { flex: 0 0 auto; }
.eco-topbar > .eco-nav  { flex: 0 1 auto; }

/* ============ ECO CARD (generic feature/pillar card scaffold) ============ */
.eco-card {
    background: var(--eco-card);
    border: .5px solid var(--eco-line-bright);
    border-radius: 14px;
    padding: 22px 28px;
}

/* ============ ORB (glowing thermal-ring icon container) ============ */
.eco-orb {
    position: relative;
    width: 110px;
    height: 110px;
    flex: none;
}
.eco-orb .back {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}
.eco-orb .ring {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(232, 122, 58, 0.7);
    box-shadow: 0 0 12px rgba(232, 122, 58, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.eco-orb svg {
    width: 44px;
    height: 44px;
    stroke: #fff;
}

/* ============ RESPONSIVE — Figma export used a 1180px breakpoint ============ */
@media (max-width: 1180px) {
    :root { --eco-wrap-pad: 24px; }
}
@media (max-width: 880px) {
    :root { --eco-wrap-pad: 16px; }
    .eco-topbar { flex-wrap: wrap; }
}

/* ============ MOBILE HEADER (<=900px) ============
 * The full desktop header (SYSTEM LIVE pill + brand+5-nav+CTA pill +
 * HOME/PRO/FLEET/GRID tier pill) can't fit at 390–768px. Rather than a
 * hamburger widget (JS/module-shape change), hide the two secondary
 * pills, keep the primary nav pill, and inside it collapse to just:
 *   brand mark + JOIN THE PILOT CTA
 * The full nav links (Platform / How It Works / Thermal Branches /
 * Why Now / FAQ) are also available at the bottom via the site footer,
 * so this is not a wayfinding loss. */
@media (max-width: 900px) {
    .eco-topbar {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-top: 16px;
    }
    /* hide the outer status + tier chip pills — repurposable via desktop only */
    .eco-topbar > .eco-pill { display: none; }
    /* nav pill shrinks to just brand + CTA */
    .eco-nav {
        gap: 10px;
        padding: 6px 6px 6px 10px;
        font-size: 12px;
        max-width: 100%;
    }
    /* hide all links between the brand and the .cta CTA button */
    .eco-nav > a:not(.brand):not(.cta),
    .eco-nav > .sep,
    .eco-nav > .eco-nav-items { display: none; }
    /* mobile hamburger toggle button visible in the nav pill.
     * `.eco-nav` prefix boosts specificity so the mobile rule wins
     * over the base .eco-nav-toggle-btn { display: none } declaration
     * that comes later in the file source order. */
    .eco-nav .eco-nav-toggle-btn { display: inline-flex; align-items: center; justify-content: center; }
    /* Body prefix boosts specificity so this rule beats the base
     * `.eco-nav-overlay { display: none }` that comes later in file. */
    body .eco-nav-overlay {
        display: block; position: fixed; inset: 0; z-index: 200;
        background: #000;
        opacity: 0; pointer-events: none; transition: opacity .2s;
        overflow-y: auto; padding: 80px 24px 40px;
    }
    body .eco-nav-toggle:checked ~ .eco-nav-overlay {
        opacity: 1; pointer-events: auto;
    }
    /* close button top-right */
    .eco-nav-overlay-close {
        position: absolute; top: 20px; right: 20px;
        background: transparent; border: 0; color: #fff; cursor: pointer;
        padding: 10px; font-size: 28px; line-height: 1;
    }
    /* Overlay menu — same walker output as desktop nav, restyled
     * for full-screen stacked mobile presentation. Dropdowns are
     * always-open inside the overlay (no hover-trigger). */
    .eco-nav-overlay-menu {
        display: flex; flex-direction: column; gap: 4px;
        max-width: 460px; margin: 0 auto;
    }
    /* Reset desktop nav styles that would leak in */
    .eco-nav-overlay-menu .eco-nav-group {
        display: block; position: static;
        border-bottom: .5px solid var(--eco-line-dim); padding-bottom: 12px;
    }
    /* Top-level group label (PLATFORM ▾ etc — hide the chev on mobile) */
    .eco-nav-overlay-menu .eco-nav-top {
        display: block; color: var(--eco-orange);
        font-family: var(--font-mono-alt); font-size: 13px; font-weight: 600;
        letter-spacing: 0.14em; text-transform: uppercase;
        padding: 14px 4px 8px;
    }
    .eco-nav-overlay-menu .eco-nav-top .chev { display: none; }
    /* Sub-menu (always visible inside overlay) */
    .eco-nav-overlay-menu .eco-nav-sub {
        position: static; opacity: 1; pointer-events: auto; transform: none;
        display: flex; flex-direction: column; gap: 2px; padding: 0 0 0 4px;
        background: transparent; border: 0; box-shadow: none;
        min-width: 0; margin-top: 4px;
    }
    .eco-nav-overlay-menu .eco-nav-sub a {
        display: block; padding: 10px 4px; color: #fff;
        font-family: var(--font-serif); font-size: 20px;
        text-transform: none; letter-spacing: 0;
        border-radius: 0; background: transparent;
    }
    .eco-nav-overlay-menu .eco-nav-sub a:hover { color: var(--eco-orange); background: transparent; }
    /* Top-level solo links (WHY NOW, FAQ) — same as desktop styling but full-width */
    .eco-nav-overlay-menu > .eco-nav-top {
        border-bottom: .5px solid var(--eco-line-dim);
        padding: 20px 4px; font-size: 14px; font-weight: 500;
    }
    .eco-nav-overlay-menu > .eco-nav-top:hover { color: var(--eco-orange); }
    /* CTA pill at the bottom */
    .eco-nav-overlay-menu > .cta {
        margin-top: 24px; padding: 16px 20px;
        background: var(--eco-orange); color: #0b0b0b !important;
        border-radius: 999px; text-align: center;
        font-family: var(--font-mono-alt); font-size: 14px; font-weight: 700;
        letter-spacing: 0.14em; text-transform: uppercase;
        display: block;
    }
    /* lock scroll on body when overlay is open (checkbox-driven) */
    body:has(.eco-nav-toggle:checked) { overflow: hidden; }
    /* related-paths stacks — .eco-section prefix boosts specificity
     * so the mobile rule wins over the base 4-col rule that comes
     * later in file source order (0,2,0 > 0,1,0). */
    .eco-section .eco-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .eco-section .eco-related-grid { grid-template-columns: 1fr; }
    .eco-nav .brand { font-size: 12px; }
    .eco-nav .brand img { width: 28px; height: 28px; }
    .eco-body a.eco-nav-cta,
    .eco-nav .cta {
        padding: 8px 14px;
        font-size: 11px;
    }
    /* hero eyebrow + copy tighter */
    .eco-hero h1 { font-size: 40px; line-height: 1.02; }
    .eco-hero h1 .accent { font-size: 34px; }
    .eco-hero-sub { font-size: 15px; }
    /* section headlines already down to 42px at 1180; take them further */
    .eco-hiw-headline,
    .eco-pillars-headline,
    .eco-layers-headline,
    .eco-sources-headline,
    .eco-modes-headline,
    .eco-why-headline,
    .eco-tb-head h2 { font-size: 32px; line-height: 1.08; }
    /* CTAs stack full-width on narrow screens */
    .eco-hero-actions { flex-direction: column; align-items: stretch; }
    .eco-body a.eco-btn-solid,
    .eco-body a.eco-btn-ghost,
    .eco-btn-solid, .eco-btn-ghost { justify-content: center; width: 100%; }
}
@media (max-width: 480px) {
    /* extra headline scaling on phones */
    .eco-hero h1 { font-size: 34px; }
    .eco-hero h1 .accent { font-size: 28px; }
}

/* ============ MODULE: EcosystemHero + children ============ */
.eco-hero { padding-bottom: 70px; }
.eco-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0;
}
/* Grid items default to `min-width: auto` — that's the width of the longest
 * word in the child, which forces the column past its 1fr allocation on
 * mobile when a page has words like "INFRASTRUCTURE" in the hero. Force
 * min-width: 0 so the column truly can shrink to its 1fr allocation, and
 * let the h1 wrap inside long words if it has to. */
.eco-hero-grid > * { min-width: 0; }
.eco-hero-copy { padding-top: 56px; min-width: 0; }
.eco-hero h1 { overflow-wrap: break-word; }
.eco-chip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: .5px solid var(--eco-line-soft);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 15px;
    letter-spacing: 0.03em;
}
.eco-hero h1 {
    font-weight: 700;
    font-size: 67px;
    line-height: 1.06;
    margin-top: 36px;
    letter-spacing: 0.01em;
}
.eco-hero h1 .accent {
    display: block;
    color: var(--eco-orange);
    font-family: var(--font-display);
    font-weight: 600;
    font-style: italic;
    font-size: 59px;
}
.eco-hero-sub {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.3;
    margin: 26px 0 0 12px;
    max-width: 420px;
}
.eco-hero-sub .o { color: var(--eco-orange); }
.eco-hero-actions { display: flex; gap: 28px; margin: 36px 0 0 0; }
.eco-hero-visual { position: relative; min-height: 640px; }
.eco-hero-visual img {
    position: absolute;
    top: -40px;
    right: -90px;
    width: 724px;
    max-width: none;
    pointer-events: none;
}

.eco-feat-chips { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 50px; }
.eco-feat-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    border: .5px solid var(--eco-orange-soft);
    border-radius: 14px;
    padding: 14px 18px;
    width: 242px;
}
.eco-feat-chip svg { width: 30px; height: 30px; stroke: var(--eco-orange); flex: none; }
.eco-feat-chip b {
    display: block;
    color: var(--eco-orange);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.eco-feat-chip span {
    display: block;
    font-family: var(--font-display);
    font-size: 13px;
    margin-top: 3px;
}

.eco-num-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    margin-top: 54px;
    position: relative;
    z-index: 2;
}
.eco-num-card {
    position: relative;
    background: var(--eco-card);
    border: .5px solid var(--eco-line-bright);
    border-radius: 14px;
    padding: 22px 28px;
    min-height: 132px;
}
.eco-num-card .n { color: var(--eco-orange); font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.eco-num-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin-top: 8px; }
.eco-num-card p  { color: var(--eco-orange); font-family: var(--font-display); font-size: 13px; margin-top: 7px; max-width: 170px; }
.eco-num-card .thumb {
    position: absolute;
    right: 16px;
    top: 20px;
    width: 89px;
    height: 90px;
    border: .3px solid var(--eco-line);
    border-radius: 8px;
    background: var(--eco-card-2);
    overflow: hidden;
}
.eco-num-card .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============ MODULE: HowItWorks + steps ============ */
.eco-how-it-works { padding-bottom: 80px; }
.eco-hiw-headline {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 36px;
}
.eco-hiw-headline .accent {
    color: var(--eco-orange);
    font-style: italic;
    font-family: var(--font-display);
    margin-left: 12px;
}
.eco-hiw-lede {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.25;
    margin-top: 24px;
    max-width: 720px;
    color: var(--eco-text-soft);
}
.eco-hiw-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    margin: 58px 0 0;
}
.eco-hiw-step {
    background: var(--eco-card);
    border: .5px solid var(--eco-line-bright);
    border-radius: 14px;
    padding: 22px 22px 26px;
    min-height: 210px;
    position: relative;
}
.eco-hiw-step .n {
    display: block;
    color: var(--eco-orange);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
}
.eco-hiw-step .t {
    display: block;
    color: var(--eco-orange);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-top: 18px;
}
.eco-hiw-step .d {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.3;
    margin-top: 14px;
    color: var(--eco-text-soft);
}

/* ============ MODULE: PlatformPillars + PlatformPillar ============ */
.eco-pillars { padding-bottom: 90px; }
.eco-pillars-headline {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 36px;
}
.eco-pillars-headline .accent {
    color: var(--eco-orange);
    font-style: italic;
    font-family: var(--font-display);
    margin-left: 12px;
}
.eco-pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin: 70px 0 0;
}
.eco-pillar {
    background: rgba(255, 255, 255, 0.02);
    border: .5px solid var(--eco-line-bright);
    border-radius: 14px;
    padding: 20px 26px 34px;
}
.eco-pillar .head {
    display: flex;
    justify-content: space-between;
    color: var(--eco-orange);
    font-size: 20px;
    letter-spacing: 0.08em;
    font-family: var(--font-display);
}
.eco-pillar .dotline {
    display: flex;
    align-items: center;
    margin: 22px 0 0;
}
.eco-pillar .dotline::before,
.eco-pillar .dotline::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--eco-orange);
    flex: none;
}
.eco-pillar .dotline span {
    flex: 1;
    height: 1px;
    background: rgba(232, 122, 58, 0.6);
}
.eco-pillar h3 {
    font-size: 23px;
    font-weight: 400;
    line-height: 1.22;
    margin: 34px 0 0;
    font-family: var(--font-display);
}
.eco-pillar .desc {
    font-size: 14px;
    line-height: 1.3;
    margin: 16px 0 0;
    font-family: var(--font-display);
}
.eco-pillar .foot {
    text-align: center;
    color: var(--eco-orange);
    font-size: 18px;
    margin-top: 34px;
    font-family: var(--font-display);
}

/* ============ MODULE: ThermalBranches + ThermalBranch ============ */
.eco-thermal-branches { padding-bottom: 90px; }
.eco-tb-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 36px;
}
.eco-tb-head h2 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.12;
}
.eco-tb-head h2 .accent {
    color: var(--eco-orange);
    font-style: italic;
    font-family: var(--font-display);
    display: block;
    margin-top: 6px;
}
.eco-tb-head .lede {
    font-size: 22px;
    line-height: 1.25;
    padding-top: 20px;
    color: var(--eco-text-soft);
    font-family: var(--font-display);
}
.eco-branch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 56px 0 0;
}
.eco-branch-card {
    background: var(--eco-card);
    border: .5px solid var(--eco-line-bright);
    border-radius: 14px;
    padding: 22px 24px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.eco-branch-card svg {
    width: 36px;
    height: 36px;
    stroke: var(--eco-orange);
    fill: none;
}
.eco-branch-card h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}
.eco-branch-card p {
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.35;
    color: var(--eco-text-soft);
    flex: 1;
}
.eco-branch-card .status {
    color: var(--eco-orange);
    font-family: var(--font-mono-alt);
    font-size: 10px;
    letter-spacing: 0.1em;
    padding-top: 8px;
    border-top: .5px solid var(--eco-line);
    margin-top: 4px;
}

/* ============ §05 SYSTEM LAYERS (stacked diagram) ============ */
.eco-layers { padding: 40px 0 90px; }
.eco-layers-headline {
    font-family: var(--font-serif);
    font-weight: 400; font-size: 60px; line-height: 1.05;
    margin: 40px 0 18px;
}
.eco-layers-headline .accent {
    color: var(--eco-orange); font-style: italic; font-family: var(--font-serif);
    margin-left: 12px;
}
.eco-layers-lede {
    color: var(--eco-text-soft); font-size: 18px; line-height: 1.55; max-width: 780px;
    font-family: var(--font-mono-alt);
}
.eco-layer-stack {
    display: flex; flex-direction: column; gap: 0;
    margin: 60px 0 0; padding-left: 24px; position: relative;
}
.eco-layer-stack::before {
    content: ""; position: absolute; left: 32px; top: 20px; bottom: 20px; width: 1px;
    background: linear-gradient(to bottom, var(--eco-orange), var(--eco-orange-soft), transparent);
}
.eco-layer {
    display: grid; grid-template-columns: 60px 80px 1fr; align-items: center; gap: 20px;
    padding: 22px 0; border-bottom: .5px solid var(--eco-line-dim);
    position: relative;
}
.eco-layer.is-last { border-bottom: 0; }
.eco-layer .rail { position: relative; height: 100%; display: flex; justify-content: center; align-items: center; }
.eco-layer .rail .node {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--eco-orange); box-shadow: 0 0 12px var(--eco-orange-glow);
}
.eco-layer .num {
    color: var(--eco-orange); font-family: var(--font-display);
    font-size: 32px; font-weight: 500;
}
.eco-layer .body h3 {
    font-family: var(--font-mono-alt); font-weight: 500; font-size: 15px;
    color: #fff; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px;
}
.eco-layer .body p {
    color: var(--eco-text-soft); font-size: 15px; line-height: 1.6;
    font-family: var(--font-mono-alt); max-width: 640px;
}

/* ============ §06 FLEXIBLE COMPUTE SOURCES ============ */
.eco-sources { padding-bottom: 90px; }
.eco-sources-headline {
    font-family: var(--font-serif); font-weight: 400; font-size: 60px; line-height: 1.05;
    margin: 40px 0 18px;
}
.eco-sources-headline .accent {
    color: var(--eco-orange); font-style: italic; font-family: var(--font-serif); margin-left: 12px;
}
.eco-sources-lede {
    color: var(--eco-text-soft); font-size: 18px; line-height: 1.55; max-width: 820px;
    font-family: var(--font-mono-alt);
}
.eco-source-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
    margin: 60px 0 0;
}
.eco-source-card {
    background: var(--eco-card); border: .5px solid var(--eco-line-dim);
    border-radius: 18px; padding: 26px 24px;
    display: flex; flex-direction: column; gap: 14px; min-height: 210px;
}
.eco-source-card svg { width: 34px; height: 34px; color: var(--eco-orange); }
.eco-source-card h3 {
    font-family: var(--font-mono-alt); font-weight: 500; font-size: 16px; color: #fff;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.eco-source-card p {
    color: var(--eco-text-soft); font-size: 15px; line-height: 1.55; flex: 1;
    font-family: var(--font-mono-alt);
}
.eco-source-card .status {
    color: var(--eco-orange); font-family: var(--font-mono-alt); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding-top: 12px; border-top: .5px solid var(--eco-line);
}

/* ============ §07 DEPLOYMENT MODES ============ */
.eco-modes { padding-bottom: 90px; }
.eco-modes-headline {
    font-family: var(--font-serif); font-weight: 400; font-size: 60px; line-height: 1.05;
    margin: 40px 0 18px;
}
.eco-modes-headline .accent {
    color: var(--eco-orange); font-style: italic; font-family: var(--font-serif); margin-left: 12px;
}
.eco-modes-lede {
    color: var(--eco-text-soft); font-size: 18px; line-height: 1.55; max-width: 780px;
    font-family: var(--font-mono-alt);
}
.eco-mode-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
    margin: 60px 0 0;
}
.eco-mode-card {
    background: var(--eco-card); border: .5px solid var(--eco-line-dim);
    border-radius: 18px; padding: 26px 24px;
    display: flex; flex-direction: column; min-height: 260px;
}
.eco-mode-card .head {
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: var(--font-mono-alt);
}
.eco-mode-card .head .tier {
    color: var(--eco-orange); font-family: var(--font-display);
    font-size: 30px; font-weight: 500; letter-spacing: 0.06em;
}
.eco-mode-card .head .scale {
    color: var(--eco-text-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.eco-mode-card .dotline {
    height: 1px; background: var(--eco-line-dim); position: relative; margin: 18px 0 14px;
}
.eco-mode-card .dotline span {
    position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--eco-orange);
}
.eco-mode-card .desc {
    color: var(--eco-text-soft); font-size: 15px; line-height: 1.6; flex: 1;
    font-family: var(--font-mono-alt);
}
.eco-mode-card .foot {
    color: var(--eco-orange); font-family: var(--font-mono-alt);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    padding-top: 14px; border-top: .5px solid var(--eco-line); margin-top: 12px;
}

/* ============ §08 WHY IT MATTERS ============ */
.eco-why-matters { padding-bottom: 90px; }
.eco-why-headline {
    font-family: var(--font-serif); font-weight: 400; font-size: 60px; line-height: 1.05;
    margin: 40px 0 18px;
}
.eco-why-headline .accent {
    color: var(--eco-orange); font-style: italic; font-family: var(--font-serif); margin-left: 12px;
}
.eco-why-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    margin: 60px 0 0;
}
.eco-why-item {
    border-top: .5px solid var(--eco-line-dim); padding-top: 24px;
    display: flex; flex-direction: column; gap: 14px;
}
.eco-why-item .num {
    color: var(--eco-orange); font-family: var(--font-display);
    font-size: 28px; font-weight: 500;
}
.eco-why-item h3 {
    font-family: var(--font-mono-alt); font-weight: 500; font-size: 18px;
    color: #fff; letter-spacing: 0.1em; text-transform: uppercase;
}
.eco-why-item p {
    color: var(--eco-text-soft); font-size: 16px; line-height: 1.6;
    font-family: var(--font-mono-alt);
}

/* ============ §01 MANIFESTO (2-col copy+visual + 3-cell orb band + wave divider) ============
 * Ports the design HTML's §01 MANIFESTO shape verbatim:
 * - mani-grid: 1.05fr / 1fr split, copy left (h2 with orange italic accent
 *   + big lede + 2 line-buttons), visual right (product/scene image)
 * - mani-band: 3-col row of orb-cells inside an orange-hairline card;
 *   each cell = 110×110 glowing ring w/ icon + h4 heading + small body
 * - divider-strip: full-bleed decorative image (~121px cover) below
 * Uses the reframed copy passed by cb_home_manifesto_block() but keeps
 * the visual proportions from the Figma export. */
.eco-manifesto { padding-bottom: 0; }
.eco-mani-grid {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 40px; align-items: start; margin-top: 30px;
}
.eco-mani-headline {
    font-family: var(--font-serif); font-size: 60px; font-weight: 700;
    line-height: 1.1; margin: 0;
}
.eco-mani-headline .accent {
    color: var(--eco-orange); font-style: italic; font-family: var(--font-serif);
    margin-left: 12px;
}
.eco-mani-lede {
    font-weight: 300; font-size: 32px; line-height: 1.22;
    margin-top: 44px; max-width: 560px;
    font-family: var(--font-serif); color: #fff;
}
.eco-mani-actions {
    display: flex; gap: 40px; margin: 56px 0 0; flex-wrap: wrap;
}
.eco-body a.eco-btn-line,
.eco-btn-line {
    border: .3px solid var(--eco-orange-soft); border-radius: 14px;
    color: #fff; font-weight: 300; font-size: 26px; padding: 14px 48px;
    background: transparent; font-family: var(--font-serif);
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0.01em;
}
.eco-body a.eco-btn-line:hover,
.eco-btn-line:hover {
    background: rgba(232, 122, 58, 0.08); color: #fff;
}
.eco-mani-visual img {
    width: 100%; border-radius: 8px; display: block;
}

.eco-mani-band {
    border: .4px solid var(--eco-orange-soft); border-radius: 14px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin: 92px 0 0; padding: 56px 40px;
}
.eco-mani-cell {
    display: flex; gap: 28px; align-items: flex-start; padding: 0 12px;
}
.eco-mani-orb {
    position: relative; width: 110px; height: 110px; flex: none;
}
.eco-mani-orb .back {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}
.eco-mani-orb .ring {
    position: absolute; inset: 12px; border-radius: 50%;
    border: 1px solid rgba(232, 122, 58, 0.7);
    box-shadow: 0 0 12px rgba(232, 122, 58, 0.55);
    display: flex; align-items: center; justify-content: center;
}
.eco-mani-orb svg { width: 44px; height: 44px; stroke: #fff; color: #fff; }
.eco-mani-cell-body h4 {
    font-family: var(--font-serif); font-size: 21px; font-weight: 700;
    line-height: 1.2; margin: 0;
}
.eco-mani-cell-body p {
    font-family: var(--font-mono-alt); font-weight: 300; font-size: 14px;
    line-height: 1.4; margin-top: 10px; color: var(--eco-text-soft);
}
.eco-mani-divider { margin-top: 70px; }
.eco-mani-divider img { width: 100%; height: 121px; object-fit: cover; display: block; }

/* ============ TECHNOLOGY DIAGRAM (design HTML §03 verbatim) ============
 * Fixed 1440×1024 canvas with absolute-positioned elements — a schematic
 * of the CB thermal system. Ported wholesale from design/cloudboiler.html
 * so the visual matches the Figma export byte-for-byte. Copy inside
 * every card is editable via the module's VB fields.
 *
 * Hidden below 1180px — the layout depends on fixed pixel coords and
 * cannot responsively reflow. Mobile visitors see the eyebrow only. */
.eco-tech { padding-bottom: 90px; }
/* Viewport wrapper: reserves the space the scaled-down diagram will
 * actually occupy. Without this, transform: scale() leaves the original
 * 1024px layout box in place and creates a huge empty gap below the
 * shrunk diagram. Custom property --tech-scale defaults to 1 (desktop)
 * and drops proportionally at narrower viewports (see media queries). */
.eco-tech-viewport {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 40px auto 0;
    --tech-scale: 1;
    height: calc(1024px * var(--tech-scale));
    overflow: hidden;
}
.eco-tech-diagram {
    position: relative; height: 1024px; width: 1440px;
    transform-origin: top left;
    transform: scale(var(--tech-scale));
}
.eco-tech-diagram .td { position: absolute; }
.eco-tech-diagram .tank {
    left: 550px; top: 108px; width: 340px; height: 800px;
    border: 3px solid #fff; border-radius: 25px; padding: 17px;
}
.eco-tech-diagram .tank .layer { border-radius: 20px; margin: 0; }
.eco-tech-diagram .tank .l1 { height: 156px; background: #d97706; border-radius: 20px 20px 0 0; }
.eco-tech-diagram .tank .l2 { height: 196px; background: rgba(249, 185, 255, 0.1); }
.eco-tech-diagram .tank .l3 { height: 194px; background: rgba(90, 42, 29, 0.7); }
.eco-tech-diagram .tank .l4 { height: 220px; background: #0c1b28; border-radius: 0 0 20px 20px; }
.eco-tech-diagram .tank-cap {
    left: 675px; top: 74px; width: 91px; height: 35px;
    background: rgba(255, 255, 255, 0.4); border-radius: 5px 5px 0 0;
}
.eco-tech-diagram .tank-title {
    left: 606px; top: 38px; font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
    color: #fff; font-family: var(--font-mono-alt);
}
.eco-tech-diagram .tank-leg { width: 28px; height: 42px; background: rgba(255, 255, 255, 0.4); }
.eco-tech-diagram .node-ring {
    width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.eco-tech-diagram .node-ring::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--eco-orange);
}
.eco-tech-diagram .tcard { border: .8px solid var(--eco-orange); border-radius: 14px; }
.eco-tech-diagram .compute-tray {
    left: 67px; top: 80px; width: 380px; height: 228px; padding: 22px 30px; color: #fff;
}
.eco-tech-diagram .compute-tray h4 { font-size: 18px; font-weight: 700; letter-spacing: 0.14em; }
.eco-tech-diagram .compute-tray .sub {
    color: var(--eco-orange); font-size: 10px; letter-spacing: 0.14em; margin-top: 8px;
}
.eco-tech-diagram .gpu-row { display: flex; gap: 12px; margin-top: 22px; }
.eco-tech-diagram .gpu {
    width: 70px; height: 81px; border: 1px solid var(--eco-orange); border-radius: 8px;
    box-shadow: 0 0 10px rgba(232, 122, 58, 0.5); text-align: center; padding: 6px;
    color: #fff;
}
.eco-tech-diagram .gpu img { width: 58px; height: 59px; object-fit: cover; margin: 0 auto; }
.eco-tech-diagram .gpu span { font-size: 12px; }
.eco-tech-diagram .hx1 {
    left: 67px; top: 374px; width: 380px; height: 103px;
    border: .8px solid #fff; border-radius: 14px; padding: 26px 26px; color: #fff;
}
.eco-tech-diagram .hx1 h4 { font-size: 15px; letter-spacing: 0.2em; font-weight: 400; }
.eco-tech-diagram .hx1 p {
    color: var(--eco-orange); font-size: 12px; margin-top: 11px; letter-spacing: 0.06em;
    font-family: var(--font-mono-alt);
}
.eco-tech-diagram .hx1 img {
    position: absolute; right: 8px; top: 12px; width: 80px; height: 80px; object-fit: cover;
}
.eco-tech-diagram .stage-boxes { left: 67px; top: 527px; display: flex; gap: 54px; }
.eco-tech-diagram .stage { width: 83px; text-align: center; }
.eco-tech-diagram .stage .box {
    width: 83px; height: 83px; background: rgba(255, 255, 255, 0.05);
    border: .8px solid var(--eco-orange); border-radius: 8px;
    box-shadow: 0 0 5px rgba(232, 122, 58, 0.8);
    display: flex; align-items: center; justify-content: center;
}
.eco-tech-diagram .stage svg { width: 38px; height: 38px; stroke: #fff; color: #fff; }
.eco-tech-diagram .stage b {
    display: block; font-size: 13px; font-weight: 400; margin-top: 10px; color: #fff;
}
.eco-tech-diagram .stage span {
    display: block; color: rgba(255, 255, 255, 0.6); font-size: 13px;
}
.eco-tech-diagram .heatpump {
    left: 1114px; top: 76px; width: 270px; height: 260px;
    box-shadow: 0 0 20px rgba(232, 122, 58, 0.35); padding: 20px 32px; color: #fff;
}
.eco-tech-diagram .heatpump h4 { font-size: 15px; letter-spacing: 0.28em; font-weight: 400; }
.eco-tech-diagram .heatpump .sub { font-size: 13px; letter-spacing: 0.14em; margin-top: 12px; }
.eco-tech-diagram .hp-rings { position: relative; width: 120px; height: 120px; margin: 22px auto 0; }
.eco-tech-diagram .hp-rings .r1 {
    position: absolute; inset: 0; border: .5px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
}
.eco-tech-diagram .hp-rings .r2 {
    position: absolute; inset: 7px; border: 1px solid var(--eco-orange); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.eco-tech-diagram .hp-rings svg { width: 50px; height: 50px; stroke: #fff; color: #fff; }
.eco-tech-diagram .mcu {
    left: 1078px; top: 399px; width: 306px; height: 165px;
    border: .8px solid #fff; border-radius: 14px; padding: 24px 33px; color: #fff;
}
.eco-tech-diagram .mcu h4 { font-size: 18px; letter-spacing: 0.1em; font-weight: 400; }
.eco-tech-diagram .mcu .sub { font-size: 15px; margin-top: 14px; letter-spacing: 0.05em; }
.eco-tech-diagram .mcu .icons { display: flex; gap: 30px; margin-top: 22px; }
.eco-tech-diagram .mcu .icons svg { width: 36px; height: 36px; stroke: #fff; color: #fff; }
.eco-tech-diagram .trow {
    position: absolute; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.eco-tech-diagram .trow .tick { width: 45px; height: 1px; background: #fff; }
.eco-tech-diagram .trow .temp {
    color: var(--eco-orange); font-size: 15px; font-family: var(--font-mono-alt);
}
.eco-tech-diagram .trow .tag {
    color: rgba(255, 255, 255, 0.85); font-size: 14px; letter-spacing: 0.06em;
    font-family: var(--font-mono-alt);
}
.eco-tech-diagram .flow { position: absolute; border-top: 2px dashed var(--eco-orange); }
.eco-tech-diagram .flow.blue { border-color: var(--eco-blue); }
.eco-tech-diagram .flow.white { border-color: #fff; }
.eco-tech-diagram .flowtag {
    position: absolute; border: .6px solid var(--eco-orange); border-radius: 8px;
    color: var(--eco-orange); font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
    padding: 8px 14px; background: rgba(0, 0, 0, 0.6);
    font-family: var(--font-mono-alt);
}
.eco-tech-diagram .flowtag.blue {
    border-color: var(--eco-blue); color: var(--eco-blue);
    box-shadow: 0 0 10px rgba(61, 163, 227, 0.5);
}
.eco-tech-diagram .flowtag.small { font-size: 12px; }
.eco-tech-diagram .glow-orange { box-shadow: 0 0 10px var(--eco-orange-glow); }
.eco-tech-diagram .flownote {
    position: absolute; color: #fff; font-weight: 300; font-size: 12px; letter-spacing: 0.08em;
    font-family: var(--font-mono-alt);
}

/* ============ EDITORIAL BLOCK (reusable narrative section) ============
 * One flexible module composed per-page for brief PAGE 2-7 SECTIONS
 * A-H. Eyebrow (letter · label) + headline (optional orange italic
 * accent) + lede pull-quote + rich body + orange-dot bullet list +
 * italic footnote. Single-column with max-width so long narratives
 * stay readable. */
.eco-editorial { padding-bottom: 70px; }
.eco-editorial-headline {
    font-family: var(--font-serif); font-weight: 400; font-size: 48px;
    line-height: 1.1; margin: 32px 0 20px; max-width: 900px;
}
.eco-editorial-headline .accent {
    color: var(--eco-orange); font-style: italic; font-family: var(--font-serif);
    margin-left: 10px;
}
.eco-editorial-lede {
    font-family: var(--font-serif); font-size: 22px; line-height: 1.45;
    color: #fff; max-width: 820px; margin: 0 0 24px;
}
.eco-editorial-body {
    font-family: var(--font-mono-alt); font-size: 15px; line-height: 1.75;
    color: var(--eco-text-soft); max-width: 780px;
}
.eco-editorial-body p { margin-bottom: 14px; }
.eco-editorial-body p:last-child { margin-bottom: 0; }
.eco-editorial-bullets {
    list-style: none; margin: 20px 0 0; padding: 0; max-width: 780px;
    display: flex; flex-direction: column; gap: 8px;
}
.eco-editorial-bullets li {
    display: flex; gap: 14px; align-items: baseline;
    font-family: var(--font-mono-alt); font-size: 13px;
    letter-spacing: 0.06em; color: #fff;
    padding: 12px 0; border-top: .5px solid var(--eco-line-dim);
}
.eco-editorial-bullets li:last-child { border-bottom: .5px solid var(--eco-line-dim); }
.eco-editorial-bullets li .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--eco-orange); flex: none;
    box-shadow: 0 0 6px var(--eco-orange-glow);
}
.eco-editorial-footnote {
    font-family: var(--font-mono-alt); font-style: italic; font-size: 12px;
    color: var(--eco-text-dim); margin-top: 24px; max-width: 780px;
    letter-spacing: 0.02em;
}
@media (max-width: 900px) {
    .eco-editorial-headline { font-size: 32px; }
    .eco-editorial-lede { font-size: 18px; }
}

/* ============ RELATED PATHS (brief §15 "Continue Exploring" band) ============
 * 2-4 card grid, orange-hairline cards with label + optional blurb + arrow.
 * Sits before the final Pilot CTA on every page. */
.eco-related { padding-bottom: 90px; }
.eco-eyebrow.eco-eyebrow-plain .label { font-family: var(--font-mono-alt); font-size: 12px; }
.eco-related-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin-top: 32px;
}
.eco-body a.eco-related-card,
.eco-related-card {
    display: flex; flex-direction: column; gap: 14px;
    background: var(--eco-card); border: .5px solid var(--eco-line-dim);
    border-radius: 16px; padding: 24px 22px 22px;
    color: #fff; text-decoration: none; position: relative; min-height: 150px;
    transition: border-color .15s, background .15s;
}
.eco-body a.eco-related-card:hover,
.eco-related-card:hover {
    border-color: var(--eco-orange); color: #fff;
    background: rgba(232, 122, 58, 0.05);
}
.eco-related-card .lbl {
    font-family: var(--font-mono-alt); font-size: 13px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
}
.eco-related-card .blurb {
    font-family: var(--font-mono-alt); font-size: 13px; line-height: 1.5;
    color: var(--eco-text-soft); flex: 1;
}
.eco-related-card .arr {
    color: var(--eco-orange); font-size: 18px; align-self: flex-end;
    transition: transform .18s;
}
.eco-related-card:hover .arr { transform: translateX(4px); }

/* ============ MOBILE HAMBURGER (brief §2 mobile nav) ============
 * Adds a checkbox-driven full-screen menu overlay on mobile. Desktop
 * (>=901px) never sees it — CSS-only, no JS. When checked, the
 * overlay covers the viewport with a stacked, grouped menu that
 * matches the desktop dropdown structure. */
.eco-nav-toggle { display: none; }
.eco-nav-toggle-btn {
    display: none;
    background: transparent; border: 0; padding: 6px; cursor: pointer;
    color: #fff;
}
.eco-nav-toggle-btn svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
.eco-nav-overlay {
    display: none; /* hidden by default; enabled inside mobile @media */
}

/* ============ FAQ PAGE (brief §12 — 6 categories, native <details> accordion) ============
 * Category header (A · PLATFORM etc) + a stack of orange-hairline
 * <details>/<summary> rows. Uses the browser's native disclosure
 * widget so keyboard nav + a11y come for free — no JS.
 * The plus rotates to × when open via `[open] .chev` selector. */
.eco-faq { padding-bottom: 90px; }
.eco-faq-headline {
    font-family: var(--font-serif); font-weight: 400; font-size: 60px; line-height: 1.05;
    margin: 40px 0 18px;
}
.eco-faq-headline .accent {
    color: var(--eco-orange); font-style: italic; font-family: var(--font-serif); margin-left: 12px;
}
.eco-faq-lede {
    color: var(--eco-text-soft); font-size: 18px; line-height: 1.55; max-width: 820px;
    font-family: var(--font-mono-alt);
}
.eco-faq-stack {
    display: flex; flex-direction: column; gap: 48px; margin-top: 60px;
}
.eco-faq-cat { border-top: .5px solid var(--eco-line-dim); padding-top: 28px; }
.eco-faq-cat-head {
    display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px;
}
.eco-faq-cat-head .letter {
    color: var(--eco-orange); font-family: var(--font-display);
    font-size: 32px; font-weight: 500;
}
.eco-faq-cat-head .label {
    color: #fff; font-family: var(--font-mono-alt); font-size: 14px;
    font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.eco-faq-list { display: flex; flex-direction: column; gap: 0; }
.eco-faq-item {
    border-top: .5px solid var(--eco-line-dim);
}
.eco-faq-item:last-child { border-bottom: .5px solid var(--eco-line-dim); }
.eco-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 4px; cursor: pointer; list-style: none;
    font-family: var(--font-serif); font-size: 22px; color: #fff;
    transition: color .15s;
}
.eco-faq-item summary::-webkit-details-marker { display: none; }
.eco-faq-item summary:hover { color: var(--eco-orange); }
.eco-faq-item summary .q { flex: 1; }
.eco-faq-item summary .chev {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    border: .5px solid var(--eco-orange); color: var(--eco-orange);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 22px; font-weight: 500;
    transition: transform .2s, background .15s;
}
.eco-faq-item[open] summary .chev {
    transform: rotate(45deg); background: var(--eco-orange-tint);
}
.eco-faq-item[open] summary { color: var(--eco-orange); }
.eco-faq-item .a {
    color: var(--eco-text-soft); font-family: var(--font-mono-alt);
    font-size: 15px; line-height: 1.65; max-width: 820px;
    padding: 4px 4px 26px;
}
.eco-faq-item .a p { margin-bottom: 12px; }
.eco-faq-item .a p:last-child { margin-bottom: 0; }

/* ============ §09 PILOT CTA (waitlist replacement) ============
 * 2-col at desktop: copy left (headline + lede + meta chips + secondary
 * link), form card right (dark card wrapping the Gravity Form). Stacks
 * to 1-col at <=1180. Copy & meta content is verbatim from brief §9. */
.eco-pilot { padding-bottom: 100px; }
.eco-pilot-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px; margin-top: 44px; align-items: start;
}
.eco-pilot-copy { display: flex; flex-direction: column; gap: 24px; }
.eco-pilot-headline {
    font-family: var(--font-serif); font-weight: 400; font-size: 54px; line-height: 1.05;
    margin: 0;
}
.eco-pilot-headline .accent {
    display: block; color: var(--eco-orange); font-style: italic;
    font-family: var(--font-serif); margin-top: 6px;
}
.eco-pilot-lede {
    color: var(--eco-text-soft); font-size: 18px; line-height: 1.55;
    font-family: var(--font-mono-alt); max-width: 560px;
}
.eco-pilot-meta {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px;
}
.eco-pilot-meta-row {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 999px;
    border: .5px solid var(--eco-line-dim);
    font-family: var(--font-mono-alt); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    white-space: nowrap;
}
.eco-pilot-meta-row .k { color: var(--eco-text-dim); }
.eco-pilot-meta-row .v { color: var(--eco-orange); font-weight: 600; }
.eco-body a.eco-pilot-talk,
.eco-pilot-talk {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
    color: #fff; font-family: var(--font-mono-alt); font-size: 13px;
    letter-spacing: 0.14em; text-transform: uppercase;
    border-bottom: 1px solid var(--eco-line-dim); padding-bottom: 6px;
    align-self: flex-start;
}
.eco-body a.eco-pilot-talk:hover,
.eco-pilot-talk:hover {
    color: var(--eco-orange); border-color: var(--eco-orange);
}
.eco-pilot-talk .arr { color: var(--eco-orange); font-size: 15px; }

/* form card: contain Gravity Forms output in ecosystem-styled shell */
.eco-pilot-form {
    background: var(--eco-card); border: .5px solid var(--eco-line-dim);
    border-radius: 20px; padding: 36px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.eco-pilot-form-fallback {
    color: var(--eco-text-dim); font-family: var(--font-mono-alt); font-size: 13px;
}
/* Gravity Forms overrides — scope to our container so we don't touch other GF instances */
.eco-pilot-form .gform_wrapper { color: #fff; font-family: var(--font-mono-alt); }
.eco-pilot-form .gfield_label,
.eco-pilot-form .gform_wrapper label {
    color: var(--eco-text-dim); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 500; margin-bottom: 6px !important;
}
.eco-pilot-form input[type="text"],
.eco-pilot-form input[type="email"],
.eco-pilot-form input[type="tel"],
.eco-pilot-form input[type="number"],
.eco-pilot-form select,
.eco-pilot-form textarea {
    background: transparent !important;
    border: 0 !important;
    border-bottom: .5px solid var(--eco-line-dim) !important;
    color: #fff !important; padding: 12px 0 !important;
    font-family: var(--font-mono-alt) !important; font-size: 15px !important;
    /* Firefox: makes native scrollbars/borders inside the select popup dark
     * to match the option list; Chrome/WebKit ignores this + uses OS colors
     * unless we style <option> directly below. */
    color-scheme: dark;
    border-radius: 0 !important; box-shadow: none !important;
    width: 100% !important;
}
.eco-pilot-form input:focus,
.eco-pilot-form select:focus,
.eco-pilot-form textarea:focus {
    outline: none !important;
    border-bottom-color: var(--eco-orange) !important;
}
.eco-pilot-form input::placeholder { color: var(--eco-text-dim); }
/* Dark background + white text on the actual dropdown options —
 * without this, INTEREST/HOUSEHOLD options rendered white-on-white in
 * the native popup (browser inherits the OS light theme for <option>). */
.eco-pilot-form select option,
.eco-pilot-form select optgroup {
    background-color: #111 !important;
    color: #fff !important;
}
.eco-pilot-form select option:checked,
.eco-pilot-form select option:hover {
    background-color: var(--eco-orange) !important;
    color: #0b0b0b !important;
}
.eco-pilot-form .gform_button,
.eco-pilot-form input[type="submit"] {
    background: var(--eco-orange) !important;
    color: #0b0b0b !important;
    border: 0 !important; border-radius: 999px !important;
    padding: 14px 28px !important;
    font-family: var(--font-mono-alt) !important; font-size: 12px !important;
    font-weight: 700 !important; letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-top: 20px !important; cursor: pointer;
    box-shadow: 0 10px 24px rgba(232, 122, 58, 0.28);
}
.eco-pilot-form .gform_button:hover,
.eco-pilot-form input[type="submit"]:hover {
    background: #ff8d4f !important;
}
.eco-pilot-form .validation_error,
.eco-pilot-form .gfield_validation_message,
.eco-pilot-form .gfield_error .gfield_label {
    color: var(--eco-orange) !important;
    font-family: var(--font-mono-alt); font-size: 12px;
    letter-spacing: 0.06em;
}
.eco-pilot-form .gfield { margin-bottom: 18px !important; }
.eco-pilot-form .gform_confirmation_message {
    color: #fff; font-family: var(--font-serif); font-size: 22px;
    padding: 24px 0; text-align: center;
}

/* ============ RESPONSIVE — module overrides ============ */
@media (max-width: 1180px) {
    .eco-hero-grid   { grid-template-columns: 1fr; }
    .eco-hero-visual { display: none; }
    .eco-num-cards   { grid-template-columns: 1fr; }
    .eco-hiw-steps   { grid-template-columns: repeat(2, 1fr); }
    .eco-hero h1 { font-size: 48px; }
    .eco-hero h1 .accent { font-size: 42px; }
    .eco-hiw-headline { font-size: 42px; }
    .eco-pillars-headline { font-size: 42px; }
    .eco-pillar-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .eco-tb-head { grid-template-columns: 1fr; gap: 20px; }
    .eco-tb-head h2 { font-size: 42px; }
    .eco-branch-grid { grid-template-columns: repeat(2, 1fr); }
    .eco-layers-headline,
    .eco-sources-headline,
    .eco-modes-headline,
    .eco-why-headline { font-size: 42px; }
    .eco-source-grid { grid-template-columns: repeat(2, 1fr); }
    .eco-mode-grid   { grid-template-columns: repeat(2, 1fr); }
    .eco-why-grid    { grid-template-columns: 1fr; }
    .eco-layer { grid-template-columns: 40px 60px 1fr; gap: 14px; }
    .eco-layer .num { font-size: 26px; }
    .eco-pilot-grid { grid-template-columns: 1fr; gap: 34px; }
    .eco-pilot-headline { font-size: 42px; }
    /* Technology diagram: scale the whole 1440×1024 canvas down
     * proportionally so the full schematic fits the viewport width.
     * The viewport wrapper reserves the scaled height so the section
     * doesn't leave a huge empty gap below. Text stays crisp because
     * we're transforming a vector layout, not a raster. Formula:
     * scale = viewport / 1440. Users on very narrow phones still see
     * every label — pinch-zoom for reading detail. */
    /* 100vw / 1440px = unitless ratio (length/length). Using bare
     * 1440 would evaluate to a length (px), which scale() rejects. */
    .eco-tech-viewport { --tech-scale: calc(100vw / 1440px); }
    /* Section eyebrow labels can be long (e.g. "HOMES ALREADY NEED
     * THERMAL ENERGY", "FLEXIBLE COMPUTE SOURCES"); default is
     * white-space: nowrap which gets clipped by .eco-section
     * overflow: hidden at 390px. Let the label wrap and hide the
     * trailing rule line — the label alone is enough of a section
     * marker on mobile. */
    .eco-eyebrow .label { white-space: normal; line-height: 1.2; }
    .eco-eyebrow .rule { display: none; }
    /* Manifesto responsive: mani-grid stacks, mani-band drops to 1 col,
     * headline scales, orb shrinks. */
    .eco-mani-grid { grid-template-columns: 1fr; gap: 32px; }
    .eco-mani-band { grid-template-columns: 1fr; gap: 40px; padding: 40px 28px; }
    .eco-mani-headline { font-size: 44px; }
    .eco-mani-lede { font-size: 22px; margin-top: 28px; }
    .eco-body a.eco-btn-line, .eco-btn-line { font-size: 20px; padding: 12px 32px; }
    .eco-mani-orb { width: 88px; height: 88px; }
    .eco-mani-orb svg { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
    .eco-hiw-steps { grid-template-columns: 1fr; }
    .eco-hero-actions { flex-wrap: wrap; }
    .eco-branch-grid { grid-template-columns: 1fr; }
    .eco-pillar-grid { grid-template-columns: 1fr; }
    .eco-source-grid { grid-template-columns: 1fr; }
    .eco-mode-grid   { grid-template-columns: 1fr; }
    .eco-pilot-form { padding: 26px 20px; }
    .eco-mani-band { padding: 28px 20px; }
    .eco-mani-cell { flex-direction: column; gap: 16px; }
}
@media (max-width: 900px) {
    .eco-pilot-headline { font-size: 32px; }
    .eco-mani-headline { font-size: 34px; }
    .eco-mani-lede { font-size: 19px; }
    .eco-mani-actions { gap: 16px; }
    .eco-body a.eco-btn-line, .eco-btn-line { font-size: 16px; padding: 10px 24px; }
    .eco-mani-divider img { height: 60px; }
}

/* ============ REDUCED MOTION (accessibility) ============ */
@media (prefers-reduced-motion: reduce) {
    .eco-body a { transition: none; }
}