/* === location-template classes (extracted from LWG page-level styles) === */

        .location-hero {
            background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark, #1a5a5a) 100%);
            color: white;
            padding: 80px 0;
        }

        .location-hero-content {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 40px;
            align-items: center;
        }

        .location-hero h1 {
            font-size: clamp(2rem, 4vw, 3rem);
            margin-bottom: 20px;
            line-height: 1.2;
            color: white;
        }

        .location-hero .hero-subhead {
            font-size: 1.3rem;
            opacity: 0.95;
            margin-bottom: 24px;
            max-width: 600px;
            line-height: 1.5;
        }

        .location-mascot {
            width: 280px;
            height: 280px;
        }

        .location-mascot img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }




        .local-context-section {
            padding: 80px 0;
            background: white;
        }

        .local-context-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .local-context-content h2 {
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            color: var(--color-brown-dark);
            margin-bottom: 24px;
        }

        .local-context-content p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--color-brown);
            margin-bottom: 20px;
        }

        .distance-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--color-cream);
            padding: 12px 20px;
            border-radius: var(--radius-md);
            border: 2px solid var(--color-brown);
            margin-top: 16px;
        }

        .distance-badge svg {
            width: 20px;
            height: 20px;
            fill: var(--color-orange);
        }

        .distance-badge span {
            color: var(--color-brown-dark);
            font-weight: 500;
        }

        .services-section {
            padding: 80px 0;
            background: var(--color-cream);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 24px;
        }

        .service-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            border: 3px solid var(--color-brown-dark);
            box-shadow: 4px 4px 0 var(--color-brown-dark);
        }

        .service-card h3 {
            font-size: 1.2rem;
            color: var(--color-brown-dark);
            margin-bottom: 8px;
        }

        .service-card p {
            color: var(--color-brown);
            line-height: 1.6;
        }

        .pricing-preview-section {
            padding: 80px 0;
            background: white;
        }

        .pricing-preview-card {
            max-width: 500px;
            margin: 40px auto 0;
            background: var(--color-cream);
            border: 2px solid var(--color-brown);
            border-radius: var(--radius-lg);
            padding: 40px;
            text-align: center;
        }

        .pricing-preview-card .price {
            font-size: 3rem;
            font-weight: 800;
            color: var(--color-orange);
            margin-bottom: 8px;
        }

        .pricing-preview-card .price-note {
            color: var(--color-brown);
            margin-bottom: 24px;
        }

        .pricing-preview-card ul {
            text-align: left;
            margin-bottom: 24px;
        }

        .pricing-preview-card li {
            padding: 8px 0;
            color: var(--color-brown);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pricing-preview-card li svg {
            width: 20px;
            height: 20px;
            fill: #22c55e;
        }

        .faq-section {
            padding: 80px 0;
            background: var(--color-cream);
        }





        .service-area-section {
            padding: 60px 0;
            background: white;
        }

        .service-area-content {
            text-align: center;
        }

        .service-area-content h2 {
            font-size: clamp(1.5rem, 2.5vw, 2rem);
            color: var(--color-brown-dark);
            margin-bottom: 16px;
        }

        .nearby-areas {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 24px;
        }

        .nearby-areas a {
            background: var(--color-cream);
            padding: 10px 20px;
            border-radius: var(--radius-md);
            color: var(--color-brown-dark);
            text-decoration: none;
            font-weight: 700;
            border: 3px solid var(--color-brown-dark);
            box-shadow: 3px 3px 0 var(--color-brown-dark);
            transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s, color 0.2s;
        }

        .nearby-areas a:hover {
            background: var(--color-teal);
            color: white;
            transform: translate(-2px, -2px);
            box-shadow: 5px 5px 0 var(--color-brown-dark);
        }






        @media (max-width: 768px) {
            .location-hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .location-mascot {
                margin: 0 auto;
                order: -1;
            }

        }
    


/* form basics (contact form on homepage) */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 700; color: var(--color-brown-dark); margin-bottom: 6px; font-size: 0.95rem; }
.form-group input, .form-group textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--color-brown); border-radius: 8px; background: #fff; font-family: inherit; font-size: 1rem; color: var(--color-brown-dark); }
.form-group input:focus, .form-group textarea:focus { outline: 3px solid var(--color-teal); outline-offset: 1px; }
.cta-section form .btn { margin-top: 4px; }

/* === WWG palette overrides (win by order) === */
/* Wilmington Web Guy palette — derived from Lou-ILM candidate 3 (sampled 2026-07-24).
   Loads AFTER v2.css and re-tunes the shared design system:
   sage-teal leads (Lou's body), orange warms toward rust, creams/inks unchanged. */
