/* Jay's Handy Services demo: shapes, pegboard, hazard tape, to-do list, motion */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Hero angled bottom edge */
.hero-cut { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.hero-stroke { text-shadow: 0 6px 30px rgba(0,0,0,.35); }

/* Hazard tape: mustard center with black and mustard stripes along both edges */
.hazard {
  background-color: #f7b928;
  background-image:
    repeating-linear-gradient(-45deg, #121417 0 14px, #f7b928 14px 28px),
    repeating-linear-gradient(-45deg, #121417 0 14px, #f7b928 14px 28px);
  background-size: 100% 12px, 100% 12px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}
footer .hazard { background-size: 100% 100%; background-image: repeating-linear-gradient(-45deg, #121417 0 14px, #f7b928 14px 28px); }

/* Marquee */
.marquee { display: flex; width: max-content; animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Pegboard: saturated brick red with punched holes */
.pegboard {
  background-color: #c42e18;
  background-image:
    radial-gradient(circle at center, rgba(70,12,4,.55) 0 3.5px, transparent 4.5px),
    linear-gradient(180deg, #d0331b 0%, #b2280f 100%);
  background-size: 34px 34px, 100% 100%;
}
.cut-both { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.cut-top { clip-path: polygon(0 0, 100% 9%, 100% 100%, 0 100%); }

.outline-type { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.2); }
.outline-type-dark { color: transparent; -webkit-text-stroke: 1.5px rgba(247,185,40,.35); }

/* Honey-do list: lined notepad pinned to the pegboard */
.todo {
  background-color: #fffaf0;
  background-image: repeating-linear-gradient(180deg, transparent 0 39px, rgba(29,71,196,.18) 39px 40px);
  background-position: 0 76px;
  padding: 2rem 1.75rem 1.5rem 2.25rem;
  box-shadow: 0 30px 60px -20px rgba(40,6,0,.55), 0 2px 0 rgba(0,0,0,.08);
  border-left: 3px solid rgba(224,60,36,.35);
}
.todo-pin { position: absolute; top: -12px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 9999px; background: radial-gradient(circle at 35% 35%, #ffd36b, #e0a00f 60%, #8a5f00); box-shadow: 0 4px 6px rgba(0,0,0,.35); }
.todo li { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 40px; }
.todo li::after { content: ''; position: absolute; left: 2.1rem; right: 0; top: 50%; height: 2px; background: #c42e18; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.todo-box { position: relative; flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid #121417; border-radius: 3px; }
.todo-box::after { content: ''; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px; border: solid #c42e18; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.todo.is-done li::after { transform: scaleX(1); }
.todo.is-done .todo-box::after { transform: rotate(45deg) scale(1); }
.todo li:nth-child(1)::after, .todo li:nth-child(1) .todo-box::after { transition-delay: .3s; }
.todo li:nth-child(2)::after, .todo li:nth-child(2) .todo-box::after { transition-delay: .8s; }
.todo li:nth-child(3)::after, .todo li:nth-child(3) .todo-box::after { transition-delay: 1.3s; }
.todo li:nth-child(4)::after, .todo li:nth-child(4) .todo-box::after { transition-delay: 1.8s; }
.todo li:nth-child(5)::after, .todo li:nth-child(5) .todo-box::after { transition-delay: 2.3s; }

/* Numbered service rows */
.list-row { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: center; padding: 2rem 0; border-bottom: 1px solid #c8b693; }
.row-num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .9rem; color: #c42e18; align-self: start; padding-top: .5rem; }
.row-title { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; text-transform: uppercase; font-size: 2.6rem; line-height: .9; color: #121417; transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s; }
.row-copy { margin-top: .75rem; font-size: 1rem; color: #3d434b; max-width: 34rem; }
.row-photo { display: none; width: 11rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.row-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.list-row:hover .row-photo img { transform: scale(1.1); }
.list-row:hover .row-title { transform: translateX(10px); color: #c42e18; }
@media (min-width: 640px) {
  .list-row { grid-template-columns: auto 1fr auto; column-gap: 2rem; padding: 2.5rem 0; }
  .row-title { font-size: 3.75rem; }
  .row-copy { font-size: 1.125rem; }
  .row-photo { display: block; }
}
@media (min-width: 1024px) { .row-title { font-size: 4.25rem; } .row-photo { width: 12rem; } }

/* Timeline dots */
.step-dot { position: absolute; left: -2.5rem; top: .1rem; width: 2rem; height: 2rem; border-radius: 9999px; background: #e03c24; color: #fff; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .85rem; display: grid; place-items: center; }
@media (min-width: 640px) { .step-dot { left: -3.5rem; width: 2.5rem; height: 2.5rem; } }

/* Reviews strip */
.review-strip { scrollbar-width: thin; scrollbar-color: rgba(196,46,24,.4) transparent; }
.review-quote { scroll-snap-align: start; flex: 0 0 min(85vw, 400px); display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 2rem; background: #fff; border-top: 6px solid #121417; box-shadow: 0 20px 40px -24px rgba(18,20,23,.35); }
.review-quote p { font-size: 1.15rem; line-height: 1.6; color: #1b1e22; }
.review-quote p::before { content: '\201C'; display: block; font-family: "Big Shoulders Display", Impact, sans-serif; font-size: 4.5rem; line-height: .6; font-weight: 900; color: #e03c24; margin-bottom: .6rem; }
.review-quote footer { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600; color: #3d434b; }
.review-tag { font-family: "IBM Plex Mono", monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; padding: .25rem .5rem; background: #f7b928; color: #121417; }
.review-quote--dark { background: #121417; border-top-color: #f7b928; }
.review-quote--dark p, .review-quote--dark footer { color: #f1f1f1; }
.review-quote--red { background: #c42e18; border-top-color: #121417; }
.review-quote--red p, .review-quote--red footer { color: #fff; }
.review-quote--red p::before { color: #ffd36b; }

/* Frosted glass panels (light background recipe) */
.glass-panel { position: relative; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 32px -4px rgba(118,27,14,.16); }
.glass-sheen { pointer-events: none; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.3), transparent); mix-blend-mode: overlay; }
.form-label { display: block; font-size: .875rem; font-weight: 600; color: #121417; }
.form-field { margin-top: .5rem; display: block; width: 100%; min-height: 3rem; border-radius: .5rem; border: 1px solid rgba(18,20,23,.15); background: rgba(255,255,255,.85); padding: .75rem 1rem; color: #121417; font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.form-field:focus { border-color: #e03c24; box-shadow: 0 0 0 3px rgba(224,60,36,.25); }
.form-field::placeholder { color: rgba(61,67,75,.55); }
.chip { border-radius: 9999px; background: rgba(196,46,24,.1); color: #9e2412; padding: .25rem .75rem; font-size: .75rem; font-weight: 600; }

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

/* Reveal on scroll (only when JS runs) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.hero-in { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-in-2 { animation-delay: .12s; }
.hero-in-3 { animation-delay: .24s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(30px); } }

.img-zoom img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee, .hero-in { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .row-photo img, .row-title, .img-zoom img, .todo li::after, .todo-box::after { transition: none !important; }
  [data-parallax] { transform: none !important; }
}

/* Reviews strip side padding lines the first quote up with the page container */
.review-strip { padding-left: 1rem; padding-right: 1rem; scroll-padding-left: 1rem; }
@media (min-width: 640px) { .review-strip { padding-left: 1.5rem; padding-right: 1.5rem; scroll-padding-left: 1.5rem; } }
@media (min-width: 1280px) { .review-strip { padding-left: calc((100vw - 80rem) / 2 + 1.5rem); scroll-padding-left: calc((100vw - 80rem) / 2 + 1.5rem); } }