/* ==========================================================================
   Clean Green Turf — Design System v2
   Self-hosted Oswald (display) + Plus Jakarta Sans (body). No external
   font/icon requests. Bold condensed-uppercase headings, warm off-white
   ground, punchy high-contrast accent — not a soft generic SaaS look.
   ========================================================================== */

@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/oswald-500.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/oswald-600.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/oswald-700.woff2') format('woff2'); }

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2'); }

:root {
    /* Color system — sampled directly from the Clean Green Turf logo
       (deep teal-forest #0a4650 + sage #b4dcbe), warm cream ground, and a
       brighter, more saturated green as the CTA/accent color so it pops
       against the darker teal-greens rather than introducing an unrelated
       hue. See docs/audit-findings.md "Design v3" for how these were picked. */
    --ink: #11140f;
    --ink-soft: #4a5049;
    --ink-faint: #7b8279;

    --forest-950: #0a2e34;
    --forest-900: #0d3d46;
    --forest-800: #134f59;
    --green-700: #2f7d54;
    --green-600: #27995f;
    --green-500: #35b872;
    --green-100: #e1f2e6;

    --cream: #faf7ee;
    --cream-deep: #f2ecd9;
    --paper: #fffdf8;
    --border: #e4ddc9;
    --border-strong: #cfc6a9;

    --accent-700: #18963f;
    --accent-600: #22c05a;
    --accent-500: #4cd67d;
    --accent-100: #e1fbe8;

    --star: #f5b400;

    /* Type */
    --font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --step-1: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
    --step-3: clamp(2.2rem, 1.7rem + 2vw, 3.1rem);
    --step-4: clamp(2.8rem, 2rem + 3.6vw, 4.6rem);

    /* Spacing (8px base) */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-8: 6rem;

    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 3px rgba(18, 20, 15, 0.1);
    --shadow: 0 10px 26px -10px rgba(18, 20, 15, 0.28);
    --shadow-lg: 0 26px 60px -18px rgba(18, 20, 15, 0.38);

    --max-width: 1240px;
    --header-h: 80px;
}

