/*
  Passives Direct: shared design layer for the public marketing pages
  ------------------------------------------------------------------
  Load after site.css on every redesigned marketing page, with
  <body class="pd-redesign page-NAME">. Every selector starts with
  `.pd-redesign`, so nothing leaks into pages that do not opt in
  (inventory, product, RFQ/BOM, account and staff pages never load this).

  Contents: tokens, type finish, buttons, hero system (dark + light),
  intro split, dark card band, closing call-to-action band, section
  headings, form panel, scroll reveal, responsive rules.
  Page-specific layout lives in page-NAME.css, scoped to `.page-NAME`.
  Shared header/footer styling is separate (site-header-redesign.css,
  site-footer-redesign.css).
*/

.pd-redesign {
  --pd-teal: #00a0b6;
  --pd-teal-dark: #007f94;
  --pd-teal-deep: #006c80;
  --pd-aqua: #7fe3ee;
  --pd-navy: #0b303c;
  --pd-deep: #06222e;
  --pd-ink: #123440;
  --pd-body: #3a5560;
  --pd-line: #d2e3e7;
  --pd-cut: 76px;
  --pd-hero-min: 500px;
  --pd-tint: .5;
  --pd-tint-video: .92;
  --pd-ease: cubic-bezier(.2, .7, .25, 1);
  --pd-arrow: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E");
  --pd-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E");
  --pd-route-dark-tr: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 760 400%22 fill=%22none%22 stroke=%22%237fe3ee%22 stroke-opacity=%22.16%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 70H190L226 106H380%22/%3E%3Ccircle cx=%22392%22 cy=%22106%22 r=%225%22/%3E%3Cpath d=%22M0 110H120L150 140H260%22/%3E%3Ccircle cx=%22272%22 cy=%22140%22 r=%225%22/%3E%3Cpath d=%22M380 106H452M452 88V124M468 88V124M468 106H600L640 66H760%22/%3E%3Cpath d=%22M120 250H200L210 234L226 266L242 234L258 266L274 234L284 250H400%22/%3E%3Ccircle cx=%22412%22 cy=%22250%22 r=%225%22/%3E%3Crect x=%22520%22 y=%22200%22 width=%22120%22 height=%2290%22 rx=%226%22/%3E%3Cpath d=%22M540 200V170M570 200V170M600 200V170M620 200V170M540 290V320M570 290V320M600 290V320M620 290V320M520 225H490M520 255H490M640 225H670M640 255H670%22/%3E%3Ccircle cx=%22540%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22620%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22480%22 cy=%22225%22 r=%225%22/%3E%3Ccircle cx=%22680%22 cy=%22255%22 r=%225%22/%3E%3Cpath d=%22M540 320V360H300L270 390H0%22/%3E%3Cpath d=%22M620 320V380H760%22/%3E%3Cpath d=%22M480 255H430L400 285%22/%3E%3C/svg%3E");
  --pd-route-dark-bl: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 760 400%22 fill=%22none%22 stroke=%22%237fe3ee%22 stroke-opacity=%22.11%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%28760 400%29 scale%28-1 -1%29%22%3E%3Cpath d=%22M0 70H190L226 106H380%22/%3E%3Ccircle cx=%22392%22 cy=%22106%22 r=%225%22/%3E%3Cpath d=%22M0 110H120L150 140H260%22/%3E%3Ccircle cx=%22272%22 cy=%22140%22 r=%225%22/%3E%3Cpath d=%22M380 106H452M452 88V124M468 88V124M468 106H600L640 66H760%22/%3E%3Cpath d=%22M120 250H200L210 234L226 266L242 234L258 266L274 234L284 250H400%22/%3E%3Ccircle cx=%22412%22 cy=%22250%22 r=%225%22/%3E%3Crect x=%22520%22 y=%22200%22 width=%22120%22 height=%2290%22 rx=%226%22/%3E%3Cpath d=%22M540 200V170M570 200V170M600 200V170M620 200V170M540 290V320M570 290V320M600 290V320M620 290V320M520 225H490M520 255H490M640 225H670M640 255H670%22/%3E%3Ccircle cx=%22540%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22620%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22480%22 cy=%22225%22 r=%225%22/%3E%3Ccircle cx=%22680%22 cy=%22255%22 r=%225%22/%3E%3Cpath d=%22M540 320V360H300L270 390H0%22/%3E%3Cpath d=%22M620 320V380H760%22/%3E%3Cpath d=%22M480 255H430L400 285%22/%3E%3C/g%3E%3C/svg%3E");
  --pd-route-light-tr: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 760 400%22 fill=%22none%22 stroke=%22%2300a0b6%22 stroke-opacity=%22.2%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 70H190L226 106H380%22/%3E%3Ccircle cx=%22392%22 cy=%22106%22 r=%225%22/%3E%3Cpath d=%22M0 110H120L150 140H260%22/%3E%3Ccircle cx=%22272%22 cy=%22140%22 r=%225%22/%3E%3Cpath d=%22M380 106H452M452 88V124M468 88V124M468 106H600L640 66H760%22/%3E%3Cpath d=%22M120 250H200L210 234L226 266L242 234L258 266L274 234L284 250H400%22/%3E%3Ccircle cx=%22412%22 cy=%22250%22 r=%225%22/%3E%3Crect x=%22520%22 y=%22200%22 width=%22120%22 height=%2290%22 rx=%226%22/%3E%3Cpath d=%22M540 200V170M570 200V170M600 200V170M620 200V170M540 290V320M570 290V320M600 290V320M620 290V320M520 225H490M520 255H490M640 225H670M640 255H670%22/%3E%3Ccircle cx=%22540%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22620%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22480%22 cy=%22225%22 r=%225%22/%3E%3Ccircle cx=%22680%22 cy=%22255%22 r=%225%22/%3E%3Cpath d=%22M540 320V360H300L270 390H0%22/%3E%3Cpath d=%22M620 320V380H760%22/%3E%3Cpath d=%22M480 255H430L400 285%22/%3E%3C/svg%3E");
  --pd-route-light-bl: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 760 400%22 fill=%22none%22 stroke=%22%2300a0b6%22 stroke-opacity=%22.14%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%28760 400%29 scale%28-1 -1%29%22%3E%3Cpath d=%22M0 70H190L226 106H380%22/%3E%3Ccircle cx=%22392%22 cy=%22106%22 r=%225%22/%3E%3Cpath d=%22M0 110H120L150 140H260%22/%3E%3Ccircle cx=%22272%22 cy=%22140%22 r=%225%22/%3E%3Cpath d=%22M380 106H452M452 88V124M468 88V124M468 106H600L640 66H760%22/%3E%3Cpath d=%22M120 250H200L210 234L226 266L242 234L258 266L274 234L284 250H400%22/%3E%3Ccircle cx=%22412%22 cy=%22250%22 r=%225%22/%3E%3Crect x=%22520%22 y=%22200%22 width=%22120%22 height=%2290%22 rx=%226%22/%3E%3Cpath d=%22M540 200V170M570 200V170M600 200V170M620 200V170M540 290V320M570 290V320M600 290V320M620 290V320M520 225H490M520 255H490M640 225H670M640 255H670%22/%3E%3Ccircle cx=%22540%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22620%22 cy=%22162%22 r=%225%22/%3E%3Ccircle cx=%22480%22 cy=%22225%22 r=%225%22/%3E%3Ccircle cx=%22680%22 cy=%22255%22 r=%225%22/%3E%3Cpath d=%22M540 320V360H300L270 390H0%22/%3E%3Cpath d=%22M620 320V380H760%22/%3E%3Cpath d=%22M480 255H430L400 285%22/%3E%3C/g%3E%3C/svg%3E");
  --pd-check: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2300a0b6%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E");
  background: #f4f8f9;
}

