/* One image, one message, one action per scene. */
.infra-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto;padding:0;min-height:max(700px,100svh);touch-action:pan-y}
.hero-images{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-images .screen-photo{z-index:auto;opacity:0;transform:scale(1.02);transition:opacity .85s ease,transform 1.5s ease;object-position:center;filter:saturate(.65)}
.hero-images .screen-photo.is-current{opacity:1;transform:scale(1)}
.infra-hero::before{background:linear-gradient(90deg,var(--wash-start) 0%,var(--wash-mid) 43%,color-mix(in srgb,var(--wash-end) 60%,transparent) 100%)}
.hero-main{display:flex;align-items:center;padding-top:150px;padding-bottom:90px}
.infra-hero .screen-copy{width:100%;max-width:850px}
.infra-hero h1{max-width:none;font-size:clamp(56px,6.4vw,90px);line-height:1.1;letter-spacing:-.045em;text-wrap:initial}
.infra-hero p.screen-lede{max-width:36ch;min-height:3em;margin-top:27px;font-size:clamp(20px,1.65vw,23px);line-height:1.5}
.infra-hero .screen-actions{margin-top:30px}
.infra-hero .screen-link{font-size:17px;gap:26px;border-color:var(--accent-rule);padding-bottom:12px}
.infra-hero .screen-link>span:first-child{color:var(--fg)}
.hero-controls{display:flex;align-items:center;gap:35px;padding-bottom:30px}
.hero-selectors{display:flex;align-items:stretch;gap:40px}
.hero-selectors button{position:relative;padding:15px 0;border:0;border-bottom:1px solid transparent;font:400 17px/1.35 var(--f-body);color:var(--muted);background:none;text-align:left;cursor:pointer}
.hero-selectors button::after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--ember);transition:width .5s ease}
.hero-selectors button[aria-pressed="true"],.hero-selectors button:hover{color:var(--fg)}
.hero-selectors button[aria-pressed="true"]::after{width:100%}
.hero-controls #ai-slide-play{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border:0;background:none;color:var(--muted);cursor:pointer;margin-left:auto;padding:11px}
.hero-controls #ai-slide-play:hover{color:var(--accent-ink)}
.hero-controls #ai-slide-play svg{width:18px;height:18px}
.infra-hero .screen-bottom{position:static;inset:auto;padding-bottom:24px;min-height:60px}
.infra-hero .trust-inline{font-size:13px;gap:20px}
.infra-hero .trust-inline span+span{padding-left:20px}
.infra-hero .trust-inline img{width:24px;height:24px}
.hero-copy.slide-enter{animation:hero-copy-arrive .5s ease both}
@keyframes hero-copy-arrive{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-controls button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:5px}
@media(min-width:1600px){.infra-hero .screen-copy{max-width:980px}.infra-hero h1{font-size:96px}}
@media(max-width:800px){.hero-main{padding-top:130px;padding-bottom:70px}.infra-hero h1{font-size:clamp(44px,7.3vw,62px)}.hero-selectors{gap:30px}.hero-controls{gap:20px}}
@media(max-width:600px){.infra-hero{min-height:max(700px,100svh)}.hero-main{padding-top:125px;padding-bottom:70px}.infra-hero h1{font-size:clamp(34px,9.6vw,53px);line-height:1.13;letter-spacing:-.04em}.infra-hero p.screen-lede{font-size:20px;min-height:4.5em;max-width:27ch;margin-top:24px}.infra-hero .screen-actions{margin-top:24px}.infra-hero .screen-link{font-size:16px;gap:22px}.hero-controls{gap:10px;padding-bottom:28px;align-items:flex-start}.hero-selectors{flex:1;display:grid;grid-template-columns:1.15fr 1.2fr 1fr;gap:14px}.hero-selectors button{font-size:14px;line-height:1.4;padding:10px 0 12px}.hero-controls #ai-slide-play{width:26px;height:39px;padding:9px 4px}.infra-hero .screen-bottom{gap:15px;min-height:65px;padding-bottom:22px}.infra-hero .trust-inline{font-size:12px;gap:8px}.infra-hero .trust-inline span+span{padding-left:0}.infra-hero .screen-bottom>button{padding:5px 0}.hero-images .screen-photo{object-position:63% center}.infra-hero::before{background:linear-gradient(90deg,var(--wash-start),color-mix(in srgb,var(--wash-mid) 90%,transparent))}}
@media(prefers-reduced-motion:reduce){.hero-images .screen-photo,.hero-selectors button::after{transition:none;transform:none}.hero-copy.slide-enter{animation:none}}

/* The opening establishes the whole offering before the individual capabilities. */
.infra-hero[data-scene="overview"] h1{font-size:clamp(52px,5.5vw,78px);line-height:1.08}
.infra-hero[data-scene="overview"] p.screen-lede{max-width:42ch}
.hero-nav-short{display:none}
@media(min-width:1600px){.infra-hero[data-scene="overview"] h1{font-size:86px}}
@media(max-width:800px){.infra-hero[data-scene="overview"] h1{font-size:clamp(42px,6.5vw,60px)}.hero-selectors{gap:24px}}
@media(max-width:600px){.infra-hero[data-scene="overview"] h1{font-size:clamp(32px,9.6vw,49px);line-height:1.13}.hero-selectors{display:flex;justify-content:space-between;gap:10px}.hero-selectors button{font-size:14px;white-space:nowrap}.hero-nav-full{display:none}.hero-nav-short{display:inline}.hero-controls{gap:8px}.hero-controls #ai-slide-play{width:22px;padding-inline:2px}.infra-hero[data-scene="overview"] p.screen-lede{max-width:28ch}}
@media(max-width:370px){.hero-selectors{gap:8px}.hero-selectors button{font-size:12px}}

/* Overview image: compute to data to AI agents. On phones it is enlarged so the agents sit between the call to action and the tabs. */
.hero-images .screen-photo[data-hero-photo="0"]{object-position:right center}
@media(max-width:600px){
  .hero-images .screen-photo[data-hero-photo="0"]{object-position:right top;height:120%}
  .infra-hero[data-scene="overview"] .hero-main{align-items:flex-start;padding-top:136px;padding-bottom:220px}
  .infra-hero[data-scene="overview"]::before{background:linear-gradient(180deg,var(--wash-start) 0%,var(--wash-mid) 40%,color-mix(in srgb,var(--wash-mid) 35%,transparent) 58%,color-mix(in srgb,var(--wash-end) 40%,transparent) 71%,var(--wash-start) 91%)}
}
@media(min-width:601px) and (max-width:1000px) and (orientation:portrait){.infra-hero[data-scene="overview"] .hero-main{align-items:flex-start;padding-top:150px}}
/* The overview image carries data panels behind the copy column: hold the darker wash a little further right there. */
@media(min-width:1001px){.infra-hero[data-scene="overview"]::before{background:linear-gradient(90deg,var(--wash-start) 0%,var(--wash-start) 34%,var(--wash-mid) 52%,color-mix(in srgb,var(--wash-end) 60%,transparent) 100%)}}
/* Applied AI image: the copy sits on the dark wall, the AI workspace on the monitor to its right. */
@media(max-width:1300px){.hero-images .screen-photo[data-hero-photo="3"]{object-position:28% center}}
@media(max-width:1000px){.hero-images .screen-photo[data-hero-photo="3"]{object-position:22% center}}
@media(max-width:600px){.hero-images .screen-photo[data-hero-photo="3"]{object-position:30% center}}