/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,6vw,80px) 0 clamp(32px,6vw,72px)}
.hero h1{max-width:14ch}
.hero .actions{margin-top:28px}
.hero-note{color:var(--muted);font-size:.95rem;margin-top:22px}

/* borehole drawing: colours via classes so the strict CSP needs no style="" attributes */
.borehole{display:block;margin:0 auto;height:min(72vh,560px);width:auto}
.borehole text{font-family:var(--body);fill:var(--muted);font-size:11px}
.borehole .f-ink{fill:var(--ink)}
.borehole .s-ink{stroke:var(--ink)}
.borehole .f-surface{fill:var(--surface)}
.borehole .lbl{fill:var(--ink);font-weight:600}
.borehole .halo{paint-order:stroke;stroke:var(--surface);stroke-width:3px}

/* sections */
.section{padding:clamp(32px,5vw,72px) 0;border-top:1px solid var(--line)}
.section > .wrap > h2{max-width:22ch}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:36px}
.step{position:relative;padding-top:18px;border-top:2px solid var(--ink)}
.step b{display:block;font-family:var(--display);font-size:2rem;font-weight:400;line-height:1;margin-bottom:10px;color:var(--accent)}
.step h3{margin-bottom:.35em}
.step p{color:var(--muted);margin:0}
.step code{font-family:var(--body);background:color-mix(in srgb,var(--ink) 8%,transparent);padding:1px 6px;border-radius:4px;font-weight:500}

.adapt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);margin-top:28px;align-items:start}
.adapt ul{margin:0;padding-left:1.2em;color:var(--muted)}
.adapt li{margin:.35em 0}
.orgs{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.org{display:flex;align-items:center;gap:14px;padding:16px 18px;border-top:1px solid var(--line)}
.org:first-child{border-top:0}
.org small{display:block;color:var(--muted)}
.cta{padding:clamp(40px,6vw,90px) 0;text-align:left}
.cta .actions{margin-top:24px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .borehole{height:360px;margin:0}
  .steps{grid-template-columns:1fr}
  .adapt{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .borehole .qc{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.2s .3s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}