/* v8 hero (2026-10-06): grind → interlock → automate. Gears drawn live by js/gears.js. Grind is red-hot,
   running is the accent (Bitcoin orange), so the two never read the same. Desktop layout from 900 px. */
.ghero{position:relative;height:calc(max(680px,min(100svh,940px)) - var(--sh,34px));overflow:hidden;isolation:isolate;padding:0;
  background:radial-gradient(circle at 70% 56%,#101a31 0%,var(--bg) 62%)}
.ggrid{position:absolute;inset:0;z-index:-3;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(135,148,173,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(135,148,173,.07) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 62% 58%,#000 0%,transparent 70%);mask-image:radial-gradient(circle at 62% 58%,#000 0%,transparent 70%)}
#gstage{position:absolute;inset:0;width:100%;height:100%;z-index:-2;touch-action:pan-y;cursor:grab}
.gveil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(7,11,20,.94) 21%,rgba(7,11,20,0) 41%,rgba(7,11,20,0) 76%,rgba(7,11,20,.92) 90%,var(--bg) 100%)}
.gcopy{position:relative;height:100%;pointer-events:none}
.gcopy .wrap{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav) + 14px) 0 calc(22px + env(safe-area-inset-bottom))}
.gcopy a,.gcopy button{pointer-events:auto}
.ghero .eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted)}
.ghero .eyebrow:before{content:"";width:22px;height:3px;border-radius:2px;background:var(--lime)}
.ghero h1{font-size:clamp(42px,12vw,50px);font-weight:900;line-height:.98;letter-spacing:-.035em;word-spacing:0;margin-top:12px}
.ghero h1 .gr{display:inline-block}
.ghero h1.grinding .gr{animation:gshake .12s infinite;color:#ffd0c8}
@keyframes gshake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-1.5px,1px) rotate(-.6deg)}50%{transform:translate(1px,-1px) rotate(.4deg)}75%{transform:translate(-1px,-1px) rotate(-.3deg)}100%{transform:translate(1px,1px) rotate(.5deg)}}
.ghero h1 .l2{display:block;color:var(--lime);opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.25,1.25)}
.ghero h1 .l2.show{opacity:1;transform:none}
.glede{display:none;margin-top:16px;max-width:44ch;font-size:18.5px;color:var(--muted)}
.gbtns{display:flex;gap:10px;width:100%}
.gbtns .btn{flex:1;padding:16px 18px;font-size:16px}
.gfacts{margin-top:10px;font-size:13px;color:var(--dim);font-weight:500}
.gfacts b{color:var(--muted)}
@media(min-width:900px){
  .gveil{background:linear-gradient(90deg,var(--bg) 0%,rgba(7,11,20,.9) 26%,rgba(7,11,20,0) 48%),linear-gradient(180deg,rgba(7,11,20,.7) 0%,rgba(7,11,20,0) 18%,rgba(7,11,20,0) 84%,var(--bg) 100%)}
  .gcopy .wrap{justify-content:center}
  .ghero h1{font-size:clamp(52px,5.7vw,84px)}
  .glede{display:block}
  .gbtns{width:auto;margin-top:28px}
  .gbtns .btn{flex:none;min-width:180px}
}
/* labels on the gears */
.gtag{position:absolute;z-index:3;left:0;top:0;pointer-events:none;white-space:nowrap;font:700 12.5px/1 var(--B);padding:7px 11px 7px 9px;border-radius:999px;display:flex;align-items:center;gap:6px;
  background:rgba(13,21,38,.92);box-shadow:inset 0 0 0 1px rgba(242,246,255,.12),0 8px 20px rgba(0,0,0,.35);opacity:0;transition:opacity .35s}
.gtag i{width:7px;height:7px;border-radius:50%;background:#f2382c;flex:none}
.gtag.hot{color:#ffd0c8;box-shadow:inset 0 0 0 1px rgba(242,56,44,.6),0 0 18px rgba(242,56,44,.25)}
.gtag.hot.show{animation:gshake .14s infinite}
.gtag.ok{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(247,147,26,.6),0 8px 20px rgba(0,0,0,.35)}
.gtag.ok i{background:var(--lime)}
.gtag.show{opacity:1}
@media(max-width:600px){.gtag{font-size:11.5px;padding:6px 9px 6px 8px}}
@media(prefers-reduced-motion:reduce){.ghero h1.grinding .gr,.gtag.hot.show{animation:none}}

/* section 2: the old photo hero, now "See it on the job" (needs no section padding; its scenes fill it) */
.hero{padding:0}
/* v9: quieter, white only, so it sits on the photos instead of fighting them */
.hero h2.hh{font-size:clamp(30px,8.4vw,36px);font-weight:800;line-height:1.05;margin:10px 0 0;text-shadow:0 2px 24px rgba(7,11,20,.6)}
.hero h2.hh span{display:block;color:rgba(242,246,255,.72)}
@media(min-width:760px){.hero h2.hh{font-size:clamp(40px,4vw,56px)}}