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

@keyframes heroSlideCycle {
  0%    { opacity: 0; transform: scale(1.08) translate(0, 0); }
  5%    { opacity: 1; }
  45%   { opacity: 1; transform: scale(1.16) translate(-1.5%, -1%); }
  50%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* ---------- How It Works: two-step photo sequence ---------- */
.qf-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}
.qf-step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.qf-step img { width: 100%; height: 260px; object-fit: cover; display: block; }
.qf-step-body { padding: 20px 24px 24px; }
.qf-step-index { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-accent); margin: 0 0 6px; }
.qf-step-body h3 { margin: 0 0 6px; font-size: 1.1rem; }
.qf-step-body p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Construction diagram ---------- */
.qf-diagram { margin-top: 32px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; }
.qf-diagram img { max-width: 100%; max-height: 420px; width: auto; height: auto; }
.qf-diagram-caption { margin: 16px 0 0; font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Sizing grid (5 / 15 / 30 / 55 gal) ---------- */
.qf-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 32px;
}
.qf-size-item { background: #fff; padding: 24px 20px; text-align: center; }
.qf-size-item .qf-size-label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 6px; }
.qf-size-item .qf-size-name { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.qf-size-item .qf-size-detail { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.qf-size-item .qf-size-detail + .qf-size-detail { margin-top: 4px; }

/* ---------- Spec sheet download ---------- */
.qf-download {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 32px; margin-top: 32px;
}
.qf-download-icon { flex-shrink: 0; width: 44px; height: 44px; color: var(--brand-accent); }
.qf-download-body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.qf-download-body p { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.92rem; }
.btn-quiet { background: var(--brand-charcoal); color: #fff; }
.btn-quiet:hover { background: #000; transform: translateY(-2px); }

@media (max-width: 900px) {
  .qf-steps { grid-template-columns: 1fr; }
  .qf-size-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .qf-download { flex-direction: column; align-items: flex-start; }
}