:root {
    --color-teal: #4E7A72;        /* Lou's monitor teal (sampled ~#507060-#507070) */
    --color-teal-deep: #3A5D57;   /* hover / dark accents */
    --color-orange: #D96A28;      /* rustier than LWG's #E85D24 - sunset over the Cape Fear */
    --color-yellow: #DBA83F;      /* aged gold, slightly muted */
}
/* teal-forward touches where LWG leans orange */
.topline { background: var(--color-teal-deep); }
.trust-badge svg { fill: var(--color-teal); }
.location-hero { background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-deep) 100%); }

/* three-card pricing grid (extracted CSS assumed one card) */
.pricing-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.pricing-preview-grid .pricing-preview-card { margin: 0; max-width: none; }
.pricing-preview-card .price span { font-size: 1.4rem; color: var(--color-brown); font-weight: 700; }
.pricing-preview-card h3 { font-size: 1.3rem; color: var(--color-brown-dark); margin-bottom: 12px; }

/* form labels on the dark CTA background */
.cta-section .form-group label { color: var(--color-cream); }

/* hero on cream: Lou is teal, so the hero can't be (owner 7/25) */
.location-hero { background: var(--color-cream); color: var(--color-brown-dark); }
.location-hero h1 { color: var(--color-brown-dark); }
.location-hero h1 .accent { color: var(--color-teal); }
.location-hero .hero-subhead { color: var(--color-brown); opacity: 1; }
.location-hero .trust-badge { color: var(--color-brown-dark); }

/* skyline band under hero: SVG layers, LWG-style */
:root {
  --wwg-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150'%3E%3Cpath fill='%233A5D57' d='M0 150 V126 H56 V116 H64 V44 H72 V36 H100 V44 H108 V116 H116 V102 H244 V116 H252 V44 H260 V36 H288 V44 H296 V116 H304 V126 H332 V132 Q346 122 360 132 H368 V104 H420 V96 H456 V110 H496 V88 H540 V120 H570 V100 H614 V72 H620 V64 H626 L632 18 L638 64 H644 V72 H650 V100 H700 V92 H744 V112 H790 V98 H830 V70 H836 V62 H842 L848 22 L854 62 H860 V70 H866 V98 H884 V56 H924 V64 H952 V50 H992 V104 H1012 V134 H1020 V126 L1036 120 H1060 V112 H1084 V96 H1100 V84 H1116 V64 H1132 V56 H1148 V64 H1160 V76 H1180 V92 H1204 V104 H1240 V112 H1284 V120 H1316 L1330 126 V134 H1340 V128 Q1354 116 1368 128 Q1382 118 1396 128 Q1410 120 1424 128 H1440 V150 Z'/%3E%3Cpath stroke='%233A5D57' stroke-width='5' fill='none' stroke-linecap='round' d='M68 108 L104 52 M104 108 L68 52 M64 80 H108 M248 108 L284 52 M284 108 L248 52 M244 80 H288 M124 116 L140 102 L156 116 L172 102 L188 116 L204 102 L220 116 L236 102 M86 36 V18 M266 36 V18 M1124 64 V26 M1116 64 L1124 40 M1112 44 H1136 M1240 112 V70 M1232 78 H1248 M1096 92 L1072 80 M1096 98 L1070 88'/%3E%3C/svg%3E");
  --wwg-sky2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150'%3E%3Cpath fill='%233A5D57' d='M0 150 V112 H60 V96 H120 V112 H180 V84 H240 V112 H320 V100 H400 V70 H460 V112 H540 V90 H620 V112 H700 V78 H770 V112 H850 V96 H930 V112 H1000 V72 H1060 V112 H1150 V88 H1230 V112 H1310 V98 H1380 V112 H1440 V150 Z'/%3E%3C/svg%3E");
}
/* Option B (owner pick 7/26): painted transparent strip w/ parallax echo.
   SVG layers (--wwg-sky/--wwg-sky2 above) kept as fallback assets. */
/* Band height comes from the artwork's own 1435x418 ratio, so the skyline is
   never cropped. The old `height:190px` + `cover` cut 226px off the top at
   desktop width, losing the bridge tower, both spires and the battleship mast. */
.skyline-band { position: relative; width: 100%; aspect-ratio: 1435 / 418; background: var(--color-cream); overflow: hidden; }
.skyline-band .sky-layer { position: absolute; inset: 0; pointer-events: none; background: url("/images/ilm-sky-strip.webp") bottom center / 100% auto no-repeat; }
.skyline-band .sky-front { z-index: 1; }
.skyline-band .sky-back { opacity: 0.13; transform: translateX(-60px) scale(1.06); }