.pd-redesign h1,
.pd-redesign h2,
.pd-redesign h3 { text-wrap: balance; }
.pd-redesign p { text-wrap: pretty; }
.pd-redesign ::selection { background: #bfeaf0; color: #05212b; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.pd-redesign) { scroll-behavior: smooth; }
}

/* ===============================================================
   BUTTONS
   =============================================================== */
.pd-redesign main .button {
  min-height: 54px;
  padding-inline: 28px;
  border-radius: 3px;
  letter-spacing: .6px;
}

.pd-redesign main .button.primary {
  background: var(--pd-teal-dark);
  border-color: var(--pd-teal-dark);
  color: #fff;
}

.pd-redesign main .button.primary:hover {
  background: var(--pd-teal-deep);
  border-color: var(--pd-teal-deep);
  color: #fff;
}

/* Arrow on primary buttons (skipped where the markup already has one) */
.pd-redesign main .button.primary:not(:has([aria-hidden="true"]))::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 12px;
  background: var(--pd-arrow) center / contain no-repeat;
  transition: transform .25s var(--pd-ease);
}

.pd-redesign main .button.primary:hover::after { transform: translateX(4px); }

.pd-redesign main .button:focus-visible,
.pd-redesign main a:focus-visible {
  outline: 3px solid var(--pd-teal-dark);
  outline-offset: 3px;
}

