/* ============================================================
   Potomac Lawn Professionals — Concept v2
   Apple/Tesla-flavored editorial redesign.
   Self-contained: scoped under .v2 to avoid colliding with v1.
   ============================================================ */

/* ---------- Font: Inter, self-hosted ----------
   Variable font (one file, weights 100-900), same subsets Google Fonts served.
   latin is preloaded in includes/head.php; latin-ext only downloads if a page
   uses a character from its range. License: /fonts/OFL.txt. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
.v2 {
    --red: #ff3b30;
    --red-deep: #c10f1b;
    --red-soft: #ff6259;
    /* Darker red used ONLY as the filled-button background so white button text
       clears WCAG AA contrast (#d81e2c on #fff is ~5:1). The bright --red stays
       the brand accent everywhere else (text, dots, icons). */
    --red-cta: #d81e2c;
    --blue: #007aff;
    --blue-deep: #0056b3;
    --blue-cta: #0066d6;   /* PLP blue darkened just enough for white text to pass WCAG AA (5.4:1) */
    --blue-soft: #4ea3ff;
    --amber: #ff9500;
    --amber-deep: #c76f00;

    --black: #1d1d1f;
    --ink: #1d1d1f;
    --ink-2: #424245;
    --ink-3: #6e6e73;
    --hairline: rgba(0, 0, 0, 0.08);
    --hairline-light: rgba(255, 255, 255, 0.18);

    --bg: #ffffff;
    --bg-alt: #f5f5f7;
    --bg-cream: #f9f6f4;
    --bg-dark: #0b0b0d;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

    --max: 1320px;
    --pad: clamp(1.25rem, 4.5vw, 4rem);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset (scoped) ---------- */
.v2, .v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
body.v2 {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    overflow-x: hidden;
}
/* Global element resets.
   Each one is excluded from the third-party DeepLawn widget subtree (/instant-quote/),
   whose markup we don't control and which renders inline, NOT in an iframe. Without the
   exclusion, `.v2 a` (0,1,1) outranks the vendor's utility classes (0,1,0) and flattens
   their links to black; `.v2 p { margin: 0 }` collapses their spacing.
   `:not(:where(...))` is the point: :where() contributes ZERO specificity, so these stay
   at their original weight and the rest of the site's cascade is untouched. Overriding
   inside .lawn-widget instead would just clobber the vendor's own styles the other way. */
.v2 img:not(:where(.lawn-widget *)),
.v2 svg:not(:where(.lawn-widget *)),
.v2 video:not(:where(.lawn-widget *)) { display: block; max-width: 100%; }
.v2 button:not(:where(.lawn-widget *)) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.v2 a:not(:where(.lawn-widget *)) { color: inherit; text-decoration: none; }
.v2 h1:not(:where(.lawn-widget *)), .v2 h2:not(:where(.lawn-widget *)), .v2 h3:not(:where(.lawn-widget *)), .v2 h4:not(:where(.lawn-widget *)), .v2 p:not(:where(.lawn-widget *)) { margin: 0; }
.v2 ul:not(:where(.lawn-widget *)) { margin: 0; padding: 0; list-style: none; }

/* Smooth scroll except for users that prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Selection */
.v2 ::selection { background: var(--red); color: #fff; }

/* Focus */
/* Skip-to-main-content link for keyboard users (WCAG 2.4.1). Offscreen
   until focused, then snaps into view at the top-left. */
.v2-skip {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    transition: top 0.2s var(--ease-out);
}
.v2-skip:focus { top: 1rem; outline: 2px solid var(--blue); outline-offset: 3px; }

.v2 :focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Containers ---------- */
.v2-container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding-inline: var(--pad);
}
.v2-container-narrow {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding-inline: var(--pad);
}
/* Keep body copy at a readable measure when it sits in a wider container. */
.v2 .v2-prose--measure { max-width: 62ch; }

/* ---------- Type primitives ---------- */
.v2-eyebrow {
    font-size: clamp(0.75rem, 0.7vw + 0.55rem, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* AA-safe red on light backgrounds (small text needs 4.5:1) */
    color: var(--red-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 1.25rem;
}
.v2-eyebrow-light { color: rgba(255, 255, 255, 0.95); }

.v2-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
}
.v2-eyebrow-light .v2-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.18); }

.v2-display {
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.v2-display-hero {
    font-size: clamp(2.75rem, 8.4vw, 7.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.035em;
}
.v2-display-l {
    font-size: clamp(2rem, 5.5vw, 4.75rem);
    font-weight: 700;
}
.v2-display-m {
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 600;
}
.v2-light { color: #fff; }
.v2-muted { color: var(--ink-3); font-weight: 400; }

/* Italic accent words — signature flourish on display headlines */
.v2-accent {
    font-style: italic;
    font-weight: inherit;
    color: var(--red-deep);
}
.v2-accent-blue { color: var(--blue-deep); }
/* On dark sections, use the brighter brand values for legibility */
.v2-five-hundred .v2-accent,
.v2-areas .v2-accent,
.v2-closer .v2-accent { color: var(--red-soft); }
.v2-five-hundred .v2-accent-blue,
.v2-areas .v2-accent-blue,
.v2-closer .v2-accent-blue { color: var(--blue-soft); }

.v2-lede {
    font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.3125rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 1.25rem 0 0;
}
.v2-lede-light { color: rgba(255, 255, 255, 0.88); }

/* ============================================================
   BUTTON SYSTEM
   ============================================================
   Three tiers. Pick by job-to-be-done, not by appearance.

   1) PILL BUTTONS — for primary on-page actions.
      Base: .v2-btn (pill, padding, font-weight, transition)
      Variants:
        .v2-btn-primary   Red pill, white text. THE conversion CTA.
                          Max one per section. Use for the quote funnel.
        .v2-btn-ghost     Translucent pill on dark backgrounds. Use as
                          secondary alongside primary, on dark sections only.
        .v2-btn-light     White pill, dark text. Use as the lone CTA on a
                          dark section (e.g. "Read the reviews" on imagery).
      Size modifier:
        .v2-btn-lg        Larger touch target. Reserve for hero/closer
                          moments where the button is the focal point.
      Arrow rule: NO arrow on .v2-btn — they're loud enough on their own.

   2) COMPACT PILL — header/nav only.
      .v2-nav-cta         Small red pill. Always carries an arrow (→) — at
                          this size the arrow signals action.

   3) TEXT-LINK CTAs — inline navigational links inside cards/footers.
      .v2-plan-card-cta   Dark text on light card surfaces.
      .v2-service-link    Same family, used in service cards.
      .v2-areas-foot a    Text link in section footers.
      Arrow rule: ALWAYS carry an arrow (→) — it disambiguates link from
      body copy and signals "more here."

   Copy rule: every quote-funnel CTA reads "Get a quote." Navigational
   CTAs use destination-specific copy ("View pricing", "Browse services",
   "Read the reviews"). Don't mix.
   ============================================================ */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.005em;
    transition: transform 0.35s var(--ease-out), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.35s var(--ease-out);
    will-change: transform;
}
.v2 .v2-btn-primary {
    background: var(--red-cta);
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(255, 59, 48, 0.55);
}
.v2 .v2-btn-primary:hover { background: var(--red-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(255, 59, 48, 0.65); }
.v2 .v2-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.v2 .v2-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; transform: translateY(-2px); }
.v2 .v2-btn-light {
    background: #fff;
    color: var(--ink);
}
.v2 .v2-btn-light:hover { background: var(--bg-alt); transform: translateY(-2px); color: var(--ink); }
.v2-btn-lg { padding: 1.1rem 2rem; font-size: 1.0625rem; }

/* ============================================================
   NAV
   ============================================================ */
.v2-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: saturate(180%) blur(0px);
    -webkit-backdrop-filter: saturate(180%) blur(0px);
    border-bottom: 1px solid transparent;
    transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease), border-color 0.35s var(--ease);
}
.v2-nav.is-light .v2-nav-link,
.v2-nav.is-light .v2-nav-cta { color: #fff; }
.v2-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
}
.v2-nav.is-scrolled .v2-nav-link { color: var(--ink); }
/* Note: .v2-nav-cta keeps white text on the red pill in all states. */
.v2-nav.is-scrolled .v2-nav-logo img { filter: none; }
.v2 .v2-promo {
    /* Time-limited promo strip, inside the fixed nav so it stays on screen.
       Switched by $plp_promo_on in config.php. */
    display: block;
    padding: 0.55rem var(--pad);
    background: var(--red-cta);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    transition: background 0.2s;
}
.v2 .v2-promo:hover { background: var(--red-deep); color: #fff; }
.v2 .v2-promo--blue { background: var(--blue-cta); }
.v2 .v2-promo--blue:hover { background: var(--blue-deep); }
@media (max-width: 480px) { .v2 .v2-promo { font-size: 0.8125rem; padding-left: 0.75rem; padding-right: 0.75rem; } }
.v2-nav-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0.9rem var(--pad);
}
.v2-nav-logo { flex: 0 0 auto; display: flex; align-items: center; }
.v2-nav-logo img { height: 44px; width: auto; transition: filter 0.35s var(--ease); }
@media (max-width: 480px) { .v2-nav-logo img { height: 38px; } }
.v2-nav.is-light:not(.is-scrolled) .v2-nav-logo img {
    /* Keep brand color but lift on dark hero — subtle drop shadow */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.v2-nav-links {
    flex: 0 1 auto;
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    margin-left: clamp(1.25rem, 2.5vw, 2.25rem);
    color: #fff;
}
.v2-nav-item {
    position: relative;
}
.v2-nav-link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #fff;
    opacity: 1;
    padding: 0.5rem 0;
    transition: opacity 0.2s, color 0.35s var(--ease);
    cursor: pointer;
}
.v2-nav-link:hover { opacity: 0.72; }
.v2-nav-caret {
    width: 9px;
    height: 6px;
    opacity: 0.6;
    transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.v2-nav-item.is-open .v2-nav-caret { transform: rotate(180deg); opacity: 1; }
.v2-nav-item.is-open .v2-nav-link { opacity: 1; }
/* Plain (non-dropdown) top-level link — same spacing/typography, no caret. */
.v2-nav-link--plain { gap: 0; }

/* Dropdown panel: white surface, hairline border, soft shadow, backdrop blur. */
.v2-nav-dd {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow:
        0 14px 40px -12px rgba(15, 17, 22, 0.22),
        0 2px 6px -1px rgba(15, 17, 22, 0.08);
    padding: 0.4rem;
    transform: translate(-50%, -8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 0.22s var(--ease-out),
        transform 0.22s var(--ease-out),
        visibility 0s linear 0.22s;
    z-index: 101;
}
/* Bridge the gap between trigger and panel so the cursor doesn't fall into
   dead space and close the dropdown. */
.v2-nav-dd::before {
    content: '';
    position: absolute;
    inset: -0.6rem 0 auto 0;
    height: 0.6rem;
}
.v2-nav-item.is-open .v2-nav-dd {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity 0.22s var(--ease-out),
        transform 0.22s var(--ease-out),
        visibility 0s linear 0s;
}
.v2-nav-dd a {
    display: block;
    padding: 0.6rem 0.85rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-2);
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.v2-nav-dd a:hover,
.v2-nav-dd a:focus-visible {
    background: rgba(15, 17, 22, 0.05);
    color: var(--ink);
    outline: none;
}
/* Rich dropdown: each item is a title + one-line descriptor, with the hover
   polish below. Shared by the Services and About panels. The --services
   modifier adds the two-column grid + left anchoring on top. */
.v2-nav-dd--rich { min-width: 320px; }
/* Services mega-panel: two columns, anchored to the LEFT of its trigger (the
   nav is left-grouped, so a centered panel would overhang) and pulled closer
   to the bar so it reads connected. */
.v2-nav-dd--services {
    left: 0;
    top: calc(100% + 0.3rem);
    min-width: 600px;
    padding: 0.6rem;
    transform: translate(0, -8px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Fill top-to-bottom: lawn services in the left column, landscape and
       commercial in the right, so visual order matches tab order. */
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    gap: 0.15rem 0.5rem;
}
.v2-nav-item.is-open .v2-nav-dd--services { transform: translate(0, 0); }
/* Hover polish: a thin red rule grows on the left edge while the item content
   slides right. One gesture, brand red, robust to two-line descriptors. */
.v2-nav-dd--rich a {
    position: relative;
    white-space: normal;
    padding: 0.7rem 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.v2-nav-dd--rich a::after {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 1px;
    background: var(--red);
    transform: translateY(-50%);
    transition: height 0.22s var(--ease-out);
}
.v2-nav-dd--rich a:hover::after,
.v2-nav-dd--rich a:focus-visible::after { height: calc(100% - 1.15rem); }
.v2-nav-dd--rich a:hover .v2-nav-dd-desc,
.v2-nav-dd--rich a:focus-visible .v2-nav-dd-desc { color: var(--ink-2); }
/* Slide the content with transform (not padding) so the hover never changes
   layout width and can't reflow a descriptor onto a second line. The red rule
   stays pinned to the panel edge while the text shifts. */
.v2-nav-dd--rich a:hover .v2-nav-dd-title,
.v2-nav-dd--rich a:focus-visible .v2-nav-dd-title,
.v2-nav-dd--rich a:hover .v2-nav-dd-desc,
.v2-nav-dd--rich a:focus-visible .v2-nav-dd-desc { transform: translateX(6px); }
.v2 .v2-nav-dd-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink);
    transition: transform 0.22s var(--ease-out);
}
.v2 .v2-nav-dd-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink-3);
    transition: transform 0.22s var(--ease-out), color 0.15s;
}
.v2 .v2-nav-cta {
    flex: 0 0 auto;
    margin-left: auto;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--red-cta);
    transition: background 0.25s, transform 0.25s var(--ease-out);
}
.v2-nav-cta:hover { background: var(--red-deep); transform: translateY(-1px); }
/* Click-to-call in the bar, just left of the quote pill. Inherits the nav
   link colors (white over a hero, ink once scrolled). Phones show the icon
   only, as a tap target beside the burger. */
.v2 .v2-nav-phone { flex: 0 0 auto; margin-left: auto; gap: 0.45rem; white-space: nowrap; }
.v2 .v2-nav-phone + .v2-nav-cta { margin-left: 0; }
.v2 .v2-nav-phone svg { flex: 0 0 auto; }
/* Narrow desktops: the full nav row is still showing, so icon only, or
   the row runs out of room. */
@media (min-width: 901px) and (max-width: 1080px) {
    .v2 .v2-nav-phone-num { display: none; }
}
.v2-nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    margin-right: -10px;
}
.v2-nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.25s, background 0.35s;
}
.v2-nav.is-scrolled .v2-nav-burger span { background: var(--ink); }
.v2-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.v2-nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Tablet (≤900px): hide the dropdown row, keep the CTA, push the right
   group (CTA + burger) to the far edge. */
@media (max-width: 900px) {
    .v2-nav-links { display: none; }
    .v2-nav-burger { display: flex; }
    .v2-nav-cta { margin-left: auto; padding: 0.5rem 0.95rem; font-size: 0.875rem; }
}
/* Phone (≤600px): drop the CTA; the call icon and burger share the right edge. */
@media (max-width: 600px) {
    .v2 .v2-nav-cta { display: none; }
    .v2-nav-burger { margin-left: 0; }
    .v2 .v2-nav-phone { padding: 0.6rem; margin-right: -0.25rem; }
    .v2 .v2-nav-phone-num { display: none; }
    .v2 .v2-nav-phone svg { width: 20px; height: 20px; }
}

/* Mobile sheet */
.v2-sheet {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(13, 13, 15, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem var(--pad) 2rem;
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease-out);
    pointer-events: none;
}
.v2-sheet.is-open { transform: translateY(0); pointer-events: auto; }
.v2-sheet-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* Stagger every direct child (details groups + the CTA link) on open */
.v2-sheet-nav > * {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.v2-sheet.is-open .v2-sheet-nav > * { transform: translateY(0); opacity: 1; }
.v2-sheet.is-open .v2-sheet-nav > *:nth-child(1) { transition-delay: 0.05s; }
.v2-sheet.is-open .v2-sheet-nav > *:nth-child(2) { transition-delay: 0.10s; }
.v2-sheet.is-open .v2-sheet-nav > *:nth-child(3) { transition-delay: 0.15s; }
.v2-sheet.is-open .v2-sheet-nav > *:nth-child(4) { transition-delay: 0.20s; }
.v2-sheet.is-open .v2-sheet-nav > *:nth-child(5) { transition-delay: 0.25s; }

.v2-sheet-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.v2-sheet-group summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 0;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    transition: color 0.2s;
}
.v2-sheet-group summary::-webkit-details-marker,
.v2-sheet-group summary::marker { display: none; content: ''; }
.v2-sheet-group summary:hover { color: var(--red-soft); }
.v2-sheet-caret {
    width: 14px;
    height: 9px;
    opacity: 0.55;
    transition: transform 0.3s var(--ease), opacity 0.2s;
    flex: 0 0 auto;
}
.v2-sheet-group[open] .v2-sheet-caret { transform: rotate(180deg); opacity: 1; }
.v2-sheet-sublinks {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 0 1.25rem 0.25rem;
}
.v2-sheet-sublinks a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.0625rem;
    font-weight: 500;
    padding: 0.4rem 0;
    transition: color 0.2s;
}
.v2-sheet-sublinks a:hover { color: #fff; }
/* Plain top-level link in the mobile sheet (no accordion). Matches the
   <summary> visual treatment so the row heights stay consistent. */
.v2-sheet-link {
    display: flex;
    align-items: center;
    padding: 1.1rem 0;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.2s;
}
.v2-sheet-link:hover { color: var(--red-soft); }

.v2-sheet-cta {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--red-soft) !important;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.v2-sheet-cta:hover { color: var(--red) !important; }
body.v2.is-locked { overflow: hidden; }

/* ============================================================
   1. HERO
   ============================================================ */
.v2-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    padding-top: calc(6rem + var(--promo-h, 0rem));
    padding-bottom: 6rem;
}
.v2-hero-media {
    position: absolute;
    inset: -10% -5% -5% -5%;
    z-index: 0;
    will-change: transform;
}
.v2-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Horizontal: shift the crop window leftward as the viewport narrows
       so the subject stays in frame.
       Vertical: bias toward the top of the photo so the sky/canopy reads
       instead of getting cropped out. */
    object-position: 38% top;
    transform: scale(1.08);
    animation: v2KenBurns 20s ease-in-out infinite alternate;
}
@media (max-width: 1100px) {
    .v2-hero-media img { object-position: 32% top; }
}
@media (max-width: 700px) {
    .v2-hero-media img { object-position: 28% top; }
}
@keyframes v2KenBurns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.12) translate3d(-2%, -2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .v2-hero-media img { animation: none; }
}
.v2-hero-vignette {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.65) 100%),
        radial-gradient(120% 80% at 70% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}
