/* ══════════════════════════════════════════════════════════════
   Okie Hustle — Christmas season theme (Nov 2026)
   Loaded after style.css on every public page. To switch it off,
   remove the christmas.css <link> from the pages (or empty this file).
   Palette: pine, cranberry, gold, frost. Surfaces: liquid glass.
   ══════════════════════════════════════════════════════════════ */
:root {
    --ink: #0c2219;
    --accent: #c41230;
    --color-accent: #c41230;
    --accent-light: #e2364f;
    --accent-deep: #a50e27;
    --accent-dark: #8c0b20;
    --muted: #4f6259;
    --line: #d7e4dd;
    --bg-soft: #edf5f1;
    --warm-50: #eef6f2;
    --warm-100: #eaf4ef;
    --warm-tint: #e2eee8;
    --pine: #0f3d2e;
    --pine-deep: #082a1e;
    --gold: #c9a24b;
    --glass: rgba(255, 255, 255, 0.58);
    --glass-edge: rgba(255, 255, 255, 0.85);
    --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.25), 0 24px 44px -28px rgba(12, 61, 46, .45), 0 2px 6px rgba(12, 61, 46, .06);
    --shadow: 0 30px 60px rgba(12, 61, 46, 0.16);
    --focus-ring: 2px solid var(--accent);
}

