/* Section "Why HK: Hero with corridor diagram" (patterns/hk-hero.php). */

.hkh{background:radial-gradient(90% 70% at 50% 75%,#3A34A0 0%,#1B1850 50%,#0C0B28 100%);color:#D4D2EE;padding:150px 0 clamp(40px,5vw,72px);overflow:hidden}
.hkh__in{display:block}
.hkh__txt{max-width:980px;margin:0 auto;text-align:center}
.hkh h1{color:#fff;font-size:clamp(42px,5.4vw,84px);margin:0 auto 28px;max-width:20ch}
.hkh__lead{font-size:clamp(18px,1.6vw,22px);color:#fff;max-width:62ch;margin:0 auto 16px}
.hkh__tag{margin-top:26px!important;font-weight:800;font-stretch:78%;font-variation-settings:'wdth' 78;text-transform:uppercase;letter-spacing:.04em;color:var(--tide);font-size:20px}
.corr{margin:clamp(24px,4vw,48px) 0 0}
.corr svg{width:100%;height:auto;overflow:visible}
.corr__ghost{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2}
.corr__line{fill:none;stroke:var(--tide);stroke-width:3;stroke-linecap:round}
.pil rect{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.35)}
.pil text{fill:#fff;font:700 17px var(--f);letter-spacing:.12em;text-transform:uppercase;text-anchor:middle}
.nd2 circle{fill:#1B1850;stroke:var(--tide);stroke-width:2.5}
.nd2 .dot{fill:var(--tide);stroke:none}
.nd2 text{fill:#fff;font:800 22px var(--f);font-stretch:80%;font-variation-settings:'wdth' 80;text-transform:uppercase;letter-spacing:.02em}
.nd2 text.sub{fill:#B9B6DD;font:500 15px var(--f);text-transform:none;letter-spacing:0}
.nd2--hk circle{fill:var(--tide);stroke:#fff;stroke-width:3}
.nd2--hk text.in{fill:#110F34;font-size:21px}
@media (prefers-reduced-motion:no-preference){
  .corr__line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s .4s cubic-bezier(.6,.1,.2,1) forwards}
  .pil{opacity:0;animation:fade .8s 2.4s forwards}
}

@media (max-width:980px){
  .corr{margin-left:calc(var(--g) * -1);margin-right:calc(var(--g) * -1)}
}

@media (max-width:640px){
  .hkh__txt{text-align:left}
  .hkh h1,.hkh__lead{margin-left:0}
}