.v2-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
}
.v2-hero-inner .v2-display-hero {
    color: #fff;
    max-width: 14ch;
    margin-top: 0;
}
.v2-hero-inner .v2-lede {
    margin-top: 1.75rem;
    max-width: 56ch;
}
.v2-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.25rem;
}
/* Homepage hero trust row: four short promises between the lede and the buttons. */
.v2 .v2-hero-trust {
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}
.v2 .v2-hero-trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.v2 .v2-hero-trust svg { flex: 0 0 auto; color: var(--red-soft); }
@media (max-width: 600px) {
    .v2 .v2-hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; font-size: 0.8125rem; }
}
/* ============================================================
   2. MANIFESTO
   ============================================================ */
.v2-manifesto {
    background: var(--bg-cream);
    padding: clamp(6rem, 14vw, 12rem) 0;
}
.v2-manifesto .v2-display-l {
    max-width: 22ch;
}

/* ============================================================
   3. THE 500
   ============================================================ */
.v2-five-hundred {
    position: relative;
    color: #fff;
    text-align: center;
    overflow: hidden;
    /* Dark base color so the body's white can never bleed through when the
       parallax image is shifted past its inset slack. */
    background: var(--bg-dark);
    padding: clamp(7rem, 16vw, 14rem) 0;
}
/* On tablet/mobile, give the section a true full-bleed "moment" feel:
   guaranteed minimum height + flex-center the content vertically. Desktop
   keeps its default content-driven height. */
@media (max-width: 1100px) {
    .v2-five-hundred {
        min-height: 80vh;
        padding: clamp(4rem, 10vw, 8rem) 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.v2-five-hundred-bg {
    position: absolute; inset: -10% -5%;
    z-index: 0;
    will-change: transform;
}
.v2-five-hundred-bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.v2-five-hundred-tint {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 11, 13, 0.7) 0%, rgba(11, 11, 13, 0.55) 50%, rgba(11, 11, 13, 0.85) 100%);
}
.v2-five-hundred-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--pad);
}
.v2-counter {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.05em;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #fff;
    margin: 0 0 1.5rem;
}
.v2-counter-num {
    font-size: clamp(7rem, 22vw, 17rem);
    background: linear-gradient(180deg, #ffffff 0%, #d8d8db 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
.v2-counter-plus {
    font-size: clamp(2.5rem, 8vw, 6rem);
    color: var(--red);
    margin-top: 0.4em;
    margin-left: 0.05em;
    display: inline-block;
    opacity: 0;
    transform: scale(0.3) rotate(-8deg);
    transform-origin: center center;
    transition: opacity 180ms var(--ease),
                transform 420ms cubic-bezier(.34, 1.8, .64, 1);
}
.v2-counter-plus.is-on {
    opacity: 1;
    transform: scale(1) rotate(0);
}
@media (prefers-reduced-motion: reduce) {
    .v2-counter-plus { transition: none; }
}
.v2-stars {
    display: inline-flex;
    gap: 0.45rem;
    margin: 1.5rem 0 1.25rem;
}
.v2-stars span {
    width: 22px;
    height: 22px;
    background: var(--red);
    /* AA-safe star mask, longhand for strict CSS validators */
    --star-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27/%3E%3C/svg%3E");
    -webkit-mask-image: var(--star-mask);
            mask-image: var(--star-mask);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.v2-five-hundred .v2-lede { margin-left: auto; margin-right: auto; }
.v2-five-hundred .v2-btn { margin-top: 2rem; }

/* ============================================================
   4. PLANS — horizontal scroll-snap gallery
   ============================================================ */
.v2-plans {
    background: var(--bg-cream);
    padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
    position: relative;
    overflow: hidden;
}
.v2-plans-head .v2-display-l { max-width: 18ch; }
.v2-plans-head .v2-lede { margin-top: 1.25rem; }
.v2-plan-track {
    margin-top: clamp(3rem, 6vw, 5rem);
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: 1rem var(--pad) 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.v2-plan-track::-webkit-scrollbar { display: none; }
.v2-plan-card {
    position: relative;
    flex: 0 0 min(440px, 80vw);
    aspect-ratio: 3 / 4;
    border-radius: var(--r-lg);
    overflow: hidden;
    scroll-snap-align: center;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.35);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.v2-plan-card:first-child { margin-left: max(0px, calc((100vw - var(--max)) / 2)); }
.v2-plan-card:last-child { margin-right: max(0px, calc((100vw - var(--max)) / 2)); }
.v2-plan-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.45); }
.v2-plan-card-media {
    position: absolute;
    inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.8s var(--ease-out);
}
.v2-plan-card:hover .v2-plan-card-media { transform: scale(1.06); }
.v2-plan-card-shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.85) 100%);
}
.v2-plan-card-body {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}
.v2 .v2-plan-card-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.v2-plan-card-feature .v2-plan-card-eyebrow {
    color: #fff;
}
.v2-plan-card-feature .v2-plan-card-eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.25);
}
.v2 .v2-plan-card-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
}
.v2 .v2-plan-card-text {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    max-width: 32ch;
    /* .v2-scoped so the margins beat the global .v2 p / h3 resets (they were
       no-ops). The min-height reserves four lines, so the eyebrow and plan
       name sit at the same height on every card whatever the copy length. */
    margin: 0 0 1.75rem;
    min-height: calc(1.55em * 4);
}
@media (max-width: 600px) {
    /* Phone-width cards wrap the longest copy to six lines. */
    .v2 .v2-plan-card-text { min-height: calc(1.55em * 6); }
}
.v2-plan-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 0.4rem;
    align-self: flex-start;
    transition: color 0.25s, border-color 0.25s, gap 0.35s var(--ease-out);
}
.v2-plan-card-cta:hover { color: var(--red-soft); border-color: var(--red-soft); gap: 0.7rem; }

/* Plan controls */
.v2-plans-controls {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 360px;
    margin-inline: auto;
    padding-inline: var(--pad);
}
.v2-plans-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.3s var(--ease-out), border-color 0.25s;
}
.v2-plans-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
/* Scrubber. The thumb is sized to the visible/total ratio and translated along
   the rail, so it reads (and drags) like a scrollbar rather than a fill that
   grows from the left. JS sets width + transform in px; see initPlans. */
.v2-plans-progress {
    flex: 1;
    position: relative;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    cursor: pointer;
    /* Let a horizontal drag scrub instead of scrolling the page on touch. */
    touch-action: none;
}
/* The rail is only 3px tall, which is far too thin to grab. Extend the hit
   area vertically without changing what's drawn. */
.v2-plans-progress::before {
    content: '';
    position: absolute;
    inset: -14px 0;
}
.v2-plans-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%;
    background: var(--ink);
    border-radius: 999px;
    cursor: grab;
    transition: transform 0.4s var(--ease-out);
}
/* 1:1 tracking while dragging: the easing would feel like lag. */
.v2-plans-progress.is-scrubbing { cursor: grabbing; }
.v2-plans-progress.is-scrubbing .v2-plans-progress-fill {
    cursor: grabbing;
    transition: none;
}

/* ============================================================
   5. PROMISE — sticky scrollytelling
   ============================================================ */
