function Hero() {
  return (
    <header id="top" style={{ paddingTop: 56, paddingBottom: 0 }}>
      <div className="shell">
        {/* Top meta row — establishes editorial frame */}
        <div className="hero-meta" style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          paddingBottom: 28,
          borderBottom: "1px solid var(--ink-15)",
          marginBottom: 88,
        }}>
          <div className="eyebrow">Sophie's Bureau · Est. France · Operating UK & EU</div>
          <div className="eyebrow">Calm structure, smart growth</div>
        </div>

        {/* Headline + supporting column */}
        <div className="hero-headline-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 360px",
          gap: 80,
          alignItems: "end",
          marginBottom: 80,
        }}>
          <div>
            <div className="eyebrow-num" style={{ marginBottom: 24 }}>(Hero / 01)</div>
            <h1 className="h-display" style={{ margin: 0 }}>
              Where calm<br/>
              structure meets <em style={{ fontStyle: "italic", color: "var(--gold)", fontWeight: 400 }}>smart growth</em>.
            </h1>
          </div>
          <div style={{ paddingBottom: 8 }}>
            <p className="body" style={{ marginTop: 0, marginBottom: 28, color: "var(--ink-60)" }}>
              Support systems that free your headspace and keep your business in rhythm. A small,
              human-centred digital operations practice for consultants, coaches, and values-led businesses.
            </p>
            <a href="#contact" className="btn btn-primary">
              Book a consultation <ArrowRight />
            </a>
            <div className="body-sm" style={{ marginTop: 14 }}>
              45-minute discovery call · No obligation
            </div>
          </div>
        </div>

        {/* Editorial visual band — three placeholders, varied tones */}
        <div className="hero-plates" style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr",
          gap: 16,
          marginBottom: 96,
        }}>
          <EditorialPlaceholder label="Saint Quentin La Poterie · Gard, France" tone="sand" aspect="16/10" src="assets/saint-quentin-la-poterie-sophies-bureau.jpg"/>
          <EditorialPlaceholder label="Notes from the desk" tone="cream" aspect="4/5" src="assets/notebook.jpg"/>
          <EditorialPlaceholder label="A workflow in progress" tone="teal" aspect="4/5" src="assets/workflow.jpg"/>
        </div>

        {/* Intro / brand statement — long-form */}
        <section id="intro" style={{ paddingBottom: 96 }}>
          <div className="section-head">
            <div className="num">(02)</div>
            <div className="head-body">
              <div className="eyebrow" style={{ marginBottom: 18 }}>Approach</div>
              <h2 className="h-section">
                Every business has a rhythm —<br/>
                <em style={{ fontStyle: "italic", color: "var(--gold)", fontWeight: 400 }}>keep the flow effortless.</em>
              </h2>
            </div>
          </div>

          <div className="intro-grid" style={{
            display: "grid",
            gridTemplateColumns: "80px 1fr 1fr",
            gap: 32,
            alignItems: "start",
          }}>
            <div className="indent-collapse-mobile"></div>
            <p className="lede" style={{ margin: 0 }}>
              Good systems feel like good design. Invisible. Elegant. Supportive.
            </p>
            <div>
              <p className="body" style={{ marginTop: 0 }}>
                Sophie's Bureau builds quiet structures that keep a business running smoothly,
                so attention stays on the work that only you can do. The approach blends human
                judgement with intelligent technology, grounded in ethical choices about the tools
                a business depends on.
              </p>
              <p className="body" style={{ marginBottom: 0, color: "var(--ink-60)" }}>
                Automation and AI are used where they add clear, practical value. The focus stays on
                clarity, space, and momentum — foundations that support steady growth without
                unnecessary noise.
              </p>
              <a href="#services" style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                marginTop: 24,
                fontSize: 14,
                fontWeight: 500,
                borderBottom: "1px solid var(--accent)",
                paddingBottom: 2,
                color: "var(--accent-deep)",
              }}>
                Discover how <ArrowDown size={12}/>
              </a>
            </div>
          </div>
        </section>
      </div>
    </header>
  );
}

window.Hero = Hero;