/* Approved connected architecture hero, September 8, 2026. */
body { background: var(--paper); }
    .hero-stack { max-width: 1680px; margin: auto; padding: 126px 4vw 32px; display: grid; grid-template-columns: 37% minmax(0,1fr); column-gap: 22px; align-items: center; }
    .hero-stack-copy { padding-bottom: 20px; position: relative; z-index: 2; }
    .hero-stack-copy h1 { font-family: Montserrat,Instrument,sans-serif; font-size: clamp(43px,4.15vw,66px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; text-align: left; }
    .hero-stack-copy h1 span { display: block; white-space: nowrap; }
    .hero-stack-copy p { max-width: 350px; font-size: 20px; line-height: 1.5; margin-top: 30px; }
    .hero-stack-copy .button { margin-top: 30px; }
    .hero-architecture { position: relative; margin: 0; padding-right: 130px; }
    .hero-architecture > img { width: 100%; height: auto; mix-blend-mode: multiply; mask-image: linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent); mask-composite: intersect; }
    .hero-layer { position: absolute; right: 0; width: 128px; margin: 0; padding: 0 0 0 15px; transform: translateY(-50%); }
    .hero-layer::before { content: ''; position: absolute; right: calc(100% - 5px); width: 29px; top: 10px; height: 1px; background: var(--blue); opacity: .7; }
    .hero-layer strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--blue); }
    .hero-layer span { display: block; font-size: 12px; line-height: 1.45; margin-top: 7px; }
    .hero-layer-use { top: 22%; }
    .hero-layer-work { top: 43%; }
    .hero-layer-soft { top: 62%; }
    .hero-layer-infra { top: 81%; }
    .hero-stack-foot { max-width: 1546px; margin: 0 4vw; padding: 24px 0 30px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .hero-stack-foot p { font-size: 15px; }
    .hero-stack-foot span { font-size: 12px; }
    @media (min-width: 1700px) { .hero-stack-foot { margin: auto; } }
    @media (max-width: 1100px) and (min-width: 701px) { .hero-stack { grid-template-columns: 40% minmax(0,1fr); column-gap: 10px; padding-top: 132px; } .hero-stack-copy h1 { font-size: 4.1vw; } .hero-architecture { padding-right: 98px; } .hero-layer { width: 99px; padding-left: 10px; } .hero-layer strong { font-size: 13px; } .hero-layer span { font-size: 10px; } .hero-stack-copy p { font-size: 18px; max-width: 290px; } }
    @media (max-width: 700px) { .hero-stack { display: flex; flex-direction: column; padding: 138px 16px 20px; gap: 30px; } .hero-stack-copy { width: 100%; text-align: center; padding: 0; } .hero-stack-copy h1 { font-size: clamp(28px,8.5vw,58px); line-height: 1.03; text-align: center; } .hero-stack-copy p { font-size: 18px; margin: 27px auto 0; max-width: 310px; } .hero-stack-copy .button { margin-top: 24px; } .hero-architecture { width: 100%; padding-right: 85px; } .hero-layer { width: 91px; padding-left: 11px; } .hero-layer::before { width: 17px; right: calc(100% - 7px); top: 7px; } .hero-layer strong { font-size: 12px; } .hero-layer span { font-size: 10px; line-height: 1.4; margin-top: 5px; } .hero-stack-foot { justify-content: center; padding: 22px 0 26px; margin: 0 24px; text-align: center; } .hero-stack-foot p { font-size: 14px; } .hero-stack-foot span { display: none; } }
@media (max-width: 700px) { .hero-layer span { display: none; } }
/* Keep all four labels readable when the full detail cannot fit. */
@media (min-width:701px) and (max-width:1100px) { .hero-layer span { display:none; } }