/* First-screen photography: filters affect display only; source photos stay intact. */
.hero-visual{position:absolute;inset:0 0 0 26%;z-index:-3;overflow:hidden;pointer-events:none}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 900ms ease;z-index:0}
.hero-slide.is-active{opacity:1;z-index:1}
.hero-slide picture{display:block;width:100%;height:100%}
.hero .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-position,center);filter:var(--hero-filter,none)}
.hero-slide-room{--hero-position:60% 50%;--hero-filter:brightness(1.1) saturate(.84) contrast(1.03)}
.hero-slide-compressors{--hero-position:48% 55%;--hero-filter:brightness(1.22) saturate(.86) contrast(1.04)}
.hero-slide-piping{--hero-position:52% 50%;--hero-filter:brightness(1.03) saturate(.9) contrast(1.04)}
.hero-slide-outdoor{--hero-position:50% 54%;--hero-filter:brightness(.98) saturate(.82) contrast(1.04)}
.hero .hero-inner{min-height:560px;padding-bottom:110px}
.hero-shade{pointer-events:none;background:linear-gradient(90deg,#0c243bf7 0%,#102b47f2 25%,#102b47bd 45%,#102b4715 78%,#102b4724 100%)}
.hero-controls{position:absolute;left:0;bottom:20px;display:flex;align-items:center;gap:5px;min-height:48px;padding:2px 9px;border:1px solid #ffffff35;background:#0b23409c;backdrop-filter:blur(8px);border-radius:3px}
.hero-controls[hidden]{display:none}
.hero-count{display:flex;align-items:baseline;gap:7px;min-width:56px;padding-left:5px;font-size:10px;letter-spacing:.04em;line-height:1;color:#c3d0db;font-variant-numeric:tabular-nums}
.hero-count b{font-size:17px;font-weight:650;color:#fff}
.hero-dots{display:flex;gap:1px;align-items:center;margin-right:5px}
.hero-dots button{display:grid;place-items:center;width:25px;min-height:44px;padding:0}
.hero-dots button span{display:block;width:17px;height:2px;background:#ffffff55;transition:background .2s ease,height .2s ease}
.hero-dots button[aria-pressed=true] span{height:3px;background:#60d2fa}
.hero-control{display:grid;place-items:center;flex-shrink:0;width:40px;min-height:44px;padding:0;color:white;font-size:19px;line-height:1}
.hero-toggle{border-left:1px solid #ffffff30;margin-left:2px;font-size:15px}
.hero-control:hover,.hero-dots button:hover{background:#ffffff14}
.hero-controls button:focus-visible{outline:2px solid #76d8f7;outline-offset:0}
.hero .photo-caption{display:flex;flex-direction:column;gap:4px;align-items:flex-end;bottom:28px;font-size:11px;letter-spacing:.015em;color:#fff;text-shadow:0 1px 5px #000,0 0 12px #0008}
.photo-caption-label{font-size:9px;letter-spacing:.2em;color:#d0e6f2}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:1500px){.hero .hero-inner{min-height:590px}}
@media(max-width:1100px){.hero-visual{left:22%}}
@media(max-width:860px){
  .hero-visual{left:5%}
  .hero-shade{background:linear-gradient(90deg,#0b2445f5 0%,#102b47da 40%,#102b4730 100%)}
  .hero .hero-inner{min-height:540px}
}
@media(max-width:560px){
  .hero{min-height:0;touch-action:pan-y pinch-zoom}
  .hero .hero-inner{min-height:690px;align-items:flex-start;padding-top:42px;padding-bottom:125px}
  .hero-visual{inset:326px 0 69px}
  .hero-shade{background:linear-gradient(180deg,#102b47 0px,#102b47 296px,#102b4766 380px,#102b4708 450px,#102b4722 540px,#0b2340d9 690px,#0b2340 100%)}
  .hero h1{font-size:clamp(30px,8.6vw,36px)}
  .hero-slide-room{--hero-position:62% 55%}
  .hero-slide-compressors{--hero-position:45% 60%}
  .hero-slide-piping{--hero-position:50% 58%}
  .hero-slide-outdoor{--hero-position:46% 60%}
  .hero-controls{bottom:18px;gap:2px;padding-inline:7px;max-width:100%}
  .hero-count{min-width:50px;font-size:9px;padding-left:3px}
  .hero-count b{font-size:16px}
  .hero-dots{margin-right:2px}
  .hero-dots button{width:24px}
  .hero-control{width:39px}
  .hero .photo-caption{align-items:flex-start;left:0;right:auto;bottom:86px;gap:3px;font-size:11px}
  .photo-caption-label{font-size:8px}
}
@media(max-width:360px){
  .hero-controls{gap:1px}
  .hero-count{min-width:45px}
  .hero-dots button{width:20px}
  .hero-control{width:36px}
}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}