/* ============================================================
   INSPIRATION — Uqesh (materials). 1:1 with R15r9x. Fluid / rem. Light.
   ============================================================ */

/* Hero */
.mip-hero{ min-height:25rem; display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center; }
.mip-hero-body{ display:flex; flex-direction:column; gap:0.75rem; padding-block:0 2.75rem; max-width:40rem; }
.mip-crumb{ font-family:var(--font-display); font-weight:700; font-size:0.719rem; letter-spacing:.1em; color:var(--text-secondary); margin:0; }
.mip-title{ font-family:var(--font-display); font-weight:800; font-size:3.25rem; letter-spacing:-.01em; line-height:1; color:var(--text-primary); margin:0; }
.mip-sub{ font-size:0.9375rem; line-height:1.5; color:var(--text-secondary); max-width:34rem; margin:0; }
.mip-hero-cap{ font-family:var(--font-display); font-weight:700; font-size:0.656rem; letter-spacing:.12em; color:var(--text-secondary); margin:0; }

/* Sections */
.mip-sec{ display:flex; flex-direction:column; gap:1.25rem; }
.mip-pool{ padding-block:3.5rem 3rem; }
.mip-drive{ padding-block:1.5rem 3rem; }
.mip-comm{ padding-block:1.5rem 3.5rem; }
.mip-flake{ padding-block:3.5rem; }
.mip-ba-sec{ background:var(--surface); }
.mip-ba-sec .mip-sec{ padding-block:3.25rem; }

.mip-hdr{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mip-hdr-2{ align-items:flex-end; }
.mip-hdr-txt{ display:flex; flex-direction:column; gap:0.5rem; }
.mip-hdr-sub{ font-size:0.844rem; color:var(--text-secondary); margin:0; }
.mip-h2{ font-family:var(--font-display); font-weight:800; font-size:1.375rem; color:var(--text-primary); margin:0; }
.mip-hdr-l{ font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.05em; color:var(--text-primary); white-space:nowrap; }
a.mip-hdr-l:hover{ color:var(--brand); }

/* Grids + cards */
.mip-grid{ display:grid; gap:1.125rem; }
.mip-grid-2{ grid-template-columns:repeat(2,1fr); }
.mip-grid-3{ grid-template-columns:repeat(3,1fr); }
.mip-grid-4{ grid-template-columns:repeat(4,1fr); }
.mip-pool-row{ display:grid; grid-template-columns:1fr 32.5rem; gap:1.125rem; }
.mip-card{ display:flex; flex-direction:column; gap:0.625rem; }
.mip-img{ display:block; background-size:cover; background-position:center; border-radius:0.25rem; }
.mip-cap{ font-family:var(--font-display); font-weight:600; font-size:0.719rem; letter-spacing:.04em; color:var(--text-secondary); }
.mip-pool .mip-img{ height:25rem; }
.mip-drive .mip-img{ height:15.625rem; }
.mip-comm .mip-img{ height:20rem; }
.mip-flake .mip-img{ height:20rem; }

/* Before / after */
.mip-ba-img{ position:relative; display:block; height:23.75rem; background-size:cover; background-position:center; border-radius:0.25rem; }
.mip-chip{ position:absolute; top:0.875rem; left:0.875rem; background:#10130FD0; color:#fff; font-family:var(--font-display); font-weight:800; font-size:0.656rem; letter-spacing:.15em; padding:0.375rem 0.75rem; border-radius:0.1875rem; }

/* CTA */
.mip-cta{ display:flex; flex-direction:column; align-items:center; gap:1.125rem; background:#E0E2DD; padding:4rem 3rem; text-align:center; }
.mip-cta-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.1em; color:var(--text-secondary); margin:0; }
.mip-cta-h{ font-family:var(--font-display); font-weight:800; font-size:1.875rem; color:var(--text-primary); max-width:40rem; margin:0; }
.mip-cta-btn{ margin-top:0.5rem; }

/* Responsive */
@media (max-width:1000px){
  .mip-title{ font-size:2.5rem; }
  .mip-grid-4{ grid-template-columns:repeat(2,1fr); }
  .mip-grid-3{ grid-template-columns:repeat(2,1fr); }
  .mip-pool-row{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .mip-grid-2, .mip-grid-3{ grid-template-columns:1fr; }
  .mip-hdr, .mip-hdr-2{ flex-direction:column; align-items:flex-start; gap:0.5rem; }
}