/* =============================================================
   Kitchen Remodeling page styles - "the showcase"
   Loaded by services/kitchen-remodeling.html after ../css/main.css
   Layout order: editorial hero (no image) > full-bleed image band
   > editorial offering rows > stone band w/ trust checks
   ============================================================= */

/* ---------- 1. Hero ----------
   Was an editorial text-only hero followed by a separate full-bleed image
   band (.kit-band). Both are gone: the page now opens with the shared
   .hero + .hero-service overlay hero from css/main.css, which absorbed
   that band's image. Nothing page-specific is left here. */

/* ---------- 3a. Offerings as editorial rows ---------- */
.kit-rows { display: grid; gap: 4rem; }
@media (min-width: 900px) { .kit-rows { gap: 5.5rem; } }
.kit-row h3 { font-size: 1.375rem; }
.kit-row p { margin-top: .625rem; max-width: 52ch; }
.kit-row img { width: 100%; box-shadow: var(--shadow-card); }

/* ---------- 3b. Stone band: narrow copy + trust checks to its right ----------
   The .draft-bg ambient layer (styled once in css/main.css) sits behind;
   position:relative here + z-index:1 on the container keep content above. */
.kit-stoneband { position: relative; }
@media (min-width: 960px) { .kit-stoneband { padding-block: 88px; } }
.kit-stoneband .container { position: relative; z-index: 1; }
.kit-stone-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .kit-stone-grid { grid-template-columns: 1fr auto; gap: 4rem; }
  .kit-checks { border-left: 1px solid var(--line); padding-left: 3rem; }
}
.kit-stone-copy h3 { font-size: 1.375rem; }
.kit-stone-copy p { margin-top: .625rem; max-width: 44ch; }
.kit-checks { display: flex; flex-direction: column; gap: 1rem; }
.kit-checks .check-item {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 500;
  color: var(--ink);
}
.kit-checks .check-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-700); }