/* Impact360 — model page (מודל IMPACT360) composition. Shared components live in site.css.
   v2 · corporate restraint: a photo hero with the display line as its eyebrow, the model diagram large in a plain
   frosted frame, three equal frosted pillar cards (icon in a navy disc, ruled point lists) and one frosted CTA band.
   One hue (navy / blue), flat fills, no rings, orbs, loupes, glows or colour fields. Nothing moves but the reveals. */

/* ---------------------------------------------------------------- 1 · hero: film window, eyebrow + title + lead */
.mdl-hero .page-hero-window { min-height: clamp(380px, 50vh, 560px); }
.mdl-hero .page-hero-copy { max-width: 48rem; }
.mdl-hero .eyebrow {
  margin-block-end: clamp(14px, 1.6vw, 22px);
  font-size: clamp(13.5px, 1.05vw, 15px); letter-spacing: .16em; color: rgba(255, 255, 255, .92);
}
.mdl-hero .eyebrow::before { width: 30px; background: rgba(255, 255, 255, .72); }
.mdl-hero .page-title { font-size: clamp(40px, 5.4vw, 78px); line-height: 1.04; letter-spacing: -.02em; } /* .mdl-brand: same white */
.mdl-lead-ln { display: block; text-wrap: balance; }
.mdl-hero .page-lead { max-width: 34em; font: 400 clamp(17px, 1.4vw, 21px)/1.6 var(--font-body); color: rgba(255, 255, 255, .92); }

/* ---------------------------------------------------------------- 2 · the model: figure + three pillars */
.mdl { padding-block: clamp(56px, 7vw, 104px) clamp(24px, 3vw, 48px); }

/* the diagram, large, in a plain frosted frame (the PNG has alpha — the frame is its ground) */
.mdl-figure {
  --tint-a: rgba(255, 255, 255, .86); --tint-b: rgba(255, 255, 255, .74); --blur: 20px;
  width: min(100%, 680px); margin: 0 auto clamp(40px, 5vw, 72px);
  padding: clamp(22px, 3.2vw, 48px); border-radius: var(--r-xl);
}
.mdl-diagram { display: block; width: 100%; height: auto; }

/* three equal cards (one grid row: same height by construction) */
.mdl-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.mdl-pillar {
  --tint-a: rgba(255, 255, 255, .8); --tint-b: rgba(255, 255, 255, .66); --blur: 20px;
  gap: 0; padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 34px) clamp(26px, 2.6vw, 36px);
  border-radius: var(--r-lg);
}
/* the icon (a logo, so a disc is fine): the line art knocked to white on a flat navy disc. DOM order stays
   label > icon > text (the source order); the disc is only placed first visually */
.mdl-pillar-icon {
  order: -1; display: grid; place-items: center;
  width: clamp(60px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%;
  margin-block-end: clamp(20px, 2.2vw, 28px);
  background: var(--ink);
}
.mdl-pillar-icon img { width: 60%; height: 60%; object-fit: contain; filter: brightness(0) invert(1); }
.mdl-pillar-title { font: 900 clamp(28px, 2.4vw, 36px)/1.05 var(--font-display); letter-spacing: -.012em; color: var(--ink); }
.mdl-sub { margin-block-start: 8px; font: 600 clamp(16px, 1.2vw, 18px)/1.4 var(--font-body); color: var(--blue); text-wrap: balance; }
.mdl-sub strong { font-weight: inherit; }

/* the points: a ruled list. Numerals only where the source has them (plain blue type, no discs) */
.mdl-points { margin-block-start: clamp(18px, 2vw, 24px); gap: 0; }
.mdl-points li { gap: 12px; padding-block: clamp(12px, 1.2vw, 15px); border-block-start: 1px solid rgba(10, 31, 68, .13); }
.mdl-points li:last-child { padding-block-end: 0; }
.mdl-points .num-badge {
  width: auto; min-width: 1.3em; height: auto; place-items: start; border-radius: 0;
  padding-block-start: 1px; font: 600 15px/1.7 var(--font-display); font-variant-numeric: tabular-nums;
  color: var(--blue); background: none; box-shadow: none;
}
.mdl-points .num-badge--bead { display: none; }
.mdl-points .num-text { padding-block-start: 0; font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.7; color: var(--ink-2); }
.mdl-points strong, .mdl-points .mdl-pt { font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- 3 · closing: one frosted CTA band */
.mdl-close { padding-block: clamp(32px, 4vw, 56px) clamp(72px, 8vw, 120px); }
.mdl-close-plate {
  --tint-a: rgba(255, 255, 255, .84); --tint-b: rgba(255, 255, 255, .72); --blur: 22px;
  max-width: 980px; margin-inline: auto; text-align: center;
  padding: clamp(36px, 5vw, 72px) clamp(22px, 5.4vw, 88px);
  border-radius: var(--r-xl);
}
.mdl-close-copy > p { max-width: 34em; margin-inline: auto; font: 400 clamp(17px, 1.35vw, 20px)/1.7 var(--font-body); color: var(--ink-2); text-wrap: balance; }
.mdl-close-copy > p + p { margin-block-start: .6em; }
.mdl-close-copy .c-brand { color: inherit; }
.mdl-close-copy > p:last-child {
  max-width: 20em; margin-block-start: clamp(20px, 2.4vw, 32px);
  font: 900 clamp(28px, 3vw, 44px)/1.15 var(--font-display); letter-spacing: -.012em; color: var(--ink);
}
.mdl-close-cta { margin-block-start: clamp(24px, 3vw, 36px); display: flex; justify-content: center; }

/* ---------------------------------------------------------------- responsive */
/* one column: the cards are wide and short, so the disc sits beside the label (an inline head) instead of above it */
@media (max-width: 900px) {
  .mdl-pillars { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
  .mdl-pillar {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon sub" "list list";
    column-gap: 18px; align-items: center;
  }
  .mdl-pillar-icon { grid-area: icon; order: 0; margin: 0; width: 64px; }
  .mdl-pillar-title { grid-area: title; align-self: end; }
  .mdl-sub { grid-area: sub; align-self: start; margin-block-start: 4px; }
  .mdl-points { grid-area: list; }
}
@media (max-width: 640px) {
  .mdl { padding-block-start: 52px; }
  .mdl-hero .page-title { font-size: clamp(34px, 9.4vw, 42px); }
  .mdl-figure { padding: 16px; border-radius: 26px; margin-block-end: 32px; }
  .mdl-pillar { padding: 24px 20px 26px; border-radius: 26px; column-gap: 14px; }
  .mdl-pillar-icon { width: 56px; }
  .mdl-pillar-title { font-size: 28px; }
  .mdl-sub { font-size: 16px; }
  .mdl-points .num-text { font-size: 16px; }
  .mdl-close-plate { padding: 32px 20px 30px; border-radius: 26px; }
  .mdl-close-copy > p:last-child { font-size: clamp(26px, 7.4vw, 30px); }
  .mdl-close-cta > .cta-pool, .mdl-close-cta .glass-button-wrap, .mdl-close-cta .glass-button { display: block; width: 100%; }
}
@media (forced-colors: active) {
  .mdl-pillar-icon { background: Canvas; outline: 1px solid CanvasText; }
  .mdl-pillar-icon img { filter: none; }
}