/* =====================================================================
   Sargam — Products area (overview + six detail pages)
   Scoped to .pd only. Does not affect the homepage or the About page.
   ===================================================================== */

.pd {
  --pd-navy: #0d2436;
  --pd-navy-deep: #081b2e;
  --pd-red: #b5091d;
  --pd-red-dark: #900717;
  --pd-ink: #202428;
  --pd-charcoal: #202428;
  --pd-charcoal-soft: #374047;
  --pd-body: #4a5762;
  --pd-line: #e3e7ec;
  --pd-off: #f6f6f4;
  --pd-accent: #0d2436;

  font-family: "Switzer", "Switzer Variable", Arial, sans-serif;
  color: var(--pd-ink);
  background: #fff;
  overflow-x: hidden;
}

.pd-accent-navy { --pd-accent: #0d2436; }
.pd-accent-steel { --pd-accent: #2b3a46; }
.pd-accent-sea { --pd-accent: #10394d; }

.pd * { box-sizing: border-box; }

.pd-wrap {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
}

.pd-section { padding: 78px 0; }
.pd-section + .pd-section { padding-top: 0; }

.pd h1,
.pd h2 {
  font-family: inherit;
  color: var(--pd-ink);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

.pd h1 { font-size: 54px; font-weight: 700; }
.pd h2 { font-size: 34px; font-weight: 700; }

.pd p { color: var(--pd-body); font-size: 17px; line-height: 1.65; margin: 0 0 14px; }

.pd-lede { font-size: 18px; max-width: 780px; }

.pd-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pd-red);
  margin-bottom: 12px;
}

.pd-eyebrow-light { color: #ff8f9c; }

.pd-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}

.pd-numeral {
  display: block;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(32, 36, 40, 0.12);
  margin-bottom: 8px;
}

.pd-numeral-light { color: rgba(255, 255, 255, 0.16); }

/* --------------------------- Reveal engine -------------------------- */

.pd-rv.is-armed {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    clip-path 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-rv.is-armed.is-in { opacity: 1; transform: none; }

.pd-rv-mask.is-armed { clip-path: inset(0 0 14% 0); }
.pd-rv-mask.is-armed.is-in { clip-path: inset(0 0 0 0); }

.pd-rv-stagger.is-armed { opacity: 1; transform: none; }
.pd-rv-stagger.is-armed > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pd-rv-stagger.is-armed.is-in > * { opacity: 1; transform: none; }
.pd-rv-stagger.is-armed > *:nth-child(2) { transition-delay: 80ms; }
.pd-rv-stagger.is-armed > *:nth-child(3) { transition-delay: 160ms; }
.pd-rv-stagger.is-armed > *:nth-child(4) { transition-delay: 240ms; }
.pd-rv-stagger.is-armed > *:nth-child(5) { transition-delay: 320ms; }
.pd-rv-stagger.is-armed > *:nth-child(6) { transition-delay: 400ms; }

/* ------------------------------ CTA ------------------------------ */

.pd-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px;
  border-radius: 2px;
  background: var(--pd-red);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--pd-red);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease, color 0.25s ease;
}

.pd-cta svg { transition: transform 0.25s ease; }
.pd-cta:hover svg { transform: translateX(4px); }

.pd-cta:hover {
  background: var(--pd-red-dark);
  border-color: var(--pd-red-dark);
  color: #fff !important;
  transform: translateY(-2px);
}

.pd-cta-ghost {
  background: transparent;
  color: var(--pd-charcoal) !important;
  border-color: rgba(32, 36, 40, 0.28);
}

.pd-cta-ghost:hover {
  background: var(--pd-charcoal);
  border-color: var(--pd-charcoal);
  color: #fff !important;
}

.pd-cta-light {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55);
}

.pd-cta-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--pd-charcoal) !important;
}

.pd a:focus-visible,
.pd button:focus-visible {
  outline: 2px solid var(--pd-red);
  outline-offset: 3px;
}

/* --------------------------- Breadcrumbs --------------------------- */

.pd-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: 13px;
}

.pd-crumbs li { color: rgba(255, 255, 255, 0.72); }
.pd-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.55; }
.pd-crumbs a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.pd-crumbs a:hover { text-decoration: underline; }