.v2-promise {
    background: var(--bg);
    padding: clamp(5rem, 10vw, 9rem) 0;
    position: relative;
}
.v2-promise-grid {
    max-width: var(--max);
    margin: 0 auto;
    padding-inline: var(--pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.v2-promise-media {
    position: sticky;
    top: clamp(5rem, 10vh, 8rem);
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-cream);
}
.v2-promise-media-stage { position: relative; width: 100%; height: 100%; }
.v2-promise-frame {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.7s var(--ease), transform 1.2s var(--ease-out);
}
.v2-promise-frame.is-active {
    opacity: 1;
    transform: scale(1);
}
.v2-promise-frame img {
    width: 100%; height: 100%; object-fit: cover;
}
.v2-promise-text {
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 12vh, 8rem);
}
.v2-promise-text > .v2-container-narrow:first-child {
    padding-inline: 0;
    margin: 0 0 1rem;
}
.v2-promise-text > .v2-container-narrow:first-child .v2-display-l {
    max-width: 18ch;
}
.v2-promise-step {
    padding: 2rem 0;
    border-top: 1px solid var(--hairline);
    opacity: 0.35;
    transition: opacity 0.5s var(--ease);
}
.v2-promise-step.is-active { opacity: 1; }
.v2-promise-step-num {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--red-deep);
    margin-bottom: 0.75rem;
}
.v2-promise-step-title {
    font-size: clamp(1.5rem, 2.5vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.v2-promise-step-text {
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 50ch;
}
.v2-promise-step-text strong { color: var(--ink); font-weight: 600; }
.v2-promise-text > .v2-container-narrow:last-child {
    padding-inline: 0;
    margin-inline: 0;
}
.v2-promise-cta { align-self: flex-start; margin-top: 1rem; }

@media (max-width: 880px) {
    .v2-promise-grid { grid-template-columns: 1fr; }
    .v2-promise-media {
        position: relative;
        top: 0;
        aspect-ratio: 4 / 3;
        margin-bottom: 2rem;
    }
    /* Without the desktop scrollytelling pin, tighten the rhythm so the steps
       read as a normal stacked list — not a scroll choreography with dead space. */
    .v2-promise-text { gap: 0; }
    .v2-promise-step { padding: 1.75rem 0; opacity: 1; }
}

/* ============================================================
   6. AREAS — typographic moment
   ============================================================ */
.v2-areas {
    background: var(--ink);
    color: #fff;
    padding: clamp(6rem, 12vw, 10rem) 0;
    overflow: hidden;
    position: relative;
}
.v2-areas::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Owner-supplied map (2026-10-09), redrawn on a level 10px grid and turned
       ~14deg counter-clockwise to match the previous art's tilt. */
    background-image: url("/images/virginia-dots-blue.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(1600px, 130%) auto;
    opacity: 0.14;
    clip-path: inset(0 0 0 3%);
    pointer-events: none;
    z-index: 0;
    filter: brightness(1.15) saturate(1.4);
}
.v2-areas > * { position: relative; z-index: 1; }
.v2-areas .v2-eyebrow { color: var(--blue-soft); }
.v2-areas .v2-display-l { color: #fff; }
.v2-areas .v2-muted { color: rgba(255, 255, 255, 0.5); }
.v2-areas-cloud {
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    max-width: var(--max);
    padding: 0 var(--pad);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 1.2vw, 1rem) clamp(1.25rem, 2.5vw, 2rem);
    align-items: baseline;
    justify-content: center;
    text-align: center;
}
.v2-area {
    font-size: clamp(1.5rem, 4.2vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.4s var(--ease), transform 0.45s var(--ease-out);
    cursor: default;
    line-height: 1.1;
}
.v2-area:nth-child(2n) { font-weight: 500; font-style: italic; }
.v2-area:nth-child(3n) { color: rgba(255, 255, 255, 0.55); }
.v2-area:nth-child(5n) { color: rgba(255, 255, 255, 0.7); }
.v2-area:hover, .v2-area:focus-within {
    color: #fff;
    transform: translateY(-3px) scale(1.02);
}
.v2-area a {
    color: inherit;
    font: inherit;
    text-decoration: none;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1.5px;
    transition: color 0.25s;
}
.v2-area a:hover, .v2-area a:focus-visible {
    color: var(--blue-soft);
    text-decoration: underline;
}
.v2 .v2-areas-foot {
    text-align: center;
    margin-top: clamp(5rem, 9vw, 8rem);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
}
.v2-areas-foot a {
    color: var(--blue-soft);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.2s;
}
.v2-areas-foot a:hover { color: #fff; }

/* ============================================================
   7. SERVICES
   ============================================================ */
.v2-services {
    background: var(--bg);
    padding: clamp(6rem, 12vw, 10rem) 0;
}
.v2-services .v2-display-l { max-width: 22ch; }
.v2-services-grid {
    margin-top: clamp(3rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}
.v2-service-card {
    background: var(--bg-cream);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.4vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), background 0.3s;
    position: relative;
    overflow: hidden;
}
.v2-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 3px;
    background: var(--red);
    transition: width 0.5s var(--ease-out);
}
.v2-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.18);
    background: #fff;
}
.v2-service-card:hover::before { width: 100%; }
.v2-service-num {
    font-size: clamp(3rem, 5vw, 4.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    opacity: 0.18;
    font-feature-settings: "tnum" 1, "lnum" 1;
    margin-bottom: 0.5rem;
}
.v2-service-title {
    font-size: clamp(1.25rem, 1.55vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--ink);
}
.v2-service-text {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-2);
    flex: 1;
}
.v2-service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--blue-deep);
    font-weight: 600;
    align-self: flex-start;
    transition: gap 0.35s var(--ease-out), color 0.2s;
}
.v2-service-link:hover { color: var(--blue-deep); gap: 0.7rem; }

@media (max-width: 880px) {
    .v2-services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   8. CLOSER
   ============================================================ */
.v2-closer {
    position: relative;
    color: #fff;
    text-align: center;
    overflow: hidden;
    padding: clamp(7rem, 16vw, 14rem) 0;
    /* Dark base so any parallax overscan stays invisible instead of flashing
       the white body background at the section's top/bottom edge. */
    background: #0b0b0d;
}
.v2-closer-bg {
    /* The dark #0b0b0d base on .v2-closer is what prevents the parallax
       overscan from flashing white — do NOT enlarge this inset to "fix"
       overscan, because object-fit:cover re-crops the photo and changes the
       framing. Keep the original -10%. */
    position: absolute; inset: -10% -5%;
    z-index: 0;
    will-change: transform;
}
.v2-closer-bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.v2-closer-tint {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 11, 13, 0.65) 0%, rgba(11, 11, 13, 0.45) 50%, rgba(11, 11, 13, 0.85) 100%);
}
.v2-closer-inner {
    position: relative;
    z-index: 2;
    /* No max-width here: the heading is nowrap above 700px, and a longer one
       ("Ready to join the team?" on careers) runs wider than the old 760px
       measure, so it overflowed the container and stopped lining up with the
       lede and buttons. The measure lives on the lede instead, sized to the
       exact content box the 760px container used to give it. */
    margin: 0 auto;
    padding: 0 var(--pad);
}
.v2-closer .v2-display-l { max-width: none; margin: 0 auto; text-wrap: balance; }
@media (min-width: 700px) {
    .v2-closer .v2-display-l { white-space: nowrap; }
}
.v2-closer .v2-lede {
    margin: 1.5rem auto 0;
    max-width: calc(760px - var(--pad) * 2);
    text-wrap: balance;
}
.v2-closer-ctas {
    margin-top: 2.5rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.v2-foot {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 5rem) 0 2rem;
    color: var(--ink-2);
    border-top: 1px solid var(--hairline);
}
.v2-foot-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.v2-foot-brand { padding: 1rem 0; }
.v2-foot-brand img { height: 48px; width: auto; display: block; margin-bottom: 1.5rem; }
.v2-foot-tag {
    margin-top: 0;
    color: var(--ink-3);
    font-size: 0.9375rem;
    max-width: 32ch;
    line-height: 1.55;
}
.v2-foot-contact {
    margin: 1.25rem 0 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.7;
    font-style: normal;
}
.v2-foot-contact a { color: var(--ink-2); transition: color 0.2s; }
.v2-foot-contact a:hover { color: var(--red-deep); }
.v2-foot-social {
    list-style: none;
    margin: 1.875rem 0 0;
    padding: 0;
    display: flex;
    gap: 0.625rem;
}
.v2-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(15, 17, 22, 0.05);
    color: var(--ink-2);
    transition: background 0.2s, color 0.2s, transform 0.25s var(--ease-out);
}
/* Award badges under the social icons (owner-supplied artwork). */
.v2-foot-badges { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.v2 .v2-foot-badges img { width: 80px; height: 80px; margin: 0; }
.v2 .v2-foot-rating {
    height: 80px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--ink);
    text-align: center;
    line-height: 1.1;
    transition: transform 0.25s var(--ease-out);
}
.v2 .v2-foot-rating:hover { transform: translateY(-2px); }
.v2 .v2-foot-badges .v2-foot-rating img { display: block; width: 112px; height: auto; margin: 0; }
.v2-foot-rating-label { font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--ink-2); margin-top: 0.4rem; white-space: nowrap; }
/* Resting: subtle gray. Hover: brand blue (red is reserved for primary CTA). */
.v2-foot-social a:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   QUOTE MODAL
   Two-pathway lead capture: callback (name + phone) OR detailed
   form. Apple-style sheet — fade backdrop, scale-in on desktop,
   slide-up on phone. Focus-trapped, Escape closes, body scroll locks.
   ============================================================ */
.v2-quote {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0px, 4vw, 2rem);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.v2-quote.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}
.v2-quote-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 13, 0.55);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.v2-quote-panel {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 4rem);
    max-height: calc(100svh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 22px;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.35),
        0 6px 16px -4px rgba(0, 0, 0, 0.12);
    padding: clamp(2rem, 3.5vw, 2.75rem);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s var(--ease-out);
}
.v2-quote.is-open .v2-quote-panel { transform: translateY(0) scale(1); }
/* Mobile: panel becomes a bottom sheet */
@media (max-width: 600px) {
    .v2-quote { padding: 0; align-items: flex-end; }
    .v2-quote-panel {
        max-width: 100%;
        max-height: 92svh;
        border-radius: 22px 22px 0 0;
        padding: 2rem 1.5rem 2rem;
        transform: translateY(100%);
    }
    .v2-quote.is-open .v2-quote-panel { transform: translateY(0); }
}
.v2-quote-close {
    position: absolute;
    top: 1.125rem;
    right: 1.125rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 17, 22, 0.06);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}
.v2-quote-close:hover { background: rgba(15, 17, 22, 0.12); color: var(--ink); }

/* View management */
.v2-quote-view { display: none; }
.v2-quote-view.is-active { display: block; animation: v2QuoteFadeIn 0.25s var(--ease-out); }
@keyframes v2QuoteFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .v2-quote-view.is-active { animation: none; }
}

