/* Homepage only, on top of /style.css. */

/* Falling paper sits above section backgrounds but below their content. main has no stacking context
   of its own, so section backgrounds (z 0), this canvas (z 1) and content (z 2+) can interleave. */
#paper-fall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.band > .wrap, .pricing > .wrap, .locations > .wrap { position: relative; z-index: 2; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 2; padding-top: 28px; }
.hero-copy { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px 40px; align-items: end; }
h1 { font: 800 clamp(44px, 5.1vw, 66px)/.95 var(--display); text-transform: uppercase; }
h1 em { font-style: normal; color: var(--red); display: block; }
.lede { max-width: 42ch; font-size: 19px; color: var(--steel); margin-top: 16px; }

/* Hours and both stores share one sheet of paper, matching the sheets further down the page */
.visit {
  background: var(--sheet) repeating-linear-gradient(180deg, transparent 0 27px, rgba(23, 25, 28, .035) 27px 28px);
  border: 1px solid var(--rule); padding: 18px 20px; box-shadow: 0 18px 30px -24px rgba(23, 25, 28, .45);
}
/* The hours echo the headline: black, then a larger line in red */
.hours dt { font: 600 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hours dd { font: 800 27px/1.05 var(--display); text-transform: uppercase; margin-top: 5px; }
.hours dd.time { font-size: 48px; line-height: 1; margin-top: 1px; color: var(--red); }
.hours dd.closed { font: 400 13px/1.45 var(--body); text-transform: none; color: var(--muted); margin-top: 6px; }
.visit .hours { display: block; }
.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--rule); }
.store { display: grid; gap: 2px; align-content: start; }
.store-name { font: 800 25px/1.1 var(--display); text-transform: uppercase; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; justify-self: start; }
.store-name:hover { color: var(--red); }
.store address { font-size: 14px; line-height: 1.35; color: var(--steel); }
.store address a { text-decoration-color: var(--red); text-underline-offset: 3px; }
.store address a:hover { color: var(--red); }
.store-tel { font-weight: 600; font-size: 15px; white-space: nowrap; padding-block: 5px 2px; justify-self: start; text-decoration-color: var(--red); text-underline-offset: 3px; }
@media (max-width: 900px) { .hero-copy { grid-template-columns: minmax(0, 1fr); } h1 { font-size: clamp(38px, 10.4vw, 66px); } }

/* 16:9 clip on larger screens; phones get a 4:3 clip cropped in on the sheet so the wording stays readable. */
.hero-visual {
  position: relative; z-index: 1; width: min(100%, 1120px); margin: 6px auto 0; aspect-ratio: 16 / 9; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 3%, #000 15%, #000 90%, transparent 100%), linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 3%, #000 15%, #000 90%, transparent 100%), linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.hero-frame { position: absolute; inset: 0; }
#hero-poster, #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#hero-canvas { display: block; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); white-space: nowrap;
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: rgba(23, 25, 28, .72); padding: 7px 12px; border-radius: 99px; transition: opacity .3s;
}
@media (max-width: 760px) {
  .hero-visual {
    aspect-ratio: 4 / 3; margin-top: 4px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%), linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%), linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}

/* ---------- sheets coming out of the shredder ---------- */
.promises { position: relative; z-index: 3; margin-top: -30px; padding-block: 0 84px; }
.sheets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sheet {
  background: var(--sheet) repeating-linear-gradient(180deg, transparent 0 27px, rgba(23, 25, 28, .035) 27px 28px);
  border: 1px solid var(--rule); border-top: 0; padding: 30px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 18px 30px -24px rgba(23, 25, 28, .45);
}
.tag { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sheet h2 { font: 800 clamp(30px, 2.6vw, 34px)/.98 var(--display); text-transform: uppercase; margin: 12px 0; }
.sheet h2.red { color: var(--red); }
.sheet p { color: var(--steel); font-size: 16px; }
.sheet .btn { margin-top: auto; }
.sheet p:has(+ .btn) { margin-bottom: 16px; }
@media (max-width: 1080px) { .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sheets { grid-template-columns: minmax(0, 1fr); gap: 14px; } .promises { padding-bottom: 56px; } }

/* ---------- section basics ---------- */
.more { margin-top: 24px; }
.text-link { color: var(--red-deep); font-weight: 600; text-underline-offset: 3px; }

/* ---------- what we shred ---------- */
.band { position: relative; padding-block: 72px 36px; }
.band .bins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .band .bins { grid-template-columns: repeat(2, minmax(0, 1fr)); } .band .bin.no { grid-column: 1 / -1; } }
.band::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--band); }

/* ---------- rates ---------- */
.pricing { padding-block: 100px 64px; position: relative; }
.price-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.answers dl > div { padding-block: 16px; border-top: 1px solid var(--rule); }
.answers dl > div:last-child { border-bottom: 1px solid var(--rule); }
.answers dt { font: 700 clamp(22px, 2.2vw, 27px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.answers dd { color: var(--steel); margin-top: 4px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .pricing { padding-block: 84px 48px; } }

/* ---------- locations ---------- */
.locations { padding-block: 48px 72px; position: relative; }
.loc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.loc-body { padding: 22px 24px 24px; display: grid; gap: 8px; }
.loc h3 { font: 800 46px/.95 var(--display); text-transform: uppercase; }
.loc h3 a { text-decoration-thickness: 3px; text-underline-offset: 4px; }
.loc address { font-size: 18px; line-height: 1.4; }
.loc-tel { font-weight: 600; font-size: 18px; justify-self: start; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---------- service area and footer ---------- */
.service-area { padding-block: 44px; position: relative; z-index: 3; background: var(--paper); }
.service-area p:first-child { color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { transition: none; }
}