/* Kanes Handyman Service demo styles (Tailwind Play CDN handles utilities) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h1, h2, .svc-t, .rating-num { font-family: Inter, system-ui, sans-serif; }

/* Scroll reveals */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Hero: angled bottom edge and oversized name */
.hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%); }
.hero-name { font-size: clamp(2.4rem, 15vw, 15rem); line-height: .9; letter-spacing: -0.035em; }
@media (max-width: 767px) { .hero-name .hn-1 { font-size: 1.62em; } }
.hero-tag { font-size: clamp(.85rem, 1.5vw, 1.3rem); letter-spacing: .6em; line-height: 1; }

/* Services list */
.svc { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1.75rem 0; border-top: 1px solid rgba(21, 24, 15, .14); }
.svc:last-child { border-bottom: 1px solid rgba(21, 24, 15, .14); }
.svc-n { font-family: Inter, sans-serif; font-weight: 700; font-size: 1rem; color: #4D6505; }
.svc-t { font-weight: 800; font-size: clamp(1.5rem, 3.3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; color: #15180F; transition: color .3s ease, transform .3s ease; }
.svc-d { margin-top: .5rem; font-size: 1rem; color: rgba(21, 24, 15, .64); }
.svc:hover .svc-t { color: #4D6505; transform: translateX(6px); }
@media (max-width: 639px) { .svc { grid-template-columns: 2.5rem 1fr; padding: 1.35rem 0; } }
@media (prefers-reduced-motion: reduce) { .svc:hover .svc-t { transform: none; } }

/* Reviews band: angled top that overlaps the section above */
.band { clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%); }
.rating-num { font-size: clamp(7rem, 30vw, 15rem); line-height: .8; letter-spacing: -0.05em; }

/* Timeline */
.tl { position: relative; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.tl-dot { position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 9999px; background: #CDF23E; box-shadow: 0 0 0 6px rgba(205, 242, 62, .15); }

/* Glass panels (7c) */
.glass { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.62); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 32px -4px rgba(12,14,10,.16); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
.field-l { display: block; font-size: .875rem; font-weight: 700; color: #15180F; }
.field { margin-top: .5rem; display: block; width: 100%; min-height: 3rem; border-radius: 12px; border: 1px solid rgba(21,24,15,.18); background: rgba(255,255,255,.85); padding: .75rem 1rem; color: #15180F; outline: none; transition: border-color .2s, box-shadow .2s; }
.field::placeholder { color: rgba(21,24,15,.42); }
.field:focus { border-color: #6E8C0B; box-shadow: 0 0 0 3px rgba(196,236,42,.35); }

/* Mobile call bar */
.callbar { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }