/*
 * Hakemistoarkistojen (Domainit/Kunnat/Nettiradiot/Ilmaiskokeilut) "hero"
 * -yläosa. Käyttäjän pyynnöstä (2026-09) sama visuaalinen kieli kuin
 * Windows-virhekoodit-sivulla (ks. error-codes.css: .hb-ec-hero) — musta
 * pohja, keltainen (#ddc76d) alareunaviiva ja korostus, punainen (#d6111e)
 * tehoste — jotta hakemistot tuntuvat samalta tuoteperheeltä. Oma
 * luokkanimiavaruus (.hb-dir-*) ettei tämä sekoitu error-codes.css:n omiin
 * tyyleihin tai JS-valitsimiin.
 */
.hb-dir-hero{background:#000;color:#fff;padding:52px 0;border-bottom:8px solid #ddc76d}
.hb-dir-hero__inner{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.hb-dir-hero__text{min-width:280px;flex:1}
.hb-dir-kicker{display:inline-block;color:#ddc76d;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hb-dir-hero h1{color:#fff;font-size:clamp(32px,5.2vw,50px);margin:10px 0;line-height:1.08}
.hb-dir-hero p{color:#fff;opacity:.85;max-width:54ch;margin:0;font-size:16px}
.hb-dir-hero__stat{background:#fff;color:#000;padding:20px 26px;border-radius:16px;box-shadow:8px 8px 0 #d6111e;text-align:center;min-width:150px}
.hb-dir-hero__stat b{display:block;font-size:32px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.hb-dir-hero__stat span{display:block;font-size:11.5px;font-weight:800;color:#d6111e;text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
@media (max-width:760px){
	.hb-dir-hero{padding:36px 0}
	.hb-dir-hero__inner{flex-direction:column;align-items:flex-start}
	.hb-dir-hero__stat{align-self:stretch}
}