/* ============================================================
   Home page - hero, trust strip, services, why, stats, video,
   contact, footer. Motion lives at the bottom of this file.
   ============================================================ */

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  /* one quiet directional wash from the raised navy - no gradient text, no glow */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, var(--navy-900) 55%, var(--navy-800) 100%);
}
.hero .container { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* stretch, not center: the image anchors the right column from the
     headline's cap height down to the CTA baseline (contract FIRST
     VIEWPORT - dashboard imagery at hero weight) */
  align-items: stretch;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem);
}

.hero-copy .lead { margin-top: var(--space-6); max-width: var(--measure-narrow); }
.hero-accent { color: var(--blue-300); }

.hero-secondary {
  color: var(--on-dark-body);
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hairline-dark);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hero-secondary:hover { color: var(--blue-300); border-color: var(--blue-300); text-decoration: none; }

.hero-media { margin: 0; display: flex; }
.hero-media .media-crop { flex: 1; min-height: 20rem; border: 1px solid var(--hairline-dark); }

/* Trust strip inside the hero band */
.trust-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-8) var(--space-12);
  border-top: 1px solid var(--hairline-dark);
}
.trust-item h3 { font-size: 1.0625rem; }
.trust-item p { margin: var(--space-1) 0 0; font-size: var(--small-size); color: var(--on-dark-muted); }

/* ---- Services ---- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.service-card:hover { text-decoration: none; }
.service-card .media-crop { aspect-ratio: 3 / 2; flex-shrink: 0; }
.service-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.service-body h3 { transition: color var(--dur) var(--ease-out); }
.service-body p {
  margin: var(--space-3) 0 var(--space-6);
  font-size: var(--small-size);
  transition: color var(--dur) var(--ease-out);
}
.service-body .arrow-link { margin-top: auto; align-self: flex-start; color: var(--blue-700); transition: color var(--dur) var(--ease-out); }

/* ---- Client challenges and working journey ---- */
.challenge-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.challenge-grid h2 { max-width: 22ch; }
.challenge-list, .journey-list { list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.challenge-list li, .journey-list li { padding-block: var(--space-4); border-top: 1px solid var(--hairline-dark); }
.challenge-list li:last-child, .journey-list li:last-child { border-bottom: 1px solid var(--hairline-dark); }
.journey-list { counter-reset: journey; }
.journey-list li { counter-increment: journey; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-3); }
.journey-list li::before { content: "0" counter(journey); color: var(--gold); font-variant-numeric: tabular-nums; }

/* The client asked for it by name: hover changes the card's colour */
/* The hover flood is shared with .post-card and lives in base.css. */

/* ---- Why Fintellect ---- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.why-item { border-top: 2px solid var(--blue-700); padding-top: var(--space-4); }
.why-item h3 { max-width: 24ch; }
.why-band { padding-bottom: 0; }
.why-photo { margin-top: 4rem; max-height: 480px; }

/* ---- Video band ---- */
.video-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900) 85%);
  display: grid;
  place-content: center;
  gap: var(--space-4);
  justify-items: center;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fallback { margin-top: var(--space-3); font-size: var(--small-size); }

/* ---- Consultation ---- */
.consultation-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.consultation-copy { border-top: 2px solid var(--blue-700); padding-top: var(--space-6); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* a short wide crop below the CTA keeps the imagery promise at 390 */
  .hero-media .media-crop { flex: none; width: 100%; min-height: 0; aspect-ratio: 21 / 9; }
  .trust-strip { grid-template-columns: 1fr; gap: var(--space-6); }
  .services-grid, .why-grid, .challenge-grid, .consultation-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
}