/* Frosted page: soft colour pools behind everything so the glass has something to bend. */
body {
    background:
        radial-gradient(900px 620px at 8% 12%, rgba(26, 122, 84, .16), transparent 62%),
        radial-gradient(760px 560px at 96% 30%, rgba(196, 18, 48, .10), transparent 60%),
        radial-gradient(820px 600px at 20% 78%, rgba(201, 162, 75, .13), transparent 60%),
        radial-gradient(900px 700px at 88% 92%, rgba(26, 122, 84, .14), transparent 62%),
        linear-gradient(180deg, #f6faf8 0%, #edf5f1 100%);
    background-attachment: fixed;
}

/* The orange promo strip is retired for the season. */
.top-banner.seasonal-banner { display: none; }

/* ── Header: a pane of glass with a string of lights hanging off it ── */
.site-header {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -18px rgba(12, 61, 46, .35);
}
.header-review-strip { background: linear-gradient(90deg, rgba(15, 61, 46, .07) 0%, rgba(255,255,255,0) 62%); border-color: rgba(12, 61, 46, .08); }
/* The lights hang at the top of the page content and scroll away with it (they do not ride the sticky header). */
main { position: relative; }
main::before {
    content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 92px; pointer-events: none; z-index: 6;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%2292%22 viewBox=%220 0 320 92%22%3E%3Cdefs%3E%3CradialGradient id=%22hr%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff3b57%22 stop-opacity=%22.85%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23ff3b57%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ff3b57%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22hy%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffcc55%22 stop-opacity=%22.85%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23ffcc55%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffcc55%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22hg%22%3E%3Cstop offset=%220%22 stop-color=%22%2335d48a%22 stop-opacity=%22.85%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%2335d48a%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%2335d48a%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22hw%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffffff%22 stop-opacity=%22.85%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23ffffff%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffffff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cstyle%3E.b%7Banimation:on 2.4s ease-in-out infinite%7D.h%7Banimation:glow 2.4s ease-in-out infinite%7D.d1%7Banimation-delay:-1.8s%7D.d2%7Banimation-delay:-1.2s%7D.d3%7Banimation-delay:-.6s%7D.d4%7Banimation-delay:0s%7D%40keyframes on%7B0%25,100%25%7Bopacity:.5%7D18%25,42%25%7Bopacity:1%7D60%25%7Bopacity:.5%7D%7D%40keyframes glow%7B0%25,100%25%7Bopacity:.12%7D18%25,42%25%7Bopacity:1%7D60%25%7Bopacity:.12%7D%7D%40media (prefers-reduced-motion:reduce)%7B.b,.h%7Banimation:none%7D.b%7Bopacity:1%7D.h%7Bopacity:.7%7D%7D%3C/style%3E%3Cpath d=%22M0,8 Q160,60 320,8%22 fill=%22none%22 stroke=%22%23082419%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Ccircle class=%22h d1%22 cx=%2240%22 cy=%2243.4%22 r=%2230%22 fill=%22url(%23hr)%22/%3E%3Crect x=%2235%22 y=%2218.4%22 width=%2210%22 height=%229%22 rx=%222%22 fill=%22%23082419%22/%3E%3Cg class=%22b d1%22%3E%3Cellipse cx=%2240%22 cy=%2242.4%22 rx=%2211%22 ry=%2215.5%22 fill=%22%23ff3b57%22/%3E%3Cellipse cx=%2236.5%22 cy=%2236.4%22 rx=%223%22 ry=%225.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Ccircle class=%22h d2%22 cx=%22120%22 cy=%2256.4%22 r=%2230%22 fill=%22url(%23hy)%22/%3E%3Crect x=%22115%22 y=%2231.4%22 width=%2210%22 height=%229%22 rx=%222%22 fill=%22%23082419%22/%3E%3Cg class=%22b d2%22%3E%3Cellipse cx=%22120%22 cy=%2255.4%22 rx=%2211%22 ry=%2215.5%22 fill=%22%23ffcc55%22/%3E%3Cellipse cx=%22116.5%22 cy=%2249.4%22 rx=%223%22 ry=%225.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Ccircle class=%22h d3%22 cx=%22200%22 cy=%2256.4%22 r=%2230%22 fill=%22url(%23hg)%22/%3E%3Crect x=%22195%22 y=%2231.4%22 width=%2210%22 height=%229%22 rx=%222%22 fill=%22%23082419%22/%3E%3Cg class=%22b d3%22%3E%3Cellipse cx=%22200%22 cy=%2255.4%22 rx=%2211%22 ry=%2215.5%22 fill=%22%2335d48a%22/%3E%3Cellipse cx=%22196.5%22 cy=%2249.4%22 rx=%223%22 ry=%225.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Ccircle class=%22h d4%22 cx=%22280%22 cy=%2243.4%22 r=%2230%22 fill=%22url(%23hw)%22/%3E%3Crect x=%22275%22 y=%2218.4%22 width=%2210%22 height=%229%22 rx=%222%22 fill=%22%23082419%22/%3E%3Cg class=%22b d4%22%3E%3Cellipse cx=%22280%22 cy=%2242.4%22 rx=%2211%22 ry=%2215.5%22 fill=%22%23ffffff%22/%3E%3Cellipse cx=%22276.5%22 cy=%2236.4%22 rx=%223%22 ry=%225.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3C/svg%3E") repeat-x center top / 320px 92px;
    filter: drop-shadow(0 5px 6px rgba(8, 36, 25, .30));
}
@media (max-width: 700px) { main::before { height: 62px; background-size: 216px 62px; } }
@keyframes xmasTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.nav-menu a:hover, .header-phone:hover { color: var(--accent); }

/* ── Hero: pine-tinted photo, glass panels, light snowfall ── */
.hero { isolation: isolate; }
/* .cpc-hero (commercial page) uses ::before for its own banner photo, so it is left alone. */
.hero:not(.cpc-hero)::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(700px 420px at 92% 0%, rgba(226, 54, 79, .28), transparent 62%),
        radial-gradient(800px 460px at 60% 110%, rgba(243, 213, 140, .20), transparent 60%),
        linear-gradient(100deg, rgba(10, 92, 62, .80) 0%, rgba(14, 110, 74, .52) 42%, rgba(20, 130, 88, .14) 78%, rgba(20, 130, 88, .04) 100%);
}
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 2.4px, transparent 3.6px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.75) 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 3.4px, transparent 5px);
    background-size: 370px 310px, 230px 270px, 610px 450px;
    background-position: 40px 0, 130px 90px, 300px 40px;
    animation: xmasSnow 18s linear infinite;
}
@keyframes xmasSnow { to { background-position: 40px 310px, 130px 630px, 300px 490px; } }
.hero > .container { position: relative; z-index: 1; }
.hero-glow { background: radial-gradient(circle, rgba(201, 162, 75, .30), rgba(201, 162, 75, 0)); }
.hero .eyebrow::before, .hero-eyebrow::before { background: var(--gold); }
.hero h1 .hero-title-line:last-child { color: #f3d58c; }
.hero-proof, .hero-portrait-card, .hero .service-choices a, .hero-portrait-copy {
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
.hero-proof {
    background: linear-gradient(160deg, rgba(6, 44, 31, .78), rgba(6, 44, 31, .62)) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 20px 40px -22px rgba(0,0,0,.6);
    padding: 26px 24px !important; gap: 20px; border-radius: 18px !important;
    width: min(100%, 900px);
    color: rgba(255,255,255,.92) !important; font-size: 1.08rem; line-height: 1.4;
}
.hero-proof strong { color: #fff !important; font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; letter-spacing: .005em; }
.hero-proof > div + div { border-left: 1px solid rgba(255,255,255,.18); padding-left: 20px; }
@media (max-width: 700px) {
    .hero-proof { padding: 18px 14px !important; gap: 12px; font-size: .92rem; }
    .hero-proof strong { font-size: 1.02rem; }
    .hero-proof > div + div { padding-left: 12px; }
}
.hero .service-choices a { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.hero .service-choices a:hover, .hero .service-choices a:focus-visible { background: rgba(255,255,255,.92); border-color: #fff; color: var(--pine-deep); }
.service-choices a:focus-visible, .job-story a:focus-visible { outline-color: var(--accent); }
.job-story a { color: var(--accent-dark); }
.quote-inclusions { color: var(--ink); border-color: var(--glass-edge); }

/* ── Buttons: cranberry glass ── */
.btn { position: relative; overflow: hidden; }
.btn-accent {
    background: linear-gradient(165deg, #ea4a60 0%, var(--accent) 48%, #8f0b20 100%);
    box-shadow: 0 14px 28px -10px rgba(196, 18, 48, .6), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -8px 14px -8px rgba(60, 0, 12, .55);
    border-color: rgba(255,255,255,.22);
}
.btn-accent::before {
    content: ""; position: absolute; left: 6%; right: 6%; top: 2px; height: 46%; border-radius: 999px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
}
.btn-accent:hover { box-shadow: 0 18px 34px -10px rgba(196, 18, 48, .7), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 14px -8px rgba(60, 0, 12, .55); }
.btn:focus-visible { outline-color: rgba(196, 18, 48, .5); }
.btn-ghost { border-color: rgba(12, 61, 46, .35); color: var(--pine); background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.btn-ghost:hover { background: var(--pine); color: #fff; border-color: var(--pine); }
.btn-white { background: rgba(255,255,255,.9); color: var(--pine-deep); box-shadow: 0 14px 26px -12px rgba(0,0,0,.45), inset 0 1px 0 #fff; }
.hero .btn-ghost, .cta .btn-ghost, .section-ink .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.10); }

/* ── Type accents ── */
.eyebrow { color: var(--accent-dark); }
.eyebrow::before { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.section-heading h2, main h2 { color: var(--pine-deep); }
.hero h1, .hero h2, .cta h2, .section-ink h2, .garage-feature h2, .yard-feature h2, .hco h2 { color: #fff; }
.footer-link-strong { color: var(--accent); }
.footer-link-strong:hover { color: var(--accent-dark); }
.review-stars { color: var(--gold); }
::selection { background: rgba(196, 18, 48, .22); }

/* ── Sections ── */
.section-muted { background: linear-gradient(180deg, rgba(15, 61, 46, .055), rgba(15, 61, 46, .02)); }

/* ── Liquid glass cards ── */
.service-card, .pricing-card, .pricing-combo-card, .quote-card, .faq-item, .job-photo-card, .partner-card,
.fund-strip-card, .founder-card, .differentiator-tile, .quote-inclusions, .job-story, .pricing-rate, .feature-media-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
}
.pricing-rate { background: rgba(255,255,255,.5); }
.service-card, .quote-card, .job-photo-card, .job-story, .faq-item { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card:hover, .job-story:hover, .quote-card:hover {
    transform: translateY(-4px);
    border-color: #fff;
    box-shadow: inset 0 1px 0 #fff, 0 30px 50px -26px rgba(12, 61, 46, .55), 0 0 0 1px rgba(196, 18, 48, .10);
}
.pricing-rate.featured, .pricing-card.featured { border-color: rgba(196, 18, 48, .55); box-shadow: var(--glass-shadow), 0 0 0 3px rgba(196, 18, 48, .10); }
.pricing-rate .price, .pricing-card .price { color: var(--pine-deep); }
.pricing-rate-lawn .price { color: var(--accent); }
.fund-strip-card { border-left: 4px solid var(--accent); }
.faq-item summary { color: var(--pine-deep); }

/* ── Feature bands & CTA: deep pine with a cranberry glow ── */
.garage-feature, .yard-feature {
    background:
        radial-gradient(760px 380px at 90% 0%, rgba(196, 18, 48, .42), transparent 64%),
        radial-gradient(600px 360px at 0% 100%, rgba(201, 162, 75, .18), transparent 60%),
        linear-gradient(150deg, #11503b 0%, #0b3527 55%, #072319 100%);
}
.garage-feature .eyebrow, .yard-feature .eyebrow, .cta .eyebrow { color: #f3d58c; }
.garage-feature .eyebrow::before, .yard-feature .eyebrow::before { background: var(--gold); }
.cta {
    background:
        radial-gradient(700px 320px at 12% 0%, rgba(196, 18, 48, .38), transparent 62%),
        radial-gradient(600px 300px at 95% 100%, rgba(201, 162, 75, .16), transparent 60%),
        linear-gradient(120deg, #072319 0%, #0f3d2e 100%);
}
.section-ink { background: linear-gradient(150deg, #0b3527, #072319); }

/* ── Dark sections ("Why neighbors book…"): smoked glass, gold details, no red-on-green ── */
.section-ink .differentiator-tile {
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 22px 40px -26px rgba(0,0,0,.7);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.section-ink .differentiator-tile > div:first-child > div:first-child {
    background: rgba(201, 162, 75, .16) !important; color: #f3d58c !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.section-ink .differentiator-tile p { color: rgba(255,255,255,.78); }
.section-ink a:not(.btn), .cta a:not(.btn), .garage-feature a:not(.btn), .yard-feature a:not(.btn) { color: #f3d58c !important; }
.section-ink .booking-flow-strip {
    background: linear-gradient(135deg, rgba(196, 18, 48, .20) 0%, rgba(255,255,255,.05) 55%, rgba(201, 162, 75, .10) 100%) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.section-ink .booking-flow-strip .eyebrow { color: #f3d58c !important; }
.section-ink .booking-flow-strip .eyebrow::before { background: var(--gold); }
.section-ink .booking-flow-strip p { color: rgba(255,255,255,.75); }
.section-ink .btn-white, .section-ink .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.section-ink .btn-white:hover, .section-ink .btn-ghost:hover { background: #fff; color: var(--pine-deep); }

/* ── Footer & floating quote button ── */
.site-footer { border-top: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mobile-action-bar { background: rgba(255,255,255,.62) !important; -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 18px 34px -16px rgba(12, 61, 46, .5); }

/* Forms pick up the new accent */
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(196, 18, 48, .14); outline: none; }

@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }

/* ── Old orange / warm tints remapped rule-by-rule (generated from style.css) ── */
.header-review-strip { background: linear-gradient(90deg, #eef6f2 0%, #fff 62%); }
.header-review-link:hover { background: #eef6f2; }
.btn-merch { background: #e6f1ec; border: 1px solid #bcd6c9; }
.btn-merch:hover { background: #d6e8df; border-color: #bcd6c9; }
.btn:focus-visible { outline: 3px solid rgba(196, 18, 48, 0.5); }
.btn-accent { background: linear-gradient(160deg, var(--accent-light) 0%, var(--accent) 55%, #9d0c24 100%); box-shadow: 0 12px 24px rgba(196, 18, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.header-cta { box-shadow: 0 8px 16px rgba(196, 18, 48, 0.22); }
.btn-accent:hover { box-shadow: 0 16px 32px rgba(196, 18, 48, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.hero-glow { background: radial-gradient(circle, rgba(196, 18, 48, 0.25), rgba(196, 18, 48, 0)); }
.founder-video-card { background: linear-gradient(135deg, #eef6f2 0%, #ffffff 65%); }
.founder-social-tile { background: linear-gradient(135deg, #eef6f2 0%, #ffffff 70%); }
.founder-stats-band { background: linear-gradient(135deg, rgba(196, 18, 48, 0.09), rgba(226, 240, 233, 0.65)); }
.highlight-band { background: linear-gradient(135deg, rgba(196, 18, 48, 0.08), rgba(226, 240, 233, 0.6)); }
.fund-strip-card { background: linear-gradient(135deg, #eef6f2 0%, #ffffff 72%); }
.pricing-rate-lawn { background: linear-gradient(180deg, #eef6f2 0%, #fff 100%); }
.quote-card:hover { border-color: rgba(196, 18, 48, 0.4); }
.faq-item-accent { border-color: rgba(196, 18, 48, 0.5); background: rgba(196, 18, 48, 0.08); }
.cta { background:
        radial-gradient(700px 300px at 15% 0%, rgba(196, 18, 48, 0.14), transparent 60%),
        linear-gradient(120deg, #0b0b0b 0%, #0f3d2e 100%); }
.merch-notice { background: #eef6f2; }
.booking-trust-row span { background: #eef6f2; }
.estimate-card { background: linear-gradient(180deg, #eef6f2 0%, #fff 100%); }

/* Header review button: gold outline instead of orange */
.header-review-link { border-color: var(--gold) !important; color: var(--pine-deep) !important; background: rgba(255,255,255,.6); }
.header-review-link:hover { background: var(--pine) !important; color: #fff !important; border-color: var(--pine) !important; }

/* Desktop: the floating quote button stands alone, with no box around it.
   (Phones keep the full-width glass bar that holds both buttons.) */
@media (min-width: 721px) {
    .mobile-action-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; right: 22px; bottom: 22px; }
    .mobile-action-bar .btn { min-height: 50px; padding: 12px 22px; font-size: 1rem; }
}

/* Pages that already lay a black film over the top photo: thin it out so the pine tint isn't doubled up. */
.hero > div[style*="inset:0;background:rgba(0,0,0"] { opacity: .3; }

/* Pages that start with text instead of a photo: leave room for the hanging lights. */
main > :first-child:not(.hero) { margin-top: 50px; }
@media (max-width: 700px) { main > :first-child:not(.hero) { margin-top: 34px; } }

/* Bigger logo and menu */
.header-inner { min-height: 96px; }
.logo img { height: 86px; }
.nav-menu { gap: 34px; }
.nav-menu a { font-size: 1.2rem; font-weight: 600; }
.header-phone { font-size: 1.15rem; }
@media (max-width: 900px) {
    .site-header .header-inner { min-height: 72px; }
    .logo img { height: 62px; }
    .nav-menu { gap: 18px; }
    .nav-menu a { font-size: 1.1rem; }
    .header-phone { font-size: 1.05rem; }
}

/* "Meet William" card on the homepage: larger, with readable caption */
@media (min-width: 1000px) {
    .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.78fr); gap: 28px; }
    .hero-portrait-wrap { padding-top: 30px; }
    .hero-portrait-card { width: 100% !important; max-width: 430px !important; border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 70px -20px rgba(0,0,0,.6); }
    .hero-portrait-image { max-width: none !important; width: 100% !important; }
}
.hero-portrait-card::before { background: radial-gradient(circle at center, rgba(201,162,75,.22), rgba(201,162,75,0)); }
.hero-portrait-badge { background: rgba(6, 44, 31, .82); border-color: rgba(255,255,255,.22); padding: 16px 18px; }
.hero-portrait-copy strong { font-size: 1.3rem; }
.hero-portrait-copy span { font-size: 1rem; line-height: 1.45; color: rgba(255,255,255,.9); }
@media (max-width: 700px) { .hero-portrait-copy strong { font-size: 1.1rem; } .hero-portrait-copy span { font-size: .9rem; } }

/* One glass colour across the hero: shortcut buttons, outline button, proof panel and portrait caption all use the pine glass. */
.hero .service-choices a, .hero .btn-ghost {
    background: linear-gradient(160deg, rgba(6, 44, 31, .78), rgba(6, 44, 31, .62)) !important;
    border-color: rgba(255,255,255,.30) !important; color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
.hero .service-choices a:hover, .hero .service-choices a:focus-visible, .hero .btn-ghost:hover { background: #fff !important; color: var(--pine-deep) !important; border-color: #fff !important; }
.hero-portrait-badge { background: linear-gradient(160deg, rgba(6, 44, 31, .86), rgba(6, 44, 31, .74)); border-color: rgba(255,255,255,.30); }

/* ══ Homepage garage offer: one photo on the right that fades away into pine; liquid-glass price cards on the left ══ */
.gco { position: relative; isolation: isolate; overflow: hidden; color: #fff;
    background:
        radial-gradient(640px 380px at 0% 0%, rgba(196, 18, 48, .22), transparent 62%),
        linear-gradient(150deg, #0a0c0b 0%, #050606 60%, #000 100%); }
.gco-bg { position: absolute; top: 0; right: 0; height: 100%; width: 72%; object-fit: cover; object-position: 66% center; z-index: -1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.9) 76%, #000 90%), linear-gradient(0deg, transparent 0%, #000 22%, #000 82%, rgba(0,0,0,.55) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.9) 76%, #000 90%), linear-gradient(0deg, transparent 0%, #000 22%, #000 82%, rgba(0,0,0,.55) 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
.gco-inner { padding-top: 76px; padding-bottom: 70px; }
.gco-head, .gco-offers, .gco-note { width: min(100%, 560px); }
.gco-tag { display: inline-block; background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; padding: 8px 14px; border-radius: 999px; box-shadow: 0 8px 20px -6px rgba(196, 18, 48, .7), inset 0 1px 0 rgba(255,255,255,.4); }
.gco .gco-head h2 { color: #fff; font-size: clamp(2.8rem, 5vw, 4.6rem); margin: 16px 0 8px; }
.gco-head p { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: rgba(255,255,255,.92); font-weight: 600; }
.gco-offers { display: grid; gap: 18px; margin-top: 30px; }
.gco-card { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: 26px;
    background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.38);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -18px 30px -22px rgba(255,255,255,.3), 0 28px 50px -26px rgba(0,0,0,.75);
    transition: transform .25s ease, box-shadow .25s ease; }
.gco-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -18px 30px -22px rgba(255,255,255,.4), 0 36px 60px -26px rgba(0,0,0,.8); }
.gco-card-full { border-color: rgba(243, 213, 140, .85); }
.gco-price { flex: 0 0 150px; text-align: center; line-height: .9; }
.gco-price span { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.6rem, 5.6vw, 5rem); letter-spacing: -.01em; text-shadow: 0 3px 16px rgba(0,0,0,.35); }
.gco-card-full .gco-price span { color: #f3d58c; }
.gco-price small { display: block; margin-top: 6px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; opacity: .9; }
.gco .gco-copy h3 { color: #fff; font-size: 1.5rem; margin: 0 0 6px; }
.gco-copy p { margin: 0 0 14px; font-size: 1rem; line-height: 1.45; color: rgba(255,255,255,.95); }
.gco-btn { display: inline-block; font-weight: 800; padding: 11px 20px; border-radius: 999px; text-decoration: none; color: var(--pine-deep) !important; background: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -10px rgba(0,0,0,.6); }
.gco-btn:hover { background: #fff; }
.gco-btn-red { color: #fff !important; background: linear-gradient(165deg, #ea4a60 0%, var(--accent) 48%, #8f0b20 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 24px -10px rgba(196, 18, 48, .8); }
.gco-btn-red:hover { background: linear-gradient(165deg, #f05a70 0%, #d21a3a 48%, #9d0c24 100%); }
.gco-note { font-size: .9rem; color: rgba(255,255,255,.8); margin-top: 22px; }
.gco-note a { color: #f3d58c; font-weight: 700; }
.gco-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gco-btn-glass { color: #fff !important; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gco-btn-glass:hover { background: rgba(255,255,255,.92); color: var(--pine-deep) !important; }
/* Blend the banner above into the black: the section slides up under it and fades in. */
.hero + .gco { margin-top: -110px; padding-top: 110px;
    background:
        radial-gradient(640px 380px at 0% 150px, rgba(196, 18, 48, .20), transparent 62%),
        linear-gradient(180deg, rgba(4,5,5,0) 0, rgba(4,5,5,.82) 70px, #040505 110px, #040505 60%, #000 100%); }
.hero + .gco .gco-bg { top: 110px; height: calc(100% - 110px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.9) 76%, #000 90%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 28%, #000 76%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.9) 76%, #000 90%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 28%, #000 76%, transparent 100%); }
@media (max-width: 900px) {
    .gco-bg { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; z-index: 0;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
        -webkit-mask-composite: source-over; mask-composite: add; }
    .hero + .gco { margin-top: -60px; padding-top: 60px; }
    .hero + .gco .gco-bg { top: 0; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%); }
    .gco-inner { padding-top: 0; margin-top: -40px; padding-bottom: 40px; position: relative; }
    .gco-head, .gco-offers, .gco-note { width: 100%; }
    .gco-card { padding: 18px; gap: 14px; }
    .gco-price { flex-basis: 110px; }
}

/* ══ "See what we take off your hands": continues the dark run from the garage offer,
      then exits on a slant. Cards are tilted snapshots on smoked glass. ══ */
.recent-work { position: relative; color: #fff; padding-top: 84px; padding-bottom: 150px;
    background:
        radial-gradient(760px 420px at 100% 12%, rgba(196, 18, 48, .26), transparent 62%),
        radial-gradient(700px 460px at 0% 88%, rgba(201, 162, 75, .14), transparent 60%),
        linear-gradient(180deg, #000 0%, #04130d 12%, #082a1e 46%, #0f3d2e 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 84px), 0 100%); }
.recent-work { z-index: 1; }
.recent-work + .section { margin-top: -86px; padding-top: calc(var(--sec-pad, 90px) + 60px); }
.recent-work .section-heading h2 { color: #fff; }
.recent-work .section-heading p { color: rgba(255,255,255,.82); }
.recent-work .section-heading .eyebrow { color: #f3d58c; }
.recent-work .section-heading .eyebrow::before { background: var(--gold); }
.recent-work .job-stories { counter-reset: job; gap: 34px; margin-top: 18px; align-items: start; }
.recent-work .job-story { position: relative; overflow: visible; counter-increment: job; color: rgba(255,255,255,.9);
    background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.30); border-radius: 22px; padding: 12px 12px 0;
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 34px 60px -30px rgba(0,0,0,.85);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.recent-work .job-story:nth-child(1) { transform: rotate(-2deg); }
.recent-work .job-story:nth-child(2) { transform: translateY(26px) rotate(.8deg); }
.recent-work .job-story:nth-child(3) { transform: rotate(2.2deg); }
.recent-work .job-story:hover { transform: rotate(0) translateY(-8px) scale(1.02); border-color: rgba(243, 213, 140, .8); z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 44px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(243, 213, 140, .25); }
.recent-work .job-story::before { content: "0" counter(job); position: absolute; top: -18px; left: -14px; z-index: 3;
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
    font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #fff;
    background: linear-gradient(165deg, #ea4a60 0%, var(--accent) 48%, #8f0b20 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 22px -8px rgba(196, 18, 48, .85); }
.recent-work .job-story img { border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.7); }
.recent-work .job-story-copy { padding: 20px 12px 22px; }
.recent-work .job-story h3 { color: #fff; }
.recent-work .job-story p { color: rgba(255,255,255,.86); }
.recent-work .job-story p strong { color: #f3d58c; }
.recent-work .job-story .job-time { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; background: rgba(243, 213, 140, .12); border: 1px solid rgba(243, 213, 140, .45); color: #fff; }
.recent-work .job-story a { color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.45); padding: 9px 16px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.recent-work .job-story a:hover { background: #fff; color: var(--pine-deep); }
.recent-work .work-more { margin-top: 58px; }
.recent-work .work-more a { color: #f3d58c; font-weight: 700; }
@media (max-width: 760px) {
    .recent-work { padding-top: 56px; padding-bottom: 110px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
    .recent-work + .section { margin-top: -42px; padding-top: 100px; }
    .recent-work .job-story:nth-child(1) { transform: rotate(-1.2deg); }
    .recent-work .job-story:nth-child(2) { transform: rotate(1deg); }
    .recent-work .job-story:nth-child(3) { transform: rotate(-1deg); }
    .recent-work .job-story::before { left: -6px; }
}
@media (prefers-reduced-motion: reduce) { .recent-work .job-story { transition: none; } }

/* "Why neighbors book": eight tiles, four across, with a little lift and a gold edge on hover */
@media (min-width: 1000px) { .section-ink .differentiator-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; } }
.section-ink .differentiator-tile { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; position: relative; overflow: hidden; }
.section-ink .differentiator-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); opacity: .0; transition: opacity .25s ease; }
.section-ink .differentiator-tile:hover { transform: translateY(-5px); border-color: rgba(243, 213, 140, .6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 30px 46px -26px rgba(0,0,0,.8); }
.section-ink .differentiator-tile:hover::after { opacity: 1; }
.section-ink .differentiator-tile h3 { font-size: 1.15rem !important; }
.recent-work .job-story .job-paid { background: rgba(196, 18, 48, .30); border-color: rgba(255, 140, 155, .7); margin-left: 6px; }
.recent-work .job-story .job-paid strong { color: #fff; }
.gco-bigger { width: min(100%, 560px); margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 20px;
    background: linear-gradient(150deg, rgba(243, 213, 140, .16), rgba(255,255,255,.04)); border: 1px solid rgba(243, 213, 140, .5);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.gco-bigger > div { flex: 1 1 240px; }
.gco-bigger strong { display: block; font-size: 1.15rem; color: #f3d58c; margin-bottom: 2px; }
.gco-bigger span { font-size: .98rem; line-height: 1.45; color: rgba(255,255,255,.92); }
.gco-bigger b { color: #fff; }
.gco-also { width: min(100%, 560px); margin-top: 14px; font-size: .92rem; color: rgba(255,255,255,.75); }
.gco-also a { color: #f3d58c; font-weight: 700; }
@media (max-width: 900px) { .gco-bigger, .gco-also { width: 100%; } }
.gco + .recent-work { border-top: 0 !important; margin-top: -1px; }

/* ══════════ Lower homepage (reviews → footer) ══════════ */

/* Reviews wall: one section, nine quotes in a staggered wall; the three long ones are pine. */
.reviews-wall { padding-top: 70px; }
.reviews-wall .section-heading { text-align: center; }
.reviews-wall .section-heading .eyebrow { justify-content: center; color: var(--accent-dark); }
.rw-grid { columns: 3 280px; column-gap: 24px; margin-top: 34px; }
.rw-grid .quote-card { display: block; break-inside: avoid; margin: 0 0 24px; padding: 26px 26px 22px; border-radius: 24px; position: relative; overflow: hidden;
    background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
    transition: transform .25s ease, box-shadow .25s ease; }
.rw-grid .quote-card:hover { transform: translateY(-4px) rotate(-.4deg); }
.rw-grid .quote-card::after { content: "\201D"; position: absolute; right: 16px; top: -18px; font-family: Georgia, serif; font-size: 7.5rem; line-height: 1; color: rgba(196, 18, 48, .12); pointer-events: none; }
.rw-grid .review-stars { color: var(--gold); font-size: 1.25rem; letter-spacing: .12em; margin-bottom: 10px; }
.rw-grid blockquote { font-size: 1.08rem; line-height: 1.55; font-weight: 600; color: var(--pine-deep); margin: 0 0 14px; }
.rw-grid .notable { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.rw-grid figcaption { font-weight: 800; color: var(--accent-dark); font-size: .95rem; }
.rw-grid .quote-card.featured { color: #fff; border-color: rgba(255,255,255,.22);
    background: radial-gradient(420px 240px at 100% 0%, rgba(196, 18, 48, .38), transparent 64%), linear-gradient(150deg, #11503b 0%, #0b3527 60%, #072319 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 30px 50px -28px rgba(7, 35, 25, .8); }
.rw-grid .quote-card.featured::after { color: rgba(243, 213, 140, .22); }
.rw-grid .quote-card.featured blockquote { color: #fff; font-size: 1.16rem; }
.rw-grid .quote-card.featured .notable { color: rgba(255,255,255,.7); }
.rw-grid .quote-card.featured figcaption { color: #f3d58c; }
.rw-more { text-align: center; margin-top: 14px; }

/* Services: six cards on pine, entering on a reverse slant. */
.services-dark { position: relative; color: #fff; padding-top: 150px; padding-bottom: 100px; margin-top: 10px;
    background:
        radial-gradient(760px 420px at 0% 8%, rgba(196, 18, 48, .24), transparent 62%),
        radial-gradient(700px 460px at 100% 100%, rgba(201, 162, 75, .14), transparent 60%),
        linear-gradient(170deg, #0f3d2e 0%, #0b3527 45%, #072319 100%);
    clip-path: polygon(0 84px, 100% 0, 100% 100%, 0 100%); }
.services-dark .section-heading h2 { color: #fff; }
.services-dark .section-heading p { color: rgba(255,255,255,.82); }
.services-dark .service-card { color: #fff; border-radius: 22px;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 30px 50px -28px rgba(0,0,0,.8); }
.services-dark .service-card:hover { transform: translateY(-6px); border-color: rgba(243, 213, 140, .75); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 40px 60px -28px rgba(0,0,0,.9); }
.services-dark .service-card h3, .services-dark .service-card h3 a { color: #fff !important; }
.services-dark .service-card p { color: rgba(255,255,255,.86); }
.services-dark .service-card .footer-link-strong { color: #f3d58c; }
.services-dark .service-card-media img { transition: transform .5s ease; }
.services-dark .service-card:hover .service-card-media img { transform: scale(1.05); }
.services-dark .service-card-media { overflow: hidden; display: block; }
.svc-also { margin-top: 30px; text-align: center; color: rgba(255,255,255,.82); font-size: 1rem; }
.svc-also a { color: #f3d58c; font-weight: 700; }
.services-dark + .section { padding-top: 80px; }

/* Before & after gallery */
.job-gallery-section .job-photo-card { border-radius: 20px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.job-gallery-section .job-photo-card:hover { transform: translateY(-4px); }
.job-gallery-section figcaption { font-weight: 700; color: var(--pine-deep); }

/* FAQ */
#faq .section-heading { text-align: center; }
#faq .faq-item { border-radius: 18px; }
#faq .faq-item[open] { border-color: rgba(196, 18, 48, .35); box-shadow: var(--glass-shadow), 0 0 0 3px rgba(196, 18, 48, .07); }
#faq .faq-item summary { font-weight: 700; }

/* Founder note: a pine letter card */
.founder-card { color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; padding: 38px 40px; max-width: 900px; margin: 0 auto;
    background: radial-gradient(520px 280px at 100% 0%, rgba(196, 18, 48, .34), transparent 64%), linear-gradient(150deg, #11503b 0%, #0b3527 60%, #072319 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 34px 60px -30px rgba(7, 35, 25, .85);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
.founder-card p { color: rgba(255,255,255,.92); font-size: 1.08rem; }
.founder-card .eyebrow { color: #f3d58c; }
.founder-card .eyebrow::before { background: var(--gold); }
.founder-card a { color: #f3d58c; }

/* Fund strip + partners: quiet glass, closer together */
.fund-strip { padding-top: 70px; padding-bottom: 20px; }
.partner-spotlight { padding-top: 30px; padding-bottom: 70px; }
.partner-card { border-radius: 20px; }
.partner-card a { color: var(--accent); font-weight: 700; }

/* Email sign-up strip */
.cta #siteEmailInput { border-radius: 999px !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.4) !important; padding: .8rem 1.2rem !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cta #siteEmailInput::placeholder { color: rgba(255,255,255,.65); }

@media (max-width: 760px) {
    .services-dark { padding-top: 96px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
    .founder-card { padding: 26px 22px; }
    .rw-grid { column-gap: 16px; }
}

/* Services: eight tiles, four across (seven services + an "also" tile) */
@media (min-width: 1100px) { .services-dark .service-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .services-dark .container { width: min(1240px, 94%); max-width: none; } }
.services-dark .svc-also-card { padding: 26px 24px; align-content: start; gap: 12px;
    background: linear-gradient(160deg, rgba(196, 18, 48, .34), rgba(255,255,255,.05)); border-color: rgba(243, 213, 140, .55); }
.services-dark .svc-also-card .eyebrow { color: #f3d58c; }
.services-dark .svc-also-card .eyebrow::before { background: var(--gold); }
.services-dark .svc-also-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.services-dark .svc-also-card li { color: rgba(255,255,255,.9); padding-left: 18px; position: relative; line-height: 1.4; }
.services-dark .svc-also-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.services-dark .svc-also-card li a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(243, 213, 140, .7); text-underline-offset: 3px; }

/* Partners: one clean glass card each (no box-in-a-box) */
.partner-shell { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.partner-card { padding: 22px 24px; height: 100%; }
.services-dark .svc-also-card { justify-content: center; align-content: center; }
.services-dark .svc-also-card h3 { font-size: 1.5rem; line-height: 1.15; }
.svc-ask-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Services page: winter grid + dark gallery */
.svc-gallery-dark { color: #fff; margin-top: -1px; padding-top: 20px; padding-bottom: 90px;
    background: linear-gradient(180deg, #072319 0%, #0b3527 100%); }
.svc-gallery-dark .section-heading h2 { color: #fff; }
.svc-gallery-dark .section-heading p { color: rgba(255,255,255,.82); }
.svc-gallery-dark .job-photo-card { border-radius: 22px; overflow: hidden; color: #fff; position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 30px 50px -28px rgba(0,0,0,.8); transition: transform .25s ease, border-color .25s ease; }
.svc-gallery-dark .job-photo-card:hover { transform: translateY(-4px); border-color: rgba(243, 213, 140, .75); }
.svc-gallery-dark .job-photo-card img { background: transparent; }
.svc-gallery-dark .job-photo-card figcaption { position: static; padding: 14px 18px 16px; font-size: .95rem; font-weight: 800; color: #f3d58c; background: rgba(7, 35, 25, .55); }
.svc-gallery-dark .gallery-cta { margin-top: 36px; }
.services-dark .container > .svc-also { max-width: 940px; margin-left: auto; margin-right: auto; }

/* Our work page: dark gallery, filters, lightbox */
.work-page { padding-bottom: 90px; }
.work-page .section-heading { text-align: left; }
.work-page .section-heading h1 { color: #fff; }
.work-page .section-heading .eyebrow { color: #f3d58c; }
.work-page .section-heading .eyebrow::before { background: var(--gold); }
.work-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 30px; }
.work-filter { font: inherit; font-weight: 800; font-size: .95rem; color: #fff; cursor: pointer; padding: 9px 18px; border-radius: 999px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.work-filter:hover { border-color: rgba(243, 213, 140, .8); }
.work-filter.is-active { color: var(--pine-deep); background: #f3d58c; border-color: #f3d58c; }
.work-grid { column-count: 3; column-gap: 20px; }
.work-item { break-inside: avoid; margin: 0 0 20px; border-radius: 22px; overflow: hidden; color: #fff;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 30px 50px -28px rgba(0,0,0,.8); transition: transform .25s ease, border-color .25s ease; }
.work-item[hidden] { display: none; }
.work-item:hover { transform: translateY(-4px); border-color: rgba(243, 213, 140, .75); }
.work-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.work-open img { display: block; width: 100%; height: auto; }
.work-item figcaption { padding: 13px 18px 15px; font-weight: 800; font-size: .95rem; color: #f3d58c; background: rgba(7, 35, 25, .55); }
.work-cta { margin: 36px auto 0; max-width: 760px; text-align: center; padding: 34px 28px; border-radius: 26px;
    background: linear-gradient(160deg, rgba(196, 18, 48, .30), rgba(255,255,255,.05)); border: 1px solid rgba(243, 213, 140, .5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.work-cta h2 { color: #fff; margin: 0 0 8px; }
.work-cta p { color: rgba(255,255,255,.88); margin: 0 0 18px; }
.work-cta .svc-ask-actions { justify-content: center; }
.work-lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; overflow: visible; }
.work-lightbox::backdrop { background: rgba(3, 14, 10, .88); }
.work-lightbox img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; border-radius: 16px; border: 1px solid rgba(255,255,255,.3); }
.work-lb-cap { text-align: center; color: #f3d58c; font-weight: 800; margin: 12px 0 0; }
.work-close { position: absolute; top: -14px; right: -6px; width: 42px; height: 42px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer;
    color: #fff; background: rgba(7, 35, 25, .9); border: 1px solid rgba(243, 213, 140, .7); z-index: 2; }
@media (max-width: 1000px) { .work-grid { column-count: 2; } }
@media (max-width: 600px) { .work-grid { column-count: 1; } .work-page .section-heading h1 { font-size: 2.4rem; } }

/* Homepage: storage offer (photo on the left, mirror of the garage offer) */
@media (min-width: 901px) {
    .gco-storage .gco-bg { right: auto; left: 0; object-position: 40% center;
        -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.9) 76%, #000 90%), linear-gradient(0deg, transparent 0%, #000 22%, #000 82%, rgba(0,0,0,.55) 100%);
        mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.9) 76%, #000 90%), linear-gradient(0deg, transparent 0%, #000 22%, #000 82%, rgba(0,0,0,.55) 100%); }
    .gco-storage .gco-head, .gco-storage .gco-offers, .gco-storage .gco-note, .gco-storage .gco-bigger, .gco-storage .gco-also { margin-left: auto; }
}
.gco-storage .gco-price span { font-size: clamp(3.2rem, 5vw, 4.4rem); }
/* Storage offer without a photo yet: warm glow on the right, normal top padding */
.gco-storage { background:
    radial-gradient(560px 420px at 82% 50%, rgba(201, 162, 75, .16), transparent 66%),
    radial-gradient(640px 380px at 0% 0%, rgba(196, 18, 48, .22), transparent 62%),
    linear-gradient(150deg, #0a0c0b 0%, #050606 60%, #000 100%); }
.gco-storage:not(:has(.gco-bg)) .gco-inner { padding-top: 70px; margin-top: 0; }
@media (min-width: 901px) {
    .gco-storage:not(:has(.gco-bg)) .gco-head, .gco-storage:not(:has(.gco-bg)) .gco-offers, .gco-storage:not(:has(.gco-bg)) .gco-note, .gco-storage:not(:has(.gco-bg)) .gco-bigger, .gco-storage:not(:has(.gco-bg)) .gco-also { margin-left: 0; }
}

/* Storage offer with the wide banner: photo on top, heading centred under it, price cards side by side */
.gco-storage-banner .sto-banner { display: block; width: 100%; height: auto; position: relative; z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
.gco-storage.gco-storage-banner .gco-inner { padding-top: 0; margin-top: -3vw; position: relative; z-index: 1; padding-bottom: 70px; }
.gco-storage.gco-storage-banner .gco-head { width: min(100%, 760px); margin: 0 auto; text-align: center; }
.gco-storage.gco-storage-banner .gco-head h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.gco-storage.gco-storage-banner .gco-offers { width: min(100%, 1020px); margin: 30px auto 0; grid-template-columns: 1fr 1fr; }
.gco-storage.gco-storage-banner .gco-note { width: min(100%, 1020px); margin: 22px auto 0; text-align: center; }
.gco-storage.gco-storage-banner .gco-bigger { width: min(100%, 1020px); margin: 18px auto 0; }
.gco-storage.gco-storage-banner .gco-also { width: min(100%, 1020px); margin: 14px auto 0; text-align: center; }
@media (max-width: 900px) {
    .gco-storage.gco-storage-banner .gco-offers { grid-template-columns: 1fr; }
    .gco-storage.gco-storage-banner .gco-inner { margin-top: -6vw; }
}
@media (max-width: 600px) {
    .gco-storage-banner .sto-banner { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% center; }
}
.gco-storage.gco-storage-banner .gco-head { width: min(100%, 900px); }
.gco-storage.gco-storage-banner .gco-price { flex-basis: 120px; }
.gco-storage.gco-storage-banner .gco-card { gap: 16px; padding: 20px 22px; }