/* ═══════════════════════════════════════════════════════════════════════════
 Modern Polish — layered on top of style.css + landing.css.
 Goals: tighter typography, refined buttons & cards, glassier nav, smoother
 focus rings, smarter section rhythm. Drop-in: load AFTER landing.css.
 ═══════════════════════════════════════════════════════════════════════════ */

/* ── Universal defaults ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
*, *::before, *::after { box-sizing: border-box; }

/* Soft, consistent focus ring for accessibility — visible on keyboard nav,
 invisible on mouse clicks. */
:focus-visible {
 outline: 2px solid rgba(78,163,108,0.65);
 outline-offset: 3px;
 border-radius: 4px;
}

/* ── Selection color ───────────────────────────────────────────────────── */
::selection { background: rgba(201,150,10,0.22); color: #1c1c1c; }

/* ── Refined typography ────────────────────────────────────────────────── */
.ls-hero-title,
.ls-section-head h2,
.ls-statement h2,
.ls-about h2,
.ls-trust h2,
.ls-reviews h2,
.ls-final-cta h2 {
 letter-spacing: -0.018em; /* tighten display type the way modern editorial sites do */
 line-height: 1.07;
}
.ls-section-lead, .ls-about p, .ls-trust p {
 letter-spacing: -0.005em;
 line-height: 1.65;
}

/* Italics in display copy — slightly softer color so the emphasis reads as
 editorial rather than a different font. */
.ls-hero-title em,
.ls-section-head em,
.ls-statement em,
.ls-about em,
.ls-trust em,
.ls-reviews em,
.ls-final-cta em {
 color: inherit;
 opacity: 0.92;
}

/* ── Buttons — refined CTA / secondary ─────────────────────────────────── */
.ls-cta-primary,
.ls-cta-secondary,
.btn-gold,
.btn-cta {
 transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
 box-shadow 200ms cubic-bezier(0.2, 0.7, 0.3, 1),
 background-color 180ms ease, color 180ms ease;
 will-change: transform, box-shadow;
}
.ls-cta-primary {
 /* Slightly less saturated, more refined green */
 background: linear-gradient(180deg, #5fb37d 0%, #4ea36c 100%);
 border: 1px solid rgba(31,58,43,0.16);
 box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
 0 8px 22px -8px rgba(31,58,43,0.45);
 border-radius: 999px;
 letter-spacing: 0.005em;
}
.ls-cta-primary:hover,
.btn-cta:hover,
.btn-gold:hover {
 transform: translateY(-1px);
 box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
 0 14px 30px -10px rgba(31,58,43,0.55);
}
.ls-cta-primary:active,
.btn-cta:active,
.btn-gold:active { transform: translateY(0); }

.ls-cta-secondary {
 border-radius: 999px;
 border: 1.5px solid rgba(255,255,255,0.85);
 background: rgba(255,255,255,0.06);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
}
.ls-cta-secondary:hover {
 background: rgba(255,255,255,0.16);
 transform: translateY(-1px);
}

/* ── Logo text contrast on inner pages ─────────────────────────────────── */
/* On the home page the nav floats over the hero photo so the white logo
 text is correct. Inner pages that load shared landing-shell.js (promos,
 gallery, reviews, etc.) sit on a cream body, so we default the wordmark
 to dark ink and only flip back to white when the nav is over a hero
 image (which we detect with .ls-nav-over-hero, set in nav-scroll.js). */
.ls-logo-text { color: #1f1f1f; }
.ls-nav.ls-nav-over-hero .ls-logo-text { color: #ffffff; }
/* The nav links + CTA also need a dark-on-cream variant. */
.ls-nav:not(.ls-nav-over-hero) .ls-nav-links a { color: #2a2418; }
.ls-nav:not(.ls-nav-over-hero) .ls-nav-links a:hover { color: #1f3a2b; }
.ls-nav:not(.ls-nav-over-hero) .nav-dropdown-btn { color: #2a2418; }

/* ── Navigation — sticky glass-blur on scroll ──────────────────────────── */
.ls-nav, .site-nav, header.nav {
 transition: background 240ms ease, backdrop-filter 240ms ease,
 border-color 240ms ease, box-shadow 240ms ease;
}
.ls-nav.is-scrolled, .site-nav.is-scrolled, header.nav.is-scrolled {
 background: rgba(253, 250, 242, 0.78);
 backdrop-filter: saturate(160%) blur(14px);
 -webkit-backdrop-filter: saturate(160%) blur(14px);
 border-bottom: 1px solid rgba(31,31,31,0.06);
 box-shadow: 0 1px 0 rgba(31,31,31,0.04), 0 6px 24px -18px rgba(31,31,31,0.18);
}
.ls-nav a, .site-nav a, header.nav a { transition: color 150ms ease; }

/* ── Cards — soft layered shadow, tighter radius ───────────────────────── */
.ls-service-card,
.ls-review-card,
.ls-card,
.feature-card,
.estimate-card,
.booking-item,
.inv-item,
.portal-card,
.autopay-card {
 border-radius: 16px;
 box-shadow:
 0 1px 2px rgba(31,31,31,0.04),
 0 6px 18px -6px rgba(31,31,31,0.07);
 transition: transform 180ms cubic-bezier(0.2,0.7,0.3,1),
 box-shadow 220ms cubic-bezier(0.2,0.7,0.3,1);
}
.ls-service-card:hover, .ls-review-card:hover, .feature-card:hover {
 transform: translateY(-2px);
 box-shadow:
 0 1px 2px rgba(31,31,31,0.05),
 0 14px 32px -10px rgba(31,31,31,0.14);
}

/* ── Section rhythm ────────────────────────────────────────────────────── */
.ls-section, section.ls-statement, section.ls-about, section.ls-what,
section.ls-services, section.ls-trust, section.ls-reviews, section.ls-final-cta {
 padding-block: clamp(72px, 9vw, 132px);
}
.ls-section-head, .ls-final-cta { margin-bottom: clamp(32px, 5vw, 56px); }

/* ── Tag chips (Last job pill, Tri-Valley · Stockton · East Bay) ───────── */
.ls-hero-eyebrow,
.ls-trust-pill,
.eyebrow-pill {
 letter-spacing: 0.18em;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 11.5px;
}

/* ── Live-status pill (Last job: Tracy · 3 days ago) ───────────────────── */
.ls-live-pill {
 border: 1px solid rgba(255,255,255,0.25);
 background: rgba(0,0,0,0.32);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 box-shadow: 0 6px 18px -8px rgba(0,0,0,0.45);
}

/* ── Form inputs — modern minimal ──────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select {
 transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
input:focus, textarea:focus, select:focus {
 border-color: rgba(78,163,108,0.7) !important;
 box-shadow: 0 0 0 3px rgba(78,163,108,0.18) !important;
}

/* ── Anchors & subtle underlines ───────────────────────────────────────── */
a { text-underline-offset: 3px; }

/* ── Hero overlay tweak — slightly softer dark gradient for nicer photo ── */
.ls-hero::before, .ls-hero::after {
 background: linear-gradient(180deg,
 rgba(13,22,17,0.30) 0%,
 rgba(13,22,17,0.42) 45%,
 rgba(13,22,17,0.62) 100%) !important;
}

/* ── Subtle hairline divider component ─────────────────────────────────── */
.ls-hairline {
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(31,31,31,0.16), transparent);
 border: 0;
 margin: clamp(40px, 6vw, 80px) auto;
 max-width: 240px;
}

/* ── Reduce visual noise on mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
 .ls-service-card, .ls-review-card, .feature-card {
 border-radius: 14px;
 }
 .ls-hero-title { letter-spacing: -0.022em; }
}