/* ------------------------------ Hero ------------------------------ */

.pd-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--pd-navy-deep);
}

.pd-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  animation: pd-hero-settle 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes pd-hero-settle {
  to { transform: scale(1); }
}

.pd-slug-sacrificial-anodes .pd-hero-bg { object-position: center 45%; }
.pd-slug-iccp-systems .pd-hero-bg { object-position: center 40%; }
.pd-slug-low-signature-iccp .pd-hero-bg { object-position: center 42%; }
.pd-slug-mgps-icaf .pd-hero-bg { object-position: center 45%; }
.pd-slug-propeller-shaft-grounding .pd-hero-bg { object-position: center 40%; }
.pd-slug-active-shaft-grounding .pd-hero-bg { object-position: center 42%; }

/* Narrower directional scrim keeps more of each unique image visible. */
.pd-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(8, 27, 46, 0.9) 0%, rgba(8, 27, 46, 0.62) 34%, rgba(8, 27, 46, 0) 66%),
    linear-gradient(0deg, rgba(8, 27, 46, 0.78) 0%, rgba(8, 27, 46, 0) 52%);
}

.pd-hero-rule {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6px;
  height: 42%;
  background: var(--pd-red);
}

.pd-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 126px 32px 70px;
}

.pd-hero h1 { color: #fff; max-width: 15ch; }

.pd-hero-lede {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 19px;
  max-width: 600px;
  margin-bottom: 30px;
}

.pd-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.pd-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.pd-scroll-cue-line {
  position: absolute;
  inset: 0;
  background: var(--pd-red);
  animation: pd-cue 2.1s ease-in-out infinite;
}

@keyframes pd-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ------------------- Proof facts — instrumentation ------------------- */

.pd-glance {
  background: var(--pd-charcoal);
  border-top: 3px solid var(--pd-red);
}

.pd-glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.pd-glance-item {
  position: relative;
  padding: 34px 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.pd-glance-item:first-child { border-left: 0; padding-left: 0; }

.pd-glance-item::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: 22px;
  width: 26px;
  height: 2px;
  background: var(--pd-red);
}

.pd-glance-item:first-child::after { left: 0; }

.pd-glance-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.pd-glance-value {
  display: block;
  color: #fff;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  padding-bottom: 28px;
}

/* ------------------ Challenge / response — editorial ----------------- */

.pd-problem { padding-top: 96px; }

.pd-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

.pd-problem-copy {
  background: var(--pd-off);
  padding: 56px 64px 56px 0;
}

.pd-problem-copy h2 { font-size: 28px; }

.pd-problem-copy::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--pd-red);
  margin-bottom: 22px;
}

.pd-problem-panel {
  position: relative;
  background: var(--pd-charcoal);
  padding: 56px 52px;
  margin-top: 44px;
  margin-left: -40px;
  border-left: 4px solid var(--pd-red);
}

.pd-problem-panel h2 { color: #fff; font-size: 28px; }
.pd-problem-panel p { color: rgba(255, 255, 255, 0.76); margin: 0; }

/* ------------------------ How it works — line ------------------------ */

.pd-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 34px 0 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.pd-steps::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pd-line);
}

.pd-steps::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--pd-red);
  transition: width 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}

.pd-steps.is-in::after,
.pd-steps:not(.is-armed)::after { width: 100%; }

.pd-step { position: relative; padding-right: 8px; }

.pd-step::before {
  content: "";
  position: absolute;
  top: -39px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--pd-red);
}

.pd-step-num {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pd-charcoal);
  margin-bottom: 14px;
}

.pd-step p { margin: 0; font-size: 16px; }

/* --------------------- Feature block — overlapping -------------------- */

.pd-feature-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
}

.pd-feature-media {
  margin: 0;
  overflow: hidden;
  background: var(--pd-off);
}

.pd-feature-media img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: 50% 45%;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-feature-copy {
  position: relative;
  z-index: 1;
  background: var(--pd-off);
  padding: 48px 44px;
  margin-left: -68px;
}

.pd-feature-copy h2 { font-size: 30px; }

.pd-feature-mirror .pd-feature-grid { grid-template-columns: 40% 60%; }
.pd-feature-mirror .pd-feature-media { order: 2; }
.pd-feature-mirror .pd-feature-copy { order: 1; margin-left: 0; margin-right: -68px; }

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

