/* Keep category photo paths outside the page markup for reliable hosting. */
.category-card[data-filter="decks"] { --photo: url("assets/photos/deck-main.jpg"); }
.category-card[data-filter="kitchens"] { --photo: url("assets/photos/kitchen-main.jpg"); }
.category-card[data-filter="bathrooms"] { --photo: url("assets/photos/bathroom-main.jpg"); }
.category-card[data-filter="miscellaneous"] { --photo: url("assets/photos/miscellaneous-main.avif"); }

/* Hosted copy of the red diamond-plate background. */
body {
  background-image: linear-gradient(135deg, #5c0509cc 0%, #b5131acc 36%, #e03138c9 52%, #8a0b10cc 72%, #350204d9 100%), url("assets/backgrounds/black-diamond-plate.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* Small section labels stay strong and readable on red steel. */
.eyebrow {
  color: #050505 !important;
  text-shadow: 0 1px 0 #ffffff55;
}

/* Keep the reviews page on the same red diamond-plate surface as home. */
.reviews-page .reviews-section {
  background: transparent;
}

/* Give the review form a friendly Eddie on its right without crowding phones. */
.review-submit-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(220px, 360px);
  align-items: end;
  justify-content: center;
  gap: 26px;
  max-width: 1030px;
  margin: 25px auto 0;
}

.review-submit-layout .review-form {
  width: 100%;
  max-width: none;
  margin: 0;
}

.review-eddie {
  display: block;
  width: 100%;
  max-height: 455px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(8px 10px 8px #0009);
}

@media (max-width: 760px) {
  .review-submit-layout {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .review-eddie {
    width: min(78vw, 320px);
    max-height: 360px;
    justify-self: center;
  }
}

/* Review thank-you page. */
.thank-you-main {
  position: relative;
  min-height: calc(100vh - 152px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 36px 20px 54px;
}

.thank-you-card {
  position: relative;
  z-index: 1;
  width: min(700px, 100%);
  padding: 36px 28px 30px;
  border: 2px solid #111;
  background: #12090be8;
  box-shadow: 11px 11px 0 #050505, 0 0 28px #c9282d80;
  text-align: center;
  overflow: hidden;
}

.thank-you-logo-backdrop {
  position: absolute;
  z-index: 0;
  width: min(70%, 400px);
  left: 50%;
  bottom: -120px;
  transform: translateX(-50%);
  opacity: .30;
  filter: saturate(1.12) contrast(1.1) drop-shadow(0 0 18px #000);
  pointer-events: none;
}

.thank-you-card > :not(.thank-you-logo-backdrop) { position: relative; z-index: 1; }

.thank-you-card h1 {
  margin: 0;
  color: var(--bone);
  font: 400 clamp(3rem, 7vw, 5.8rem)/.95 "Metal Mania", "Oswald", sans-serif;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000;
}

.thank-you-card .eyebrow {
  color: var(--bone) !important;
  text-shadow: 2px 2px 0 #000, 0 0 10px #fff8;
}

.thank-you-card > p:not(.eyebrow) {
  max-width: 520px;
  margin: 18px auto 0;
  line-height: 1.6;
}

.eddie-heart {
  display: block;
  width: min(100%, 430px);
  max-height: 490px;
  margin: 12px auto -30px;
  object-fit: contain;
  filter: drop-shadow(8px 10px 8px #000c);
}

.eddie-floss {
  display: block;
  width: min(100%, 430px);
  max-height: 540px;
  margin: 12px auto -30px;
  object-fit: contain;
  transform-origin: 50% 90%;
  filter: drop-shadow(8px 10px 8px #000a);
  height: 540px;
  animation: none;
  position: relative;
  z-index: 2;
}

@keyframes eddie-floss {
  0% { transform: translateX(-24px) rotate(-3deg) skewX(-1deg); }
  28% { transform: translateX(-7px) rotate(-1deg) skewX(1deg); }
  56% { transform: translateX(25px) rotate(3deg) skewX(1deg); }
  78% { transform: translateX(7px) rotate(1deg) skewX(-1deg); }
  100% { transform: translateX(-24px) rotate(-3deg) skewX(-1deg); }
}

.thank-you-home {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 14px;
  padding: 12px 20px;
  border: 1px solid #3b484a;
  color: #e8e3d8;
  background: linear-gradient(145deg,#252e30,#111718 54%,#080b0c);
  box-shadow: inset 0 1px #ffffff18, 0 2px 4px #000;
  font: 400 1.05rem "Metal Mania", "Oswald", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.thank-you-home:hover { border-color: var(--orange); box-shadow: 0 0 12px #f4762188; }

.confetti { position: fixed; z-index: 50; inset: 0; overflow: hidden; pointer-events: none; }
.confetti span {
  position: absolute;
  top: -10vh;
  left: var(--left);
  width: 48px;
  height: 48px;
  background-image: url("assets/decor/jobsite-tool-sprite-clean.png");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  filter: drop-shadow(2px 3px 2px #000c);
  animation: confetti-fall var(--duration) linear var(--delay) infinite;
}
.tool--hammer { background-position: 0 0; }
.tool--screwdriver { background-position: 33.333% 0; }
.tool--handsaw { background-position: 66.667% 0; }
.tool--wrench { background-position: 100% 0; }
.tool--square { background-position: 0 100%; }
.tool--pencil { background-position: 33.333% 100%; }
.tool--tape { background-position: 66.667% 100%; }
@keyframes confetti-fall { to { transform: translate3d(5vw, 120vh, 0) rotate(var(--spin)); } }

@media (prefers-reduced-motion: reduce) { .confetti span, .eddie-floss { animation: none; } }

@media (max-width: 520px) {
  .thank-you-card { padding-inline: 18px; }
  .eddie-heart { max-height: 385px; }
  .eddie-floss { height: 420px; max-height: 420px; }
}

/* Approved reviews rotate through one clear card at a time. */
.review-carousel { position:relative; display:grid; grid-template-columns:auto minmax(0,720px) auto; align-items:center; gap:16px; max-width:900px; margin:42px auto 0; }
.review-carousel .review-grid { display:block; max-width:none; margin:0; text-align:left; }
.review-carousel .review-grid figure { min-height:245px; margin:0; padding:32px; border-color:#00a9b7; box-shadow:8px 8px 0 #005e67; }
.review-carousel .review-grid figure[hidden] { display:none; }
.review-arrow { width:52px; height:64px; border:1px solid #4a5b5e; color:#f5eee1; background:linear-gradient(145deg,#263134,#101617 60%,#070909); box-shadow:0 3px 6px #000b; cursor:pointer; font-size:2.2rem; line-height:1; transition:transform .18s,border-color .18s,box-shadow .18s; }
.review-arrow:hover { transform:scale(1.06); border-color:#f47621; box-shadow:0 0 13px #f4762177; }
.review-dots { grid-column:1 / -1; display:flex; justify-content:center; gap:9px; margin-top:2px; }
.review-dot { width:11px; height:11px; padding:0; border:1px solid #d6e0de; border-radius:50%; background:#1a2526; cursor:pointer; }
.review-dot[aria-current="true"] { border-color:#f47621; background:#f47621; box-shadow:0 0 8px #f47621; }
@media (max-width:760px) { .review-carousel { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }.review-carousel .review-grid figure { min-height:260px; padding:24px; }.review-arrow { width:39px; height:54px; font-size:1.7rem; } }