/* Page-scoped styles extracted from es/design-partners.html. */

/* =====================================================================
   /es/design-partners.html page-scoped styles — IDENTICAL to
   design-partners.html.j2 (EN) per the translation-parity rule.
   Class prefix dp-.
   ===================================================================== */

/* ---------- Hero ---------- */
.dp-hero { padding-block: var(--s-9) var(--s-7); }
.dp-hero-grid { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .dp-hero-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.dp-hero-copy h1 { max-width: 20ch; }
.dp-support { max-width: var(--measure-prose); }
.dp-cta-nudge { font-size: var(--fs-13); color: var(--ink-soft); margin-top: var(--s-3); }

.dp-panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.dp-panel-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.dp-panel-title { font-size: var(--fs-20); margin-bottom: var(--s-5); }
.dp-panel-nodes { display: grid; gap: var(--s-3); }
.dp-panel-nodes .flow-node { display: flex; gap: var(--s-3); align-items: flex-start; }
.dp-node-mark {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-13);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-node-name { margin: 0; font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--fs-14); }
.dp-node-text { margin: var(--s-1) 0 0; color: var(--ink-muted); font-size: var(--fs-13); }

/* ---------- Section 2: Foundation ---------- */
.dp-why-how-what { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 860px) { .dp-why-how-what { grid-template-columns: repeat(3, 1fr); } }
.dp-whw-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); height: 100%; }
.dp-whw-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.dp-whw-headline { font-weight: var(--weight-semibold); font-size: var(--fs-18); color: var(--ink); margin-bottom: var(--s-3); }
.dp-whw-card p { font-size: var(--fs-14); }

/* ---------- Section 3: Design partner profile ---------- */
.dp-fit-filters { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 780px) { .dp-fit-filters { grid-template-columns: repeat(3, 1fr); } }
.dp-fit-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.dp-fit-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-soft);
}
.dp-fit-name { font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--fs-16); margin: var(--s-1) 0 var(--s-3); }
.dp-fit-card p { font-size: var(--fs-14); margin: 0; }
.dp-icp-note { margin-top: var(--s-6); font-size: var(--fs-14); color: var(--ink-soft); max-width: var(--measure-prose); }

/* ---------- Section 4: Engagement phases ---------- */
.dp-phase-pull { font-weight: var(--weight-semibold); font-size: var(--fs-20); color: var(--ink); margin-bottom: var(--s-3); }
.dp-phase-intro-muted { max-width: var(--measure-prose); }
.dp-phase-grid { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.dp-phase-block { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.dp-phase-head { display: flex; gap: var(--s-5); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-hair); }
.dp-phase-index {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--blue-deep);
}
.dp-phase-name { font-size: var(--fs-24); font-weight: var(--weight-semibold); color: var(--ink); }
.dp-phase-summary { font-size: var(--fs-14); color: var(--ink-muted); margin: 0; max-width: var(--measure-prose); }
.dp-phase-body p { font-size: var(--fs-14); }
.dp-phase-steps { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.dp-phase-step { display: flex; gap: var(--s-4); background: var(--bg-cream); border-radius: var(--r-md); padding: var(--s-4); align-items: baseline; }
.dp-ps-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  color: var(--blue-deep);
  background: var(--blue-soft);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  white-space: nowrap;
}
.dp-ps-body { font-size: var(--fs-14); color: var(--ink-muted); }
.dp-phase-outcome { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-hair); font-size: var(--fs-13); }
.dp-po-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-soft);
  margin-bottom: var(--s-1);
}
.dp-po-text { color: var(--ink-muted); }

/* ---------- Section 5: What you get ---------- */
.dp-deliverables-grid { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 640px) { .dp-deliverables-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .dp-deliverables-grid { grid-template-columns: repeat(4, 1fr); } }
.dp-dv-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); height: 100%; }
/* v5: the seven Executive Dashboard surfaces were one middot run-on line.
   Split on the existing middots into chips; the bounding clause follows as
   its own note so the constraint still reads as a constraint. */
.dp-surfaces {
  list-style: none; margin: var(--s-3) 0 var(--s-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.dp-surface {
  background: var(--bg-cream); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: var(--s-1) var(--s-3);
  font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink);
}
.dp-surfaces-bound { font-size: var(--fs-13); color: var(--ink-soft); margin: 0; }
.dp-dv-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--blue-deep);
  margin-bottom: var(--s-2);
}
.dp-dv-card h3 { font-size: var(--fs-18); margin-bottom: var(--s-3); }
.dp-dv-card p { font-size: var(--fs-13); }
.dp-procurement-strip { margin-top: var(--s-7); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.dp-procurement-head {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.dp-procurement-strip p { max-width: var(--measure-prose); }

/* ---------- Section 6: Paths in ---------- */
.dp-paths { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.dp-path-row { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .dp-path-row { grid-template-columns: 1fr auto; align-items: center; } }
.dp-path-highlight { background: var(--blue-soft); border-color: var(--blue); }
.dp-path-who { font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--fs-18); margin-bottom: var(--s-2); }
.dp-path-desc { font-size: var(--fs-14); margin: 0; max-width: 60ch; }
.dp-note-stack { display: flex; flex-direction: column; gap: var(--s-2); }
.dp-note-stack a { font-weight: var(--weight-semibold); }

/* == DESIGN PARTNERS PAGE CSS END == */

/* Extracted from style attributes. */
.csp-2c413d4534 { margin-top: var(--s-6); }
.csp-3722b379e8 { margin: 0; }
.csp-41e07a39ce { max-width: 66ch; }
.csp-5e4d166a3f { max-width: 60ch; margin-top: var(--s-4); }
.csp-b8ea69f720 { max-width: 60ch; }