/* Each trade keeps its own visual language throughout the complete prototype. */
.reference-trade { --ref-navy:#062c51; --ref-blue:#00a9df; --ref-yellow:#ffe035; --demo-focus:#b85000; background:#fff; color:#142b3f; }
.reference-trade h1,.reference-trade h2,.reference-trade h3,.reference-trade .demo-brand { font-family:var(--font-sans); font-weight:800; letter-spacing:-.035em; line-height:1.08; }
.reference-trade h1 { font-size:clamp(2.8rem,4.9vw,4.6rem); }
.reference-trade h2 { font-size:clamp(2rem,3.1vw,3rem); }
.reference-trade h3 { font-size:1.3rem; }
.reference-trade p { line-height:1.7; }
.reference-trade .demo-kicker { font-size:.73rem; font-weight:750; letter-spacing:.11em; margin-bottom:1rem; }
.reference-trade .demo-container { width:min(1220px,calc(100% - 5rem)); }
.reference-trade .demo-button { font-size:.87rem; font-weight:750; padding:1rem 1.45rem; min-height:50px; }
.reference-trade .ref-utility { font-size:.72rem; font-weight:650; }
.ref-utility > div { display:flex; justify-content:space-between; align-items:center; min-height:34px; gap:1rem; }
.ref-utility a { display:flex; align-items:center; gap:.5rem; min-height:34px; }
.ref-utility svg { width:15px; height:15px; }
.reference-trade .demo-header { min-height:96px; gap:1.5rem; border:0; }
.reference-trade .ref-brand { gap:.5rem; font-size:1.7rem; font-style:italic; letter-spacing:-.04em; flex-shrink:0; }
.ref-brand small { display:block; font-size:.65rem; letter-spacing:.29em; font-style:normal; margin-top:.35rem; }
.ref-brand > svg { width:43px; height:48px; stroke-width:2; }
.reference-trade .demo-nav { gap:1.4rem; font-size:.8rem; font-weight:650; margin-left:auto; }
.reference-trade .example-more { z-index:35; }
.reference-trade .example-more nav { background:#fff; color:#172c3d; border:1px solid #c6d2da; }
.reference-trade .example-mobile-action { --demo-button-text:#fff; }
.reference-trade .demo-footer { background:var(--ref-navy); color:white; }
.reference-trade .demo-footer .demo-button { margin-top:1.4rem; }
.reference-trade .demo-footer nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.2rem 3rem; max-width:650px; }
.reference-trade .demo-footer-bottom { border-color:#ffffff35; color:#dae5ed; }
.ref-section-head { display:flex; align-items:end; justify-content:space-between; gap:3rem; margin-bottom:2.3rem; }
.ref-section-head h2 { max-width:650px; }
.ref-section-head > p { max-width:350px; }
.ref-section-head .demo-text-link { white-space:nowrap; }
.ref-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; }
.ref-service-grid > a { padding:1.6rem; display:flex; flex-direction:column; align-items:flex-start; transition:transform .2s,box-shadow .2s; }
.ref-service-grid > a:hover { transform:translateY(-5px); box-shadow:0 12px 24px #062c5112; }
.ref-service-symbol { display:grid; place-items:center; width:72px; height:72px; margin-bottom:1.4rem; }
.ref-service-symbol svg { width:52px; height:52px; stroke-width:1.75; }
.ref-service-grid h3 { margin-bottom:.7rem; }
.ref-service-grid p { font-size:.85rem; }
.ref-service-more { display:flex; align-items:center; gap:.6rem; font-size:.75rem; font-weight:750; padding-top:1.5rem; margin-top:auto; }
.ref-service-more svg { width:17px; height:17px; }
.ref-hero-actions { display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; margin-top:1.8rem; }
.ref-secondary { display:inline-flex; gap:.6rem; align-items:center; font-size:.85rem; font-weight:750; min-height:48px; text-decoration:underline; text-underline-offset:5px; }
.ref-secondary svg { width:18px; height:18px; }
.ref-hero-points { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.5rem; font-size:.77rem; font-weight:650; }
.ref-hero-points span { display:flex; gap:.5rem; align-items:center; }
.ref-hero-points svg { width:19px; height:19px; }
.ref-checks { list-style:none; margin:1.6rem 0; padding:0; }
.ref-checks li { display:flex; gap:.8rem; align-items:center; font-size:.88rem; padding:.3rem 0; }
.ref-checks svg { width:22px; height:22px; flex-shrink:0; }
.ref-photo-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1.2rem; }
.ref-photo-grid a { overflow:hidden; }
.ref-photo-grid img { width:100%; height:290px; object-fit:cover; transition:transform .4s; }
.ref-photo-grid a:hover img { transform:scale(1.035); }
.ref-image-note { font-size:.7rem; margin-top:1rem; color:#546576!important; }
.ref-closing { padding:4rem 0; }
.ref-closing > div { display:flex; justify-content:space-between; gap:3rem; align-items:center; }
.ref-closing h2 { max-width:780px; }
.ref-closing p { margin-top:1rem; }
.ref-closing .demo-button { flex-shrink:0; }
/* Current Electric: sunny yellow, vivid blue, generous curves, bold type. */
.theme-current.reference-trade { --demo-button:#ffe035; --demo-button-text:#072b4e; --demo-focus:#aa4c00; }
.theme-current .ref-header { background:#052c52; color:#fff; }
.theme-current .ref-header .demo-brand { color:#fff; }
.theme-current .ref-brand svg { color:#ffe035; }
.theme-current .ref-utility { background:#e8f7fd; color:#062c51; }
.theme-current.reference-trade .demo-button { border-radius:50px; }
.theme-current .ref-header :focus-visible,.theme-current .demo-footer :focus-visible { outline-color:#ffe035; }
.ref-electric-hero { position:relative; isolation:isolate; overflow:hidden; background:#0679b6; color:#fff; padding:3.8rem 0 5.3rem; }
.ref-electric-hero .demo-container { position:relative; z-index:2; }
.ref-electric-copy { width:58%; }
.reference-trade .ref-electric-copy h1 { font-size:clamp(3rem,4.5vw,4.35rem); font-weight:950; line-height:1.03; letter-spacing:-.055em; }
.ref-electric-copy h1 span { color:#ffe035; }
.ref-electric-copy > p:not(.demo-kicker) { font-weight:600; font-size:1.12rem; margin-top:1.4rem; max-width:490px; }
.ref-electric-copy .demo-kicker { color:#fff; }
.ref-electric-photo { position:absolute; right:0; top:0; bottom:0; width:41%; z-index:1; border-radius:42% 0 0 12%; overflow:hidden; border-left:8px solid #65ccec; }
.ref-electric-photo img { width:100%; height:100%; object-fit:cover; object-position:38% center; }
.ref-wave { position:absolute; left:0; bottom:-1px; width:100%; height:60px; z-index:3; }
.ref-spark { position:absolute; color:#ffffff13; font-size:220px; line-height:1; z-index:0; }
.ref-spark-one { top:0; left:-45px; }.ref-spark-two { bottom:40px; left:44%; font-size:120px; }
.ref-electric-services { padding-top:1.7rem; }
.ref-electric-services .ref-service-grid > a { background:#e7f6fc; text-align:center; align-items:center; border-radius:22px; box-shadow:0 4px 0 #d0e6ee; }
.ref-electric-services .ref-service-symbol { background:#052c52; color:#ffe035; border-radius:20px; box-shadow:5px 5px 0 #8ed6ec; }
.ref-electric-services h3 { font-size:1.15rem; }
.ref-electric-about { display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:center; }
.ref-about-photo { position:relative; }.ref-about-photo img { width:100%; height:460px; object-fit:cover; border-radius:26px; }
.ref-about-photo > span { position:absolute; bottom:22px; right:-20px; display:flex; align-items:center; gap:.7rem; padding:1.2rem 1.6rem; border-radius:14px; background:#ffe035; font-weight:800; line-height:1.25; }
.ref-about-photo > span svg { width:35px; height:45px; }
.ref-about-copy { background:#052c52; color:#fff; padding:2.6rem; border-radius:28px; }
.ref-about-copy .demo-kicker,.ref-about-copy h2 span { color:#ffe035; }.ref-about-copy > p:not(.demo-kicker) { margin-top:1.4rem; }
.ref-about-copy .ref-checks svg { color:#ffe035; }
.ref-process-band { background:#e7f6fc; padding:3.5rem 0; }
.ref-process-band > div { display:grid; grid-template-columns:.85fr 1.5fr; gap:4rem; align-items:center; }
.ref-process-band h2 { font-size:2.3rem; }
.ref-process-band ol { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ref-process-band li > span { display:grid; place-items:center; width:44px; height:44px; background:#ffe035; border-radius:50%; font-size:1.4rem; font-weight:900; margin-bottom:1rem; }
.ref-process-band li h3 { font-size:1rem; margin-bottom:.7rem; }.ref-process-band li p { font-size:.83rem; }
.theme-current .ref-photo-grid img { border-radius:18px; }
.theme-current .ref-closing { background:#ffe035; }.theme-current .ref-closing .demo-button { background:#052c52; color:#fff; }
/* Clearflow: red service buttons, navy framing, a direct problem-first journey. */
.theme-clearflow.reference-trade { --demo-button:#b92d27; --demo-button-text:#fff; --demo-focus:#aa2d22; --ref-navy:#142c42; color:#142c42; }
.theme-clearflow .ref-utility { background:#f6f3ef; color:#263f53; }
.theme-clearflow .ref-brand { color:#b92d27; font-style:normal; }.theme-clearflow .ref-brand small { color:#142c42; }
.theme-clearflow.reference-trade .demo-button { border-radius:4px; }
.ref-plumbing-nav { background:#142c42; color:#fff; }
.ref-plumbing-nav > div { display:flex; gap:3rem; align-items:center; min-height:47px; font-size:.82rem; font-weight:650; }
.ref-plumbing-nav a { padding:.7rem 0; }
.ref-plumbing-hero { position:relative; overflow:hidden; background:#142c42; color:#fff; min-height:560px; display:flex; align-items:center; }
.ref-plumbing-background { position:absolute; right:0; top:0; height:100%; width:57%; object-fit:cover; object-position:center; }
.ref-plumbing-hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#142c42 4%,#142c42 40%,#142c429c 57%,transparent 78%); }
.ref-plumbing-hero > .demo-container { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding-block:3.5rem; }
.reference-trade .ref-plumbing-copy h1 { font-size:clamp(3.3rem,4.9vw,4.7rem); font-weight:850; line-height:1.04; }
.ref-plumbing-copy h1 span { color:#ffc9ba; }
.ref-plumbing-copy .demo-kicker { color:#ffc9ba; }
.ref-plumbing-copy > p:not(.demo-kicker) { margin-top:1.6rem; font-size:1.05rem; }
.ref-plumbing-copy .demo-button { margin-top:1.7rem; background:#c4352f; }
.ref-plumbing-copy .ref-secondary { display:flex; margin-top:.7rem; font-size:.78rem; }
.ref-plumbing-tag { align-self:flex-end; display:block; background:#fff; color:#142c42; padding:1.5rem; border-top:4px solid #b92d27; margin-bottom:1rem; width:235px; box-shadow:0 8px 30px #122a4130; font-size:.85rem; }
.ref-plumbing-tag > svg { width:38px; height:38px; display:block; margin-bottom:.7rem; color:#b92d27; }
.ref-plumbing-tag strong { font-size:1.2rem; }
.ref-plumbing-help { display:grid; grid-template-columns:1.1fr repeat(4,1fr); position:relative; z-index:2; margin-top:-1px; background:#fff; box-shadow:0 10px 35px #162c4312; border:1px solid #e3e7e9; }
.ref-plumbing-help > div { padding:1.4rem; background:#b92d27; color:white; }.ref-plumbing-help h2 { font-size:1.5rem; margin-top:.4rem; }.ref-plumbing-help > div > span { font-size:.62rem; font-weight:700; letter-spacing:.1em; }
.ref-plumbing-help > a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; font-size:.8rem; font-weight:700; padding:1rem; border-right:1px solid #e7ebee; }
.ref-plumbing-help > a > svg:first-child { width:29px; height:29px; color:#b92d27; }.ref-plumbing-help > a > svg:last-child { display:none; }
.ref-plumbing-help > a:hover { background:#fff4ef; }
.ref-plumbing-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:5rem; }
.ref-plumbing-intro h2 span { color:#b92d27; }.ref-plumbing-intro .demo-kicker { color:#b92d27; }
.ref-plumbing-intro p:not(.demo-kicker) { max-width:490px; margin-top:1.5rem; }
.ref-plumbing-photo { position:relative; }.ref-plumbing-photo img { height:440px; width:100%; object-fit:cover; }
.ref-plumbing-photo span { position:absolute; bottom:20px; left:-25px; background:#142c42; color:white; padding:1.25rem 1.7rem; font-size:1.2rem; border-left:5px solid #b92d27; }
.theme-clearflow.reference-trade .clearflow-finder { padding:3rem; background:#f6f3ef; border-radius:0; margin-bottom:5rem; }
.theme-clearflow.reference-trade .trade-choices button[aria-pressed=true] { background:#142c42; border-color:#142c42; color:#fff; }
.theme-clearflow.reference-trade .finder-answer { background:#fff; border-radius:0; border:1px solid #e4dfd8; }
.theme-clearflow.reference-trade .finder-symbol { color:#b92d27; background:#fff0e9; }
.theme-clearflow.reference-trade .finder-answer .demo-kicker { color:#b92d27; }
.ref-hotwater { background:#142c42; color:white; padding:3rem 0; }.ref-hotwater > div { display:flex; align-items:center; gap:2.5rem; }.ref-hotwater > div > div:first-child { color:#ffc9ba; }.ref-hotwater svg { width:90px; height:90px; }.ref-hotwater .demo-button { margin-left:auto; white-space:nowrap; }.ref-hotwater .demo-button svg { width:18px; height:18px; }.ref-hotwater p { margin-top:1rem; }.ref-hotwater .demo-kicker { color:#ffc9ba; margin-top:0; }
.theme-clearflow .ref-closing { background:#f6f3ef; }.theme-clearflow .demo-footer .ref-brand,.theme-clearflow .demo-footer .ref-brand small { color:#fff; }
/* Ridgeline: black and blue, full-width photography, visible assessment form. */
.theme-ridgeline.reference-trade { --demo-button:#2368b3; --demo-button-text:#fff; --demo-focus:#d0a535; --ref-navy:#111923; color:#152435; }
.theme-ridgeline.reference-trade h1,.theme-ridgeline.reference-trade h2,.theme-ridgeline.reference-trade h3 { font-family:var(--font-sans); }
.theme-ridgeline.reference-trade h1 em,.theme-ridgeline.reference-trade h2 em { font-style:normal; color:#2368b3; }
.theme-ridgeline .ref-utility { background:#2368b3; color:#fff; }.theme-ridgeline .ref-header { background:#10161d; color:#fff; }
.theme-ridgeline .ref-brand { font-style:normal; }.theme-ridgeline .ref-brand svg { color:#79b7f8; }.theme-ridgeline .ref-brand small { letter-spacing:.38em; }
.theme-ridgeline.reference-trade .demo-button { border-radius:3px; }
.ref-roof-hero { position:relative; min-height:610px; background:#172739; color:#fff; display:flex; align-items:center; }
.ref-roof-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.ref-roof-hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#071423de 0%,#07142392 48%,#07142329); }
.ref-roof-hero > .demo-container { position:relative; z-index:1; display:grid; grid-template-columns:1.5fr 1fr; gap:5.5rem; align-items:center; padding-block:3.4rem; }
.ref-roof-copy h1 { font-size:clamp(3rem,4.6vw,4.3rem); font-weight:800; line-height:1.05; }
.ref-roof-copy > p:not(.demo-kicker) { margin-top:1.5rem; font-size:1.02rem; }.ref-roof-copy .demo-button { margin-top:1.7rem; }
.ref-roof-caption { position:absolute; bottom:12px; left:max(2.5rem,calc((100% - 1220px)/2)); font-size:.55rem; font-weight:700; letter-spacing:.17em; z-index:1; }
.reference-trade .ref-quick-form { background:#111b26ed; border:1px solid #ffffff30; border-top:4px solid #4f9bea; padding:1.8rem; color:#fff; }
.ref-quick-form h2 { font-size:1.75rem; line-height:1.15; }.ref-quick-form .demo-kicker { font-size:.6rem; color:#b8d8fc; margin-bottom:.6rem; }
.ref-quick-form .ref-form-note { font-size:.68rem; margin:.8rem 0 1rem; color:#dce7f3; }
.ref-quick-form .field { margin-top:1rem; }.ref-quick-form .field label { color:#fff; font-size:.78rem; }
.ref-quick-form .field input,.ref-quick-form .field select { min-height:45px; background:#fff; padding:.6rem .8rem; border:1px solid #ced8e1; border-radius:2px; font-size:.86rem; }
.ref-quick-form .demo-button { width:100%; margin-top:1.3rem; }
.ref-quick-form .form-feedback:not(:empty) { font-size:.8rem; margin-top:1rem; }
.ref-roof-promise { background:#2368b3; color:white; }.ref-roof-promise > div { display:flex; align-items:center; justify-content:space-between; min-height:77px; gap:2rem; }.ref-roof-promise span { display:flex; gap:.8rem; align-items:center; font-size:.9rem; font-weight:650; }.ref-roof-promise svg { width:30px; height:30px; }
.theme-ridgeline.reference-trade .demo-kicker { color:#2368b3; }.theme-ridgeline .ref-roof-hero .demo-kicker { color:#c0dfff; }
.theme-ridgeline .ref-service-grid > a { background:#f3f6f9; border-bottom:3px solid #2368b3; }.theme-ridgeline .ref-service-symbol { color:#2368b3; background:#e4edf7; border-radius:3px; }
.ref-roof-about { background:#111923; color:#fff; }.ref-roof-about > div { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding-block:4rem; }.ref-roof-about img { height:400px; width:100%; object-fit:cover; }.ref-roof-about p:not(.demo-kicker) { margin-top:1.5rem; color:#d5e0ed; }.ref-roof-about .demo-button { margin-top:1.5rem; }.theme-ridgeline .ref-roof-about .demo-kicker { color:#8bc1fb; }
.ref-roof-guide { display:grid; grid-template-columns:.9fr 1.1fr; gap:5rem; align-items:center; }.ref-roof-guide > div > p:not(.demo-kicker) { margin-top:1.5rem; }.ref-roof-guide .demo-button { margin-top:1.5rem; }
.ref-roof-options > a { display:flex; align-items:center; gap:1.4rem; padding:1.8rem 0; border-bottom:1px solid #d9e2ec; }.ref-roof-options > a > span { color:#2368b3; font-size:1.1rem; font-weight:750; }.ref-roof-options h3 { font-size:1.1rem; }.ref-roof-options p { font-size:.82rem; margin-top:.6rem; }.ref-roof-options svg { width:22px; height:22px; flex-shrink:0; margin-left:auto; }
.theme-ridgeline .ref-closing { background:#eaf1f9; }
/* Carry the theme into the existing detailed service pages, galleries and forms. */
.reference-trade .demo-page-hero h1,.reference-trade .example-detail-hero h1 { font-size:clamp(2.5rem,4.5vw,4.2rem); }
.reference-trade .demo-page-hero { padding-block:3.5rem; }
.reference-trade .example-detail-hero { padding-block:3rem; }
.reference-trade .example-detail-hero img { border-radius:8px; }
.reference-trade .example-detail-body h2 { font-size:1.8rem; }
.reference-trade .demo-contact h2 { font-size:2rem; }
.theme-current.reference-trade .example-help { background:#e7f6fc; color:#052c52; }
.theme-clearflow.reference-trade .example-help { background:#f6f3ef; }
.theme-ridgeline.reference-trade .example-help { background:#eaf1f9; }
.reference-trade .demo-contact { padding-top:1rem; }
.reference-trade .demo-contact .demo-request-form { background:#f5f7f9; color:#152435; border:1px solid #d8e1e8; border-radius:8px; }
.reference-trade .demo-contact .field input,.reference-trade .demo-contact .field select,.reference-trade .demo-contact .field textarea { background:#fff; border:1px solid #c9d5dd; }
.theme-current.reference-trade .electrical-service-list h2,.theme-ridgeline.reference-trade .ridge-services h2 { font-size:2rem; }
.theme-ridgeline.reference-trade .ridge-services { border-color:#cfdae5; }
.theme-ridgeline.reference-trade .roof-guide-answer { background:#eaf1f9; }
.theme-ridgeline.reference-trade .trade-choices button[aria-pressed=true] { background:#172739; color:#fff; border-color:#172739; }
.theme-ridgeline.reference-trade .trade-closing { background:#eaf1f9; color:#152435; }
.theme-clearflow.reference-trade .trade-closing { background:#f6f3ef; color:#142c42; }
@media(min-width:761px) and (max-width:1100px) {
  .reference-trade .demo-nav { gap:.85rem; font-size:.73rem; }.reference-trade .ref-brand { font-size:1.4rem; }.reference-trade .ref-header-action { padding:.8rem 1rem; font-size:.75rem; }.reference-trade .demo-nav > a:nth-of-type(3),.reference-trade .demo-nav > a:nth-of-type(4) { display:none; }
  .ref-roof-hero > .demo-container { gap:2rem; }.ref-electric-copy { width:60%; }.ref-service-grid { gap:.8rem; }.ref-service-grid > a { padding:1.3rem; }.ref-electric-about,.ref-plumbing-intro { gap:2rem; }.ref-process-band > div { grid-template-columns:1fr; gap:2rem; }.ref-hotwater > div { gap:1.5rem; }.ref-hotwater svg { width:50px; height:50px; }
}
@media(max-width:760px) {
  .reference-trade .demo-container { width:calc(100% - 2.5rem); }.reference-trade .demo-header { min-height:85px; gap:1rem; position:relative; }.reference-trade .ref-brand { font-size:1.45rem; }.ref-brand > svg { width:32px; height:38px; }.ref-brand small { font-size:.55rem; }.ref-header-action { display:none!important; }.ref-utility { font-size:.61rem!important; }.ref-utility > div { gap:.5rem; }.reference-trade .demo-mobile nav { top:78px; background:#fff; color:#152435; max-height:70vh; overflow-y:auto; }.reference-trade .demo-mobile summary { border-radius:4px; }
  .reference-trade h2 { font-size:2.05rem; }.reference-trade .demo-page-hero h1,.reference-trade .example-detail-hero h1 { font-size:clamp(2.35rem,8vw,3.7rem); }.ref-section-head { display:block; }.ref-section-head > p { margin-top:1.3rem; }.ref-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.ref-service-grid > a { padding:1.25rem .95rem; }.ref-service-grid h3 { font-size:1.05rem; }.ref-service-grid p { font-size:.79rem; }.ref-service-more { font-size:.68rem; gap:.3rem; }.ref-service-symbol { width:60px; height:60px; }.ref-service-symbol svg { width:42px; height:42px; }.ref-photo-grid { gap:.75rem; grid-template-columns:1fr 1fr; }.ref-photo-grid a:first-child { grid-column:span 2; }.ref-photo-grid img { height:210px; }.ref-photo-grid a:first-child img { height:270px; }.ref-closing > div { display:block; }.ref-closing .demo-button { margin-top:1.5rem; }.reference-trade .demo-footer nav { gap:.3rem 1.4rem; }.ref-hero-actions { gap:1rem; }
  .ref-electric-hero { padding:2.8rem 0 0; display:flex; flex-direction:column; }.ref-electric-hero > .demo-container { order:0; }.ref-electric-copy { width:100%; }.reference-trade .ref-electric-copy h1 { font-size:clamp(2.6rem,8.6vw,4.2rem); }.ref-electric-copy > p:not(.demo-kicker) { font-size:1rem; }.ref-electric-copy .demo-kicker { font-size:.63rem; }.ref-electric-photo { position:relative; width:100%; height:320px; order:1; border:0; border-radius:45% 0 0 0; margin-top:1.6rem; }.ref-electric-photo img { object-position:50% 45%; }.ref-wave { height:40px; }.ref-hero-points { gap:1rem; font-size:.67rem; }.ref-electric-about,.ref-process-band > div { grid-template-columns:1fr; gap:2rem; }.ref-about-photo img { height:320px; }.ref-about-photo > span { right:-6px; }.ref-about-copy { padding:2rem 1.5rem; }.ref-process-band ol { grid-template-columns:1fr; gap:1.5rem; }.ref-process-band li { padding-left:65px; position:relative; }.ref-process-band li > span { position:absolute; left:0; }.ref-process-band li h3 { font-size:1.1rem; }
  .ref-plumbing-nav > div { gap:.5rem 1rem; justify-content:space-between; font-size:.65rem; flex-wrap:wrap; padding-block:.35rem; }.ref-plumbing-nav a { padding:.3rem 0; }.ref-plumbing-hero { min-height:0; }.ref-plumbing-hero > .demo-container { padding-block:2.8rem 3rem; }.ref-plumbing-background { width:100%; opacity:.25; }.ref-plumbing-hero:after { background:#142c427a; }.reference-trade .ref-plumbing-copy h1 { font-size:clamp(3rem,10vw,4.4rem); }.ref-plumbing-copy .demo-kicker { font-size:.66rem; }.ref-plumbing-tag { display:none; }.ref-plumbing-help { grid-template-columns:repeat(2,1fr); }.ref-plumbing-help > div { grid-column:span 2; display:flex; align-items:center; justify-content:space-between; padding:1rem; }.ref-plumbing-help h2 { font-size:1.25rem; margin:0; }.ref-plumbing-help > a { border-bottom:1px solid #e7ebee; }.ref-plumbing-intro { grid-template-columns:1fr; gap:2.2rem; }.ref-plumbing-photo img { height:350px; }.ref-plumbing-photo > span { left:-5px; }.theme-clearflow.reference-trade .clearflow-finder { padding:1.5rem; gap:2rem; }.ref-hotwater > div { flex-wrap:wrap; gap:1.5rem; }.ref-hotwater > div > div:first-child { display:none; }.ref-hotwater .demo-button { margin:0; }.ref-hotwater h2 { font-size:2rem; }
  .ref-roof-hero { min-height:0; }.ref-roof-hero > img { height:550px; object-position:47% center; }.ref-roof-hero:after { background:linear-gradient(#07142388 0%,#071423b3 38%,#172739 60%); }.ref-roof-hero > .demo-container { grid-template-columns:1fr; gap:2.5rem; padding-block:3rem; }.ref-roof-copy h1 { font-size:clamp(2.8rem,9vw,4rem); }.ref-roof-copy > p:not(.demo-kicker) { font-size:.94rem; }.reference-trade .ref-quick-form { padding:1.5rem; background:#101b27; }.ref-roof-caption { display:none; }.ref-roof-promise > div { flex-wrap:wrap; justify-content:center; gap:1rem; padding:1.2rem 0; }.ref-roof-promise span { font-size:.72rem; }.ref-roof-promise svg { width:23px; height:23px; }.ref-roof-about > div,.ref-roof-guide { grid-template-columns:1fr; gap:2.5rem; }.ref-roof-about img { height:300px; }.ref-roof-options > a { gap:1rem; }.ref-roof-options h3 { font-size:1rem; }
}
.theme-current.reference-trade .demo-kicker,.theme-current.reference-trade .electrical-services article > span,.theme-current.reference-trade .electrical-services .demo-text-link,.theme-current.reference-trade .electrical-service-list > article > span,.theme-current.reference-trade .electrical-service-list .demo-text-link { color:#075778; }
.theme-current.reference-trade .electrical-services p { color:#425b6e; }
.theme-current.reference-trade .demo-page-hero h1 span { color:#076da3; }
.theme-current.reference-trade .ref-electric-copy .demo-kicker { color:#fff; }
.theme-current.reference-trade .ref-about-copy .demo-kicker { color:#ffe035; }
.theme-current.reference-trade .example-mobile-action .demo-button { color:#072b4e; }
/* The roofing reference leads with a photograph, then a blue introduction and
   an assessment card that overlaps both sections. Keep that distinct rhythm. */
@media(min-width:761px) {
  .ref-roof-hero { display:block; background:#fff; isolation:isolate; }
  .ref-roof-hero > img { position:relative; display:block; width:min(1024px,100%); height:auto; aspect-ratio:16/9; object-fit:cover; margin-inline:auto; }
  .ref-roof-hero:after { display:none; }
  .ref-roof-hero > .demo-container { padding-block:4.5rem 3.5rem; grid-template-columns:1.6fr 1fr; gap:4.5rem; align-items:start; }
  .ref-roof-hero > .demo-container:before { content:''; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); width:100vw; background:#2368b3; z-index:-1; }
  .ref-roof-copy h1 { font-size:clamp(2.15rem,3.05vw,2.9rem); line-height:1.1; }
  .ref-roof-hero .ref-roof-copy .demo-kicker { color:#fff; }
  .ref-roof-copy .demo-button { background:#fff; color:#17558e; }
  .ref-roof-hero .ref-quick-form { margin-top:-13rem; background:#111b26f5; padding:1.8rem; }
  .ref-roof-caption { display:none; }
  .ref-roof-promise { background:#174f8c; border-top:1px solid #ffffff25; }
}
@media(min-width:761px) and (max-width:1050px) {
  .ref-roof-hero > .demo-container { gap:2rem; grid-template-columns:1.15fr 1fr; }
  .ref-roof-hero .ref-quick-form { margin-top:-9rem; padding:1.25rem; }
}
@media(max-width:760px) { .ref-quick-form .field input,.ref-quick-form .field select { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .reference-trade * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }