/* Landscaping Design 1 (Client Sites batch 6): the look of the first lawn-care design, carried over from the Laravel
   site it was drawn as (resources/scss, 28 Sass files), compiled once with that site's own Sass and kept here as plain
   CSS, so no Sass compiler joins Night Fox's dependencies (Decision 3).

   What changed from the compiled Sass, and nothing else:
   - Every palette color reads its slot, var(--nf-<key>), which the page's theme sets on :root from the site's palette
     and the account's six colors (packages/site-core's themeOf). A see-through palette color is the slot mixed with
     transparent (color-mix), so it follows the slot too. The three colors typed outside the tokens are slots of their
     own: placeholder, bad-100 and star; the text on dark panels is on-dark.
   - The two fonts are the site's font pair, set by the page as --font-display and --font-body; these fallbacks name
     the design's own pair.
   - The season strip's lawn types are numbered (data-grass="1" to "4", each label's data-lawn), so a site names its
     own, where the Sass knew only Bermuda and Zoysia, and Fescue.
   - The consent banner's rules are gone with the banner: client sites run no Google or Meta code by default and show
     no banner (Nov 1, codified Nov 3). */

:root {
    --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --step--1: clamp(0.9rem, 0.88rem + 0.1vw, 0.95rem);
    --step-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.375rem);
    --step-2: clamp(1.45rem, 1.3rem + 0.8vw, 1.75rem);
    --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.4rem);
    --step-4: clamp(2.2rem, 1.7rem + 2.5vw, 3.2rem);
    --step-5: clamp(2.7rem, 2rem + 3.6vw, 4.1rem);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section: clamp(2.75rem, 5vw, 4.5rem);
    --section-sm: clamp(1.75rem, 3.5vw, 2.75rem);
    --container: 1180px;
    --container-narrow: 760px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-pill: 999px;
    --shadow-sm:
        0 1px 2px color-mix(in srgb, var(--nf-ink) 6%, transparent),
        0 4px 12px color-mix(in srgb, var(--nf-ink) 6%, transparent);
    --shadow-md:
        0 2px 4px color-mix(in srgb, var(--nf-ink) 6%, transparent),
        0 14px 36px color-mix(in srgb, var(--nf-ink) 12%, transparent);
    --shadow-lg:
        0 10px 30px color-mix(in srgb, var(--nf-ink) 16%, transparent),
        0 30px 70px color-mix(in srgb, var(--nf-ink) 14%, transparent);
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --speed: 180ms;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--nf-bone);
    color: var(--nf-ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

a {
    color: var(--nf-field);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

a:hover {
    color: var(--nf-forest);
}

:focus-visible {
    outline: 3px solid var(--nf-lime);
    outline-offset: 3px;
    border-radius: 4px;
}

ul,
ol {
    padding-left: 1.2em;
}

p,
ul,
ol,
figure,
blockquote {
    margin: 0;
}

address {
    font-style: normal;
}

summary {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
h1,
h2,
h3,
h4,
.display {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--nf-forest);
    text-wrap: balance;
    margin: 0;
}

h1 {
    font-size: var(--step-5);
}

h2 {
    font-size: var(--step-4);
}

h3 {
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: 0;
}

.eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-field);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0;
}
.eyebrow::before {
    content: '';
    width: 1.6em;
    height: 2px;
    background: var(--nf-lime);
    border-radius: 2px;
}
.eyebrow--plain::before {
    display: none;
}

.deck {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--nf-field);
    max-width: 30ch;
    text-wrap: balance;
}

.lede {
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--nf-ink-700);
    max-width: 42ch;
    text-wrap: pretty;
}

.lead-copy {
    font-size: var(--step-1);
    color: var(--nf-ink-700);
    max-width: 60ch;
    text-wrap: pretty;
}

.muted {
    color: var(--nf-muted);
}

.small {
    font-size: var(--step--1);
}

.measure {
    max-width: 62ch;
}

strong,
b {
    font-weight: 700;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 100;
    background: var(--nf-forest);
    color: var(--nf-white);
    padding: 0.6rem 1rem;
    border-radius: var(--r-sm);
    font-weight: 700;
}
.skip-link:focus {
    top: var(--space-4);
}

.text-center {
    text-align: center;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}
.cluster--center {
    justify-content: center;
}

.grid {
    display: grid;
    gap: var(--space-5);
}
.grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .hide-md-up {
        display: none !important;
    }
}

@media (max-width: calc(768px - 0.02px)) {
    .hide-md-down {
        display: none !important;
    }
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow {
    max-width: var(--container-narrow);
}
.container--wide {
    max-width: 1320px;
}

main {
    display: block;
    min-width: 0;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.45rem var(--gutter);
    background: var(--nf-lime);
    color: var(--nf-forest-900);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background var(--speed);
}
.top-bar svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.top-bar strong {
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.15em;
}
.top-bar:hover {
    background: var(--nf-lime-300);
}
.top-bar:focus-visible {
    outline: 3px solid var(--nf-forest);
    outline-offset: -3px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--nf-bone) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition:
        border-color var(--speed),
        box-shadow var(--speed);
}
.site-header.is-scrolled {
    border-color: var(--nf-line);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--nf-ink) 6%, transparent);
}
.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 4.5rem;
}
.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    text-decoration: none;
}
.site-header__logo img {
    width: 44px;
    height: 44px;
}
@media (min-width: 1280px) {
    .site-header__logo img {
        width: 50px;
        height: 50px;
    }
}
.site-header__wordmark {
    display: grid;
    line-height: 1;
    gap: 0.2rem;
}
.site-header__wordmark span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--nf-forest);
}
.site-header__wordmark small {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nf-soil);
}
.site-header__nav {
    display: none;
}
@media (min-width: 1280px) {
    .site-header__nav {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }
}
.site-header__nav ul {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header__nav a {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--nf-ink);
    text-decoration: none;
    transition:
        background var(--speed),
        color var(--speed);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current='page'] {
    background: var(--nf-lime-100);
    color: var(--nf-forest);
}
.site-header__actions {
    display: none;
    align-items: center;
    gap: var(--space-3);
}
@media (min-width: 1280px) {
    .site-header__actions {
        display: flex;
    }
}
.site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--nf-forest);
    text-decoration: none;
    white-space: nowrap;
}
.site-header__phone svg {
    width: 1.1rem;
    height: 1.1rem;
}
.site-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--nf-line-strong);
    color: var(--nf-forest);
}
@media (min-width: 1280px) {
    .site-header__toggle {
        display: none;
    }
}
.site-header__toggle svg {
    width: 1.4rem;
    height: 1.4rem;
}
.site-header__toggle .icon-close {
    display: none;
}
.site-header__toggle[aria-expanded='true'] .icon-menu {
    display: none;
}
.site-header__toggle[aria-expanded='true'] .icon-close {
    display: block;
}
.site-header__drawer {
    display: none;
    border-top: 1px solid var(--nf-line);
    padding-block: var(--space-4) var(--space-5);
}
.site-header__drawer.is-open {
    display: block;
}
@media (min-width: 1280px) {
    .site-header__drawer {
        display: none !important;
    }
}
.site-header__drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}
.site-header__drawer a:not(.btn) {
    display: block;
    padding: 0.8rem 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--nf-forest);
    text-decoration: none;
    border-bottom: 1px solid var(--nf-line);
}
.site-header__drawer-actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.site-footer {
    background: var(--nf-forest-900);
    color: color-mix(in srgb, var(--nf-on-dark) 86%, transparent);
    padding-block: var(--space-8) calc(var(--space-6) + 4.5rem);
}
@media (min-width: 768px) {
    .site-footer {
        padding-bottom: var(--space-6);
    }
}
.site-footer a {
    color: inherit;
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--nf-white);
    text-decoration: underline;
}
.site-footer__grid {
    display: grid;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}
.site-footer__brand img {
    height: 120px;
    width: auto;
    margin-bottom: var(--space-4);
}
.site-footer__brand p {
    max-width: 34ch;
}
.site-footer__col {
    min-width: 0;
}
.site-footer__heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--nf-white);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}
.site-footer__rating {
    margin-top: var(--space-3);
}
.site-footer__links {
    margin-top: var(--space-4);
}
.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
}
.site-footer__contact {
    display: grid;
    gap: 0.5rem;
}
.site-footer__contact strong {
    color: var(--nf-white);
}
.site-footer__bottom {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--nf-white) 12%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    justify-content: space-between;
    font-size: var(--step--1);
    color: color-mix(in srgb, var(--nf-on-dark) 65%, transparent);
}
.site-footer__social {
    display: flex;
    gap: var(--space-2);
}
.site-footer__social a {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--nf-white) 18%, transparent);
}
.site-footer__social a svg {
    width: 1.1rem;
    height: 1.1rem;
}

.section {
    padding-block: var(--section);
}
.section--white {
    background: var(--nf-white);
}
.section--forest {
    background: var(--nf-forest);
    color: color-mix(in srgb, var(--nf-on-dark) 90%, transparent);
}
.section--forest h2,
.section--forest h3,
.section--forest h4 {
    color: var(--nf-white);
}
.section--forest .eyebrow {
    color: var(--nf-lime);
}
.section--forest .muted {
    color: color-mix(in srgb, var(--nf-on-dark) 68%, transparent);
}
.section--lime {
    background: var(--nf-lime-100);
}
.section__head {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    max-width: 46rem;
}
.section__head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}
.section__head--split {
    max-width: none;
}
@media (min-width: 768px) {
    .section__head--split {
        grid-template-columns: minmax(0, 46rem) auto;
        justify-content: space-between;
        align-items: end;
    }
}
.section__head p {
    font-size: var(--step-1);
    color: var(--nf-ink-700);
    text-wrap: pretty;
    max-width: 60ch;
}
.section__more {
    margin-top: var(--space-5);
}
.section__group + .section__group {
    margin-top: var(--section);
    padding-top: var(--section);
    border-top: 1px solid var(--nf-line);
}

.page-head + .section,
.page-hero + .section {
    padding-top: var(--section-sm);
}

.band {
    padding-block: var(--section);
}

.section:not(.section--white):not(.section--forest) + .band {
    padding-top: 0;
}

.page-head,
.page-hero {
    padding-block: var(--space-6) var(--section-sm);
}
.page-head .breadcrumbs,
.page-hero .breadcrumbs {
    margin-bottom: var(--space-5);
}
.page-head h1,
.page-hero h1 {
    max-width: 16ch;
}

.page-head__inner {
    display: grid;
    gap: var(--space-4);
    max-width: 64ch;
}
.page-head--form {
    padding-bottom: var(--space-4);
}

.page-hero__grid {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 1024px) {
    .page-hero__grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-7);
    }
}
.page-hero__copy {
    display: grid;
    gap: var(--space-4);
}
.page-hero h1 {
    font-size: var(--step-4);
}

.stat-row {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: var(--section-sm);
    margin-bottom: var(--section-sm);
    border-bottom: 1px solid var(--nf-line);
}
@media (min-width: 768px) {
    .stat-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.breadcrumbs {
    font-size: var(--step--1);
    color: var(--nf-muted);
}
.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
}
.breadcrumbs li + li::before {
    content: '/';
    margin-right: 0.4rem;
    color: var(--nf-line-strong);
}
.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}
.breadcrumbs a:hover {
    color: var(--nf-forest);
    text-decoration: underline;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.4rem;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
    text-decoration: none;
    border: 2px solid transparent;
    white-space: nowrap;
    transition:
        background var(--speed),
        color var(--speed),
        border-color var(--speed),
        transform var(--speed);
}
.btn svg {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}
.btn--primary {
    background: var(--nf-forest);
    color: var(--nf-white);
    border-color: var(--nf-forest);
}
.btn--primary:hover {
    background: var(--nf-forest-700);
    border-color: var(--nf-forest-700);
    color: var(--nf-white);
}
.btn--lime {
    background: var(--nf-lime);
    color: var(--nf-forest-900);
    border-color: var(--nf-lime);
}
.btn--lime:hover {
    background: var(--nf-lime-300);
    border-color: var(--nf-lime-300);
    color: var(--nf-forest-900);
}
.btn--outline {
    background: transparent;
    color: var(--nf-forest);
    border-color: var(--nf-forest);
}
.btn--outline:hover {
    background: var(--nf-lime-100);
    color: var(--nf-forest);
}
.btn--ghost {
    background: transparent;
    color: var(--nf-forest);
    border-color: var(--nf-line-strong);
}
.btn--ghost:hover {
    border-color: var(--nf-forest);
    color: var(--nf-forest);
}
.btn--inverse {
    background: transparent;
    color: var(--nf-white);
    border-color: color-mix(in srgb, var(--nf-white) 45%, transparent);
}
.btn--inverse:hover {
    border-color: var(--nf-white);
    color: var(--nf-white);
    background: color-mix(in srgb, var(--nf-white) 8%, transparent);
}
.btn--lg {
    padding: 1.05rem 1.7rem;
    font-size: 1.08rem;
}
.btn--sm {
    padding: 0.55rem 1rem;
    font-size: 0.92rem;
}
.btn--block {
    width: 100%;
}
.btn[disabled],
.btn.is-loading {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--nf-field);
    text-decoration: none;
}
.link-arrow svg {
    width: 1em;
    height: 1em;
    transition: transform var(--speed);
}
.link-arrow:hover {
    color: var(--nf-forest);
}
.link-arrow:hover svg {
    transform: translateX(3px);
}

.card {
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    min-width: 0;
    display: grid;
    gap: var(--space-3);
    align-content: start;
}
.card--lg {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    gap: var(--space-4);
}
.card--soft {
    background: var(--nf-bone);
    border-color: transparent;
}
.card--link {
    color: inherit;
    text-decoration: none;
    transition:
        border-color var(--speed),
        box-shadow var(--speed),
        transform var(--speed);
}
.card--link:hover {
    border-color: var(--nf-lime);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.card h2 {
    font-size: var(--step-2);
}
.card h3 {
    font-size: var(--step-1);
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition:
        border-color var(--speed),
        box-shadow var(--speed),
        transform var(--speed);
}
.service-card:hover {
    border-color: var(--nf-lime);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.service-card:hover .service-card__arrow svg {
    transform: translateX(3px);
}
.service-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-md);
    background: var(--nf-lime-100);
    color: var(--nf-field);
    display: grid;
    place-items: center;
}
.service-card__icon svg {
    width: 1.6rem;
    height: 1.6rem;
}
.service-card__body {
    display: grid;
    gap: var(--space-2);
}
.service-card h3 {
    font-size: var(--step-1);
}
.service-card p {
    color: var(--nf-ink-700);
    text-wrap: pretty;
}
.service-card__arrow {
    margin-top: auto;
    padding-top: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--nf-field);
    font-size: 0.95rem;
}
.service-card__arrow svg {
    width: 1em;
    height: 1em;
    transition: transform var(--speed);
}
.service-card--featured {
    background: var(--nf-forest);
    border-color: var(--nf-forest);
    color: color-mix(in srgb, var(--nf-on-dark) 90%, transparent);
}
.service-card--featured h3 {
    color: var(--nf-white);
}
.service-card--featured p {
    color: color-mix(in srgb, var(--nf-on-dark) 80%, transparent);
}
.service-card--featured .service-card__icon {
    background: color-mix(in srgb, var(--nf-lime) 18%, transparent);
    color: var(--nf-lime);
}
.service-card--featured .service-card__arrow {
    color: var(--nf-lime);
}
.service-card--featured:hover {
    border-color: var(--nf-lime);
    color: color-mix(in srgb, var(--nf-on-dark) 90%, transparent);
}
@media (min-width: 1024px) {
    .service-card--featured {
        grid-column: 1/-1;
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
    }
    .service-card--featured .service-card__icon {
        width: 4rem;
        height: 4rem;
        flex-shrink: 0;
    }
    .service-card--featured .service-card__arrow {
        margin-top: 0;
        padding-top: 0;
        margin-left: auto;
        white-space: nowrap;
    }
}

.proof {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-5);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--nf-white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--nf-white) 10%, transparent);
}
.proof__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-pill);
    background: var(--nf-lime);
    color: var(--nf-forest-900);
    display: grid;
    place-items: center;
}
.proof__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}
.proof h3 {
    font-size: var(--step-1);
    min-height: 2.4em;
    display: flex;
    align-items: end;
}
.proof p {
    color: color-mix(in srgb, var(--nf-on-dark) 78%, transparent);
}

.stat {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}
.stat__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-4);
    line-height: 1;
    color: var(--nf-forest);
    letter-spacing: -0.02em;
}
.stat__label {
    color: var(--nf-muted);
    font-size: var(--step--1);
    max-width: 22ch;
}

.leaf-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.7rem;
}
.leaf-list li {
    position: relative;
    padding-left: 1.9rem;
}
.leaf-list li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 0.4em;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50% 0;
    background: var(--nf-lime);
    transform: rotate(45deg);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--r-pill);
    background: var(--nf-lime-100);
    color: var(--nf-forest);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.2;
}
.chip svg {
    width: 0.95rem;
    height: 0.95rem;
}
.chip--soil {
    background: var(--nf-sand);
    color: var(--nf-soil);
}
.chip--white {
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
}

.callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-left: 4px solid var(--nf-lime);
    border-radius: var(--r-md);
    padding: var(--space-4) var(--space-5);
}
.callout img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.callout__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-field);
    display: block;
    margin-bottom: 0.3rem;
    color: var(--nf-soil);
}

.area-card__county {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-field);
    color: var(--nf-muted);
}
.area-card p {
    color: var(--nf-muted);
    font-size: var(--step--1);
}

.hero {
    padding-block: var(--space-6) var(--section);
}
.hero__grid {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: var(--space-7);
    }
}
.hero__copy {
    display: grid;
    gap: var(--space-4);
    max-width: 40rem;
}
.hero h1 {
    max-width: 17ch;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.hero__media {
    position: relative;
    min-width: 0;
}
.hero__chip {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    max-width: calc(100% - 2 * var(--space-4));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    background: color-mix(in srgb, var(--nf-white) 94%, transparent);
    backdrop-filter: blur(8px);
    border-radius: var(--r-md);
    padding: 0.7rem 0.9rem;
    box-shadow: var(--shadow-md);
}
@media (min-width: 640px) {
    .hero__chip {
        left: calc(-1 * var(--space-3));
        bottom: var(--space-5);
        max-width: 19rem;
    }
}
.hero__chip-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--r-pill);
    background: var(--nf-lime-100);
    color: var(--nf-field);
    display: grid;
    place-items: center;
}
.hero__chip-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}
.hero__chip-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-field);
    font-size: 0.68rem;
    display: block;
}
.hero__chip-text {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--nf-ink);
}

ul.trust {
    list-style: none;
    padding: var(--space-4) 0 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    border-top: 1px solid var(--nf-line);
}
@media (min-width: 1280px) {
    ul.trust {
        grid-template-columns: repeat(4, auto);
        justify-content: start;
        gap: var(--space-5);
    }
}

.trust__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
    color: var(--nf-muted);
    font-size: var(--step--1);
    line-height: 1.3;
    text-decoration: none;
}
.trust__item svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--nf-field);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.trust__item strong {
    display: block;
    font-family: var(--font-display);
    color: var(--nf-forest);
    font-size: 0.98rem;
    white-space: nowrap;
}
.trust--inverse {
    border-color: color-mix(in srgb, var(--nf-white) 14%, transparent);
}
.trust--inverse .trust__item {
    color: color-mix(in srgb, var(--nf-on-dark) 72%, transparent);
}
.trust--inverse .trust__item svg {
    color: var(--nf-lime);
}
.trust--inverse .trust__item strong {
    color: var(--nf-white);
}

.season__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.season__switch {
    display: inline-flex;
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-pill);
    padding: 0.25rem;
    gap: 0.25rem;
}
.season__switch input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.season__switch label {
    padding: 0.5rem 0.8rem;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--nf-muted);
    cursor: pointer;
    transition:
        background var(--speed),
        color var(--speed);
}
@media (min-width: 768px) {
    .season__switch label {
        padding: 0.5rem 1rem;
    }
}
.season__switch input:focus-visible + label {
    outline: 3px solid var(--nf-lime);
    outline-offset: 2px;
}
.season__nav {
    display: flex;
    gap: 0.5rem;
}
.season__nav button {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--nf-line-strong);
    background: var(--nf-white);
    color: var(--nf-forest);
    display: grid;
    place-items: center;
    transition:
        border-color var(--speed),
        background var(--speed),
        opacity var(--speed);
}
.season__nav button svg {
    width: 1.1rem;
    height: 1.1rem;
}
.season__nav button:hover:not(:disabled) {
    border-color: var(--nf-forest);
    background: var(--nf-lime-100);
}
.season__nav button:disabled {
    opacity: 0.35;
    cursor: default;
}
.season__nav button.is-prev svg {
    transform: scaleX(-1);
}
.season__track {
    --dot: 2.25rem;
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--stops, 8), minmax(0, 1fr));
    position: relative;
}
.season__track::before {
    content: '';
    position: absolute;
    top: calc(var(--dot) / 2 - 1px);
    left: calc(100% / (2 * var(--stops, 8)));
    right: calc(100% / (2 * var(--stops, 8)));
    height: 2px;
    background: var(--nf-line-strong);
}
.season__stop {
    min-width: 0;
}
.season__stop button {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--nf-muted);
    font-family: var(--font-body);
}
.season__stop button:focus-visible {
    outline: none;
}
.season__stop button:focus-visible .season__stop-dot {
    outline: 3px solid var(--nf-lime);
    outline-offset: 2px;
}
.season__stop button:hover .season__stop-dot {
    border-color: var(--nf-forest);
    background: var(--nf-lime-100);
}
.season__stop-dot {
    position: relative;
    z-index: 1;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nf-white);
    border: 2px solid var(--nf-line-strong);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--nf-forest);
    transition:
        background var(--speed),
        border-color var(--speed),
        color var(--speed);
}
.season__stop-round {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.season__stop-window {
    display: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .season__stop-window {
        display: block;
    }
}
.season__stop-now {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nf-forest-900);
    background: var(--nf-lime);
    padding: 0.15rem 0.45rem;
    border-radius: var(--r-pill);
    line-height: 1.4;
}
.season__stop.is-current .season__stop-dot {
    border-color: var(--nf-lime);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-lime) 25%, transparent);
}
.season__stop.is-selected .season__stop-dot {
    background: var(--nf-forest);
    border-color: var(--nf-forest);
    color: var(--nf-white);
}
.season__stop.is-selected .season__stop-window {
    color: var(--nf-forest);
    font-weight: 600;
}
.season__panels {
    display: grid;
}
.season__panels > * {
    grid-area: 1/1;
}
.season__panels > [hidden] {
    display: grid !important;
    visibility: hidden;
}
.season__panel {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
}
.season__panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.season__panel-round {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nf-field);
}
.season__panel-window {
    color: var(--nf-muted);
    font-size: 0.95rem;
}
.season__panel h3 {
    font-size: var(--step-1);
    line-height: 1.2;
}
.season__panel p {
    color: var(--nf-ink-700);
    max-width: 62ch;
    text-wrap: pretty;
}
.season__panel [data-grass] {
    display: none;
}
.season__panel.is-current {
    border-color: var(--nf-lime);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-lime) 25%, transparent);
}

.season[data-grass='1'] [data-grass='1'],
.season[data-grass='2'] [data-grass='2'],
.season[data-grass='3'] [data-grass='3'],
.season[data-grass='4'] [data-grass='4'] {
    display: block;
}

.season[data-grass='1'] .season__switch label[data-lawn='1'],
.season[data-grass='2'] .season__switch label[data-lawn='2'],
.season[data-grass='3'] .season__switch label[data-lawn='3'],
.season[data-grass='4'] .season__switch label[data-lawn='4'] {
    background: var(--nf-forest);
    color: var(--nf-white);
}

.round {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-top: 1px solid var(--nf-line);
}
@media (min-width: 768px) {
    .round {
        grid-template-columns: 9rem 1fr;
        gap: var(--space-6);
    }
}
.round:last-child {
    border-bottom: 1px solid var(--nf-line);
}
.round__when {
    display: grid;
    gap: 0.2rem;
    align-content: start;
    justify-items: start;
}
.round__when .chip {
    margin-top: 0.4rem;
}
.round__when strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--nf-lime-600);
}
.round__when span {
    color: var(--nf-muted);
    font-size: 0.95rem;
}
.round__body {
    display: grid;
    gap: var(--space-3);
}
.round__grass {
    display: grid;
    gap: var(--space-3);
}
@media (min-width: 1024px) {
    .round__grass {
        grid-template-columns: 1fr 1fr;
    }
}
.round__grass div {
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-md);
    padding: var(--space-4);
    font-size: 0.97rem;
}
.round__grass strong {
    display: block;
    font-family: var(--font-display);
    color: var(--nf-forest);
    margin-bottom: 0.3rem;
}
.round.is-current .round__when strong {
    color: var(--nf-forest);
}

.compare {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--nf-line);
    background: var(--nf-white);
}
.compare table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}
.compare th,
.compare td {
    text-align: left;
    padding: 1rem 1.1rem;
    vertical-align: top;
    border-bottom: 1px solid var(--nf-line);
    font-size: 0.98rem;
}
.compare thead th {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--nf-muted);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--nf-bone);
}
.compare tbody th {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--nf-forest);
    width: 24%;
}
.compare tr:last-child td,
.compare tr:last-child th {
    border-bottom: 0;
}
.compare .is-us {
    background: var(--nf-lime-100);
    color: var(--nf-forest);
    font-weight: 600;
}
.compare thead .is-us {
    color: var(--nf-forest);
    background: var(--nf-lime-300);
}

.faq {
    display: grid;
    gap: var(--space-2);
}
.faq details {
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-md);
    padding: 0 var(--space-4);
}
.faq details[open] {
    border-color: var(--nf-lime);
}
.faq details[open] summary svg {
    transform: rotate(45deg);
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--nf-forest);
    list-style: none;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary svg {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    color: var(--nf-field);
    transition: transform var(--speed);
}
.faq__answer {
    padding-bottom: 1.1rem;
    color: var(--nf-ink-700);
    max-width: 68ch;
    text-wrap: pretty;
}
.faq__group {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
}
.faq__group h2 {
    font-size: var(--step-2);
}

.faq-layout {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 1024px) {
    .faq-layout {
        grid-template-columns: minmax(0, 1fr) 18rem;
        gap: var(--space-7);
    }
}

.faq__groups {
    display: grid;
    gap: var(--space-7);
    min-width: 0;
}

.faq__group {
    margin-bottom: 0;
    scroll-margin-top: 6rem;
}

.faq__aside {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 1024px) {
    .faq__aside {
        position: sticky;
        top: 6rem;
    }
}

.field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}
.field label,
.field legend {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--nf-forest);
}
.field__hint {
    font-size: var(--step--1);
    color: var(--nf-muted);
}
.field__error {
    font-size: var(--step--1);
    color: var(--nf-bad);
    font-weight: 600;
}
.field__error--wide {
    flex-basis: 100%;
}
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea,
.field select {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--nf-line-strong);
    border-radius: var(--r-md);
    background: var(--nf-white);
    color: var(--nf-ink);
    font-size: 1.05rem;
    transition:
        border-color var(--speed),
        box-shadow var(--speed);
}
.field input[type='text']::placeholder,
.field input[type='email']::placeholder,
.field input[type='tel']::placeholder,
.field textarea::placeholder,
.field select::placeholder {
    color: var(--nf-placeholder);
}
.field input[type='text']:focus,
.field input[type='email']:focus,
.field input[type='tel']:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--nf-field);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nf-lime) 25%, transparent);
}
.field input[type='text'][aria-invalid='true'],
.field input[type='email'][aria-invalid='true'],
.field input[type='tel'][aria-invalid='true'],
.field textarea[aria-invalid='true'],
.field select[aria-invalid='true'] {
    border-color: var(--nf-bad);
}
.field textarea {
    min-height: 8rem;
    resize: vertical;
    line-height: 1.5;
}

.field-row {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 640px) {
    .field-row {
        grid-template-columns: 1fr 1fr;
    }
}

.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.choices legend {
    padding: 0;
    margin-bottom: 0.4rem;
}
.choices__option {
    position: relative;
}
.choices__option input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.choices__option span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.05rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--nf-line-strong);
    background: var(--nf-white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--nf-forest);
    cursor: pointer;
    transition:
        background var(--speed),
        border-color var(--speed),
        color var(--speed);
    user-select: none;
}
.choices__option span svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--nf-field);
}
.choices__option span small {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--nf-muted);
    font-size: 0.85rem;
}
.choices__option input:checked + span {
    background: var(--nf-forest);
    border-color: var(--nf-forest);
    color: var(--nf-white);
}
.choices__option input:checked + span svg {
    color: var(--nf-lime);
}
.choices__option input:checked + span small {
    color: color-mix(in srgb, var(--nf-white) 70%, transparent);
}
.choices__option input:focus-visible + span {
    outline: 3px solid var(--nf-lime);
    outline-offset: 2px;
}
.choices__option:hover span {
    border-color: var(--nf-field);
}
.choices--stack {
    display: grid;
    gap: 0.5rem;
}
.choices--stack .choices__option span {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--r-md);
}

.form-alert {
    border-radius: var(--r-md);
    padding: var(--space-4) var(--space-5);
    border: 1px solid;
    display: grid;
    gap: 0.4rem;
}
.form-alert ul {
    margin: 0;
    padding-left: 1.1em;
}
.form-alert--bad {
    border-color: color-mix(in srgb, var(--nf-bad) 35%, transparent);
    background: var(--nf-bad-100);
    color: var(--nf-bad);
}
.form-alert--good {
    border-color: color-mix(in srgb, var(--nf-field) 35%, transparent);
    background: var(--nf-lime-100);
    color: var(--nf-forest);
}

.quote {
    padding-block: var(--space-4) var(--section);
}
.quote__layout {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 1024px) {
    .quote__layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: var(--space-7);
    }
}
.quote__form {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}
.quote__part {
    display: grid;
    gap: var(--space-4);
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-xl);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin: 0;
    min-width: 0;
}
.quote__part > legend {
    padding: 0;
    float: left;
    width: 100%;
}
.quote__part-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    align-items: center;
}
.quote__part-head h2 {
    font-size: var(--step-2);
}
.quote__part-head p {
    color: var(--nf-muted);
    grid-column: 2;
}
.quote__part-num {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--r-pill);
    background: var(--nf-lime);
    color: var(--nf-forest-900);
    font-family: var(--font-display);
    font-weight: 800;
    display: grid;
    place-items: center;
}
.quote__submit {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}
.quote__submit p {
    color: var(--nf-muted);
    font-size: var(--step--1);
    max-width: 52ch;
}
.quote__aside {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 1024px) {
    .quote__aside {
        position: sticky;
        top: 6rem;
    }
}
.quote__promise {
    display: grid;
    gap: var(--space-3);
    background: var(--nf-forest);
    color: color-mix(in srgb, var(--nf-on-dark) 86%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-5);
}
.quote__promise h2 {
    color: var(--nf-white);
    font-size: var(--step-1);
}
.quote__promise ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}
.quote__promise li {
    display: flex;
    gap: 0.6rem;
    align-items: start;
}
.quote__promise li svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--nf-lime);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.quote__contact {
    display: grid;
    gap: 0.5rem;
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
}
.quote__contact strong {
    font-family: var(--font-display);
    color: var(--nf-forest);
}
.quote__contact a {
    font-weight: 600;
}
.quote__count {
    font-size: var(--step--1);
    color: var(--nf-muted);
}

.thanks {
    padding-block: var(--section);
}
.thanks__card {
    display: grid;
    gap: var(--space-4);
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}
.thanks__card img {
    width: 120px;
    height: 120px;
}
.thanks__card .lede {
    text-align: center;
}
.thanks__next {
    text-align: left;
    width: 100%;
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, var(--nf-lime-100), var(--nf-bone-200));
    aspect-ratio: 4/3;
    isolation: isolate;
}
.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--nf-forest) 0%, transparent) 55%,
        color-mix(in srgb, var(--nf-forest) 18%, transparent)
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}
.photo--3x2 {
    aspect-ratio: 3/2;
}
.photo--square {
    aspect-ratio: 1;
}
.photo--portrait {
    aspect-ratio: 4/5;
}
.photo--md {
    border-radius: var(--r-lg);
}
.photo--plain::after {
    display: none;
}
.photo__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-5);
}
.photo__placeholder img {
    width: 42%;
    max-width: 220px;
    height: auto;
    opacity: 0.9;
    object-fit: contain;
}

.areas {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 1024px) {
    .areas {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}
.areas__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .areas__list {
        grid-template-columns: repeat(3, 1fr);
    }
}
.areas__list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--r-md);
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    color: var(--nf-forest);
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.98rem;
    transition:
        border-color var(--speed),
        background var(--speed);
}
.areas__list a svg {
    width: 1rem;
    height: 1rem;
    color: var(--nf-lime-600);
    flex-shrink: 0;
}
.areas__list a:hover {
    border-color: var(--nf-lime);
    background: var(--nf-lime-100);
}

.area-map {
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-xl);
    padding: var(--space-4);
}
.area-map svg {
    width: 100%;
    height: auto;
    display: block;
}
.area-map__dot {
    fill: var(--nf-field);
}
.area-map__home {
    fill: var(--nf-lime);
    stroke: var(--nf-forest);
    stroke-width: 2;
}
.area-map__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    fill: var(--nf-forest);
}
.area-map__ring {
    fill: none;
    stroke: var(--nf-lime-300);
    stroke-dasharray: 4 6;
    stroke-width: 1.5;
}
.area-map__note {
    font-size: var(--step--1);
    color: var(--nf-muted);
    margin-top: var(--space-3);
    text-align: center;
}

.areas .section__head {
    margin-bottom: 0;
}

.areas__copy {
    display: grid;
    gap: var(--space-5);
}

.areas-index {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 1024px) {
    .areas-index {
        grid-template-columns: 0.9fr 1.1fr;
        gap: var(--space-7);
    }
}
@media (min-width: 1024px) {
    .areas-index .area-map {
        position: sticky;
        top: 6rem;
    }
}

.area-cards {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.reviews {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}
.reviews__layout {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}
@media (min-width: 1024px) {
    .reviews__layout {
        grid-template-columns: minmax(0, 1fr) 21rem;
        gap: var(--space-6);
    }
}
.reviews__score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-lg);
    padding: var(--space-4) var(--space-5);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--speed);
}
.reviews__score:hover {
    border-color: var(--nf-lime);
    color: inherit;
}
.reviews__score-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--nf-forest);
}
.reviews__score-meta {
    display: grid;
    gap: 0.3rem;
}
.reviews__score-caption {
    color: var(--nf-muted);
    font-size: var(--step--1);
}
.reviews__score-cta {
    margin-left: auto;
}
.reviews__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.reviews__aside {
    display: grid;
    gap: var(--space-4);
}

.stars {
    display: inline-flex;
    gap: 2px;
    color: var(--nf-star);
}
.stars svg {
    width: 1.1rem;
    height: 1.1rem;
}

.review {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    min-width: 0;
}
.review__text {
    margin: 0;
    color: var(--nf-ink-700);
    font-size: 0.97rem;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}
.review__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem var(--space-3);
    font-size: var(--step--1);
    color: var(--nf-muted);
}
.review__meta strong {
    color: var(--nf-forest);
    font-family: var(--font-display);
}

.stars--sm svg {
    width: 0.95rem;
    height: 0.95rem;
}

.stars svg.is-off {
    color: var(--nf-line-strong);
}

.cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem var(--space-4) calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--nf-bone) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--nf-line);
}
@media (min-width: 768px) {
    .cta-bar {
        display: none;
    }
}
.cta-bar .btn {
    width: 100%;
    padding-inline: 0.75rem;
}

.quote-band {
    background: var(--nf-forest);
    color: color-mix(in srgb, var(--nf-on-dark) 90%, transparent);
    border-radius: var(--r-xl);
    padding: clamp(1.75rem, 4vw, 3rem);
    display: grid;
    gap: var(--space-5);
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .quote-band {
        grid-template-columns: 1.3fr 1fr;
    }
}
.quote-band::before {
    content: '';
    position: absolute;
    right: -8rem;
    top: -8rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--nf-lime) 28%, transparent), transparent 65%);
    pointer-events: none;
}
.quote-band__copy {
    display: grid;
    gap: var(--space-2);
    position: relative;
}
.quote-band h2 {
    color: var(--nf-white);
    font-size: var(--step-3);
}
.quote-band p {
    color: color-mix(in srgb, var(--nf-on-dark) 78%, transparent);
    max-width: 44ch;
}
.quote-band__actions {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    position: relative;
}
@media (min-width: 768px) {
    .quote-band__actions {
        justify-items: end;
    }
}
.quote-band__actions small {
    color: color-mix(in srgb, var(--nf-on-dark) 65%, transparent);
}
.quote-band__phone {
    color: inherit;
    font-weight: 700;
}
.quote-band--stack {
    grid-template-columns: 1fr;
}
.quote-band--stack h2 {
    font-size: var(--step-2);
}
.quote-band--stack .quote-band__actions {
    justify-items: start;
}

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-4);
    counter-reset: step;
}
@media (min-width: 768px) {
    .steps {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}
.steps li {
    counter-increment: step;
    display: grid;
    gap: var(--space-3);
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    min-width: 0;
}
.steps li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: var(--nf-lime-600);
    letter-spacing: -0.02em;
}
.steps li h2,
.steps li h3 {
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: 0;
}
.steps li p {
    color: var(--nf-ink-700);
    text-wrap: pretty;
}
@media (min-width: 768px) {
    .steps--inline {
        grid-template-columns: 1fr;
    }
}
.steps--inline li {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--space-4);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--nf-line);
    border-radius: 0;
    padding: var(--space-4) 0;
}
.steps--inline li::before {
    font-size: 1.4rem;
    padding-top: 0.15rem;
}
.steps--inline li h2,
.steps--inline li h3 {
    grid-column: 2;
    font-size: 1.1rem;
}
.steps--inline li p {
    grid-column: 2;
}

.prose {
    max-width: 68ch;
}
.prose > * + * {
    margin-top: 1.1em;
}
.prose h2 {
    font-size: var(--step-2);
    margin-top: 2em;
}
.prose h3 {
    font-size: var(--step-1);
    margin-top: 1.6em;
}
.prose p,
.prose li {
    color: var(--nf-ink-700);
    text-wrap: pretty;
}
.prose ul,
.prose ol {
    padding-left: 1.3em;
    display: grid;
    gap: 0.4em;
}
.prose a {
    font-weight: 600;
}
.prose blockquote {
    border-left: 4px solid var(--nf-lime);
    padding-left: 1.2em;
    font-size: var(--step-1);
    color: var(--nf-forest);
    font-family: var(--font-display);
    font-weight: 700;
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.feature {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 1024px) {
    .feature {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}
@media (min-width: 1024px) {
    .feature--reverse .feature__media {
        order: -1;
    }
}
.feature__copy {
    display: grid;
    gap: var(--space-4);
}
.feature__media {
    min-width: 0;
}

.owner {
    display: grid;
    gap: var(--space-5);
    align-items: center;
    background: var(--nf-white);
    border: 1px solid var(--nf-line);
    border-radius: var(--r-xl);
    padding: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 768px) {
    .owner {
        grid-template-columns: 0.8fr 1.2fr;
    }
}
.owner__copy {
    display: grid;
    gap: var(--space-3);
}
.owner__copy blockquote {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    color: var(--nf-forest);
    text-wrap: pretty;
    border-left: 3px solid var(--nf-lime);
    padding-left: var(--space-4);
}
.owner__copy cite {
    font-style: normal;
    color: var(--nf-muted);
    font-size: var(--step--1);
}

.error-page {
    padding-block: var(--space-9);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--space-4);
}
.error-page img {
    width: 160px;
    height: 160px;
}
.error-page p {
    max-width: 44ch;
    color: var(--nf-ink-700);
}

.contact-grid {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}
@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.detail-list {
    display: grid;
    gap: var(--space-4);
}
.detail-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
}
.detail-list__item svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--nf-field);
    margin-top: 0.2rem;
}
.detail-list__item strong {
    display: block;
    font-family: var(--font-display);
    color: var(--nf-forest);
    margin-bottom: 0.15rem;
}
.detail-list__item span {
    display: block;
}
.detail-list__item a {
    font-weight: 600;
}

.related {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Added in the port, beyond the Sass: a logo of any shape keeps its proportions where the Laravel site drew its square
   mark, and an outside source's credit sits with its reviews (each author's photo and profile link, each review's own
   link, how they're ordered and its policy notice), as its terms may ask (batch 13) */
.site-header__logo img,
.callout img,
.thanks__card img,
.error-page img {
    object-fit: contain;
}
.review__meta:has(.review__avatar) {
    justify-content: flex-start;
    align-items: center;
}
.review__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    object-fit: cover;
}
.review__avatar + a,
.review__avatar + strong {
    margin-right: auto;
}
.review__meta a {
    color: inherit;
    text-decoration: none;
}
.review__meta a:hover strong {
    text-decoration: underline;
}
.reviews__attribution a,
.reviews__policy a {
    color: var(--nf-field);
}
/* An outside source's review whole, never clamped, and the business's reply under it (batch 13b) */
.review__text--whole {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.review__reply {
    margin: 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--nf-line);
    font-size: var(--step--1);
    color: var(--nf-ink-700);
}
.review__reply strong {
    color: var(--nf-forest);
    font-family: var(--font-display);
}
.review__reply p {
    margin: var(--space-1) 0 0;
    text-wrap: pretty;
}
/* Each review's own link at its source, where the source has one (batch 13) */
.review__meta .review__link {
    flex-basis: 100%;
    text-decoration: underline;
}

/* Added in the port: words too long for their column wrap where the Sass let them run off the screen, and where they
   fit nothing changes. In the trust strip's two fixed columns below 1280 wide, a label (Owner-operated ran 3 pixels
   past a 320-wide screen); in the footer's contact column, an email address or a line of hours (one ran 40 pixels past
   a 768-wide screen) */
@media (max-width: 1279.98px) {
    .trust__item strong {
        white-space: normal;
    }
}
.site-footer__contact > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Added in the port: the round numbers on the program page, large lime numerals, read below 3:1 on the page in the
   Sass's lime-600 (2.9:1 for Fairway's), so they take the highlight role's text color, which the theme makes legible
   whatever the brand (site-core's --nf-role-highlight-text), and lime-600 only where the theme sets none */
.round__when strong {
    color: var(--nf-role-highlight-text, var(--nf-lime-600));
}

/* Added in the port: Google Maps, named beside every rating and review read from Google (the plan's risk 5), kept on
   one line */
.source-credit {
    white-space: nowrap;
}

/* Added by the parity proof (batch 17): a guarantee's title is the client's own and may be long (Grass Daddy's "The
   Grass Daddy fix-it promise", where the Laravel strip had "Fix-it promise"), so beside a feature's card or a page's
   photo it wraps to two lines, as the Laravel strip's items took two, rather than widening its half and squeezing the
   other (an area page's Services In list wrapped on every line, and About's photo drew smaller). The home page's hero
   has the room, and keeps it on one line. Where the two halves sit side by side it keeps 8em, so it takes two lines,
   not four; on a phone it only wraps */
.feature .trust__item--long strong,
.page-hero .trust__item--long strong {
    white-space: normal;
}
@media (min-width: 1024px) {
    .feature .trust__item--long strong,
    .page-hero .trust__item--long strong {
        min-width: 8em;
    }
}