/* =========================================================
   IMPACT PAGE
   Built from the "Impact page web" design (Main.dc.html, 1440px
   artboard): purple hero + approach, stats strip, a growable
   case-study grid, archive list and testimonials. The site header
   and footer come from styles.css; everything here is scoped .im.
   ========================================================= */

.im{
  --im-purple:#8478b8;
  --im-purple-deep:#241d3a;
  --im-red:#d51317;
  --im-gold:#fbbd1a;
  --im-green:#2eb674;
  --im-ink:#1c1a22;
  --im-ink-soft:#5c5566;
  --im-ink-faint:#8b84a3;
  --im-cream:#faf8f5;
  --im-line:#eae7f2;

  font-family:'Poppins',system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--im-ink);
  background:#fff;
}
.im p,
.im h1,
.im h2,
.im h3,
.im figure,
.im blockquote,
.im dl,
.im dd{ margin:0; }
.im img{ display:block; max-width:100%; height:auto; }

.im-wrap{
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(20px, 5vw, 72px);
}

.im-disp{
  font-family:'Archivo Black','Arial Black',system-ui,sans-serif;
  font-weight:400;
}
.im-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.im-gold { color:var(--im-gold); }
.im-red  { color:var(--im-red); }
.im-green{ color:var(--im-green); }
.im-grey { color:#c9c6d3; }
.im-bg-red  { background:var(--im-red); }
.im-bg-green{ background:var(--im-green); }

/* ---------- Hero ---------- */
.im-hero{ background:var(--im-purple); overflow:hidden; }
.im-hero-inner{
  display:flex;
  align-items:flex-end;
  gap:56px;
  padding-top:64px;
}
.im-hero-text{ flex:1; min-width:0; padding:24px 0 72px; }
.im-hero-text .im-kicker{ margin-bottom:22px; }
.im .im-hero-title{
  font-size:clamp(30px, 3.1vw, 44px);
  line-height:1.18;
  color:#fff;
  max-width:560px;
  margin-bottom:22px;
}
.im-hero-sub{
  font-size:16px;
  line-height:1.65;
  color:#e6e2f2;
  max-width:480px;
}
.im-hero-media{ flex:0 1 560px; }

/* ---------- Approach ---------- */
.im-approach{ background:var(--im-purple); }
.im-approach-inner{
  display:flex;
  align-items:center;
  gap:64px;
  padding-top:16px;
  padding-bottom:88px;
}
.im-approach-media{ flex:0 1 460px; }
.im-approach-media img{ border-radius:2px; }
.im-approach-text{ flex:1; min-width:0; }
.im-approach-text .im-kicker{ margin-bottom:18px; }
.im-approach-lead{
  font-size:19px;
  line-height:1.65;
  color:#fff;
  max-width:620px;
}
.im-approach-copy{
  font-size:16px;
  line-height:1.65;
  color:#dcd7ea;
  max-width:600px;
  margin-top:20px !important;
}

/* ---------- Impact at a glance ---------- */
.im-glance{ border-bottom:1px solid var(--im-line); }
.im-glance-inner{
  display:flex;
  align-items:center;
  gap:56px;
  padding-top:56px;
  padding-bottom:56px;
}
.im-glance-head{ flex:0 0 220px; }
.im-glance-head h2{ font-size:22px; line-height:1.35; margin-top:12px; }
.im-stats{ flex:1; display:flex; }
.im-stat{ flex:1; padding:0 32px; border-left:1px solid var(--im-line); }
.im-stat:first-child{ padding-left:0; border-left:0; }
.im-stat:last-child{ padding-right:0; }
.im-stat-num{ font-size:38px; line-height:1.3; color:var(--im-purple); }
.im-stat-num-sm{ font-size:22px; }
.im-stat p{ font-size:13px; color:var(--im-ink-soft); margin-top:6px; }

/* ---------- Case studies ---------- */
.im-cases{ background:var(--im-cream); padding:72px 0 80px; }
.im-cases-head{ max-width:720px; margin-bottom:36px; }
.im-cases-head .im-kicker{ margin-bottom:16px; }
.im-cases-head h2{ font-size:clamp(24px, 2.3vw, 32px); line-height:1.28; margin-bottom:16px; }
.im-cases-head p:last-child{ font-size:15px; line-height:1.65; color:var(--im-ink-soft); }

.im-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.im-chip{
  font:600 13px/1 'Poppins',system-ui,sans-serif;
  padding:9px 18px;
  border-radius:100px;
  border:1.5px solid var(--im-line);
  background:transparent;
  color:var(--im-ink-soft);
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.im-chip:hover{ border-color:#cfc9e0; color:var(--im-ink); }
.im-chip.is-active{ background:var(--im-ink); border-color:var(--im-ink); color:#fff; }
.im-chip:focus-visible{ outline:2px solid var(--im-purple); outline-offset:2px; }

.im-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.im-card{ background:#fff; border:1px solid var(--im-line); overflow:hidden; }
.im-card-media{
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--im-purple-deep);
}
/* A YouTube <iframe> dropped in here fills the 16:9 box. */
.im-card-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.im-tag{
  position:absolute;
  top:14px;
  left:14px;
  z-index:1;
  padding:5px 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
}
.im-play{
  position:absolute;
  top:50%;
  left:50%;
  width:56px;
  height:56px;
  margin:-28px 0 0 -28px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
}
.im-play svg{ margin-left:3px; }
.im-media-note{
  position:absolute;
  left:16px;
  bottom:14px;
  font-size:11px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#e2e2e2;
}
.im-card-body{ padding:26px 26px 28px; }
.im-card-body h3{ font-size:22px; margin-bottom:4px; }
.im-card-sub{ font-size:13px; font-weight:600; margin-bottom:14px !important; }
.im-card-copy{ font-size:13.5px; line-height:1.6; color:var(--im-ink-soft); margin-bottom:18px !important; }
.im-card-stats{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px !important; }
.im-card-stats dt{ font-size:19px; }
.im-card-stats dd{ font-size:11px; color:var(--im-ink-faint); }
.im-card-films{ font-size:12px; line-height:1.5; color:var(--im-ink-faint); margin-bottom:20px !important; }
.im-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:4px;
  border-bottom:1.5px solid var(--im-ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--im-ink);
  text-decoration:none;
  transition:opacity .2s;
}
.im-link:hover{ opacity:.7; }

.im-card-ghost{
  border:1.5px dashed #d8d3e6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 28px;
  text-align:center;
}
.im-ghost-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1.5px solid #c9c2dd;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}
.im-ghost-title{ font-size:14px; font-weight:700; color:var(--im-ink-soft); margin-bottom:8px !important; }
.im-ghost-copy{ font-size:12.5px; line-height:1.6; color:var(--im-ink-faint); }

/* ---------- Archive ---------- */
.im-archive{ border-bottom:1px solid var(--im-line); }
.im-archive-inner{
  display:flex;
  gap:64px;
  padding-top:72px;
  padding-bottom:72px;
}
.im-archive-head{ flex:0 0 300px; }
.im-archive-head .im-kicker{ margin-bottom:14px; }
.im-archive-head h2{ font-size:24px; line-height:1.35; }
.im-archive-list{ flex:1; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--im-line); }
.im-archive-list li{
  display:flex;
  gap:20px;
  padding:18px 0;
  border-top:1px solid var(--im-line);
}
.im-archive-list strong{ flex:0 0 240px; font-size:14px; font-weight:700; }
.im-archive-list strong a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.im-archive-list p{ flex:1; font-size:13.5px; line-height:1.6; color:var(--im-ink-soft); }

/* ---------- Voices ---------- */
.im-voices{ background:var(--im-purple-deep); color:#fff; padding:72px 0; }
.im-voices-kicker{ color:#a8a2ba; margin-bottom:32px !important; }
.im-quotes{ display:flex; gap:48px; }
.im-quotes figure{ flex:1; }
.im-quote-mark{ font-size:30px; line-height:1; margin-bottom:14px; }
.im-quotes blockquote{ font-size:16px; line-height:1.6; margin-bottom:16px; }
.im-quotes figcaption{
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#a8a2ba;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .im-hero-inner{ gap:32px; }
  .im-hero-text{ padding-bottom:48px; }
  .im-hero-media{ flex-basis:44%; }

  .im-approach-inner{ gap:40px; }
  .im-approach-media{ flex-basis:40%; }
  .im-approach-lead{ font-size:17px; }

  .im-glance-inner{ flex-direction:column; align-items:flex-start; gap:28px; }
  .im-glance-head{ flex:none; }
  .im-stats{ width:100%; }

  .im-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .im-archive-inner{ flex-direction:column; gap:28px; }
  .im-archive-head{ flex:none; }
  .im-archive-list strong{ flex-basis:200px; }

  .im-quotes{ gap:32px; }
}

/* ---------- Phone ---------- */
@media (max-width:767px){
  .im-hero-inner{ flex-direction:column; align-items:stretch; gap:0; padding-top:48px; }
  .im-hero-text{ padding:0 0 32px; }
  .im-hero-media{ flex:none; max-width:420px; margin-left:auto; }

  .im-approach-inner{ flex-direction:column; align-items:stretch; gap:32px; padding-top:48px; padding-bottom:56px; }
  .im-approach-media{ flex:none; max-width:360px; }

  .im-stats{ flex-direction:column; gap:20px; }
  .im-stat,
  .im-stat:first-child{ padding:0 0 20px; border-left:0; border-bottom:1px solid var(--im-line); }
  .im-stat:last-child{ padding-bottom:0; border-bottom:0; }

  .im-cases{ padding:56px 0 64px; }
  .im-grid{ grid-template-columns:minmax(0, 1fr); }
  .im-card-ghost{ padding:32px 24px; }

  .im-archive-inner{ padding-top:56px; padding-bottom:56px; }
  .im-archive-list li{ flex-direction:column; gap:6px; }
  .im-archive-list strong{ flex:none; }

  .im-voices{ padding:56px 0; }
  .im-quotes{ flex-direction:column; gap:36px; }
}