/* Double Take Window Cleaning — site styles.
   Colors, type and radius come from the Double Take design system tokens. */

:root {
  --brand-mint: #43f3d1;
  --brand-mint-deep: #64cdb5;
  --on-mint: #000001;
  --ink: #0d0e16;
  --ink-body: #1e2028;
  --graphite: #373942;
  --muted: #62646e;
  --surface: #ffffff;
  --surface-tint: rgba(0, 0, 0, 0.047);
  --text-on-dark: #fbfcfd;
  --text-on-dark-muted: #dddfeb;
  --card-title: #f7f9ff;
  --line: rgba(13, 14, 22, 0.16);
  --glass: rgba(28, 30, 38, 0.72);
  --tint: #f3f6f9;              /* light blue-gray section background */
  --deep: #0b1d30;              /* navy for dark sections; set to var(--ink) to go back to near-black */
  --line-on-dark: rgba(255, 255, 255, 0.16);
  /* Holiday colors (holiday page, chooser button). White text on each: red 4.7:1, green 4.6:1. */
  --holiday-red: #d8333a;
  --holiday-red-deep: #b9282f;
  --holiday-green: #23864f;
  --holiday-green-deep: #1c6e40;

  --radius-lg: 16px;
  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-ui: ui-sans-serif, system-ui, sans-serif;

  --gutter: clamp(16px, 2.5vw, 32px);
  --maxw: 1552px;               /* content up to 1,488px wide, like the live Durable site (2026-10-05) */
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 112px; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: clamp(18px, 16px + 0.34vw, 20px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.12; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-dark :focus-visible, .site-header :focus-visible { outline-color: var(--text-on-dark); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--text-on-dark); text-decoration: none;
}
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 9vw, 128px); }
/* A page that starts with a plain section instead of a hero: room for the fixed header above it. */
.section--page-top { padding-top: clamp(140px, 13vw, 184px); }

/* Section backgrounds alternate white, light blue-gray and navy. */
.section--tint { background: var(--tint); }
.section--deep { background: var(--deep); color: var(--text-on-dark-muted); }
.section--deep h2, .section--deep h3 { color: var(--text-on-dark); }

/* ---------- Type ---------- */

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  font-size: 16px; letter-spacing: 0.02em; color: var(--ink-body);
}
.eyebrow::before { content: ""; flex: none; width: 24px; height: 1px; background: currentColor; }
.eyebrow--center { justify-content: center; }
.eyebrow--stars::before { content: none; }   /* "5 STARS ON GOOGLE": the stars lead, no line */
.on-dark .eyebrow { color: var(--text-on-dark); }

.display { font-size: clamp(46px, 6.4vw, 96px); color: var(--text-on-dark); max-width: 12ch; }
.h-section { font-size: clamp(38px, 5.2vw, 74px); }
.h-narrow { max-width: 16ch; }
.lead { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.55; max-width: 760px; }
.sub { margin-top: 18px; font-size: clamp(19px, 1.5vw, 22px); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 14px 30px;
  border: 1px solid var(--brand-mint); border-radius: 999px;
  background: var(--brand-mint); color: var(--on-mint);
  font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
@media (min-width: 760px) { .btn { font-size: 18px; } }
.btn:hover { background: var(--brand-mint-deep); border-color: var(--brand-mint-deep); }
.btn--deep { background: var(--brand-mint-deep); border-color: var(--brand-mint-deep); }
.btn--deep:hover { background: var(--brand-mint); border-color: var(--brand-mint); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Small phones: slimmer buttons that may wrap to two lines rather than run off a card. */
@media (max-width: 419px) { .btn { padding-inline: 20px; white-space: normal; text-align: center; } }

/* ---------- Header + menu ---------- */

.site-header { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; transition: opacity 0.25s ease, visibility 0.25s; }
/* Homepage in holiday season: hidden while the service chooser covers the top of the screen (js/season.js). */
.chooser-on-screen .site-header { opacity: 0; visibility: hidden; }
.site-header__bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 76px; padding: 8px 14px 8px 10px;
  border-radius: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--text-on-dark);
}
/* Two logos: window cleaning home and holiday lighting home. They shrink before they overflow. */
.site-header__logos { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); min-width: 0; margin-right: auto; }
.site-header__logo { display: block; min-width: 0; }
.site-header__logo img { height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.site-header__call { min-height: 50px; padding: 12px 24px; font-size: 16px; }
@media (max-width: 559px) {
  .site-header__bar { min-height: 64px; padding: 6px 10px 6px 6px; }
  .site-header__logo img { height: 40px; }
  /* Phones: the Call us pill shows just the phone icon; screen readers still hear "Call us". */
  .site-header__call { width: 44px; min-height: 44px; padding: 0; font-size: 16px; }
  .site-header__call-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 399px) { .site-header__logo img { height: 34px; } }

/* Wide screens: the full menu sits in the bar, like the live site. Narrower screens use the ☰ menu. */
.site-nav, .site-header__social { display: none; }
@media (min-width: 1200px) {
  .menu { display: none; }
  .site-header__logos { margin-right: 0; gap: clamp(10px, 1.2vw, 16px); }
  .site-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
}
@media (min-width: 1320px) { .site-header__social { display: flex; gap: 2px; } }
.site-nav > a, .site-nav__drop > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px clamp(8px, 0.8vw, 14px); border-radius: 10px;
  font-size: 16px; text-decoration: none; white-space: nowrap; list-style: none; cursor: pointer;
}
/* 1200-1319px: a little tighter so it all fits on one line. Facebook and Instagram are still in the footer. */
@media (min-width: 1200px) and (max-width: 1319px) {
  .site-header__logo img { height: 50px; }
  .site-nav > a, .site-nav__drop > summary { padding-inline: 8px; }
}
.site-nav__drop > summary::-webkit-details-marker { display: none; }
.site-nav > a:hover, .site-nav__drop > summary:hover, .site-nav__drop[open] > summary { background: rgba(255, 255, 255, 0.08); }
.site-nav a[aria-current="page"], .site-nav__drop:has([aria-current="page"]) > summary { color: var(--brand-mint); }
.site-nav__chev {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease;
}
.site-nav__drop[open] .site-nav__chev { transform: translateY(2px) rotate(-135deg); }
.site-nav__drop { position: relative; }
.site-nav__panel {
  position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%);
  display: grid; gap: 2px; width: 300px; padding: 12px; border-radius: 14px;
  background: rgba(28, 30, 38, 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* Fills the gap above the panel so the mouse can travel from "Our Services" to the panel. */
.site-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; }
.site-nav__panel a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 16px; text-decoration: none; }
.site-nav__panel a:hover { background: rgba(255, 255, 255, 0.08); }
/* .social.site-header__social outranks the footer's dark .social rule further down, so these stay white on the dark bar. */
.social.site-header__social a { color: var(--text-on-dark); }
.social.site-header__social a:hover { background: rgba(255, 255, 255, 0.08); }

.menu { position: relative; }
.menu > summary {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 10px;
  list-style: none; cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: rgba(255, 255, 255, 0.08); }
.menu__icon, .menu__icon::before, .menu__icon::after {
  display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.menu__icon { position: relative; }
.menu__icon::before, .menu__icon::after { content: ""; position: absolute; left: 0; }
.menu__icon::before { top: -6px; }
.menu__icon::after { top: 6px; }
.menu[open] .menu__icon { background: transparent; }
.menu[open] .menu__icon::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu__icon::after { top: 0; transform: rotate(-45deg); }

.menu__panel {
  position: absolute; top: calc(100% + 16px); left: -8px;
  display: grid; gap: 2px;
  width: min(340px, calc(100vw - 2 * var(--gutter)));
  padding: 12px; border-radius: 14px;
  background: rgba(28, 30, 38, 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.menu__panel a { display: block; padding: 11px 12px; border-radius: 10px; font-size: 17px; text-decoration: none; }
.menu__panel a:hover { background: rgba(255, 255, 255, 0.08); }
.menu__label { display: block; padding: 11px 12px 2px; font-size: 17px; }
.menu__group a { padding-left: 24px; font-size: 16px; color: var(--text-on-dark-muted); }
.menu__panel .social { padding: 8px 4px 2px; }
.menu__panel .social a { color: var(--text-on-dark); }

/* ---------- Hero ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: max(640px, 100svh);
  color: var(--text-on-dark);
  background: var(--deep); /* shows while the photo loads, so the white text never sits on white */
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(4, 6, 16, 0.72) 0%, rgba(4, 6, 16, 0.42) 50%, rgba(4, 6, 16, 0.12) 100%),
    linear-gradient(0deg, rgba(4, 6, 16, 0.55) 0%, rgba(4, 6, 16, 0) 55%);
}
.hero__content { padding-block: 170px clamp(64px, 12vh, 120px); }
.hero__content > .display + .lead { margin-top: 24px; }
.hero__content > .hero__h1 { color: inherit; }   /* homepage: the h1 reads as the bold first line of the lead */
.hero__content > .btn { margin-top: 32px; }

/* Service pages: a shorter hero and room for longer headlines. */
.hero--service { min-height: max(560px, 82svh); }
.hero--service .display { max-width: 16ch; font-size: clamp(44px, 5.8vw, 88px); text-wrap: balance; }
/* A sentence-long headline (About page). */
.hero .display--statement { max-width: 20ch; font-size: clamp(38px, 5vw, 74px); }

/* A service with no photo yet: same dark hero, striped like the empty service cards. */
.hero--plain {
  min-height: 560px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    var(--graphite);
}
/* A faint line drawing of the service, until a real photo is added. */
.hero__icon {
  position: absolute; top: 50%; right: clamp(16px, 8vw, 140px); z-index: -1;
  width: clamp(150px, 26vw, 340px); aspect-ratio: 1; transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.12); pointer-events: none;
}
@media (max-width: 759px) { .hero__icon { top: 104px; transform: none; } }