/* Brand stamp + title row — tree mark sits inline next to the title. */
.v2-quote-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 2rem;
    padding-right: 3rem;
}
.v2-quote-mark {
    display: block;
    height: 72px;
    width: auto;
    flex: 0 0 auto;
}
.v2-quote-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}
.v2-quote-head .v2-quote-title { margin: 0; padding-right: 0; }
.v2-quote-title {
    font-family: var(--font);
    font-size: clamp(1.625rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 1.125rem;
    padding-right: 3rem;
}
/* Generous breathing room — subtitle is its own visual beat, not crammed
   against the cards. Foot likewise gets a clear pause from the cards. */
.v2-quote-sub {
    margin: 0 0 3.5rem;
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 42ch;
}
/* In the head block, the subtitle becomes a quiet editorial line tucked
   directly under the headline — italic, muted, lighter weight. The head
   container carries the breathing room down to the cards. */
.v2-quote-head .v2-quote-sub {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.005em;
}
.v2 .v2-quote-foot {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    color: var(--ink-3);
    font-size: 0.9375rem;
}
.v2 .v2-quote-foot-call {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    transition: color 0.2s;
}
.v2 .v2-quote-foot-call svg { color: var(--red-cta); }
.v2 .v2-quote-foot-call:hover { color: var(--red-deep); }
.v2-quote-fine {
    margin: 0.75rem 0 0;
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.45;
}
.v2-quote-optional { color: var(--ink-3); font-weight: 400; font-size: 0.8125rem; }

/* Choice cards */
.v2-quote-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}
.v2 .v2-quote-or {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--ink-soft, #6b6b66);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.15rem 0.25rem;
    user-select: none;
}
.v2 .v2-quote-or::before,
.v2 .v2-quote-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.25;
}
.v2 .v2-quote-or span {
    flex: 0 0 auto;
}
.v2 .v2-quote-card {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1.35rem;
    border-radius: 14px;
    background: var(--bg-cream);
    border: 1px solid var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.v2-quote-card:hover,
.v2-quote-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.18);
    outline: none;
}
.v2-quote-card-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.25s var(--ease-out);
}
/* Brand-colored card variants — red for the fast callback path,
   blue for the deliberate detailed path. Mirrors the v2 system's
   red-as-action / blue-as-info split. */
.v2-quote-card-red .v2-quote-card-icon { background: var(--red); }
.v2-quote-card-blue .v2-quote-card-icon { background: var(--blue); }
.v2-quote-card-amber .v2-quote-card-icon { background: var(--amber); }
.v2-quote-card-red:hover .v2-quote-card-icon  { background: var(--red-deep); transform: scale(1.05); }
.v2-quote-card-blue:hover .v2-quote-card-icon { background: var(--blue-deep); transform: scale(1.05); }
.v2-quote-card-amber:hover .v2-quote-card-icon { background: var(--amber-deep); transform: scale(1.05); }
.v2-quote-card-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.v2-quote-card-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.v2-quote-card-desc {
    font-size: 0.875rem;
    color: var(--ink-3);
    line-height: 1.4;
}
.v2-quote-card-arrow {
    flex: 0 0 auto;
    color: var(--ink-3);
    transition: color 0.2s, transform 0.25s var(--ease-out);
}
.v2-quote-card:hover .v2-quote-card-arrow,
.v2-quote-card:focus-visible .v2-quote-card-arrow {
    transform: translateX(3px);
}
.v2-quote-card-red:hover  .v2-quote-card-arrow,
.v2-quote-card-red:focus-visible .v2-quote-card-arrow  { color: var(--red); }
.v2-quote-card-blue:hover .v2-quote-card-arrow,
.v2-quote-card-blue:focus-visible .v2-quote-card-arrow { color: var(--blue); }
.v2-quote-card-amber:hover .v2-quote-card-arrow,
.v2-quote-card-amber:focus-visible .v2-quote-card-arrow { color: var(--amber); }

/* Back button */
.v2-quote-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    color: var(--ink-3);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s, background 0.2s;
    margin-left: -0.6rem;
}
.v2-quote-back:hover { color: var(--ink); background: rgba(15, 17, 22, 0.05); }

/* Forms */
.v2-quote-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}
.v2-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.v2-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.01em;
}
.v2-field input[type="text"],
.v2-field input[type="tel"],
.v2-field input[type="email"],
.v2-field select,
.v2-field textarea {
    width: 100%;
    font-family: var(--font);
    font-size: 1rem;
    color: var(--ink);
    background: var(--bg-alt);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.v2-field textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.5;
}
.v2-field select {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 10px 6px;
    cursor: pointer;
}
.v2-field input:hover,
.v2-field select:hover,
.v2-field textarea:hover { background-color: #ececef; }
.v2-field input:focus,
.v2-field select:focus,
.v2-field textarea:focus {
    background-color: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
    outline: none;
}
.v2-field input::placeholder,
.v2-field textarea::placeholder { color: var(--ink-3); }
.v2-field.has-error input,
.v2-field.has-error textarea {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}
.v2-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 480px) {
    .v2-field-row { grid-template-columns: 1fr; }
}

/* Radio group — 3-up segmented control */
.v2-field-radios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.v2-field-radios > .v2-field-label {
    grid-column: 1 / -1;
    margin-bottom: 0.25rem;
}
.v2-radio {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: var(--bg-alt);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.v2-radio input { position: absolute; opacity: 0; pointer-events: none; }
.v2-radio:hover { background: #ececef; }
.v2-radio:has(input:checked) {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.v2-radio:has(input:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Checkbox group */
.v2-field-checks { display: flex; flex-direction: column; gap: 0.4rem; }
.v2-check {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: var(--bg-alt);
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--ink);
    transition: background 0.15s;
}
.v2-check:hover { background: #ececef; }
.v2-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--ink);
    flex: 0 0 auto;
    cursor: pointer;
}
.v2-check:has(input:checked) { background: rgba(15, 17, 22, 0.08); }
/* Plan row = checkbox label + a sibling "What's included?" link. The link sits
   OUTSIDE the <label> on purpose: nested inside it, the link text gets absorbed
   into the checkbox's accessible name ("Backsaver What's included?"). The row
   div carries the surface styling the label used to own. */
.v2-check-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: var(--bg-alt);
    transition: background 0.15s;
}
.v2-check-row:hover { background: #ececef; }
.v2-check-row:has(input:checked) { background: rgba(15, 17, 22, 0.08); }
/* The label inside a row is just the hit area now — the row draws the surface. */
.v2-check-row .v2-check,
.v2-check-row .v2-check:hover,
.v2-check-row .v2-check:has(input:checked) {
    flex: 1 1 auto;
    padding: 0;
    background: none;
    border-radius: 0;
}
.v2 .v2-check-info {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--blue-deep);
    text-decoration: none;
    white-space: nowrap;
}
.v2 .v2-check-info:hover { text-decoration: underline; }

/* Conditional sub-list — appears beneath "Standalone Services" only when
   that box is checked. Indented so it reads as a child of its trigger. */
.v2-onetime-group { display: flex; flex-direction: column; gap: 0.4rem; }
.v2-onetime-sub {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 2px solid rgba(15, 17, 22, 0.08);
    margin-left: 0.6rem;
}
.v2-onetime-group:has(> .v2-check input[value="standalone"]:checked) .v2-onetime-sub {
    display: flex;
}

/* Submit button — full width, beefed up so it reads as a confident
   primary CTA rather than a thin strip stretched across the form. */
.v2 .v2-quote-submit {
    width: 100%;
    margin-top: 0.75rem;
    padding: 1.15rem 1.75rem;
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
}

/* Success view — brand tree mark replaces a generic checkmark for a more
   distinctive Potomac moment. Scales in for celebratory feel. */
.v2-quote-view-success { text-align: center; padding: 0.5rem 0 0.5rem; }
.v2-quote-view-success .v2-quote-title,
.v2-quote-view-success .v2-quote-sub { padding-right: 0; max-width: none; }
.v2-quote-success-mark {
    display: block;
    height: 80px;
    width: auto;
    margin: 0 auto 1.75rem;
    animation: v2QuoteMarkIn 0.5s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes v2QuoteMarkIn {
    from { opacity: 0; transform: scale(0.6) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .v2-quote-success-mark { animation: none; }
}

.v2-foot-nav {
    display: grid;
    /* Services / Pricing / Service Areas (wider) / Company */
    grid-template-columns: 1fr 1fr 2fr 1fr;
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.v2-foot-nav-wide { min-width: 0; }
.v2-foot-areas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 0;
}
.v2-foot-nav h3 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 1rem;
}
.v2-foot-nav a {
    display: block;
    padding: 0.35rem 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
    transition: color 0.2s;
}
.v2-foot-nav a:hover { color: var(--red-deep); }
.v2-foot-rule {
    max-width: var(--max);
    margin: 3rem auto 1.5rem;
    height: 1px;
    background: var(--hairline);
}
.v2-foot-fine {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--ink-3);
    font-size: 0.8125rem;
}
.v2-foot-fine a {
    color: var(--ink-3);
    transition: color 0.2s;
}
.v2-foot-fine a:hover { color: var(--ink); }

/* Tablet: drop the brand column out of side-by-side, two-up the nav.
   Service Areas spans both nav columns at this size. */
@media (max-width: 1100px) {
    .v2-foot-nav { grid-template-columns: 1fr 1fr; }
    .v2-foot-nav-wide { grid-column: 1 / -1; }
    .v2-foot-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .v2-foot-inner { grid-template-columns: 1fr; }
    .v2-foot-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lazy background photos. A CSS background-image downloads as soon as the page
   renders, wherever it sits, so the plan cards and the areas map used to pull
   ~1MB during first paint. Sections marked [data-lazy-bg] hold theirs back
   until v2.js adds .is-bg-in (about a screen before they scroll into view).
   Gated on html.js, so with JS off every background still loads. */
.js [data-lazy-bg]:not(.is-bg-in) .v2-plan-card-media,
.js .v2-areas[data-lazy-bg]:not(.is-bg-in)::before { background-image: none; }

/* ============================================================
   REVEAL ANIMATIONS — IntersectionObserver-driven
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}
[data-reveal="words"] {
    opacity: 1;
    transform: none;
}
[data-reveal="words"] .v2-word {
    display: inline-block;
    /* No clipping box — italic accents share the same reveal as every other
       word. Inner span fades + lifts on its own. */
}
/* Wrapper the splitter puts around a word and the punctuation hugging it, so a
   trailing comma or period can't be orphaned onto the next line on its own. */
[data-reveal="words"] .v2-nowrap { white-space: nowrap; }

/* Hero h1 skips the per-word reveal animation — it's already on screen at load. */
.v2-hero [data-reveal="words"] .v2-word > span {
    transform: none;
    transition: none;
    opacity: 1;
}
[data-reveal="words"] .v2-word > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
    transition-delay: calc(var(--word-i, 0) * 60ms + var(--reveal-delay, 0ms));
}
[data-reveal="words"].is-in .v2-word > span {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal="words"] .v2-word > span {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* The hero is above the fold, so its copy is the LCP element. Paint it
   immediately instead of gating it on the JS reveal (the lede's 600ms delay +
   0.9s fade was the dominant LCP render-delay). The homepage h1 was already
   instant; this extends that to the eyebrow, lede, and CTAs on both the
   homepage hero and the interior service/location hero. Everything below the
   fold still animates on scroll. */
.v2-hero [data-reveal],
.v2-svc-hero [data-reveal],
.v2-svc-hero [data-reveal="words"] .v2-word > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ============================================================
   RESPONSIVE BITS
   ============================================================ */
@media (max-width: 600px) {
    .v2-hero { padding-top: calc(5rem + var(--promo-h, 0rem)); }
    .v2-hero-ctas .v2-btn { flex: 1 1 auto; }
    .v2-promise-step { padding: 1.5rem 0; }
    .v2-counter-num { font-size: clamp(6rem, 28vw, 9rem); }
    .v2-area { font-size: clamp(1.25rem, 7vw, 2.5rem); }
}

/* ============================================================
   FILM — inline full-bleed player with minimal controls
   ============================================================ */
.v2-film {
    position: relative;
    width: 100%;
    background: var(--ink);
    overflow: hidden;
}
.v2-film-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--ink);
}
/* Scoped with .v2 so it beats the global `.v2 button` reset (which would
   otherwise wipe background + color, leaving an invisible play button). */
