/* Lummele Home Improvement — global styles.
   Extracted from the design's inline <style> so all four pages share one
   cached file. Component-level styling lives as inline styles in src/App.jsx. */

html, body { margin:0; padding:0; background:#F7F4EE; }
body { font-family:'IBM Plex Sans', system-ui, sans-serif; color:#1B1A18; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:#B23F1C; text-decoration:none; }
/* hover must raise contrast, not drop it — #DE5327 would take this to 3.56:1 */
a:hover { color:#8F2F12; text-decoration:underline; }

/* announced to screen readers, invisible on screen */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
button { font-family:inherit; cursor:pointer; }
input, textarea, select { font-family:inherit; }
input:focus, textarea:focus { border-color:#DE5327 !important; }

/* Keyboard focus. Two-tone so it stays visible on every surface the site uses —
   paper, panel, ink, and the orange CTA band (where a plain orange ring would
   be invisible against its own background). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:3px solid #1B1A18; outline-offset:2px; border-radius:2px;
  box-shadow:0 0 0 6px rgba(247,244,238,0.95);
}
/* on the dark sections, invert it */
.btn-black:focus-visible, .footer-link:focus-visible, .footer-phone:focus-visible {
  outline-color:#F7F4EE; box-shadow:0 0 0 6px rgba(27,26,24,0.95);
}

/* skip link */
.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#1B1A18; color:#F7F4EE; padding:12px 18px; border-radius:0 0 3px 0;
  font-weight:600; font-size:15px;
}
.skip:focus { left:0; text-decoration:none; color:#F7F4EE; }

/* hover states */
.nav-link:hover { background:#EAE4D8; color:#1B1A18 !important; text-decoration:none; }
.nav-link[aria-current="page"] { background:#EAE4D8; color:#1B1A18 !important; }
.btn-dark:hover { background:#C7451D !important; color:#fff !important; text-decoration:none; }
/* the eyebrow label inside a dark button is #F08A5D — 1.58:1 once the button
   turns orange on hover, so it has to follow the button */
.btn-dark:hover span { color:#fff !important; }
.btn-black:hover { background:#000 !important; color:#fff !important; text-decoration:none; }
.btn-orange:hover { background:#B23F1C !important; color:#fff !important; text-decoration:none; }
.btn-outline:hover { background:#1B1A18 !important; color:#F7F4EE !important; text-decoration:none; }
.btn-ghost:hover { background:#fff !important; color:#DE5327 !important; text-decoration:none; }
.tile:hover { background:#EFEADF !important; }
.chip:hover { border-color:#DE5327 !important; color:#B23F1C !important; }
.footer-link:hover { color:#F7F4EE !important; text-decoration:none; }
.footer-phone:hover { color:#DE5327 !important; text-decoration:none; }
.owner-link:hover { color:#DE5327 !important; }

/* responsive */
@media (max-width: 1000px) {
  .grid-hero, .grid-bio, .grid-2 { grid-template-columns:1fr !important; gap:36px !important; }
  .grid-4 { grid-template-columns:repeat(2,1fr) !important; }
  .grid-3 { grid-template-columns:1fr !important; }
  .grid-foot { grid-template-columns:1fr 1fr !important; }
  .promise-card { position:static !important; max-width:none !important; margin-top:14px; left:auto !important; bottom:auto !important; }
  .svc-row { grid-template-columns:1fr !important; gap:14px !important; }
  .h-hero { font-size:60px !important; }
  .h-page { font-size:44px !important; }
  .h-sec { font-size:34px !important; }
  .cta-band { padding:40px 28px !important; }
}
@media (max-width: 640px) {
  .grid-4, .grid-foot { grid-template-columns:1fr !important; }
  .h-hero { font-size:48px !important; }
  .h-page { font-size:36px !important; }
  .grid-bio { padding:26px !important; }
  .pricing-box { padding:28px !important; }

  /* On a 360px phone the eyebrow bar wrapped to four lines and the header to
     three, eating ~380px before any content. Tighten both, and never let the
     phone number break mid-number. */
  .eyebrow { font-size:10.5px !important; gap:6px 12px !important; padding:7px 14px !important; }
  .eyebrow .sep { display:none !important; }
  .header-inner { padding:10px 16px !important; gap:10px !important; }
  .nav-link { padding:8px 9px !important; font-size:14px !important; }
  .header-phone { margin-left:0 !important; padding:10px 13px !important; white-space:nowrap; }
}

/* motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}