/* ===============================================================
   EYEBROW
   =============================================================== */
.pd-redesign main .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 2.4px;
}

.pd-redesign main .eyebrow::before {
  content: "";
  position: static;
  flex: none;
  width: 36px;
  height: 3px;
  background: var(--pd-teal);
}

/* ===============================================================
   HERO (dark by default; add .pd-hero-light for the light variant)
   =============================================================== */
.pd-redesign main > .hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: var(--pd-hero-min);
  margin-bottom: calc(var(--pd-cut) * -1);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pd-cut)), 0 100%);
}

.pd-redesign main > .hero .hero-inner {
  position: relative;
  width: calc(100% - 80px);
  max-width: 1280px;
  margin-inline: auto;
  padding-top: 84px;
  padding-bottom: calc(84px + var(--pd-cut));
}

/* Shade behind the text column so large headlines stay legible */
.pd-redesign main > .hero .hero-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  pointer-events: none;
  background: linear-gradient(90deg, #03121bcc 0%, #03121b99 38%, #03121b33 62%, transparent 82%);
}

/* Brand tint: re-colours the photo / video to the teal-and-navy identity while
   keeping its light and dark values. Per-page opacity via --pd-tint. */
.pd-redesign main > .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #0a5f74;
  mix-blend-mode: color;
  opacity: var(--pd-tint);
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .pd-redesign main > .hero::after { opacity: var(--pd-tint-video); }
  .pd-redesign main > .hero video { filter: saturate(.7) contrast(1.06) brightness(.92); }
}

.pd-redesign main > .hero .eyebrow {
  margin-bottom: 24px;
  color: #8ae8ef;
}

.pd-redesign main > .hero .eyebrow::before {
  width: 40px;
  background: linear-gradient(90deg, #3fd0e0, #00a0b6);
}

.pd-redesign main > .hero h1 {
  max-width: 800px;
  margin-bottom: 28px;
  font-size: var(--pd-h1, clamp(40px, 5.8vw, 84px));
  line-height: .98;
  letter-spacing: -.035em;
}

.pd-redesign main > .hero .hero-copy {
  max-width: 560px;
  margin-bottom: 36px;
  padding-left: 20px;
  border-left: 3px solid var(--pd-teal);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  text-shadow: 0 1px 16px #03121b80;
}

.pd-redesign main > .hero .hero-actions {
  flex-wrap: wrap;
  margin-top: 0;
}

.pd-redesign main > .hero .button.primary {
  background: #00a4bb;
  border-color: #28c5d6;
}

.pd-redesign main > .hero .button.primary:hover {
  background: #00869d;
  border-color: #28c5d6;
}

.pd-redesign main > .hero .button.outline {
  color: #fff;
  background: #03121b40;
  border-color: #ffffffb3;
}

.pd-redesign main > .hero .button.outline:hover {
  background: #ffffff24;
  border-color: #fff;
}

.pd-redesign main > .hero a:focus-visible,
.pd-redesign main > .hero .button:focus-visible {
  outline: 3px solid var(--pd-aqua);
  outline-offset: 4px;
}

/* Light hero variant: daylight photography with navy type */
.pd-redesign main > .hero.pd-hero-light { color: var(--pd-ink); }
.pd-redesign main > .hero.pd-hero-light::after { opacity: 0; }

.pd-redesign main > .hero.pd-hero-light .hero-inner::before {
  background: linear-gradient(90deg, #f3f8f9f2 0%, #f3f8f9cc 36%, #f3f8f94d 60%, transparent 80%);
}

.pd-redesign main > .hero.pd-hero-light .eyebrow { color: var(--pd-teal-deep); }
.pd-redesign main > .hero.pd-hero-light .hero-headline .hero-line-first,
.pd-redesign main > .hero.pd-hero-light h1 { color: var(--pd-navy); }
.pd-redesign main > .hero.pd-hero-light .hero-headline .hero-line-third,
.pd-redesign main > .hero.pd-hero-light h1 span { color: var(--pd-teal-dark); }

.pd-redesign main > .hero.pd-hero-light .hero-copy {
  color: #2f4f5b;
  text-shadow: none;
}

.pd-redesign main > .hero.pd-hero-light .button.primary {
  background: var(--pd-teal-dark);
  border-color: var(--pd-teal-dark);
}

.pd-redesign main > .hero.pd-hero-light .button.outline {
  color: var(--pd-navy);
  background: #ffffffb3;
  border-color: #43828f;
}

.pd-redesign main > .hero.pd-hero-light .button.outline:hover { background: #fff; border-color: var(--pd-teal-dark); }

.pd-redesign main > .hero.pd-hero-light a:focus-visible,
.pd-redesign main > .hero.pd-hero-light .button:focus-visible {
  outline-color: var(--pd-teal-dark);
}

@media (max-width: 760px) {
  .pd-redesign main > .hero.pd-hero-light .hero-inner::before {
    background: linear-gradient(180deg, #f3f8f9f5 0%, #f3f8f9e6 60%, #f3f8f9b3 100%);
  }
}

/* The section after a hero starts under its diagonal edge */
.pd-redesign main > .hero + section,
.pd-redesign main > .hero + article {
  padding-top: calc(var(--pd-cut) + 84px);
}

/* ===============================================================
   INTRO SPLIT (.about-story): headline block left, copy right.
   Markup: .container > .pd-split > (.pd-split-head, .pd-split-copy)
   =============================================================== */
.pd-redesign .about-story {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 84px 0 0;
  background:
    radial-gradient(ellipse 55% 45% at 100% 0%, #d4edf1 0%, transparent 70%),
    linear-gradient(180deg, #f8fbfc 0%, #eef5f6 100%);
}

.pd-redesign .about-story:not(:has(.about-values)) { padding-bottom: 84px; }

.pd-redesign .pd-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: 64px;
  align-items: start;
}

.pd-redesign .pd-split-head { padding-top: 7px; }

.pd-redesign .pd-split-head .eyebrow {
  margin: 0 0 20px;
  padding-left: 0;
  color: var(--pd-teal-deep);
}

.pd-redesign .pd-split-head h2 {
  max-width: 640px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(31px, 3.3vw, 47px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--pd-navy);
}

.pd-redesign .pd-split-head h2 span { color: var(--pd-teal-dark); }

/* Schematic under the headline: node, wire, capacitor, wire, node (CSS only) */
.pd-redesign .pd-split-head h2::after {
  content: "";
  display: block;
  width: 280px;
  max-width: 100%;
  height: 24px;
  margin-top: 34px;
  background:
    radial-gradient(circle at 6px 12px, #f3f8f9 0 3.5px, #00a0b6 4px 6px, transparent 6.5px) 0 0 / 12px 24px no-repeat,
    linear-gradient(#00a0b6, #00a0b6) 12px 11px / 116px 2px no-repeat,
    linear-gradient(#00a0b6, #00a0b6) 130px 0 / 3px 24px no-repeat,
    linear-gradient(#00a0b6, #00a0b6) 140px 0 / 3px 24px no-repeat,
    linear-gradient(90deg, #00a0b6, #00a0b640) 143px 11px / 125px 2px no-repeat,
    radial-gradient(circle at 6px 12px, #f3f8f9 0 3.5px, #00a0b680 4px 6px, transparent 6.5px) 268px 0 / 12px 24px no-repeat;
}

.pd-redesign .pd-split-copy {
  padding-left: 44px;
  border-left: 1px solid #b4d0d6;
}

.pd-redesign .pd-split-copy > p {
  max-width: 620px;
  margin: 0;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--pd-body);
}

.pd-redesign .pd-split-copy > p:first-child {
  padding-bottom: 20px;
  font-size: 21px;
  line-height: 1.55;
  font-weight: 500;
  color: #17414f;
}

.pd-redesign .pd-split-copy > p:only-child { padding-bottom: 0; }

/* ===============================================================
   DARK CARD BAND (.about-values): full-bleed navy with circuit routing.
   Icon tile, watermark numeral from a CSS counter, hairline under title.
   =============================================================== */
.pd-redesign .about-story .about-values {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 80px 0 0;
  padding: 84px 0 108px;
  counter-reset: pd-card;
}

.pd-redesign .about-story .about-values::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  margin-left: -50vw;
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, #14697c66 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, #0d556633 0%, transparent 70%),
    var(--pd-route-dark-tr) right -50px top 28px / min(760px, 70vw) auto no-repeat,
    var(--pd-route-dark-bl) left -60px bottom 20px / min(680px, 64vw) auto no-repeat,
    linear-gradient(165deg, #06222e 0%, #0a3445 60%, #0b4253 100%);
}

.pd-redesign .about-story .about-values article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 32px 38px;
  border: 1px solid #7fe3ee29;
  border-top: 1px solid #7fe3ee29;
  border-radius: 6px;
  background:
    linear-gradient(90deg, #3fd0e0, #00a0b6) 0 0 / 72px 3px no-repeat,
    linear-gradient(180deg, #ffffff14, #ffffff08),
    #0a3040;
  box-shadow: 0 18px 40px -22px #000000a6;
  overflow: hidden;
  counter-increment: pd-card;
  transition: background-size .5s var(--pd-ease), border-color .35s ease, box-shadow .35s ease, transform .35s var(--pd-ease);
}

/* Icon tile (a <span class="pd-icon"> with an inline svg, aria-hidden) */
.pd-redesign .about-story .about-values .pd-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  margin-bottom: 30px;
  border-radius: 8px;
  background: linear-gradient(145deg, #14566a, #0d3a4b);
  box-shadow: inset 0 0 0 1px #7fe3ee40;
  color: var(--pd-aqua);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

.pd-redesign .about-story .about-values .pd-icon svg {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd-redesign .about-story .about-values article::after {
  content: counter(pd-card, decimal-leading-zero);
  content: counter(pd-card, decimal-leading-zero) / "";
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: #7fe3ee1f;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.pd-redesign .about-story .about-values h3 {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ffffff1f;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: .25px;
  color: #fff;
}

.pd-redesign .about-story .about-values article p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: #bad6dd;
}

@media (hover: hover) {
  .pd-redesign .about-story .about-values article:hover {
    border-color: #7fe3ee66;
    background-size: 100% 3px, auto, auto;
    box-shadow: 0 26px 50px -22px #000000c4;
  }

  .pd-redesign .about-story .about-values article:hover .pd-icon {
    background: linear-gradient(145deg, #00a0b6, #007f94);
    box-shadow: 0 0 0 1px #7fe3ee, 0 0 26px -4px #7fe3ee80;
    color: #fff;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pd-redesign .about-story .about-values article:hover { transform: translateY(-4px); }
}

.pd-redesign .about-values article:target {
  border-color: var(--pd-aqua);
  box-shadow: 0 0 0 1px var(--pd-aqua), 0 0 44px -8px #7fe3ee80, 0 26px 50px -22px #000000c4;
}

.pd-redesign .about-values article { scroll-margin-top: 36px; }

/* ===============================================================
   CLOSING CALL-TO-ACTION BAND (.product-teaser-feature), light by default
   =============================================================== */
.pd-redesign .product-teaser-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 84px 0;
  color: var(--pd-navy);
  background:
    radial-gradient(ellipse 50% 90% at 100% 0%, #cfeaf0 0%, transparent 70%),
    linear-gradient(115deg, #ffffff 0%, #f0f8fa 60%, #e0f1f5 100%);
  border-block: 1px solid #c4dfe4;
}

.pd-redesign .product-teaser-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--pd-route-light-tr) right -90px center / min(700px, 90vw) auto no-repeat;
}

.pd-redesign .product-teaser-feature::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 400px;
  height: 400px;
  right: -70px;
  top: -135px;
  border: 1px solid #00a0b640;
  border-radius: 50%;
  box-shadow: 0 0 0 45px #00a0b60d, 0 0 0 90px #00a0b608;
  pointer-events: none;
}

.pd-redesign .product-teaser-feature > .container { gap: 56px; }

.pd-redesign .product-teaser-feature .eyebrow { margin-bottom: 18px; color: var(--pd-teal-deep); }

.pd-redesign .product-teaser-feature h2 {
  margin-bottom: 18px;
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.03;
  letter-spacing: -.035em;
  color: var(--pd-navy);
}

.pd-redesign .product-teaser-feature h2 span { color: var(--pd-teal-dark); }

.pd-redesign .product-teaser-feature p:not(.eyebrow) {
  max-width: 560px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--pd-body);
}

.pd-redesign .product-teaser-feature .button {
  min-width: 260px;
  min-height: 58px;
  color: #fff;
  background: var(--pd-teal-dark);
  border-color: var(--pd-teal-dark);
  box-shadow: 0 14px 28px -12px #006c8099;
}

.pd-redesign .product-teaser-feature .button:hover {
  color: #fff;
  background: var(--pd-teal-deep);
  border-color: var(--pd-teal-deep);
}

.pd-redesign .product-teaser-feature a:focus-visible,
.pd-redesign .product-teaser-feature .button:focus-visible { outline-color: var(--pd-teal-dark); }

/* Dark variant: add .pd-cta-dark to the section */
.pd-redesign .product-teaser-feature.pd-cta-dark {
  color: #fff;
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, #14697c80 0%, transparent 65%),
    linear-gradient(165deg, #06222e 0%, #0a3445 60%, #0b4253 100%);
  border-block-color: #1f6074;
}

.pd-redesign .product-teaser-feature.pd-cta-dark::before {
  background: var(--pd-route-dark-tr) right -90px center / min(700px, 90vw) auto no-repeat;
}

.pd-redesign .product-teaser-feature.pd-cta-dark::after { border-color: #7fe3ee33; box-shadow: 0 0 0 45px #7fe3ee0a, 0 0 0 90px #7fe3ee06; }
.pd-redesign .product-teaser-feature.pd-cta-dark .eyebrow { color: #8ae8ef; }
.pd-redesign .product-teaser-feature.pd-cta-dark h2 { color: #fff; }
.pd-redesign .product-teaser-feature.pd-cta-dark h2 span { color: #68dce8; }
.pd-redesign .product-teaser-feature.pd-cta-dark p:not(.eyebrow) { color: #d3e9ee; }

.pd-redesign .product-teaser-feature.pd-cta-dark .button {
  color: var(--pd-navy);
  background: #edfafd;
  border-color: #b9f2f5;
  box-shadow: 0 14px 28px -12px #000000a0;
}

.pd-redesign .product-teaser-feature.pd-cta-dark .button:hover { background: #bceff4; color: #043b4b; }
.pd-redesign .product-teaser-feature.pd-cta-dark .button.primary::after { filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(1200%) hue-rotate(160deg); }
.pd-redesign .product-teaser-feature.pd-cta-dark a:focus-visible,
.pd-redesign .product-teaser-feature.pd-cta-dark .button:focus-visible { outline-color: #fff; }

/* ===============================================================
   SECTION HEADINGS (.section-heading) and plain content links
   =============================================================== */
.pd-redesign .section-heading {
  align-items: end;
  margin-bottom: 44px;
}

.pd-redesign .section-heading .eyebrow { margin-bottom: 18px; color: var(--pd-teal-deep); }

.pd-redesign .section-heading h2 {
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.03;
  letter-spacing: -.035em;
  color: var(--pd-navy);
}

.pd-redesign .section-heading h2 span { color: var(--pd-teal-dark); }

.pd-redesign .section-heading h2::after {
  content: "";
  display: block;
  width: 96px;
  height: 4px;
  margin-top: 22px;
  background: linear-gradient(90deg, #00a0b6, #7fe3ee);
}

.pd-redesign .section-heading > p:not(.eyebrow) {
  max-width: 280px;
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--pd-body);
}

.pd-redesign main p a:not(.button) {
  color: var(--pd-teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.pd-redesign main p a:not(.button):hover { color: var(--pd-teal-deep); }

/* ===============================================================
   FORM PANEL (.contact-form-panel): shared by Contact and Employment
   Placeholders only; submission is handled by the existing back end.
   =============================================================== */
.pd-redesign .contact-form-panel {
  padding: 40px;
  border: 1px solid #cfe7ec;
  border-radius: 14px;
  background: #fff;
  color: var(--pd-ink);
  box-shadow: 0 30px 70px -28px #000000bf, 0 0 0 1px #ffffff1a;
}

.pd-redesign .contact-form-panel .eyebrow { margin-bottom: 14px; color: var(--pd-teal-deep); }

.pd-redesign .contact-form-panel h2 {
  margin: 0 0 12px;
  font-size: 32px;
  letter-spacing: -.03em;
  color: var(--pd-navy);
}

.pd-redesign .contact-form-panel > p:not(.eyebrow) {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pd-body);
}

.pd-redesign .contact-form-panel label {
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #214653;
}

.pd-redesign .contact-form-panel input,
.pd-redesign .contact-form-panel textarea,
.pd-redesign .contact-form-panel select {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 14px 15px;
  border: 1.5px solid #bcd3d9;
  border-radius: 8px;
  background: #f8fbfc;
  color: #173945;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.pd-redesign .contact-form-panel select {
  appearance: none;
  padding-right: 42px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23007f94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 14px center / 16px no-repeat,
    #f8fbfc;
}

.pd-redesign .contact-form-panel textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.pd-redesign .contact-form-panel input::placeholder,
.pd-redesign .contact-form-panel textarea::placeholder { color: #7a949c; opacity: 1; }

.pd-redesign .contact-form-panel input:hover,
.pd-redesign .contact-form-panel textarea:hover,
.pd-redesign .contact-form-panel select:hover { border-color: #88b6c0; }

.pd-redesign .contact-form-panel input:focus,
.pd-redesign .contact-form-panel textarea:focus,
.pd-redesign .contact-form-panel select:focus {
  outline: none;
  border-color: var(--pd-teal-dark);
  background-color: #fff;
  box-shadow: 0 0 0 4px #00a0b633;
}

.pd-redesign .contact-form-panel .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.pd-redesign .contact-form-panel form > p {
  margin: 4px 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #526d77;
}

.pd-redesign .contact-form-panel .button.primary { width: 100%; min-height: 58px; }

.pd-redesign .contact-form-panel [role="status"]:empty { display: none; }

/* Form safety. These rules exist so styling can never reveal anything the
   live form hides (Cloudflare Turnstile's response field, honeypots, [hidden]).
   - `display: block` is applied through :where() (zero specificity), so any
     class, attribute or inline style that hides a field still wins.
   - [hidden] and type="hidden" are re-asserted explicitly, because an author
     `display` value would otherwise override the browser's [hidden] default.
   - No rule here touches iframes, so the Turnstile widget is left alone. */
:where(.pd-redesign .contact-form-panel) label,
:where(.pd-redesign .contact-form-panel) :is(input, textarea, select) { display: block; }

.pd-redesign .contact-form-panel [hidden],
.pd-redesign .contact-form-panel input[type="hidden"] { display: none !important; }

/* A <select> that still carries its original inline style (Employment form):
   the markup is left untouched and overridden here instead. */
.pd-redesign .contact-form-panel select[style] {
  padding: 14px 42px 14px 15px !important;
  border: 1.5px solid #bcd3d9 !important;
  border-radius: 8px !important;
  font: inherit !important;
  font-size: 15px !important;
}

/* ===============================================================
   CONTACT SECTION (.contact-page): dark panel with the form card.
   Shared by Contact and Employment.
   =============================================================== */
.pd-redesign .contact-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: 84px 0 112px;
  color: #fff;
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, #14697c66 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, #0d556633 0%, transparent 70%),
    var(--pd-route-dark-tr) right -50px top 28px / min(760px, 70vw) auto no-repeat,
    var(--pd-route-dark-bl) left -60px bottom 20px / min(680px, 64vw) auto no-repeat,
    linear-gradient(165deg, #06222e 0%, #0a3445 60%, #0b4253 100%);
}

.pd-redesign .contact-page-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}

.pd-redesign .contact-page-copy { padding-top: 12px; }

.pd-redesign .contact-page-copy .eyebrow { margin-bottom: 22px; color: #8ae8ef; }

.pd-redesign .contact-page-copy h1 {
  margin: 0 0 28px;
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1;
  letter-spacing: -.035em;
  color: #fff;
}

.pd-redesign .contact-page-copy h1 span { color: #68dce8; }

.pd-redesign .contact-page-copy h2 {
  margin: 0 0 28px;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: #fff;
}

.pd-redesign .contact-page-copy > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0 0 18px;
  font-size: 17.5px;
  line-height: 1.75;
  color: #cde2e8;
}

.pd-redesign .contact-page-copy > p:not(.eyebrow):first-of-type { font-size: 20px; line-height: 1.6; color: #e6f3f6; }

.pd-redesign .contact-form-panel#sales-inquiry { scroll-margin-top: 40px; }

@media (max-width: 900px) {
  .pd-redesign .contact-page-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pd-redesign .contact-page { padding: 56px 0 72px; }
}

/* ===============================================================
   SCROLL REVEAL (pd-reveal.js adds .is-reveal-ready to <body>)
   =============================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pd-redesign.is-reveal-ready [data-reveal] { opacity: 0; }

  .pd-redesign.is-reveal-ready [data-reveal].is-visible {
    animation: pd-rise .75s var(--pd-ease) both;
    animation-delay: var(--pd-delay, 0ms);
  }

  @keyframes pd-rise {
    from { opacity: 0; translate: 0 26px; }
    to { opacity: 1; translate: 0 0; }
  }

  .pd-redesign [data-reveal]:nth-child(3n + 2) { --pd-delay: 90ms; }
  .pd-redesign [data-reveal]:nth-child(3n) { --pd-delay: 180ms; }
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 1050px) {
  .pd-redesign main > .hero .hero-inner { width: calc(100% - 48px); }
  .pd-redesign .pd-split { column-gap: 44px; }
  .pd-redesign .pd-split-copy { padding-left: 30px; }
  .pd-redesign .about-story .about-values article { padding: 30px 24px 32px; }
  .pd-redesign .about-story .about-values article::after { right: 22px; font-size: 46px; }
}

@media (max-width: 900px) {
  .pd-redesign .pd-split { grid-template-columns: minmax(0, 1fr); }
  .pd-redesign .pd-split-head { padding-top: 0; }
  .pd-redesign .pd-split-head h2 { margin-bottom: 0; }
  .pd-redesign .pd-split-head h2::after { margin-bottom: 30px; }

  .pd-redesign .pd-split-copy {
    max-width: 680px;
    padding-left: 22px;
    border-left: 3px solid var(--pd-teal);
  }

  .pd-redesign .pd-split-copy > p:first-child { font-size: 19px; }

  .pd-redesign .about-story .about-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
    padding: 64px 0 80px;
  }

  .pd-redesign .contact-form-panel { padding: 30px 24px; }
}

@media (max-width: 520px) {
  .pd-redesign .contact-form-panel { padding: 26px 16px; }
}

@media (max-width: 760px) {
  .pd-redesign { --pd-cut: 34px; --pd-hero-min: 460px; }

  .pd-redesign main > .hero .hero-inner {
    width: calc(100% - 36px);
    padding-top: 56px;
    padding-bottom: calc(52px + var(--pd-cut));
  }

  .pd-redesign main > .hero h1 { font-size: clamp(36px, 11vw, 46px); letter-spacing: -.03em; }
  .pd-redesign { --pd-h1: clamp(36px, 11vw, 46px); }

  .pd-redesign main > .hero + section,
  .pd-redesign main > .hero + article { padding-top: calc(var(--pd-cut) + 56px); }

  .pd-redesign .about-story { padding-top: 56px; }
  .pd-redesign .about-story:not(:has(.about-values)) { padding-bottom: 56px; }
  .pd-redesign main > .hero + .about-story { padding-top: calc(var(--pd-cut) + 56px); }

  .pd-redesign .product-teaser-feature { padding: 60px 0; }

  .pd-redesign .product-teaser-feature > .container {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .pd-redesign .product-teaser-feature .button { width: 100%; }
  .pd-redesign .section-heading { flex-direction: column; align-items: flex-start; margin-bottom: 30px; }
  .pd-redesign .contact-form-panel .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .pd-redesign .pd-split-copy > p { font-size: 16.5px; line-height: 1.7; }
  .pd-redesign .pd-split-copy > p:first-child { font-size: 18px; }
  .pd-redesign .pd-split-head h2 { letter-spacing: -.03em; }

  .pd-redesign .about-story .about-values {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 44px;
    padding: 52px 0 64px;
  }

  .pd-redesign .about-story .about-values article { padding: 28px 22px 30px; }
}

@media (max-width: 480px) {
  .pd-redesign main > .hero .hero-actions { flex-direction: column; gap: 12px; }
  .pd-redesign main > .hero .hero-actions .button { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-redesign .button.primary::after,
  .pd-redesign .about-story .about-values article,
  .pd-redesign .about-story .about-values .pd-icon { transition: none; }
  .pd-redesign .button.primary:hover::after { transform: none; }
}

@media print {
  .pd-redesign [data-reveal] { opacity: 1 !important; animation: none !important; translate: none; }
  .pd-redesign .about-story .about-values article { break-inside: avoid; }
}