/* ============================================================
   TFP SPA — Home page layout
   ============================================================ */

/* ---- HERO (split panel) ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  min-height: 640px;
}
.hero__panel { position: relative; overflow: hidden; }
.hero__panel img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.20); }
.hero__caption {
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(2.5rem, 6vw, 5rem);
  color: var(--c-cream);
  z-index: 2;
}
.hero__caption .eyebrow { color: rgba(252,250,241,0.85); display: block; margin-bottom: var(--sp-3); }
.hero__caption h1 { color: var(--c-cream); font-size: var(--fs-hero); line-height: 1.05; }
.hero__caption .link-underline { display: inline-block; margin-top: var(--sp-5); color: var(--c-cream); }

/* ---- INTRO ---- */
.intro__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.intro__body { padding-top: 0.5rem; }
.intro__body p { max-width: 46ch; }

/* ---- card rows ---- */
.card-row { margin-top: var(--sp-10); }

/* ---- FEATURE SPLIT (image + text) ---- */
.feature-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.feature-split__media { aspect-ratio: 4/5; }
.feature-split__text h2 { margin-block: var(--sp-4) var(--sp-5); }
.feature-split__text .pill-list { margin-top: var(--sp-6); }

/* ---- FULL BLEED ---- */
.full-bleed { height: clamp(360px, 56vh, 620px); overflow: hidden; }
.full-bleed img { width: 100%; height: 128%; object-fit: cover; margin-top: -14%; }

/* ---- LED BY EXPERIENCE ---- */
.led__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.led__text h2 { margin-block: var(--sp-4) var(--sp-5); }
.led__text .steps { margin-top: var(--sp-8); }
.led__media { aspect-ratio: 3/4; }

/* ---- WHY (4 cols, mist band) ---- */
.why__grid { margin-top: var(--sp-10); }

/* ---- STATEMENT (portrait + text) ---- */
.statement__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.statement__media { aspect-ratio: 4/5; }
.statement__text h2 { margin-block: var(--sp-4) var(--sp-5); max-width: 16ch; }
.statement__text .link-underline { margin-top: var(--sp-6); display: inline-block; }

/* ---- READY (cta cards) ---- */
.card--cta .link-underline { margin-top: var(--sp-4); display: inline-block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .hero__panel { height: 70vh; min-height: 460px; }
  .intro__grid,
  .feature-split__grid,
  .led__grid,
  .statement__grid { grid-template-columns: 1fr; }
  .feature-split__media,
  .statement__media,
  .led__media { aspect-ratio: 4/5; order: -1; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid.cols-3,
  .grid.cols-4 { grid-template-columns: 1fr; }
}