/**
 * House washing service page (post 28).
 *
 * The hw-* styles from mockups/house-washing/variation-1.0.3.html, carried over
 * verbatim. Preview-only rules (the noindex shim, the base href, the /preview/img/
 * fingerprints) never existed in this block, so nothing was dropped.
 *
 * Before/after sliders reuse .ba-slider, wired by assets/js/homepage-slider.js,
 * the same file the pressure washing and window cleaning pages use.
 */

/* Section rhythm. padding-block only: lateral padding stays with the theme rules,
   because .full-width-bg re-adds the mobile gutter and a padding shorthand here
   would zero it and let text touch the screen edge. */
.hw-calc,.hw-prices,.hw-bundles-section,.hw-soft,.hw-notremove,.hw-awnings,.hw-ba,.hw-north,
.hw-before,.hw-webs,.hw-visit,.hw-faq,.hw-areas,.hw-related{
  padding-top:var(--section-padding,clamp(3rem,8vw,5rem));
  padding-bottom:var(--section-padding,clamp(3rem,8vw,5rem));
}
.hw-faq .faq-list>*{max-width:720px;margin-left:auto;margin-right:auto}
/* Related is the last section before the pre-footer CTA. The service-page wrapper adds
   80px below the content, which with the section padding and the CTA margin stacked to a
   120px hole on the pressure page (fixed there 2026-08-26). Same page-scoped fix here. */
.hw-related{padding-bottom:calc(var(--section-padding,clamp(3rem,8vw,5rem))/2)}
.page-content.service-page{padding-bottom:0}
.hw-lead{max-width:760px;margin:1.25rem auto 2.5rem;color:#46474d;font-size:1.0625rem;line-height:1.7}
.hw-sub{max-width:760px;margin:0 auto 1.5rem;text-align:center;color:#46474d;line-height:1.7}
.hw-h3{text-align:center;margin:3rem 0 1.5rem;font-size:clamp(1.35rem,2.2vw,1.75rem)}
.hw-h3--left{text-align:left;margin-top:0}
.hw-h3--left::after{left:0;transform:none}

/* --- hero --- */
.hw-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(2rem,5vw,3.5rem);align-items:center;text-align:left}
.hw-hero-copy{min-width:0}
.hw-hero h1{display:block;max-width:none;margin:0 0 1.25rem;text-align:left}
.hw-hero h1::after{left:0;transform:none}
.hw-hero-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.4rem}
/* primary-dark rather than brand red: #df3b26 on white is 4.38:1, under the 4.5:1 the
   design system requires. #c43520 is the theme's own darker red and measures 5.42:1. */
