/* Created: 18:10 25-Aug-2026 */
/* Updated: 06:48 26-Aug-2026 — hero min-height -> --svc-hero-h token */
/* /iv-drip-at-home/ — rebuilt. Was 7,265px with 15 dots, three orphan photo bands and
   the 10-therapy menu rendered as 1,806px of identical rows. See _build/render_ivdrip.py. */

.iv-note{color:var(--text-medium)}
.iv-eyebrow{color:var(--text-medium);margin-bottom:10px}
.iv-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* hero — the faces/subject sit high in this frame, so anchor the crop there */
.iv-hero{min-height:var(--svc-hero-h)}
.iv-hero .svc-hero-media img{object-position:50% 42%}
.iv-hero-lede{color:var(--paper-64);margin-top:18px}
@media (max-width:767px){.iv-hero{min-height:var(--svc-hero-h-sm)}}

/* intro — photograph beside the copy, never a band below it */
.iv-intro{padding-block:var(--sec-m) var(--sec-s)}
.iv-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;
  align-items:center}
.iv-split-text .iv-note{margin-top:18px}
.iv-split-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
.iv-split-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:430px;
  object-fit:cover;object-position:50% 42%}

/* the 3-step process */
.iv-process{padding-block:var(--sec-s) var(--sec-m);background:var(--bg-two)}
.iv-process-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;
  align-items:center;margin-top:40px}
.iv-steps{list-style:none;display:grid;gap:16px;padding:0;margin:0}
.iv-step{padding:24px 22px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.iv-step-num{display:block;color:var(--accent);font-family:'IBM Plex Mono',monospace;
  margin-bottom:10px}
.iv-step h3{color:var(--text-strong)}
.iv-step .iv-note{margin-top:8px}
.iv-process-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
.iv-process-media img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:430px;
  object-fit:cover}

/* THE MENU — 10 named therapies, the reason this page exists */
.iv-menu{padding-block:var(--sec-m)}
.iv-menu-cta{display:flex;align-items:center}
/* align-items:start so a short card (Immune Booster) does not stretch to match a long
   one (Liver Detoxification) sitting beside it. */
.iv-cards{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  padding:0;margin:44px 0 0;align-items:start}
.iv-card{position:relative;padding:26px 26px 24px 68px;border-radius:14px;
  background:var(--paper-100);border:1px solid var(--border-faint);
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ),
             border-color .4s ease}
@media (hover:hover){.iv-card:hover{transform:translateY(-3px);
  box-shadow:0 14px 32px var(--ink-8);border-color:var(--teal-32)}}
.iv-card-num{position:absolute;left:24px;top:28px;color:var(--accent);
  font-family:'IBM Plex Mono',monospace}
.iv-card-title{color:var(--text-strong)}
.iv-card .iv-note{margin-top:8px}

/* why choose */
.iv-why{padding-block:var(--sec-s) var(--sec-m);background:var(--bg-two)}
.iv-why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;
  align-items:start}
.iv-why-intro{position:sticky;top:112px}
.iv-why-media{margin:24px 0 0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
.iv-why-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.iv-why-list{list-style:none;display:grid;gap:16px;padding:0;margin:0}
.iv-why-card{padding:24px 24px 22px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.iv-why-card h3{color:var(--text-strong)}
.iv-why-card .iv-note{margin-top:8px}

.iv-cta{padding-block:var(--sec-m)}
.iv-cta-inner .iv-note{margin-top:18px}

@media (max-width:1099px){.iv-cards{grid-template-columns:1fr}}
@media (max-width:899px){
  .iv-split,.iv-process-grid,.iv-why-grid{grid-template-columns:1fr;gap:32px}
  .iv-why-intro{position:static}
  .iv-process-media img{aspect-ratio:16/10;max-height:340px}
}

/* Below 900px this grid collapses to one column and a 16:10 image becomes full-width
   at 562px tall. Capped so no picture dominates a narrow screen. */
@media (max-width:899px){.iv-why-media img{max-height:360px}}