/* Owner-approved middle-category composition. Only explicitly marked hub pages. */

@import url('/flow02/service-hub/assets/ui-icons.css');
body[data-middle-hub]{--mh-paper:#f7faf8;--mh-ink:#193e48;--mh-text:#49666d;--mh-main:#21677a;--mh-solid:#103f4e;--mh-sky:#e4f2f4;--mh-tint:#dbece3;--mh-rule:#afcbc1;--mh-shadow:#8dab9d;--mh-gutter:clamp(24px,5vw,160px);background:var(--mh-paper);color:var(--mh-ink)}
body[data-middle-hub] .sui-header .sui-brand{background:transparent}
body[data-middle-hub="freeze"]{--mh-sky:#dceef5;--mh-tint:#edf5fa;--mh-rule:#bed8e5;--mh-shadow:#91b6ca}
body[data-middle-hub="leak"]{--mh-main:#0a63aa;--mh-sky:#eaf5fc;--mh-tint:#edf8f5;--mh-rule:#bddce3;--mh-shadow:#91b8c6}
body[data-middle-hub="clog"]{--mh-main:#005bac;--mh-solid:#06142a;--mh-ink:#18243c;--mh-text:#52647d;--mh-sky:#f3f9ff;--mh-tint:#e9f7ff;--mh-rule:#d8e8f8}
body[data-mh-route="/service-air/ventilation/"]{--mh-sky:#eaf5fc;--mh-tint:#e0f2fe;--mh-rule:#b7d5e5}
body[data-middle-hub="equip-heater"]{--mh-sky:#e7f3f8;--mh-tint:#e0f2ef;--mh-rule:#add2d8}
body[data-middle-hub="equip-washbasin"],body[data-middle-hub="laundry"]{--mh-sky:#e2f1f5;--mh-tint:#d5eae4}
body[data-middle-hub="equip-toilet"],body[data-middle-hub="toilet"]{--mh-ink:#174652;--mh-sky:#eaf5fc;--mh-tint:#eaf5ef;--mh-rule:#b7d5da;--mh-shadow:#93b9bd}
body[data-middle-hub="equip-other"]{--mh-main:#765196;--mh-solid:#513869;--mh-sky:#f1edf7;--mh-tint:#e8e2ef;--mh-rule:#c8b8d5;--mh-shadow:#b6a4c3}
body[data-middle-hub] main.mh-page{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;font-family:'Zen Kaku Gothic New','Yu Gothic',sans-serif;font-weight:500;font-size:16px;line-height:1.95}
.mh-page,.mh-page *{box-sizing:border-box}
.mh-page .mh-hero,.mh-page .mh-hero *{box-sizing:border-box}
.mh-page .mh-hero{position:relative;isolation:isolate;background:var(--mh-paper);color:var(--mh-ink);padding:clamp(125px,10vw,154px) var(--mh-gutter) 100px;margin:0;min-height:0;overflow:visible}
.mh-page .mh-hero::before{content:'';position:absolute;top:108px;right:max(24px,3vw);width:min(36vw,540px);height:360px;background:var(--mh-tint);border-radius:75% 37% 43% 66% / 39% 35% 68% 70%;transform:rotate(14deg);z-index:-2;pointer-events:none}
.mh-page .mh-hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:190px;background:var(--mh-sky);mask:url('/flow02/hub/assets/divider-coast.svg') center/100% 100% no-repeat;z-index:-2;pointer-events:none}
.mh-page .mh-hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:auto 1fr;column-gap:clamp(36px,4vw,64px);row-gap:26px;max-width:1440px;margin-inline:auto;position:relative;z-index:2;align-items:start}
.mh-page .mh-heading{grid-area:1/1;min-width:0;align-self:end}
.mh-page .mh-heading h1{font-family:inherit;font-weight:700;font-size:clamp(32px,3.1vw,46px);line-height:1.5;letter-spacing:.02em;margin:24px 0 0!important;padding:0!important;width:auto!important;max-width:none!important;color:var(--mh-ink)!important;text-shadow:none;text-wrap:pretty;overflow-wrap:break-word}
.mh-page .mh-heading h1 :is(span,em){display:inline!important;white-space:normal!important;font-style:normal}
.mh-page .mh-heading h1 :is(.sui-ph,.wb-phrase,.kr-phrase,.ba-phrase,.rw-phrase,.ro-phrase){display:inline-block!important;max-width:100%}
.mh-page .mh-heading h1 br{display:none}
.mh-page .mh-heading h1 em{color:var(--mh-main)}
.mh-page .mh-heading .sf02-eyebrow--art{display:block!important;width:min(380px,100%);height:auto!important;aspect-ratio:6.2;overflow:hidden;margin:0!important}
.mh-page .mh-heading .sf02-eyebrow--art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 43%}
.mh-page .mh-eyebrow{display:flex;align-items:center;gap:16px;font-weight:700;font-size:clamp(15px,1.45vw,21px);line-height:1.4;letter-spacing:.05em;color:var(--mh-main);margin:0}
.mh-page .mh-eyebrow::before{content:'01';display:grid;place-items:center;flex:0 0 60px;height:62px;color:#fff;background:var(--mh-main);border-radius:72% 13% 68% 41%;box-shadow:6px -6px 0 var(--mh-tint),-4px 4px 0 var(--mh-sky);font-size:26px;transform:rotate(-5deg)}
.mh-page .mh-eyebrow:has(.fe-number)::before{display:none}
.mh-page .mh-details{grid-area:2/1;align-self:start;min-width:0;color:var(--mh-text);padding:0!important;margin:0!important}
.mh-page .mh-details>p{font-size:clamp(17px,1.35vw,20px);line-height:1.95;margin:0 0 26px!important;color:var(--mh-text);max-width:34em}
.mh-page .mh-details>div:is(.hf-answer,.wb-answer,.kr-answer,.ba-answer,.rw-answer,.ro-answer){padding:0;background:none;border:0;border-radius:0;box-shadow:none;margin:0 0 28px}
.mh-page .mh-details>div:is(.hf-answer,.wb-answer,.kr-answer,.ba-answer,.rw-answer,.ro-answer)>p:not([class*="kicker"]){font-size:clamp(17px,1.35vw,20px);line-height:1.95;color:var(--mh-text)}
.mh-page .mh-details :is(.sf02-hero-actions,.tf-actions,.fs-hero-actions,.fe-hero-actions){display:flex;align-items:flex-start;flex-wrap:wrap;gap:20px;margin:24px 0 0!important}
.mh-page .mh-details .sf02-hero-actions{flex-direction:column;gap:26px}
.mh-page .mh-details .sf02-phone{font-size:15px}
.mh-page .mh-collage{grid-area:1/2/3/3;position:relative;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);grid-template-rows:auto auto;gap:22px 26px;align-items:center;align-self:center;min-width:0;padding:12px 14px 15px 0;width:100%;max-width:780px;margin:0}
.mh-page .mh-photo{position:relative;margin:0!important;min-width:0;isolation:isolate;--mh-mask:url('/flow02/hub/assets/photo-mask-leaf.svg')}
.mh-page .mh-photo--1{grid-column:1;grid-row:1/3;width:100%;aspect-ratio:1/1.08;margin-top:28px!important}
.mh-page .mh-photo--2{grid-column:2;grid-row:1;aspect-ratio:1/1.05;width:100%;--mh-mask:url('/flow02/hub/assets/photo-mask-lagoon.svg')}
.mh-page .mh-photo--3{grid-column:2;grid-row:2;width:76%;aspect-ratio:1.07;justify-self:start;margin-left:2px!important}
.mh-page .mh-photo::before{content:'';position:absolute;inset:-9px -11px 0 1px;background:var(--mh-tint);mask:var(--mh-mask) center/100% 100% no-repeat;z-index:-1}
.mh-page .mh-photo--1::before{inset:0 -12px -7px 6px;background:var(--mh-sky)}
.mh-page .mh-photo-frame{width:100%;height:100%;position:absolute;inset:0;overflow:hidden;mask:var(--mh-mask) center/100% 100% no-repeat;background:var(--mh-sky)}
.mh-page .mh-photo img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:var(--mh-position,50% 50%)!important;filter:none!important;transform:none!important;border-radius:0!important;opacity:1!important}
.mh-page .mh-thread{position:absolute;inset:auto 0 0;width:100%;height:180px;pointer-events:none;z-index:-1;overflow:hidden}
.mh-page .mh-photo figcaption{position:absolute;bottom:-25px;right:14px;font:500 11px/1.5 sans-serif;color:var(--mh-text)}
body[data-middle-hub="aircon"] .mh-photo--1{--mh-position:50% 8%}
body[data-middle-hub="equip-toilet"] .mh-photo--1{--mh-position:72% 50%}
.mh-page .mh-anchor{position:absolute;inset:0 auto auto 0}
.mh-thread path{fill:none;stroke:var(--mh-rule);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mh-page .mh-hero-foot{display:flex;gap:30px;align-items:center;justify-content:space-between;max-width:1440px;margin:36px auto 0;font-size:14px;position:relative;z-index:2;color:var(--mh-text)}
.mh-page .mh-hero-foot .sf02-bottom{position:static;display:contents}.mh-page .mh-hero-foot .sf02-bottom p{margin:0}
.mh-page .mh-hero-foot .sf02-scroll{font-size:10px;letter-spacing:.12em}
/* The same section language, while retaining each section's content structure. */
.mh-page [data-mh-section]{--mh-surface:var(--mh-paper);position:relative;isolation:isolate;background:var(--mh-surface)!important;color:var(--mh-ink);border:0;border-radius:0;box-shadow:none;margin:0!important;padding:clamp(60px,7vw,105px) var(--mh-gutter)!important;width:100%!important;max-width:none!important;overflow:visible}
.mh-page [data-mh-tone="mint"]{--mh-surface:var(--mh-tint)}
.mh-page [data-mh-tone="sky"]{--mh-surface:var(--mh-sky)}
.mh-page [data-mh-section]::before{content:''!important;position:absolute!important;inset:-48px 0 auto!important;height:50px!important;width:100%!important;max-width:none!important;transform:none!important;opacity:1!important;background:var(--mh-surface)!important;mask:url('/flow02/hub/assets/divider-coast.svg') center/100% 100% no-repeat!important;z-index:-1;pointer-events:none;border:0!important;border-radius:0!important}
.mh-page [data-mh-section]::after{content:'';position:absolute;right:3%;top:24px;width:72px;height:190px;background:url('/flow02/hub/assets/workshop/pipe-wrench-v1.webp') center/contain no-repeat;opacity:.18;pointer-events:none;z-index:-1}
.mh-page [data-mh-section]>:not(style):not(script){max-width:none;margin-inline:auto}
.mh-page [data-mh-section] :is(.tf-container,.fc-shell,.fe-shell,.sc-wrap,.sf02-shell,.sf02-content){width:100%;max-width:none;margin-inline:auto;padding-inline:0}
.mh-page [data-mh-section] :is(h2,h3,h4){font-family:inherit;color:var(--mh-ink);font-weight:700;text-shadow:none;overflow-wrap:anywhere}
.mh-page [data-mh-section] h2{font-size:clamp(26px,2.55vw,38px);line-height:1.6;letter-spacing:.025em;max-width:30em;margin-block:0 28px}
.mh-page [data-mh-section] h3{font-size:clamp(20px,1.7vw,25px);line-height:1.6}
.mh-page [data-mh-section] :is(.tf-section-head,.fe-section-head,.fc-section-head,.sf02-section-head){display:block;max-width:100%;margin-bottom:34px}
.mh-page [data-mh-section] :is(.sf02-guide-inner,.fc-section-grid,.fe-heading-grid){display:block}
.mh-page [data-mh-section] .sf02-guide-copy{display:block;margin-bottom:34px}
.mh-page [data-mh-section] .sf02-guide-copy h2 span{display:inline}
.mh-page [data-mh-section] :is(.tf-kicker,.fc-kicker,.sc-eyebrow,.sf02-eyebrow){color:var(--mh-main)}
.mh-page [data-mh-section] :is(.tf-card,.fc-card,.sc-card,.fe-route,.sf02-card){border:1px solid var(--mh-rule);border-radius:28px;background:#fff;box-shadow:0 5px 0 color-mix(in srgb,var(--mh-shadow) 65%,transparent);padding:clamp(22px,2.6vw,36px)}
.mh-page [data-mh-section] :is(.tf-card-grid,.tf-grid,.sc-grid){gap:28px}
.mh-page [data-mh-section] :is(.tf-table-wrap,.fc-table-wrap,.sc-table-wrap){border-radius:24px;border:1px solid var(--mh-rule);background:white;box-shadow:0 5px 0 color-mix(in srgb,var(--mh-shadow) 50%,transparent);max-width:100%;overflow-x:auto}
.mh-page [data-mh-section] table{width:100%;border-collapse:collapse;background:white;color:var(--mh-text)}
.mh-page [data-mh-section] th{background:var(--mh-sky);color:var(--mh-ink)}
.mh-page [data-mh-section] :is(th,td){border-color:var(--mh-rule);padding:16px 20px;line-height:1.8}
.mh-page [data-mh-section] details{border:1px solid var(--mh-rule);border-radius:20px;background:rgba(255,255,255,.8);box-shadow:0 4px 0 color-mix(in srgb,var(--mh-shadow) 45%,transparent);overflow:hidden;margin-bottom:16px}
.mh-page [data-mh-section] details:focus-within{outline:3px solid var(--mh-main);outline-offset:4px}
.mh-page [data-mh-section] summary{color:var(--mh-ink);padding:22px 26px;font-weight:700;min-height:60px;cursor:pointer}
.mh-page [data-mh-section] details[open]{box-shadow:0 4px 0 color-mix(in srgb,var(--mh-shadow) 45%,transparent)}
.mh-page :is(.tf-button,.fp-button,.fc-button,.sc-btn,.btn-primary){background:var(--mh-main);border:1px solid var(--mh-main);border-radius:999px;color:white;box-shadow:0 5px 0 var(--mh-solid);padding:16px 26px;line-height:1.5;min-height:54px;display:inline-flex;gap:15px;justify-content:space-between;align-items:center;text-decoration:none;font:700 16px/1.6 'Zen Kaku Gothic New',sans-serif;max-width:100%;transition:transform .18s ease,box-shadow .18s ease}
.mh-page :is(.tf-button--soft,.sc-btn-secondary){background:white;color:var(--mh-main);box-shadow:0 4px 0 var(--mh-rule)}
.mh-page .fc-button--sub{background:white;color:var(--mh-main);box-shadow:0 4px 0 var(--mh-rule)}
.mh-page .fc-button{min-height:56px!important;padding:16px 24px!important;height:auto!important}
.mh-page .fc-button::before,.mh-page .fc-button::after{display:none}
.mh-page .fc-button .fc-button-face{display:flex;gap:18px;align-items:center;background:transparent;color:inherit;padding:0;border:0;border-radius:0;box-shadow:none;transform:none;min-height:0}
.mh-page :is(.tf-button,.fp-button,.fc-button,.sc-btn,.btn-primary):hover{transform:translateY(-2px)}
.mh-page :is(a,button,summary,input,textarea,select):focus-visible{outline:3px solid var(--mh-main);outline-offset:5px}
.mh-page [id]{scroll-margin-top:110px}
.mh-page .mh-details [class*="text-gray-"],.mh-page .mh-details .text-white{color:var(--mh-text)}
.mh-page .mh-details>[class*="hidden"]{display:flex;gap:16px;flex-wrap:wrap}
.mh-page .mh-details .sc-hero-panel{position:static;inset:auto;width:100%;margin:24px 0 0;box-shadow:none;background:transparent;border:0;padding:0;color:var(--mh-text);backdrop-filter:none}
.mh-page .mh-details .sc-hero-panel strong i{display:none}
.mh-page .mh-details .sc-hero-tags{position:static;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.mh-page .mh-details .sc-tag{font-size:12px;line-height:1.5;background:transparent;border:0;padding:0 12px 0 0;color:var(--mh-text);min-height:0}
.mh-page .mh-details .sc-tag i{display:none}
.mh-page .mh-details .sc-hero-actions{display:flex;flex-wrap:wrap;gap:16px}
.mh-page .sc-btn{justify-content:center}.mh-page .sc-btn i{display:none}
.mh-page .mh-details :is(.sc-btn,.btn-primary)[href^="tel:"]{order:3;flex-basis:100%;justify-content:flex-start;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--mh-text);padding:0;min-height:44px;text-decoration:underline;text-underline-offset:6px;font-size:15px;font-weight:500}
.mh-page .mh-details .sc-hero-note{font-size:17px;font-weight:500}
.mh-page [data-mh-visible]{opacity:1!important;visibility:visible!important;transform:none!important}
/* Legacy middle hubs keep their prose, tables and links, with the same shell. */
.mh-page[data-mh-legacy]>.container{max-width:none!important;width:100%;padding:0;margin:0}
.mh-page[data-mh-legacy]>.container>.space-y-24{margin:0}
.mh-page[data-mh-legacy] [data-mh-wrapper]{display:block;max-width:none!important;width:100%!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;transform:none!important;overflow:visible!important}
.mh-page[data-mh-legacy] [data-mh-wrapper]::before,.mh-page[data-mh-legacy] [data-mh-wrapper]::after,.mh-page[data-mh-legacy]::before,.mh-page[data-mh-legacy]::after{display:none!important}
.mh-page[data-mh-legacy] [data-mh-wrapper]>.absolute,.mh-page[data-mh-legacy] [data-mh-section]>.absolute,.mh-page[data-mh-legacy] [data-mh-empty-icon]{display:none!important}
.mh-page[data-mh-legacy] [data-mh-section] :is(.bg-brand-blue,.text-white){color:var(--mh-ink)}
.mh-page[data-mh-legacy] [data-mh-section] .bg-brand-blue{background:var(--mh-sky)}
.mh-page[data-mh-legacy] [data-mh-section] :is(.bg-gray-50,.bg-white,.bg-white\/10){border:1px solid var(--mh-rule);border-radius:24px;background:white;box-shadow:0 4px 0 var(--mh-rule);padding:26px}
.mh-page[data-mh-legacy] [data-mh-section] .font-serif{font-family:inherit}
.mh-page[data-mh-legacy] [data-mh-section] .grid{gap:24px}
.mh-page[data-mh-legacy] [data-mh-section] .text-gray-300{color:var(--mh-text)}
.mh-page[data-mh-legacy] [data-mh-section] :is(.text-blue-100,.text-blue-200,.text-gray-200,[class~="text-white/80"],[class~="text-white/90"]){color:var(--mh-text)}
.mh-page[data-mh-legacy] [data-mh-section] [class*="w-screen"]{width:100%;margin-left:0}
.mh-page[data-mh-legacy] [data-mh-section] .absolute{pointer-events:none}
body[data-middle-hub]>.bg-diagonal-lines,body[data-middle-hub]>.bg-orb-layer,body[data-middle-hub] .neu-menu-container{display:none}
.mh-page[data-mh-legacy] [class~="w-screen"]{width:100%!important;margin-left:0!important}
.mh-page[data-mh-legacy] [class*="right-[-"]{right:0!important}
.mh-page[data-mh-legacy] [class*="left-[-"]{left:0!important}
.mh-page[data-mh-legacy] .mh-details>div:has(.btn-primary){display:flex;flex-wrap:wrap;gap:20px}
.mh-page[data-mh-legacy] i[class*="fa-"]{display:none}
.mh-page[data-mh-legacy] .check-list li::before{content:'';width:10px;height:16px;border:solid var(--mh-main);border-width:0 2px 2px 0;transform:rotate(45deg);background:none;top:.5em}
.mh-page[data-mh-legacy] .reform-figure:has(i){max-width:240px;aspect-ratio:auto;min-height:0}
.mh-page[data-mh-legacy] .reform-figure:has(i)>div{min-height:110px}
.mh-page [data-mh-title]::before{content:attr(data-mh-title);display:grid;place-items:center;width:56px;height:60px;background:var(--mh-main);color:#fff;font:700 25px/1 sans-serif;border-radius:72% 13% 68% 41%;box-shadow:6px -5px 0 var(--mh-rule);margin-bottom:24px}
.mh-page[data-mh-legacy] [data-mh-section] .text-center{text-align:left}
.mh-page[data-mh-legacy] [data-mh-section] .text-center h2{margin-inline:0}
.mh-page[data-mh-legacy] [data-mh-context-photo]{max-width:380px!important;width:100%;overflow:visible;box-shadow:none;background:none;border:0;border-radius:0}
.mh-page[data-mh-legacy] [data-mh-context-photo] .mh-context-image{display:block;width:100%;height:260px;object-fit:cover;border-radius:56% 44% 46% 54% / 44% 36% 64% 56%;box-shadow:8px 7px 0 var(--mh-rule)}
.mh-page[data-mh-legacy] .reform-figure:has(img){border-radius:56% 44% 46% 54% / 44% 36% 64% 56%;box-shadow:8px 7px 0 var(--mh-rule)}
.mh-page[data-mh-legacy] [data-mh-photo-caption="empty"]{display:none!important}
.mh-page[data-mh-legacy] [data-mh-photo-caption="text"]{display:block!important;min-height:0!important;height:auto!important;background:transparent!important;padding:14px 0;font-size:12px;color:var(--mh-text)!important}
.mh-page:not([data-mh-legacy]):not(.sc-page) [data-mh-section]::after{display:none}
@media(min-width:1101px){.mh-page .mh-collage{max-width:690px}.mh-page .mh-hero-foot{justify-content:flex-start;gap:clamp(70px,12vw,190px)}}
@media(max-width:1100px){
 .mh-page .mh-hero-grid{grid-template-columns:1fr;gap:26px;max-width:760px}
 .mh-page .mh-heading{grid-area:1/1}.mh-page .mh-collage{grid-area:2/1;max-width:640px;justify-self:center}.mh-page .mh-details{grid-area:3/1;max-width:100%}
 .mh-page .mh-heading h1{font-size:clamp(32px,4.5vw,48px)}
 .mh-page .mh-details>p{max-width:100%}
 .mh-page .mh-hero::before{top:100px;width:36%;height:270px;right:30px}
}
@media(max-width:680px){
 .mh-page .mh-hero{padding:108px 24px 82px}
 .mh-page .mh-hero-grid{gap:24px}
 .mh-page .mh-heading h1{font-size:clamp(28px,8.2vw,35px);line-height:1.5;margin-top:20px!important;letter-spacing:.015em}
 .mh-page .mh-collage{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto;gap:16px;align-items:start;padding:6px 10px 12px 0;max-width:460px}
 .mh-page .mh-photo--1{grid-area:1/1;aspect-ratio:1/1.04;margin-top:0!important}
 .mh-page .mh-photo--2{grid-area:1/2;aspect-ratio:1/1.16;margin-top:clamp(52px,18vw,86px)!important}
 .mh-page .mh-photo--3{display:none}
 .mh-page .mh-photo::before{inset:-6px -7px 0 1px}.mh-page .mh-photo--1::before{inset:0 -8px -5px 4px}
 .mh-page .mh-details>p{font-size:17px;line-height:1.95}
 .mh-page .mh-hero::before{top:92px;right:24px;width:35%;height:144px;border-radius:65% 40% 45% 60% / 40% 30% 70% 60%;transform:rotate(12deg)}
 .mh-page .mh-hero::after{height:200px}
 .mh-page .mh-hero-foot{margin-top:24px;font-size:12px;flex-wrap:wrap;gap:10px}
 .mh-page .mh-details :is(.tf-actions,.fs-hero-actions,.fe-hero-actions){flex-direction:column;gap:18px}
 .mh-page .mh-eyebrow{font-size:15px;gap:13px}.mh-page .mh-eyebrow::before{flex-basis:48px;height:50px;font-size:24px}
 .mh-page [data-mh-section]{padding:54px 24px 70px!important}
 .mh-page [data-mh-section]::before{top:-28px!important;height:30px!important}
 .mh-page [data-mh-section]::after{display:none}
 .mh-page [data-mh-section] h2{font-size:27px;margin-bottom:24px}
 .mh-page [data-mh-section] summary{padding:18px}
 .mh-page [data-mh-section] :is(th,td){padding:12px;font-size:14px}
 .mh-page[data-mh-legacy] [data-mh-section] .grid{grid-template-columns:1fr}
 .mh-page :is(.tf-button,.fp-button,.fc-button,.sc-btn,.btn-primary){font-size:15px;padding:15px 22px}
}
@media(prefers-reduced-motion:reduce){.mh-hero *{animation:none!important;transition:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.mh-page *{animation:none!important;transition:none!important}.mh-page :is(a,button){transform:none!important}html:has(body[data-middle-hub]){scroll-behavior:auto!important}}
@media print{body[data-middle-hub] .mh-hero{padding:30px 0}.mh-page .mh-hero::before,.mh-page .mh-hero::after,.mh-thread{display:none}.mh-page .mh-collage{max-width:400px}.mh-page .mh-hero-grid{display:block}.mh-heading,.mh-details,.mh-photo{break-inside:avoid}}

/* Keep the section title above the FAQ content at desktop widths too. */
.mh-page .sf02-faq-grid{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:32px}
.mh-page .sf02-faq-grid>div:first-child{display:contents}
.mh-page .sf02-faq-grid .sf02-section-head{grid-column:1/-1;margin:0}
.mh-page .sf02-faq-grid .sf02-section-head h2 br{display:none}
.mh-page .sf02-faq-grid .sf02-scene-photo{max-width:350px;width:100%;margin:0;align-self:start}
.mh-page .sf02-faq-grid .sf02-faq-list{min-width:0}
@media(max-width:800px){.mh-page .sf02-faq-grid{grid-template-columns:1fr}.mh-page .sf02-faq-grid .sf02-scene-photo{width:58%;max-width:250px;justify-self:end}}

/* Responsive body repair, 2026-10-17.
   Section waves belong behind content. Do not constrain decoration to a text shell. */
.mh-page [data-mh-section]>.sf02-divider{display:none!important}
.mh-page [data-mh-section]::before{z-index:-2!important;pointer-events:none!important}
.mh-page [data-mh-section]{padding-bottom:clamp(88px,7vw,140px)!important}
.mh-page [data-mh-section]>:is(.sf02-content,.sf02-guide-inner,.tf-container,.fc-shell,.fe-shell,.sc-wrap){width:100%;max-width:none!important}
.mh-page [data-mh-section] :is(.tf-container,.fc-shell,.fe-shell,.sc-wrap){max-width:none!important}
.mh-page [data-mh-section]>.tf-inner{max-width:none;width:100%;padding-inline:0}
.mh-page [data-mh-section]>.fpc-body{max-width:1040px}
.mh-page .sf02-access>.fca-intro{width:100%;max-width:none;padding-inline:0}
.mh-page .sf02-visit-note p{max-width:70em}
.mh-page .sf02-guide-copy>p:not(.sf02-eyebrow){max-width:48em}
.mh-page .sf02-price-visual .sf02-scene-photo{width:100%;margin-inline:0}
.mh-page .sf02-price-scene:nth-of-type(even) .sf02-scene-photo{margin-inline:0}
.mh-page .sf02-price-visual{max-width:620px;justify-self:center;width:100%}
.mh-page .sf02-other{flex-wrap:wrap;row-gap:16px}
.mh-page .sf02-other a{line-height:1.85}
/* Give comparisons the canvas width, while keeping prose comfortable to read. */
@media(min-width:1280px){
 .mh-page .sf02-price-scene{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(40px,5vw,100px)}
 .mh-page .sf02-price-scene:nth-of-type(even){grid-template-columns:minmax(0,.64fr) minmax(0,.36fr)}
 .mh-page .sf02-equipment{--equipment-photo:clamp(90px,6vw,136px);gap:24px}
 .mh-page .sf02-equipment>a{padding:26px;gap:24px}
}
@media(min-width:1920px){
 .mh-page .sf02-equipment{grid-template-columns:repeat(4,minmax(0,1fr));--equipment-photo:96px}
 .mh-page .sf02-equipment>a{padding:24px 20px;gap:18px}
 .mh-page .sf02-help{margin-top:32px}
}
/* Full-canvas tool ornaments: uncut assets, never clipped at the text column.
   Keep two well-placed motifs per chapter instead of crowding the copy. */
.mh-page .sf02 [data-mh-section]>.sf02-workshop{inset:0;width:100%;max-width:none;margin:0;overflow:visible;mask:none;-webkit-mask:none;z-index:-1;opacity:.38;--tool-width:clamp(80px,7vw,135px);--tool-left:auto;--tool-right:calc(var(--mh-gutter) * .3);--tool-top:18px;--tool-bottom:auto;--tool-angle:12deg}
.mh-page .sf02 [data-mh-section]>.sf02-workshop img{max-width:none}
.mh-page .sf02 .sf02-workshop:is(.sf02-workshop--guide-pliers,.sf02-workshop--guide-pipe,.sf02-workshop--repair-tape,.sf02-workshop--repair-wrench,.sf02-workshop--repair-impact,.sf02-workshop--access-pliers,.sf02-workshop--access-impact,.sf02-workshop--form-impact){display:none}
.mh-page .sf02 .sf02-workshop:is(.sf02-workshop--guide-wrench,.sf02-workshop--repair-pipe,.sf02-workshop--access,.sf02-workshop--form-tape){--tool-left:calc(var(--mh-gutter) * .25);--tool-right:auto;--tool-top:auto;--tool-bottom:24px;--tool-width:clamp(54px,3vw,75px);--tool-angle:-16deg}
.mh-page .sf02 [data-mh-section]>.sf02-plan-background{inset:0;max-width:none;width:100%;margin:0;opacity:.45}
.mh-page .sf02 .sf02-price-wrench{right:12px;top:-38px;width:clamp(60px,5vw,90px)}
@media(max-width:767px){
 .mh-page [data-mh-section]{padding-bottom:80px!important}
 .mh-page .sf02 [data-mh-section]>.sf02-workshop{--tool-width:64px;--tool-right:18px;--tool-top:16px;opacity:.24}
 .mh-page .sf02 .sf02-workshop:is(.sf02-workshop--guide-wrench,.sf02-workshop--repair-pipe,.sf02-workshop--access,.sf02-workshop--form-tape){--tool-width:54px;--tool-left:18px;--tool-right:auto;--tool-top:auto;--tool-bottom:12px}
}
/* UI arrows use consistent geometric strokes, independent of OS glyph fonts.
   Original aria-hidden text and link names remain in the unchanged HTML. */
.mh-page :is(.sf02-arrow,.sf02-small-arrow,.tf-arrow,.fc-arrow,.sf02-related a strong>span){font-size:0!important;position:relative}
.mh-page .sf02-small-arrow{position:absolute!important}
.mh-page :is(.sf02-arrow,.sf02-small-arrow,.tf-arrow,.fc-arrow,.sf02-related a strong>span)::after{content:'';display:block;width:22px;height:22px;background:currentColor;mask:url('/flow02/service-hub/assets/ui-arrow-right.svg') center/contain no-repeat;-webkit-mask:url('/flow02/service-hub/assets/ui-arrow-right.svg') center/contain no-repeat;border:0;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(var(--mh-ui-rotate,0deg));pointer-events:none}
.mh-page .sf02-small-arrow{--mh-ui-rotate:90deg}
.mh-page :is(.tf-arrow,.sf02-related a strong>span){--mh-ui-rotate:-45deg}
.mh-page :is(.sf02-arrow,.sf02-small-arrow,.tf-arrow,.fc-arrow)::before{display:none}
/* The leak/freeze hubs use different ornament wrappers. Keep their tools whole too. */
.mh-page [data-mh-section] :is(.fs-decor,.fe-workshop){max-width:none;width:100%;margin:0;z-index:-1}
.mh-page [data-mh-section] .fs-decor img,.mh-page [data-mh-section] .fe-tool{width:clamp(64px,6vw,112px);height:auto;max-height:150px;object-fit:contain;mask:none;-webkit-mask:none;opacity:.32;left:auto;right:24px;top:24px;bottom:auto;transform:rotate(12deg)}
.mh-page [data-mh-section] .fs-decor img:nth-of-type(2),.mh-page [data-mh-section] .fe-tool--2{width:64px;height:auto;left:24px;right:auto;top:auto;bottom:18px;transform:rotate(-12deg)}
.mh-page [data-mh-section] .fs-decor img:nth-of-type(3),.mh-page [data-mh-section] .fe-tool--3{display:none}

/* Faucet prices: mobile stacks the description above two centered fees.
   Desktop places the description beside a single vertical fee column. */
.mh-page .sf02 .sf02-price-sheet .mpg-rate{grid-template-columns:minmax(0,1fr);gap:22px}
.mh-page .sf02 .sf02-price-key{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px}
.mh-page .sf02 .sf02-price-key>span:last-child{padding-left:0}
.mh-page .sf02 .mpg-rate-price{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px 0 0;border-left:0;border-top:1px solid #dce6e0;gap:0}
.mh-page .sf02 .mpg-rate-price>div{min-width:0;padding-right:clamp(12px,1.5vw,20px)}
.mh-page .sf02 .mpg-rate-price>div+div{border-top:0;border-left:1px solid #dce6e0;padding:0 0 0 clamp(12px,1.5vw,20px)}
.mh-page .sf02 .sf02-rate-type{display:block}
.mh-page .sf02 .sf02-rate-type .sf02-rate-photo{width:min(100%,210px);max-width:210px;margin:16px 0 4px}
@media(width < 768px){
 .mh-page .sf02 .sf02-price-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));text-align:center}
 .mh-page .sf02 .sf02-rate-type,.mh-page .sf02 .mpg-rate-price{text-align:center}
 .mh-page .sf02 .sf02-rate-type .sf02-rate-photo{margin-inline:auto}
 .mh-page .sf02 .mpg-rate-price>div,.mh-page .sf02 .mpg-rate-price>div+div{padding-inline:8px}
}

/* Chapter 03: one equipment photograph stays beside its own price card.
   Native page scrolling and the article boundary control the entire effect. */
@media(width > 800px){
 .mh-page #mixer-price-guide .sf02-price-scene{grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);align-items:start}
 .mh-page #mixer-price-guide .sf02-price-scene:nth-of-type(even){grid-template-columns:minmax(0,.68fr) minmax(0,.32fr)}
 .mh-page #mixer-price-guide .sf02-price-visual{align-self:start;max-width:480px}
 .mh-page #mixer-price-guide .sf02-price-caption{padding:0 6% 20px}
 .mh-page #mixer-price-guide .sf02-price-visual>.sf02-scene-photo{width:min(100%,480px);margin:0}
 .mh-page #mixer-price-guide .sf02-price-visual>.sf02-scene-photo>.sf02-scene-mask{animation:none;transform:none}
}
/* Keep masked photography on its own composited layer. A small optional edge
   offset softens entry/exit; reduced motion retains plain native sticky. */
@media(width > 800px) and (min-height:640px){
 .mh-page #mixer-price-guide .sf02-price-visual{position:sticky;top:96px;will-change:transform;transform:translate3d(0,var(--mh-sticky-offset,0px),0)}
 .mh-page #mixer-price-guide .sf02-price-visual>.sf02-scene-photo{width:min(100%,clamp(120px,calc((100svh - 24rem) * 1.24),480px));transform:translate3d(0,var(--mh-photo-follow,0px),0);will-change:transform}
}
@media print{
 .mh-page #mixer-price-guide .sf02-price-visual{position:relative;top:auto;transform:none;will-change:auto}
 .mh-page #mixer-price-guide .sf02-price-visual>.sf02-scene-photo{transform:none;will-change:auto}
}
@media screen and (width > 800px) and (min-height:640px) and (prefers-reduced-motion:reduce){.mh-page #mixer-price-guide .sf02-price-visual{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.mh-page #mixer-price-guide .sf02-price-visual>.sf02-scene-photo{transform:none;will-change:auto}}
@media(min-width:768px){
 .mh-page .sf02 .sf02-price-sheet .mpg-rate,.mh-page .sf02 .sf02-price-key{display:grid;grid-template-columns:minmax(0,2fr) minmax(124px,1fr);gap:20px}
 .mh-page .sf02 .sf02-price-key>span:last-child{padding-left:18px}
 .mh-page .sf02 .sf02-price-sheet .mpg-rate-price{grid-template-columns:minmax(0,1fr);gap:16px;padding:0 0 0 18px;border-top:0;border-left:1px solid #dce6e0}
 .mh-page .sf02 .mpg-rate-price>div{padding:0}
 .mh-page .sf02 .mpg-rate-price>div+div{border-left:0;border-top:1px solid #dce6e0;padding:16px 0 0}
}