/* Header logo */
.site-logo img { display: block; height: 44px; width: auto; max-width: 100%; }

/* Hero */
.hero {
  padding: 120px 0;
  background-color: var(--color-header-dark);
  background-image:
    linear-gradient(90deg, rgba(58, 77, 96, 0.55) 0%, rgba(58, 77, 96, 0.2) 55%, rgba(58, 77, 96, 0) 100%),
    url('/resources/6ab6b7b453ee44f56b398022.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.hero .card { max-width: 560px; background: rgba(203, 216, 226, 0.94); }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.hero .lead { margin-bottom: 28px; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Section headings */
.section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.section-head p { color: var(--color-text-muted); }

/* Problem statement */
.statement .card { text-align: center; }
.statement .card h2 { max-width: 900px; margin: 0 auto 16px; }
.statement .card p { max-width: 720px; margin: 0 auto; }

/* Card grids */
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid .card { padding: 32px; }
.grid .card h3 { margin-bottom: 10px; }
.grid .card p:last-child, .grid .card ul:last-child { margin-bottom: 0; }
.task-list { margin: 0; padding-left: 1.2em; }
.task-list li { margin-bottom: 6px; }

/* Numbered steps */
.step-grid { counter-reset: step; }
.step-grid .card { position: relative; padding-top: 72px; }
.step-grid .card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 24px; left: 32px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-on-dark); font-weight: 600;
}

/* Estimator teaser */
.teaser .card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.teaser .card ul { margin: 0; padding-left: 1.2em; }

@media (max-width: 760px) {
  .site-logo img { height: 34px; }
  .hero { padding: 48px 0 220px; background-position: 70% center; }
  .teaser .card { grid-template-columns: 1fr; }
}