.v2 .v2-film-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(104px, 11vw, 144px);
    height: clamp(104px, 11vw, 144px);
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    box-shadow: 0 18px 60px -12px rgba(255,59,48,0.55),
                0 2px 0 rgba(0,0,0,0.08);
    transition: transform 0.35s var(--ease-out), background 0.25s var(--ease), opacity 0.3s var(--ease), box-shadow 0.35s var(--ease-out);
    z-index: 2;
}
.v2-film-play svg {
    margin-left: 6px;
    width: clamp(36px, 3.8vw, 48px);
    height: clamp(36px, 3.8vw, 48px);
}
.v2-film-play:hover,
.v2-film-play:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
    background: var(--red-deep);
    box-shadow: 0 24px 80px -12px rgba(255,59,48,0.7),
                0 2px 0 rgba(0,0,0,0.1);
}
.v2-film.is-playing .v2-film-play {
    opacity: 0;
    pointer-events: none;
}
.v2 .v2-film-mute {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: background 0.2s, opacity 0.3s var(--ease);
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.v2-film-mute:hover { background: rgba(0,0,0,0.75); }
/* Show the matching speaker icon for the current sound state (class on button). */
.v2-film-mute svg { display: none; }
.v2-film-mute.is-muted .v2-film-ic-off { display: block; }
.v2-film-mute:not(.is-muted) .v2-film-ic-on { display: block; }
.v2-film.is-playing .v2-film-mute {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   INTERIOR / SERVICE PAGE
   ============================================================
   Shared vocabulary for content pages (first used by the Arlington
   lawn-care page). Built on the same tokens + primitives as the home
   page (eyebrow / v2-display / v2-lede / v2-btn / v2-accent). Selectors
   are scoped with a `.v2` ancestor wherever they target an element the
   global reset already styles (p, h*, a, ul/ol, button) so component
   rules win on specificity.
   ============================================================ */

/* Generic section shell + background variants -------------------------------- */
.v2-section {
    padding: clamp(5rem, 11vw, 9rem) 0;
    background: var(--bg);
}
.v2-section--cream { background: var(--bg-cream); }
.v2-section--dark { background: var(--ink); color: #fff; }
.v2 .v2-section h2.v2-display { text-wrap: balance; }
/* Brighten italic accents on the interior dark sections, matching the home
   page's behavior on its dark moments. */
.v2-section--dark .v2-accent { color: var(--red-soft); }
.v2-section--dark .v2-accent-blue { color: var(--blue-soft); }

/* Prose blocks -------------------------------------------------------------- */
.v2 .v2-prose { margin-top: 2rem; }
.v2 .v2-prose p {
    margin: 0;
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
    line-height: 1.72;
    max-width: 68ch;
}
.v2 .v2-prose p + p { margin-top: 1.5rem; }
.v2 .v2-prose p strong { color: var(--ink); font-weight: 600; }
.v2 .v2-prose-light p,
.v2-section--dark .v2-prose p { color: rgba(255, 255, 255, 0.82); }
.v2 .v2-prose-light p strong,
.v2-section--dark .v2-prose p strong { color: #fff; }

/* Legal pages (privacy, terms): .v2-prose plus the numbered headings and
   bulleted lists long-form legal text needs. Scoped .v2 .v2-legal so it beats
   the global h2/h3/ul resets. */
.v2 .v2-legal h2 {
    margin: 3.5rem 0 1rem;
    scroll-margin-top: 110px;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.v2 .v2-legal h3 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}
.v2 .v2-legal > :first-child { margin-top: 0; }
.v2 .v2-legal ul {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
    list-style: disc;
    max-width: 68ch;
}
.v2 .v2-legal li {
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
    line-height: 1.72;
}
.v2 .v2-legal li + li { margin-top: 0.5rem; }
.v2 .v2-legal ul + p { margin-top: 1.5rem; }
.v2 .v2-legal a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 0.18em; }
.v2 .v2-legal .v2-legal-updated { color: var(--ink-3); font-size: 0.9375rem; }

/* Inline text-link CTA (carries an arrow, per the button system) ------------ */
.v2 .v2-textlink {
    display: inline;
    color: var(--blue-deep);
    font-weight: 600;
    text-underline-offset: 0.18em;
    transition: color 0.2s;
}
.v2 .v2-textlink:hover { color: var(--blue-deep); text-decoration: underline; }
.v2-section--dark .v2-textlink { color: var(--blue-soft); }
.v2-section--dark .v2-textlink:hover { color: #fff; }

/* Dark pill button — secondary on light surfaces (e.g. plan cards) ---------- */
.v2 .v2-btn-dark { background: var(--ink); color: #fff; }
.v2 .v2-btn-dark:hover { background: #000; color: #fff; transform: translateY(-2px); }

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

/* ---------------------------------------------------------------- HERO ----- */
.v2-svc-hero {
    position: relative;
    min-height: 76svh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    padding-top: calc(9rem + var(--promo-h, 0rem));
    padding-bottom: clamp(4rem, 9vw, 7rem);
}
.v2-svc-hero-media { position: absolute; inset: -8% -5%; z-index: 0; will-change: transform; }
.v2-svc-hero-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 60%;
    transform: scale(1.05);
}
.v2-svc-hero-tint {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11,11,13,0.62) 0%, rgba(11,11,13,0.30) 38%, rgba(11,11,13,0.30) 60%, rgba(11,11,13,0.78) 100%),
        radial-gradient(120% 80% at 75% 25%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 100%);
}
.v2-svc-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
}
.v2 .v2-svc-hero-title {
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 5.25rem);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.035em;
    max-width: 17ch;
    margin: 0;
    text-wrap: balance;
}
.v2-svc-hero .v2-lede { margin-top: 1.75rem; max-width: 60ch; }
.v2-svc-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.5rem;
}

