/* First Response Lawn Care — custom CSS (kept minimal; Tailwind handles the rest) */
:root{
  --ink:#0F1113; --green-900:#143D2B; --green-700:#1B5C39; --lime:#4FBF26;
  --hivis:#F2E31C; --stone:#F5F4EF; --slate:#4A5568;
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.font-display{font-family:"Barlow Condensed",Inter,system-ui,sans-serif;letter-spacing:.01em}
.measure{max-width:70ch}

/* Focus — visible on every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--hivis); outline-offset:3px; border-radius:4px;
}
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:8px;top:8px;padding:.75rem 1rem;background:var(--hivis);color:var(--ink);font-weight:700}

/* Header condense on scroll */
.site-header{transition:box-shadow .2s ease,background-color .2s ease,padding .2s ease}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(0,0,0,.14)}
.site-header.is-stuck .logo-img{height:54px}
.logo-img{height:70px;width:auto;transition:height .2s ease}

/* Services dropdown */
.has-menu > .menu-panel{display:none}
.has-menu.open > .menu-panel{display:block}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Before / after slider */
.ba{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:#000;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba .after-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba input[type=range]{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba .handle{position:absolute;top:0;bottom:0;width:4px;background:var(--hivis);left:50%;transform:translateX(-2px);pointer-events:none}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--hivis);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.ba .tag{position:absolute;top:10px;padding:.2rem .55rem;font:700 12px/1.4 Inter,sans-serif;letter-spacing:.08em;border-radius:4px}

/* Lightbox */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:80;background:rgba(8,10,9,.94);display:flex;align-items:center;justify-content:center;padding:1rem}
.lb img{max-width:96vw;max-height:86vh;object-fit:contain;border-radius:8px}

/* FAQ accordion */
.faq-panel{display:none}
.faq-item.open .faq-panel{display:block}
.faq-item.open .faq-chev{transform:rotate(180deg)}
.faq-chev{transition:transform .2s ease}

/* Forms */
.field{width:100%;border:1px solid #C9CCC6;border-radius:8px;padding:.75rem .9rem;font-size:16px;background:#fff;min-height:48px}
.field:focus{border-color:var(--green-700)}
.field[aria-invalid="true"]{border-color:#9B1C1C;border-width:2px}
.err{color:#9B1C1C;font-size:.85rem;font-weight:600;margin-top:.25rem}