.pd-feature-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--pd-body);
}

.pd-feature-rule {
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  margin-top: 13px;
  background: var(--pd-red);
}

/* -------------------------- Visual interlude -------------------------- */

.pd-interlude {
  position: relative;
  margin-top: 72px;
  min-height: 280px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--pd-charcoal);
}

.pd-interlude-bg {
  position: absolute;
  inset: -6% 0;
  background-size: cover;
  background-position: center 45%;
  animation: pd-drift 22s ease-in-out infinite alternate;
}

@keyframes pd-drift {
  from { transform: scale(1.05) translateY(-1%); }
  to { transform: scale(1.12) translateY(1%); }
}

.pd-interlude-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 36, 54, 0.9) 0%, rgba(13, 36, 54, 0.6) 60%, rgba(13, 36, 54, 0.4) 100%);
}

.pd-interlude-inner {
  position: relative;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 48px 32px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}

.pd-interlude-copy {
  border-left: 3px solid var(--pd-red);
  padding-left: 28px;
}

.pd-interlude-copy h2 {
  color: #fff;
  font-size: 25px;
  line-height: 1.4;
  font-weight: 600;
  max-width: 24ch;
  margin: 0;
}

.pd-interlude-apps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-interlude-apps li {
  min-height: 64px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.45;
}

.pd-interlude-apps li span {
  display: block;
  margin-bottom: 4px;
  color: #ff8f9c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* --------------------- Applications — typographic --------------------- */

.pd-apps .pd-app-grid {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 44px;
  row-gap: 0;
}

.pd-app {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 22px 0 20px;
  border-top: 1px solid var(--pd-line);
  transition: border-color 0.3s ease;
}

.pd-app:hover { border-top-color: var(--pd-red); }

.pd-app-index {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pd-red);
}

.pd-app-text { font-size: 16.5px; line-height: 1.5; color: var(--pd-ink); }

/* ---------------------- Related — editorial tiles ---------------------- */

.pd-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 30px;
}

.pd-related-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--pd-charcoal);
  text-decoration: none;
  color: inherit;
  min-height: 340px;
}

.pd-related-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.pd-related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-related-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 24, 28, 0.92) 8%, rgba(20, 24, 28, 0.32) 58%, rgba(20, 24, 28, 0.12) 100%);
}

.pd-related-card:hover .pd-related-media img,
.pd-related-card:focus-visible .pd-related-media img { transform: scale(1.06); }

.pd-related-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 28px 26px;
  border-left: 3px solid var(--pd-red);
}

.pd-related-group {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff8f9c;
  margin-bottom: 8px;
}

.pd-related-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.pd-related-link,
.pd-ov-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.pd-related-link svg,
.pd-ov-link svg { transition: transform 0.3s ease; }
.pd-related-card:hover .pd-related-link svg,
.pd-ov-card:hover .pd-ov-link svg,
.pd-ov-challenge:hover .pd-ov-link svg { transform: translateX(5px); }

/* ------------------------- Final CTA — red block ------------------------ */

.pd-enquiry {
  position: relative;
  margin-top: 72px;
  padding: 72px 0;
  background: var(--pd-red);
  overflow: hidden;
}

.pd-enquiry-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0.16;
  mix-blend-mode: luminosity;
}

.pd-enquiry::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 26%;
  background: var(--pd-charcoal);
}

.pd-enquiry-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: center;
  gap: 48px;
}

.pd-enquiry h2 { color: #fff; font-size: 34px; margin-bottom: 12px; max-width: 22ch; }
.pd-enquiry p { color: rgba(255, 255, 255, 0.85); max-width: 620px; margin: 0; }

.pd-enquiry-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.pd-enquiry-actions .pd-cta { justify-content: space-between; }

/* =============================== Overview =========================== */

.pd-ov-hero {
  position: relative;
  background: var(--pd-navy-deep);
  padding: 168px 0 92px;
  overflow: hidden;
}

.pd-ov-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.pd-ov-mosaic-cell { display: block; overflow: hidden; }
.pd-ov-mosaic-cell img { width: 100%; height: 100%; object-fit: cover; }
.pd-ov-mosaic-cell:nth-child(even) img { transform: scale(1.08); }

.pd-ov-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(94deg, rgba(8, 27, 46, 0.96) 0%, rgba(8, 27, 46, 0.86) 42%, rgba(8, 27, 46, 0.5) 100%);
}

