/* ---------- Tank Heating — page-specific styles ----------
   Relies on ../styles.css for :root variables, reset, typography, banner,
   buttons, .section/.kicker patterns, and the shared subdomain content
   components (spec-grid, case-study-block, content-gallery, comparison-table,
   etc). Only the hero-slide timing (tuned to this page's 4 photos) and the
   decision-criteria grid are page-specific. */

/* 4-slide rotation, 10s each — same pacing as the other subdomain heroes */
.hero-slide {
  animation: heroSlideCycle 40s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 10s; }
.hero-slide:nth-child(3) { animation-delay: 20s; }
.hero-slide:nth-child(4) { animation-delay: 30s; }

@keyframes heroSlideCycle {
  0%     { opacity: 0; transform: scale(1.08) translate(0, 0); }
  2.5%   { opacity: 1; }
  22.5%  { opacity: 1; transform: scale(1.16) translate(-1.5%, -1%); }
  25%    { opacity: 0; }
  100%   { opacity: 0; }
}

/* ---------- Decision criteria ---------- */
.criteria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-top: 32px; }
.criteria-item { background: #fff; padding: 26px 28px; }
.criteria-item h3 { font-size: 0.98rem; margin: 0 0 8px; }
.criteria-item p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; line-height: 1.55; max-width: none; }

@media (max-width: 900px) {
  .criteria-grid { grid-template-columns: 1fr; }
}