@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --green: #59d63f;
  --green-bright: #64e547;
  --blue: #1175b2;
  --navy: #08293c;
  --text: #253340;
  --muted: #62717c;
  --cream: #fafbf9;
  --mist: #f2f7f5;
  --line: #dfe9e4;
  --white: #fff;
  --shadow: 0 14px 40px rgba(9, 40, 57, .16);
  --radius: 16px;
  --font: 'Poppins', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.7; margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.skip-link { background: var(--navy); color: #fff; left: 1rem; padding: .7rem 1rem; position: absolute; top: -5rem; z-index: 100; }
.skip-link:focus { top: 1rem; }
.container { margin: 0 auto; width: min(1180px, calc(100% - 2.5rem)); }
.section { padding: clamp(4.2rem, 8vw, 7.2rem) 0; }
.section-stone { background: var(--mist); }
.section-ink { background: var(--navy); color: #fff; }
.eyebrow { color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 .6rem; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text); font-family: var(--font); line-height: 1.12; }
h1 { font-size: clamp(3.1rem, 6.8vw, 5.65rem); font-weight: 800; letter-spacing: -.055em; margin-bottom: 1rem; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.045em; margin-bottom: 1.1rem; }
h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: .55rem; }
.section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; }
.lead { color: var(--muted); font-size: 1.04rem; max-width: 60ch; }
.section-ink .lead { color: #d6e5e7; }
.text-link { color: var(--blue); font-size: .83rem; font-weight: 800; text-decoration: none; }
.text-link:hover { color: var(--green); text-decoration: underline; }

.site-header { left: 0; padding-top: 1.05rem; position: absolute; right: 0; top: 0; z-index: 30; }
.header-inner { align-items: center; background: rgba(255,255,255,.98); border-radius: 10px; box-shadow: 0 9px 30px rgba(3, 22, 33, .16); display: flex; justify-content: space-between; min-height: 68px; padding: 0 .85rem 0 1.15rem; }
.logo { align-items: center; display: inline-flex; font-weight: 800; gap: .3rem; letter-spacing: -.07em; text-decoration: none; }
.logo-mark { background: var(--green); border-radius: 10px 50% 10px 50%; display: inline-block; height: .85rem; transform: rotate(-30deg); width: .85rem; }
.logo-mark::after { display: none; }
.logo-text { color: var(--green); font-size: 1.22rem; }
.logo-text b { background: var(--blue); color: #fff; font-weight: 800; letter-spacing: -.07em; margin-left: .06rem; padding: .02rem .12rem .06rem; }
.brand-logo { display: block; height: auto; width: 154px; }
.site-nav { align-items: center; display: flex; gap: 1.15rem; }
.site-nav a { color: #2e5366; font-size: .7rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--green); }
.nav-quote { background: var(--green); border-radius: 6px; color: #fff !important; padding: .7rem 1rem; }
.nav-quote:hover { background: #46bd31; }
.nav-toggle { background: transparent; border: 0; color: var(--navy); cursor: pointer; display: none; font-size: .78rem; font-weight: 800; padding: .65rem; }

.button-row { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.button { align-items: center; background: var(--green); border: 1px solid var(--green); border-radius: 5px; color: #fff; display: inline-flex; font-size: .78rem; font-weight: 800; gap: .5rem; justify-content: center; min-height: 48px; padding: .75rem 1.1rem; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.button:hover { background: #45bf30; border-color: #45bf30; transform: translateY(-2px); }
.button-dark { background: var(--blue); border-color: var(--blue); color: #fff; }
.button-dark:hover { background: #0c6097; }
.button-outline { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.button-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

.hero { background: var(--navy); min-height: 690px; overflow: hidden; padding: 0; position: relative; }
.hero::after { background: linear-gradient(90deg, rgba(5,25,37,.86), rgba(5,25,37,.5) 55%, rgba(5,25,37,.62)); content: ''; inset: 0; position: absolute; z-index: 1; }
.hero-grid { align-items: center; display: flex; justify-content: center; min-height: 690px; position: static; z-index: auto; }
.hero-copy { max-width: 780px; padding: 9rem 1rem 4.2rem; position: relative; text-align: center; z-index: 2; }
.hero-kicker { color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; margin-bottom: 1rem; text-transform: uppercase; }
.hero-kicker::before { background: var(--green); border-radius: 99px; content: ''; display: inline-block; height: .48rem; margin-right: .45rem; width: .48rem; }
.hero h1 { color: var(--green); font-size: clamp(3.3rem, 7.2vw, 6.4rem); letter-spacing: -.065em; line-height: .94; margin: 0 auto 1.2rem; max-width: 12ch; text-transform: uppercase; }
.hero .lead { color: #fff; font-size: 1.05rem; margin: 0 auto; max-width: 49ch; }
.hero-proof { align-items: center; color: #fff; display: flex; font-size: .78rem; gap: .55rem; justify-content: center; margin: 1.25rem auto 0; }
.hero-proof strong { font-weight: 800; }
.review-stars { color: #ffd54a; font-size: 1rem; letter-spacing: .08em; }
.hero .button-row { justify-content: center; }
.hero-photo { inset: 0; min-height: auto; overflow: visible; position: absolute; z-index: 0; }
.hero-photo img { filter: saturate(.82) contrast(1.05); height: 100%; inset: 0; object-fit: cover; object-position: center 64%; position: absolute; width: 100%; }
.hero-photo::after { background: transparent; }
.hero-tag { display: none; }

.proof-rail { background: #fff; border-bottom: 1px solid var(--line); color: var(--text); }
.proof-rail .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof { border-right: 1px solid var(--line); padding: 1.35rem 2rem; text-align: center; }
.proof:last-child { border-right: 0; }
.proof strong { color: var(--blue); display: block; font-size: 1.1rem; font-weight: 800; }
.proof .proof-stars { color: #e2a600; font-size: .95rem; letter-spacing: .08em; }
.proof span { color: var(--muted); font-size: .7rem; font-weight: 600; }

.split-intro { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: .85fr 1.15fr; }
.side-note { border-left: 3px solid var(--green); color: var(--muted); font-size: .92rem; padding-left: 1rem; }
.service-list { background: transparent; border: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.service-card { background: #fff; border-radius: var(--radius); box-shadow: 0 8px 28px rgba(15, 53, 61, .08); min-height: 230px; padding: 1.5rem; position: relative; }
.service-card::after { background: var(--green); bottom: 1.3rem; content: ''; height: 3px; left: 1.5rem; position: absolute; width: 2.5rem; }
.service-card p { color: var(--muted); font-size: .84rem; padding-bottom: 1rem; }
.service-number { color: var(--blue); display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .9rem; }

.feature-grid { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
.feature-image { border-radius: var(--radius); box-shadow: var(--shadow); min-height: 480px; overflow: hidden; position: relative; }
.feature-image img { height: 100%; object-fit: cover; position: absolute; width: 100%; }
.feature-image .image-label { background: var(--green); bottom: 1rem; color: #fff; font-size: .68rem; font-weight: 800; padding: .5rem .7rem; position: absolute; right: 1rem; }
.bullet-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.bullet-list li { border-bottom: 1px solid var(--line); font-size: .88rem; padding: .86rem 0 .86rem 1.5rem; position: relative; }
.bullet-list li::before { color: var(--green); content: '✓'; font-weight: 800; left: 0; position: absolute; }

.gallery-layout { display: grid; gap: 1rem; grid-template-columns: 1.2fr .8fr; }
.gallery-stack { display: grid; gap: 1rem; grid-template-rows: 1fr 1fr; }
.gallery-item { background: var(--navy); border-radius: 10px; min-height: 240px; overflow: hidden; position: relative; }
.gallery-item.tall { min-height: 510px; }
.gallery-item img { height: 100%; object-fit: cover; position: absolute; transition: transform .5s ease; width: 100%; }
.gallery-item:hover img { transform: scale(1.035); }
.gallery-caption { background: var(--green); bottom: .75rem; color: #fff; font-size: .66rem; font-weight: 800; left: .75rem; padding: .42rem .6rem; position: absolute; }

.steps { counter-reset: step; display: grid; gap: 1rem; grid-template-columns: repeat(3,1fr); margin-top: 2.5rem; }
.step { background: rgba(255,255,255,.07); border-radius: 10px; padding: 1.45rem; }
.step::before { color: var(--green); content: '0' counter(step); counter-increment: step; display: block; font-size: .78rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .75rem; }
.step p { color: #d0e0e1; font-size: .86rem; }

.testimonials { background: transparent; border: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3,1fr); }
.quote-card { background: var(--mist); border-radius: 10px; padding: 1.5rem; }
.quote-card blockquote { color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.45; margin: 0 0 1.3rem; }
.quote-card cite { color: var(--blue); font-size: .7rem; font-style: normal; font-weight: 800; }

.page-hero { background: linear-gradient(110deg, rgba(8,41,60,.94), rgba(8,41,60,.75)), url('../assets/roof-before.jpg') center/cover; color: #fff; min-height: 415px; overflow: hidden; padding: 9.8rem 0 4.3rem; position: relative; }
.page-hero::after { display: none; }
.page-hero h1 { color: var(--green); font-size: clamp(2.9rem,5vw,5rem); line-height: .98; max-width: 15ch; position: relative; text-transform: uppercase; z-index: 1; }
.page-hero .lead { color: #fff; position: relative; z-index: 1; }
.breadcrumb { color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }

.service-detail { border-top: 1px solid var(--line); display: grid; gap: clamp(1.5rem,5vw,5rem); grid-template-columns: .68fr 1.32fr; padding: 3.7rem 0; }
.service-detail:first-of-type { border-top: 0; padding-top: 0; }
.service-detail h2 { color: var(--blue); font-size: clamp(1.8rem,3.4vw,2.8rem); }
.service-detail p { color: var(--muted); max-width: 65ch; }
.service-figure { margin: 1.65rem 0; max-width: 42rem; }
.service-figure img { border-radius: 9px; box-shadow: 0 8px 22px rgba(8,41,60,.13); width: 100%; }
.service-figure figcaption { color: var(--muted); font-size: .68rem; margin-top: .55rem; }
.price-guide { background: #eaf6fa; border-left: 4px solid var(--blue); margin-top: 1.4rem; padding: 1rem 1.1rem; }
.price-guide strong { color: var(--blue); display: block; font-size: .71rem; letter-spacing: .07em; text-transform: uppercase; }
.price-guide span { color: var(--muted); display: block; font-size: .8rem; margin-top: .2rem; }

.about-grid { align-items: start; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: 1fr 1fr; }
.pull-quote { border-left: 4px solid var(--green); color: var(--blue); font-size: clamp(1.35rem,2.6vw,2.1rem); font-weight: 700; line-height: 1.25; margin: 0 0 1.7rem; padding-left: 1rem; }
.location-ribbon { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; margin-top: 2rem; padding: 1rem 0; }
.location-ribbon span { font-size: .78rem; font-weight: 800; }
.location-ribbon span::before { color: var(--green); content: '•'; margin-right: .45rem; }

.contact-grid { display: grid; gap: clamp(2rem,7vw,7rem); grid-template-columns: .72fr 1.28fr; }
.contact-panel { background: var(--blue); border-radius: 12px; color: #fff; padding: clamp(1.8rem,4vw,3rem); }
.contact-panel h2 { color: #fff; }
.contact-panel p { color: #e1f1f5; }
.contact-detail { border-top: 1px solid rgba(255,255,255,.28); padding: 1.15rem 0; }
.contact-detail span { color: var(--green); display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-detail a { display: inline-block; font-size: 1.1rem; font-weight: 800; margin-top: .2rem; text-decoration: none; }
.quote-form { background: var(--mist); border-radius: 12px; padding: clamp(1.4rem,4vw,3rem); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .35rem; }
.field.full { grid-column: 1/-1; }
label { font-size: .72rem; font-weight: 800; }
input, select, textarea { background: #fff; border: 1px solid #d4e1dd; border-radius: 4px; color: var(--text); min-height: 47px; padding: .72rem; width: 100%; }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(89,214,63,.2); outline: none; }
.form-note { color: var(--muted); font-size: .73rem; margin-top: .9rem; }
.form-status { font-size: .82rem; font-weight: 700; margin: .8rem 0 0; min-height: 1.4em; }

.cta-strip { background: var(--green); padding: clamp(2rem,5vw,3.4rem) 0; }
.cta-strip .container { align-items: center; display: flex; gap: 2rem; justify-content: space-between; }
.cta-strip h2 { color: #fff; font-size: clamp(1.8rem,3.4vw,2.9rem); margin: 0; max-width: 20ch; }
.cta-strip .button-dark { background: var(--blue); border-color: var(--blue); }

.site-footer { background: var(--navy); color: #d7ebea; padding: 3.2rem 0 1.4rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.2fr .8fr .8fr; }
.site-footer .logo { margin-bottom: .9rem; }
.site-footer .brand-logo { width: 160px; }
.site-footer .logo-mark { background: var(--green); }
.site-footer p { color: #bdcfd1; font-size: .8rem; max-width: 36ch; }
.footer-heading { color: var(--green); font-size: .65rem; font-weight: 800; letter-spacing: .12em; margin: .3rem 0 .75rem; text-transform: uppercase; }
.footer-links { display: grid; gap: .38rem; }
.footer-links a { color: #d7ebea; font-size: .77rem; text-decoration: none; }
.footer-links a:hover { color: var(--green); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.13); color: #8aa6ac; font-size: .67rem; margin-top: 2.4rem; padding-top: 1rem; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { padding-top: .75rem; }
  .header-inner { min-height: 60px; }
  .nav-toggle { display: block; }
  .site-nav { background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 12px 24px rgba(3,22,33,.15); display: none; left: 0; padding: 1rem 1.4rem; position: absolute; right: 0; top: 60px; }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: .42rem 0; }
  .nav-quote { display: inline-block; text-align: center; }
  .hero, .hero-grid { min-height: 610px; }
  .hero-copy { padding-top: 8rem; }
  .hero-proof { flex-wrap: wrap; }
  .split-intro, .feature-grid, .about-grid, .contact-grid, .service-detail { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: repeat(2,1fr); }
  .feature-image { min-height: 390px; }
  .proof-rail .container, .steps, .testimonials { grid-template-columns: 1fr; }
  .proof { border-bottom: 1px solid var(--line); border-right: 0; }
  .proof:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 1.5rem, 1180px); }
  .logo-text { font-size: 1.08rem; }
  .hero, .hero-grid { min-height: 590px; }
  .hero h1 { font-size: clamp(3rem,14vw,4.3rem); }
  .hero-copy { padding-left: 0; padding-right: 0; }
  .hero-proof { font-size: .7rem; }
  .service-list, .gallery-layout, .form-grid { grid-template-columns: 1fr; }
  .gallery-item.tall { min-height: 320px; }
  .gallery-stack { grid-template-rows: unset; }
  .cta-strip .container { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-detail a { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Homepage conversion layout */
.hero-contact { color: #e4eeee; font-size: .76rem; margin: 1.1rem 0 0; }
.hero-contact a { color: var(--green); font-weight: 800; }
.home-section-heading { margin-bottom: 2.2rem; max-width: 52rem; }
.home-section-heading .lead { margin-bottom: 0; }
.center-actions { display: flex; justify-content: center; margin-top: 2rem; }
.before-after { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.proof-photo { background: var(--navy); border-radius: 12px; margin: 0; overflow: hidden; position: relative; }
.proof-photo img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.gutter-before-after .proof-photo img { object-position: center 55%; }
.proof-photo figcaption { align-items: center; background: #fff; color: var(--text); display: flex; font-size: .8rem; font-weight: 700; gap: .65rem; padding: .85rem 1rem; }
.proof-photo figcaption span { background: var(--green); color: #fff; font-size: .65rem; letter-spacing: .08em; padding: .25rem .42rem; text-transform: uppercase; }
.section-ink .bullet-list li { border-color: rgba(255,255,255,.18); color: #e0ecec; }
.process-section { background: var(--navy); color: #fff; }
.process-section h2 { color: #fff; }
.process-section h3 { color: #fff; }
.process-section .steps { margin-top: 1.75rem; }
.process-section .center-actions { margin-top: 2rem; }
.price-path { align-items: center; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: .85fr 1.15fr; }
.price-stack { display: grid; gap: .75rem; }
.price-signal { align-items: center; background: #fff; border-left: 5px solid var(--green); box-shadow: 0 6px 20px rgba(13,45,58,.08); display: grid; gap: .8rem; grid-template-columns: 1fr auto 1.4fr; padding: 1rem 1.15rem; }
.price-signal span { color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.price-signal strong { color: var(--text); font-size: 1.25rem; white-space: nowrap; }
.price-signal p { color: var(--muted); font-size: .76rem; margin: 0; }
.review-summary { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 2rem; grid-template-columns: .7fr 1.3fr; margin-bottom: 2rem; padding-bottom: 1.7rem; }
.review-summary > div:first-child { background: var(--mist); border-radius: 10px; padding: 1.1rem 1.2rem; }
.review-summary-stars { color: #e2a600; display: block; font-size: 1rem; letter-spacing: .08em; }
.review-summary strong { color: var(--blue); display: block; font-size: 1.2rem; margin-top: .25rem; }
.review-summary p { color: var(--muted); font-size: .78rem; margin: .2rem 0 0; }
.faq-layout { align-items: start; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: .8fr 1.2fr; }
.faq-preview { border-top: 1px solid var(--line); }
.faq-preview details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq-preview summary { color: var(--text); cursor: pointer; font-size: .91rem; font-weight: 800; list-style: none; padding-right: 2rem; position: relative; }
.faq-preview summary::-webkit-details-marker { display: none; }
.faq-preview summary::after { color: var(--green); content: '+'; font-size: 1.35rem; line-height: 1; position: absolute; right: 0; top: -.08rem; }
.faq-preview details[open] summary::after { content: '–'; }
.faq-preview p { color: var(--muted); font-size: .84rem; margin: .7rem 0 0; }
.local-proof { background: var(--blue); color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.local-proof .container { align-items: center; display: grid; gap: 2rem; grid-template-columns: 1.1fr .9fr; }
.local-proof h2 { color: #fff; margin: 0; }
.local-proof p { color: #e3f3f7; margin-bottom: 1.2rem; }
.local-proof .button { background: var(--green); border-color: var(--green); }
.local-proof .button:hover { background: #46bd31; border-color: #46bd31; }
@media (max-width: 900px) {
  .price-path, .review-summary, .faq-layout, .local-proof .container { grid-template-columns: 1fr; }
  .price-signal { grid-template-columns: 1fr auto; }
  .price-signal p { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .before-after { grid-template-columns: 1fr; }
  .price-signal { display: block; }
  .price-signal strong { display: block; margin: .25rem 0; }
  .hero-contact { font-size: .7rem; }
}

/* Animated social proof and WhatsApp action */
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.review-count { display: inline-block; font-variant-numeric: tabular-nums; min-width: 1.25em; text-align: right; }
.whatsapp-fab { align-items: center; animation: whatsapp-float 2.7s ease-in-out infinite, whatsapp-neon 1.8s ease-in-out infinite; background: #25d366; border: 2px solid #b9ffce; border-radius: 50%; bottom: 1.35rem; box-shadow: 0 0 0 0 rgba(37,211,102,.68), 0 0 20px rgba(37,211,102,.85); color: #053b1c; display: flex; height: 3.9rem; justify-content: center; position: fixed; right: 1.35rem; text-decoration: none; width: 3.9rem; z-index: 80; }
.whatsapp-fab svg { fill: #053b1c; height: 1.85rem; width: 1.85rem; }
.whatsapp-fab::after { animation: whatsapp-ripple 1.8s ease-out infinite; border: 2px solid rgba(108,255,148,.9); border-radius: 50%; content: ''; inset: -.35rem; pointer-events: none; position: absolute; }
.whatsapp-fab:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.whatsapp-tooltip { background: var(--navy); border-radius: .35rem; color: #fff; font-size: .72rem; font-weight: 800; opacity: 0; padding: .52rem .7rem; pointer-events: none; position: absolute; right: 4.8rem; transform: translateX(.4rem); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
.whatsapp-fab:hover .whatsapp-tooltip, .whatsapp-fab:focus-visible .whatsapp-tooltip { opacity: 1; transform: translateX(0); }
@keyframes whatsapp-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes whatsapp-neon { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.58), 0 0 20px rgba(37,211,102,.75); } 50% { box-shadow: 0 0 0 10px rgba(37,211,102,0), 0 0 34px rgba(108,255,148,.95); } }
@keyframes whatsapp-ripple { 0% { opacity: .9; transform: scale(.82); } 75%, 100% { opacity: 0; transform: scale(1.38); } }
@media (max-width: 560px) { .whatsapp-fab { bottom: 1rem; right: 1rem; } .whatsapp-tooltip, .hero-contact { display: none; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-fab, .whatsapp-fab::after { animation: none; } }

/* Supplied roof-cleaning projects */
.service-before-after { display: grid; gap: .85rem; grid-template-columns: 1fr 1fr; margin: 1.65rem 0; }
.service-before-after figure { margin: 0; }
.service-before-after img { aspect-ratio: 4 / 3; border-radius: 9px; box-shadow: 0 8px 22px rgba(8,41,60,.13); object-fit: cover; width: 100%; }
.service-before-after figcaption { color: var(--muted); font-size: .68rem; margin-top: .55rem; }
.service-before-after figcaption span, .roof-project-card figcaption span { background: var(--green); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .08em; margin-right: .35rem; padding: .2rem .38rem; text-transform: uppercase; }
.roof-project-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.roof-project-card { background: var(--navy); border-radius: 10px; margin: 0; min-height: 240px; overflow: hidden; position: relative; }
.roof-project-card img { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform .5s ease; width: 100%; }
.roof-project-card:hover img { transform: scale(1.035); }
.roof-project-card figcaption { background: linear-gradient(transparent, rgba(3,24,35,.88)); bottom: 0; color: #fff; font-size: .68rem; font-weight: 800; left: 0; padding: 2.5rem .85rem .8rem; position: absolute; right: 0; }
.roof-project-card--feature { grid-column: span 2; min-height: 370px; }
@media (max-width: 900px) { .roof-project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .service-before-after, .roof-project-grid { grid-template-columns: 1fr; } .roof-project-card--feature { grid-column: auto; min-height: 270px; } }


/* Jet This Way-inspired hierarchy — CleanCoat colours retained */
:root { --font: 'Manrope', Arial, sans-serif; --display: 'Barlow Condensed', Impact, sans-serif; }
body { font-family: var(--font); font-size: 15px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; }
h1 { font-weight: 900; letter-spacing: .005em; }
h1 em, h2 em { color: var(--green); font-style: italic; }
.site-nav { gap: .8rem; }
.site-nav a { font-family: var(--font); font-size: .63rem; letter-spacing: .015em; }
.nav-quote { box-shadow: 0 5px 0 rgba(7,86,126,.2); }
.button { border-radius: 3px; box-shadow: 0 4px 0 rgba(4,64,93,.18); font-family: var(--font); font-size: .72rem; letter-spacing: .02em; min-height: 50px; }
.button:hover { box-shadow: 0 1px 0 rgba(4,64,93,.18); transform: translateY(2px); }
.reference-hero { min-height: 745px; }
.reference-hero::after { background: linear-gradient(90deg, rgba(4,24,35,.95) 0%, rgba(4,24,35,.88) 47%, rgba(4,24,35,.51) 100%); }
.reference-hero-grid { align-items: center; display: grid; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: minmax(0,1.1fr) minmax(360px,.74fr); min-height: 745px; padding: 8.5rem 0 4rem; position: relative; z-index: 2; }
.reference-hero .hero-copy { max-width: 680px; padding: 0; text-align: left; }
.reference-hero h1 { color: #fff; font-size: clamp(4.1rem, 7.6vw, 7.4rem); line-height: .82; margin: 0 0 1.65rem; max-width: 9.8ch; text-transform: uppercase; }
.reference-hero h1 em { color: var(--green); display: inline-block; font-style: italic; }
.reference-hero h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--green); }
.reference-hero .lead { font-size: 1rem; line-height: 1.7; margin: 0; max-width: 53ch; }
.reference-hero .hero-kicker { color: #e8f4f3; font-size: .66rem; margin-bottom: 1.25rem; }
.reference-hero .hero-actions { justify-content: flex-start; margin-top: 1.8rem; }
.reference-hero .button-outline { border-color: rgba(255,255,255,.65); }
.hero-assurances { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.hero-assurances span { background: rgba(5,33,47,.68); border: 1px solid rgba(255,255,255,.11); border-radius: 99px; color: #fff; font-size: .64rem; font-weight: 700; padding: .4rem .7rem; }
.quote-quick-panel { background: rgba(7,37,53,.96); border: 1px solid rgba(89,214,63,.42); border-radius: 10px; box-shadow: 0 0 0 4px rgba(89,214,63,.08), 0 21px 55px rgba(0,0,0,.24); color: #fff; padding: clamp(1.4rem, 3vw, 2.25rem); }
.quote-quick-panel .panel-kicker { color: var(--green); font-size: .63rem; font-weight: 800; letter-spacing: .12em; margin-bottom: .5rem; text-transform: uppercase; }
.quote-quick-panel h2 { color: #fff; font-size: clamp(2rem,3vw,3rem); line-height: .9; margin-bottom: .8rem; text-transform: uppercase; }
.quote-quick-panel > p:not(.panel-kicker) { color: #d2e4e5; font-size: .78rem; line-height: 1.65; }
.quick-detail { align-items: center; border-top: 1px solid rgba(255,255,255,.14); display: flex; gap: .8rem; padding: .9rem 0; }
.quick-icon { align-items: center; background: rgba(89,214,63,.13); border-radius: 4px; color: var(--green); display: inline-flex; flex: 0 0 2rem; font-size: 1rem; height: 2rem; justify-content: center; }
.quick-detail strong { color: #fff; display: block; font-size: .77rem; overflow-wrap: anywhere; }
.quick-detail small { color: #b8ced1; display: block; font-size: .62rem; margin-top: .12rem; }
.quick-panel-cta { display: flex; margin-top: .75rem; width: 100%; }
.proof-rail { background: var(--navy); border-bottom: 0; color: #fff; }
.proof-rail .container { border-left: 1px solid rgba(255,255,255,.14); }
.proof { border-color: rgba(255,255,255,.14); padding: 1.55rem 1.2rem; }
.proof strong { color: var(--green); font-family: var(--display); font-size: 2.05rem; line-height: .8; text-transform: uppercase; }
.proof .proof-stars { color: #ffd54a; font-family: var(--font); font-size: 1.05rem; }
.proof span { color: #d8e5e7; font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.directory-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: 1fr .74fr; margin-bottom: 2.3rem; }
.directory-heading h2 { font-size: clamp(3rem, 5.2vw, 4.9rem); line-height: .84; margin-bottom: 0; text-transform: uppercase; }
.directory-heading .lead { margin-bottom: .3rem; }
.service-directory { background: #fff; }
.service-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.service-card.service-card--image { background: var(--navy); border-radius: 9px; box-shadow: none; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; overflow: hidden; padding: 1.25rem; text-decoration: none; }
.service-card--image::before { background: linear-gradient(180deg, rgba(3,24,35,.06), rgba(3,24,35,.95)); content: ''; inset: 0; position: absolute; z-index: 1; }
.service-card--image::after { display: none; }
.service-card--image img { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform .55s ease; width: 100%; }
.service-card--image:hover img { transform: scale(1.045); }
.service-card--image .service-number { align-items: center; background: var(--green); border-radius: 2px; color: #fff; display: inline-flex; font-family: var(--display); font-size: 1rem; height: 2rem; justify-content: center; left: 1rem; letter-spacing: .04em; position: absolute; top: 1rem; width: 2rem; z-index: 2; }
.service-card--image > div { position: relative; z-index: 2; }
.service-card--image h3 { color: #fff; font-size: 2rem; line-height: .92; margin-bottom: .55rem; text-transform: uppercase; }
.service-card--image p { color: #edf8f7; font-size: .72rem; line-height: 1.5; margin-bottom: .8rem; padding: 0; }
.service-card--image ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.service-card--image li { border: 1px solid rgba(255,255,255,.35); border-radius: 99px; color: #fff; font-size: .57rem; font-weight: 700; padding: .24rem .43rem; }
.project-showcase { align-items: center; display: grid; gap: clamp(2rem,6vw,6rem); grid-template-columns: .72fr 1.28fr; }
.project-showcase-copy h2 { font-size: clamp(3rem,4.7vw,4.5rem); line-height: .84; text-transform: uppercase; }
.project-showcase-copy .button { margin-top: .8rem; }
.process-section { background: var(--navy); }
.directory-heading--light h2, .directory-heading--light .lead { color: #fff; }
.directory-heading--light .lead { color: #d0e0e1; }
.process-section .step { border: 1px solid rgba(255,255,255,.12); border-radius: 7px; }
.process-section .step h3 { font-family: var(--display); font-size: 1.65rem; text-transform: uppercase; }
.review-summary h2 { font-size: clamp(3rem,4.7vw,4.4rem); line-height: .84; text-transform: uppercase; }
.faq-layout h2, .faq-aside h2 { font-size: clamp(3rem,4.4vw,4.3rem); line-height: .84; text-transform: uppercase; }
.faq-preview details, .faq-list details { border-color: var(--line); }
.faq-preview summary, .faq-list summary { font-family: var(--display); font-size: 1.45rem; letter-spacing: .005em; line-height: 1; text-transform: uppercase; }
.faq-preview summary::after, .faq-list summary::after { color: var(--green); font-family: var(--font); }
.faq-page-layout { align-items: start; display: grid; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: .72fr 1.28fr; }
.faq-aside { position: sticky; top: 1.5rem; }
.faq-aside p { color: var(--muted); font-size: .88rem; }
.faq-aside .text-link { display: inline-block; margin: 1rem 0 0; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.faq-list summary { color: var(--text); cursor: pointer; list-style: none; padding-right: 2rem; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: var(--green); content: '+'; font-family: var(--font); font-size: 1.4rem; line-height: 1; position: absolute; right: 0; top: 0; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list p { color: var(--muted); font-size: .86rem; margin: .85rem 0 .1rem; }
.service-detail { border-color: var(--line); }
.service-detail h2 { font-family: var(--display); font-size: clamp(2.4rem,3.5vw,3.5rem); line-height: .87; text-transform: uppercase; }
.service-detail .eyebrow { font-size: .65rem; }
.cta-strip h2, .local-proof h2 { font-family: var(--display); letter-spacing: .005em; line-height: .87; text-transform: uppercase; }
@keyframes cta-jiggle { 0%, 72%, 100% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-2px) rotate(-1.4deg); } 78% { transform: translateY(1px) rotate(1.4deg); } 81% { transform: translateY(-1px) rotate(-.7deg); } 84% { transform: translateY(0) rotate(0); } }
.button.cta-jiggle, .nav-quote.cta-jiggle { animation: cta-jiggle 7.4s ease-in-out infinite; animation-delay: var(--jiggle-delay, 0s); }
.button.cta-jiggle:hover, .nav-quote.cta-jiggle:hover, .button.cta-jiggle:focus-visible, .nav-quote.cta-jiggle:focus-visible { animation-play-state: paused; }
@media (max-width: 1050px) { .site-nav { gap: .58rem; } .site-nav a { font-size: .59rem; } .reference-hero-grid { gap: 2rem; grid-template-columns: minmax(0,1fr) minmax(320px,.72fr); } }
@media (max-width: 900px) { .reference-hero, .reference-hero-grid { min-height: auto; } .reference-hero-grid { grid-template-columns: 1fr; padding: 8rem 0 4rem; } .reference-hero .hero-copy { max-width: 43rem; } .quote-quick-panel { max-width: 39rem; } .service-grid { grid-template-columns: repeat(2,1fr); } .directory-heading, .project-showcase, .faq-page-layout { grid-template-columns: 1fr; } .faq-aside { position: static; } }
@media (max-width: 560px) { .reference-hero h1 { font-size: clamp(3.9rem,18vw,5rem); } .reference-hero h1 span { -webkit-text-stroke-width: 1px; } .reference-hero .hero-actions .button { width: 100%; } .hero-assurances { gap: .4rem; } .hero-assurances span { font-size: .56rem; } .quote-quick-panel { padding: 1.25rem; } .proof strong { font-size: 1.8rem; } .service-grid { grid-template-columns: 1fr; } .service-card.service-card--image { min-height: 310px; } .directory-heading h2, .project-showcase-copy h2, .review-summary h2, .faq-layout h2, .faq-aside h2 { font-size: 3.3rem; } }
@media (prefers-reduced-motion: reduce) { .button.cta-jiggle, .nav-quote.cta-jiggle { animation: none; } }


/* Hero copy contrast refinement */
.reference-hero::after { background: linear-gradient(90deg, rgba(4,24,35,.85) 0%, rgba(4,24,35,.75) 49%, rgba(4,24,35,.36) 100%); }
.reference-hero .hero-copy { background: linear-gradient(90deg, rgba(3,25,37,.84) 0%, rgba(3,25,37,.68) 72%, rgba(3,25,37,0) 100%); border-left: 4px solid var(--green); margin-left: -1.6rem; padding: 2.1rem 3.4rem 2.2rem 1.6rem; text-shadow: 0 2px 18px rgba(0,0,0,.62); }
.reference-hero .hero-kicker, .reference-hero .lead, .reference-hero .hero-assurances { position: relative; z-index: 1; }
.reference-hero h1 { text-shadow: 0 3px 18px rgba(0,0,0,.62); }
@media (max-width: 900px) { .reference-hero .hero-copy { margin-left: 0; max-width: 45rem; padding: 1.6rem 1.6rem 1.7rem; } }
@media (max-width: 560px) { .reference-hero .hero-copy { padding: 1.3rem 1rem 1.45rem; } }


/* Clearer lead line in the hero headline */
.reference-hero h1 .hero-title-leading { color: #fff; display: inline-block; font-family: var(--font); font-size: .54em; font-weight: 800; letter-spacing: -.045em; line-height: 1.02; text-transform: none; -webkit-text-stroke: 0; }


/* Dedicated gutter-clearance page */
.gutter-hero { background-image: linear-gradient(110deg, rgba(8,41,60,.95), rgba(8,41,60,.72)), url('../assets/gutter-after.png'); background-position: center 48%; }
.gutter-intro-grid { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1.1fr .9fr; }
.gutter-intro-grid h2, .gutter-video-heading h2 { font-size: clamp(3rem, 4.7vw, 4.5rem); line-height: .84; text-transform: uppercase; }

/* Dedicated steam and roofline service pages */
.steam-cleaning-hero { background-image: linear-gradient(110deg, rgba(8,41,60,.94), rgba(8,41,60,.62)), url('../assets/steam-cleaning-home.webp'); background-position: center; }
.fascia-soffit-hero { background-image: linear-gradient(110deg, rgba(8,41,60,.94), rgba(8,41,60,.62)), url('../assets/fascia-soffit-action.webp'); background-position: center; }
.gutter-trust-row { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 2rem; padding-top: 1rem; }
.gutter-trust-row span { color: var(--muted); font-size: .67rem; font-weight: 700; }
.gutter-trust-row strong { color: var(--blue); display: block; font-family: var(--display); font-size: 1.4rem; line-height: .9; text-transform: uppercase; }
.gutter-quote-card { background: var(--navy); border: 1px solid rgba(89,214,63,.35); border-radius: 10px; box-shadow: var(--shadow); color: #fff; padding: clamp(1.5rem, 4vw, 2.7rem); }
.gutter-quote-card h2 { color: #fff; font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: .87; text-transform: uppercase; }
.gutter-quote-card > p:not(.eyebrow) { color: #d6e5e7; font-size: .84rem; }
.gutter-quote-card .button { margin-top: .55rem; width: 100%; }
.gutter-quote-card .text-link { color: var(--green); display: inline-block; margin-top: 1rem; }
.gutter-video-section .lead { color: #d5e5e7; }
.gutter-video-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: 1fr .8fr; margin-bottom: 2rem; }
.gutter-video-layout { align-items: center; display: grid; gap: clamp(1.5rem, 5vw, 5rem); grid-template-columns: 1.2fr .8fr; }
.gutter-video-frame { background: #041c29; border: 1px solid rgba(89,214,63,.4); border-radius: 10px; box-shadow: 0 16px 42px rgba(0,0,0,.32); overflow: hidden; }
.gutter-video-frame video { aspect-ratio: 1 / 1; background: #041c29; display: block; height: auto; object-fit: contain; width: 100%; }
.gutter-process-steps { display: grid; gap: .8rem; }
.gutter-process-steps article { align-items: start; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: .8rem; grid-template-columns: 2rem 1fr; padding: 1rem 0 0; }
.gutter-process-steps article:first-child { border-top: 0; padding-top: 0; }
.gutter-process-steps span { color: var(--green); font-family: var(--display); font-size: 1.55rem; font-weight: 800; line-height: .8; }
.gutter-process-steps h3 { color: #fff; font-size: 1.55rem; line-height: .9; margin-bottom: .28rem; text-transform: uppercase; }
.gutter-process-steps p { color: #d5e5e7; font-size: .76rem; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .gutter-intro-grid, .gutter-video-heading, .gutter-video-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gutter-trust-row { gap: .75rem; } .gutter-video-frame { border-radius: 7px; } }


/* White-label gutter quote calculator */
.quote-calculator-section { background: var(--mist); }
.quote-calculator-layout { align-items: start; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: .72fr 1.28fr; }
.quote-calculator-copy { position: sticky; top: 1.5rem; }
.quote-calculator-copy h2 { font-size: clamp(3rem, 4.5vw, 4.35rem); line-height: .84; text-transform: uppercase; }
.quote-calculator-copy .lead { margin-bottom: .85rem; }
.quote-calculator-copy .button { margin-top: .65rem; }
.quote-calculator-embed { background: #fff; border: 1px solid rgba(7,116,182,.16); border-radius: 10px; box-shadow: 0 14px 38px rgba(8,41,60,.12); min-height: 720px; overflow: hidden; padding: clamp(.35rem, 1.1vw, .8rem); }
.quote-calculator-embed iframe { border: 0; display: block; min-height: 690px; width: 100%; }
.quote-calculator-embed noscript { color: var(--muted); display: block; font-size: .85rem; padding: 1.5rem; }
.quote-calculator-embed noscript a { color: var(--blue); font-weight: 800; }
@media (max-width: 900px) { .quote-calculator-layout { grid-template-columns: 1fr; } .quote-calculator-copy { position: static; } }
@media (max-width: 560px) { .quote-calculator-embed { border-radius: 7px; min-height: 680px; padding: .35rem; } .quote-calculator-embed iframe { min-height: 650px; } }


/* Converted schoolhouse roof-cleaning project */
.schoolhouse-case-study { background: var(--navy); }
.schoolhouse-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: .9fr 1.1fr; margin-bottom: 2.3rem; }
.schoolhouse-heading h2 { color: #fff; font-size: clamp(3.2rem, 5.2vw, 5.2rem); line-height: .83; margin: 0; text-transform: uppercase; }
.schoolhouse-heading .lead { color: #e7f2f2; margin: 0 0 .85rem; }
.schoolhouse-heading p:not(.eyebrow):not(.lead) { color: #c7dcdf; font-size: .85rem; margin: 0; }
.schoolhouse-before-after { align-items: stretch; display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: .72fr 1.28fr; }
.schoolhouse-project-photo { margin: 0; }
.schoolhouse-media { align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; display: flex; height: clamp(430px, 48vw, 640px); justify-content: center; overflow: hidden; }
.schoolhouse-media--before { background: #050505; }
.schoolhouse-media--after { background: #edf2f3; }
.schoolhouse-media img { display: block; height: 100%; object-fit: contain; width: 100%; }
.schoolhouse-project-photo figcaption { color: #d8e8e9; font-size: .75rem; line-height: 1.5; margin-top: .7rem; }
.schoolhouse-project-photo figcaption span { background: var(--green); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .08em; margin-right: .35rem; padding: .2rem .38rem; text-transform: uppercase; }
@media (max-width: 900px) { .schoolhouse-heading, .schoolhouse-before-after { grid-template-columns: 1fr; } .schoolhouse-media { height: clamp(420px, 105vw, 620px); } }
@media (max-width: 560px) { .schoolhouse-media { border-radius: 7px; height: clamp(390px, 125vw, 560px); } }




/* Dedicated service routes, proof galleries and delayed video heroes */
.service-page-hero { min-height: 500px; }
.service-page-hero .button-outline { border-color: rgba(255,255,255,.7); }
.roof-cleaning-hero { background-image: linear-gradient(110deg, rgba(8,41,60,.95), rgba(8,41,60,.52)), url('../assets/roof-cleaning-hero.webp'); background-position: center 56%; }
.soft-washing-hero { background-image: linear-gradient(110deg, rgba(8,41,60,.94), rgba(8,41,60,.57)), url('../assets/softwash-wall-after.webp'); background-position: center 48%; }
.video-hero { background-color: var(--navy); background-position: center; background-size: cover; isolation: isolate; }
.gutter-hero.video-hero { background-image: url('../assets/gutter-hero-poster.webp'); }
.pressure-washing-hero { background-image: url('../assets/pressure-washing-hero-poster.webp'); }
.video-hero::before { background: linear-gradient(110deg, rgba(8,41,60,.96), rgba(8,41,60,.62)); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.gutter-hero.video-hero::before { background: linear-gradient(110deg, rgba(8,41,60,.86), rgba(8,41,60,.45)); }
.video-hero .container { position: relative; z-index: 2; }
.service-hero-video { height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transition: opacity .6s ease; width: 100%; z-index: 0; }
.service-hero-video.is-playing { opacity: 1; }
.service-page-intro { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1.12fr .88fr; }
.service-page-intro h2, .project-case-heading h2 { font-size: clamp(3rem, 4.8vw, 4.65rem); line-height: .84; text-transform: uppercase; }
.service-page-note { background: var(--navy); border-radius: 10px; box-shadow: var(--shadow); color: #fff; padding: clamp(1.5rem, 4vw, 2.3rem); }
.service-page-note h3 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: .9; text-transform: uppercase; }
.service-page-note p:not(.eyebrow) { color: #d7e7e8; font-size: .84rem; }
.service-page-note .text-link { color: var(--green); }
.service-steps { background: var(--navy); border-radius: 10px; margin-top: 0; padding: 1rem; }
.service-steps .step { border: 1px solid rgba(255,255,255,.12); }
.service-steps .step h3 { color: #fff; font-family: var(--display); font-size: 1.7rem; text-transform: uppercase; }
.service-steps .step p { color: #d0e0e1; font-size: .8rem; }
.service-proof-pair .proof-photo img { object-position: center; }
.project-case-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: .9fr 1.1fr; margin-bottom: 2.2rem; }
.project-case-heading .lead { margin: 0; }
.project-proof-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.project-proof-grid figure { background: #fff; border-radius: 10px; box-shadow: 0 8px 25px rgba(8,41,60,.1); margin: 0; overflow: hidden; }
.project-proof-grid img { display: block; height: auto; object-fit: contain; width: 100%; }
.project-proof-grid figcaption { color: var(--muted); font-size: .72rem; font-weight: 800; padding: .75rem .85rem; }
.softwash-pair { align-items: start; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.softwash-pair figure { background: #fff; border-radius: 10px; box-shadow: 0 8px 25px rgba(8,41,60,.1); margin: 0; overflow: hidden; }
.softwash-pair img { display: block; height: auto; object-fit: contain; width: 100%; }
.softwash-pair figcaption { align-items: center; color: var(--muted); display: flex; font-size: .72rem; font-weight: 800; gap: .45rem; padding: .75rem .85rem; }
.softwash-pair figcaption span { background: var(--green); color: #fff; font-size: .58rem; letter-spacing: .08em; padding: .22rem .4rem; text-transform: uppercase; }
.softwash-case-grid { display: grid; gap: 2.5rem; }
.softwash-case-grid > article { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.softwash-case-grid h3 { color: var(--blue); font-size: clamp(2rem, 3vw, 2.9rem); line-height: .9; text-transform: uppercase; }
.gutter-action-section { background: #fff; }
.gutter-action-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: .9fr 1.1fr; margin-bottom: 2rem; }
.gutter-action-heading h2 { font-size: clamp(3rem, 4.8vw, 4.65rem); line-height: .84; text-transform: uppercase; }
.gutter-action-heading .lead { margin: 0; }
.gutter-action-grid { column-count: 3; column-gap: 1rem; }
.gutter-action-card { background: var(--mist); border-radius: 10px; break-inside: avoid; box-shadow: 0 7px 22px rgba(8,41,60,.08); margin: 0 0 1rem; overflow: hidden; }
.gutter-action-card img { display: block; height: auto; object-fit: contain; width: 100%; }
.gutter-action-card figcaption { color: var(--muted); font-size: .7rem; font-weight: 800; padding: .7rem .8rem; }
.gallery-case-study .project-proof-grid { margin-top: 0; }
.gallery-case-study .softwash-pair { margin-top: 0; }
.gallery-case-study h2 { font-size: clamp(3rem, 4.8vw, 4.65rem); line-height: .84; text-transform: uppercase; }
@media (max-width: 900px) { .service-page-intro, .project-case-heading, .gutter-action-heading { grid-template-columns: 1fr; } .project-proof-grid { grid-template-columns: 1fr 1fr; } .gutter-action-grid { column-count: 2; } }
@media (max-width: 560px) { .service-page-hero { min-height: 455px; } .softwash-pair, .project-proof-grid { grid-template-columns: 1fr; } .gutter-action-grid { column-count: 1; } .service-page-note { padding: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .service-hero-video { display: none; } }

/* Full-frame owner-supplied service proof */
.service-card--driveway img,
.service-card--gutter img,
.service-card--steam img,
.service-card--pressure img,
.service-card--fascia img { background: #08293c; object-fit: contain; }
.gallery-item--driveway img { background: #08293c; object-fit: contain; }

.service-card--softwash .service-card-compare { display: grid; grid-template-columns: 1fr 1fr; inset: 0; position: absolute; z-index: 0; }
.service-card--softwash .service-card-compare img { background: #08293c; display: block; height: 100%; inset: auto; object-fit: contain; position: relative; width: 100%; }
.service-softwash-pair { margin: 1.65rem 0; max-width: 48rem; }

/* Gutter customer-review spotlight */
.gutter-review-section { background: #eef7f4; overflow: hidden; }
.gutter-review-layout { align-items: center; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: .82fr 1.18fr; }
.gutter-review-intro h2 { font-size: clamp(3rem, 4.7vw, 4.65rem); line-height: .84; text-transform: uppercase; }
.gutter-review-highlights { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.gutter-review-highlights span { border: 1px solid rgba(17,117,178,.28); border-radius: 99px; color: var(--blue); font-size: .65rem; font-weight: 800; padding: .38rem .62rem; }
.gutter-review-card { background: #fff; border: 1px solid rgba(17,117,178,.15); border-radius: 13px; box-shadow: 0 18px 42px rgba(8,41,60,.14); margin: 0; padding: clamp(1.4rem, 3.6vw, 2.7rem); position: relative; }
.gutter-review-card::before { color: rgba(89,214,63,.24); content: '“'; font-family: Georgia, serif; font-size: 10rem; font-weight: 700; left: 1.1rem; line-height: .65; position: absolute; top: 1.3rem; }
.gutter-review-meta { align-items: center; display: flex; gap: .8rem; justify-content: space-between; position: relative; z-index: 1; }
.gutter-review-platform { color: var(--blue); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gutter-review-stars { color: #f2b01e; font-size: 1.05rem; letter-spacing: .1em; white-space: nowrap; }
.gutter-review-card blockquote { margin: 1.55rem 0 1.7rem; position: relative; z-index: 1; }
.gutter-review-card blockquote p { color: var(--text); font-size: clamp(.98rem, 1.55vw, 1.18rem); font-weight: 600; line-height: 1.65; margin: 0; }
.gutter-review-author { align-items: center; border-top: 1px solid var(--line); display: flex; gap: .75rem; padding-top: 1rem; position: relative; z-index: 1; }
.gutter-review-avatar { align-items: center; background: var(--green); border-radius: 50%; color: #fff; display: inline-flex; font-family: var(--display); font-size: 1.5rem; font-weight: 800; height: 2.65rem; justify-content: center; width: 2.65rem; }
.gutter-review-author strong, .gutter-review-author span:not(.gutter-review-avatar) { display: block; }
.gutter-review-author strong { color: var(--navy); font-size: .85rem; }
.gutter-review-author span:not(.gutter-review-avatar) { color: var(--muted); font-size: .67rem; margin-top: .05rem; }
@media (max-width: 900px) { .gutter-review-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gutter-review-card { border-radius: 9px; padding: 1.3rem; } .gutter-review-meta { align-items: flex-start; flex-direction: column; gap: .35rem; } .gutter-review-card blockquote { margin-top: 1.25rem; } }

/* Supplied full-frame gutter-vac hero photo */
.gutter-hero { background-color: var(--navy); background-image: url('../assets/gutter-vac-front-work.webp'); background-position: calc(100% - clamp(1rem, 4vw, 4.5rem)) center; background-repeat: no-repeat; background-size: auto 100%; isolation: isolate; }
.gutter-hero::after { background: linear-gradient(90deg, rgba(8,41,60,.99) 0%, rgba(8,41,60,.94) 46%, rgba(8,41,60,.36) 100%); content: ''; display: block; inset: 0; pointer-events: none; position: absolute; z-index: 0; }
.gutter-hero .container { position: relative; z-index: 1; }
@media (max-width: 900px) { .gutter-hero { background-position: center bottom; background-size: auto 58%; } .gutter-hero::after { background: linear-gradient(180deg, rgba(8,41,60,.99) 0%, rgba(8,41,60,.92) 58%, rgba(8,41,60,.38) 100%); } }

/* Owner led team profile sections */
.team-teaser { background: var(--cream); }
.team-teaser-grid { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: .78fr 1.22fr; }
.team-teaser-cards { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 26px rgba(8,41,60,.09); overflow: hidden; }
.team-card-photo, .team-profile-photo { align-items: center; background: #e8f0ed; display: flex; justify-content: center; margin: 0; overflow: hidden; }
.team-card-photo { aspect-ratio: 4 / 5; }
.team-card-photo img, .team-profile-photo img { height: 100%; object-fit: contain; width: 100%; }
.team-card > div { padding: 1rem 1rem 1.1rem; }
.team-card h3 { color: var(--navy); font-size: 1.35rem; margin-bottom: .22rem; text-transform: uppercase; }
.team-card p:last-child { color: var(--muted); font-size: .78rem; line-height: 1.45; margin: 0; }
.team-role { color: var(--green); font-size: .67rem; font-weight: 800; letter-spacing: .11em; margin: 0 0 .35rem; text-transform: uppercase; }
.team-teaser .button-row { position: relative; z-index: 4; }
.team-teaser .button { pointer-events: auto; position: relative; }
.about-team-hero { background: linear-gradient(125deg, #08293c 0%, #0c4761 58%, #1175b2 130%); }
.about-team-intro { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: .85fr 1.15fr; }
.team-section-heading { margin-bottom: 2.25rem; max-width: 44rem; }
.team-profile-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-profile { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(8,41,60,.1); overflow: hidden; }
.team-profile-photo { aspect-ratio: 4 / 5; }
.team-profile-content { padding: clamp(1.35rem, 3vw, 2rem); }
.team-profile-content h3 { color: var(--navy); font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: 1rem; text-transform: uppercase; }
.team-profile-content p:not(.team-role) { color: var(--muted); font-size: .9rem; }
.team-promise-section { background: var(--navy); color: var(--white); }
.team-promise-grid { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: .85fr 1.15fr; }
.team-promise-section h2 { color: var(--white); }
.team-promise-section .lead, .team-promise-section p:not(.eyebrow) { color: #d9e8e9; }
.team-promise-section .button-outline { border-color: rgba(255,255,255,.75); color: #fff; }
@media (max-width: 900px) { .team-teaser-grid, .about-team-intro, .team-promise-grid { grid-template-columns: 1fr; } .team-teaser-cards { max-width: 48rem; } }
@media (max-width: 560px) { .team-teaser-cards, .team-profile-grid { grid-template-columns: 1fr; } .team-card { display: grid; grid-template-columns: .72fr 1.28fr; } .team-card-photo { aspect-ratio: auto; min-height: 180px; } .team-card > div { align-self: center; } }

/* Green animated Google-review proof in the homepage statistics rail */
.review-count { color: var(--green); font-weight: inherit; }
.proof .review-count { color: var(--green); font-family: inherit; font-size: inherit; line-height: inherit; }

/* Keep the owners visible at the start of the About story */
.about-hero-grid { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); }
.about-hero-copy { max-width: 43rem; }
.about-hero-headshots { align-items: end; display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-hero-headshot { background: rgba(255,255,255,.95); border: 1px solid rgba(141,255,90,.55); border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,.2); margin: 0; overflow: hidden; }
.about-hero-headshot img { aspect-ratio: 3 / 4; background: #e8f0ed; display: block; height: auto; object-fit: contain; width: 100%; }
.about-hero-headshot figcaption { background: #fff; color: var(--navy); display: grid; gap: .12rem; padding: .75rem .85rem; }
.about-hero-headshot strong { color: var(--green); font-family: var(--display); font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; }
.about-hero-headshot span { color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) { .about-hero-grid { grid-template-columns: 1fr; } .about-hero-headshots { max-width: 38rem; } }

/* Local service focus: one useful location pairing per service, not a keyword wall */
.home-seo-heading { font-size: clamp(3.7rem, 4.7vw, 4.6rem) !important; line-height: .88 !important; max-width: 100% !important; }
.local-service-focus { background: var(--mist); }
.local-service-focus-intro { border-bottom: 1px solid var(--line); margin-bottom: 2.2rem; max-width: 52rem; padding-bottom: 1.35rem; }
.local-service-focus-intro .lead { margin: 0; }
.local-service-focus-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.local-service-focus-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 22px rgba(8,41,60,.06); display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.local-service-focus-card figure { background: #eaf2f0; margin: 0; min-height: 220px; }
.local-service-focus-card figure img { display: block; height: 100%; object-fit: contain; width: 100%; }
.local-service-focus-card > div { display: flex; flex-direction: column; padding: 1.25rem; }
.local-service-focus-card .eyebrow { font-size: .6rem; margin-bottom: .45rem; }
.local-service-focus-card h2 { color: var(--navy); font-size: clamp(1.75rem, 2.6vw, 2.3rem); line-height: .92; margin-bottom: .8rem; text-transform: uppercase; }
.local-service-focus-card p:not(.eyebrow) { color: var(--muted); font-size: .78rem; line-height: 1.6; margin-bottom: 1rem; }
.local-service-focus-card .text-link { margin-top: auto; }
@media (max-width: 900px) { .local-service-focus-grid { grid-template-columns: 1fr; } .local-service-focus-card { grid-template-columns: minmax(180px, .65fr) 1.35fr; grid-template-rows: 1fr; } .local-service-focus-card figure { min-height: 100%; } }
@media (max-width: 560px) { .home-seo-heading { font-size: clamp(3.05rem, 13vw, 3.7rem) !important; } .local-service-focus-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .local-service-focus-card figure { min-height: 235px; } }

/* Preserve the full supplied pressure-washing action image in its final feature panel */
.feature-image--pressure-action { background: #061f2f; }
.feature-image--pressure-action img { object-fit: contain; }

/* Direct owner-story destination for the homepage CTA */
#our-story { scroll-margin-top: 6.5rem; }
#our-story .team-section-heading .lead { margin: .8rem auto 0; max-width: 62ch; }

/* Roof access, safety and equipment proof */
.roof-safety-grid,
.roof-equipment-grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.roof-safety-copy h2,
.roof-equipment-copy h2 {
  color: #fff;
  font-size: clamp(3rem, 4.9vw, 4.7rem);
  line-height: .84;
  text-transform: uppercase;
}
.roof-equipment-copy h2 { color: var(--text); }
.roof-safety-copy .lead { color: #d5e5e7; }
.roof-safety-list {
  display: grid;
  gap: .8rem;
  list-style: none;
  margin: 1.65rem 0 1.8rem;
  padding: 0;
}
.roof-safety-list li {
  border-top: 1px solid rgba(255,255,255,.18);
  color: #e4f0ef;
  font-size: .8rem;
  font-weight: 700;
  padding: .8rem 0 0 1.45rem;
  position: relative;
}
.roof-safety-list li::before {
  color: var(--green);
  content: '✓';
  font-weight: 900;
  left: 0;
  position: absolute;
}
.roof-training-badges {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.roof-training-badge {
  align-items: center;
  background: #fff;
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: .65rem;
  grid-template-columns: 68px 1fr;
  min-height: 84px;
  padding: .6rem .7rem;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.roof-training-badge:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: translateY(-2px);
}
.roof-training-badge img {
  height: 42px;
  object-fit: contain;
  width: 68px;
}
.roof-training-badge strong,
.roof-training-badge small { display: block; }
.roof-training-badge strong { color: var(--blue); font-size: .72rem; font-weight: 800; }
.roof-training-badge small { color: var(--muted); font-size: .58rem; line-height: 1.35; margin-top: .12rem; }
.roof-safety-photo,
.roof-equipment-photo {
  background: #031d2c;
  border: 1px solid rgba(89,214,63,.36);
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin: 0;
  overflow: hidden;
}
.roof-safety-photo img,
.roof-equipment-photo img {
  display: block;
  height: clamp(420px, 48vw, 640px);
  object-fit: contain;
  width: 100%;
}
.roof-equipment-photo { background: var(--navy); border-color: var(--line); }
.roof-equipment-photo img { height: auto; max-height: 640px; }
.roof-safety-photo figcaption,
.roof-equipment-photo figcaption {
  background: rgba(3,25,37,.92);
  color: #e7f1f0;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .72rem .85rem;
  text-transform: uppercase;
}
.roof-equipment-photo figcaption { background: var(--navy); }
.roof-equipment-section { background: #fff; }
.roof-equipment-copy .lead { color: var(--muted); }
@media (max-width: 900px) {
  .roof-safety-grid,
  .roof-equipment-grid { grid-template-columns: 1fr; }
  .roof-equipment-photo { order: 2; }
}
@media (max-width: 560px) {
  .roof-training-badges { grid-template-columns: 1fr; }
  .roof-safety-photo img { height: 440px; }
}

/* Evidence-led local service area pages */
.local-page-hero { background-position: center; }
.areas-hero { background-image: linear-gradient(110deg, rgba(8,41,60,.94), rgba(8,41,60,.68)), url('../assets/driveway-feature.webp'); }
.local-page-intro { align-items: start; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
.local-page-intro h2, .local-proof-layout h2, .local-scope-grid h2 { font-size: clamp(2.8rem, 4.8vw, 4.7rem); line-height: .84; text-transform: uppercase; }
.local-page-intro > div > p:not(.eyebrow), .local-page-note p, .local-proof-layout p, .local-scope-grid p { color: var(--muted); }
.local-page-note { background: var(--mist); border-left: 4px solid var(--green); border-radius: 0 9px 9px 0; padding: 1.35rem 1.45rem; }
.local-page-note h3 { color: var(--blue); font-size: 1.65rem; text-transform: uppercase; }
.local-proof-layout { align-items: center; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.local-proof-image { background: var(--navy); border-radius: 10px; margin: 0; overflow: hidden; }
.local-proof-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.local-proof-image figcaption { color: #d9e8ea; font-size: .72rem; line-height: 1.5; padding: .8rem 1rem; }
.local-scope-grid { align-items: start; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); }
.local-scope-grid .lead { color: #d6e5e7; }
.local-checklist { border: 1px solid rgba(255,255,255,.17); border-radius: 9px; padding: 1.4rem; }
.local-checklist h3 { color: var(--green); font-size: 1.55rem; text-transform: uppercase; }
.local-checklist ul { list-style: none; margin: 0; padding: 0; }
.local-checklist li { border-top: 1px solid rgba(255,255,255,.14); color: #dce9eb; font-size: .84rem; padding: .8rem 0 .8rem 1.3rem; position: relative; }
.local-checklist li::before { color: var(--green); content: '✓'; font-weight: 800; left: 0; position: absolute; }
.local-service-grid, .area-overview-grid, .local-hub-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.local-service-card { background: var(--navy); border-radius: 9px; color: #fff; min-height: 285px; overflow: hidden; padding: 1.2rem; position: relative; text-decoration: none; }
.local-service-card::after { background: linear-gradient(180deg, rgba(4,24,35,.05), rgba(4,24,35,.92)); content: ''; inset: 0; position: absolute; }
.local-service-card img { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform .45s ease; width: 100%; }
.local-service-card:hover img { transform: scale(1.04); }
.local-service-card span, .local-service-card h3, .local-service-card p { position: relative; z-index: 1; }
.local-service-card span { color: var(--green); display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.local-service-card h3 { color: #fff; font-size: 2rem; line-height: .88; margin: 4.8rem 0 .55rem; text-transform: uppercase; }
.local-service-card p { color: #e6f0f1; font-size: .74rem; line-height: 1.5; margin: 0; }
.area-overview-card { background: #fff; border-top: 4px solid var(--green); box-shadow: 0 8px 24px rgba(8,41,60,.08); padding: 1.5rem; }
.area-overview-card h2 { color: var(--blue); font-size: clamp(2.4rem, 3.5vw, 3.4rem); line-height: .86; text-transform: uppercase; }
.area-overview-card > p:not(.eyebrow) { color: var(--muted); font-size: .84rem; }
.area-overview-links { display: grid; gap: .55rem; margin-top: 1.2rem; }
.area-overview-links a { border-top: 1px solid var(--line); color: var(--blue); font-size: .77rem; font-weight: 800; padding-top: .55rem; text-decoration: none; }
.area-overview-links a:hover { color: var(--green); }
.local-hub-section { background: #fff; }
.local-hub-link { background: var(--mist); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: .45rem; padding: 1.25rem; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.local-hub-link:hover { border-color: var(--green); transform: translateY(-3px); }
.local-hub-link span { color: var(--green); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.local-hub-link strong { color: var(--blue); font-family: var(--display); font-size: 1.65rem; line-height: .9; text-transform: uppercase; }
.local-hub-link small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.local-hub-note { color: var(--muted); font-size: .76rem; margin: 1.1rem 0 0; }
@media (max-width: 900px) { .local-page-intro, .local-proof-layout, .local-scope-grid { grid-template-columns: 1fr; } .local-service-grid, .area-overview-grid, .local-hub-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .local-service-grid, .area-overview-grid, .local-hub-grid { grid-template-columns: 1fr; } .local-service-card { min-height: 250px; } .local-page-intro h2, .local-proof-layout h2, .local-scope-grid h2 { font-size: 3.15rem; } }

/* Pressure-washing hero: preserve the supplied portrait video without cropping it to landscape */
.pressure-washing-hero.video-hero {
  background-image: linear-gradient(110deg, #08293c 0%, #0a3148 58%, #08293c 100%);
}
.pressure-washing-hero.video-hero::before {
  background: linear-gradient(100deg, rgba(8,41,60,.08), rgba(8,41,60,.12) 48%, rgba(8,41,60,.42));
}
.pressure-washing-hero .service-hero-video {
  bottom: 1.5rem;
  height: calc(100% - 3rem);
  inset: auto 5vw 1.5rem auto;
  object-fit: contain;
  transform: none;
  width: min(32vw, 380px);
}
@media (max-width: 900px) {
  .pressure-washing-hero .service-hero-video {
    right: 2.25rem;
    width: min(44vw, 330px);
  }
}
@media (max-width: 560px) {
  .pressure-washing-hero .service-hero-video {
    bottom: 1rem;
    height: calc(100% - 2rem);
    right: .75rem;
    width: min(54vw, 255px);
  }
}

/* Mobile readability: add four CSS pixels to body and intentionally compact supporting type. */
@media (max-width: 900px) {
  body { font-size: 19px; }

  .site-nav { padding: 1.2rem 1.4rem 1.4rem; }
  .site-nav a { font-size: calc(.59rem + 4px); padding: .62rem 0; }
  .nav-toggle { font-size: calc(.78rem + 4px); }
  .nav-quote { font-size: calc(.59rem + 4px); min-height: 54px; padding: .85rem 1rem; }
  .button { font-size: calc(.72rem + 4px); min-height: 54px; padding: .82rem 1.15rem; }

  .lead, .reference-hero .lead { font-size: calc(1rem + 4px); }
  .eyebrow, .hero-kicker, .reference-hero .hero-kicker, .breadcrumb,
  .service-number, .proof span, .hero-proof, .hero-assurances span,
  .quote-quick-panel .panel-kicker, .quick-detail small, .footer-heading,
  .contact-detail span, label, .local-service-card span, .local-hub-link span {
    font-size: calc(.65rem + 4px);
  }

  .text-link, .side-note, .service-card p, .bullet-list li, .step p,
  .quote-card blockquote, .quote-card cite, .service-figure figcaption,
  .price-guide span, .location-ribbon span, .form-note, .form-status,
  .site-footer p, .footer-links a, .footer-bottom, .hero-contact,
  .proof-photo figcaption, .price-signal p, .review-summary p,
  .faq-preview p, .faq-list p, .faq-aside p, .service-card--image p,
  .gutter-quote-card > p:not(.eyebrow), .gutter-process-steps p,
  .schoolhouse-heading p:not(.eyebrow):not(.lead), .service-page-note p:not(.eyebrow),
  .service-steps .step p, .team-card p:last-child, .team-profile-content p:not(.team-role),
  .local-page-intro > div > p:not(.eyebrow), .local-page-note p,
  .local-proof-layout p, .local-scope-grid p, .local-checklist li,
  .local-service-card p, .area-overview-card > p:not(.eyebrow),
  .area-overview-links a, .local-hub-link small, .local-hub-note {
    font-size: calc(.8rem + 4px);
  }
}

/* GA4 visitor choice */
.analytics-consent { background: #fff; border: 1px solid rgba(17,117,178,.24); border-radius: 10px; bottom: 1.15rem; box-shadow: 0 18px 48px rgba(3,24,35,.27); color: var(--text); left: 1.15rem; max-width: min(31rem, calc(100% - 2.3rem)); opacity: 0; padding: 1.15rem 1.2rem; position: fixed; transform: translateY(1rem); transition: opacity .18s ease, transform .18s ease; z-index: 100; }
.analytics-consent.is-visible { opacity: 1; transform: translateY(0); }
.analytics-consent__eyebrow { color: var(--blue); font-size: .65rem; font-weight: 800; letter-spacing: .1em; margin: 0 0 .22rem; text-transform: uppercase; }
.analytics-consent h2 { color: var(--navy); font-family: var(--display); font-size: 1.55rem; letter-spacing: 0; line-height: .95; margin: 0 0 .55rem; text-transform: uppercase; }
.analytics-consent__copy > p:last-child { color: var(--muted); font-size: .78rem; line-height: 1.55; margin: 0; }
.analytics-consent__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }
.analytics-consent button { border-radius: 4px; cursor: pointer; font-family: var(--font); font-size: .71rem; font-weight: 800; min-height: 39px; padding: .5rem .72rem; }
.analytics-consent__accept { background: var(--green); border: 1px solid var(--green); color: #fff; }
.analytics-consent__accept:hover { background: #45bf30; border-color: #45bf30; }
.analytics-consent__reject { background: #fff; border: 1px solid #b7c9cf; color: var(--navy); }
.analytics-consent__reject:hover { border-color: var(--blue); color: var(--blue); }
.analytics-settings-trigger { background: transparent; border: 0; color: #8aa6ac; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.analytics-settings-trigger:hover, .analytics-settings-trigger:focus-visible { color: var(--green); }
.analytics-consent button:focus-visible, .analytics-settings-trigger:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (max-width: 560px) { .analytics-consent { bottom: 5.75rem; left: .75rem; max-width: calc(100% - 1.5rem); padding: 1rem; } .analytics-consent__actions { display: grid; grid-template-columns: 1fr 1fr; } .analytics-consent button { min-height: 46px; } }