/* ----------------------------------------------- WHAT'S INCLUDED (grid) ---- */
.v2-svc-grid {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}
.v2-svc-item {
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.v2-section--cream .v2-svc-item { background: #fff; }
.v2-svc-item:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -24px rgba(0,0,0,0.20); }
.v2 .v2-svc-item-title {
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.85rem;
}
.v2 .v2-svc-item-body {
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.62;
    margin: 0;
}
.v2 .v2-svc-price {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    color: var(--red-deep);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}
.v2 .v2-svc-crosssell {
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    max-width: 70ch;
    text-align: center;
    color: var(--ink-3);
    font-size: 1.0625rem;
    line-height: 1.65;
}
/* Reciprocal text-link inside a service-grid item (e.g. Lawn Care -> Lawn Mowing) */
.v2 .v2-svc-item-link { display: inline-block; margin-top: 0.85rem; font-size: 0.9375rem; }

/* Checklist — "what every visit includes" style list (icon + bold lead + body).
   Light-section sibling of the dark .v2-why-list. */
.v2 .v2-checklist {
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
}
.v2-check-item { display: flex; gap: 1rem; align-items: flex-start; }
.v2-check-mark {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: rgba(0, 122, 255, 0.12);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.v2 .v2-check-lead { margin: 0 0 0.35rem; color: var(--ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.v2 .v2-check-body { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }

/* Service directory — a linked list of services for location/hub pages
   (each row: a bold linked service name + a short blurb, hairline-separated). */
.v2-svclist { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hairline); }
.v2-svclist-item { padding: clamp(1.5rem, 3vw, 2rem) 0; border-bottom: 1px solid var(--hairline); }
.v2 a.v2-svclist-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    transition: color 0.2s, gap 0.3s var(--ease-out);
}
.v2 a.v2-svclist-name:hover { color: var(--red-deep); gap: 0.85rem; }
.v2-svclist-arrow { color: var(--blue-deep); font-weight: 400; }
.v2 a.v2-svclist-name:hover .v2-svclist-arrow { color: var(--red-deep); }
.v2 .v2-svclist-blurb { margin: 0.55rem 0 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; max-width: 72ch; }

/* ---------------------------------------------------- PRICING PAGE BITS ---- */
/* Plan comparison matrix: center the plan columns; keep the feature label left.
   Selectors use `.v2-table.v2-table--matrix` (both classes) so they outrank the
   base `.v2 .v2-table td { text-align:left }` rule that appears later in the file. */
.v2 .v2-table.v2-table--matrix thead th { text-align: center; }
.v2 .v2-table.v2-table--matrix thead th:first-child { width: 34%; }
.v2 .v2-table.v2-table--matrix td { text-align: center; }
.v2 .v2-table.v2-table--matrix th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); }
.v2 .v2-table.v2-table--matrix .v2-matrix-price th[scope="row"] { color: var(--ink); font-weight: 700; }
.v2-table--matrix .v2-table-yes { font-size: 1.05rem; }
.v2-table--matrix .v2-table-no { font-size: 1.05rem; color: var(--red); }

/* Standalone services: one row of boxes per group (Lawn / Landscape / Seasonal).
   Each box borrows the .v2-svc-item card look; a linked box is clickable
   edge to edge via the name link's ::after. */
.v2-pricegroups {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    display: grid;
    gap: clamp(3.5rem, 7vw, 5.5rem);
}
.v2 .v2-pricegroup-label {
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-deep);
}
.v2 .v2-pricelist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    /* auto-fit: each group's boxes fill the full row (4 or 5 across), no orphans */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.v2 .v2-priceitem {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.25rem, 2vw, 1.6rem);
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s;
}
.v2-section--cream .v2-priceitem { background: #fff; }
.v2 .v2-priceitem:has(a):hover { transform: translateY(-4px); box-shadow: 0 22px 50px -24px rgba(0,0,0,0.20); border-color: transparent; }
.v2-priceitem-name { color: var(--ink); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.v2 .v2-priceitem-name a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.v2-priceitem-price {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    color: var(--red-deep);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}
@media (max-width: 900px) {
    .v2 .v2-pricelist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .v2 .v2-pricelist { grid-template-columns: 1fr; }
}

/* Founder block — centered, brand-mark led (placeholder for a real headshot) */
.v2-founder { text-align: center; max-width: 60ch; margin: 0 auto; }
.v2-founder-mark { margin: 0 0 1.5rem; display: flex; justify-content: center; }
.v2-founder-mark img { height: 56px; width: auto; }
.v2 .v2-founder-name { margin: 0.5rem 0 1.25rem; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.v2-founder-role { color: var(--ink-3); font-weight: 500; letter-spacing: 0.01em; }
.v2 .v2-founder-bio { margin: 0; color: var(--ink-2); font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem); line-height: 1.7; }

/* ---------------------------------------------------- CAREERS PAGE BITS ---- */
/* Team testimonial videos — portrait, native controls, centered. */
.v2-videos {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.v2-video { flex: 0 1 340px; margin: 0; }
.v2-video video {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: var(--ink);
    border-radius: var(--r-lg);
    display: block;
    box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.4);
}
.v2 .v2-video figcaption { margin: 0.85rem 0 0; color: var(--ink-3); font-size: 0.9375rem; line-height: 1.45; }
.v2-section--dark .v2-video figcaption { color: rgba(255, 255, 255, 0.6); }

/* Application form */
.v2-careers-form { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-direction: column; gap: 1.1rem; }
.v2-field-radios--yn { grid-template-columns: repeat(2, 1fr); }
.v2-req { color: var(--red); }
.v2-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v2 .v2-careers-submit { width: 100%; margin-top: 0.5rem; padding: 1.1rem 1.75rem; font-size: 1.0625rem; }
.v2-careers-success { max-width: 48ch; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }

/* --------------------------------------------------- WHY (local authority) - */
.v2-why-head { max-width: 64ch; }
/* Intro text + supporting photo share the top row; the photo fills what was
   dead space to the right of the copy. Bullet grid stays full-width below. */
.v2-why-top {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.v2-why-top .v2-why-head { max-width: none; }
.v2-why-media {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    /* Fill the full height of the (taller) text column so the photo reads as a
       deliberate panel rather than a small image floating in dead space. */
    align-self: stretch;
    box-shadow: 0 36px 80px -34px rgba(0, 0, 0, 0.65);
}
.v2-why-media img { width: 100%; height: 100%; object-fit: cover; }
/* Reusable lead-in gap: the breathing room between an intro paragraph that
   ends in a colon and the list it introduces. NOTE: scoped as `.v2 .v2-why-list`
   so it beats the global `.v2 ul` reset (margin:0) on specificity — an unscoped
   single-class selector would lose to it. Same pattern for any styled list. */
.v2 .v2-why-list {
    margin: clamp(4rem, 7vw, 6rem) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}
.v2-why-item { display: flex; gap: 1rem; align-items: flex-start; }
.v2-why-mark {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    margin-top: 0.45rem;
    border-radius: 3px;
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.16);
}
.v2 .v2-why-lead {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.v2 .v2-why-body { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 1.0625rem; line-height: 1.6; }
/* Closing statement — anchored by a short red rule and an accented phrase so
   it reads as deliberate punctuation for the section rather than an orphan
   line. Smaller/softer than the bullets above it. */
.v2 .v2-why-foot {
    margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
    max-width: 48ch;
    text-align: center;
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(1.0625rem, 1.2vw, 1.3125rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
    text-wrap: balance;
}
.v2-why-foot::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 0 auto 1.75rem;
    background: var(--red);
    border-radius: 2px;
}

/* ----------------------------------------------------------- PRICING ------- */
.v2-pricing {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
}
/* Two-card variant (lawn mowing: pay for the season vs pay as you go). The
   880px mobile rule below resets .v2-pricing to one column and wins by order. */
.v2-pricing--two { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; }
.v2-price-card {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 2.6vw, 2.25rem);
    display: flex;
    flex-direction: column;
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s;
}
.v2-price-card:hover { transform: translateY(-5px); box-shadow: 0 26px 56px -26px rgba(0,0,0,0.22); }
/* Client portal page: one price-card centered on the hero photo. */
.v2-svc-hero--center .v2-svc-hero-inner { display: flex; justify-content: center; }
.v2-portal-card { width: 100%; max-width: 440px; text-align: center; align-items: center; color: var(--ink); }
.v2-portal-card:hover { transform: none; }
.v2 .v2-portal-mark { width: 48px; height: auto; margin: 0 auto 1.25rem; }
.v2 .v2-portal-card .v2-price-cta { width: 100%; margin-top: 1.5rem; }
.v2 .v2-portal-help { margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); }
.v2-portal-help a { color: var(--ink); font-weight: 600; }
.v2-price-card--feature {
    border-color: var(--red);
    box-shadow: 0 26px 60px -28px rgba(255, 59, 48, 0.45);
}
.v2-price-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1rem;
}
.v2-price-card--feature .v2-price-eyebrow { color: var(--red-deep); }
.v2 .v2-price-name {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}
.v2-price-amount {
    margin: 0.85rem 0 0;
    color: var(--ink);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}
.v2-price-from { font-size: 0.875rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; text-transform: uppercase; }
.v2-price-per { font-size: 0.9375rem; font-weight: 500; color: var(--ink-3); letter-spacing: -0.01em; }
.v2 .v2-price-tagline {
    margin: 1rem 0 0;
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.5;
}
.v2 .v2-price-feats {
    margin: 1.5rem 0 2rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
}
.v2 .v2-price-feats li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--ink-2);
    font-size: 0.9875rem;
    line-height: 1.45;
}
.v2 .v2-price-feats li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.15em;
    width: 18px; height: 18px;
    background: var(--blue);
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20d=%27M2%208.5l3.5%203.5L14%204%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20d=%27M2%208.5l3.5%203.5L14%204%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.v2-price-card--feature .v2-price-feats li::before { background: var(--red); }
.v2 .v2-price-cta { width: 100%; margin-top: auto; }

/* At-a-glance table --------------------------------------------------------- */
.v2-table-wrap {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    /* Cross-page hash links (e.g. the quote modal's "What's included?") land here via
       native scroll, which the JS nav-offset never sees. Keep it clear of the fixed nav. */
    scroll-margin-top: 110px;
    overflow-x: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    -webkit-overflow-scrolling: touch;
}
.v2 .v2-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.975rem;
    min-width: 540px;
}
.v2 .v2-table th,
.v2 .v2-table td {
    text-align: left;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
    color: var(--ink-2);
}
.v2 .v2-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    font-weight: 600;
    background: var(--bg-alt);
}
.v2 .v2-table tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.v2-table-yes { color: var(--blue-deep); font-weight: 600; white-space: nowrap; }
.v2-table-no { color: var(--ink-3); white-space: nowrap; }
.v2-table-meta { display: block; margin-top: 0.15rem; color: var(--ink-3); font-size: 0.8125rem; }
.v2 .v2-table tbody tr:last-child th,
.v2 .v2-table tbody tr:last-child td { border-bottom: 0; }