.hw-hero-price strong{font-family:Arvo,Georgia,serif;font-size:clamp(1.15rem,1.7vw,1.4rem);color:#c43520}
.hw-hero-price span{font-size:.95rem;font-weight:700;color:#232426}
.hw-hero-sep{color:#66686e}
.hw-hero-min{margin:.2rem 0 .9rem;color:#46474d;font-size:.95rem}
.hw-hero-lead{margin:0;color:#46474d;line-height:1.7}
.hw-hero-actions{justify-content:flex-start!important;margin:1.75rem 0 0!important;gap:.75rem}
.hw-hero-actions .wp-block-button__link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* The hero buttons are hand-built markup, so WordPress emits no block-style-variation
   rule for is-style-outline--1 on this page and the outline button falls back to the
   theme's 32px side padding, 22px wider than the approved preview. This restates the
   variation's own side padding, scoped to the hero. The vertical padding stays with the
   theme rule, which outranked the variation on the preview too. */
.hw-hero-actions .wp-block-button.is-style-outline--1 .wp-block-button__link{
  padding-left:1.33em;padding-right:1.33em}
.hw-hero .trust-items{grid-column:1/-1;justify-content:center;gap:1rem 2rem;margin-top:.5rem;padding-top:1.5rem;border-top:1px solid #e5e5e5}
.hw-hero .trust-item{font-size:.875rem;white-space:nowrap}
.hw-hero-review{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;color:#232426;text-decoration:none;white-space:nowrap}
.hw-hero-review-g{display:inline-flex}.hw-hero-review-g svg{width:20px;height:20px;display:block}
.hw-hero-review-stars{color:#fbbf24;letter-spacing:.06em;font-size:1.05em}
.hw-hero-review:hover .hw-hero-review-txt{text-decoration:underline;text-underline-offset:3px}
.hw-hero-review:focus-visible{outline:2px solid #df3b26;outline-offset:3px;border-radius:6px}
.hw-h1-br{display:inline}
.hw-hero-photo{margin:0;min-width:0;width:100%}  /* the theme sizes figures to fit their content; the slider has no intrinsic width */
.hw-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.hw-hero-photo .ba-slider{box-shadow:0 4px 18px rgba(35,36,38,.12)}
.hw-hero-photo figcaption{margin-top:.6rem;font-size:.8125rem;color:#66686e;text-align:center}

/* --- calculator --- */
.hw-calc{background:#f9f9f9;scroll-margin-top:120px}
.hw-calc-card{max-width:1000px;margin:0 auto;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 4px 18px rgba(35,36,38,.08);display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden}
.hw-calc-mtotal{display:none}
.hw-calc-mtotal-info{display:flex;flex-direction:column;line-height:1.35}
.hw-calc-mtotal-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#66686e}
.hw-calc-mtotal-note{font-size:.8125rem;color:#46474d}
.hw-calc-mtotal-num{font-size:1.375rem;font-weight:700;color:#df3b26}
.hw-calc-mtotal-num.is-quoted{font-size:1rem}
.hw-calc-build{padding:clamp(1.25rem,3vw,2rem)}
.hw-section-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#46474d;margin:0 0 1rem}
.hw-calc-build .hw-section-label:not(:first-child){margin-top:1.75rem}
.hw-field{margin-bottom:1.25rem}
.hw-field label{display:block;font-weight:700;color:#232426;margin-bottom:.4rem;font-size:1rem}
.hw-field select{width:100%;max-width:340px;min-height:48px;padding:.7rem 1rem;border:1px solid #e5e5e5;border-radius:8px;background:#fff;color:#232426;font:inherit;font-size:1rem}
.hw-field select:focus-visible{outline:3px solid #df3b26;outline-offset:2px}
.hw-toggle{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-top:1px solid #f0f0f0}
.hw-toggle input{flex-shrink:0;width:22px;height:22px;margin:12px 0 0;accent-color:#df3b26;cursor:pointer}
.hw-toggle label{display:block;min-height:44px;padding-top:10px;cursor:pointer}
.hw-toggle-name{display:block;font-weight:700;color:#232426;line-height:1.4}
/* Mike asked for the light panel from the Christmas lights page: #f9f9f9 on white with
   #232426 text and the red total, rather than the black block v1.0.1 shipped. */
.hw-calc-summary{background:#f9f9f9;color:#232426;border-left:1px solid #e5e5e5;padding:clamp(1.25rem,3vw,2rem);display:flex;flex-direction:column}
.hw-summary-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#66686e}
.hw-summary-total{font-size:2.75rem;font-weight:700;line-height:1.1;margin-top:.25rem;font-family:Arvo,Georgia,serif;color:#df3b26}
.hw-summary-total.is-quoted{font-size:1.5rem;line-height:1.3}
.hw-summary-msg{font-size:.875rem;color:#46474d;line-height:1.6;margin:.75rem 0 0}
.hw-summary-lines{margin:1.25rem 0 auto;padding:1.25rem 0 0;border-top:1px solid #e5e5e5;display:flex;flex-direction:column;gap:.6rem}
.hw-line{display:flex;justify-content:space-between;gap:.75rem;font-size:.9375rem;color:#46474d}
.hw-line[hidden]{display:none}
.hw-line-amt{font-weight:700;white-space:nowrap;color:#232426}
.hw-summary-note{font-size:.8125rem;color:#66686e;line-height:1.5;margin:1.25rem 0}
.hw-cta{display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;min-height:52px;padding:.75rem 1.5rem;font-size:1rem;line-height:1.4;background:#df3b26;color:#fff!important;font-weight:700;border-radius:9999px;text-decoration:none;transition:background-color .2s ease}
.hw-cta:hover{background:#c43520;text-decoration:none}
.hw-cta:focus-visible{outline:3px solid #232426;outline-offset:2px}
.hw-cta-secondary{display:block;text-align:center;min-height:44px;padding:.75rem;margin-top:.5rem;font-weight:700;color:#232426!important;text-decoration:underline}
.hw-cta-secondary:hover{color:#df3b26!important}

/* --- price tables --- */
.hw-tables{max-width:1140px;margin:0 auto}
.hw-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:.6rem}
.hw-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;font-size:.95rem}
.hw-table caption{caption-side:top;text-align:left;font-family:Arvo,Georgia,serif;font-size:1.05rem;color:#232426;padding:0 0 .6rem}
.hw-table th{background:#f9f9f9;color:#232426;font-weight:700;text-align:left;padding:12px 16px;border-bottom:1px solid #e5e5e5;white-space:nowrap}
.hw-table td{padding:12px 16px;border-bottom:1px solid #f0f0f0;color:#46474d}
.hw-table tbody tr:last-child td,.hw-table tbody tr:last-child th{border-bottom:none}
.hw-table--price tbody td{font-weight:700;color:#232426;white-space:nowrap}
.hw-table-hint{display:none;font-size:.8rem;color:#66686e;margin:.35rem 0 0}
.hw-table-note{font-size:.85rem;color:#66686e;margin:0 0 2.5rem;line-height:1.7}
.hw-prices-bottom{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1140px;margin:1rem auto 0;align-items:start}
.hw-included-list{max-width:none}
.hw-estimate-callout{margin:0}

/* --- cards --- */
.hw-soft{background:#fff}
.hw-notremove{background:#f9f9f9}
.hw-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:1140px;margin:0 auto;align-items:stretch}
.hw-card{max-width:none!important;height:100%;margin:0;background:#f9f9f9;border-color:transparent}
.hw-notremove .hw-card{background:#fff}
/* Inside the grey band the content sits at 1060px, not the full 1140px, so the band shows
   on both sides of the white cards. Same measure as the pressure page's reviews grid,
   hot water grid and case card (Nerijus 2026-09-02). */
.hw-notremove .hw-card-grid,.hw-notremove .hw-bundles,.hw-notremove .hw-lead{max-width:1060px}
.hw-card:hover{transform:none;box-shadow:none;border-color:transparent}
.hw-card .feature-title{margin-top:.85rem}
.hw-price-tag{display:block;margin-top:.9rem;font-size:.875rem;font-weight:700;color:#c43520}
.hw-note{max-width:760px;margin:2.5rem auto 0;color:#46474d;line-height:1.7;font-size:.95rem}
.hw-bundles{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1140px;margin:2.5rem auto 0;align-items:stretch}
.hw-bundles .callout p:last-child{margin-bottom:0;margin-top:1rem}

/* --- soft wash section: two cards plus one wide card, then his method table --- */
.hw-h2--sentence{text-transform:none}
.hw-soft-prose{margin-top:0;margin-bottom:2.5rem}
.hw-soft-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;max-width:1140px;margin:0 auto;align-items:stretch}
/* The solution text is prose, not a third card: two cards above, then a centered icon and
   heading with the paragraphs at reading width (Mike, 2026-09-04: the wide left-aligned
   card looked off next to the centered cards on desktop and mobile). */
.hw-solution{max-width:760px;margin:2.5rem auto 0;text-align:center}
.hw-solution .feature-icon{margin:0 auto 1rem}
.hw-solution .hw-h3{margin:0 0 1.25rem}
.hw-solution p{text-align:left;color:#46474d;line-height:1.7;margin:0 0 .9rem}
.hw-solution p:last-child{margin-bottom:0}
.hw-method{max-width:1140px;margin:2.5rem auto 0}
.hw-table--method td:first-of-type{font-weight:700;color:#232426}
.hw-table--method th[scope=row]{background:transparent;white-space:normal}

/* --- awnings --- */
.hw-awnings{background:#fff}
.hw-awning-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);column-gap:clamp(1.5rem,4vw,3rem);row-gap:1.5rem;max-width:1140px;margin:0 auto;align-items:start}
.hw-awning-prose{grid-column:1;grid-row:1/span 2}
.hw-awning-media{grid-column:2;grid-row:1;margin:0;width:100%}
.hw-awning-media figcaption{margin-top:.65rem;font-size:.875rem;color:#66686e;text-align:center}
.hw-awnings .hw-addons{grid-column:2;grid-row:2}
.hw-awning-prose{margin:0;max-width:none}
.hw-awning-prose .hw-h3{margin-top:1.75rem}
.hw-addons{background:#f9f9f9;border:1px solid #e5e5e5;border-radius:12px;padding:clamp(1.25rem,3vw,1.75rem)}
.hw-awning-icon{color:#232426;margin-bottom:.75rem}
.hw-addon+.hw-addon{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e5e5e5}
.hw-addon-title{margin:0 0 .35rem;font-size:1.05rem}
.hw-addon-title::after{content:none}
.hw-addon-price{margin:0 0 .5rem;font-weight:700;color:#c43520;font-size:.9375rem}
.hw-addon-desc{margin:0;font-size:.9rem;color:#46474d;line-height:1.65}

/* --- bundles --- */
.hw-bundles-section{background:#f9f9f9}
.hw-bundles-section .hw-bundles,.hw-bundles-section .hw-lead,.hw-bundles-section .hw-note{max-width:1060px}
.hw-bundles-section .callout{background:#fff}

/* --- webs --- */
.hw-webs .hw-wasp{max-width:760px;margin:2rem auto 0}

/* --- before/after sliders --- */
.ba-slider{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:12px;cursor:ew-resize;touch-action:pan-y;background:#e5e5e5;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ba-slider:focus-visible{outline:3px solid #df3b26;outline-offset:3px}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.ba-img-after{clip-path:inset(0 0 0 30%)}
.ba-line{position:absolute;top:0;bottom:0;left:30%;width:3px;background:#fff;transform:translateX(-50%);z-index:4;pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.35)}
.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:9999px;background:#fff;color:#232426;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.hw-ba-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:1140px;margin:0 auto}
.hw-ba-item{margin:0}
.hw-ba-item figcaption{margin-top:.65rem;font-size:.875rem;color:#66686e;text-align:center}

/* --- north side --- */
.hw-prose{max-width:760px;margin:2.5rem auto 0}
.hw-prose p{color:#46474d;line-height:1.7;margin:0 0 1.1rem}
.hw-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1140px;margin:2.5rem auto 0;align-items:stretch}

/* --- before we arrive --- */
.hw-before-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:clamp(1.5rem,4vw,3rem);max-width:1140px;margin:0 auto;align-items:start}
.hw-wasp{margin:0}
.hw-wasp p:last-child{margin-bottom:0}

/* --- the visit --- */
.hw-visit .step-grid{margin-bottom:2.5rem}
.hw-guarantee{max-width:1140px;margin:0 auto}
.hw-guarantee p:last-child{margin-bottom:0}
/* the theme's guarantee callout paints a decorative glyph that collides with two
   paragraphs of copy; the border-left accent carries the emphasis on its own */
.hw-guarantee::before{content:none}

/* --- areas --- */
.hw-area-tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:900px}
.hw-area-tags a{text-decoration:none;box-sizing:border-box;border:1px solid #e5e5e5;border-radius:9999px;padding:8px 18px;font-size:.9rem;color:#232426;background:#fff;min-height:44px;display:inline-flex;align-items:center;transition:border-color .2s ease,color .2s ease}
.hw-area-tags a:hover{border-color:#df3b26;color:#c43520}
.hw-area-more{max-width:760px;margin:1.5rem auto 0;text-align:center;font-size:.9375rem;color:#46474d;line-height:1.7}
.hw-city-callout{max-width:900px;margin:2.5rem auto 0}

/* --- related --- */
.hw-related .link-list-item a{align-items:flex-start;gap:1rem}
.hw-related .link-list-item a::after{margin-top:.35rem}
.hw-link-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.hw-link-title{font-weight:700;color:#232426}
.hw-link-desc{font-size:.9rem;color:#66686e;line-height:1.6}
.hw-related .link-list-item a:hover .hw-link-title{color:#df3b26}

/* --- responsive --- */
@media(max-width:1023px){
  .hw-hero{grid-template-columns:1fr;gap:2rem}
  .hw-hero h1{max-width:none}
  .hw-calc-card{grid-template-columns:1fr;overflow:visible}
  .hw-calc-mtotal{display:flex;align-items:center;justify-content:space-between;gap:.75rem;position:sticky;top:155px;z-index:6;background:#f9f9f9;color:#232426;border:1px solid #e5e5e5;border-bottom:0;padding:.7rem 1.25rem;border-radius:12px 12px 0 0}
  .hw-calc-mtotal + .hw-calc-build{border-radius:0}
  .hw-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hw-prices-bottom,.hw-bundles,.hw-two-cards,.hw-before-grid{grid-template-columns:1fr}
  /* single column: his order is the intro line, the slider, the paragraphs, the price card */
  .hw-awning-body{display:flex;flex-direction:column;align-items:stretch;gap:1.75rem}
  .hw-awning-media{order:1}.hw-awning-prose{order:2}.hw-awnings .hw-addons{order:3}
}
@media(max-width:767px){
  .hw-ba-grid{grid-template-columns:1fr;gap:1.75rem}
  .hw-card-grid{grid-template-columns:1fr;display:flex;flex-direction:column}
  .hw-soft-cards{grid-template-columns:1fr}
  .hw-table{font-size:.88rem}
  .hw-table--method{min-width:620px}
  .hw-table--method th[scope=row],.hw-table--method td{white-space:normal}
  .hw-table th,.hw-table td{padding:10px 11px}
  .hw-table-hint{display:block}
  .hw-table-scroll{position:relative;background:linear-gradient(to left,rgba(249,249,249,.95),rgba(249,249,249,0) 40px) right/40px 100% no-repeat}
  .hw-faq .faq-list{padding-left:16px;padding-right:16px}
  /* the sticky mobile total must not sit on top of the summary CTAs */
  .hw-calc-summary{padding-bottom:5.5rem}
}
@media(max-width:599px){
  .hw-hero{text-align:center}
  .hw-hero h1{margin-left:auto;margin-right:auto;text-align:center}
  .hw-hero h1::after{left:50%;transform:translateX(-50%)}
  .hw-hero-price{justify-content:center;display:grid;gap:.15rem}
  .hw-hero-sep{display:none}
  .hw-hero-actions{display:grid!important;grid-template-columns:1fr}
  .hw-hero-actions .wp-block-button,.hw-hero-actions .wp-block-button__link{width:100%}
  .hw-h1-br{display:none}
  .hw-hero .trust-items{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:1.25rem;row-gap:.6rem;margin-top:1.25rem;padding-top:1rem}
  .hw-hero .trust-item,.hw-hero .hw-hero-review{font-size:.8125rem;white-space:nowrap}
  .hw-field select{max-width:none}
}