/* ---- Reset & base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.65;
    font-size: var(--step-0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-600); }
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.08;
    color: var(--forest-950);
    margin: 0 0 0.45em;
}
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: 0.005em; }
h2, h3 { font-size: var(--step-2); margin-top: 2.4em; }
h4 { font-size: var(--step-1); margin-top: 1.6em; }
p { margin: 0 0 1.1em; color: var(--ink-soft); }
ul, ol { padding-left: 0; list-style: none; margin: 0 0 1.1em; }
strong { color: var(--forest-950); font-weight: 700; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-family: var(--font-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em;
    font-size: var(--step--1); color: var(--accent-600);
}
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
    padding: 0.95em 1.8em;
    border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    font-size: var(--step--1);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.btn--primary { background: var(--accent-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-700); transform: translateY(-2px); box-shadow: var(--shadow); color: #fff; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }
.btn--outline { background: transparent; border-color: var(--forest-800); color: var(--forest-900); }
.btn--outline:hover { background: var(--forest-900); color: #fff; }
.btn--block { width: 100%; }

/* ---- Header ---- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--forest-950);
    border-bottom: 3px solid var(--accent-600);
}
.site-header__inner {
    max-width: var(--max-width); margin: 0 auto;
    padding: 0.7em 1.5rem;
    display: flex; align-items: center; gap: var(--space-5);
    min-height: var(--header-h);
}
.site-header__logo {
    display: flex; align-items: center; gap: 0.6em;
    font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
    font-size: 1.2rem; color: #fff;
    flex-shrink: 0;
}
.site-header__logo img { border-radius: 4px; background: #fff; padding: 2px; }
.site-header__cta {
    margin-left: auto;
    display: flex; align-items: center; gap: var(--space-4);
}
.site-header__phone {
    display: flex; align-items: center; gap: 0.5em;
    font-family: var(--font-display); font-weight: 600; color: #fff; font-size: var(--step-1);
    letter-spacing: 0.01em;
}
.site-header__phone svg { width: 20px; height: 20px; color: var(--accent-500); }
.site-header__phone small { display: block; font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #91a897; font-size: 0.55em; }
.site-header__menu-toggle {
    display: none;
    background: none; border: none; cursor: pointer; color: #fff;
    line-height: 1; padding: 0.2em;
}
.site-header__menu-toggle svg { width: 26px; height: 26px; }
.site-header__menu-toggle .icon-close { display: none; }
.site-header.is-open .site-header__menu-toggle .icon-menu { display: none; }
.site-header.is-open .site-header__menu-toggle .icon-close { display: block; }

.site-nav__list {
    list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0;
    align-items: center;
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
    font-size: var(--step--1);
}
.site-nav__list > li > a, .site-nav__dropdown-label { color: #cfe0d3; padding: 0.4em 0; position: relative; cursor: default; }
.site-nav__list > li > a:hover { color: #fff; }
.site-nav__has-dropdown { position: relative; }
.site-nav__has-dropdown:hover .site-nav__dropdown-label,
.site-nav__has-dropdown:focus-within .site-nav__dropdown-label { color: #fff; }
.site-nav__dropdown {
    display: none;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: var(--paper);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-600);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    list-style: none; margin: 0 0 0; padding: 0.6em;
    max-height: 65vh; overflow-y: auto;
    columns: 2; column-gap: 0.5em;
    width: 340px;
}
.site-nav__dropdown--single { columns: 1; width: 220px; }
.site-nav__has-dropdown:hover .site-nav__dropdown,
.site-nav__has-dropdown:focus-within .site-nav__dropdown { display: block; }
.site-nav__dropdown li a {
    display: block; padding: 0.5em 0.7em; border-radius: 4px;
    font-family: var(--font-sans); font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--ink-soft); break-inside: avoid;
}
.site-nav__dropdown li a:hover { background: var(--green-100); color: var(--forest-900); }

@media (max-width: 900px) {
    .site-header__inner { flex-wrap: wrap; }
    .site-header__logo { order: 1; }
    .site-header__menu-toggle { display: block; order: 2; margin-left: auto; }
    /* Phone number + Free Quote button both drop on mobile — the sticky
       bottom Call Now / Free Quote bar (mobile-cta-bar) already covers
       both, so keeping them in the header too was pure duplicated real
       estate above the fold. */
    .site-header__cta { display: none; }
    .site-nav { order: 4; width: 100%; display: none; }
    .site-header.is-open .site-nav { display: block; }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5em 0; }
    .site-nav__list > li > a, .site-nav__dropdown-label { padding: 0.7em 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .site-nav__dropdown { position: static; display: block; box-shadow: none; border: none; border-top: none; padding-left: 0.5em; transform: none; width: auto; columns: 1; background: transparent; }
    .site-nav__dropdown li a { color: #cfe0d3; }
    .site-nav__dropdown li a:hover { background: rgba(255,255,255,0.08); color: #fff; }
}

/* ---- Trust bar ---- */
.trust-bar { background: var(--forest-900); border-bottom: 1px solid rgba(255,255,255,0.08); }
.trust-bar__inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0.85em 1.5rem;
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6);
}
.trust-bar__item {
    display: flex; align-items: center; gap: 0.55em;
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
    font-size: var(--step--1); color: #cfe0d3;
    white-space: nowrap;
}
.trust-bar__item svg { width: 17px; height: 17px; color: var(--accent-500); flex-shrink: 0; }
@media (max-width: 900px) {
    /* Same reasoning as the header phone/CTA: these four trust badges eat
       up a lot of vertical space above the fold on a phone, and none of
       them are actions — worth trading for getting to real content
       faster. Still shown on desktop where there's room to spare. */
    .trust-bar { display: none; }
}

