/* Sunstorm Home: white space, sky, mint accents, and saturated teal. Filename retained for existing templates. */


body { background: var(--paper); color: var(--ink); }
.site-header { background: var(--header-surface); border-bottom: 1px solid var(--line); }
.preview-bar { background: var(--soft); color: var(--muted); }
.nav nav a:hover, .text-link, .textlink { color: var(--blue); }
.button-gold {
  background: var(--action-surface);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--action-shadow);
}
.button-gold:hover { background: var(--action-hover); box-shadow: 0 5px 0 var(--action-shadow); }
.button-outline { border-color: var(--blue); color: var(--blue); background: white; }
.button-outline:hover { background: var(--blue); color: white; }
.eyebrow, .eyebrow-light, .media-material, .media-tag { color: var(--blue); }
.dot, .service-strip span::before { background: var(--blue); }
.check-list li::before { color: var(--blue); }
.stars { color: var(--review-stars); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline-color: var(--blue); }

/* The first view should feel like a bright home, with the photograph unobscured. */
.hero, .inner-hero, .content-page .inner-hero {
  color: var(--ink);
  background: var(--hero-surface);
  border-bottom: 1px solid var(--line);
}
.hero-grid { grid-template-columns: .94fr 1.14fr; gap: 50px; padding-block: 52px 58px; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 4.55vw, 4.6rem); color: var(--ink); }
.hero h1 span { color: var(--blue); }
.hero .eyebrow, .content-page .inner-hero .eyebrow { color: var(--blue); }
.hero-description, .content-page .inner-hero .lead, .inner-hero .lead { color: var(--muted); }
.hero-actions p, .hero-proof small, .finance-hero-note { color: var(--muted); }
.hero-proof { border-top-color: var(--line); }
.hero-proof strong { color: var(--ink); }
.hero-phone-link, .product-breadcrumb { color: var(--blue); }
.hero-phone-link:hover { color: var(--ink); }
.hero-home-photo { min-height: 0; height: auto; align-self: center; background: white; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 32px #0c5a7714; }
.hero-home-photo > img { position: static; display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.hero-home-photo::after { display: none; }
.hero-home-photo figcaption { position: static; padding: 17px 21px; color: var(--ink); background: white; border-top: 1px solid var(--line); }
.hero-home-photo figcaption > strong { display: block; font-size: 1rem; line-height: 1.5; letter-spacing: -.02em; }
.hero-home-photo figcaption > span { font-size: .75rem; letter-spacing: .03em; color: var(--muted); margin: 4px 0 0; }
.service-strip { background: var(--sand); color: var(--ink); border-bottom: 1px solid var(--line); }
.service-strip > .shell { padding-block: 18px; }
.proof-band { background: white; }

/* The same section hierarchy carries through product pages, guides and service pages. */
.content-page .section-soft, .article-related-link { background: var(--soft); }
.content-page .section-dark, .article-cta, .booking-teaser, .closing-section {
  background: var(--sand);
  color: var(--ink);
  border-block: 1px solid var(--line);
}
.content-page .section-dark .lead, .article-cta p, .booking-teaser p { color: var(--muted); }
.content-page .section-dark .eyebrow, .booking-teaser .eyebrow, .closing-layout .eyebrow { color: var(--blue); }
.content-page .inner-hero .button-outline,
.content-page .section-dark .button-outline,
.article-cta .button-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.content-page .inner-hero .button-outline:hover,
.content-page .section-dark .button-outline:hover,
.article-cta .button-outline:hover { background: var(--blue); color: white; }
.article-related-link { border-left-color: var(--blue); }
.prose a, .article-sources a, .guide-page .learn .textlink,
.contact-details > a, .contact-information > a,
.assessment-context > p a, .guide-preview .text-link { color: var(--blue); }
.guide-page .learn { background: white; border-color: var(--line); border-top-color: var(--blue); }
.guide-preview, .work-photo { border-color: var(--line); }
.spectable th, .compare th { background: var(--sky-strong); color: var(--ink); }
.spectable tbody tr:nth-child(even), .compare tbody tr:nth-child(even) { background: #f4faff; }
.systems-section, .faq-section, .process-section { background: white; color: var(--ink); }
.process-section .eyebrow { color: var(--blue); }
.process-grid article { border-color: var(--line); }
.process-grid p { color: var(--muted); }
.benefit-blue { background: var(--accent-soft); color: var(--ink); }
.benefit-blue p { color: var(--muted); }
.benefit-divider { background: var(--line); }
.benefit-photo, .system-card { background: white; border-color: var(--line); }
.system-visual, .system-visual-blue { background: var(--warm); }
.system-tag { background: white; color: var(--blue); border: 1px solid var(--line); }
.system-label, .local-copy h2 > span, .local-point > span { color: var(--blue); }
.hydrosip-card { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.hydrosip-card .eyebrow, .hydrosip-card .text-link { color: var(--blue); }
.hydrosip-card p:not(.eyebrow) { color: var(--muted); }
.system-media-pair, .system-media-pair figure { background: white; }
.mini-specs > div, .media-spec-grid article, .payment-grid article { background: var(--soft); }
.media-spec-grid dl > div { border-color: var(--line); }
.media-premium-head .eyebrow-light { color: var(--blue); }
.controller-feature { background: var(--green); color: var(--ink); border: 1px solid var(--green-strong); }
.controller-feature .eyebrow { color: var(--blue); }
.controller-feature figcaption { color: var(--muted); }
.media-sources { background: var(--soft); }
.media-sources a { color: var(--blue); }
.ro-tech-footer { background: var(--soft); }
.whole-ro-grid article { background: var(--soft); border-top-color: var(--blue); }
.work-photo small, .local-company a.text-link { color: var(--blue); }

/* White cutaway panels contrast with the teal technology band. */
.media-home { color: var(--ink); background: var(--soft); border-block: 1px solid var(--line); }
.media-home .eyebrow, .media-home .media-material { color: var(--blue); }
.media-home-heading > p:last-child, .media-home-copy article > p:last-child, .media-home-note { color: var(--muted); }
.media-home-copy article + article { border-color: var(--line); }
.media-home-copy > .text-link { color: var(--blue); border-color: var(--blue); }
.cutaway-pair figure { border: 1px solid var(--line); }

/* Financing is part of the same bright business site. */
.home-finance { background: var(--warm); color: var(--ink); border-block: 1px solid var(--line); }
.home-finance .eyebrow, .home-lender-summary span,
.home-finance-layout .text-link, .inner-hero .finance-actions .text-link { color: var(--blue); border-color: var(--blue); }
.home-finance-layout > div > p:not(.eyebrow), .home-lender-summary p,
.home-finance-disclosure { color: var(--muted); }
.home-lender-summary, .home-lender-summary article,
.home-finance-disclosure, .lender-card { border-color: var(--line); }
.lender-card.foundation-card { border-top-color: var(--blue); }
.lender-card li::marker { color: var(--blue); }

/* Form controls retain obvious focus, validation and selected states. */
.assessment-section { background: var(--sky); border-color: var(--line); }
.inline-assessment, .contact-form-card, .calendar-panel { border-color: var(--line); background: white; box-shadow: 0 12px 36px #0c5a7712; }
.booking-main input:not([type=checkbox]):not([type=radio]), .booking-main select,
.contact-form-card input:not([type=checkbox]), .contact-form-card select,
.contact-form-card textarea { border-color: var(--input-border); color: var(--ink); }
.booking-main input::placeholder, .contact-form-card input::placeholder,
.contact-form-card textarea::placeholder { color: #6b7580; }
.booking-main input[aria-invalid=true],
.contact-form-card input[aria-invalid=true], .contact-form-card textarea[aria-invalid=true] { border-color: #a32436; background: #fff9fa; }
.booking-main input[type=checkbox], .contact-form-card input[type=checkbox] { accent-color: var(--blue); }
.form-progress { color: var(--muted); }
.form-progress li > span { border-color: #a3aaa6; }
.form-progress li.active { color: #066b79; }
.form-progress li.active > span { background: var(--accent-soft); border-color: var(--blue); color: #066b79; }
.selected-product, .sample-times { background: var(--accent-soft); color: var(--blue); }
.appointment-summary { background: var(--soft); color: var(--ink); }
.booking-main .date-choice label, .booking-main .time-choice label { border-color: #a3aaa6; }
.date-choice input:checked + label, .time-choice input:checked + label { background: var(--accent-soft); color: #066b79; border-color: var(--blue)!important; box-shadow: inset 0 0 0 1px var(--blue); }
.success-details { background: var(--accent-soft); border-left-color: var(--blue); }
.dialog-close { border-color: var(--line); }
.dialog-close:hover { background: var(--soft); }
.calendar-panel .eyebrow { color: var(--blue); }
.booking-sidebar { background: var(--navy); }
.booking-sidebar .eyebrow, .booking-sidebar .check-list li::before { color: var(--accent-light); }
.mobile-actions { background: #fffffff5; border-color: var(--line); box-shadow: 0 -3px 16px #0c5a7712; }

/* A restrained dark footer anchors the light page. */
.site-footer { background: var(--navy); }
.site-footer a, .site-footer h3 { color: white; }
.site-footer p, .footer-bottom { color: var(--footer-muted); }
.site-footer a:hover { color: var(--action-hover); }
.site-footer a:focus-visible { outline-color: var(--gold); }

@media(max-width:1100px) {
  .hero-grid { gap: 30px; grid-template-columns: .95fr 1.05fr; }
  .hero h1 { font-size: clamp(2.7rem, 4.5vw, 3.8rem); }
  .hero-home-photo { min-height: 0; }
}
@media(max-width:760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 33px 35px; }
  .hero h1 { font-size: clamp(2.55rem, 10.6vw, 4rem); }
  .hero-home-photo { aspect-ratio: auto; min-height: 0; width: 100%; }
  .hero-home-photo > img { height: auto; object-position: center; }
  .hero-home-photo figcaption { padding: 14px 17px; }
  .hero-home-photo figcaption > strong { font-size: .93rem; }
  .hero-home-photo figcaption > span { font-size: .75rem; }
  .nav nav { background: white; }
  .service-strip > .shell { display: grid; gap: 11px; overflow: visible; padding-block: 18px; }
}

/* Distinct color bands give the page rhythm without competing with the gold actions. */
.service-strip { background:var(--teal); color:white; border-color:var(--teal-deep); }
.service-strip span::before { background:var(--accent-light); }
.proof-band { background:white; border-bottom:1px solid var(--line); }
.proof-layout figure { border-left:3px solid var(--frame-blue); padding-left:26px; }
.hero-home-photo { border:2px solid var(--frame-blue); box-shadow:10px 10px 0 var(--sky-strong); }
.hero-home-photo figcaption { border-top-color:var(--line); }
.benefit-blue { background:var(--green); border:1px solid var(--green-strong); border-top:5px solid var(--frame-green); }
.benefit-photo { border-top:5px solid var(--frame-blue); }
.benefit-divider { background:var(--green-strong); }
.systems-section { background:var(--soft); border-block:1px solid var(--line); }
.system-card { border:1px solid var(--line); border-top:5px solid var(--frame-blue); box-shadow:0 10px 26px #0a536908; }
.system-card:nth-child(2) { border-top-color:var(--frame-blue); }
.system-visual { background:var(--sky); }
.system-visual-blue { background:var(--sky); }
.hydrosip-card { background:white; border-left:5px solid var(--frame-blue); box-shadow:0 8px 24px #0a536908; }
.hydrosip-card .hydrosip-image { background:white; }
.media-home { background:var(--feature-surface); color:white; border:0; }
.media-home .eyebrow,.media-home .media-material { color:var(--accent-light); }
.media-home-heading > p:last-child,.media-home-copy article > p:last-child,.media-home-note { color:var(--on-color-muted); }
.media-home-copy article + article { border-color:#ffffff40; }
.media-home-copy > .text-link { color:white; border-color:var(--accent-light); }
.cutaway-pair figure { border:2px solid #a5dee1; box-shadow:0 12px 30px #032d3b24; }
.local-image { border:2px solid var(--frame-green); box-shadow:9px 9px 0 var(--green); }
.local-point { border-left:3px solid var(--green-strong); padding-left:20px; }
.home-finance { background:var(--soft); border-color:var(--line); }
.home-lender-summary article { background:#ffffffb8; border:1px solid var(--green-strong); border-left:4px solid var(--frame-green); padding:22px 24px; margin-bottom:14px; border-radius:5px; }
.home-lender-summary article:nth-child(2) { border-color:var(--line); border-left-color:var(--frame-blue); background:white; }
.home-lender-summary { border:0; }
.home-finance-disclosure { border-color:var(--line); }
.guide-card,.guide-preview { border:1px solid var(--line); border-top:4px solid var(--frame-blue); background:white; }
.guide-card:nth-child(even),.guide-preview:nth-child(even) { border-top-color:var(--frame-green); }
.guide-page .learn { border-top:4px solid var(--frame-blue); }
.booking-teaser,.closing-section,.article-cta,.content-page .section-dark { background:var(--feature-surface); color:white; border:0; }
.booking-teaser .eyebrow,.closing-layout .eyebrow,.article-cta .eyebrow,.content-page .section-dark .eyebrow { color:var(--accent-light); }
.booking-teaser p,.closing-section p,.article-cta p,.content-page .section-dark .lead { color:var(--on-color-muted); }
.closing-section .button-gold,.article-cta .button-gold,.section-dark .button-gold { color:var(--ink); }
.content-page .section-dark .button-outline,.article-cta .button-outline { color:white; border-color:var(--accent-light); background:transparent; }
.content-page .section-dark .button-outline:hover,.article-cta .button-outline:hover { background:white; color:var(--teal-deep); }
.closing-section .text-link,.article-cta a:not(.button),.section-dark .textlink { color:white; }
.inner-hero { border-bottom:2px solid var(--sky-strong); }
.content-page .section-soft { background:var(--sky); }
.system-media-pair { border:1px solid var(--line); border-top:4px solid var(--frame-blue); border-radius:8px; overflow:hidden; }
.mini-specs > div:nth-child(even),.media-spec-grid article:nth-child(even),.payment-grid article:nth-child(even),.whole-ro-grid article:nth-child(even) { background:var(--green); border-color:var(--green-strong); }
.controller-feature { border-left:5px solid var(--frame-green); }
.ro-tech-footer { background:var(--sky); border-color:var(--line); border-left:5px solid var(--frame-blue); }
.lender-card { border-top:5px solid var(--frame-green); }
.lender-card.foundation-card { border-top-color:var(--frame-blue); }
.assessment-section { background:var(--sky); border-top:2px solid var(--sky-strong); }
.inline-assessment,.contact-form-card,.calendar-panel { border:1px solid var(--line); border-top:5px solid var(--frame-blue); box-shadow:0 14px 36px #12658a10; }
.contact-information,.contact-details { border-left-color:var(--frame-green); }
.appointment-summary,.success-details { background:var(--green); }
.site-footer { background:var(--navy); border-top:5px solid var(--teal); }
@media(max-width:760px) {
 .hero-home-photo { box-shadow:5px 5px 0 var(--sky-strong); }
 .local-image { box-shadow:5px 5px 0 var(--green); }
 .proof-layout figure { padding-left:18px; }
}
.guide-page .learn:nth-child(even) { border-top-color:var(--frame-green); }
.hero-home-photo { overflow:hidden; }

/* Light-gray secondary sections; mint stays on smaller cards and borders. */
.faq-section,.process-section,.content-page .section-soft { background:var(--soft); }

/* System comparison and product pages use blue, white and light gray. */
.systems-page .section-soft { background:var(--soft); }
.systems-page .systems-section { background:white; border-color:var(--line); }
.systems-page .faq-section,.systems-page .process-section { background:var(--soft); }
#gallery-caption { display:none; }

/* Show the full faucet silhouette in the installation gallery. */
.faucet-gallery .work-photo>img { height:auto; aspect-ratio:4/3; object-fit:contain; object-position:center; background:#f3f6f8; }
.work-photo>img[src*="installation-gray-wall-retouched"] { object-fit:contain; background:#f3f6f8; }
.installation-tile>img[src*="faucet-black-retouched"] { object-fit:contain; background:#f3f6f8; }

/* Homepage assessment stays beside the offer, with a real two-step flow. */
.systems-section { background:white; border-color:var(--line); }
.assessment-step { margin:0; padding:0; border:0; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-with-assessment { grid-template-columns:1.05fr 1fr; grid-template-areas:"copy form" "photo form"; gap:26px 48px; align-items:start; padding-block:44px; }
.hero-with-assessment .hero-copy { grid-area:copy; align-self:start; padding:32px 0 0; }
.hero-with-assessment .hero-home-photo { grid-area:photo; width:100%; max-width:480px; margin:0; align-self:start; }
.hero-with-assessment .hero-home-photo img { width:100%; height:auto; }
.hero-with-assessment .inline-assessment { grid-area:form; min-width:0; align-self:start; }
.hero-with-assessment .booking-main { padding:26px; }
.hero-with-assessment h1 { font-size:clamp(2rem,3.3vw,3.5rem); }
.hero-with-assessment .hero-description { font-size:1rem; margin-block:18px; }
.hero-with-assessment .hero-proof { margin-top:18px; padding-top:16px; }
.hero-free-note { font-size:.82rem; color:var(--muted); }
.hero-with-assessment .booking-main h2 { font-size:1.65rem; }
.hero-with-assessment .form-progress { margin-bottom:18px; }
.hero-with-assessment .demo-note { font-size:.7rem; margin-top:0; }
.assessment-step .form-next { white-space:normal; line-height:1.4; }
@media(max-width:760px) { .hero-with-assessment { display:grid; grid-template-columns:1fr; grid-template-areas:"copy" "form" "photo"; gap:24px; padding-block:28px; } .hero-with-assessment .hero-home-photo { max-width:none; } .hero-with-assessment .booking-main { padding:22px; } }
.assessment-step > input,.assessment-step > select { margin-bottom:16px; }
.assessment-step .field-row { margin-bottom:16px; }
@media(max-width:760px) {
 .hero-with-assessment { grid-template-areas:"title" "form" "detail" "proof" "photo"; gap:20px; }
 .hero-with-assessment .hero-copy { display:contents; }
 .hero-with-assessment .hero-copy > .eyebrow,.hero-with-assessment .hero-free-note { display:none; }
 .hero-with-assessment h1 { grid-area:title; margin:0; }
 .hero-with-assessment .hero-description { grid-area:detail; margin:0; }
 .hero-with-assessment .hero-proof { grid-area:proof; margin:0; }
 .hero-with-assessment .field-row { grid-template-columns:1fr 1fr; gap:12px; }
 .hero-with-assessment .booking-main { padding:20px; }
 .hero-with-assessment .booking-main h2 { font-size:1.4rem; }
}

.ro-installed-photo.ro-installed-photo { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; margin-top:22px; border-radius:8px; }

/* Clear navigation, complete review proof and photographic inner-page headers. */
.proof-rating { display:block; color:var(--ink); font-size:.8rem; font-weight:700; margin-top:7px; line-height:1.5; }
.proof-rating:hover { text-decoration:underline; text-underline-offset:3px; }
.nav nav a { white-space:nowrap; }
@media(min-width:1101px) { .nav nav { gap:clamp(12px,1.25vw,22px); } }
.content-page .image-hero { position:relative; isolation:isolate; overflow:hidden; background:var(--sky); }
.image-hero::before { content:""; position:absolute; z-index:-1; inset:0 0 0 38%; background-image:var(--header-photo); background-size:cover; background-position:center; mask-image:linear-gradient(to right,transparent 0%,transparent 24%,#000 70%); }
.image-hero > .shell { position:relative; }
.content-page .image-hero h1 { max-width:59%; font-size:clamp(2.5rem,4vw,4rem); }
.content-page .image-hero .lead { max-width:51%; }
.image-hero .finance-hero-note { max-width:49%; }
.work-page .image-hero { --header-photo:url('/assets/sunstorm-flowing-water-2026-09-06.jpg'); }
.guide-page .image-hero { --header-photo:url('/assets/library/texture-water-splash.webp'); }
.payment-page .image-hero { --header-photo:url('/assets/drinking-water-child.jpg'); }
.about-page .image-hero { --header-photo:url('/assets/sunstorm-family-hydroduo-warm-2026-09-06.jpg'); }
@media(max-width:760px) {
 .content-page .image-hero { padding-bottom:230px; }
 .image-hero::before { inset:auto 0 0; height:235px; mask-image:linear-gradient(to bottom,transparent,#000 28%); background-position:center 45%; }
 .content-page .image-hero h1,.content-page .image-hero .lead,.image-hero .finance-hero-note { max-width:100%; }
 .hero-with-assessment .hero-copy { padding:0; }
}

/* The form card and headline share a grid row, so their top edges stay aligned. */
.hero-with-assessment { grid-template-columns:1.08fr 1fr; grid-template-areas:"eyebrow ." "copy form" "photo form"; column-gap:48px; row-gap:22px; padding-block:38px 48px; }
.hero-with-assessment > .eyebrow { grid-area:eyebrow; margin:0; }
.hero-with-assessment .hero-copy { padding:0; align-self:start; }
.hero-with-assessment .inline-assessment { margin:0; }
.hero-with-assessment h1 { font-size:clamp(2.3rem,3.5vw,3.65rem); margin:0; }
.hero-with-assessment .hero-home-photo { max-width:none; border:0; border-radius:14px; box-shadow:0 12px 32px #10364d16; }
.hero-with-assessment .hero-home-photo img { position:static; height:auto; aspect-ratio:3/2; object-fit:contain; }
.content-page .split-image-hero { padding-block:48px; }
.page-hero-grid { display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:56px; }
.content-page .split-image-hero h1 { font-size:clamp(2.5rem,3.6vw,3.9rem); }
.content-page .split-image-hero .lead { max-width:620px; margin-bottom:0; }
.page-hero-photo { margin:0; border-radius:14px; overflow:hidden; background:white; box-shadow:0 14px 36px #10364d15; }
.page-hero-photo img { width:100%; height:auto; display:block; object-fit:contain; }
.system-hero-photo { background:linear-gradient(140deg,#fff,#deeff9); box-shadow:none; padding:24px; }
.system-hero-photo img { max-height:410px; object-fit:contain; }
.systems-intro-hero .btn-row { margin-top:28px; }
.contact-page-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:40px; margin-block:40px; padding:0; border:1px solid var(--line); border-top:6px solid var(--frame-blue); border-radius:12px; overflow:hidden; background:var(--sky); }
.contact-intro-copy { padding:34px 0 34px 38px; }
.contact-intro-copy>p:last-child { font-size:1.05rem; line-height:1.8; color:var(--muted); margin:0; }
.contact-intro-photo { margin:0; align-self:stretch; }
.contact-intro-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
@media(max-width:1100px) { .page-hero-grid { gap:30px; } .contact-page-intro { gap:24px; } .contact-intro-copy { padding:28px 0 28px 25px; } }
@media(max-width:760px) {
 .hero-with-assessment { grid-template-columns:1fr; grid-template-areas:"title" "form" "detail" "proof" "photo"; gap:20px; padding-block:28px; }
 .hero-with-assessment > .eyebrow { display:none; }
 .hero-with-assessment .hero-copy { display:contents; }
 .hero-with-assessment h1 { font-size:clamp(2rem,8.6vw,3.3rem); }
 .hero-with-assessment .hero-home-photo { grid-area:photo; }
 .content-page .split-image-hero { padding-block:34px; }
 .page-hero-grid { grid-template-columns:1fr; gap:28px; }
 .system-hero-photo img { max-height:320px; }
 .contact-page-intro { grid-template-columns:1fr; gap:0; margin-block:24px 32px; }
 .contact-intro-copy { padding:28px 24px; }
 .contact-intro-photo img { height:auto; object-fit:contain; }
}