/* =================================================================
   u1 ("Ultimate #1"): v3's look with v2's motion. Loads after
   main.css, v2.css and v3.css.
   ================================================================= */

/* ---------- Hero: headline, line, three pillars next to the photo ---------- */
.u1-headline {
  margin: 0; font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.02; font-weight: 800;
  letter-spacing: -0.04em; color: var(--cream); text-wrap: balance;
}
.u1-headline em { font-style: normal; color: var(--accent); white-space: nowrap; }
.u1-sub { margin: 18px 0 0; max-width: 48ch; font-size: 1.0625rem; line-height: 1.55; color: var(--text); }

.u1-pillars { list-style: none; margin: clamp(24px, 3vw, 32px) 0 0; padding: 0; display: grid; gap: 18px; }
.u1-pillars > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.u1-num {
  font-size: 1.75rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--accent);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.u1-label { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.u1-line { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text); max-width: 52ch; }
.u1-link {
  display: inline-block; margin-top: 6px; font-size: 0.875rem; font-weight: 600; color: var(--cream);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
  transition: color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .u1-link:hover { color: var(--accent); } }
.u1-case > summary { list-style: none; }
.u1-case > summary::-webkit-details-marker { display: none; }
.u1-case[open] > summary .u1-arrow { display: inline-block; transform: rotate(180deg); }
.u1-case-body {
  display: grid; gap: 10px; margin-top: 12px; padding: 14px 16px; background: var(--card); border-radius: var(--radius);
  font-size: 0.9375rem; line-height: 1.5; color: var(--text);
}
.u1-case-body p { margin: 0; }
.u1-case-body .k { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.hero .hero-cta { margin-top: clamp(24px, 3vw, 32px); }
@media (max-width: 520px) {
  .u1-pillars > li { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 12px; }
  .u1-num { font-size: 1.4rem; }
}

/* ---------- Programs: the AI4PMMs graphic gets the same photo slot and hover as the others ---------- */
.pp-photo img.u1-graphic { object-position: 0 18%; }

/* ---------- Timeline: AI4PMMs text logo (purple, like its wordmark) ---------- */
.timeline-logo-text.tl-ai4 { background: #f3f0fb; }
.timeline-logo-text.tl-ai4 span { color: #3b2d72; font-size: 0.75rem; letter-spacing: -0.02em; }
.timeline-logo-text.tl-ai4 b { color: #9d82ee; }

/* ---------- Program pages ---------- */
.split img.u1-crop { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 78%; }
.u1-ai4 .ihero-photo img { aspect-ratio: 1; object-fit: cover; }

/* Hero photo runs the full height of the text column on wide screens */
@media (min-width: 821px) {
  .hero .hero-grid { align-items: stretch; }
  .hero .hero-photo { display: flex; }
  .hero .hero-photo img { height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; object-position: 50% 20%; }
}
/* Phones: the 4:3 crop keeps the face in the upper middle */
@media (max-width: 820px) { .hero .hero-photo img { object-position: 50% 18%; } }