/* MOCKUP B — "Bold Dark Industrial" Dark-dominant, photography-forward. Full-bleed photo hero with protection gradient + transparent overlay nav, oversized condensed type, amber + red accents, alternating full-width project rows. Content identical (ESW_HOME). */ (function () { const { Button, StatBlock } = window.ESWagnerDesignSystem_ee40a0; const D = window.ESW_HOME; const head = () => ({ fontFamily: "var(--font-heading)", fontWeight: 700, textTransform: "uppercase", lineHeight: 1.0, letterSpacing: "-0.01em", margin: 0 }); const eyebrow = (color) => ({ fontFamily: "var(--font-heading)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.16em", fontSize: 14, color: color || "var(--esw-dozer)", display: "inline-flex", alignItems: "center", gap: 12 }); const body = { fontFamily: "var(--font-body)", lineHeight: 1.65 }; const rule = { width: 64, height: 4, background: "var(--brand-primary)", margin: "20px 0 0" }; function Eyebrow({ children, color, noLine }) { return {!noLine && }{children}; } function SectorCardB({ s }) { const c = `var(--esw-${s.color === "dirt" ? "carolina-dirt" : s.color})`; return ( e.preventDefault()} className="reveal" style={{ background: "radial-gradient(120% 140% at 90% 0%, #1c4456 0%, var(--esw-navy) 55%, var(--esw-navy-900) 100%)", border: "1px solid rgba(255,255,255,0.08)", borderLeft: `3px solid ${c}`, borderRadius: "var(--radius-md)", padding: "26px 24px", display: "flex", flexDirection: "column", gap: 13, transition: "transform .25s var(--ease-out), box-shadow .25s" }} onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-lg)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}>

{s.label}

{s.blurb}

 ); } function ProjectRow({ p, i, iconMap }) { return (
{p.title} {p.status}
{iconMap && iconMap[p.sector] && ( )}{p.sector}

{p.title}

{p.location}
{p.metrics.map((m) => )}
); } function App() { window.useReveal(); const sectorIcon = React.useMemo(() => D.sectors.items.reduce((m, s) => { m[s.label] = s.img; return m; }, {}), []); React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }); return (
{/* 1 — HERO (full-bleed photo) */}
ESW bridge girder lift
{D.hero.eyebrow}

{D.hero.h1a} {D.hero.h1b}

{/* 2 — INTRO */}
{/* gravel hexagon-point divider in the gutter — reaches top & bottom, sits clear of text */}
{D.intro.eyebrow}

Four Generations
of Groundwork

{D.intro.body}

{/* 3 — STAT BAND */}
{D.stats.map((s) => (
{s.value}
{s.label}
{s.sublabel}
))}
{/* 4 — SECTORS */}
{D.sectors.eyebrow}

{D.sectors.h2}

{D.sectors.intro}

{D.sectors.items.map((s) => )}
{/* 5 — FEATURED PROJECTS (alternating rows) */}
{D.projects.eyebrow}

{D.projects.h2}

{D.projects.intro}

{D.projects.items.map((p, i) => )}
{/* 6 — CAREERS (full-bleed photo) */}
ESW operator
{D.careers.eyebrow}

Build Your Career
at E.S. Wagner

{D.careers.pitch}

{D.careers.paths.map((p) => (

{p.title}

{p.blurb}

))}
{/* 7 — CULTURE */}
{/* hexagon stack — photo & red are regular hexagons (aspect 2/√3 ≈ 1.1547) */}
{/* red hexagon — same (full) height as the light shape; shifted right so it extends a little past the photo's right point; parallel edges */}
{/* large light shape — fills the entire left side; top reaches the section top; its right point sits BELOW the photo/red right point */}
{/* photo hexagon — on top; shifted right so its right point lines up vertically with the light shape's point */}
ESW crew
{D.culture.eyebrow}

{D.culture.h2}

{D.culture.body}

"{D.culture.quote}"

— {D.culture.quoteAttr}
{/* 8 — SAFETY (full-bleed dramatic) */}
ESW safety vest — Own It
{D.safety.eyebrow}

{D.safety.headline}

{D.safety.body}

Safety — Own It!
{/* 9 — NEWS */}
{/* 10 — CAPABILITY */}
{D.capability.eyebrow}
400+
Pieces of major equipment

{D.capability.body}

{/* 11 — CLOSING CTA */}

{D.closing.h2}

{D.closing.body}

{/* 12 — LOCATIONS STRIP */}
); } ReactDOM.createRoot(document.getElementById("root")).render(); })();