/* ecosystem.css — the homepage sheet. Direction C ("same palette, fixed", Caleb 2026-10-18: "pages are too
 * long", "go with C, keep the map and the form", "simplify form too"): the same dark palette, half the
 * length, one column of short sections. The file keeps its name because eco_inline.py, asset_version.py
 * and deploy.sh know it by that name (M112: never churn a reference you can avoid). The previous version
 * (the E "living ecosystem": canvas garden, per-zone recolouring, reveal animation) is in git history up
 * to 2026-10-18. Everything above the "below the fold" marker ships inline as the first-paint slice.
 */
:root{
  --soil:#050806; --soil-2:#0A1009; --loam:#101A12; --hair:#1C2A20;
  --cream:#F3F0E6; --mute:#8DA092;
  --live:#4FD089; --live-deep:#2F8F5E; --gold:#F0C254; --rust:#D4612A;
  --d:"Fraunces",Georgia,serif; --b:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --m:ui-monospace,SFMono-Regular,Menlo,monospace;
  --accent:var(--gold);

  /* This page is PERMANENTLY dark (decision 2026-10-05, measured contrast failures in light mode when the
   * theme-aware tokens from site.css painted dark text on this dark ground). These are exactly the values
   * the inline critical CSS defines under prefers-color-scheme:dark, pinned so they apply in BOTH modes.
   * Pinned ratios on --soil: green 9.34, soft 9.47, ink 17.50; cream on cloud 14.34; faint 5.63. */
  --green:#5FC48A; --soft:#B3B2AC; --ink:#F1EFE9;
  --cloud:#1D2024; --line:rgba(240,240,236,.12);
  --paper:#121315; --faint:#8D8C86; --line-2:rgba(240,240,236,.22);
  /* --paper2 paints the footer (site.css: footer{background:var(--paper2)}). Unpinned, the light scheme
   * painted the footer cream under the pinned light text: 1.01:1 on "Caleb Schallert", found by the
   * rendered contrast check once it judged both schemes (2026-10-18). Same dark value as --paper. */
  --paper2:#0E0F11;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,html body{overflow-x:clip}  /* clip, not hidden: hidden makes <html> the scroll container and the sticky nav stops working (Paragon F3, 2026-10-07) */
body{margin:0;background:var(--soil);color:var(--cream);font-family:var(--b);font-size:17px;line-height:1.6}
.w{max-width:1140px;margin:0 auto;padding:0 16px}
@media(min-width:900px){.w{padding:0 48px}}

/* ── hero: headline left, the portrait as a green panel right ── */
.hero{border-bottom:1px solid var(--hair)}
.hero .w{display:grid;gap:36px;padding-top:56px;padding-bottom:48px}
@media(min-width:960px){.hero .w{grid-template-columns:1.35fr .82fr;gap:64px;align-items:center;padding-top:84px;padding-bottom:72px}}
.hero .eyebrow{font-family:var(--b);font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);margin:0 0 22px}
h1{font-family:var(--d);font-weight:380;font-size:clamp(2.3rem,6vw,4.1rem);line-height:1.05;letter-spacing:-.028em;margin:0;max-width:17ch;text-wrap:balance}
h1 em{font-style:italic;font-weight:620;color:var(--gold)}
.lede{margin:24px 0 0;color:var(--mute);font-size:clamp(1.02rem,1.7vw,1.2rem);max-width:46ch;line-height:1.54}
.acts{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 0}
.hero .btn{border-radius:999px}
.hero .btn.ghost{color:var(--cream);border-color:var(--line-2)}
.hero .btn.ghost:hover{color:var(--gold);border-color:var(--gold)}
.note{margin:18px 0 0;font-size:14px;color:var(--mute);max-width:44ch;line-height:1.5}
.panel{background:var(--loam);border:1px solid var(--hair);border-radius:6px;padding:22px}
/* site.css only positions the portrait photo inside .epic (the old hero); this hero is .hero, so the panel owns it */
.panel .portrait{position:relative;overflow:hidden;aspect-ratio:4/5;margin:0 0 16px;border-radius:4px;box-shadow:none}
.panel .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.panel .portrait .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);font-size:13px;font-weight:600;color:#F3ECDC}
.panel .portrait .cap b{display:block;font-family:var(--d);font-weight:700;font-size:18px}
.panel .pname{font-family:var(--d);font-size:1.18rem;font-weight:600;margin:0;color:var(--cream);letter-spacing:-.01em}
.panel p{margin:6px 0 0;font-size:13.5px;color:var(--mute);line-height:1.5}
/* the machine-quotable definition block under the hero (2026-10-07), first-paint so it never reflows */
.hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 22px;margin:0;padding:22px 0 0;border-top:1px solid var(--hair)}
.hero-facts>div{margin:0}
.hero-facts dt{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--live);margin:0 0 4px}
.hero-facts dd{margin:0;color:var(--cream);font-size:15px;line-height:1.5}
@media(min-width:960px){.hero .w>.hero-facts{grid-column:1/-1}}

/* ── real numbers only, with the unit spelled out ── */
.stats{border-bottom:1px solid var(--hair);background:var(--soil-2)}
.stats .w{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:24px;padding-bottom:24px}
@media(min-width:760px){.stats .w{gap:40px;padding-top:28px;padding-bottom:28px}}
.stat{margin:0}
.stat dt{font-family:var(--d);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;margin:0}
.stat dd{margin:7px 0 0;font-size:13.5px;color:var(--mute);line-height:1.42}