.v2 .v2-plans-note { margin-top: 2rem; max-width: 70ch; font-size: 0.95rem; line-height: 1.6; }
.v2 .v2-standalone {
    margin: 1.5rem 0 0;
    max-width: 74ch;
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.6;
}
.v2 .v2-standalone strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------- THE STANDARD ----- */
.v2 .v2-standard-list {
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    column-gap: clamp(2rem, 5vw, 4rem);
}
.v2-standard-item {
    padding: 1.75rem 0;
    border-top: 1px solid var(--hairline);
}
.v2 .v2-standard-lead {
    margin: 0 0 0.6rem;
    color: var(--ink);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.v2 .v2-standard-body { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }

/* ----------------------------------------------------------- FIT / NOT ----- */
.v2-fit-grid {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1rem, 2vw, 1.5rem);
}
.v2-fit-col {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
}
.v2-fit-col--no { background: var(--bg-alt); border-style: dashed; }
/* Column headings read as clear subheadings (front-and-center, not shouty) —
   sentence case, bold, full ink, sized between the body and the section h2. */
.v2 .v2-fit-label {
    margin: 0 0 1.5rem;
    font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.v2 .v2-fit-list { display: flex; flex-direction: column; gap: 1rem; }
.v2 .v2-fit-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: var(--ink);
    font-size: 1.0625rem;
    line-height: 1.45;
}
.v2-fit-ic {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.05rem;
}
.v2-fit-ic--yes { background: rgba(0, 122, 255, 0.12); color: var(--blue); }
.v2-fit-ic--no { background: rgba(15, 17, 22, 0.07); color: var(--ink-3); }
.v2 .v2-fit-note { margin: 1.5rem 0 0; color: var(--ink-3); font-size: 1rem; line-height: 1.6; }

/* -------------------------------------------------------------- PROCESS ---- */
.v2 .v2-steps {
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    counter-reset: step;
}
.v2-step { position: relative; }
.v2-step-num {
    display: block;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    opacity: 0.16;
    margin-bottom: 1rem;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.v2 .v2-step-title {
    margin: 0 0 0.6rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.v2 .v2-step-body { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.v2-audit {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    background: var(--bg-cream);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--red);
    border-radius: var(--r-md);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.v2-section--cream .v2-audit { background: #fff; }
.v2 .v2-audit-label {
    margin: 0 0 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red-deep);
}
.v2 .v2-audit-body { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; max-width: 72ch; }
.v2-process-cta {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
}

/* ---------------------------------------------------------------- PROOF ---- */
/* Same photographic treatment as the homepage reviews moment: mowing.webp
   behind a dark tint, with the cards frosted for legibility over the image. */
.v2-proof { position: relative; overflow: hidden; }
/* Overscan must exceed the parallax travel or the section's dark base color
   shows as a band at the top/bottom edge. With data-parallax="0.2" the image
   shifts up to ~10% of its own height; -22% inset keeps it fully covered. */
.v2-proof-bg { position: absolute; inset: -22% -5%; z-index: 0; will-change: transform; }
.v2-proof-bg img { width: 100%; height: 100%; object-fit: cover; }
.v2-proof-tint {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,11,13,0.78) 0%, rgba(11,11,13,0.62) 50%, rgba(11,11,13,0.88) 100%);
}
.v2-proof .v2-container { position: relative; z-index: 2; }
.v2-proof-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
/* Reuses the homepage counter spans (.v2-counter-num gradient + .v2-counter-plus
   red pop animation) via initCounter; this only sets the wrapper + sizes them
   for the proof layout. */
.v2-proof-stat {
    margin: 0;
    display: inline-flex;
    align-items: flex-start;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
}
.v2-proof-stat .v2-counter-num { font-size: clamp(4.5rem, 11vw, 9rem); }
.v2-proof-stat .v2-counter-plus { font-size: clamp(2rem, 5vw, 4rem); margin-top: 0.32em; }
.v2-reviews {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}
.v2-review {
    margin: 0;
    background: rgba(18, 18, 20, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.v2-review-stars { display: inline-flex; gap: 0.3rem; margin-bottom: 1.25rem; }
.v2-review-stars span {
    width: 18px; height: 18px;
    background: var(--red);
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.v2 .v2-review-body {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.0625rem;
    line-height: 1.62;
    flex: 1;
}
.v2-review-by {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.v2-review-name { color: #fff; font-weight: 600; font-size: 1rem; }
.v2-review-src {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}
.v2 .v2-proof-cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Service-area module styling lives with the homepage .v2-areas rules; the
   interior page now uses that same shared module (includes/areas.php). */

/* ------------------------------------------------------------------ FAQ ---- */
.v2-faq { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--hairline); max-width: 900px; }
.v2-faq-item { border-bottom: 1px solid var(--hairline); }
.v2 .v2-faq-q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: color 0.2s;
}
.v2-faq-q::-webkit-details-marker { display: none; }
.v2-faq-q:hover { color: var(--red-deep); }
.v2-faq-ic {
    flex: 0 0 auto;
    color: var(--ink-3);
    transition: transform 0.3s var(--ease-out), color 0.2s;
}
.v2-faq-item[open] .v2-faq-ic { transform: rotate(45deg); color: var(--red); }
.v2 .v2-faq-a { padding: 0 0 1.75rem; }
.v2 .v2-faq-a p {
    margin: 0;
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 68ch;
}
@media (prefers-reduced-motion: no-preference) {
    .v2-faq-item[open] .v2-faq-a { animation: v2FaqIn 0.3s var(--ease-out); }
    @keyframes v2FaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------- INTERIOR RESPONSIVE -- */
@media (max-width: 880px) {
    .v2-why-top { grid-template-columns: 1fr; }
    .v2-why-media { aspect-ratio: 16 / 10; }
    .v2-svc-grid,
    .v2-pricing,
    .v2-fit-grid,
    .v2-reviews { grid-template-columns: 1fr; }
    /* scoped with .v2 to beat the two-class base rules */
    .v2 .v2-why-list,
    .v2 .v2-standard-list { grid-template-columns: 1fr; }
    .v2 .v2-steps { grid-template-columns: repeat(2, 1fr); }
    .v2-price-card--feature { order: -1; }
    .v2-proof-head { grid-template-columns: 1fr; text-align: left; }
}
/* Plan tables stack into labeled blocks rather than scrolling sideways: the payload
   column is a sentence, which needs width more than it needs column alignment. The
   pricing-page matrix is excluded — its yes/no cells only read in aligned columns, so
   that one keeps its horizontal scroll. Labels come from data-label on each <td>.
   Selectors are .v2-scoped to beat the two-class base rules above. */
@media (max-width: 640px) {
    .v2-table-wrap:not(:has(.v2-table--matrix)) {
        overflow-x: visible;
        border: 0;
        border-radius: 0;
    }
    /* The base rule paints the table white; once rows become rounded cards that
       square backdrop shows through at their corners. */
    .v2 .v2-table:not(.v2-table--matrix) { min-width: 0; background: transparent; }
    .v2 .v2-table:not(.v2-table--matrix) thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .v2 .v2-table:not(.v2-table--matrix) tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--hairline);
        border-radius: var(--r-md);
        padding: 1.25rem;
    }
    .v2 .v2-table:not(.v2-table--matrix) tbody tr + tr { margin-top: 1rem; }
    .v2 .v2-table:not(.v2-table--matrix) tbody th,
    .v2 .v2-table:not(.v2-table--matrix) tbody td {
        display: block;
        padding: 0;
        border-bottom: 0;
        white-space: normal;
    }
    .v2 .v2-table:not(.v2-table--matrix) tbody th {
        font-size: 1.1875rem;
        letter-spacing: -0.015em;
        margin-bottom: 0.85rem;
    }
    .v2 .v2-table:not(.v2-table--matrix) tbody td + td { margin-top: 0.85rem; }
    .v2 .v2-table:not(.v2-table--matrix) tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 600;
        color: var(--ink-3);
    }
}
@media (max-width: 520px) {
    .v2-svc-hero-ctas .v2-btn { flex: 1 1 100%; }
    .v2 .v2-steps { grid-template-columns: 1fr; }
    .v2-standard-item:first-child { border-top: 0; }
}

/* ============================================================
   INSTANT QUOTE — sparse host page for the DeepLawn widget
   ============================================================ */

/* The page opens with the standard .v2-svc-hero (see instant-quote/index.php for
   why), then this section carries the how-it-works header above the widget, using
   the same eyebrow / display / lede rhythm as every other interior section. */
.v2-iq-widget-section {
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 11vw, 9rem);
    background: var(--bg);
    /* The hero's "Start my quote" jumps here; keep the heading clear of the nav. */
    scroll-margin-top: 80px;
}
.v2 .v2-iq-lede { margin-top: 1.5rem; max-width: 62ch; }
/* Breathing room between the section header and the vendor widget. Note the
   widget's own first child is a 40px-line-height heading in an 80px box, so it
   carries ~20px of internal leading: the measured box gap reads smaller than
   the gap you actually see. */
.v2-iq-widget-section .lawn-widget { margin-top: clamp(4rem, 8vw, 6rem); }
/* Hold the space before the vendor script mounts, so the footer doesn't jump up
   under the fold and then get shoved down when the widget renders. */
.lawn-widget {
    min-height: 620px;
}
.v2 .v2-iq-noscript {
    margin-top: 2rem;
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.6;
}