/* ---- Hero ---- */
.page-hero {
    position: relative;
    display: grid;
    height: 62vh;
    min-height: 500px;
    max-height: 720px;
    align-items: center;
    color: #fff;
    isolation: isolate;
    margin-bottom: var(--space-7);
    overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.page-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(8,23,15,0.25) 0%, rgba(8,23,15,0.6) 60%, rgba(8,23,15,0.92) 100%);
}
.page-hero__text {
    grid-area: 1 / 1; position: relative; z-index: 2;
    max-width: var(--max-width); margin: 0 auto; width: 100%;
    padding: var(--space-6) 1.5rem var(--space-6);
}
.page-hero__text h1 { color: #fff; max-width: 900px; margin-bottom: 0.25em; }
.page-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 0.5em;
    color: var(--accent-500); font-family: var(--font-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em;
    font-size: var(--step--1);
    margin-bottom: var(--space-3);
}
.page-hero__eyebrow svg { width: 16px; height: 16px; }
.page-hero__sub { color: rgba(255,255,255,0.88); font-size: var(--step-1); max-width: 680px; margin-bottom: var(--space-3); font-family: var(--font-sans); }
.page-hero__services {
    color: var(--accent-500); font-family: var(--font-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1);
    margin-bottom: var(--space-4);
}
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* At narrow widths, a long wrapped headline plus a subtitle/services line
   plus two CTA buttons (the homepage hero has all of these) can be taller
   than the fixed 62vh/500-720px box above, and overflow:hidden clips
   whatever doesn't fit (a real bug caught on a live phone: the phone-
   number button got cut off). Let the hero grow to fit its content at
   mobile widths instead of clipping it — .page-hero__media is absolutely
   positioned so it stretches to match, same technique .page-hero--plain
   already uses for its no-image variant. */
@media (max-width: 640px) {
    .page-hero { height: auto; min-height: 420px; max-height: none; }
}

/* Hero without an image (e.g. About) — solid brand gradient */
.page-hero--plain {
    background: linear-gradient(135deg, var(--forest-950), var(--forest-800));
    height: auto; min-height: 0; max-height: none;
}
.page-hero--plain .page-hero__text { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.page-hero--plain::after { content: none; }

/* Article hero (blog) */
.article-hero { padding: var(--space-6) 0 var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); }
.article-hero h1 { max-width: 780px; font-size: var(--step-3); }
.article-hero__meta { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-600); font-weight: 500; font-size: var(--step--1); }

/* ---- Main / prose ---- */
main { display: block; }
.prose { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem var(--space-8); }
.prose > p:first-of-type { font-size: var(--step-1); color: var(--forest-900); }
.prose img {
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    margin: var(--space-4) 0;
}
/* Scoped to specific oversized content photos rather than all .prose img
   — several pages use portrait photos that need their full height
   uncropped, so a blanket cap would clip those. Same capped-height +
   object-fit: cover technique as the sitewide .page-hero images. */
.prose__photo--capped { width: 100%; height: 480px; object-fit: cover; }
@media (max-width: 700px) { .prose__photo--capped { height: 260px; } }
.about-photo-caption {
    margin: -0.75rem 0 var(--space-4); font-size: var(--step--1); font-style: italic; color: var(--ink-faint);
}
.prose a:not(.btn) { text-decoration: underline; text-decoration-color: var(--accent-100); text-underline-offset: 3px; font-weight: 600; color: var(--accent-600); }
.prose a:not(.btn):hover { text-decoration-color: var(--accent-500); color: var(--accent-700); }
.prose > ul, .prose > ol { margin-left: 0; }
.prose li {
    position: relative; padding-left: 1.8em; margin-bottom: 0.6em; color: var(--ink-soft);
}
.prose li::before {
    content: ""; position: absolute; left: 0; top: 0.45em;
    width: 8px; height: 8px;
    background: var(--accent-500);
}

/* Standalone CTA links inside migrated content, styled as real buttons */
.prose > p > a[href="/#free-quote"]:only-child,
.prose > a[href="/#free-quote"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    padding: 0.95em 1.8em; margin: 0.3em 0 1.4em;
    background: var(--accent-600); color: #fff !important;
    border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.prose > p > a[href="/#free-quote"]:only-child:hover,
.prose > a[href="/#free-quote"]:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--accent-700); }