/* ---------- Image positions (no inline styles: the CSP blocks them) ---------- */

/* --obj-pos lines the blurred stand-in (below) up with the photo's crop. */
.obj-55-45 { object-position: 55% 45%; --obj-pos: 55% 45%; }
.obj-50-35 { object-position: 50% 35%; --obj-pos: 50% 35%; }
.obj-50-50 { object-position: 50% 50%; --obj-pos: 50% 50%; }
.obj-50-30 { object-position: 50% 30%; --obj-pos: 50% 30%; }
.obj-50-55 { object-position: 50% 55%; --obj-pos: 50% 55%; }
.obj-50-70 { object-position: 50% 70%; --obj-pos: 50% 70%; }
.obj-40-50 { object-position: 40% 50%; --obj-pos: 40% 50%; }
.obj-60-50 { object-position: 60% 50%; --obj-pos: 60% 50%; }

/* Blurred stand-ins: every photo's box shows a 12px copy of the photo (inside this stylesheet, so it's there on
   the first paint), stretched and soft, until the real photo arrives and covers it. Matched on the src, so the
   pages need no extra markup; the build's ?v= tags don't break the match ("starts with"). */
img[src*=".jpg"] { background-size: cover; background-repeat: no-repeat; background-position: var(--obj-pos, 50% 50%); }
/* @lqip-start (generated: 12px PNG of each photo) */
img[src^="images/commercial-building-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF/SURBVChTAXQBi/4AlJ6rsbzIv8fRydDZyM/Y1dvjrLW+U0Q5VVJSQEdPAKezwcLO29Ha5dni69ri7OLs+IF9fEs6LmhudEVMVAC6w83I097Ay9bJ09zY4uuosLlFNSmLkZZ3fYI/RUwAx8/X4unx3OPq2ODoz9vodmZaeW9pxNPbbnN3PkRKALfAyeLq8e3y9vj+/6CmrGxJLbOonKq7xV9jZj5ESQCmsbvH0dzW3+fX3+Z8bmShi3iIfXaXhHdnYVw4QEcApK66xM7Yztnju73BjXVjqZWEnW9Mk2M/WldVOD9GAJqksLbAzcPO2r6/wph1XJVqSHZZRnV4fV1hZTU6QACkrbnFz9vO2ubGxsmMalKPc12Si4SxxdFdYWQxNTsAoqmwq7G0vMTKsq6rkXdio414kYZ6n7C4VllbLTI4AEtFMlxWRoGAent2bGhZTW9ZRlpPR0FJT0JDRCswNgA5MyJQTUFubmxra2liY2FbWVNTUk9OT08/QEArLjFkkMh+XJS9CgAAAABJRU5ErkJggg==); }
img[src^="images/commercial-building.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAIAAAAh9zBHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAETSURBVChTAQgB9/4AnKaytL7KuMHLv8fQytLbl5+pPkRMAKq2w8/Z5dnh6+Pq9N7m8Hx+gklPVgCgrLrL1uHX3+jk7femqa1RRTxMU1oAs73IxtHdztjhzdjjY1tWd3h5S1JYAMjP1+bt8+Tu+JiTkIZ6cKa0vkJGTACyu8Xl7PTY3eOBbmCgk4eLiog/REkApK66ztvnsrCwmoFumXJWe19MPURLAKGrt8nX5bu2tJBoSYh0Zn2Hjzo+QgCgp67BytKxqKKSdV6dl46KmaAyNTkASEIvcG5keXRtalpMWlJLQ0lMLC4zAEtJPoSFgnl6eXZ4dW9va2dnY1FTUgBlaGp1dnZmZmRsbGpsbGlqamZYV1PO5I383kW4BgAAAABJRU5ErkJggg==); }
img[src^="images/exterior-squeegee-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVChTBcFZT4JwAADw/0dpa+WseXShJl4JiBjiiWgBZnFYkahpC+xcM3uoZa4yj5rlg+tYbz20euqL9fuBOOMzTk8ajBMuFyTKvHMJXfQFJaV0227rVRmEKGQ5gpotBpdrXlUldbe4XdjSa5Xjk4NuUweLsAXDYYL0uz22UlHEiaDZZAmgGCfkD6oCCEftEGRu3dSTMUJcX7VCjjiOMkw6SjO1cg74g5ADtrBhdyW+lKXJfIaqCGlkmWZZrn+tgaPDJEXZVti11tX923DY3BN2lE0ikiyW1cHtIfj928iwdlGSB51O+/JC25WPNKVSyr+Nnl4fG4DMzFgXpgSee3953symZJYoS7GCEPv5uBt1ToEToUyzdjqV7D90c+mYXuR1leVptFET6poIvEjIGU7F80pBkciAn0tgPI1pKv/31Rv16sDr9Tgwwpbi5lEygnvWGIJNIFdnhdenxvdnG0SpAOaFTcHEXICcHB+zL5gjONxt1kaP5/eX+/8yxIkyAp/g1wAAAABJRU5ErkJggg==); }
img[src^="images/exterior-squeegee.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAIAAAAh9zBHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAETSURBVChTAQgB9/4ANj9DMTApUFBGVFhTKjE3TlZfeHdxAExSRSssKE5ORGBkYEVNVIWLj42KgABERzw5PDJCQzlsbWdWWFZsb2yFgHIAOTwrYmNYX1xRTE5LOTU2UVNXbGleAENHNVZQRHtlXXBjWmldVUpRWIZ+bwCLjU1XWVGemqKbjYRzbmR0d3SgmIcATVgzTkxInpSTbWRWdWpWi4BtpZmDADI7RklTV4B9emJZTW1jUn90YJaKdAA9QEI+WV9DT1JSST5hVkeckXuwpI8AS0dANUFGKDU6My8qS0Q6u7CXsqeRAFFPSyUjKi4pJSEiHxscHFBLQaaciQBaV1IzMzUyLyxAPDU3MSlFPC0vKB8BRleZ3ltgDgAAAABJRU5ErkJggg==); }
img[src^="images/gutter-after.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAIAAABChommAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEzSURBVChTASgB1/4AVlZeW1tkV1dfXFlcSFFfWozDY6XtWp3pVpzqWZ7qYajtXJzdAFFSWmJkbmlqcnx1dHZva15eZWuDn4zA66HD4KC935q50JequwBMTVNDSVdWWmVlZGmCfHeLgHV4bmWEeG2gf1OpkGuMfFmQfWAATk9XOj9OP0JLTU9WTE9WbGxtkI2KdXyHa3aIopR7yq+JsZV2AEVFTFRRVWlkYoqGhJ+fopOZo3WCmIWZuqifjX9tNox6Ub6MSgCNhX21sKy5u8Kqsr+KkqJvf5uarci9ubWKe14zLA8yLCNqTi0AqK67qbLFkJmqgouee4+xq8Dd0ca5nY16enhpJSYfKhUjNy8qAHiClXyElHd+kXqPsqO41MS7sa+Xe5CFe3Z1diUnKBwSFhkgFahyjESL38PFAAAAAElFTkSuQmCC); }
img[src^="images/gutter-before-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF/SURBVChTAXQBi/4AVVdfX11iT1llWoSsbbDtZKbsYp/kX5zhYJ/mVpDQAGtoamxqcFxbYVleaWyPsoSz44jJ/37F/4DL/3W59ABua2uBe3hzcG5pZmZRTlJcXGKAnrakzuq4z9iisb4AV1lidHN1ioN8npKCmpCFdnFtamVmi4J7pX5Tn3NFAFRUWVlcZFBWYFVbZHRyb42HfouEenVsZFNDOIJePwBQVV1PVF1PUlpYXWRZXWJZVVVJPjohFxVLREelmYwAVU9MdHBre3ZyaV9ZXExFRTYxLyYoUFxypa65kIJgAGlURo92Z1VEPTwyLh8WFisiJWZ7mbnG07qrlnBkNwBKMSiEXk1SPjQjHBowNkGMo7/Eyc2mnpCkl4hIQTEAKyAdQywfXT8sTldlnLnZxsjJvK2ZfXVpm5GHSU47ACwnKkMzLH+LnLfS8NHOyMG1o7eghH95cKOfnVNRQgBNPz57lLOow+HBu7K6sKKjkn2ijXGAf32ZnKNIRkRMZ6YE2VeYdgAAAABJRU5ErkJggg==); }
img[src^="images/gutter-before.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAIAAABChommAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEzSURBVChTASgB1/4AWVphW11mVlhhXVtgUFlmY5TFbq7tZaXqX6PpYaTpaa7tYqDdAFdYX2dqc25vd3p2dnJtbGJka3GJoZfI7ajL5aTE45++0ZquvABQUVdGTVpZXWdmZmx6d3SLgnl9dnCFfHSWbkapi2eNf12QfmIAT1FZO0FPREdRU1dfUFZgYWNoamJcOjEua15YqpZ4x7CMrpV3AENES1RTWF5YVXFnYG1kX0o8Ni4kJ2VxhqOejYByP4x8VLyOTgCIg32alI5ZS0NxUEBLNSkhIip+jaG7vLuKfWM0LhIzLSVtUzIAdm9tXk5GMCMgNyMaYVhWmq/G0MrAmox8eXhrJCQfJxUjNS8rAE9KT1FCN0s2J1JXY6C1zMO+tqmUe42FfHZ2dyMkJhsSFhkfFlxMeqdWqKHuAAAAAElFTkSuQmCC); }
img[src^="images/hero.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAIAAAA/PgD0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFbSURBVChTAVABr/4AyczQ3eHm2+Dk3eLl4OTo5ent5+vt6+3txcnMANXZ3/j9/+bs8JWcpJWaosXKzs3R18bL0ZednwBlaG9qb3uPkpWho6GDhISNj41LT1tiZnJLT1UAbGxoXl9dl5eTwsO6pqadnZ6WcHJwXmFfSUtIAGppa8rJv56gm5admYyIhG9pZ6ern4KHdoKCdwBublyChm1obVReZk7Qysvg3uxpbWMvNSc0Ox0AYmZBeHpSam9DaG49n52OtKq5Wlo3PkkmNz4eADw7L2VtQFxlP1xiP0ZKNCIcGWVqN2RvN1hhMABtbVRkbDWSn52Wpax/fmFxaENiaDJkbDFaYC8AioNxaW4/W2lBYXBKZGtCbHJLXWMwWmMqWmAvAKKZhbGrjI2JZaKbd6Sgfqqnh7y2mMK8n8C3nQDIv6rb0b3Vy7nYz7vYz7zZ0bzY0Lvc073Eu6hvp66kb1QP4gAAAABJRU5ErkJggg==); }
img[src^="images/holiday-house-lights.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAIAAACz0DtzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEJSURBVChTY5AXl1aQVpYWlxcUVnIzVFOTV2LiluXkl2Xnk+MSUOAWVOAVkGbQkpXVUlCzMTCPdTar81Kp8NYy1LWUUTTVVtFUV1SXk1YTFZIEKfI2VGsPN6rwM6zx06zw1qwPMS3wtSgNtK2PcKry09GSlWEINVWu8tUr8dBoCNLujjWuDzFsC9NpCNCcnORQ5mOQ56KRbKvIkGCt0hqq1x+lUeMrOzFccXaswpxktb4wtSpPhQxHhTxX5WgLOYYMV91SP90cL/3yIJMcN918d73GcMv6cKt0d8Nsb8Msb7NUNz0Gb2urUGfHAAcHHxtrX1trP1trf3s7Xzs7bxs7D2tbN0tbO2MLAHJVP5KvqCXWAAAAAElFTkSuQmCC); }
img[src^="images/holiday-snowy-house-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF4SURBVChTY+Dmk+IVkOEVkOHhByFeAVkefhk+AVk+QXluPmkGXgE5AWElfiFFfmFFfiEFfmFFAWElASEQyc0vzyAgrMArqMQnpMwtoMAvKM8vKC8AUqHIya8oI6XMwMErq6WsXuejEmBlrK/vZqBrb6jvqKfnEuVg2hEgz+BmYd0XppltJdodpFIf6x/mERbtGdoY5zs1XDVUV4RhTqJeqZNcur1yrafi7CiljYVG28rNJgXL1rgrlnmpMeQ5iEebKs6NV52dqBukI7m51OhIu22IrmSFh+qCVG2GJHOJLFuFMneNXHvlImflGXFGcxKNC50UM20UU21UGKpdRNt91WaEqs8MVd1aadXsrV5qr7ClzGxKqGp/sArD4kT1HXkG5Y5qPQFqEyPV0kzEAtQEG30V+8N08uxUGCbFmbdFOsQ6Whb523ZFW6RbK6RYKdYEmqa7m4famDLEevkmePvHeXnlBgfme9vW+2g0+uuUBHmk+/nGuLkCANIHW5E4jnNJAAAAAElFTkSuQmCC); }
img[src^="images/holiday-snowy-house.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAIAAAD+GJp4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADBSURBVBhXY+Dmk+QVkOPkk+Hml+Xik2bjlWXnkWHnkWbnk2Pnl+fhl+bml2HgE5Th4JEQE1MQFFaQlFL3M1bxMDezMXWIt9WwVpdl5xTk5BZhkJeQ1JYRSbCUSXMxLvU2qvWQnxytOz/dtNlHKdZcVlxIXEdWgsFVS7LQRanCU703VGNhjGKnr3JviHqbv3J3oHqKhXyevUKrjxJDsq1KrotarrNGoqNhfZhNkZ9tnrtelr1KiptlsY9lS7BpuosOAE8LJaiBQzEeAAAAAElFTkSuQmCC); }
img[src^="images/interior-high-window.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAIAAAAh9zBHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAETSURBVChTAQgB9/4AcGxbioh1jIt3i4t3goN1eHhyaGdnAHhwWqOdhqyqkamrjpeciHl6eFlWWAB2cWCil3+tppSSj4F3dWxMRkYtJSUAdXRzlZCEg3hqc2xih4Z/RDw4KB8fAGJhZUtKSlJQU56sv63E40VBRigfHwBZV1lNTVUzNUGpu9e2yOJHRUomHyEAVVNXWl1tS0tUcnR6cm5tPzo9KCImAFJOSVFMT01HR1JKRl9WUkU9PigjJgBgW1JfW1VRTU1XUlRiX2E+Oj8gGx4AeXVqgX1zW1tco6mluL/AUE9VHBUYAIqIfYqGflxdXoOXfqWyo19dYi0pLgB4dnFsaGNISEpvdG9gYFpUUVJKS1HEEGSyxyeSewAAAABJRU5ErkJggg==); }
img[src^="images/interior-ladder-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF/SURBVChTAXQBi/4AendtjIV1joRunJB5cGhgZWBdY11YXFROXFFHVk1DAIeEgJiSiYV/b6GWfYl9bFpNQ2teUHRrXIeCc4qJegB9fH+MiIZpZV6knYx5cGRhV1CXlIKenounqZ6YnJoAYWFlVllcXFhRf355VVRVc3F6mZmclp6sprzal67QAEZCQBshKVRORTQ1NElKUYuQpJuowKzE6KzF6Jyy0ABGQTwxMTVPT1cEAwogHSZKTl2RoLiyx+auw+Oess8AS0ZAUE9RXmBtMC00GhQaLjNBna/ItsjjtMbjorPOAFBOTl1gbWFod0RFUCgkK211gqm60cLR6MHT7bHB2ABXWWNpcopeZXc6O0cyMDZwd4SjtMuuu82dpraAhpAAV1hkZ3GLVlhrOzxIREJHXV5jWlxkX11eXFZUVE1JAFRTW1tea05OWTo4PldUV1VQT1BMTWFbWmNeWltWUwBIRUdOTlRLQUhCOz1IREVOSEZPSUlYUlFZVFFSTEoIcZvY4vva1AAAAABJRU5ErkJggg==); }
img[src^="images/interior-ladder.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAIAAAAPTiitAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF9SURBVChTAXIBjf4AZmRffXtzhoF3iYFvmI11eW9lX1lVXlZQWk9HX1ZLdG9iQz05AG5ta4aFg5ORjoiDeZWMd4+DcF9TR352ZYyHdZ2biq2un1JNSABoaGp6e4B7fIBnZGKFgXdybWZvammdnZKgqKqkssWnutZPTVAAZWVpc3J4Q0RGNTc3VFBJTE5UjI+gnarDpr/jp8LnrcXnUE9UAGJhZmZjYT06Nj8/RSIiKRoYIVtgcaW4067E46nA37DG5FZWXABhYmhhXl1OSkVaW2RDQ00WEBRFTFuuwdu0xuGxxOC8z+taXGQAXl9nX11gWlpiYmh5T1NhLSoweYOSvc7mwdHot8bdtMHVWlthAFlXXFxZXGJnd2Vth0NFUzc1O2txfISNnHt+hWtqbGxmZEtGRgBWU1JcWVpcXWlZXW9AP0lRUFRUUFBRTU5dVlNfWFRsZF9STEsATUlFVE9NTUxPS0hPQjo+R0NETUhGUk1MV1JQWFJPYVlXS0VFUfSbuU83s2sAAAAASUVORK5CYII=); }
img[src^="images/screen-cleaning-2.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAIAAAAh9zBHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAETSURBVChTAQgB9/4AU1xLWGFPUFpKRU09Y3R4lLXagJqzAFVfTlxlU1plUlplU2JvYIuVbnV9SABSWUhYYE1jaGBha1hZYlJSWjdpbDgAUVlAh4mCTkpNRU49TVdFMzwyYmM7AGRpR5iZpFZbaEtMPz9INS83LWBoQACShHh8c3RZW15cXFZWW1A4QDcyOi4AfoFXYmhYREJASUxDLDYpFh0ZExoWAICBXHVzXS0tLTg6NSktJx0gHhceEQB+eV13a2E/Oz1hXmNNSEtUVUBCTSQAmYp5p5qKjX5vkX9znot3p6RvjIxbAJiLeLmql7mlj7eafYiHW4KKUo+PZACIfW2jlIOllX+cjHGBe1x+flpibUDwMF/QqoiBmgAAAABJRU5ErkJggg==); }
img[src^="images/screen-cleaning-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF/SURBVChTAXQBi/4AWGVAcX1IdoZefolufo2BjZ+hcn5wcHxzlp+Zsre4AD5KLmNyPWh5VIaTboSQeYmXdnaBaYCKeYSQgHuGeABTXjo9SSk2QyRrdVCQmYCKlnRjbVZrdWGFkXlveGMAcn1JTFcvWmY8V2FAfolrh5JofIRdiJJtg411ZW1bAHd6UmdsRXJ4TIuVU3F4YXV8ZoCHWH2GYYCKcXF6ZAB3fFNNVDgvMChucVaaoKt2folkY1hlbUaMmW1ocVsAsLJ7mKRqeX1cpJ+Mo6GygoaRvrGirKCGfoNgQ0c4AOvFpsaujKSrab/Iim9nbmtuacfEpbq3jqiphj5EOABvWEo3KCJfYTmlq4FOUVGBfm/CxpGToVxkb0cwODUAAAAAMzQij4xljYZ/VFRRdXNsfoBxanNWRVAzGiEZAIV/ZNPBodbApamZiXx0diUmLzo5QUJCSygqLhQYHACelnOzmoGumYaumICZj4lGRUo6OkQjJDMgIC4wLyjHi51ZkGT4jwAAAABJRU5ErkJggg==); }
img[src^="images/screen-cleaning.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAIAAAA/PgD0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFbSURBVChTAVABr/4AX2tIcoBMeYdbgY14j6a1fpGZZ3FkjZmYwcfQAEtYNG59R36PbYaSdYqZgYKPdH6JeIyXiYuVigBHUzFCTyxHVS+Ci2uNmXtzf2Flb16Cj3hwemUAa3ZEQk0qU184ZGxSkJt1doBbf4hkhZF2Z29cAHR5T2ZrRHyFT36GU3B4Z4KJXYGLYIKMcXB5ZAB0e1FFSzY2OCeUmId/h5l2d3RYXDyKl2ppdFwAsrN8lJ5og4ZlrqejhoqeqKGcu6uTi45rR0s5AOXAo6+berC8caKjgVdUXaiojsLBlaepgURKPQBLOTEhGhF9gVOEhnVWVlG4t5WZp2Rnc0QwODIAERAMa2hNrqSEdG5uXFpXZGVhY2laRU44FRwUAKWdetzDpsaxna2cj05NWCcnLzc3RCgoNR0eIwCekHS5oYesknyxmIOMfnVWUFA4N0EnKjAzMyUIRI8ZhymnEwAAAABJRU5ErkJggg==); }
img[src^="images/solar-panel-roof-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF/SURBVChTAXQBi/4AdajQgLnme7TferPfeLLfdrHedLDec6/edLPkaKLPAIq+6JfS/5DM+Y7L+Y3K+YvJ+InI+IfH94nL/Xu45wCOv+Sb0/uUzPOTyvORyvKPyfKOyPKMyPKOy/h/uOIAmsjqreH/ptz/o9r/odn/n9j+ndb9nNb8ndj/jcPoAKHC2ZO0z3uevneZuXOVtGqMrGiIp2KCoV1+nlJtiwB3e4NCU3I1S242S2o3SmcvQ2I2SWYxRGIxRGMsPVgAb3N6SVZsO0xrRFVvPE1nO01nPU5oN0hkOEhkM0FZAF9jZHp+hFBcbj5PajlKZz5PajdJZTRFYjRFYys6UgCRi397e3RmZmI5PT88P0I+QUI8Pz87Pj46PDs6PDoAa15AopmDWlM/aGdVXnJlY3hhXnNhaHdrd3JebGhWAGNnLJ+Zc3NzaG51dDRENjdMNCs9NFJhW4mOi3d7fABNVyR+gFFvcVVfZmUsPSslMiAbKB9EUT95fXxucGq63rKPSpxHZQAAAABJRU5ErkJggg==); }
img[src^="images/solar-panel-roof.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAIAAAAh9zBHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAETSURBVChTAQgB9/4AZZ7Nba3iZ6fbZKbaYqXaYqjfVpjLAHq15YTH/X3A9Xu/9Xm+9HjB+muu4wCAtuGMyfiGw/GEwfGBwPCCw/Z0sOAAjL7jmNL7kcv0j8r1jcr1kM77gLrlAJ/M7Knb/p7R9ZnN8ZTJ7ZTJ74Gy1QB9j6BWcZJQaYlKY4FHXnxDW3k4TWkAXmJsO0xpO05qOEpmOUtnNkhlLz5YAHR1c2hudTpFWTlDVzdBVTI9USw3RgCEemN5cmJVVkpVY1VUY1VgZVheWkoAbm86i4luXGVgLUIsKDwuaHRte35/AFdhNHx8YmtvcFBaVkdQT290cn98aQB6f052eU13fFCEiFp/hVqXlGqGg1UYLIJ65DxvZgAAAABJRU5ErkJggg==); }
img[src^="images/track-detailing-card.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF/SURBVChTAXQBi/4AQUlAQUlAFBkSHyUZHyAbYGVie393P0M/fXhstayZACYpIUFHPXN6cD1EOSgpIHd3bTA0MgkSGHl3bLaumwAQEwxWVU65ubGAgncwMCVtb2k0Oz0mLjdybmO5sqAAGiAYQzcknF9Nd1hHMzQobG1nMTc7P0hXmZKCyMCuAEFJKZKQg72RiUdEKy4wH29waC85MzpARqucjMS+rQCVpFSxvdTT1+p0hGkvMhxqbmOCgGCLlIeRtK3Gva4AfotZpai4wsjZtaqjbVtDmnthoIJuTpCXU5CPx7upADQ6N7ewsrOvsqqGeNOJaJt1XHZtXHtzYWRWQ8G6pwAvNT2lpKrZzc2XlJYoIyR2b2CVjHh5a1hrYE61qZEAWWJdcnh7f3l7UU5NNjk5XlpNfnVkn5R+gXZikIZyAFtfWGNvZ2pvgENDREBERW5qXnVsW5CGcsi7o7KmkABoa2dPfoEfNUIsJyw1OTxMTEh0bFtvZ1e1q5W7rpYsWJiPygpDogAAAABJRU5ErkJggg==); }
img[src^="images/track-detailing.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAIAAADUCbv3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF/SURBVChTAXQBi/4AP0g/Q0xCFRsUHyQYICAbYWZien52PUE+hoFztq6dACUnID5EOnJ5b0BHOykpIHZ2bC0yMAwVG4J+cb22pAASFA1LS0O3t6+DhHoxMSZrbmgzOjwmLzh6dmjAuakAGyAZPTUimV1Le1lINDUoamxlMTg8QUpYopmIysOzAEJJKImKesCVjktGLS4wH25vZy04Mj5FSbKjkcK+rwCZqE+sucrV2u53h24vMx1pbWKEgGGIloqZuK/CuqsAfYtRoqazwcbYt62nblxDmntgnoJvSI+ZX5SQxbqpACkwLLGrrLSwtKqIe9KJZ5p1XHZuXXhvXWpcScnCsQApLTWbnKLazs6bmJkpJCV3cGGVi3d2aFVxZlO6rZYAUFhUc3p7fnh7VFBQNTk5XlpNgHZlnpJ9gXZilIl1AFFVUWdyaGhuf0ZFR0BDRG5pXnZtW5KIdMu/pq6ijQBlZ2NUgIEfOUcsJio1OTxNTEh0bFtxaFi6r5m6rpetqJkKXAHSRQAAAABJRU5ErkJggg==); }
img[src^="images/water-fed-pole.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAIAAAAh9zBHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAETSURBVChTAQgB9/4AVFlTY3eUWXeoVXKhWHWiVnevR2eeAFZcWnV5c19hYVFSUk1NSlhjdl+AuQA+QTlbXlJkbXJUXWJXYGM7ODJER0sAQEI5eXttqKuil5mXjpCNq56KZF5TADQ1L2NhVZqSfaCTgKeahIl+b2tkWgBLT0NkZVeWjXOklHu5poleVkswLyoASEo/TlBEbmpmfnlzZGBauqqTq56IADIzKz1AOmhlam1mZ2FiZr+ulrSljAAhIBhTU1Kzs8GTkpNtbWS9rZe0pIwAIiAYeXVzlZKdiYBxhoRXqZt+q52DACQhGGlmaZ2aqFFMMVxfN5iPaYuGbwAmJSEdGxkYGSU4PCRJSCJiXTVjYUKzYWfW5dM7GQAAAABJRU5ErkJggg==); }
img[src^="images/thank-you-thumbs-up.jpg"] { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIvSURBVChTHcxZSNNxAMDx34sPBaUvBSEUEuKDSAiZmUoemE3zPjZd9W9uOo9cimksK/nFFMRIyYu8Wq5ELLUmFU48oDxQwcxjgoUYUkNKk4JCiG/k+4ePiEtNjbA+sVrm5yfl+PiQTIiLlr6+ftLT67iMigqXMzOjsrOzRXZ1dciu7g6L0Op0NbK6homJEdbXFlGrU4iIjEKt0RITE4tzZZbBoRdMTY9i63qIaOlskw3tTTgcdpY/TKG9pEWXlMgdRSH8bBRT02O8et23F3b3PkJ0dFtls60Fx9AAzsUZ9NlX0KfEczM9jcT4JBzD/ZgrCul5/piG5lpEXVODvFtdzfDwIIvvJ7Hb7TgXPrE0u8zaZxfWp+2cSwymrNyEzqAgck2pMjNLRdW9IubmJtjehp2f8GXrL5tbMLewTpJGxf06C61tDQifQDfpc9oNDy9BzzMb377u8nFlE5drl9XVH6xv/EGbnYFaUXGjIhehuRwp803JmG8ZGLHVM/6gknl7/96+5NxkpttG2vlgPL0PcfiYO2Kgt06OOZp5Y6+lqbGQ1sYqZt8tseH6y/dfMGWtp8wQRrISRLoShNBknZB6UwAXjf7Eqo/ycrCPnd8w9nYBY0EplSaF29ejycw7haE4BKExBEhdYRBKXiDabH+MBQaSkxU83I8ghKD4ggpLeQIZOSfJKQpFGK6G1FwzR6IvDKGgJBRvn//QjX37DyDEQSJC/Cgxh2EsOkN+aRD/AJTCY3NPmypfAAAAAElFTkSuQmCC); }
/* @lqip-end */

/* ---------- Service cards ---------- */

.section-head { margin-bottom: 56px; }
.section-head .sub { max-width: 60ch; }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.photo-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 440px; border-radius: var(--radius-lg);
  background: var(--graphite);
  color: var(--text-on-dark);
}
@media (min-width: 1080px) { .photo-card { min-height: 440px; } }
.photo-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.68) 100%);
}
.photo-card__body { padding: 40px clamp(24px, 3vw, 44px); }
.photo-card__body h3 { color: var(--card-title); font-size: clamp(27px, 2.5vw, 36px); line-height: 1.2; }
.photo-card__body p { margin-top: 10px; max-width: 38ch; font-size: 18.5px; line-height: 1.5; color: var(--text-on-dark-muted); }

/* A card for a service with its own page: the title link covers the whole card. */
.photo-card__link { color: inherit; text-decoration: none; }
.photo-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.photo-card__link:focus-visible { outline: none; }
.photo-card__link:focus-visible::after { outline: 2px solid var(--text-on-dark); outline-offset: -4px; border-radius: var(--radius-lg); }
.photo-card__go { display: inline-block; margin-left: 6px; font-size: 0.8em; transition: transform 0.2s ease; }
.photo-card:hover .photo-card__go, .photo-card__link:focus-visible .photo-card__go { transform: translateX(4px); }
.photo-card__img { transition: transform 0.4s ease; }
.photo-card:has(.photo-card__link):hover .photo-card__img { transform: scale(1.03); }

.photo-card--placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    var(--graphite);
}
.photo-card__icon { position: absolute; top: 28px; right: 24px; z-index: -1; width: 112px; aspect-ratio: 1; color: rgba(255, 255, 255, 0.26); }
.hero__icon svg, .photo-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.hero__icon svg * { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.photo-card__icon svg * { stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- Memberships ---------- */

.plans { text-align: center; }
.plan-grid {
  display: grid; justify-content: center; gap: 24px;
  margin-top: 56px;
  grid-template-columns: minmax(0, 400px);
}
@media (min-width: 1000px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 400px)); align-items: start; } }
.plan {
  position: relative; text-align: left;
  padding: 34px 30px 38px;
  border: 1px solid rgba(13, 14, 22, 0.12); border-radius: var(--radius-lg);
  background: var(--surface);
}
.plan--popular { border-color: var(--ink); }
.plan__badge { margin-bottom: 14px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.plan h3 { font-size: 32px; font-weight: 400; letter-spacing: 0.01em; }
.plan__price { margin-top: 18px; font-size: 44px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.plan__unit { margin-top: 6px; font-size: 16px; }
.plan .btn { width: 100%; margin-top: 24px; padding-inline: 12px; white-space: normal; text-align: center; }
.checklist { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 18px; }
.checklist li { display: flex; align-items: center; gap: 10px; }
.checklist svg { flex: none; width: 19px; height: 19px; color: var(--ink); }

/* ---------- Reviews ---------- */

.reviews-box { margin-top: 48px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.reviews-box__score {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 24px 28px; border-bottom: 1px solid var(--line);
  font-size: 18px;
}
.reviews-box__score strong { font-size: 24px; color: var(--ink); }
.reviews-box__brand { font-weight: 700; color: var(--ink); margin-right: 4px; }
.stars { color: #b7791f; letter-spacing: 2px; }
.reviews-box__note { display: grid; justify-items: center; gap: 20px; padding: 44px 28px; text-align: center; font-size: 18px; color: var(--muted); }

/* Reviews page: the rating up top, then ways to read or leave a review on Google. */
.hero--ink { min-height: 0; background: var(--deep); }
.hero--ink .hero__content { padding-block: 184px clamp(72px, 10vw, 112px); }
.rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 28px; }
.rating__score { font-size: clamp(48px, 6vw, 72px); font-weight: 700; line-height: 1; color: var(--text-on-dark); }
.rating__stars { font-size: 30px; letter-spacing: 3px; color: #f2b83b; }
.rating__count { font-size: 20px; color: var(--text-on-dark-muted); }
.review-actions { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 760px) { .review-actions { grid-template-columns: 1fr 1fr; } }
.review-action {
  display: grid; align-content: start; justify-items: start; gap: 14px;
  padding: 32px clamp(20px, 3vw, 40px) 36px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.review-action h3 { font-size: 30px; }
.review-action p { max-width: 46ch; font-size: 19px; line-height: 1.6; }
.review-action .btn { margin-top: 8px; }
/* Three ways to reach us on the quote page: stacked until there is room for all three in a row. */
@media (min-width: 760px) { .review-actions--three { grid-template-columns: 1fr; } }
@media (min-width: 960px) { .review-actions--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The address can't wrap at a space, so it may break mid-word on the smallest phones instead of widening the page. */
.review-action__email { max-width: 100%; margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.review-action__email a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Process ---------- */

.process-head { display: grid; gap: 24px; justify-items: start; }
.process-head .sub { max-width: 60ch; }
.process-head .btn-row { margin-top: 0; }
/* "Our 4 step process" like the live site: the title on the left; "With RainBlock Tech" and the button
   on the right, starting level with the title (the eyebrow's height pushes them down). */
.process-head__side { display: grid; gap: 28px; justify-items: start; }
.process-head__side .sub { margin-top: 0; }
@media (min-width: 960px) {
  .process-head--split { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .process-head--split .process-head__side { padding-top: 45px; }
}

/* The steps, like the live site: a line down the left of each one, all showing at once.
   Four across on wide screens, where they climb from 1 (lowest) to 4 (highest) and the lines
   all end at the same bottom. Two across on tablets, stacked on phones. */
.steps { display: grid; grid-template-columns: 1fr; gap: 48px; margin-top: 64px; }
.step { padding: 4px 0 4px 28px; border-left: 1px solid var(--line); }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 64px 32px; } }
@media (min-width: 1320px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; }
  .step { padding: 4px 24px 8px 28px; }
  .step:nth-child(1) { margin-top: 144px; }
  .step:nth-child(2) { margin-top: 96px; }
  .step:nth-child(3) { margin-top: 48px; }
}
.step__num { font-size: 46px; line-height: 1; color: var(--ink); }
.step h3 { margin-top: 40px; font-size: 22px; letter-spacing: 0.05em; }
.step p { margin-top: 16px; max-width: 54ch; font-size: 18.5px; line-height: 1.6; }
.section--deep .step { border-color: var(--line-on-dark); }
.section--deep .step__num { color: var(--text-on-dark); }

/* Clickable steps (OFF for now, 2026-10-05: no page has data-step-tabs). js/site.js adds numbered tabs
   and shows one step at a time; adding data-step-tabs to a .steps list (and step photos) turns it back on. */
.step-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px; }
.step-tab {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 22px 6px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer;
  font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: 0.04em;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.section--deep .step-tab { border-color: var(--line-on-dark); color: var(--text-on-dark); }
.step-tab:hover { border-color: var(--brand-mint); }
.step-tab__num {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-tint); font-size: 18px;
}
.section--deep .step-tab__num { background: rgba(255, 255, 255, 0.1); }
.step-tab[aria-selected="true"] { background: var(--brand-mint); border-color: var(--brand-mint); color: var(--on-mint); }
.step-tab[aria-selected="true"] .step-tab__num { background: rgba(0, 0, 0, 0.12); }
.steps--tabs { margin-top: 32px; border-top: 0; }
.steps--tabs .step { margin-top: 0; padding: 0; border: 0; }
.steps--tabs .step__num { display: none; }
.steps--tabs .step h3 { margin-top: 0; font-size: 32px; letter-spacing: 0.04em; }
.steps--tabs .step p { margin-top: 16px; font-size: 20px; line-height: 1.65; }
@media (min-width: 760px) {
  .steps--tabs { grid-template-columns: 1fr; }
  .steps--tabs .step:not([hidden]) {
    display: grid; column-gap: 56px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
  }
  .steps--tabs .step__photo { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .steps--tabs .step h3 { grid-column: 2; grid-row: 2; }
  .steps--tabs .step > p:last-child { grid-column: 2; grid-row: 3; }
}

/* ---------- Service area ---------- */

/* Homepage only: text on the left, the Google map of the business listing on the right (stacked on phones).
   The map stretches to the text column's height, so opening a county dropdown makes it taller too. */
.serving { display: grid; gap: 40px; }
@media (min-width: 960px) { .serving { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; } }
.map {
  position: relative; min-height: 420px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #e9eaee; /* shows while the map loads */
}
@media (min-width: 760px) { .map { min-height: 520px; } }
@media (min-width: 960px) { .map { min-height: 600px; } }
.map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.serving__text p { margin-top: 24px; max-width: 46ch; font-size: 22px; line-height: 1.55; }

/* County dropdowns: every town is real page text (search engines read it even while closed),
   and towns with their own page link to it. */
.area-list { display: grid; gap: 10px; max-width: 540px; margin-top: 28px; }
.area-county { border-radius: var(--radius-lg); background: var(--surface-tint); }
.section--tint .area-county { background: var(--surface); }
.area-county summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; list-style: none; cursor: pointer;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.area-county summary::-webkit-details-marker { display: none; }
.area-county summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.area-county[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.area-county ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
  margin: 0; padding: 0 24px 22px; list-style: none; font-size: 18px;
}
.area-county a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Footer ---------- */

.site-footer { padding-block: 24px 48px; }
.footer-grid { display: grid; grid-template-columns: 1fr; border-block: 1px solid var(--line); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col { padding: 28px 0; }
.footer-col + .footer-col { border-top: 1px solid var(--line); }
@media (min-width: 720px) {
  .footer-col:nth-child(2) { border-top: 0; border-left: 1px solid var(--line); padding-left: 32px; }
  .footer-col--wide { grid-column: 1 / -1; }
}
.footer-col h2 { font-size: 17px; color: var(--ink); }
.footer-col ul { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 18px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 40px; }
.footer-bottom img { height: 84px; width: auto; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-size: 16px; }
.footer-legal a { color: var(--ink-body); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

.social { display: flex; gap: 8px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.social a:hover { background: var(--surface-tint); }
.social svg { width: 22px; height: 22px; }

/* ---------- Holiday page ---------- */

.hero--night { background: #070b17; }
.snow { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }

/* Holiday easter egg (js/bulbs.js): hand-drawn C9 bulbs on a looped cord across the top of the
   holiday photo, just under the floating header. Tap to light or unlight; light all 8 to win.
   One strand on every screen size: the cord and bulbs scale together, and positions are
   percentages of the cord drawing (viewBox 1200 x 200). */
.light-string { position: absolute; top: 88px; left: 0; right: 0; z-index: 1; aspect-ratio: 1200 / 200; }
.light-string[hidden] { display: none; }
.light-string__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.light-string__cord { stroke: #2c4f37; stroke-width: 3.5; }
.light-string__cord-shine { stroke: #a9dcb8; stroke-opacity: 0.65; stroke-width: 1.2; }
.bulb {
  position: absolute; left: var(--x); top: var(--y);
  display: block; width: clamp(30px, 4.2vw, 52px); height: auto; aspect-ratio: 40 / 64; padding: 0;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  transform: translateX(-50%) rotate(var(--tilt)); transform-origin: 50% 2px;
  -webkit-tap-highlight-color: transparent;
}
.bulb svg { display: block; width: 100%; height: 100%; overflow: visible; transition: filter 0.25s ease; }
.bulb__glass { fill: #f3f6fa; stroke: #15171d; stroke-width: 2.2; stroke-linejoin: round; transition: fill 0.2s ease; }
.bulb__filament { fill: none; stroke: #15171d; stroke-width: 1.5; stroke-linecap: round; }
.bulb__socket { fill: var(--socket); stroke: #15171d; stroke-width: 2.2; stroke-linejoin: round; }
.bulb__shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity 0.2s ease; }
.bulb:hover .bulb__glass { fill: #fff; }
.bulb[aria-pressed="true"] .bulb__glass { fill: var(--bulb); }
.bulb[aria-pressed="true"] .bulb__shine { opacity: 0.8; }
.bulb[aria-pressed="true"] svg { filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 18px var(--glow)); animation: twinkle 2.6s ease-in-out infinite; }
.bulb:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 4px; }
.bulb:nth-child(4n+1) { --bulb: #ec3f3f; --glow: rgba(236, 63, 63, 0.6); --socket: #1f3a5c; }
.bulb:nth-child(4n+2) { --bulb: #4fd6a4; --glow: rgba(79, 214, 164, 0.6); --socket: #f3f6fa; }
.bulb:nth-child(4n+3) { --bulb: #5cb8f0; --glow: rgba(92, 184, 240, 0.6); --socket: #6ccba0; }
.bulb:nth-child(4n+4) { --bulb: #ffbe2e; --glow: rgba(255, 190, 46, 0.65); --socket: #1f3a5c; }
.bulb:nth-child(3n+2)[aria-pressed="true"] svg { animation-duration: 3.4s; }
.bulb:nth-child(3n)[aria-pressed="true"] svg { animation-duration: 2.1s; }
.bulb:nth-child(1) { --x: 6.667%; --y: 35%; --tilt: 14deg; }
.bulb:nth-child(2) { --x: 19.167%; --y: 56%; --tilt: -22deg; }
.bulb:nth-child(3) { --x: 32.083%; --y: 32%; --tilt: 8deg; }
.bulb:nth-child(4) { --x: 44.167%; --y: 59%; --tilt: 26deg; }
.bulb:nth-child(5) { --x: 57.5%; --y: 36%; --tilt: -12deg; }
.bulb:nth-child(6) { --x: 70%; --y: 54%; --tilt: 18deg; }
.bulb:nth-child(7) { --x: 82.917%; --y: 30%; --tilt: -14deg; }
.bulb:nth-child(8) { --x: 94.167%; --y: 52%; --tilt: 10deg; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }

/* Shown to visitors who already unlocked the code on this device: bottom-left of the holiday photo. */
.gift-reopen {
  position: absolute; left: var(--gutter); bottom: 20px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--glass); color: var(--text-on-dark); cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
}
.gift-reopen[hidden] { display: none; }
.gift-reopen svg { width: 16px; height: 16px; }
.gift-reopen:hover { background: rgba(28, 30, 38, 0.9); }

.gift {
  width: min(440px, calc(100vw - 32px)); padding: 0;
  border: 0; border-radius: 22px;
  background: var(--surface); color: var(--ink-body);
}
.gift::backdrop { background: rgba(4, 8, 18, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gift__inner { display: grid; justify-items: center; gap: 14px; padding: 36px 28px 20px; text-align: center; }
.gift__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-mint); color: var(--on-mint); }
.gift__icon svg { width: 30px; height: 30px; }
.gift h2 { font-size: 26px; }
.gift__inner > p { max-width: 34ch; font-size: 15px; line-height: 1.55; }
.gift strong { color: var(--ink); }
.gift__code-box {
  display: grid; justify-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 16px;
  border: 1.5px dashed var(--brand-mint-deep); border-radius: 14px; background: #effcf8;
}
.gift__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gift__code { font-size: 28px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink); user-select: all; }
.gift__fine, .gift__saved { font-size: 12.5px; color: var(--muted); }
.gift__actions { display: grid; gap: 4px; width: 100%; margin-top: 6px; }
.gift__close {
  min-height: 44px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--muted);
}
.gift__close:hover { color: var(--ink); }

/* Live Google reviews (embed/reviews.html) in a sandboxed, fixed-height frame, sized for ONE scrolling row
   (set in Common Ninja). The embed page scales the widget up 1.15x once the frame is 600px wide and 1.3x at
   1000px; these breakpoints are those frame widths. Measured 624px / 661px / 745px tall (2026-10-05). */
.reviews-frame { display: block; width: 100%; height: 640px; margin-top: 40px; border: 0; background: transparent; }
@media (min-width: 632px) { .reviews-frame { height: 680px; } }
@media (min-width: 1053px) { .reviews-frame { height: 765px; } }

/* Quote form (Tally) in a fixed-height frame. Tally's own resizing needs its script on the page, which this
   site doesn't load, so the frame is made tall enough for the form's longest step (step 1) with every "required"
   message showing. Then the form never scrolls inside its frame and visitors only scroll the page. Tally's cover
   banner is always a quarter of the frame's height, so each height = (form without banner + ~30px) / 0.75.
   Form without banner, with the messages (measured 2026-10-06 at frame widths 286-1488px): 937px at 286 wide,
   895 at 326, 871 at 341-380, 847 at 396, 829 at 446, 805 at 525-560, then 626 once the frame is wider than
   576px (Tally's wider layout). A few px extra for desktop scrollbars. Re-measure if fields are added to the
   form or the cover banner is removed in Tally. */
.quote-form { max-width: var(--maxw); }   /* full width, like the live site's form */
.quote-form__frame {
  display: block; width: 100%; height: 1290px; margin-top: 32px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
@media (min-width: 360px) { .quote-form__frame { height: 1235px; } }
@media (min-width: 375px) { .quote-form__frame { height: 1205px; } }
@media (min-width: 430px) { .quote-form__frame { height: 1170px; } }
@media (min-width: 480px) { .quote-form__frame { height: 1150px; } }
@media (min-width: 560px) { .quote-form__frame { height: 1125px; } }
@media (min-width: 640px) { .quote-form__frame { height: 875px; } }

/* Holiday lighting quote pop-up (holiday-lighting.html, opened by js/site.js): red title, dotted red border.
   The pop-up itself scrolls; the frame is tall enough that the form never scrolls inside it. With the title
   hidden (no cover banner), the form measured (2026-10-06, after the text opt-in box was added) 1,431px tall at
   250px wide, 1,341 at 305, 1,252 at 344, 1,228 at 360, 1,179 at 400, 1,137 at 466, 1,113 at 520-560 and 993
   at 580+ (Tally's wider layout starts past 576px). Each height adds ~200px for Tally's "required" messages
   (9 required fields), plus a few px for desktop scrollbars. Frame width = pop-up width minus 70px (94px from
   560px wide), so the breakpoints below are those frame widths. */
.lights-quote {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 3px dotted var(--holiday-red); border-radius: 22px;
  background: var(--surface); color: var(--ink-body);
}
.lights-quote::backdrop { background: rgba(4, 8, 18, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html:has(.lights-quote[open]) { overflow: hidden; }   /* the page behind stays put while the pop-up scrolls */
.lights-quote__inner { position: relative; padding: 28px 16px 20px; }
.lights-quote__title { padding-inline: 44px; font-size: clamp(26px, 5vw, 34px); color: var(--holiday-red); text-align: center; text-wrap: balance; }
.lights-quote__close {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 30px; line-height: 1; color: var(--muted);
}
.lights-quote__close:hover { background: var(--surface-tint); color: var(--ink); }
.lights-quote__frame { display: block; width: 100%; height: 1640px; margin-top: 16px; border: 0; background: transparent; }
@media (min-width: 375px) { .lights-quote__frame { height: 1545px; } }
@media (min-width: 414px) { .lights-quote__frame { height: 1455px; } }
@media (min-width: 470px) { .lights-quote__frame { height: 1400px; } }
@media (min-width: 560px) {
  .lights-quote__inner { padding: 32px 28px 24px; }
  .lights-quote__frame { height: 1360px; }
}
@media (min-width: 712px) { .lights-quote__frame { height: 1200px; } }

/* Centered section heading with a button row under the grid (holiday page). */
.section-head--center { max-width: 900px; margin-inline: auto; text-align: center; }
.section-head--center .h-section { margin-inline: auto; text-wrap: balance; }
.section-head--center .sub { margin-inline: auto; }
.center-cta { display: flex; justify-content: center; margin-top: 48px; }
.section-head + .reviews-box { margin-top: 0; }

/* Feature cards: a round mark (number or check), a title and a short line, centered. */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
  padding: 42px 32px 46px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.feature-card__mark {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--ink); color: var(--text-on-dark); font-size: 22px; font-weight: 700;
}
.feature-card__mark svg { width: 23px; height: 23px; }
.feature-card h3 { font-size: 30px; line-height: 1.2; }
.feature-card p { max-width: 38ch; margin: 14px auto 0; font-size: 19px; line-height: 1.6; }

/* Numbered FAQ (01, 02, ...). */
.faq-list--numbered { counter-reset: faq; }
.faq-list--numbered summary::before {
  counter-increment: faq; content: counter(faq, decimal-leading-zero);
  flex: none; min-width: 2ch; font-weight: 700; color: var(--muted);
}
.faq-list--numbered summary span { flex: 1; }

/* Holiday lighting page (body.page-holiday): red titles and buttons, green card titles and Call us. */
.page-holiday .btn { background: var(--holiday-red); border-color: var(--holiday-red); color: #fff; }
.page-holiday .btn:hover { background: var(--holiday-red-deep); border-color: var(--holiday-red-deep); }
.page-holiday .btn--deep { background: var(--holiday-green); border-color: var(--holiday-green); }
.page-holiday .btn--deep:hover { background: var(--holiday-green-deep); border-color: var(--holiday-green-deep); }
.page-holiday .section:not(.section--deep) .h-section { color: var(--holiday-red); }
.page-holiday .feature-card h3 { color: var(--holiday-green); }
.page-holiday .feature-card__mark { background: var(--holiday-red); color: #fff; }
.page-holiday .feature-card__mark--check { background: var(--holiday-green); }
.page-holiday .faq-list--numbered summary::before { color: var(--holiday-red); }

.prose { max-width: 860px; margin-top: 48px; font-size: 20px; line-height: 1.65; }
.prose > * + * { margin-top: 16px; }
.prose h3 { margin-top: 44px; font-size: 28px; }
.prose ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.prose ol { display: grid; gap: 10px; margin-bottom: 0; padding-left: 1.4em; }
.prose ol ul { margin-top: 10px; padding-left: 0.2em; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose h2 { margin-top: 52px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.2; }

/* ---------- Guides (articles) ---------- */

.article .h-section, .guides-hub .h-section { max-width: 22ch; }
.article-meta { margin-top: 18px; font-size: 16px; color: var(--ink-body); }
.article .lead { margin-top: 28px; }
.article-photo {
  width: 100%; max-width: 860px; margin-top: 40px; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-tint);
}
.guide-list { display: grid; gap: 16px; max-width: 860px; margin: 48px 0 0; padding: 0; list-style: none; }
.guide-card { padding: 28px 32px; border-radius: var(--radius-lg); background: var(--surface-tint); }
.guide-card h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.25; }
.guide-card h2 a { color: inherit; text-decoration: none; }
.guide-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.guide-card p { margin-top: 10px; font-size: 18px; line-height: 1.6; }

/* Privacy policy: its lists keep real bullets (other prose lists have none). */
.policy .prose ul { padding-left: 1.3em; list-style: disc; }
.policy .prose ul.policy-contact { padding-left: 0; list-style: none; }
.policy-note { font-size: 16px; font-style: italic; color: var(--ink-body); }

/* Thank-you page (where the quote forms send visitors after Submit): round photo over a navy services panel.
   Phones: photo on top, overlapping the panel. From 760px: photo on the left, overlapping the panel's edge. */
.thanks { text-align: center; }
.thanks__title { font-size: clamp(34px, 4.4vw, 60px); text-wrap: balance; }
.thanks__note { margin-top: 18px; font-size: clamp(19px, 1.5vw, 22px); }
.thanks__card { display: grid; justify-items: center; max-width: 900px; margin: 56px auto 0; }
.thanks__photo {
  position: relative; z-index: 1; width: clamp(200px, 56vw, 260px); height: auto; aspect-ratio: 1;
  margin-bottom: -60px; border: 6px solid var(--surface); border-radius: 50%; object-fit: cover;
}
.thanks__panel { width: 100%; padding: 84px 28px 32px; border-radius: var(--radius-lg); background: var(--deep); }
.thanks__services { font-size: clamp(28px, 3vw, 40px); color: var(--card-title); }
.thanks__services span { color: var(--brand-mint); }
.thanks__list { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 20px; }
.thanks__list li { display: flex; align-items: center; justify-content: center; gap: 10px; }
.thanks__list a { color: var(--text-on-dark); text-decoration: none; }
.thanks__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.thanks__list svg { flex: none; width: 20px; height: 20px; color: var(--brand-mint); }
.thanks__more a { font-style: italic; }
@media (min-width: 760px) {
  /* three columns: the photo spans the first two, the panel the last two, so they overlap by 80px */
  .thanks__card { grid-template-columns: 220px 80px minmax(0, 1fr); align-items: center; justify-items: stretch; }
  .thanks__photo { grid-area: 1 / 1 / 2 / 3; width: 300px; margin: 0; }
  .thanks__panel { grid-area: 1 / 2 / 2 / 4; padding: 44px 48px 44px 128px; text-align: right; }
  .thanks__list li { justify-content: flex-end; }
}
.thanks__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  max-width: 900px; margin: 40px auto 0;
}
.thanks__home { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
.thanks__home:hover { text-decoration: underline; text-underline-offset: 3px; }
.thanks__home svg { width: 20px; height: 20px; }
.thanks__logo { width: auto; height: 64px; }

/* Real Google reviews quoted on the page (word for word; first name and last initial). */
.review-quotes { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .review-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review-quotes + .reviews-box { margin-top: 16px; }
.review-quote {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; margin: 0; padding: 30px 32px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.review-quote blockquote { margin: 0; font-size: 20px; line-height: 1.6; color: var(--ink-body); }
.review-quote figcaption { font-size: 16px; font-weight: 600; color: var(--muted); }
.review-quote .stars { margin-right: 10px; }
.prose .review-quotes, .prose > .review-quote { margin-top: 28px; }
.prose .review-quote blockquote { font-size: 19px; }
/* Reviews page: real reviews grouped under small headings (seo-business.pl). */
.review-group { margin-top: 56px; font-size: clamp(24px, 2.4vw, 32px); }
.review-group + .review-quotes { margin-top: 20px; }

/* About page: the business facts as label / value rows. */
.facts { max-width: 1040px; margin: 40px 0 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .facts > div { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } }
.facts dt { font-weight: 700; color: var(--ink); }
.facts dd { margin: 0; line-height: 1.6; }
.facts a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Service pages ---------- */

/* "What to expect": the write-up, with the crew photo for that service beside it on wide screens. */
.expect { display: grid; gap: 48px; }
.expect__text { min-width: 0; }
.expect__photo {
  width: 100%; max-width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-tint);
}
@media (min-width: 960px) {
  .expect--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start; gap: 64px; }
  .expect__photo { position: sticky; top: 112px; }
}
/* In place of the single photo: a labeled before/after pair, stacked. */
.before-after { display: grid; gap: 16px; }
@media (min-width: 960px) { .before-after { position: sticky; top: 112px; } }
.before-after__item { position: relative; }
.before-after__item img {
  width: 100%; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-tint);
}
.before-after__label {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(4, 6, 16, 0.72); color: var(--text-on-dark);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

.faq__sub { max-width: 56ch; margin: 16px auto 0; text-align: center; }

.faq { max-width: 1040px; margin-inline: auto; }
.faq .h-section { text-align: center; }
.faq-list { display: grid; gap: 12px; margin-top: 56px; }
.faq-item { border-radius: var(--radius-lg); background: var(--surface-tint); }
.section--tint .faq-item { background: var(--surface); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 28px; list-style: none; cursor: pointer;
  font-size: 20px; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-item p { max-width: 70ch; padding: 0 28px 26px; font-size: 19px; line-height: 1.65; }

/* Closing call-to-action band. The holiday page adds a photo and snow behind it. */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--deep); color: var(--text-on-dark); text-align: center;
}
.cta-band h2 { max-width: 16ch; margin-inline: auto; color: var(--text-on-dark); text-wrap: balance; }
.cta-band p { max-width: 52ch; margin: 22px auto 0; color: var(--text-on-dark-muted); }
.cta-band .btn-row { justify-content: center; }
.cta-band--night { padding-block: clamp(110px, 15vw, 200px); background: #070b17; }
.cta-band--night::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(4, 6, 16, 0.5); }
.cta-band--night .hero__media { z-index: -3; }
.cta-band--night h2 { max-width: 14ch; }

/* ---------- Homepage service chooser ---------- */

/* The first screen of the homepage in holiday season: two halves, "I need Window Cleaning" and "I need Holiday Lighting".
   Hidden unless js/season.js puts .holiday-season on <html> (September 1 through January 31); the rest of the year the
   homepage starts at the window cleaning hero. "Take me there" scrolls down to that hero or opens the holiday page. */
.splash { position: relative; display: none; min-height: 100svh; background: var(--deep); }
.holiday-season .splash { display: grid; }
/* "Take me there" and the header logo (index.html#window-cleaning) land exactly on the hero, which is built to sit under
   the floating header; the site-wide 112px scroll-padding would leave a strip of the chooser showing above it. */
#window-cleaning { scroll-margin-top: -112px; }
@media (min-width: 760px) { .splash { grid-template-columns: 1fr 1fr; } }
.splash__logo {
  position: absolute; top: 22px; left: 50%; z-index: 3; transform: translateX(-50%);
  width: min(100% - 32px, 640px); text-align: center;
}
/* A soft dark fade across the top so the logo doesn't wash out over the bright window photo.
   The logo file (logo-on-photo.png) also has its peace-hand lines filled in navy, so no photo shows through them. */
.splash::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 280px; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 7, 18, 0.6) 0%, rgba(4, 7, 18, 0) 100%);
}
.splash__logo img { height: clamp(88px, 10vw, 140px); width: auto; margin-inline: auto; }
.splash__half {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: 50svh;
  padding: clamp(205px, 17vw, 260px) 24px 72px; text-align: center; color: var(--text-on-dark);
}
.splash__img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.splash__half::before { content: ""; position: absolute; inset: 0; z-index: -2; }
.splash__half--windows::before { background: linear-gradient(180deg, rgba(6, 52, 58, 0.5) 0%, rgba(5, 36, 44, 0.74) 100%); }
.splash__half--holiday::before { background: linear-gradient(180deg, rgba(4, 7, 18, 0.45) 0%, rgba(4, 7, 18, 0.7) 100%); }
@media (max-width: 759px) { .splash__half--holiday { padding-top: 72px; } }
.splash__kicker { font-size: 16px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.splash__title {
  max-width: 8ch; margin: 10px auto 0;
  font-size: clamp(44px, 5.8vw, 88px); font-weight: 700; line-height: 1.02; text-wrap: balance;
}
.splash__festive {
  background: linear-gradient(90deg, #ff5a5a 0%, #ffb43a 48%, #3ddc84 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash__btn { margin-top: 30px; }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--brand-mint); border-color: var(--brand-mint); }
.btn--holiday { background: var(--holiday-red); border-color: var(--holiday-red); color: #fff; }
.btn--holiday:hover { background: var(--holiday-red-deep); border-color: var(--holiday-red-deep); }
/* A strand of glowing C9 bulbs along the top of the holiday half. Bulbs keep their size;
   wider screens just show more of the strand. */
.splash__strand { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 90px; pointer-events: none; }
.strand-bulb { animation: strand-twinkle 3.2s ease-in-out infinite; }
.strand-bulb:nth-of-type(3n+2) { animation-duration: 2.4s; animation-delay: -1.1s; }
.strand-bulb:nth-of-type(3n) { animation-duration: 4s; animation-delay: -2.3s; }
@keyframes strand-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .bulb svg, .strand-bulb { animation: none !important; }
}