/* Charter Painting & Restoration - shared stylesheet
   Owned by the orchestrator. Page subagents append page-scoped rules only,
   each under a banner comment reading page: followed by the page slug.
   Do not edit the shared token, header, or footer sections below. */

:root {
  --blue: #0e5aa1;
  --blue-dark: #0a487f;
  --blue-bright: #1a6fc2;
  --blue-deep: #063a6b;
  --gold: #f4b41a;
  --ink: #13202b;
  --body: #3b4650;
  --muted: #6b7680;
  --line: #e3e8ee;
  --bg: #ffffff;
  --bg-alt: #f2f5f8;
  --bg-soft: #eef2f7;
  --white: #ffffff;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(19, 32, 43, 0.08);
  --shadow: 0 10px 30px rgba(19, 32, 43, 0.12);
  --wrap: 1200px;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is required alongside the width/height attributes: those map to
   CSS presentational hints, so an image scaled with width:100% would otherwise
   keep its natural pixel height and stretch. Rules that set an explicit height
   (.hero-img, .svc-card .thumb, .thumb-row img) are more specific and win. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #fff; padding: 8px 14px; z-index: 999; border-radius: 4px; }

/* ---------- eyebrow label with roller icon ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue); font-family: var(--sans); font-weight: 700;
  font-size: .82rem; letter-spacing: .04em; text-transform: none; margin-bottom: .6rem;
}
.eyebrow::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h13v6H4z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M17 6h3v4h-7v3h-2v6H9v-8h4V6z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h13v6H4z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M17 6h3v4h-7v3h-2v6H9v-8h4V6z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 700; font-size: .9rem;
  padding: 13px 26px; border-radius: 6px; background: var(--blue); color: #fff;
  border: 2px solid var(--blue); cursor: pointer; transition: background .25s, color .25s, transform .2s;
  text-align: center; letter-spacing: .02em;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-white { background: #fff; color: var(--blue); border-color: #fff; }
.btn-white:hover { background: var(--bg-alt); color: var(--blue-dark); border-color: var(--bg-alt); }

/* ---------- top bar ---------- */
.topbar { background: var(--blue); color: #fff; font-size: .8rem; }
.topbar-inner { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 24px; flex-wrap: wrap; }
.topbar-info { margin: 0; font-weight: 700; letter-spacing: .01em; }
.topbar-info a { color: #fff; text-decoration: none; }
.topbar-social { display: flex; gap: 10px; align-items: center; }
.topbar-social img { width: 18px; height: 18px; }

/* ---------- header / nav ---------- */
.site-header { background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--line); }
.header-inner { display: flex; align-items: center; gap: 20px; padding: 10px 24px; }
.logo img { height: 46px; width: auto; }
.main-nav { margin-left: auto; }
.main-nav > ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center; }
.main-nav a { color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: .95rem; padding: 6px 0; position: relative; }
.main-nav a:hover, .main-nav a.active { color: var(--blue); }
.main-nav .has-sub { position: relative; }
.main-nav .has-sub > a::after { content: " ▾"; font-size: .7rem; }
.submenu {
  list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0;
  background: #fff; min-width: 250px; box-shadow: var(--shadow); border-radius: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 120;
}
.main-nav .has-sub:hover .submenu,
.main-nav .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li { display: block; }
.submenu a { display: block; padding: 9px 18px; font-size: .9rem; white-space: nowrap; }
.submenu a:hover { background: var(--bg-alt); }
.btn-quote { margin-left: 6px; }
.nav-toggle { display: none; background: var(--blue); color: #fff; border: none; font-size: 1.4rem; width: 44px; height: 40px; border-radius: 6px; cursor: pointer; }

/* ---------- hero band ---------- */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,32,56,.72) 0%, rgba(6,32,56,.42) 55%, rgba(6,32,56,.2) 100%); z-index: 1; }
.hero-inner { position: relative; z-index: 2; padding: 120px 0; max-width: 640px; }
.hero .eyebrow { color: #cfe3f6; }
.hero .eyebrow::before { background: #cfe3f6; }
.hero h1, .hero h2 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.hero p { color: #eef4fb; font-size: 1.05rem; max-width: 540px; }
/* centered page hero (interior pages) */
/* 718px matches the source's hero text column on interior pages. */
.hero-center .hero-inner { max-width: 718px; margin: 0 auto; text-align: center; padding: 96px 0; }
/* .hero p caps the copy at 540px for the left-aligned home hero. In a centered
   hero that cap has to be centred too, or the narrower paragraph box stays flush
   left inside the 718px column and its text sits left of the h1. */
.hero-center .hero-inner > * { margin-inline: auto; }
.hero-center::after { background: linear-gradient(180deg, rgba(6,32,56,.55), rgba(6,32,56,.55)); }

/* ---------- generic sections ---------- */
.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); }
.section-soft { background: var(--bg-soft); }
.center { text-align: center; }
.lead { font-size: 1.05rem; color: var(--body); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* ---------- blue bands ---------- */
.band-blue { background: linear-gradient(120deg, var(--blue-deep), var(--blue) 55%, var(--blue-bright)); color: #fff; }
.band-blue h1, .band-blue h2, .band-blue h3, .band-blue h4 { color: #fff; }
.band-blue .eyebrow { color: #bcd9f5; }
.band-blue .eyebrow::before { background: #bcd9f5; }

/* guarantee strip */
.guarantee { background: linear-gradient(120deg, var(--blue) 0%, var(--blue-bright) 100%); color: #fff; padding: 26px 0; }
.guarantee-inner { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; flex-wrap: wrap; }
.guarantee .trophy { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.guarantee h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 2rem); }
.guarantee small { display: block; font-family: var(--sans); font-weight: 400; opacity: .9; }

/* pills row */
.pills { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.pill { background: #fff; color: var(--blue); border-radius: 40px; padding: 10px 22px; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); }
.pill svg { width: 18px; height: 18px; }

/* ---------- service cards ---------- */
.services-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.svc-card .thumb { width: 100%; height: 200px; object-fit: cover; }
.svc-card .body { padding: 20px 22px 26px; }
.svc-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.svc-card h3 a { color: var(--ink); }
.svc-card h3 a:hover { color: var(--blue); }
.svc-card p { margin: 0; font-size: .95rem; color: var(--muted); }

/* ---------- why-choose box ---------- */
.wc-box { background: linear-gradient(120deg, var(--blue-deep), var(--blue)); color: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); }
.wc-row { display: flex; gap: 22px; margin-bottom: 18px; flex-wrap: wrap; }
.wc-row .item { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.wc-row .item::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: .8rem; }
.meter-label { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px; }
.meter { height: 8px; border-radius: 6px; background: rgba(255,255,255,.25); overflow: hidden; }
.meter > span { display: block; height: 100%; width: 95%; background: #fff; border-radius: 6px; animation: growbar 1.6s ease both; }

/* ---------- testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 34px; }
.testi-card { background: linear-gradient(120deg, var(--blue), var(--blue-bright)); color: #fff; border-radius: var(--radius-lg); padding: 26px 28px; position: relative; box-shadow: var(--shadow); }
.testi-card p { color: #eef4fb; font-size: .95rem; }
.testi-card .who { font-weight: 700; color: #fff; margin-top: 12px; }
.testi-card .stars { color: var(--gold); letter-spacing: 2px; }
.testi-card .quote-mark { position: absolute; right: 20px; bottom: 8px; font-size: 3rem; font-family: var(--serif); opacity: .35; line-height: 1; }

/* ---------- gallery grid ---------- */
.gallery-grid { columns: 4 240px; column-gap: 14px; }
.gallery-grid img { width: 100%; border-radius: 10px; margin-bottom: 14px; break-inside: avoid; box-shadow: var(--shadow-sm); transition: transform .3s; }
.gallery-grid img:hover { transform: scale(1.02); }

/* ---------- media collage ---------- */
.media-collage { position: relative; }
.media-collage img { border-radius: 12px; box-shadow: var(--shadow); width: 100%; }
.stat-badge { position: absolute; left: 8%; bottom: 10%; background: var(--blue); color: #fff; border-radius: 10px; padding: 16px 20px; box-shadow: var(--shadow); text-align: center; }
.stat-badge b { display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1; }
.stat-badge span { font-size: .78rem; }

/* ---------- process steps / service lists ---------- */
.svc-list { list-style: none; padding: 0; margin: 1.2rem 0; }
.svc-list li { position: relative; padding: 8px 0 8px 32px; border-bottom: 1px solid var(--line); }
.svc-list li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--blue); font-weight: 700; }
.thumb-row { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.thumb-row img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-sm); }
.thumb-row img:first-child { grid-row: span 2; }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.process-steps .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; text-align: center; box-shadow: var(--shadow-sm); }
.process-steps .step .num { width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; margin: 0 auto 14px; }

/* ---------- contact ---------- */
.contact-form { background: #fff; border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); max-width: 720px; margin: 0 auto; }
.contact-form h2 { color: var(--blue); margin-top: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 18px; }
.field label { display: block; color: var(--blue); font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #d7dee6; border-radius: 6px; background: #eef1f4; font: inherit; color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.checks { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.checks label { display: flex; align-items: center; gap: 10px; color: var(--body); font-weight: 400; }
.form-note { color: var(--muted); font-size: .85rem; }
.hp { position: absolute; left: -9999px; overflow: hidden; width: 1px; height: 1px; }
.contact-info p { margin: .2rem 0; }
.contact-info .label { color: var(--blue); font-weight: 700; margin-bottom: 6px; }

/* Leaflet map */
.cp-map { width: 100%; height: 420px; border-radius: 4px; z-index: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--blue); color: #dbe8f5; font-size: .9rem; }
.site-footer a { color: #dbe8f5; }
.site-footer a:hover { color: #fff; }
/* The pale footer link colour above outranks .btn-white (0,1,1 vs 0,1,0), which
   left "Schedule Consultation" near-illegible on its white pill. Restore the
   button's own colour and weight. */
.site-footer a.btn-white { color: var(--blue); font-weight: 700; }
.site-footer a.btn-white:hover { color: var(--blue-dark); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1.3fr; gap: 34px; padding: 54px 24px 34px; }
.footer-logo { background: #fff; border-radius: 8px; padding: 10px 14px; width: 190px; margin-bottom: 16px; }
/* Real Google Maps embed, matching the map in the source site's footer. */
.footer-map { display: block; width: 190px; height: 120px; border: 0; border-radius: 8px; background: #cdd9e6; }
.footer-col h4 { color: #fff; font-family: var(--serif); font-size: 1.15rem; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-social { display: flex; gap: 12px; margin: 14px 0; }
.footer-social img { width: 34px; height: 34px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); text-align: center; padding: 16px; font-size: .82rem; color: #c6d7e8; }

/* ---------- motion ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes growbar { from { width: 0; } to { width: 95%; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
/* Entrance motion is scroll-triggered via AOS (see assets/site.js), matching the
   source, whose Wix motion system fires glideIn/floatIn/growIn/fadeIn as each
   element scrolls into view. These legacy on-load classes are kept as the
   no-JS fallback: if AOS never initialises, site.js strips the data-aos
   attributes and this animation still plays, so nothing stays hidden. */
.reveal { animation: fadeUp .7s ease both; }
.reveal-2 { animation: fadeUp .7s ease .12s both; }
.reveal-3 { animation: fadeUp .7s ease .24s both; }
.fade { animation: fadeIn 1s ease both; }
.svc-card, .pill, .step, .testi-card { animation: fadeUp .7s ease both; }
/* Once AOS owns an element, its own transition drives it - drop the CSS
   animation so the two don't fight. */
[data-aos] { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .meter > span { width: 95%; }
  /* never leave AOS elements stuck at opacity 0 */
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .cards-3, .process-steps { grid-template-columns: 1fr 1fr; }
  .testi-grid, .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .thumb-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; margin-left: auto; }
  .btn-quote { display: none; }
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: var(--shadow); display: none; margin: 0; }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0; }
  .main-nav > ul > li { padding: 4px 24px; }
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding-left: 12px; min-width: 0; }
  .cards-3, .process-steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-inner { padding: 80px 0; }
  .gallery-grid { columns: 2 150px; }
}

/* ---------- icon system ----------
   Icons are the source site's own inline SVGs (Wix vector images), lifted from
   the rendered page with their scoped fill rules resolved into attributes.
   Sizing lives here so the markup stays free of inline dimensions. */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: middle; flex: none; }
.pill .ico { width: 20px; height: 20px; }
.guarantee .trophy { background: #fff; }
.guarantee .trophy .ico { width: 30px; height: 30px; }
.benefit-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--bg-soft); }
.benefit-icon .ico { width: 38px; height: 38px; }
.bubble-icon { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%; background: var(--bg-soft); }
.bubble-icon .ico { width: 44px; height: 44px; }
.wc-row .item .ico { width: 22px; height: 22px; margin-right: 8px; }

/* ---------- carousels (Swiper) ----------
   The source renders "Our Complete Projects" and the testimonials as real
   sliders (Wix pro-gallery horizontal scroll + slideshow with prev/next). */
.cp-swiper { position: relative; padding-bottom: 46px; }
.cp-swiper .swiper-slide { height: auto; }
.cp-swiper .swiper-slide img { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius); }
.cp-swiper .swiper-button-prev,
.cp-swiper .swiper-button-next { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }
.cp-swiper .swiper-button-prev::after,
.cp-swiper .swiper-button-next::after { font-size: 1rem; font-weight: 700; }
.cp-swiper .swiper-pagination { bottom: 8px; }
.cp-swiper .swiper-pagination-bullet { background: var(--blue); opacity: .35; }
.cp-swiper .swiper-pagination-bullet-active { opacity: 1; }
.band-blue .cp-swiper .swiper-pagination-bullet { background: #fff; }
.testi-swiper .swiper-slide { height: auto; }
.testi-swiper .testi-card { height: 100%; animation: none; }

/* ---------- video embeds ---------- */
.video-frame { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #06203a; }
.video-embed { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.video-embed > iframe,
.video-embed > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* Hero background video, matching the source's autoplaying hero. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* ---------- FAQ accordion ----------
   The source renders FAQs as numbered cards with a chevron toggle; this was
   previously page-scoped to deck-refinishing only, leaving the other service
   pages with bare <details>. Shared here so every service page matches. */
.faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-item summary { display: flex; align-items: stretch; gap: 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { background: var(--blue); color: #fff; font-family: var(--serif); font-weight: 700; flex: 0 0 64px; display: grid; place-items: center; }
.faq-q { flex: 1; padding: 18px 16px; font-weight: 600; color: var(--ink); align-self: center; }
.faq-chev { flex: 0 0 44px; display: grid; place-items: center; color: var(--blue); transition: transform .2s; }
.faq-chev .ico { width: 14px; height: 10px; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 22px 22px 22px; color: var(--body); }
.faq-a ul { margin: .4rem 0 .8rem 1.2rem; }

/* ---------- Our Process imagery ---------- */
.process-imgs { display: flex; gap: 20px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.process-imgs img { border-radius: 16px; box-shadow: var(--shadow); width: 100%; }
.process-imgs .a { max-width: 493px; }
.process-imgs .b { max-width: 460px; }

/* ---------- cards on blue bands ----------
   .band-blue forces white headings, which made the white cards in the About Us
   values row and the Our Benefits band render white-on-white (the "missing
   headers" bug). Cards keep their own ink colour. */
.band-blue .svc-card h3,
.band-blue .svc-card h3 a { color: var(--ink); }
.band-blue .svc-card p { color: var(--muted); }

/* Our Benefits band - the source paints this section blue (rgb(1,85,165)),
   not the light grey the clone used. */
.benefits-band { background: #0155A5; color: #fff; }
.benefits-band h1, .benefits-band h2, .benefits-band h3, .benefits-band h4 { color: #fff; }
.benefits-band .eyebrow { color: #cfe6fb; }
.benefits-band .eyebrow::before { background: #cfe6fb; }
.benefits-band .svc-card h3 { color: var(--ink); }
.benefits-band .svc-card p { color: var(--muted); }

/* Home "About Us" section - the source renders this photo as the section
   background at 31% opacity over white, not as a foreground image. */
.section-about-bg {
  background:
    linear-gradient(rgba(255,255,255,.69), rgba(255,255,255,.69)),
    url("img/19b38e_962d058f21.jpg") center/cover no-repeat;
}

/* ---------- Our Process (rebuilt to the source's layout) ----------
   Measured on the original at 1440px: intro column 679px wide with the
   Contact button top-right, then a 512px column of vertically stacked steps
   beside a single 493x353 image. Steps carry no number badge in the source. */
.process-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.process-intro { max-width: 679px; }
.process-intro p { margin-bottom: 0; }
.process-cta { flex: 0 0 auto; margin-top: 6px; }
.process-body {
  display: grid; grid-template-columns: 512fr 493fr; gap: 56px; align-items: start;
  margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line);
}
/* override the old three-across card grid */
.process-body .process-steps { display: flex; flex-direction: column; gap: 26px; margin-top: 0; }
.process-body .process-steps .step {
  background: none; border: 0; box-shadow: none; padding: 0; text-align: left;
}
.process-body .process-steps .step h3 { color: var(--blue); font-size: 1.25rem; margin: 0 0 .4rem; }
.process-body .process-steps .step p { margin: 0; }
.process-media img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow); }

@media (max-width: 900px) {
  .process-head { flex-direction: column; gap: 20px; }
  .process-body { grid-template-columns: 1fr; gap: 32px; }
}

/* AOS's fade-left/right translate the element horizontally before it enters,
   which pushes the page wider than the viewport on small screens. `clip`
   contains that without creating a scroll container, so the sticky header
   keeps working (plain `overflow-x: hidden` would break it). */
body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* The base h1-h4 rule sets --ink, which beat the band's inherited white and
   left "10-Year Guarantee Against Paint Failure" near-black on blue. The
   source renders this heading white. */
.guarantee h2, .guarantee h2 small { color: #fff; }

/* Home About Us collage, proportioned from the source: the main photo occupies
   ~89% of the column, with the inset starting at 66% and overlapping its edge.
   Both source files are larger than the slot, so object-fit reproduces the
   source's crop rather than squashing them. */
.media-collage .collage-main {
  width: 89%; aspect-ratio: 460 / 468; object-fit: cover;
  border-radius: 12px; box-shadow: var(--shadow);
}
.media-collage .collage-inset {
  position: absolute; left: 66%; top: 15%; width: 30%;
  aspect-ratio: 156 / 165; object-fit: cover;
  border: 5px solid #fff; border-radius: 10px; box-shadow: var(--shadow);
}

/* Source places the card icon inline to the LEFT of the heading (icon x=192,
   heading x=254 on a 1440 viewport), not centred above it. */
.svc-card .body:has(.benefit-icon),
.svc-card .body:has(.bubble-icon) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "text text";
  align-items: center;
  column-gap: 14px;
  text-align: left;
}
.svc-card .body .benefit-icon,
.svc-card .body .bubble-icon { grid-area: icon; margin: 0; width: 48px; height: 48px; }
.svc-card .body .benefit-icon .ico,
.svc-card .body .bubble-icon .ico { width: 30px; height: 30px; }
.svc-card .body:has(.benefit-icon) > h3,
.svc-card .body:has(.bubble-icon) > h3 { grid-area: title; margin: 0; }
.svc-card .body:has(.benefit-icon) > p,
.svc-card .body:has(.bubble-icon) > p { grid-area: text; margin-top: 12px; }

/* The source renders the FAQ heading in brand blue. */
.section:has(> .wrap > .faq-list) > .wrap > h2 { color: var(--blue); }