/* Reference geometry: PC 1536x1024; mobile 946x1663. Scoped to the 18 hubs. */
.mh-page{container-type:inline-size}
.mh-page .mh-hero{padding:max(116px,9.05cqw) 5cqw 3.3cqw;min-height:0}
.mh-page .mh-hero-grid{max-width:none;grid-template-columns:38% minmax(0,1fr);grid-template-rows:max-content 1fr;column-gap:1.04cqw;row-gap:1.55cqw;align-items:start}
.mh-page .mh-heading{grid-area:1/1;align-self:start}
.mh-page .mh-heading h1{font-size:clamp(28px,3.2cqw,60px)!important;line-height:1.3;letter-spacing:.025em;margin-top:1.75cqw!important;text-wrap:initial;line-break:strict}
.mh-page .mh-heading h1 .sui-ph{display:inline-block!important}
body[data-middle-hub="equip-faucet"] .mh-heading h1{font-size:clamp(28px,3.8cqw,72px)!important}
.mh-page .mh-details{grid-area:2/1;align-self:start;max-width:none}
.mh-page .mh-details>p{font-size:clamp(17px,1.45cqw,24px);line-height:1.8;margin:0 0 24px!important}
.mh-page .mh-collage{grid-area:1/2/3/3;display:block;position:relative;aspect-ratio:1.66;min-width:0;width:100%;max-width:none;margin:.6cqw 0 0;align-self:start;justify-self:stretch;padding:0}
.mh-page .mh-photo{position:absolute!important;margin:0!important;grid-area:auto;--mh-mask:url('/flow02/service-hub/assets/hero-leaf-v2.svg')}
.mh-page .mh-photo--1{left:0;top:14%;width:49.4%;aspect-ratio:1.012}
.mh-page .mh-photo--2{left:54.2%;top:0;width:40.5%;aspect-ratio:1.15;--mh-mask:url('/flow02/service-hub/assets/hero-pebble-v2.svg')}
.mh-page .mh-photo--3{left:53.5%;top:60%;width:31.5%;aspect-ratio:1.312;display:block;--mh-mask:url('/flow02/service-hub/assets/hero-pebble-v2.svg')}
.mh-page .mh-photo::before{inset:-1.2cqw -1.1cqw -.5cqw .3cqw}
.mh-page .mh-photo--1::before{inset:0 -1.5cqw -.55cqw .4cqw}
.mh-page .mh-photo img{object-position:var(--mh-position,50% 50%)!important}
.mh-page .mh-hero::before{top:max(96px,6.7cqw);right:3cqw;width:35.4cqw;height:22.1cqw;transform:none;border-radius:26% 65% 13% 68% / 20% 42% 50% 70%}
@media(min-width:768px){.mh-page .mh-hero::before{border-radius:0;mask:url('/flow02/service-hub/assets/hero-accent-desktop-v2.svg') center/100% 100% no-repeat}}
.mh-page .mh-hero::after{height:16.3cqw;mask:url('/flow02/service-hub/assets/hero-wave-desktop-v2.svg') center/100% 100% no-repeat}
.mh-page .mh-thread{height:15cqw;bottom:0}
.mh-page .mh-hero-foot{max-width:none;margin:5.9cqw -1.7cqw 0;gap:15cqw;justify-content:flex-start;font-size:clamp(12px,1.04cqw,17px)}
.mh-page .mh-hero-foot .sf02-scroll{font-size:clamp(9px,.78cqw,13px)}
.mh-page .mh-label{position:relative;width:min(23cqw,100%);height:4.2cqw;min-height:37px;max-height:80px;margin:0}
.mh-page .mh-label-source{position:absolute!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important}
.mh-page .mh-label-crop{display:block;position:absolute;top:50%;left:0;width:100%;aspect-ratio:var(--label-ratio);transform:translateY(-50%);overflow:hidden;pointer-events:none}
.mh-page .mh-label-art{display:block!important;position:absolute!important;max-width:none!important;width:var(--label-image-width)!important;height:auto!important;left:var(--label-image-left)!important;top:var(--label-image-top)!important;margin:0!important;object-fit:contain!important;transform:none!important}
/* The reference faucet copy is short; keep its exact visual rhythm. */
body[data-middle-hub="equip-faucet"] .mh-details>p{font-size:clamp(17px,1.95cqw,38px);line-height:1.55;letter-spacing:.04em;margin:0!important}
body[data-middle-hub="equip-faucet"] .mh-details .sf02-hero-actions{margin-top:2.3cqw!important;gap:1.8cqw}
body[data-middle-hub="equip-faucet"] .mh-details .sf02-button{width:23.1cqw;min-width:0;padding:0 0 6px;font-size:clamp(14px,1.43cqw,27px)}
body[data-middle-hub="equip-faucet"] .mh-details .sf02-button-face{min-height:max(52px,4.62cqw);gap:10px;padding:.6cqw .6cqw .6cqw 2.15cqw;box-shadow:0 5px 0 var(--solid),0 12px 20px #21677a18,inset 0 1px 0 #ffffff26}
body[data-middle-hub="equip-faucet"] .mh-details .sf02-arrow{flex-basis:3.6cqw;height:3.6cqw;min-width:34px;min-height:34px;font-size:clamp(22px,1.7cqw,32px)}
body[data-middle-hub="equip-faucet"] .mh-details .sf02-phone{font-size:clamp(13px,1.17cqw,22px);line-height:1.8}
body[data-middle-hub="equip-faucet"] .mh-details .sf02-phone small{font-size:clamp(12px,1.1cqw,21px)}
/* Preserve the company mark and navigation; align their existing boxes. */
body[data-middle-hub] .sui-header:not(.sui-compact){padding:19px 3.2vw 12px;gap:18px}
body[data-middle-hub] .sui-header .sui-brand{padding:0;gap:14px;background:none}
body[data-middle-hub] .sui-header .sui-brand img{width:48px;height:48px}
body[data-middle-hub] .sui-header .sui-brand strong{font-size:20px}
body[data-middle-hub] .sui-header .sui-brand small{font-size:9px;letter-spacing:.1em}
@media(min-width:768px) and (max-width:1100px){
 .mh-page .mh-heading h1{font-size:clamp(27px,3.2cqw,42px)!important}
 .mh-page .mh-details :is(.tf-actions,.fs-hero-actions,.fe-hero-actions,.sc-hero-actions){flex-direction:column}
 .mh-page .mh-details :is(.tf-button,.fp-button,.fc-button,.sc-btn,.btn-primary){font-size:14px;padding:14px 18px}
 .mh-page .mh-label{width:100%;max-width:29cqw}
 .mh-page .mh-hero-foot{margin-top:50px}
}
@media(max-width:767px){
 .mh-page .mh-hero{padding:26.5cqw 7.8cqw 7cqw}
 .mh-page .mh-hero-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:2.5cqw;max-width:none}
 .mh-page .mh-heading{grid-area:1/1}
 .mh-page .mh-label{width:76cqw;max-width:100%;height:13cqw;min-height:0;max-height:none;margin-left:3.7cqw}
 .mh-page .mh-heading h1{font-size:clamp(29px,8cqw,48px)!important;line-height:1.4;margin-top:3.5cqw!important;letter-spacing:.015em}
 body[data-middle-hub="equip-faucet"] .mh-heading h1{font-size:10cqw!important;line-height:1.22;white-space:nowrap}
 body[data-middle-hub="equip-faucet"] .mh-heading h1 :is(span,em){white-space:nowrap!important}
 body[data-middle-hub="equip-faucet"] .mh-hero-grid{row-gap:3.6cqw}
 .mh-page .mh-collage{grid-area:2/1;aspect-ratio:auto;height:61cqw;width:100%;max-width:none;margin:0;justify-self:stretch}
 .mh-page .mh-photo--1{left:-1.5cqw;top:0;width:51.4cqw;aspect-ratio:1.07}
 .mh-page .mh-photo--2{left:49.1cqw;top:20.3cqw;width:37.5cqw;aspect-ratio:.95}
 .mh-page .mh-photo--3{display:none}
 .mh-page .mh-photo::before{inset:-2cqw -2cqw -.5cqw .5cqw}
 .mh-page .mh-photo--1::before{inset:0 -3.2cqw -1.6cqw .7cqw}
 .mh-page .mh-details{grid-area:3/1;max-width:none;width:100%;margin:3cqw 0 0!important}
 .mh-page .mh-details>p{font-size:17px;line-height:1.8}
 .mh-page .mh-hero::before{top:13.5cqw;right:5.5cqw;width:40.2cqw;height:32cqw;border-radius:55% 42% 28% 68% / 39% 48% 52% 60%}
 .mh-page .mh-hero::after{height:66cqw;mask:url('/flow02/service-hub/assets/hero-wave-mobile-v2.svg') center/100% 100% no-repeat}
 .mh-page .mh-thread{height:35cqw;bottom:0}
 .mh-page .mh-thread path{d:path('M-30 70C260 260 380 200 560 145S840 190 1000 140 1200 -5 1470 -35')}
 .mh-page .mh-hero-foot{margin:3cqw 0 0;gap:16px;font-size:12px}
 .mh-page .mh-hero-foot .sf02-scroll{font-size:2.8cqw}
 .mh-page .mh-hero-foot .sf02-bottom p{display:none}
 .mh-page .mh-details :is(.tf-actions,.fs-hero-actions,.fe-hero-actions,.sc-hero-actions){flex-direction:column;gap:18px}
 body[data-middle-hub="equip-faucet"] .mh-details{margin-top:-7.2cqw!important}
 body[data-middle-hub="equip-faucet"] .mh-details>p{font-size:4.9cqw;line-height:1.4;max-width:49.1cqw;letter-spacing:0}
 body[data-middle-hub="equip-faucet"] .mh-details .sf02-hero-actions{margin-top:2.2cqw!important;gap:6cqw;width:100%}
 body[data-middle-hub="equip-faucet"] .mh-details .sf02-button{width:77.5cqw;min-width:0;align-self:flex-start;margin-left:2.1cqw;font-size:4.2cqw;padding:0 0 6px}
 body[data-middle-hub="equip-faucet"] .mh-details .sf02-button-face{height:13.9cqw;min-height:48px;padding:1.4cqw 2cqw 1.4cqw 6.5cqw;gap:8px}
 body[data-middle-hub="equip-faucet"] .mh-details .sf02-arrow{height:10.8cqw;flex-basis:10.8cqw;min-height:32px;min-width:32px;font-size:7cqw}
 body[data-middle-hub="equip-faucet"] .mh-details .sf02-phone{font-size:max(12px,3.7cqw);line-height:1.4;margin-left:.5cqw}
 body[data-middle-hub="equip-faucet"] .mh-details .sf02-phone a{min-height:24px}
 body[data-middle-hub="equip-faucet"] .mh-details .sf02-phone small{font-size:max(12px,3.5cqw);margin-top:2px;line-height:1.4}
 body[data-middle-hub="equip-faucet"] .mh-hero-foot{margin-top:0}
 body[data-middle-hub="equip-faucet"] .mh-hero-foot .sf02-scroll::after{height:5cqw}
 body[data-middle-hub] .sui-header:not(.sui-compact){padding:6.2vw 5.8vw 8px;gap:10px}
 body[data-middle-hub] .sui-header .sui-brand{gap:8px}
 body[data-middle-hub] .sui-header .sui-brand img{width:9vw;height:9vw}
 body[data-middle-hub] .sui-header .sui-brand strong{font-size:3.45vw;white-space:nowrap;letter-spacing:.01em}
 body[data-middle-hub] .sui-header .sui-brand small{font-size:6px;letter-spacing:.05em}
 body[data-middle-hub] .sui-header .sui-corporate{display:inline}
 body[data-middle-hub] .sui-header .sui-menu-trigger{width:11.4vw;min-width:42px;height:11.4vw;min-height:42px}
}
@media(prefers-reduced-motion:reduce){.mh-page .mh-label-crop{transform:translateY(-50%)!important}}