/* ── section base ── */
section.s{padding:64px 0;border-bottom:1px solid var(--hair)}
@media(min-width:900px){section.s{padding:88px 0}}
h2.sh{font-family:var(--d);font-weight:400;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.1;letter-spacing:-.02em;margin:0;max-width:22ch;text-wrap:balance}
h2.sh em{font-style:italic;font-weight:620;color:var(--gold)}
.sub{margin:14px 0 0;color:var(--mute);max-width:54ch;font-size:17px}
/* ── below the fold ── (eco_inline.py cuts the first-paint slice here) */

/* three cards */
.three{display:grid;gap:18px;margin:40px 0 0;align-items:start}
@media(min-width:820px){.three{grid-template-columns:repeat(3,1fr);gap:24px}}
.card{background:var(--soil-2);border:1px solid var(--hair);border-radius:6px;padding:22px 22px 24px}
.card h3{font-family:var(--b);font-size:15px;font-weight:800;margin:0 0 8px;color:var(--cream)}
.card p{margin:0;color:var(--mute);font-size:15px;line-height:1.55}
.cmpnote{margin:24px 0 0;font-size:14px;color:var(--mute);max-width:58ch}
.cmpnote a{color:var(--accent)}

/* steps and service rows: one line each, a hairline between */
.steps{margin:40px 0 0}
.stepr{display:grid;gap:6px;padding:22px 0;border-top:1px solid var(--hair)}
@media(min-width:800px){.stepr{grid-template-columns:96px 1fr 1.4fr;gap:30px;align-items:baseline}}
.stepr:last-child{border-bottom:1px solid var(--hair)}
.stepr .n{font-family:var(--m);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--gold)}
.stepr h3{font-family:var(--d);font-weight:520;font-size:1.24rem;margin:0;letter-spacing:-.012em}
.stepr p{margin:0;color:var(--mute);font-size:15.5px}
.svcs{margin:40px 0 0}
.sv{display:grid;gap:5px;padding:20px 0;border-top:1px solid var(--hair)}
@media(min-width:800px){.sv{grid-template-columns:.85fr 1.6fr;gap:30px;align-items:baseline}}
.sv:last-child{border-bottom:1px solid var(--hair)}
.sv h3{font-family:var(--d);font-weight:520;font-size:1.2rem;margin:0}
.sv h3 a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--line-2)}
.sv h3 a:hover{color:var(--gold);border-color:var(--gold)}
.sv p{margin:0;color:var(--mute);font-size:15.5px}

/* the state map keeps its own sheet (usmap.css); only its rhythm inside this section lives here */
#map .usmap{margin-top:34px}
/* site.css gives every .zipform label flex:1 1 160px (the service-page ZIP block); under the map the label is a word */
#map .usmap-zip{align-items:center}
#map .usmap-zip label{flex:0 0 auto;min-width:0}

/* who you are hiring */
.bio{display:grid;gap:28px;margin:36px 0 0}
@media(min-width:900px){.bio{grid-template-columns:1.3fr .85fr;gap:58px;align-items:start}}
.bio p{margin:0 0 16px;max-width:58ch;color:var(--cream)}
.bio p:last-child{margin:0}
.facts{margin:0;background:var(--loam);border:1px solid var(--hair);border-radius:6px;padding:22px 24px}
.facts>div{margin:0 0 16px}.facts>div:last-child{margin:0}
.facts dt{font-family:var(--m);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--live);font-weight:700;margin:0 0 4px}
.facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--cream)}

/* reviews: two static cards (Caleb's ruling D2, 2026-10-07) */
.revgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:720px){.revgrid{grid-template-columns:1fr 1fr}}
.rev{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--soil-2);border:1px solid var(--hair);border-radius:6px;padding:20px 20px 18px}
.rev blockquote{margin:0}
.rev blockquote p{margin:0;font-family:var(--d);font-size:1.04rem;font-style:italic;line-height:1.5;color:var(--cream)}
.rev figcaption{font-size:14px;color:var(--mute)}
.rev figcaption b{display:block;color:var(--cream);font-style:normal}
.rev figcaption .revbiz{color:var(--soft);font-size:.9rem}
#reviews .more{margin:22px 0 0;font-size:14px}
#reviews .more a{color:var(--accent)}

/* the ending: site.css paints .contact with the light paper tokens, which this dark page overrides */
.contact{background:linear-gradient(180deg,var(--loam),var(--soil));padding:64px 0 72px}
@media(min-width:900px){.contact{padding:88px 0 96px}}
.contact .leadwrap{gap:40px}
@media(max-width:860px){.contact .leadwrap{grid-template-columns:1fr}}
.contact .eyebrow{color:var(--gold)}
.contact h2{font-family:var(--d);font-weight:400;font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.1;margin:0;letter-spacing:-.02em;max-width:17ch;text-wrap:balance}
.contact h2 em{font-style:italic;font-weight:620;color:var(--gold)}
.contact .sub,.contact .trust-row li{color:var(--soft)}
.contact .sub a{color:var(--accent)}
#planapp{margin:0}
.lead{background:var(--loam);border-color:var(--hair);box-shadow:none}

/* chat chips on the dark page (2026-10-07): chat.css colours them with --blue, 2:1 against the panel */
.chat-chip{color:var(--live);border-color:color-mix(in srgb,var(--live) 38%,transparent);background:color-mix(in srgb,var(--live) 9%,transparent)}
.chat-chip:hover,.chat-chip:focus-visible{color:var(--gold);border-color:var(--gold)}

/* phone rhythm */
@media(max-width:700px){section.s{padding:52px 0}.hero .w{padding-top:40px;padding-bottom:36px}.hero-facts{padding-top:18px;gap:12px 18px}}