/* ==========================================================================
   DIGISCHOOL: the product reference pages.

   Loaded on /levels/, /schools/ and /gce/, after lp.css (which carries the
   split hero, the heads, the buttons, the closing band and the rise).
   Everything here is prefixed .pd-. A sub-system's colour arrives as --tint,
   the chart series its registry profile names, so the same kind of school is
   the same colour on all three pages.
   ========================================================================== */

/* --- Sections and the shared pieces ----------------------------------------- */

.pd-sec { padding-block: clamp(4rem, 9vw, 6.5rem); }
.pd-sec--alt { background: var(--ec-surface); }

/* An icon on a soft square of the item's own colour. */
.pd-tile {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--tint, var(--ec-accent));
  background: color-mix(in srgb, var(--tint, var(--ec-accent)) 14%, var(--ec-surface));
  border-radius: 13px;
}

.pd-tile--sm { width: 28px; height: 28px; border-radius: 8px; }
.pd-tile--lg { width: 52px; height: 52px; border-radius: 15px; }

.pd-aside {
  max-width: 70ch;
  margin: var(--ec-space-6) 0 0;
  font-size: var(--ec-text-sm);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.pd-chips li {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 12px 5px 9px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--ec-text);
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-full);
}

.pd-chips svg { color: var(--tint, var(--ec-accent)); }

.pd-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 960px) {
  .pd-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* ==========================================================================
   LEVELS
   ========================================================================== */

/* --- The staircases (hero) ---------------------------------------------------
   One staircase per sub-system, anglophone above francophone: seven steps
   rising left to right, the first cycle in the soft accent and the second in
   the full one, so the two cuts fall where each ladder really cuts (after
   Form 5 in one, after 3ème in the other). The examinations ride as flags on
   the step that ends in them. The steps grow up once on load. A drawing; the
   ladders below are the content. */

.pd-stairs {
  display: grid;
  gap: clamp(1rem, 3vh, 1.75rem);
  width: 100%;
  max-width: min(760px, calc((100svh - 12rem) * 1.6));
  margin-inline: auto;
}

.pd-stairs__label {
  display: flex;
  gap: var(--ec-space-2);
  align-items: center;
  margin: 0 0 var(--ec-space-2);
  font-size: var(--ec-text-sm);
  font-weight: 700;
  color: var(--ec-text);
}

.pd-stairs__steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 0.7vw, 8px);
  align-items: end;
  height: clamp(130px, min(17vw, 21vh), 210px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-stair {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(30% + var(--i) * 11.5%);
  min-width: 0;
}

.pd-stair__block {
  flex: 1;
  padding: clamp(5px, 0.8vw, 10px) clamp(4px, 0.6vw, 8px);
  overflow: hidden;
  font-family: var(--ec-font-display);
  font-size: clamp(0.625rem, 0.4rem + 0.5vw, 0.9375rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ec-text);
  overflow-wrap: anywhere;
  background: var(--ec-accent-soft);
  border: 1px solid color-mix(in srgb, var(--ec-accent) 25%, transparent);
  border-radius: clamp(6px, 0.9vw, 12px) clamp(6px, 0.9vw, 12px) 3px 3px;
  transform-origin: bottom;
}

.pd-stair--high_school .pd-stair__block {
  color: var(--ec-accent-on);
  background: var(--ec-accent);
  border-color: var(--ec-accent);
}

.pd-stair__flag {
  align-self: flex-start;
  max-width: 100%;
  margin-block-end: 5px;
  padding: 2px 7px;
  overflow: hidden;
  font-size: clamp(0.5625rem, 0.4rem + 0.32vw, 0.75rem);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ec-text);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-full);
  box-shadow: 0 8px 16px -10px rgb(6 32 46 / 40%);
}

.pd-stairs__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-2);
  align-items: center;
  margin: 0;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--ec-text-muted);
}

