.metal-hero{--metal-mask:38%;position:relative;isolation:isolate;overflow:hidden;background:#101010;color:#fff;font-family:Inter,'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif}
.metal-hero__surface,.metal-hero__mask{position:absolute;inset:0;pointer-events:none}.metal-hero__surface{z-index:-2;background:radial-gradient(ellipse at 50% 30%,#434343,#111 68%)}.metal-hero__surface{container-type:size}.metal-hero__surface::before{content:'';position:absolute;inset:0;background:url('/cyber/metal-hero-still-landscape.webp') center/calc(100cqmin*2.6) 100cqmin no-repeat}@container (max-aspect-ratio:1/1){.metal-hero__surface::before{background-image:url('/cyber/metal-hero-still-portrait.webp');background-size:100cqmin calc(100cqmin*2.3)}}.metal-hero__surface[data-live]::before{opacity:0;transition:opacity 0s .5s}.metal-hero__surface canvas{display:block;width:100%;height:100%;position:relative;opacity:0}.metal-hero__surface[data-live] canvas{opacity:1;transition:opacity .5s}.metal-hero__mask{z-index:-1;background:#000;opacity:var(--metal-mask)}
.metal-hero__content{text-align:center;padding:clamp(150px,15vw,200px) 20px 36px}body.cyber-site.replica-site .replica-main .metal-hero h1{width:100%;max-width:1216px;margin:0 auto;color:#fff;font-family:'Sendy Hero','Sendy Display',Helvetica,sans-serif;font-size:clamp(28px,calc((100vw - 64px)/9.3),128px);font-weight:700;letter-spacing:-.025em;line-height:1.05}.metal-hero h1>span{display:block;white-space:nowrap}.metal-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:38px auto 0}body.cyber-site.replica-site .metal-hero__actions a{position:relative;display:inline-flex;align-items:center;justify-content:center;width:290px;max-width:100%;min-height:68px;padding:0 16px;border:1px solid #fff;border-radius:999px;color:#fff;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:18px;font-weight:600}.metal-hero__actions a>span{position:relative;z-index:2}body.cyber-site.replica-site .metal-hero__actions .metal-hero__primary{background:#272727;color:#fff}.metal-hero__actions>.metal-fx-root{width:290px;max-width:100%}.metal-hero__actions>.metal-fx-root .metal-hero__primary{width:100%}.metal-hero__laptop{display:block;width:100%;max-width:800px;height:auto;margin:28px auto 0}.metal-hero__actions a:focus-visible,.metal-hero__controls :focus-visible{outline:2px solid white;outline-offset:3px}
.metal-hero__controls{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 12px 20px;font-size:12px;color:#fff}.metal-hero__modes,.metal-hero__controls label,.metal-hero__controls>button,.metal-hero__refs{display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #ffffff50;border-radius:6px;background:#090909dc}.metal-hero__controls button,.metal-hero__controls a{border:0;border-radius:3px;padding:6px 8px;background:transparent;color:#ddd;font:inherit;text-decoration:none;cursor:pointer}.metal-hero__controls button[aria-pressed=true]{background:#fff;color:#111}.metal-hero__controls label{gap:8px;padding:8px}.metal-hero__controls input{width:90px;accent-color:#fff}.metal-hero__refs a{text-decoration:underline}
@media(max-width:767px){.metal-hero__content{min-height:min(860px,100svh);padding:120px 16px 40px}body.cyber-site.replica-site .replica-main .metal-hero h1{font-size:clamp(40px,13.25vw,64px)}.metal-hero__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;gap:12px}body.cyber-site.replica-site .metal-hero__actions a,.metal-hero__actions>.metal-fx-root{width:100%;min-width:0}body.cyber-site.replica-site .metal-hero__actions a{min-height:62px;font-size:16px}.metal-hero__laptop{width:100%;max-width:600px;margin-top:36px}.metal-hero__controls{gap:7px}}

.metal-hero{--hero-lift:clamp(24px,calc(15vw - 126px),64px)}
.metal-hero[data-hero-position="all-up"] .metal-hero__content{padding-top:calc(clamp(150px,15vw,200px) - var(--hero-lift))}
.metal-hero[data-hero-position="copy-up"] :is(h1,.metal-hero__actions){transform:translateY(calc(-1 * var(--hero-lift)))}
@media(max-width:767px){
 .metal-hero{--hero-lift:24px}
 .metal-hero[data-hero-position="all-up"] .metal-hero__content{padding-top:96px}
}

/* The reference composition fits the available browser viewport in these two comparisons. */
.metal-hero[data-hero-viewport="hero"],.metal-hero[data-hero-viewport="hero-logos"]{--hero-fit-height:100svh;height:var(--hero-fit-height);min-height:500px}
.metal-hero[data-hero-viewport="hero-logos"]{--hero-fit-height:calc(100svh - 144px)}
.metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__content{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%;min-height:0;box-sizing:border-box;padding:clamp(96px,calc(var(--hero-fit-height)*.1678),200px) 20px clamp(16px,calc(var(--hero-fit-height)*.03),36px)}
body.cyber-site.replica-site .replica-main .metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] h1{font-size:clamp(40px,min(calc((100vw - 64px)/9.3),calc(var(--hero-fit-height)*.1074)),128px);transform:none}
.metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__actions{display:flex;flex-wrap:nowrap;align-items:stretch;margin:clamp(20px,calc(var(--hero-fit-height)*.0319),38px) auto 0;gap:12px;transform:none}
body.cyber-site.replica-site .metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__actions a{width:clamp(184px,calc(var(--hero-fit-height)*.2433),290px);height:clamp(56px,calc(var(--hero-fit-height)*.057),68px);min-height:56px;font-size:clamp(16px,calc(var(--hero-fit-height)*.0151),18px)}
.metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__actions>.metal-fx-root{width:clamp(184px,calc(var(--hero-fit-height)*.2433),290px)}
.metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__laptop{box-sizing:border-box;display:block;justify-self:center;align-self:end;width:100%;max-width:800px;height:100%;min-height:0;max-height:100%;margin:0;padding-top:clamp(16px,calc(var(--hero-fit-height)*.0234),28px);object-fit:contain;object-position:center bottom}
.replica-main[data-hero-framing="hero-logos"] #client-logos{box-sizing:border-box;height:144px;min-height:144px;margin:0;padding:24px 0;display:flex;align-items:center}
.replica-main[data-hero-framing="hero-logos"] .replica-logo-strip{width:100%}
@media(max-width:767px){
 .metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__content{padding-inline:16px}
 body.cyber-site.replica-site .replica-main .metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] h1{font-size:clamp(40px,min(13.25vw,calc(var(--hero-fit-height)*.1074)),64px)}
 .metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:400px}
 body.cyber-site.replica-site .metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__actions a,.metal-hero:not([data-hero-viewport="natural"])[data-hero-viewport] .metal-hero__actions>.metal-fx-root{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
 .replica-main[data-hero-framing="hero-logos"] .replica-logo-strip{max-width:1000px;margin-inline:auto}
 .replica-main[data-hero-framing="hero-logos"] .replica-logo-track:not([aria-hidden]){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;min-width:0;width:100%}
 .replica-main[data-hero-framing="hero-logos"] .replica-logo-track .hero-testimonial-card{width:100%;min-height:48px;padding:4px 12px}
}
@media(prefers-reduced-motion:reduce) and (max-width:767px){
 .replica-main[data-hero-framing="hero-logos"] .replica-logo-track:not([aria-hidden]){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .replica-main[data-hero-framing="hero-logos"] .replica-logo-track .hero-testimonial-card{min-height:40px}
}

/* Keep the chosen viewport framing while comparing only the device spacing. */
.metal-hero[data-hero-spacing="compact"]{--hero-device-gap:20px}
.metal-hero[data-hero-spacing="balanced"]{--hero-device-gap:44px}
.metal-hero[data-hero-spacing="airy"]{--hero-device-gap:68px}
.metal-hero[data-hero-viewport="hero"]:not([data-hero-spacing="reference"]) .metal-hero__content{padding-top:clamp(104px,calc(16.78svh - 44px),156px)}
.metal-hero[data-hero-viewport="hero"]:not([data-hero-spacing="reference"]) .metal-hero__laptop{height:min(43svh,calc(100% - var(--hero-device-gap)));max-height:533px;align-self:start;margin-top:var(--hero-device-gap);padding:0;object-position:center top}
@media(max-width:767px){
 .metal-hero[data-hero-viewport="hero"]:not([data-hero-spacing="reference"]){--hero-fit-height:calc(100svh - 144px);height:var(--hero-fit-height);min-height:460px}
 .metal-hero[data-hero-viewport="hero"]:not([data-hero-spacing="reference"]) .metal-hero__content{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%;padding:clamp(132px,18svh,168px) 16px 28px}
 .metal-hero[data-hero-viewport="hero"]:not([data-hero-spacing="reference"]) .metal-hero__laptop{height:100%;max-height:100%;margin:0;padding-top:32px;object-fit:contain;object-position:center}
 .replica-main[data-hero-framing="hero"] #client-logos{box-sizing:border-box;height:144px;min-height:144px;margin:0;padding:24px 0;display:flex;align-items:center}
 .replica-main[data-hero-framing="hero"] .replica-logo-strip{width:100%}
}
@media(prefers-reduced-motion:reduce) and (max-width:767px){
 .replica-main[data-hero-framing="hero"] .replica-logo-track:not([aria-hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;width:100%}
 .replica-main[data-hero-framing="hero"] .replica-logo-track .hero-testimonial-card{width:100%;min-height:40px;padding:4px 12px}
}

@media(max-width:767px){
 body.cyber-site .metal-hero[data-hero-viewport="hero"][data-hero-spacing="balanced"]{--hero-fit-height:98svh;height:98svh;min-height:700px}
 body.cyber-site .metal-hero[data-hero-viewport="hero"][data-hero-spacing="balanced"] .metal-hero__content{grid-template-columns:minmax(0,1fr);padding-top:clamp(138px,19svh,164px);padding-bottom:32px}
 body.cyber-site .metal-hero[data-hero-viewport="hero"][data-hero-spacing="balanced"] .metal-hero__laptop{width:108vw;max-width:none;height:auto;max-height:none;margin-top:36px;padding:0;align-self:center;object-fit:contain}
}