/* Ridings Paint Contracting. Fonts follow the original site; the palette adds warm paint-swatch accents
   around the brand blue. No CSS framework: this file is the whole stylesheet, so keep it small. */
@font-face {
    font-family: "Fjalla One";
    src: url("../fonts/fjalla-one-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Josefin Sans";
    src: url("../fonts/josefin-sans-latin.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-heading: "Fjalla One", "Arial Narrow", Arial, sans-serif;
    --font-body: "Josefin Sans", Arial, sans-serif;

    /* Brand and paint-swatch colors */
    --blue: #004aad;
    --blue-dark: #003a88;
    --navy: #0f2340;
    --teal: #2a7f8a;
    --sage: #7a9a6e;
    --ochre: #e0a83a;
    --clay: #a34a24;
    --clay-dark: #8a3c1c;

    --color-heading: #13294b;
    --color-text: #1f2933;
    --color-muted: #4a5563;
    --color-bg: #fffdf9;
    --color-cream: #faf6ef;
    --color-sand: #f1e9dc;
    --color-rule: #e4dccd;
    --on-navy: #f3ead9;
    --on-navy-muted: #c9d3e0;

    --swatch: linear-gradient(90deg, var(--blue) 0 20%, var(--teal) 0 40%, var(--sage) 0 60%, var(--ochre) 0 80%, var(--clay) 0);
    --shadow: 0 1px 2px rgb(15 35 64 / .06), 0 8px 24px rgb(15 35 64 / .08);
    --radius: .5rem;
    --max-width: 72rem;

    font-family: var(--font-body);
    font-size: 106.25%;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: .15em; }
a:hover { color: var(--blue-dark); }
p { color: var(--color-muted); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

h1, h2, .section-title { font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; color: var(--color-heading); }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--color-heading); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 44rem; }
.centered { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--color-bg); padding: .5rem; z-index: 10; }

/* Header: a paint-swatch stripe, logo and phone, then the navy navigation band */
.site-header { background: #fff; border-top: 5px solid; border-image: var(--swatch) 1; }
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.brand { display: block; line-height: 0; }
.brand img { width: 13.75rem; height: auto; }
.header-contact { display: flex; align-items: center; gap: 1.25rem; }
.header-phone { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem .45rem; border: 2px solid var(--blue); border-radius: 999px; font-size: 1.125rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.header-phone:hover { background: var(--blue); color: #fff; }
.header-phone svg, .nav-phone svg { width: 1em; height: 1em; fill: currentColor; margin-top: -.15em; }
.nav-band { background: var(--navy); }
.nav-bar { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; }
.nav-toggle { display: none; font-size: 1.5rem; background: none; border: 0; cursor: pointer; color: var(--on-navy); }
.nav-phone { display: none; align-items: center; gap: .4rem; margin-left: auto; font-size: 1.05rem; font-weight: 600; color: var(--on-navy); text-decoration: none; }
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding-block: .25rem; border-bottom: 2px solid transparent; font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--on-navy); }
.site-nav a:hover { color: #fff; border-bottom-color: var(--on-navy-muted); }
.site-nav a[aria-current="page"] { color: var(--ochre); border-bottom-color: var(--ochre); }
.nav-band :focus-visible { outline-color: var(--ochre); }

@media (max-width: 48rem) {
    .header-top { justify-content: center; padding-block: 1.25rem; }
    .header-contact { display: none; }
    .nav-bar { justify-content: flex-start; flex-wrap: wrap; gap: 1rem; padding-block: .75rem; }
    .nav-toggle { display: block; }
    .nav-phone { display: inline-flex; }
    .site-nav { display: none; flex-basis: 100%; }
    .site-nav.open { display: block; }
    .site-nav ul { flex-direction: column; align-items: flex-start; gap: .5rem; padding-bottom: .5rem; }
}

main.container { padding-bottom: 4rem; }
main.full-width { padding-block: 0; }

/* Buttons: clay for the main call to action, blue for the rest */
.button { display: inline-block; background: var(--blue); color: #fff; padding: .75rem 2rem .65rem; border: 0; border-radius: 999px; text-decoration: none; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .15s, transform .15s; }
.button:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); }
.button-accent, .home-hero .button-light { background: var(--clay); color: #fff; padding: 1rem 2.25rem .9rem; }
.button-accent:hover, .home-hero .button-light:hover { background: var(--clay-dark); }
.button-light { background: #fff; color: var(--navy); }
.button-light:hover { background: var(--color-sand); color: var(--navy); }

/* Section heading with a short paint-swatch bar underneath */
.rule { width: 5rem; height: 4px; border: 0; border-radius: 2px; background: var(--swatch); margin: 1.25rem 0 2rem; }
.centered .rule { margin-inline: auto; }
.band { padding-block: 4.5rem; }
.band-gray { background: var(--color-cream); }

/* Content pages: full-width photo banner with the page heading over it */
.page-hero { position: relative; display: flex; align-items: flex-end; margin-inline: calc(50% - 50vw); min-height: 9rem; padding: 2.5rem max(1rem, calc(50vw - var(--max-width) / 2 + 1rem)) 2rem; background: var(--color-sand); margin-bottom: 3rem; }
.page-hero.has-image { min-height: clamp(16rem, 32vw, 26rem); }
.page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--swatch); }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(15 35 64 / .85), rgb(15 35 64 / .15) 65%); }
.page-hero h1 { position: relative; z-index: 2; margin: 0; max-width: 40rem; }
.page-hero.has-image h1 { color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / .3); }