.pd-stairs__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--ec-accent-soft);
  border: 1px solid color-mix(in srgb, var(--ec-accent) 25%, transparent);
  border-radius: 4px;
}

.pd-stairs__swatch--high_school { margin-inline-start: var(--ec-space-4); background: var(--ec-accent); }

@media (prefers-reduced-motion: no-preference) {
  .pd-stair__block { animation: pd-grow 0.9s var(--lp-ease) calc(0.15s + var(--i) * 0.09s) both; }
  .pd-stair__flag { animation: pd-pop 0.5s var(--lp-ease) calc(0.7s + var(--i) * 0.09s) both; }
}

@keyframes pd-grow { from { transform: scaleY(0.05); opacity: 0; } }
@keyframes pd-pop  { from { transform: translateY(10px) scale(0.9); opacity: 0; } }

/* --- The ladders ------------------------------------------------------------ */

.pd-ladders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--ec-space-5);
  margin-block-start: var(--ec-space-8);
}

.pd-ladder {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-block-start: 4px solid var(--tint);
  border-radius: clamp(18px, 2vw, 24px);
}

.pd-ladder__head { display: flex; gap: var(--ec-space-3); align-items: center; margin-block-end: var(--ec-space-4); }

.pd-ladder__title {
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ec-text);
}

.pd-ladder__meta { margin: 2px 0 0; font-size: var(--ec-text-sm); color: var(--ec-text-muted); }

.pd-rungs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.pd-rungs__cut {
  margin-block: var(--ec-space-2) 2px;
  font-size: var(--ec-label-sm);
  font-weight: 700;
  color: var(--ec-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-rungs__cut:first-child { margin-block-start: 0; }

.pd-rung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-2) var(--ec-space-3);
  align-items: center;
  padding: 9px 12px;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 12px;
}

.pd-rung__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: var(--ec-text-sm);
  font-weight: 700;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 12%, var(--ec-surface));
  border-radius: 8px;
}

.pd-rung__name { flex: 1; font-weight: 600; color: var(--ec-text); }

.pd-rung__exam {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 10px 3px 7px;
  font-size: var(--ec-label-md);
  font-weight: 700;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: var(--ec-radius-full);
}

/* --- Assessment cards ------------------------------------------------------- */

.pd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--ec-space-5);
  margin-block-start: var(--ec-space-8);
}

.pd-card {
  display: flex;
  flex-direction: column;
  gap: var(--ec-space-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: clamp(18px, 2vw, 24px);
  transition: transform 0.4s var(--lp-ease), border-color 0.3s;
}

.pd-card:hover { border-color: color-mix(in srgb, var(--tint) 45%, var(--ec-border)); transform: translateY(-3px); }

.pd-card__title {
  margin: var(--ec-space-2) 0 0;
  font-family: var(--ec-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ec-text);
}

.pd-card__body { margin: 0; line-height: 1.6; color: var(--ec-text-muted); }

.pd-codes { display: grid; gap: 6px; margin: var(--ec-space-2) 0 0; padding: 0; list-style: none; }

.pd-codes li { display: flex; gap: var(--ec-space-3); align-items: center; font-size: var(--ec-text-sm); color: var(--ec-text); }

.pd-codes b {
  min-width: 3.2em;
  padding: 3px 8px;
  font-family: var(--ec-font-display);
  text-align: center;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 12%, var(--ec-surface));
  border-radius: 8px;
}

/* --- Examinations ----------------------------------------------------------- */

.pd-exams {
  display: grid;
  gap: var(--ec-space-5);
  margin-block-start: var(--ec-space-8);
}

@media (min-width: 900px) {
  .pd-exams { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
}

.pd-exams__col {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: clamp(18px, 2vw, 24px);
}

.pd-exams__title {
  margin: 0 0 var(--ec-space-4);
  font-family: var(--ec-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ec-text);
}

.pd-exams__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--ec-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-exam {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-inline-start: 4px solid var(--tint);
  border-radius: 10px;
}

.pd-exam b { font-weight: 700; color: var(--ec-text); }
.pd-exam span { font-size: var(--ec-label-md); color: var(--ec-text-muted); }

/* ==========================================================================
   KINDS OF SCHOOL
   ========================================================================== */

/* --- A photograph with chips floating over it (hero) ------------------------
   /schools/ (the four kinds of school) and /about/ (the constraints). */

.pd-photo {
  position: relative;
  width: 100%;
  max-width: min(760px, calc((100svh - 12rem) * 1.25));
  margin-inline: auto;
  padding: 4% 6% 6% 10%;
}

.pd-photo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: clamp(18px, 2.5vw, 30px);
  box-shadow: 0 40px 70px -36px rgb(6 32 46 / 55%);
}

.pd-photo__chip {
  position: absolute;
  display: inline-flex;
  gap: var(--ec-space-2);
  align-items: center;
  padding: 6px 14px 6px 6px;
  font-size: clamp(0.75rem, 0.6rem + 0.35vw, 0.9375rem);
  font-weight: 700;
  white-space: nowrap;
  color: var(--ec-text);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-full);
  box-shadow: 0 16px 30px -16px rgb(6 32 46 / 45%);
}

.pd-photo__chip--0 { top: 0; left: 0; }
.pd-photo__chip--1 { top: 30%; right: 0; }
.pd-photo__chip--2 { bottom: 26%; left: 2%; }
.pd-photo__chip--3 { right: 4%; bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .pd-photo__chip { animation: lp-drift 7s ease-in-out infinite alternate; }
  .pd-photo__chip--1 { animation-duration: 8s; animation-delay: -3s; }
  .pd-photo__chip--2 { animation-duration: 6.5s; animation-delay: -1.5s; }
  .pd-photo__chip--3 { animation-duration: 9s; animation-delay: -4s; }
}

/* --- Inside the stack's panel (the stack itself is in lp.css) -------------- */

.pd-type__inst {
  margin: calc(-1 * var(--ec-space-2)) 0 var(--ec-space-3);
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--ec-text-muted);
}

.pd-deck .pd-facts { margin-block-end: var(--ec-space-5); }

.pd-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ec-space-2);
  margin: 0;
}

@media (max-width: 520px) {
  .pd-facts { grid-template-columns: minmax(0, 1fr); }
}

.pd-facts > div {
  padding: var(--ec-space-3);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 12px;
}

.pd-facts dt {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--ec-label-md);
  color: var(--ec-text-muted);
}

.pd-facts dt svg { color: var(--tint); }

.pd-facts dd {
  margin: 4px 0 0;
  font-family: var(--ec-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ec-text);
}

.pd-type__label {
  margin: 0 0 var(--ec-space-2);
  font-size: var(--ec-label-sm);
  font-weight: 700;
  color: var(--ec-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   GCE
   ========================================================================== */

/* --- The entry (hero) --------------------------------------------------------
   A classroom photograph on the right, and over its left edge a drawn entry:
   one candidate, the subjects ticked with the compulsory three marked, and
   where the entry stands. The ticks land one after another on load. */

.pd-gce {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: min(760px, calc((100svh - 11rem) * 1.15));
  margin-inline: auto;
  padding-inline-start: 22%;
}

.pd-gce__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: clamp(18px, 2.5vw, 30px);
  box-shadow: 0 40px 70px -36px rgb(6 32 46 / 55%);
}

.pd-entry {
  position: absolute;
  top: 8%;
  left: 0;
  width: min(62%, 330px);
  padding: clamp(12px, 1.6vw, 18px);
  font-size: clamp(0.6875rem, 0.55rem + 0.35vw, 0.875rem);
  color: var(--ec-text);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: clamp(14px, 1.8vw, 20px);
  box-shadow: 0 30px 60px -28px rgb(6 32 46 / 60%);
}

.pd-entry__head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-block-end: 10px;
  margin-block-end: 10px;
  border-block-end: 1px solid var(--ec-border);
}