/* ---- Cards / process grid ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-5) 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-5) 0; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
    background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--green-600);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.step-card { position: relative; padding-top: var(--space-4); }
.step-card__number {
    position: absolute; top: -17px; left: var(--space-4);
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent-600); color: #fff; font-family: var(--font-display); font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.step-card__icon { width: 40px; height: 40px; color: var(--green-600); margin-bottom: var(--space-2); }
.step-card h4 { margin-top: 0; font-size: var(--step-0); }
.step-card p { margin-bottom: 0; }

/* ---- Stats strip ---- */
.stats-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
    background: var(--forest-950);
    padding: var(--space-5); margin: var(--space-6) 0; color: #fff;
    border-top: 3px solid var(--accent-600);
}
.stats-strip__item { text-align: center; }
.stats-strip__number { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; color: var(--accent-500); display: block; line-height: 1; margin-bottom: 0.25em; }
.stats-strip__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--step--1); color: #cfe0d3; font-weight: 500; }
@media (max-width: 700px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---- Gallery ---- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.gallery img {
    width: 100%; height: 200px; object-fit: cover; margin: 0;
    transition: transform 0.35s ease;
}
.gallery a, .gallery > img { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.gallery img:hover { transform: scale(1.06); }

/* ---- Testimonials / blockquote ---- */
blockquote {
    margin: var(--space-4) 0; padding: var(--space-4);
    background: var(--paper); border: 1px solid var(--border); border-left: 4px solid var(--green-600);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: var(--shadow-sm);
    position: relative;
}
blockquote::before {
    content: "\201C";
    position: absolute; top: 0.05em; left: var(--space-3);
    font-family: Georgia, serif; font-size: 3.5rem; color: var(--green-100);
    line-height: 1; z-index: 0;
}
blockquote p { position: relative; z-index: 1; color: var(--ink-soft); font-size: var(--step-0); }
blockquote footer {
    margin-top: var(--space-2); color: var(--forest-950); font-weight: 700; font-size: var(--step--1);
    display: flex; align-items: center; gap: 0.5em;
}
blockquote footer::before { content: "★★★★★"; color: var(--star); letter-spacing: 1px; font-size: 0.9em; }
blockquote img {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    float: left; margin: 0 var(--space-3) var(--space-2) 0; box-shadow: none;
}
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 800px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---- Quote form ---- */
.quote-form-wrap {
    background: var(--paper); border: 1px solid var(--border); border-top: 4px solid var(--accent-600);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow); padding: var(--space-5); max-width: 640px; margin: var(--space-4) 0;
}
.quote-form-wrap__head { margin-bottom: var(--space-3); }
.quote-form-wrap__head h3 { margin-top: 0; }
.quote-form-wrap__head p { margin-bottom: 0; color: var(--ink-faint); }
.quote-form { display: block; }
.quote-form__row { margin-bottom: var(--space-3); }
.quote-form__row label {
    display: block; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
    margin-bottom: 0.4em; font-size: var(--step--1); color: var(--forest-950);
}
.quote-form__row input,
.quote-form__row select,
.quote-form__row textarea {
    width: 100%;
    padding: 0.8em 1em;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 1rem;
    background: var(--cream);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.quote-form__row input:focus,
.quote-form__row select:focus,
.quote-form__row textarea:focus {
    outline: none; border-color: var(--green-600); background: var(--paper);
}
.quote-form__row--checkboxes { display: flex; flex-direction: column; gap: 0.6em; }
.quote-form__row--checkboxes label {
    display: flex; align-items: center; gap: 0.6em; font-family: var(--font-sans); font-weight: 500;
    text-transform: none; letter-spacing: 0; color: var(--ink-soft);
}
.quote-form__row--checkboxes input { width: auto; flex-shrink: 0; accent-color: var(--green-600); }
.quote-form__group-label {
    display: block; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
    margin-bottom: 0.5em; color: var(--forest-950); font-size: var(--step--1);
}
.quote-form__hp { position: absolute; left: -9999px; }
.quote-form__trust { margin-top: var(--space-3); font-size: var(--step--1); color: var(--ink-faint); display: flex; align-items: center; gap: 0.5em; }
.quote-form__trust svg { width: 16px; height: 16px; color: var(--green-600); }

/* ---- CTA banner ---- */
.cta-banner {
    background: var(--forest-950);
    border-top: 4px solid var(--accent-600);
    color: #fff;
    padding: var(--space-6); margin: var(--space-7) 0;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    flex-wrap: wrap;
}
.cta-banner__text h2 { color: #fff; margin: 0 0 0.2em; }
.cta-banner__text p { color: #b9ccbc; margin: 0; }
.cta-banner__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- 404 ---- */
.error-404 { text-align: center; padding: var(--space-8) 0; }
.error-404 ul { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; padding: 0; }

/* ---- Footer ---- */
.site-footer { background: var(--forest-950); color: #b9ccbc; margin-top: var(--space-7); }
.site-footer a { color: #d8e6da; }
.site-footer a:hover { color: #fff; }
.site-footer__top {
    max-width: var(--max-width); margin: 0 auto;
    padding: var(--space-7) 1.5rem var(--space-5);
    display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: var(--space-5);
}
.site-footer h2 { color: #fff; margin-top: 0; font-size: var(--step-1); }
.site-footer h3 { color: #fff; margin-top: 0; font-size: var(--step--1); letter-spacing: 0.08em; }
.site-footer h3 a { color: inherit; }
.site-footer h3 a:hover { color: var(--accent-500); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55em; font-size: var(--step--1); }
.site-footer__about p { color: #b9ccbc; font-size: var(--step--1); }
.site-footer__nap { display: flex; align-items: flex-start; gap: 0.6em; margin-bottom: 0.9em; font-size: var(--step--1); }
.site-footer__nap svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15em; color: var(--accent-500); }
.site-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.site-footer__social a {
    display: flex; width: 36px; height: 36px; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.08);
}
.site-footer__social a:hover { background: var(--accent-600); }
.site-footer__social svg { width: 17px; height: 17px; }
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center; padding: var(--space-3); font-size: var(--step--1); color: #7f9689;
}
@media (max-width: 980px) {
    .site-footer__top { grid-template-columns: 1fr 1fr; }
    .site-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .site-footer__top { grid-template-columns: 1fr; }
}

/* ---- Mobile sticky CTA bar ---- */
.mobile-cta-bar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--forest-950); border-top: 3px solid var(--accent-600);
    box-shadow: 0 -6px 20px rgba(8,23,15,0.3);
    padding: 0.6em 0.8em; padding-bottom: calc(0.6em + env(safe-area-inset-bottom));
}
.mobile-cta-bar__inner { display: flex; gap: 0.6em; }
.mobile-cta-bar .btn { flex: 1; padding: 0.85em 1em; }
.mobile-cta-bar .btn--outline { background: transparent; border-color: #fff; color: #fff; }
.mobile-cta-bar .btn--outline:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 900px) {
    .mobile-cta-bar { display: block; }
    body { padding-bottom: 76px; }
}

/* ---- Article ---- */
.article__meta { color: var(--ink-faint); font-size: 0.9em; margin-bottom: 1.5em; }

/* ---- Scheduler ---- */
.btn--small { padding: 0.5em 1em; font-size: var(--step--1); }

/* Booking-page layout: heading+sub on the left, calendar on the right,
   so the calendar is visible without scrolling — the calendar itself is
   the page's whole point. On mobile (single column) the widget comes
   right after the heading, ahead of the trust bullets, so what to do is
   immediately obvious without scrolling past a bulleted list first. */
.scheduler-hero {
    display: grid; grid-template-columns: 1fr; row-gap: var(--space-4);
    grid-template-areas: "intro" "widget" "trust";
    align-items: start; margin-top: var(--space-6); margin-bottom: var(--space-6);
}
@media (min-width: 900px) {
    .scheduler-hero {
        grid-template-columns: 0.85fr 1.15fr; column-gap: var(--space-6);
        grid-template-areas: "intro widget" "trust widget";
    }
}
.scheduler-hero__intro { grid-area: intro; }
.scheduler-hero__intro h1 { font-size: var(--step-2); margin-bottom: 0.4em; }
.scheduler-hero__widget { grid-area: widget; }

/* /reschedule still uses this simpler centered header — it's managing an
   existing appointment, not the first-visit booking flow, so it doesn't
   need the two-column layout above. */
.scheduler-page-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-6); }
.scheduler-page-header__sub { color: var(--ink-soft); font-size: var(--step-1); font-family: var(--font-sans); }

.scheduler-trust {
    grid-area: trust; list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.scheduler-trust li { display: flex; align-items: center; gap: 0.6em; padding-left: 0; font-family: var(--font-sans); color: var(--ink-soft); }
.scheduler-trust li::before { content: none; }
.scheduler-trust svg { width: 20px; height: 20px; color: var(--green-600); flex-shrink: 0; }

.scheduler {
    max-width: 720px; margin: 0 auto; background: var(--paper); border: 1px solid var(--border);
    border-top: 4px solid var(--accent-600); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow); padding: var(--space-5);
}
.scheduler__error {
    background: #fdeceb; border: 1px solid #f3b9b3; color: #8c1d13; border-radius: var(--radius-sm);
    padding: 0.8em 1em; margin-bottom: var(--space-4); font-size: var(--step--1);
}
.scheduler__current {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3);
    background: var(--green-100); border-radius: var(--radius); padding: 1em 1.2em; margin-bottom: var(--space-4);
    font-size: var(--step--1);
}
.scheduler__current svg { width: 16px; height: 16px; vertical-align: -2px; color: var(--green-700); }

/* Single column (calendar only, full width) until a date is picked and
   the time-slot list actually has something to show — otherwise the
   grid reserved an equal-width second column for nothing, leaving a
   large empty gap to the right of the calendar. JS toggles
   --split alongside showing/hiding the slots panel. */
.scheduler__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 640px) {
    .scheduler__layout--split { grid-template-columns: 1fr 1fr; }
}

.scheduler-cal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.scheduler-cal__month { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--step-0); }
.scheduler-cal__nav {
    background: var(--cream-deep); border: 1px solid var(--border); border-radius: var(--radius-sm);
    width: 32px; height: 32px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink);
}
.scheduler-cal__nav:hover { background: var(--green-100); }
.scheduler-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3em; }
.scheduler-cal__dow { text-align: center; font-size: var(--step--1); color: var(--ink-faint); font-family: var(--font-display); }
.scheduler-cal__day {
    aspect-ratio: 1; border: none; background: transparent; border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-size: var(--step--1); color: var(--border-strong); cursor: default;
}
.scheduler-cal__day--blank { visibility: hidden; }
.scheduler-cal__day--open { color: var(--forest-950); background: var(--cream-deep); cursor: pointer; font-weight: 600; }
.scheduler-cal__day--open:hover { background: var(--green-100); }
.scheduler-cal__day--selected, .scheduler-cal__day--selected:hover { background: var(--accent-600); color: #fff; }
.scheduler-cal__day:disabled { color: var(--border); }

.scheduler-slots__heading { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--step--1); margin: 0 0 var(--space-2); }
.scheduler-slots__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5em; max-height: 280px; overflow-y: auto; }
.scheduler-slots__btn {
    padding: 0.6em 0.5em; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--cream); font-family: var(--font-sans); font-weight: 600; font-size: var(--step--1); cursor: pointer;
}
.scheduler-slots__btn:hover { border-color: var(--green-600); background: var(--green-100); }
.scheduler-slots__btn--selected, .scheduler-slots__btn--selected:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.scheduler-slots__empty, .scheduler-slots__loading { color: var(--ink-faint); font-size: var(--step--1); }

.scheduler-form { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.scheduler-form__selected { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0; }

.scheduler-consent { margin-bottom: var(--space-3); }
.scheduler-consent label { display: flex; align-items: flex-start; gap: 0.7em; cursor: pointer; }
.scheduler-consent input { width: auto; flex-shrink: 0; margin-top: 0.25em; accent-color: var(--green-600); }
.scheduler-consent span { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }

.scheduler__confirm, .scheduler__cancelled { text-align: center; padding: var(--space-4) 0; }
.scheduler__confirm-icon { width: 48px; height: 48px; color: var(--accent-600); margin-bottom: var(--space-2); }
.scheduler__noscript { color: var(--ink-faint); font-size: var(--step--1); }