/*
 * DPE public depth system 0.39.0.
 * Adds editorial substance and cross-page continuity without changing commerce.
 */

.dpe-public {
  --v39-ice: #eaf3ff;
  --v39-paper: #f7faff;
  --v39-night: #020918;
  --v39-navy: #071a36;
  --v39-blue: #155ee8;
  --v39-cyan: #35c8df;
  --v39-ink: #061730;
  --v39-copy: #49617e;
  --v39-line: #cfdded;
  --v39-line-dark: rgba(213, 231, 250, 0.16);
}

.dpe-public :where(
  .dpe-now__head,
  .dpe-work-model__head,
  .dpe-ecosystem-map__head,
  .dpe-program-guide__head,
  .dpe-contact-expectations__head,
  .dpe-related-programs__head
) {
  align-items: end;
  display: grid;
  gap: 72px;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
}

.dpe-public :where(
  .dpe-now__head,
  .dpe-work-model__head,
  .dpe-ecosystem-map__head,
  .dpe-program-guide__head,
  .dpe-contact-expectations__head,
  .dpe-related-programs__head
) h2 {
  font-size: clamp(40px, 4vw, 62px);
  line-height: 0.98;
  margin-top: 16px;
  max-width: 850px;
}

.dpe-public :where(
  .dpe-now__head,
  .dpe-work-model__head,
  .dpe-ecosystem-map__head,
  .dpe-program-guide__head,
  .dpe-contact-expectations__head,
  .dpe-related-programs__head
) > .dpe-lead {
  margin: 0;
  max-width: 590px;
}

/* Home: a factual current-state index instead of another promotional band. */
.dpe-public .dpe-now {
  background:
    radial-gradient(circle at 82% 8%, rgba(53, 200, 223, 0.12), transparent 29%),
    linear-gradient(180deg, #f9fcff 0%, var(--v39-ice) 100%);
  border-top: 1px solid rgba(7, 35, 74, 0.08);
}

.dpe-public .dpe-now__list {
  border-top: 1px solid var(--v39-line);
  margin-top: 58px;
}

.dpe-public .dpe-now__list > a {
  align-items: center;
  border-bottom: 1px solid var(--v39-line);
  color: var(--v39-ink);
  display: grid;
  gap: 24px;
  grid-template-columns: 58px minmax(0, 1fr) minmax(170px, 0.35fr) 34px;
  min-height: 128px;
  padding: 24px 16px 24px 0;
  position: relative;
  text-decoration: none;
  transition: background-color 180ms ease, padding 180ms ease;
}

.dpe-public .dpe-now__list > a::before {
  background: var(--v39-blue);
  content: "";
  inset: 0 auto 0 0;
  opacity: 0;
  position: absolute;
  transition: opacity 180ms ease;
  width: 3px;
}

.dpe-public .dpe-now__list > a:hover {
  background: rgba(255, 255, 255, 0.66);
  padding-left: 18px;
}

.dpe-public .dpe-now__list > a:hover::before {
  opacity: 1;
}

.dpe-public .dpe-now__number {
  color: var(--v39-blue);
  font-size: 13px;
  font-weight: 800;
}

.dpe-public .dpe-now__program {
  display: grid;
  gap: 7px;
}

.dpe-public .dpe-now__program small {
  color: var(--v39-blue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.dpe-public .dpe-now__program strong {
  font-family: "Bricolage DPE", "Manrope DPE", Arial, sans-serif;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
}

.dpe-public .dpe-now__state {
  color: var(--v39-copy);
  font-size: 13px;
  font-weight: 700;
  justify-self: start;
}

.dpe-public .dpe-now__state--active { color: #087658; }
.dpe-public .dpe-now__state--request { color: #8a5a00; }
.dpe-public .dpe-now__state--historical { color: #536a84; }

.dpe-public .dpe-now__list svg {
  fill: none;
  height: 24px;
  justify-self: end;
  stroke: var(--v39-blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 24px;
}

/* About: a real operating model and an honest ecosystem map. */
.dpe-public .dpe-work-model {
  background:
    radial-gradient(circle at 88% 18%, rgba(53, 200, 223, 0.14), transparent 29%),
    linear-gradient(135deg, var(--v39-night) 0%, #071a36 60%, #0b2951 100%);
  color: #fff;
}

.dpe-public .dpe-work-model .dpe-kicker { color: var(--v39-cyan); }
.dpe-public .dpe-work-model .dpe-lead { color: rgba(228, 239, 250, 0.72); }

.dpe-public .dpe-work-model__steps {
  border-bottom: 1px solid var(--v39-line-dark);
  border-top: 1px solid var(--v39-line-dark);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin-top: 64px;
}

.dpe-public .dpe-work-model__steps li {
  border-left: 1px solid var(--v39-line-dark);
  min-height: 260px;
  padding: 28px 26px 34px;
}

.dpe-public .dpe-work-model__steps li:first-child { border-left: 0; }

.dpe-public .dpe-work-model__steps li > span {
  color: var(--v39-cyan);
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 62px;
}

.dpe-public .dpe-work-model__steps h3 {
  font-size: 25px;
  line-height: 1.05;
}

.dpe-public .dpe-work-model__steps p {
  color: rgba(222, 235, 249, 0.68);
  font-size: 14px;
  line-height: 1.65;
  margin-top: 14px;
}

.dpe-public .dpe-ecosystem-map {
  background:
    linear-gradient(90deg, rgba(21, 94, 232, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #fff 0%, var(--v39-paper) 100%);
  background-size: 12.5% 100%, auto;
}

.dpe-public .dpe-ecosystem-map__list {
  border-top: 1px solid var(--v39-line);
  margin-top: 58px;
}

.dpe-public .dpe-ecosystem-map__list > a {
  align-items: center;
  border-bottom: 1px solid var(--v39-line);
  color: var(--v39-ink);
  display: grid;
  gap: 30px;
  grid-template-columns: 64px minmax(0, 1fr) minmax(180px, 0.35fr);
  min-height: 156px;
  padding: 26px 0;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.dpe-public .dpe-ecosystem-map__list > a:hover {
  color: var(--v39-blue);
  transform: translateX(8px);
}

.dpe-public .dpe-ecosystem-map__list > a > span {
  color: var(--v39-blue);
  font-size: 13px;
  font-weight: 800;
}

.dpe-public .dpe-ecosystem-map__list small {
  color: var(--v39-blue);
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.dpe-public .dpe-ecosystem-map__list h3 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  margin-top: 7px;
}

.dpe-public .dpe-ecosystem-map__list p {
  color: var(--v39-copy);
  margin-top: 10px;
  max-width: 680px;
}

.dpe-public .dpe-state-label {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  gap: 9px;
  justify-self: end;
}

.dpe-public .dpe-state-label svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}

.dpe-public .dpe-state-label--active { color: #087658; }
.dpe-public .dpe-state-label--request { color: #8a5a00; }
.dpe-public .dpe-state-label--historical { color: #536a84; }

/* Programs: explain availability before presenting the catalogue. */
.dpe-public .dpe-program-guide {
  background:
    radial-gradient(circle at 10% 20%, rgba(21, 94, 232, 0.1), transparent 28%),
    var(--v39-ice);
  border-bottom: 1px solid var(--v39-line);
  border-top: 1px solid var(--v39-line);
}

.dpe-public .dpe-program-guide__states {
  border-bottom: 1px solid var(--v39-line);
  border-top: 1px solid var(--v39-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 58px;
}

.dpe-public .dpe-program-guide__states article {
  border-left: 1px solid var(--v39-line);
  min-height: 220px;
  padding: 30px;
}

.dpe-public .dpe-program-guide__states article:first-child { border-left: 0; }

.dpe-public .dpe-program-guide__states svg {
  fill: none;
  height: 25px;
  stroke: var(--v39-blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 25px;
}

.dpe-public .dpe-program-guide__states h3 {
  font-size: 24px;
  margin-top: 44px;
}

.dpe-public .dpe-program-guide__states p {
  color: var(--v39-copy);
  font-size: 14px;
  line-height: 1.65;
  margin-top: 12px;
}

/* Ideas: turn an empty feed into an honest, navigable working library. */
.dpe-public .dpe-ideas-grid {
  background:
    radial-gradient(circle at 92% 4%, rgba(53, 200, 223, 0.1), transparent 24%),
    linear-gradient(180deg, #f7fbff 0%, #eaf3ff 100%);
}

.dpe-public .dpe-ideas-grid > .dpe-shell {
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dpe-public .dpe-ideas-grid__head {
  display: grid;
  gap: 24px 70px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.7fr);
  margin-bottom: 34px;
}

.dpe-public .dpe-ideas-grid__head .dpe-kicker { grid-column: 1; }

.dpe-public .dpe-ideas-grid__head h2 {
  font-size: clamp(42px, 4.4vw, 66px);
  grid-column: 1;
  line-height: 0.98;
  max-width: 820px;
}

.dpe-public .dpe-ideas-grid__head .dpe-lead {
  align-self: end;
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

.dpe-public .dpe-idea {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(25, 70, 121, 0.14);
  border-radius: 8px;
  box-shadow: 0 22px 58px rgba(7, 35, 74, 0.09);
  min-height: 100%;
  overflow: hidden;
}

.dpe-public .dpe-idea:not(.dpe-idea--feature):not(.dpe-idea--wide) {
  display: grid;
  grid-template-columns: 38px 30px minmax(0, 1fr);
  padding: 36px;
}

.dpe-public .dpe-idea:not(.dpe-idea--feature):not(.dpe-idea--wide) > :not(span):not(svg) {
  grid-column: 3;
}

.dpe-public .dpe-idea > span {
  color: var(--v39-blue);
  font-size: 12px;
  font-weight: 800;
}

.dpe-public .dpe-idea > svg,
.dpe-public .dpe-idea__copy > svg {
  fill: none;
  height: 23px;
  stroke: var(--v39-blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 23px;
}

.dpe-public .dpe-idea h3 {
  font-size: clamp(27px, 2.6vw, 40px);
  line-height: 1.02;
  margin-top: 14px;
}

.dpe-public .dpe-idea h3 + p {
  color: var(--v39-copy);
  line-height: 1.65;
  margin-top: 16px;
}

.dpe-public .dpe-idea dl {
  border-top: 1px solid var(--v39-line);
  display: grid;
  gap: 7px;
  margin-top: 26px;
  padding-top: 22px;
}

.dpe-public .dpe-idea dt {
  color: var(--v39-blue);
  font-size: 10px;
  font-weight: 800;
  margin-top: 12px;
  text-transform: uppercase;
}

.dpe-public .dpe-idea dd {
  color: var(--v39-ink);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.dpe-public .dpe-text-link {
  align-items: center;
  color: var(--v39-blue);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 9px;
  margin-top: 28px;
  text-decoration: none;
}

.dpe-public .dpe-text-link svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
  width: 17px;
}

.dpe-public .dpe-text-link:hover svg { transform: translate(3px, -3px); }

.dpe-public .dpe-idea--feature,
.dpe-public .dpe-idea--wide {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
}

.dpe-public .dpe-idea--wide { grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); }

.dpe-public .dpe-idea__media {
  min-height: 540px;
  overflow: hidden;
}

.dpe-public .dpe-idea__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.dpe-public .dpe-idea__copy {
  align-self: center;
  padding: 52px;
}

.dpe-public .dpe-idea__copy > span {
  color: var(--v39-blue);
  float: right;
  font-size: 12px;
  font-weight: 800;
}

/* Contact: explain the handoff, not only where to email. */
.dpe-public .dpe-contact-expectations {
  background:
    radial-gradient(circle at 86% 12%, rgba(53, 200, 223, 0.14), transparent 28%),
    linear-gradient(135deg, #041126 0%, #082348 100%);
  color: #fff;
}

.dpe-public .dpe-contact-expectations .dpe-kicker { color: var(--v39-cyan); }
.dpe-public .dpe-contact-expectations .dpe-lead { color: rgba(225, 237, 250, 0.72); }

.dpe-public .dpe-contact-expectations__steps {
  border-bottom: 1px solid var(--v39-line-dark);
  border-top: 1px solid var(--v39-line-dark);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin-top: 58px;
}

.dpe-public .dpe-contact-expectations__steps li {
  border-left: 1px solid var(--v39-line-dark);
  min-height: 220px;
  padding: 30px;
}

.dpe-public .dpe-contact-expectations__steps li:first-child { border-left: 0; }

.dpe-public .dpe-contact-expectations__steps span {
  color: var(--v39-cyan);
  font-size: 13px;
  font-weight: 800;
}

.dpe-public .dpe-contact-expectations__steps h3 {
  font-size: 25px;
  margin-top: 46px;
}

.dpe-public .dpe-contact-expectations__steps p {
  color: rgba(225, 237, 250, 0.7);
  font-size: 14px;
  line-height: 1.65;
  margin-top: 12px;
}

/* Program detail: keep every page connected to the wider DPE ecosystem. */
.dpe-public .dpe-related-programs {
  background:
    linear-gradient(90deg, rgba(21, 94, 232, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--v39-paper) 0%, var(--v39-ice) 100%);
  background-size: 12.5% 100%, auto;
  border-top: 1px solid var(--v39-line);
}

.dpe-public .dpe-related-programs__list {
  border-top: 1px solid var(--v39-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 58px;
}

.dpe-public .dpe-related-programs__list > a {
  align-items: center;
  border-bottom: 1px solid var(--v39-line);
  color: var(--v39-ink);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 28px;
  min-height: 190px;
  padding: 30px 28px 30px 0;
  text-decoration: none;
}

.dpe-public .dpe-related-programs__list > a:nth-child(even) {
  border-left: 1px solid var(--v39-line);
  padding-left: 28px;
}

.dpe-public .dpe-related-programs__list small {
  color: var(--v39-blue);
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.dpe-public .dpe-related-programs__list strong {
  display: block;
  font-family: "Bricolage DPE", "Manrope DPE", Arial, sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  margin-top: 8px;
}

.dpe-public .dpe-related-programs__list em {
  color: var(--v39-copy);
  display: block;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  margin-top: 14px;
}

.dpe-public .dpe-related-programs__list p {
  color: var(--v39-copy);
  font-size: 14px;
  line-height: 1.6;
}

.dpe-public .dpe-related-programs__list svg {
  fill: none;
  height: 23px;
  stroke: var(--v39-blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
  width: 23px;
}

.dpe-public .dpe-related-programs__list > a:hover svg { transform: translate(3px, -3px); }

@media (max-width: 1080px) {
  .dpe-public :where(
    .dpe-now__head,
    .dpe-work-model__head,
    .dpe-ecosystem-map__head,
    .dpe-program-guide__head,
    .dpe-contact-expectations__head,
    .dpe-related-programs__head
  ) {
    gap: 44px;
  }

  .dpe-public .dpe-work-model__steps li { padding-inline: 20px; }
  .dpe-public .dpe-idea__copy { padding: 40px; }
  .dpe-public .dpe-related-programs__list > a { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) 24px; }
}

@media (max-width: 820px) {
  .dpe-public .dpe-ideas-grid > .dpe-shell { grid-template-columns: 1fr; }

  .dpe-public .dpe-ideas-grid__head {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .dpe-public :where(
    .dpe-now__head,
    .dpe-work-model__head,
    .dpe-ecosystem-map__head,
    .dpe-program-guide__head,
    .dpe-contact-expectations__head,
    .dpe-related-programs__head,
    .dpe-ideas-grid__head
  ) {
    gap: 24px;
    grid-template-columns: 1fr;
  }

  .dpe-public .dpe-ideas-grid__head .dpe-lead {
    grid-column: 1;
    grid-row: auto;
  }

  .dpe-public .dpe-work-model__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dpe-public .dpe-work-model__steps li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--v39-line-dark);
  }

  .dpe-public .dpe-work-model__steps li:nth-child(4) { border-top: 1px solid var(--v39-line-dark); }
  .dpe-public .dpe-work-model__steps li > span { margin-bottom: 38px; }

  .dpe-public .dpe-program-guide__states,
  .dpe-public .dpe-contact-expectations__steps {
    grid-template-columns: 1fr;
  }

  .dpe-public .dpe-program-guide__states article,
  .dpe-public .dpe-contact-expectations__steps li {
    border-left: 0;
    border-top: 1px solid var(--v39-line);
    min-height: 0;
  }

  .dpe-public .dpe-contact-expectations__steps li { border-color: var(--v39-line-dark); }
  .dpe-public .dpe-program-guide__states article:first-child,
  .dpe-public .dpe-contact-expectations__steps li:first-child { border-top: 0; }
  .dpe-public .dpe-program-guide__states h3,
  .dpe-public .dpe-contact-expectations__steps h3 { margin-top: 28px; }

  .dpe-public .dpe-idea--feature,
  .dpe-public .dpe-idea--wide {
    grid-template-columns: 1fr;
  }

  .dpe-public .dpe-idea--wide .dpe-idea__media { grid-row: 1; }
  .dpe-public .dpe-idea__media { min-height: 420px; }

  .dpe-public .dpe-ideas-grid .dpe-text-link {
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  .dpe-public .dpe-related-programs__list { grid-template-columns: 1fr; }
  .dpe-public .dpe-related-programs__list > a:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .dpe-public :where(
    .dpe-now__head,
    .dpe-work-model__head,
    .dpe-ecosystem-map__head,
    .dpe-program-guide__head,
    .dpe-contact-expectations__head,
    .dpe-related-programs__head
  ) h2 {
    font-size: 36px;
  }

  .dpe-public .dpe-now__list { margin-top: 40px; }

  .dpe-public .dpe-now__list > a {
    gap: 9px 16px;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    min-height: 118px;
    padding-right: 0;
  }

  .dpe-public .dpe-now__program strong { font-size: 25px; }
  .dpe-public .dpe-now__state { grid-column: 2; }
  .dpe-public .dpe-now__list svg { grid-column: 3; grid-row: 1 / span 2; }
  .dpe-public .dpe-now__list > a:hover { padding-left: 10px; }

  .dpe-public .dpe-work-model__steps { grid-template-columns: 1fr; margin-top: 40px; }
  .dpe-public .dpe-work-model__steps li,
  .dpe-public .dpe-work-model__steps li:nth-child(2) {
    border-left: 0;
    border-top: 1px solid var(--v39-line-dark);
    min-height: 0;
    padding: 24px 6px;
  }
  .dpe-public .dpe-work-model__steps li:first-child { border-top: 0; }
  .dpe-public .dpe-work-model__steps li > span { margin-bottom: 24px; }

  .dpe-public .dpe-ecosystem-map { background-size: 25% 100%, auto; }
  .dpe-public .dpe-ecosystem-map__list { margin-top: 40px; }
  .dpe-public .dpe-ecosystem-map__list > a {
    gap: 9px 16px;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 0;
    padding: 24px 0;
  }
  .dpe-public .dpe-ecosystem-map__list h3 { font-size: 28px; }
  .dpe-public .dpe-state-label { grid-column: 2; justify-self: start; margin-top: 9px; }

  .dpe-public .dpe-program-guide__states,
  .dpe-public .dpe-contact-expectations__steps,
  .dpe-public .dpe-related-programs__list { margin-top: 40px; }
  .dpe-public .dpe-program-guide__states article,
  .dpe-public .dpe-contact-expectations__steps li { padding: 26px 4px; }

  .dpe-public .dpe-ideas-grid > .dpe-shell { gap: 14px; }
  .dpe-public .dpe-ideas-grid__head { margin-bottom: 20px; }
  .dpe-public .dpe-ideas-grid__head h2 { font-size: 38px; }
  .dpe-public .dpe-idea:not(.dpe-idea--feature):not(.dpe-idea--wide) {
    grid-template-columns: 32px 26px minmax(0, 1fr);
    padding: 26px 20px;
  }
  .dpe-public .dpe-idea__copy { padding: 30px 22px; }
  .dpe-public .dpe-idea__media { min-height: 310px; }
  .dpe-public .dpe-idea h3 { font-size: 29px; }

  .dpe-public .dpe-related-programs { background-size: 25% 100%, auto; }
  .dpe-public .dpe-related-programs__list > a {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 0;
    padding: 26px 0;
  }
  .dpe-public .dpe-related-programs__list p { grid-column: 1; }
  .dpe-public .dpe-related-programs__list svg { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .dpe-public .dpe-now__list > a,
  .dpe-public .dpe-ecosystem-map__list > a,
  .dpe-public .dpe-text-link svg,
  .dpe-public .dpe-related-programs__list svg {
    transition: none;
  }
}