.pd-entry__head > span:nth-child(2) { display: grid; flex: 1; color: var(--ec-text-muted); }
.pd-entry__head b { color: var(--ec-text); }

.pd-entry__kid {
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  font-weight: 800;
  color: var(--ec-warning);
  background: var(--ec-warning-soft);
  border-radius: 50%;
}

.pd-entry__session {
  padding: 3px 9px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: var(--ec-radius-full);
}

.pd-entry__label {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px;
  font-weight: 700;
}

.pd-entry__label span { font-weight: 600; color: var(--ec-success); }

.pd-entry__subjects { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.pd-entry__subjects li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  font-weight: 600;
  background: var(--ec-surface-2);
  border-radius: 8px;
}

.pd-entry__subjects i {
  margin-inline-start: auto;
  font-size: 0.85em;
  font-style: normal;
  font-weight: 700;
  color: var(--ec-accent);
}

.pd-entry__tick {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  color: var(--ec-paper-0);
  background: var(--ec-success);
  border-radius: 5px;
}

.pd-entry__tick svg { width: 75%; height: 75%; }

.pd-entry__states {
  display: flex;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pd-entry__states li {
  flex: 1;
  padding: 4px 6px;
  font-weight: 700;
  text-align: center;
  color: var(--ec-text-muted);
  background: var(--ec-surface-2);
  border-radius: var(--ec-radius-full);
}

.pd-entry__states .is-done { color: var(--ec-success); background: var(--ec-success-soft); }

@media (prefers-reduced-motion: no-preference) {
  .pd-entry__tick { animation: pd-pop 0.45s var(--lp-ease) calc(0.5s + var(--i) * 0.12s) both; }
}

.pd-gce__note {
  margin: var(--ec-space-3) 0 0;
  font-size: var(--ec-label-md);
  color: var(--ec-text-subtle);
  text-align: end;
}

/* --- The five steps ---------------------------------------------------------- */

.pd-flow {
  display: grid;
  gap: var(--ec-space-6);
  margin: var(--ec-space-8) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1100px) {
  .pd-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ec-space-5); }
}

.pd-flow__step { position: relative; }

/* The line joining the marks: down the left on a phone, across on a wide
   screen. */
.pd-flow__step:not(:last-child)::after {
  position: absolute;
  top: 56px;
  bottom: calc(-1 * var(--ec-space-6));
  left: 27px;
  width: 2px;
  content: '';
  background: var(--ec-border-strong);
}

@media (min-width: 1100px) {
  .pd-flow__step:not(:last-child)::after {
    top: 27px;
    right: calc(-1 * var(--ec-space-5));
    bottom: auto;
    left: 64px;
    width: auto;
    height: 2px;
  }
}

@media (max-width: 1099.98px) {
  .pd-flow__step { padding-inline-start: 76px; }
  .pd-flow__mark { position: absolute; top: 0; left: 0; }
}

.pd-flow__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--ec-accent-on);
  background: var(--ec-accent);
  border-radius: 18px;
  box-shadow: 0 14px 26px -16px rgb(6 32 46 / 60%);
}

.pd-flow__mark b {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
  color: var(--ec-accent);
  background: var(--ec-surface);
  border: 2px solid var(--ec-accent);
  border-radius: 50%;
}

.pd-flow__title {
  margin: var(--ec-space-4) 0 var(--ec-space-2);
  font-family: var(--ec-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ec-text);
}

@media (max-width: 1099.98px) {
  .pd-flow__title { margin-block-start: 0; padding-block-start: 4px; }
}

.pd-flow__body { margin: 0; font-size: var(--ec-text-sm); line-height: 1.6; color: var(--ec-text-muted); }

/* --- The rules --------------------------------------------------------------- */

.pd-rules {
  overflow-x: auto;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: clamp(18px, 2vw, 24px);
}

.pd-rules table { width: 100%; min-width: 560px; border-collapse: collapse; }
.pd-rules tbody th { white-space: nowrap; }
.pd-rules td:last-child { white-space: nowrap; }

.pd-rules th,
.pd-rules td {
  padding: var(--ec-space-4) var(--ec-space-5);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--ec-border);
}

.pd-rules tbody tr:last-child > * { border-block-end: 0; }

.pd-rules thead th {
  font-size: var(--ec-label-sm);
  font-weight: 700;
  color: var(--ec-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ec-surface-2);
}

.pd-rules tbody th { font-family: var(--ec-font-display); font-weight: 600; color: var(--ec-text); }
.pd-rules td { font-weight: 600; color: var(--ec-text); }

.pd-next { margin-block-start: clamp(3rem, 6vw, 4.5rem); }

@media print {
  .pd-stairs,
  .pd-photo,
  .pd-gce { display: none; }
}

/* The stack's panels share one grid cell, so the cell is as tall as the
   tallest of them (the technical school, with nine examinations), and the
   short ones sat over a large empty space. Here the closed panels leave the
   flow: the cell takes the open panel's height, and clip hides what the
   closed ones would hang below it. */
.pd-deck .lp-deck__info { position: relative; overflow: clip; }
.pd-deck.is-tabbed .lp-deck__panel:not(.is-on) { position: absolute; inset: 0 0 auto; }

/* ==========================================================================
   ABOUT
   ========================================================================== */

/* Five cards in two rows: the first two wide, the other three narrower. */
@media (min-width: 900px) {
  .pd-cards--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pd-cards--five > :nth-child(-n + 2) { grid-column: span 3; }
  .pd-cards--five > :nth-child(n + 3) { grid-column: span 2; }
  .pd-cards--five > :nth-child(-n + 2) .pd-card__title { font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem); }
}

/* ==========================================================================
   CONTACT (the block /about/ and /contact/ share, includes/mk/contact.php)
   ========================================================================== */

.pd-reach {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 960px) {
  .pd-reach { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .pd-reach__copy { position: sticky; top: var(--ec-space-6); }
}

.pd-reach__copy .lp-eyebrow { margin-block-end: var(--ec-space-4); }

.pd-channels { display: grid; gap: var(--ec-space-3); margin: var(--ec-space-6) 0 0; padding: 0; list-style: none; }

.pd-channel {
  display: flex;
  gap: var(--ec-space-4);
  align-items: center;
  min-height: 64px;
  padding: var(--ec-space-3) var(--ec-space-4) var(--ec-space-3) var(--ec-space-3);
  color: var(--ec-text);
  text-decoration: none;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 16px;
  transition: border-color 0.25s, transform 0.3s var(--lp-ease), box-shadow 0.3s;
}

.pd-channel:hover {
  color: var(--ec-text);
  border-color: var(--ec-accent);
  box-shadow: 0 16px 30px -20px rgb(6 32 46 / 40%);
  transform: translateY(-2px);
}

.pd-channel:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 3px; }

.pd-channel__text { display: grid; flex: 1; min-width: 0; }
.pd-channel__text b { font-weight: 700; }
.pd-channel__text span { overflow: hidden; font-size: var(--ec-text-sm); color: var(--ec-text-muted); text-overflow: ellipsis; }

.pd-channel__go { color: var(--ec-accent); transition: translate 0.25s var(--lp-ease); }
.pd-channel:hover .pd-channel__go { translate: 2px -2px; }

.pd-reach__form .ec-mk-form { box-shadow: 0 30px 60px -36px rgb(6 32 46 / 40%); }

/* Three steps in a row rather than five. */
@media (min-width: 1100px) {
  .pd-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ec-space-8); }
  .pd-flow--3 .pd-flow__step:not(:last-child)::after { right: calc(-1 * var(--ec-space-8)); }
}

/* ==========================================================================
   CONTACT, WITH A GLOBE (/contact/)
   A centred head, then the ways to reach a person over a wireframe globe on
   the left and the form in a card on the right. Scoped to .pd-cg, so the
   same lead form keeps its own look on /about/.
   ========================================================================== */