.pd-ov-hero-inner { position: relative; }

.pd-ov-hero h1 { color: #fff; max-width: 18ch; }

.pd-ov-hero .pd-hero-lede {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 19px;
  max-width: 660px;
  margin-bottom: 30px;
}

.pd-ov-challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 30px;
}

.pd-ov-challenge {
  position: relative;
  display: block;
  min-height: 320px;
  overflow: hidden;
  background: var(--pd-off);
  border-top: 3px solid var(--pd-red);
  text-decoration: none;
  color: inherit;
  transition: background 0.4s ease;
}

.pd-ov-challenge-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-ov-challenge:hover .pd-ov-challenge-bg,
.pd-ov-challenge:focus-visible .pd-ov-challenge-bg { opacity: 1; transform: scale(1); }

.pd-ov-challenge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 24, 28, 0.9) 10%, rgba(20, 24, 28, 0.45) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.pd-ov-challenge:hover::after,
.pd-ov-challenge:focus-visible::after { opacity: 1; }

.pd-ov-challenge-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
  padding: 34px 30px;
}

.pd-ov-challenge-index {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pd-red);
  margin-bottom: 16px;
}

.pd-ov-challenge-title {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
}

.pd-ov-challenge-text {
  display: block;
  color: var(--pd-body);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.pd-ov-challenge .pd-ov-link { margin-top: auto; color: var(--pd-charcoal); }

.pd-ov-challenge:hover .pd-ov-challenge-title,
.pd-ov-challenge:hover .pd-ov-challenge-text,
.pd-ov-challenge:hover .pd-ov-link,
.pd-ov-challenge:focus-visible .pd-ov-challenge-title,
.pd-ov-challenge:focus-visible .pd-ov-challenge-text,
.pd-ov-challenge:focus-visible .pd-ov-link { color: #fff; }

.pd-ov-group-dark { background: var(--pd-charcoal); }
.pd-ov-group-dark h2 { color: #fff; }
.pd-ov-group-dark .pd-ov-text { color: rgba(255, 255, 255, 0.74); }
.pd-ov-group-dark .pd-ov-body { background: transparent; }
.pd-ov-group-dark .pd-ov-link { color: #fff; }

.pd-section.pd-ov-group-dark { padding: 96px 0; }

.pd-ov-head { margin-bottom: 30px; }
.pd-ov-head h2 { font-size: 30px; max-width: 900px; }

.pd-ov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 4px;
}

.pd-ov-grid > *:nth-child(even) { align-self: end; }

.pd-ov-card {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.pd-ov-media {
  position: relative;
  display: block;
  height: 320px;
  overflow: hidden;
  background: var(--pd-off);
}

.pd-ov-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-ov-card:hover .pd-ov-media img,
.pd-ov-card:focus-visible .pd-ov-media img { transform: scale(1.06); }

.pd-ov-media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 24, 28, 0.9) 6%, rgba(20, 24, 28, 0.2) 60%, rgba(20, 24, 28, 0.05) 100%);
}

.pd-ov-kicker {
  position: absolute;
  left: 26px;
  bottom: 54px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff8f9c;
}

.pd-ov-title {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.pd-ov-body {
  display: block;
  padding: 22px 26px 4px;
  border-left: 3px solid var(--pd-red);
}

.pd-ov-text { display: block; color: var(--pd-body); font-size: 15.5px; line-height: 1.6; margin-bottom: 14px; }
.pd-ov-card .pd-ov-link { color: var(--pd-charcoal); }
.pd-ov-group-dark .pd-ov-card .pd-ov-link { color: #fff; }

/* ============================ Responsive ============================ */

@media (max-width: 1200px) {
  .pd h1 { font-size: 44px; }
  .pd-feature-copy { margin-left: -40px; padding: 40px 34px; }
  .pd-feature-mirror .pd-feature-copy { margin-right: -40px; }
}

@media (max-width: 1024px) {
  .pd-section,
  .pd-section.pd-ov-group-dark { padding: 72px 0; }
  .pd h1 { font-size: 38px; }
  .pd h2 { font-size: 29px; }
  .pd-hero { min-height: 510px; }
  .pd-hero-inner { padding: 112px 28px 64px; }
  .pd-wrap { padding: 0 28px; }
  .pd-problem-grid { grid-template-columns: 1fr; }
  .pd-problem-copy { padding: 40px 32px; }
  .pd-problem-panel { margin: 0; padding: 40px 32px; }
  .pd-feature-grid,
  .pd-feature-mirror .pd-feature-grid { grid-template-columns: 1fr; }
  .pd-feature-media,
  .pd-feature-mirror .pd-feature-media { order: 1; }
  .pd-feature-copy,
  .pd-feature-mirror .pd-feature-copy { order: 2; margin: -40px 24px 0; }
  .pd-feature-media img { height: 380px; }
  .pd-ov-grid,
  .pd-related,
  .pd-ov-challenge-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-ov-grid > *:nth-child(even) { align-self: stretch; }
  .pd-apps .pd-app-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
  .pd-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pd-interlude-copy h2 { font-size: 22px; max-width: 26ch; }
  .pd-enquiry-inner { grid-template-columns: 1fr; }
  .pd-enquiry-actions { flex-direction: row; flex-wrap: wrap; }
  .pd-enquiry::after { display: none; }
}

@media (max-width: 768px) {
  .pd-section,
  .pd-section.pd-ov-group-dark { padding: 58px 0; }
  .pd-glance-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(228px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .pd-glance-item { scroll-snap-align: start; padding: 26px 24px; }
  .pd-glance-value { font-size: 19px; }
  .pd-ov-hero { padding: 136px 0 68px; }
  .pd-ov-mosaic { grid-template-columns: repeat(3, 1fr); }
  .pd-steps { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 26px; }
  .pd-steps::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; }
  .pd-steps::after { width: 2px; height: 0; transition: height 1.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .pd-steps.is-in::after,
  .pd-steps:not(.is-armed)::after { width: 2px; height: 100%; }
  .pd-step { padding: 0 0 26px; }
  .pd-step::before { top: 8px; left: -31px; }
  .pd-step-num { font-size: 30px; }
}

@media (max-width: 600px) {
  .pd h1 { font-size: 31px; }
  .pd h2 { font-size: 24px; }
  .pd-wrap { padding: 0 20px; }
  .pd-hero { min-height: 500px; }
  .pd-hero-inner { padding: 88px 20px 56px; }
  .pd-hero-lede { font-size: 17px; }
  .pd-hero-actions { flex-direction: column; align-items: stretch; }
  .pd-section,
  .pd-section.pd-ov-group-dark { padding: 56px 0; }
  .pd-numeral { font-size: 48px; }
  .pd-problem-copy,
  .pd-problem-panel { padding: 32px 22px; }
  .pd-problem-copy h2,
  .pd-problem-panel h2 { font-size: 22px; }
  .pd-related,
  .pd-ov-grid,
  .pd-ov-challenge-grid { grid-template-columns: 1fr; }
  .pd-apps .pd-app-grid { grid-template-columns: 1fr; }
  .pd-feature-media img { height: 260px; }
  .pd-feature-copy,
  .pd-feature-mirror .pd-feature-copy { margin: -28px 14px 0; padding: 28px 22px; }
  .pd-cta { width: 100%; justify-content: center; padding: 0 20px; }
  .pd-enquiry-actions .pd-cta { justify-content: center; }
  .pd-interlude { margin-top: 52px; min-height: 0; }
  .pd-interlude-inner { grid-template-columns: 1fr; gap: 30px; padding: 44px 20px; }
  .pd-interlude-apps { grid-template-columns: 1fr 1fr; }
  .pd-interlude-inner { padding: 40px 20px; }
  .pd-interlude-inner p { font-size: 19px; padding-left: 18px; }
  .pd-enquiry { margin-top: 56px; padding: 56px 0; }
  .pd-enquiry h2 { font-size: 26px; }
  .pd-ov-challenge,
  .pd-ov-challenge-inner { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd *,
  .pd *::before,
  .pd *::after {
    transition: none !important;
    animation: none !important;
  }
  .pd-hero-bg { transform: none; }
  .pd-steps::after { width: 100%; }
}

/* =====================================================================
   System-in-motion artwork, technical feature composition and overlays
   ===================================================================== */

.pd-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 420;
  color: #dfe4e8;
}

.pd-art-grid { opacity: 0.55; }
.pd-art-hull { opacity: 0.96; }

.pd-art-tag {
  font-family: "Switzer", "Switzer Variable", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  fill: #5c6a75;
}
.pd-art-tag-red { fill: var(--pd-red); }

/* delays shared by all illustrations */
.pd-art-delay-0 { animation-delay: 0s; }
.pd-art-delay-1 { animation-delay: 0.4s; }
.pd-art-delay-2 { animation-delay: 0.8s; }
.pd-art-delay-3 { animation-delay: 1.2s; }

/* particles / ions */
.pd-art-particle {
  opacity: 0;
  animation: pd-rise 2.8s ease-in-out infinite;
}
@keyframes pd-rise {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-92px); }
}

.pd-art-arc {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: pd-dash 3.4s ease-in-out infinite;
  opacity: 0.75;
}
@keyframes pd-dash {
  0% { stroke-dashoffset: 160; opacity: 0; }
  25% { opacity: 0.85; }
  70% { stroke-dashoffset: 0; opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.pd-art-anode rect:first-child { animation: pd-charge 3.6s ease-in-out infinite; }
@keyframes pd-charge {
  0%, 100% { fill: #b9c1c6; }
  50% { fill: #d7dcdf; }
}

.pd-art-current {
  stroke-dasharray: 10 12;
  animation: pd-flowdash 1.6s linear infinite;
}
.pd-art-signal {
  stroke-dasharray: 4 10;
  animation: pd-flowdash 2.6s linear infinite reverse;
}
@keyframes pd-flowdash {
  to { stroke-dashoffset: -44; }
}

.pd-art-channel {
  stroke-dasharray: 6 10;
  opacity: 0.85;
  animation: pd-flowdash 2.2s linear infinite;
}

.pd-art-node,
.pd-art-led { animation: pd-pulse 2.4s ease-in-out infinite; }
@keyframes pd-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.pd-art-wave { animation: pd-ripple 4s ease-in-out infinite; }
@keyframes pd-ripple {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.pd-art-module rect { transition: fill 0.3s ease; }

.pd-art-ion {
  stroke-dasharray: 14 26;
  animation: pd-flowdash 2s linear infinite;
}
.pd-art-spore {
  animation: pd-repel 3.2s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes pd-repel {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(16px); opacity: 0.12; }
}

.pd-art-ring {
  stroke-dasharray: 26 30;
  transform-origin: center;
  transform-box: fill-box;
  animation: pd-spin 8s linear infinite;
}
.pd-art-ring-slow { animation-duration: 14s; animation-direction: reverse; }
@keyframes pd-spin { to { transform: rotate(360deg); } }

/* ---------------------- System in motion section ---------------------- */

.pd-system-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.pd-system-stage {
  position: relative;
  background: linear-gradient(180deg, #fbfbfa 0%, #f2f4f5 100%);
  border: 1px solid var(--pd-line);
  padding: 22px;
  overflow: hidden;
}

.pd-system-copy h2 {
  font-size: 28px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 6px 0 22px;
}

.pd-system-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pd-system-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  color: var(--pd-body);
}

.pd-legend-key {
  flex: 0 0 auto;
  width: 26px;
  height: 3px;
  background: var(--pd-red);
}
.pd-legend-signal { background: #16324a; }
.pd-legend-flow { background: #8a949c; }
.pd-legend-metal { background: #b46a3c; }

/* ------------------ Equipment stage (feature block) ------------------- */

.pd-stage {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--pd-line);
}

.pd-stage img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-stage-dark { background: #0d2436; border-color: rgba(255, 255, 255, 0.08); }
.pd-stage-light { background: var(--pd-off); }

.pd-stage-cover img { object-fit: cover; object-position: center; }

.pd-stage-contain img {
  object-fit: contain;
  padding: 4%;
}
.pd-stage-light.pd-stage-contain img { padding: 12%; }

.pd-feature-media:hover .pd-stage img { transform: scale(1.02); }

.pd-stage-caption {
  display: grid;
  gap: 10px;
  padding: 16px 2px 0;
}

.pd-stage-caption-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pd-body);
}

.pd-stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.pd-stage-tags span {
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--pd-charcoal-soft);
}


/* ---------------------- Interlude — technical band -------------------- */

.pd-interlude-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4%;
}

.pd-interlude-art .pd-art {
  width: min(52%, 640px);
  max-height: 88%;
  color: rgba(255, 255, 255, 0.14);
  opacity: 0.9;
}
.pd-interlude-art .pd-art-tag { fill: rgba(255, 255, 255, 0.5); }
.pd-interlude-art .pd-art-tag-red { fill: #e0687a; }

.pd-interlude-scrim {
  background: linear-gradient(90deg, rgba(13, 36, 54, 0.96) 0%, rgba(13, 36, 54, 0.82) 55%, rgba(13, 36, 54, 0.55) 100%);
}

/* --------------------- Overview card overlays ------------------------- */

.pd-ov-overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  color: rgba(255, 255, 255, 0.55);
  stroke: currentColor;
  fill: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.pd-ov-card:hover .pd-ov-overlay,
.pd-ov-card:focus-visible .pd-ov-overlay { opacity: 1; }

.pd-ov-ion {
  stroke-dasharray: 8 12;
  animation: pd-flowdash 1.8s linear infinite;
}


/* ------------------------------ Responsive ---------------------------- */

@media (max-width: 1024px) {
  .pd-system-grid { grid-template-columns: 1fr; gap: 32px; }
  .pd-interlude-art .pd-art { width: 62%; }
}

@media (max-width: 640px) {
  .pd-interlude-art { justify-content: center; padding: 0; }
  .pd-interlude-art .pd-art { width: 100%; }
  .pd-system-copy h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-art-particle,
  .pd-art-arc,
  .pd-art-current,
  .pd-art-signal,
  .pd-art-channel,
  .pd-art-node,
  .pd-art-led,
  .pd-art-wave,
  .pd-art-ion,
  .pd-art-spore,
  .pd-art-ring,
  .pd-ov-ion,
  .pd-art-anode rect:first-child {
    animation: none !important;
  }
  .pd-art-particle { opacity: 0.85; }
  .pd-art-arc { stroke-dashoffset: 0; opacity: 0.6; }
  .pd-art-node,
  .pd-art-led { opacity: 1; }
  .pd-ov-overlay { opacity: 1; }
}

/* Stage-based feature blocks: no overlap pull-up on small screens */
@media (max-width: 900px) {
  .pd-feature-grid:has(.pd-stage) .pd-feature-copy,
  .pd-feature-mirror .pd-feature-grid:has(.pd-stage) .pd-feature-copy {
    margin: 24px 0 0;
  }
}

/* ---------------- Corrective pass — QA findings ----------------------- */

/* Overview card caption: normal flow so wrapped titles never overlap */
.pd-ov-caption {
  position: absolute;
  z-index: 3;
  left: 26px;
  right: 26px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pd-ov-kicker,
.pd-ov-title {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
}

/* Quieter mid-page CTA */
.pd-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pd-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}

.pd-textlink:hover { opacity: 0.72; }

/* Mobile proof facts: stack instead of a clipped horizontal rail */
@media (max-width: 600px) {
  .pd-glance-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .pd-glance-item {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px 0 20px;
  }
  .pd-glance-item:first-child { border-top: 0; }
  .pd-glance-item::after { left: 0; bottom: 14px; }
  .pd-glance-value { padding-bottom: 22px; }
}

/* Interlude band: less empty space, no ghost art crowding on mobile */
.pd-interlude-inner p { max-width: 28ch; }

@media (max-width: 768px) {
  .pd-interlude-art { display: none; }
  .pd-interlude { min-height: 220px; }
  .pd-interlude-scrim {
    background: linear-gradient(90deg, rgba(13, 36, 54, 0.94) 0%, rgba(13, 36, 54, 0.88) 100%);
  }
  .pd-interlude-inner p { max-width: none; }
}

/* Stage image proportions on small screens */
@media (max-width: 600px) {
  .pd-stage { aspect-ratio: 4 / 3; }
  .pd-stage-light.pd-stage-contain img { padding: 8%; }
}