.content-section { margin-bottom: 3rem; }
.content-section h2::after { content: ""; display: block; width: 4rem; height: 4px; margin-top: 1rem; border-radius: 2px; background: var(--swatch); }
.content-section img { display: block; margin-block: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 56rem) {
    /* Text on the left, photo on the right */
    .content-section:has(> img) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
    .content-section:has(> img) > * { grid-column: 1; }
    .content-section:has(> img) > img { grid-column: 2; grid-row: 1 / span 20; margin: .5rem 0 0; }
}

.feature-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; }
.feature-list li { position: relative; padding: .85rem 1rem .75rem 3rem; background: var(--color-cream); border-radius: var(--radius); color: var(--color-text); }
.feature-list li::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 75% no-repeat; }

/* Home: full-width photo with the navy panel centred on top */
.home-hero { position: relative; display: grid; place-items: center; min-height: clamp(28rem, 60vw, 45rem); padding: 4rem 1rem; overflow: hidden; }
.home-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero-panel { position: relative; max-width: 34rem; padding: 2.5rem 2.5rem 2.75rem; background: rgb(15 35 64 / .88); border-top: 6px solid; border-image: var(--swatch) 1; text-align: center; box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.home-hero-panel h1 { color: #fff; margin: 0 0 .75rem; }
.home-hero-panel p { color: var(--on-navy); font-size: 1.25rem; margin: 0 0 1.75rem; }
@media (max-width: 48rem) {
    .home-hero { min-height: 0; padding: 4rem 1rem; }
    .home-hero-panel { padding: 2rem 1.25rem 2.25rem; }
}

.home-about { padding-block: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0 4rem; padding-inline: 0; max-width: none; }
.split > div { padding: 4.5rem 0 4.5rem max(1rem, calc((100vw - var(--max-width)) / 2 + 1rem)); }
.split-image { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 48rem) {
    .split { grid-template-columns: 1fr; }
    .split > div { padding: 3rem 1rem; order: 2; }
    .split .section-title, .split .rule { text-align: center; margin-inline: auto; }
    .split-image { order: 1; aspect-ratio: 4 / 3; height: auto; }
}

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; background: var(--navy); }
.photo-grid li { overflow: hidden; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.photo-grid li:hover img { transform: scale(1.04); }
@media (max-width: 48rem) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }

.home-contact .narrow { max-width: 40rem; padding: 3rem 2rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.home-contact h2 { margin-top: 0; }
.home-contact h3 { margin: 2rem 0 .5rem; }
.home-contact .button { margin-top: 1.5rem; }
.home-contact { background: var(--color-sand); }
.home-connect { background: var(--color-cream); }

/* About: services as swatch cards, Why Choose Us as numbered tiles */
.services, .why-choose-us { margin-top: 3.5rem; }
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { --swatch-color: var(--blue); background: #fff; padding: 1.5rem 1.5rem 1.25rem; border-top: 6px solid var(--swatch-color); border-radius: var(--radius); box-shadow: var(--shadow); }
.card:nth-child(5n+2) { --swatch-color: var(--teal); }
.card:nth-child(5n+3) { --swatch-color: var(--sage); }
.card:nth-child(5n+4) { --swatch-color: var(--ochre); }
.card:nth-child(5n+5) { --swatch-color: var(--clay); }
.card h3 { margin: 0 0 .75rem; }
.card h3 a { color: var(--color-heading); text-decoration-color: var(--swatch-color); text-decoration-thickness: 2px; }
.card p { margin: 0; }

.why-choose-us ol { list-style: none; counter-reset: why; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin: 0; padding: 0; }
.why-choose-us li { counter-increment: why; position: relative; padding: 1.5rem 1.5rem 1.25rem 4.5rem; background: var(--color-cream); border-radius: var(--radius); color: var(--color-muted); }
.why-choose-us li::before { content: counter(why, decimal-leading-zero); position: absolute; left: 1.25rem; top: 1.1rem; font-family: var(--font-heading); font-size: 2rem; line-height: 1; color: var(--clay); }
.why-choose-us strong { display: block; margin-bottom: .35rem; font-size: 1.1rem; color: var(--color-heading); }

/* Estimate call to action at the foot of content pages */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; margin-top: 4rem; padding: 2.5rem; background: var(--navy); border-radius: var(--radius); border-left: 8px solid var(--ochre); }
.cta-band h2 { margin: 0 0 .25rem; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.cta-band p { margin: 0; color: var(--on-navy-muted); }

/* Our Work gallery */
.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; padding: 0; }
.gallery-item { display: block; overflow: hidden; border-radius: var(--radius); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem; }
.gallery-filters .filter { padding: .45rem 1.1rem .35rem; border: 2px solid var(--color-rule); border-radius: 999px; font-weight: 600; color: var(--color-heading); text-decoration: none; }
.gallery-filters .filter:hover { border-color: var(--blue); }
.gallery-filters .filter[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; }
.lightbox::backdrop { background: rgb(0 0 0 / .85); }
.lightbox figure { margin: 0; }
.lightbox img { max-width: 90vw; max-height: 82vh; display: block; margin: 0 auto; }
.lightbox figcaption { color: #fff; text-align: center; padding: .5rem; }
.lightbox button { position: fixed; background: rgb(0 0 0 / .5); color: #fff; border: 0; font-size: 2.5rem; line-height: 1; width: 3rem; height: 3rem; cursor: pointer; border-radius: 50%; }
.lightbox button:focus-visible { outline: 3px solid #fff; }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox-next { right: 1rem; top: 50%; translate: 0 -50%; }

/* Contact Us */
.contact-layout { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 48rem) { .contact-layout { grid-template-columns: 1fr; } }
.contact-form { padding: 2rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border-top: 6px solid; border-image: var(--swatch) 1; }
.contact-form h2 { margin-top: 0; }
.contact-form form { display: grid; gap: .35rem; }
.contact-form label { font-weight: 600; margin-top: .75rem; color: var(--color-heading); }
.contact-form label.checkbox { font-weight: normal; display: flex; gap: .5rem; align-items: start; color: var(--color-muted); }
.contact-form input:not([type=checkbox], [type=radio]), .contact-form select, .contact-form textarea { font: inherit; padding: .65rem .75rem .55rem; border: 1px solid #c8c0b2; border-radius: .375rem; width: 100%; background: var(--color-bg); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); background: #fff; }
.contact-form input:is([type=checkbox], [type=radio]) { accent-color: var(--blue); width: 1.1rem; height: 1.1rem; }
.contact-form .choice { border: 0; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.contact-form .choice legend { font-weight: 600; color: var(--color-heading); padding: 0; margin-bottom: .35rem; }
.contact-form label.radio { font-weight: normal; margin: 0; display: flex; gap: .4rem; align-items: center; color: var(--color-text); }
.contact-form .field-hint { margin: .25rem 0 0; font-size: .9rem; color: var(--color-muted); }
.contact-form .button { justify-self: start; margin-top: 1.25rem; background: var(--clay); }
.contact-form .button:hover { background: var(--clay-dark); }
.contact-details { padding: 2rem; background: var(--navy); border-radius: var(--radius); color: var(--on-navy); }
.contact-details h2 { margin-top: 0; color: #fff; }
.contact-details p { color: var(--on-navy); }
.contact-details a { color: #fff; }
.contact-details .social-links { list-style: none; display: flex; gap: 1rem; padding: 0; }
.field-error { color: #b00020; font-size: .9rem; }
.notice { background: var(--color-cream); padding: 1rem 1.5rem; border-radius: var(--radius); }

/* Facebook / Yelp icons, on white chips so they read on any background */
.social-icons { list-style: none; display: flex; justify-content: center; gap: .75rem; margin: 0; padding: 0; }
.social-icons a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(15 35 64 / .15); transition: transform .15s; }
.social-icons a:hover { transform: translateY(-2px); }
.social-icons img { width: 1.4rem; height: 1.4rem; }
.home-connect .social-icons a { width: 3.25rem; height: 3.25rem; }
.home-connect .social-icons img { width: 1.9rem; height: 1.9rem; }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-navy); border-top: 5px solid; border-image: var(--swatch) 1; }
.footer-inner { display: grid; grid-template-columns: 2fr 1.5fr auto; gap: 2rem; padding-block: 3rem 2rem; }
.footer-name { margin: 0 0 .25rem; font-family: var(--font-heading); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.site-footer p { margin: 0 0 .35rem; color: var(--on-navy-muted); }
.site-footer a { color: var(--on-navy); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--ochre); }
.copyright { padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .875rem; }
@media (max-width: 48rem) {
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-inner .social-icons { justify-content: center; }
    .copyright { text-align: center; }
}

.cookie-banner { position: fixed; inset: auto 1rem 1rem 1rem; max-width: 32rem; background: var(--navy); color: #fff; padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; gap: 1rem; align-items: center; z-index: 20; }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; color: var(--on-navy); }

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

/* Google reviews (home page) */
.review-summary { font-size: 1.15rem; margin: 0 0 1.5rem; }
.google-reviews .stars { color: var(--clay); letter-spacing: .1em; margin: 0; }
.review-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.review { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.review-author { display: flex; align-items: center; gap: .75rem; }
.review-author img { border-radius: 50%; }
.review-author a, .review-author span:first-child { font-weight: 600; }
.review-time { display: block; font-size: .85rem; color: var(--color-muted); }
.review-text { margin: 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.review-link, .review-attribution { font-size: .9rem; }
.review-attribution { margin: 1.25rem 0 0; color: var(--color-muted); }

/* ---- Painterly touches: brush strokes, paint cans and swatch chips. Pure CSS with small inline SVGs
   (no extra requests, no script); every animation stops for people who prefer reduced motion. ---- */
:root {
    --brush-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M10 20C52 7 130 11 206 10s148-6 186 6c7 7 5 18-2 25-52 11-118 7-188 9S58 57 16 47C5 41 3 29 10 20Z'/%3E%3Cpath d='M30 54c60 3 140 1 220-2' stroke='black' stroke-width='3' fill='none' opacity='.6'/%3E%3Cpath d='M60 6c70-3 160-2 240 1' stroke='black' stroke-width='2' fill='none' opacity='.5'/%3E%3C/svg%3E");
    --paint-can: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpath d='M22 34c0-18 56-18 56 0' fill='none' stroke='%238b97a6' stroke-width='4' stroke-linecap='round'/%3E%3Crect x='12' y='34' width='76' height='70' rx='6' fill='%23dfe4ea'/%3E%3Crect x='12' y='34' width='14' height='70' rx='6' fill='%23c7cfd8'/%3E%3Crect x='12' y='58' width='76' height='28' fill='%23004aad'/%3E%3Crect x='12' y='58' width='19' height='28' fill='%232a7f8a'/%3E%3Crect x='31' y='58' width='19' height='28' fill='%237a9a6e'/%3E%3Crect x='50' y='58' width='19' height='28' fill='%23e0a83a'/%3E%3Crect x='10' y='100' width='80' height='8' rx='4' fill='%23aab4c1'/%3E%3Cpath d='M12 34v16c0 5 3 8 6 8s6-3 6-9v15c0 6 3 10 7 10s7-4 7-10V48c0-3 2-5 4-5s4 2 4 5v5c0 4 3 7 6 7s6-3 6-7V34Z' fill='%23a34a24'/%3E%3Cellipse cx='50' cy='34' rx='38' ry='9' fill='%23a34a24'/%3E%3Cellipse cx='44' cy='32' rx='18' ry='3.5' fill='%23c8673d'/%3E%3Cpath d='M70 30c4 0 8 1 9 3' stroke='%23d98a62' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --paint-splat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cg fill='%23e0a83a'%3E%3Ccircle cx='20' cy='60' r='9'/%3E%3Ccircle cx='38' cy='50' r='4'/%3E%3Ccircle cx='8' cy='44' r='3'/%3E%3C/g%3E%3Cg fill='%232a7f8a'%3E%3Ccircle cx='96' cy='22' r='7'/%3E%3Ccircle cx='110' cy='38' r='3'/%3E%3Ccircle cx='80' cy='10' r='2.5'/%3E%3C/g%3E%3Cg fill='%23a34a24'%3E%3Ccircle cx='60' cy='70' r='4'/%3E%3Ccircle cx='72' cy='58' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Section headings: a brush-stroke underline instead of a thin bar, in a rotating paint color */
.rule { width: 8rem; height: .75rem; border: 0; border-radius: 0; background: var(--rule-color, var(--clay));
    -webkit-mask: var(--brush-stroke) center / 100% 100% no-repeat; mask: var(--brush-stroke) center / 100% 100% no-repeat; }
.home-about .rule { --rule-color: var(--sage); }
.testimonials .rule { --rule-color: var(--ochre); }
.home-contact .rule { --rule-color: var(--teal); }
.home-connect .rule { --rule-color: var(--clay); }
.content-section h2::after { width: 6.5rem; height: .65rem; border-radius: 0; background: var(--clay);
    -webkit-mask: var(--brush-stroke) center / 100% 100% no-repeat; mask: var(--brush-stroke) center / 100% 100% no-repeat; }
.content-section:nth-of-type(4n+2) h2::after { background: var(--teal); }
.content-section:nth-of-type(4n+3) h2::after { background: var(--ochre); }
.content-section:nth-of-type(4n+4) h2::after { background: var(--sage); }

/* Home hero: a brush swipe paints across the panel and a paint can settles at its corner */
.home-hero-panel { z-index: 2; border-top: 0; animation: rise-in .7s .15s ease-out both; }
.home-hero-panel::before { content: ""; position: absolute; left: -1.25rem; right: 18%; top: -1.1rem; height: 2.4rem; background: var(--ochre);
    -webkit-mask: var(--brush-stroke) center / 100% 100% no-repeat; mask: var(--brush-stroke) center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0); animation: paint-in .9s .55s ease-out forwards; }
.home-hero-panel::after { content: ""; position: absolute; right: -2rem; top: -3.4rem; width: 5.75rem; height: 6.45rem;
    background: var(--paint-can) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); rotate: 8deg;
    animation: can-drop .7s 1s cubic-bezier(.3, 1.4, .5, 1) both; }
.home-hero .button-light { position: relative; }
.home-hero .button-light::after { content: ""; position: absolute; left: -2.75rem; bottom: -1.6rem; width: 5rem; height: 3.4rem;
    background: var(--paint-splat) center / contain no-repeat; pointer-events: none; opacity: .9; animation: fade-in .5s 1.3s both; }
@media (max-width: 48rem) {
    /* Phones: the photo first, then the panel overlapping its lower edge, so the photo isn't hidden */
    .home-hero { display: block; min-height: 0; padding: 0 0 3rem; background: var(--color-cream); overflow: visible; }
    .home-hero-image { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 4 / 3; }
    .home-hero-panel { margin: -3.5rem 1rem 0; }
    .home-hero-panel::after { right: -.25rem; top: -2.9rem; width: 4.25rem; height: 4.75rem; }
}

/* Photo strip: spaced-out photos like paint chips, each with its own swatch color and a slight tilt */
.photo-grid { gap: 1.5rem; padding: 3rem max(1rem, calc((100vw - var(--max-width)) / 2 + 1rem)) 3.5rem;
    background: radial-gradient(40rem 18rem at 10% 0%, rgb(224 168 58 / .18), transparent 70%),
                radial-gradient(36rem 20rem at 95% 100%, rgb(42 127 138 / .16), transparent 70%), var(--color-cream); }
.photo-grid li { --chip: var(--blue); --tilt: -1.2deg; overflow: visible; padding: .55rem .55rem 0; background: #fff;
    border-bottom: .9rem solid var(--chip); border-radius: .3rem; box-shadow: var(--shadow); transform: rotate(var(--tilt));
    transition: transform .3s; }
.photo-grid li:nth-child(5n+2) { --chip: var(--teal); --tilt: .9deg; }
.photo-grid li:nth-child(5n+3) { --chip: var(--sage); --tilt: -.5deg; }
.photo-grid li:nth-child(5n+4) { --chip: var(--ochre); --tilt: 1.3deg; }
.photo-grid li:nth-child(5n+5) { --chip: var(--clay); --tilt: -.9deg; }
.photo-grid img { border-radius: .15rem; }
.photo-grid li:hover { transform: rotate(0) translateY(-4px); }
.photo-grid li:hover img { transform: none; }
@media (max-width: 48rem) { .photo-grid { gap: 1rem; padding-block: 2rem 2.5rem; } }

/* Home "What We Do": photo tiles linking to the service and specialty pages, each with its own swatch color */
.service-tiles { background:
    radial-gradient(40rem 18rem at 10% 0%, rgb(224 168 58 / .16), transparent 70%),
    radial-gradient(36rem 20rem at 95% 100%, rgb(42 127 138 / .14), transparent 70%), var(--color-cream); }
.service-tiles .rule { --rule-color: var(--blue); }
.tile-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.tile-grid li { --chip: var(--blue); }
.tile-grid li:nth-child(5n+2) { --chip: var(--teal); }
.tile-grid li:nth-child(5n+3) { --chip: var(--sage); }
.tile-grid li:nth-child(5n+4) { --chip: var(--ochre); }
.tile-grid li:nth-child(5n+5) { --chip: var(--clay); }
.tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: var(--radius); border-bottom: .5rem solid var(--chip);
    box-shadow: var(--shadow); color: var(--color-text); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.tile-body { display: flex; flex-direction: column; gap: .4rem; flex: 1; padding: 1.1rem 1.25rem 1.25rem; }
.tile-title { font-family: var(--font-heading); font-size: 1.45rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; color: var(--color-heading); }
.tile-text { color: var(--color-muted); }
.tile-more { margin-top: auto; padding-top: .35rem; font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-heading); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(15 35 64 / .08), 0 16px 32px rgb(15 35 64 / .14); }
.tile:hover img { transform: scale(1.04); }
.tile:hover .tile-title { text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.tile:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .tile, .tile img { transition: none; } }

/* A soft wash of paint color behind the About band */
.home-about { background:
    radial-gradient(30rem 16rem at 0% 100%, rgb(122 154 110 / .16), transparent 70%),
    radial-gradient(26rem 14rem at 48% 0%, rgb(0 74 173 / .07), transparent 70%), var(--color-cream); }

/* Content pages with a photo: a brush-stroke underline paints in under the heading */
.page-hero.has-image h1::before { content: ""; position: absolute; z-index: -1; left: -.6rem; bottom: -.22em; width: min(100%, 16rem); height: .45em;
    background: var(--ochre); -webkit-mask: var(--brush-stroke) center / 100% 100% no-repeat; mask: var(--brush-stroke) center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0); animation: paint-in .8s .35s ease-out forwards; }

/* Content pages without a photo: the home hero's navy panel, brush swipe and paint can, on a painted band */
.page-hero:not(.has-image) { --brush-strokes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 200'%3E%3Cpath fill='%23004aad' opacity='.85' transform='translate%2830 8%29 rotate%28-5 200 30%29' d='M10 20C52 7 130 11 206 10s148-6 186 6c7 7 5 18-2 25-52 11-118 7-188 9S58 57 16 47C5 41 3 29 10 20Z'/%3E%3Cpath fill='%232a7f8a' opacity='.8' transform='translate%280 72%29 rotate%28-2 200 30%29' d='M10 20C52 7 130 11 206 10s148-6 186 6c7 7 5 18-2 25-52 11-118 7-188 9S58 57 16 47C5 41 3 29 10 20Z'/%3E%3Cpath fill='%23e0a83a' opacity='.9' transform='translate%2840 134%29 rotate%28-6 200 30%29' d='M10 20C52 7 130 11 206 10s148-6 186 6c7 7 5 18-2 25-52 11-118 7-188 9S58 57 16 47C5 41 3 29 10 20Z'/%3E%3C/svg%3E");
    align-items: center; min-height: clamp(15rem, 24vw, 19rem); overflow: hidden; background:
    radial-gradient(26rem 14rem at 80% 20%, rgb(224 168 58 / .3), transparent 70%),
    radial-gradient(22rem 12rem at 60% 100%, rgb(42 127 138 / .2), transparent 70%),
    radial-gradient(20rem 12rem at 0% 0%, rgb(122 154 110 / .18), transparent 70%), var(--color-sand); }
.page-hero:not(.has-image)::before { content: ""; position: absolute; top: 50%; right: max(-3rem, calc(50vw - var(--max-width) / 2 - 2rem));
    width: clamp(18rem, 38vw, 32rem); aspect-ratio: 11 / 5; translate: 0 -50%; background: var(--brush-strokes) center / contain no-repeat;
    clip-path: inset(0 100% 0 0); animation: paint-in 1.1s .2s ease-out forwards; }
.page-hero:not(.has-image) h1 { width: fit-content; padding: 1.6rem 2.25rem 1.75rem; color: #fff; background: rgb(15 35 64 / .95);
    border-top: 6px solid; border-image: var(--swatch) 1; box-shadow: 0 20px 50px rgb(15 35 64 / .25); animation: rise-in .7s .1s ease-out both; }
.page-hero:not(.has-image) h1::before { content: ""; position: absolute; left: -1rem; top: -1.1rem; width: min(70%, 15rem); height: 2.1rem; background: var(--ochre);
    -webkit-mask: var(--brush-stroke) center / 100% 100% no-repeat; mask: var(--brush-stroke) center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0); animation: paint-in .9s .5s ease-out forwards; }
.page-hero:not(.has-image) h1::after { content: ""; position: absolute; right: -2rem; top: -3rem; width: 4.75rem; height: 5.3rem;
    background: var(--paint-can) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); rotate: 8deg;
    animation: can-drop .7s .9s cubic-bezier(.3, 1.4, .5, 1) both; }
@media (max-width: 48rem) {
    .page-hero:not(.has-image) { min-height: 0; padding-block: 3.5rem 2.75rem; }
    .page-hero:not(.has-image)::before { top: .75rem; right: -4rem; width: 15rem; translate: none; opacity: .55; }
    .page-hero:not(.has-image) h1 { padding: 1.4rem 1.5rem 1.5rem; margin-right: 1.5rem; }
    .page-hero:not(.has-image) h1::after { right: -1.5rem; top: -2.6rem; width: 3.75rem; height: 4.2rem; }
}

/* Estimate call to action: a paint can and a splash of color */
.cta-band { position: relative; overflow: visible; padding-right: max(2.5rem, 7rem); background:
    radial-gradient(18rem 9rem at 100% 0%, rgb(224 168 58 / .25), transparent 70%), var(--navy); }
.cta-band::after { content: ""; position: absolute; right: 1.5rem; top: -1.75rem; width: 4.5rem; height: 5rem;
    background: var(--paint-can) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); rotate: 8deg; }
@media (max-width: 48rem) { .cta-band { padding-right: 2.5rem; padding-top: 3rem; } .cta-band::after { width: 3.5rem; height: 4rem; top: -2rem; } }

@keyframes paint-in { to { clip-path: inset(0 0 0 0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes can-drop { from { opacity: 0; transform: translateY(-1.5rem) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .home-hero-panel, .home-hero-panel::after, .home-hero .button-light::after { animation: none; }
    .home-hero-panel::before, .page-hero h1::before, .page-hero::before { animation: none; clip-path: none; }
    .page-hero h1, .page-hero h1::after { animation: none; }
    .photo-grid li { transition: none; }
}

/* Admin area */
.admin-bar { background: var(--navy); color: #fff; }
.admin-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .85rem; }
.admin-home { color: #fff; font-family: var(--font-heading); font-size: 1.25rem; text-transform: uppercase; text-decoration: none; }
.admin-home span { color: var(--on-navy); font-family: var(--font-body); font-size: .9rem; text-transform: none; margin-left: .35rem; }
.admin-user { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--on-navy); font-size: .9rem; }
.button-small { padding: .4rem 1rem .3rem; font-size: .8rem; }
.admin-main { padding-block: 2rem 4rem; }
.admin-actions { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin-top: 1.5rem; }
.admin-action { display: grid; gap: .35rem; padding: 1.5rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); color: var(--color-text); text-decoration: none; border-top: 4px solid var(--clay); }
.admin-action:hover strong { text-decoration: underline; }
.admin-action strong { color: var(--color-heading); font-size: 1.15rem; }
.admin-form { max-width: 40rem; }
.admin-photo-form { display: grid; gap: 1rem; }
.admin-photo, .admin-photo-row { display: grid; gap: 1rem; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; padding: 1rem; margin: 0; border: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-photo img, .admin-photo-row img, .admin-edit img { width: 100%; height: auto; border-radius: var(--radius); }
.admin-photo-fields { display: grid; gap: .35rem; }
.admin-photo-fields input, .admin-photo-fields select { font: inherit; padding: .55rem .7rem .45rem; border: 1px solid #c8c0b2; border-radius: .375rem; width: 100%; }
.admin-photo-fields label { font-weight: 600; margin-top: .4rem; }
.admin-photo-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.admin-photo-row { grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; padding: .75rem; }
.admin-photo-alt { margin: 0 0 .25rem; font-weight: 600; }
.admin-photo-meta { margin: 0; font-size: .9rem; color: var(--color-muted); }
.admin-photo-actions { display: flex; gap: 1rem; }
.badge { padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--color-sand); color: var(--color-heading); }
.badge-needs { background: var(--clay); color: #fff; }
.badge-hidden { background: #e6e1d8; }
.admin-edit { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-bottom: 1.5rem; }
@media (max-width: 48rem) {
    .admin-photo, .admin-edit { grid-template-columns: 1fr; }
    .admin-photo-row { grid-template-columns: 5rem minmax(0, 1fr); }
    .admin-photo-actions { grid-column: 1 / -1; }
}
.busy { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 0; font-weight: 600; color: var(--color-heading); }
.busy[hidden] { display: none; }
.spinner { flex: none; width: 1.5rem; height: 1.5rem; border: 3px solid var(--color-sand); border-top-color: var(--clay); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
form[aria-busy="true"] button[type=submit] { opacity: .6; cursor: progress; }
.admin-page-list { list-style: none; padding: 0; display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.admin-page-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-page-name { font-weight: 600; }
.badge-shown { background: #dfeee3; }
.admin-section-form { max-width: 52rem; }
.admin-section-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; }
.admin-delete { max-width: 40rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-rule); }