.pd-cg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vh, 5rem) clamp(3rem, 8vh, 5.5rem);
}

.pd-cg::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background-image: radial-gradient(color-mix(in srgb, var(--ec-text) 14%, transparent) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 20%, black, transparent);
  mask-image: radial-gradient(60% 50% at 50% 20%, black, transparent);
}

.pd-cg__head {
  display: flex;
  flex-direction: column;
  gap: var(--ec-space-4);
  align-items: center;
  margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.pd-cg__pill {
  margin: 0;
  padding: 6px 16px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border: 1px solid color-mix(in srgb, var(--ec-accent) 30%, transparent);
  border-radius: var(--ec-radius-full);
}

.pd-cg__title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--ec-text);
  text-wrap: balance;
}

.pd-cg__title .ec-mk-hl { padding: 0; color: var(--ec-accent); font-weight: inherit; background: none; }

.pd-cg__lead {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.pd-cg__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 960px) {
  .pd-cg__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.pd-cg__reach { display: flex; flex-direction: column; gap: var(--ec-space-5); min-width: 0; }

.pd-cg__h3 {
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ec-text);
}

.pd-cg__small {
  max-width: 34ch;
  margin: calc(-1 * var(--ec-space-3)) 0 0;
  font-size: var(--ec-text-sm);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.pd-cg__links { display: grid; gap: var(--ec-space-2); margin: 0; padding: 0; list-style: none; }

.pd-cg__link {
  display: inline-flex;
  gap: var(--ec-space-3);
  align-items: center;
  min-height: 44px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  color: var(--ec-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.pd-cg__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ec-text-muted);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.pd-cg__link:hover { color: var(--ec-text); }

.pd-cg__link:hover .pd-cg__icon {
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-color: color-mix(in srgb, var(--ec-accent) 40%, transparent);
}

.pd-cg__link:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 4px; border-radius: 10px; }

/* The globe's square canvas, cropped to its upper part and faded into the
   page at the foot, the way the reference sets it. */
.pd-cg__globe {
  position: relative;
  height: clamp(220px, 28vw, 300px);
  overflow: hidden;
}

.pd-cg__globe canvas { position: absolute; top: 0; left: 0; display: block; }

.pd-cg__globe::after {
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  content: '';
  pointer-events: none;
  background: linear-gradient(to top, var(--ec-bg), transparent);
}

/* --- The form card ---------------------------------------------------------- */

.pd-cg__card .ec-mk-form {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 20px;
  box-shadow: 0 30px 60px -36px rgb(6 32 46 / 35%);
}

/* The card's title, then a dotted rule under it. !important because the
   title carries Bootstrap's mb-4, which is itself !important. */
.pd-cg__card .ec-mk-form > h2 {
  margin-block-end: var(--ec-space-5) !important;
  padding-block-end: var(--ec-space-5);
  font-family: var(--ec-font-display);
  font-size: 1.25rem;
  background-image: radial-gradient(circle, var(--ec-border-strong) 0.9px, transparent 1px);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 6px 6px;
}

.pd-cg__card .ec-field__label {
  font-size: var(--ec-label-sm);
  font-weight: 700;
  color: var(--ec-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-cg__card .ec-field__label .ec-muted { font-weight: 500; text-transform: none; letter-spacing: 0; }

.pd-cg__card .ec-input,
.pd-cg__card .ec-select {
  background-color: var(--ec-surface-2);
  border-color: var(--ec-border);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pd-cg__card .ec-input:focus,
.pd-cg__card .ec-select:focus {
  border-color: var(--ec-accent);
  box-shadow: 0 0 0 3px var(--ec-accent-soft);
}

.pd-cg__card .ec-btn--primary {
  min-height: 46px;
  padding-inline: var(--ec-space-8);
  border-radius: 12px;
}