/* =========================================================
   Home — layout A, mobile-first (decision web-026)
   hero (text → image) · what we supply · how we work · who we serve
   ========================================================= */

/* ---------- 1. Hero: text first, image second ---------- */
.hero {
  padding-block: clamp(1.75rem, 1rem + 3.5vw, 4.5rem) clamp(1rem, .25rem + 2.5vw, 2.5rem);
  background: linear-gradient(180deg, var(--c-bg-soft) 0, #fff 78%);
}
.hero__grid { display: grid; gap: var(--sp-6); }
.hero__title { margin-top: var(--sp-4); max-width: 18ch; }
.hero__lead { margin-top: var(--sp-5); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__visual { position: relative; margin: 0; }
/* offset orange block behind the photo: depth without a second image */
.hero__visual::before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 42%;
  height: 46%;
  background: var(--c-orange);
  border-radius: var(--radius-lg);
}
.hero__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 70%;
  border-radius: var(--radius-lg);
  background: var(--c-bg-soft);
}

@media (max-width: 559px) {
  .hero__actions .btn { flex: 1 1 100%; }
}
/* below 900px the fixed WhatsApp button sits over the photo's bottom-right: keep the accent on the left */
@media (max-width: 899px) {
  .hero__visual::before { right: auto; left: -10px; }
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  }
  .hero__img { aspect-ratio: 5 / 4; }
  .hero__visual::before { right: -16px; bottom: -16px; }
}

/* ---------- 2. What we supply ---------- */
.caps__grid {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.cap {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  height: 100%;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--c-card-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cap__icon { grid-row: span 2; }
.cap__text { font-size: var(--fs-4); line-height: 1.5; color: var(--c-muted); }
/* phones: 2x2 icon + name tiles; the one-line descriptions start at 600px */
@media (max-width: 599px) {
  .caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap { grid-template-columns: 1fr; align-content: space-between; row-gap: var(--sp-3); padding: var(--sp-4); }
  .cap__icon { grid-row: auto; }
  .cap__title { font-size: var(--fs-4); }
  .cap__text { display: none; }
}
.cap:hover { border-color: var(--c-orange); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.cap:hover .cap__title { color: var(--c-orange-text); }
@media (min-width: 600px) {
  .caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}
@media (min-width: 1100px) {
  .caps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cap { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); row-gap: var(--sp-2); }
  .cap__icon { grid-row: auto; margin-bottom: var(--sp-4); }
}

/* ---------- 3. How we work: numbered list, image on wide screens only ---------- */
.how__grid { display: grid; gap: var(--sp-7); }
.how__visual { display: none; margin: 0; }
.how__list { margin-top: var(--sp-6); border-top: 1px solid var(--c-card-line); }
.how__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-card-line);
}
.how__num {
  grid-row: span 2;
  padding-top: .2rem;
  font-size: var(--fs-5);
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--c-orange-text);
}
.how__text { font-size: var(--fs-4); line-height: 1.5; color: var(--c-muted); }
@media (min-width: 900px) {
  .how__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .how__visual { display: block; }
  .how__item { padding-block: var(--sp-5); }
  .how__img { width: 100%; height: auto; border-radius: var(--radius-lg); }
}

/* ---------- 4. Who we serve (list styles: .audience-grid in site.css) ---------- */
.serve__more { margin-top: var(--sp-6); }
@media (max-width: 599px) { .serve__more { margin-top: var(--sp-5); } }