/*----------------------------------------*/
/*  Product-launch hero (/products/{slug})
/*  Scoped entirely to .pdh - shares the site's brand tokens, adds no new hues.
/*----------------------------------------*/

.pdh {
  --pdh-red: var(--primary-red, #ed1b24);
  --pdh-navy: var(--theme-blue-color, #212877);
  --pdh-blue: var(--color-primary-two, #0f55dc);
  --pdh-panel: #f5f6f8;
  /* the heading accent; hero.accent in the config sets it per product */
  --pdh-accent: var(--pdh-red);

  position: relative;
  overflow: hidden;
  padding: 128px 0 54px;
  background: linear-gradient(180deg, #e9eafe 0%, #ebf4fd 44%, #ffffff 84%);
  isolation: isolate;
}

/* This hero is light, so the header's white logo variant would be invisible.
   Show the colour logo instead - scoped to this stylesheet, which only loads on
   pages that use this hero. */
.header-area .header-logo .logo01 {
  display: none;
}

.header-area .header-logo .logo02 {
  display: block;
}

/* Solid white navbar. The hero behind it can be a photograph, so the header
   sits on its own bar, flush to the top, instead of floating over the image.
   The scrolled (sticky) copy of the header is already white. */
.header-area.header-transparent {
  top: 0;
  background-color: #ffffff;
  box-shadow: 0 3px 18px rgba(2, 21, 78, 0.06);
}

/* main.css marks the current and hovered menu item with a white pill, which
   disappears on a white bar - tint it instead */
.header-area .main-menu ul li.active > a,
.header-area .main-menu ul li:hover > a {
  background: rgba(33, 40, 119, 0.08);
}

/* ---------- technical backdrop ---------- */
.pdh__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.pdh__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 85, 220, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 85, 220, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(78% 74% at 72% 52%, #000 4%, transparent 74%);
  mask-image: radial-gradient(78% 74% at 72% 52%, #000 4%, transparent 74%);
}

/* Aurora light field.
   A native-CSS port of the Aurora Background component: the same two repeating
   100deg gradients (a white banding pass over a blue/indigo/violet pass), the
   same blur + invert for the light theme, the same difference-blended animated
   layer and the same top-right radial mask. No Tailwind or React required. */
.pdh__aurora {
  --aurora-bands: repeating-linear-gradient(
    100deg,
    #fff 0%,
    #fff 7%,
    transparent 10%,
    transparent 12%,
    #fff 16%
  );
  --aurora-hues: repeating-linear-gradient(
    100deg,
    #3b82f6 10%,
    #a5b4fc 15%,
    #93c5fd 20%,
    #ddd6fe 25%,
    #60a5fa 30%
  );

  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0.62;
  will-change: transform;

  background-image: var(--aurora-bands), var(--aurora-hues);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px) invert(1);

  /* light falls in from the top right, behind the product stage */
  -webkit-mask-image: radial-gradient(ellipse 128% 118% at 92% -6%, #000 12%, transparent 74%);
  mask-image: radial-gradient(ellipse 128% 118% at 92% -6%, #000 12%, transparent 74%);
}

.pdh__aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--aurora-bands), var(--aurora-hues);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: pdh-aurora 60s linear infinite;
}

@keyframes pdh-aurora {
  from {
    background-position: 50% 50%, 50% 50%;
  }

  to {
    background-position: 350% 50%, 350% 50%;
  }
}

/* ---------- 45 / 55 split ----------
   The product shot gets the wider half; its size is driven by that column
   rather than by a height cap, so it grows with the viewport. */
.pdh__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.pdh__copy {
  flex: 0 0 44%;
  max-width: 44%;
}

.pdh__showcase {
  flex: 0 0 56%;
  max-width: 56%;
  position: relative;
  /* reaches past the container toward the viewport edge, which buys the shot
     real width without taking any more from the copy. .pdh clips, so this can
     never put a scrollbar on the page. */
  margin-right: -42px;
}

/* ---------- left column ---------- */
.pdh .pd-breadcrumb {
  margin-bottom: 22px;
}

/* ---------- entrance reveal ----------
   The heading, lead and buttons each fade in from a blur and settle upward, one
   after the other. Applied per block rather than per word, so the copy stays
   plain text inside its own tag. */
.pdh__title,
.pdh__lead,
.pdh__proof,
.pdh__highlights,
.pdh__actions {
  animation: pdh-reveal 0.7s cubic-bezier(0, 0, 0.58, 1) both;
}

.pdh__title {
  animation-delay: 0.05s;
}

.pdh__lead {
  animation-delay: 0.19s;
}

.pdh__proof,
.pdh__highlights {
  animation-delay: 0.33s;
}

.pdh__actions {
  animation-delay: 0.47s;
}

@keyframes pdh-reveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.pdh__title {
  margin: 0;
  /* holds the break at "Wired Water Level / Controller" on wide screens */
  max-width: 9.2em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(38px, 4.1vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--pdh-navy);
}

.pdh__title-accent {
  color: var(--pdh-accent);
}

/* explicit lines (hero.title_lead as a list) set their own breaks */
.pdh__title--lines {
  max-width: none;
}

.pdh__lead {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 31px;
  color: var(--color-default);
}

/* ---------- proof row ----------
   Install count and the watch-video badge, sitting between the lead and the
   buttons. */
.pdh__proof {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
}

/* Supplied red grain texture, with a light sheen over it for depth. The solid
   brand red underneath is the fallback if the texture fails to load. */
.pdh-stat {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  padding: 18px 18px 18px 26px;
  max-width: 470px;
  color: #fff;
  border-radius: 20px;
  background-color: var(--pdh-red);
  background-image: linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 46%,
      rgba(88, 0, 4, 0.24) 100%
    ),
    url("../images/wired-controller/red-card-bg.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 16px 36px rgba(237, 27, 36, 0.22);
}

/* the thin vertical rule down the card's left edge, as in the reference */
.pdh-stat__rule {
  position: absolute;
  left: 13px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.42);
}

.pdh-stat__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.pdh-stat__avatars {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.pdh-stat__avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 12px rgba(120, 12, 16, 0.24);
}

.pdh-stat__avatar + .pdh-stat__avatar {
  margin-left: -10px;
}

.pdh-stat__avatar img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.pdh-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
}

.pdh-stat__text {
  font-size: 12.5px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.9);
}

/* the card can carry a phrase instead of a figure - same card, smaller type so
   three words do not read as a headline */
.pdh-stat--phrase .pdh-stat__value {
  font-size: 19px;
  line-height: 1.24;
  letter-spacing: 0;
}

/* ----- the card carrying the product's headline figure -----
   "Up to / 2 KM / Wireless Range / (Line of Sight)", with a broadcast mark
   pulsing on the left. */
.pdh-stat--usp {
  gap: 18px;
  padding: 16px 16px 16px 28px;
}

.pdh-stat__beacon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--pdh-red);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(120, 12, 16, 0.3);
}

.pdh-stat__beacon svg {
  position: relative;
  width: 30px;
  height: 30px;
  stroke-width: 1.9;
}

.pdh-stat__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  animation: pdh-ring 2.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.pdh-stat__ring + .pdh-stat__ring {
  animation-delay: 1.3s;
}

@keyframes pdh-ring {
  from {
    transform: scale(1);
    opacity: 0.85;
  }

  to {
    transform: scale(1.65);
    opacity: 0;
  }
}

.pdh-stat--usp .pdh-stat__body {
  margin: 0;
  gap: 4px;
}

.pdh-stat__kicker,
.pdh-stat--usp .pdh-stat__text {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

/* the qualifier under the range - smaller, so the figure still leads */
.pdh-stat__note {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.pdh-stat--usp .pdh-stat__value {
  font-size: clamp(36px, 3.3vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

/* ----- watch-video tile -----
   A rounded square on the card's right-hand edge. The old circular badge
   carried its label on a textPath around the rim, which has nowhere to go on a
   square, so the caption sits under the play mark instead. */
.pdh-play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  width: 104px;
  height: 104px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  background: radial-gradient(120% 120% at 30% 20%, #2a3168 0%, #171c46 55%, #0d1030 100%);
  box-shadow: 0 12px 26px rgba(13, 16, 48, 0.34), 0 0 0 4px rgba(255, 255, 255, 0.9);
  transition: transform 0.4s var(--easing), box-shadow 0.4s var(--easing);
}

.pdh-play__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #0d1030;
  background: #fff;
  box-shadow: 0 6px 14px rgba(13, 16, 48, 0.28);
  transition: transform 0.4s var(--easing);
}

.pdh-play__icon svg {
  width: 17px;
  height: 17px;
  margin-left: 2px;
}

.pdh-play__caption {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.pdh-play:hover,
.pdh-play:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(13, 16, 48, 0.42), 0 0 0 4px #ffffff;
}

.pdh-play:hover .pdh-play__icon,
.pdh-play:focus-visible .pdh-play__icon {
  transform: scale(1.08);
}

/* ---------- highlights ----------
   Short selling points in a row, each an outlined icon beside a two-line
   label, in place of the stat card (hero.highlights). */
.pdh__highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.pdh-hl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
}

.pdh-hl:first-child {
  padding-left: 0;
}

.pdh-hl + .pdh-hl {
  border-left: 1px solid rgba(33, 40, 119, 0.14);
}

.pdh-hl__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--pdh-accent);
  background: #ffffff;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(20, 26, 52, 0.08);
}

.pdh-hl__icon svg {
  width: 24px;
  height: 24px;
}

/* min-content puts each word on its own line: "Reliable / Performance" */
.pdh-hl__text {
  width: min-content;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pdh-navy);
}

/* Narrow copy column (small laptops) and phones: too tight for three items
   side by side, so each icon sits above its label in three equal columns. */
@media (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .pdh__highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
  }

  .pdh-hl,
  .pdh-hl:first-child {
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
    text-align: center;
  }

  .pdh-hl__icon {
    width: 44px;
    height: 44px;
  }

  .pdh-hl__icon svg {
    width: 21px;
    height: 21px;
  }

  .pdh-hl__text {
    font-size: 13px;
  }
}

/* ---------- buttons ---------- */
.pdh__actions {
  display: flex;
  flex-wrap: wrap;
  /* stretch, not center: the shiny button is taller than its padding alone
     because the arrow sits on a negative baseline, so let the row equalise the
     two rather than hand-tuning the ghost to match */
  align-items: stretch;
  gap: 12px;
  margin-top: 32px;
}

.pdh__buy-arrow {
  box-sizing: border-box;
  /* the padding is the white ring around the glyph: keep it thin so the arrow
     itself fills the circle rather than floating in the middle of it */
  width: 30px;
  height: 30px;
  padding: 4px;
  margin-left: 12px;
  vertical-align: -10px;
  /* --pdh-navy only exists inside .pdh; without the fallback the arrow
     inherits the button's white and vanishes on its white circle */
  color: var(--pdh-navy, var(--theme-blue-color, #212877));
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.4s var(--easing);
}

.pdh__buy:hover .pdh__buy-arrow,
.pdh__buy:focus-visible .pdh__buy-arrow {
  transform: translateX(4px);
}

/* secondary CTA - sized to sit level with the shiny button */
.pdh__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.95rem + 1px) 1.8rem;
  font-family: "Inter", var(--font-heading), sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
  color: var(--pdh-navy, var(--theme-blue-color, #212877));
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(33, 40, 119, 0.16);
  border-radius: 50px;
  backdrop-filter: blur(6px);
  transition: background 0.35s var(--easing), border-color 0.35s var(--easing),
    transform 0.35s var(--easing);
}

.pdh__ghost:hover,
.pdh__ghost:focus-visible {
  color: var(--pdh-navy, var(--theme-blue-color, #212877));
  background: #ffffff;
  border-color: rgba(33, 40, 119, 0.32);
  transform: translateY(-2px);
}

/* ---------- shiny Buy Now ----------
   Ported from the supplied ShinyButton component. The angle custom properties
   are registered so they can be animated at all - a plain custom property is
   just a string to the animation engine. */
@property --pdh-ga {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --pdh-gao {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pdh__buy {
  --buy-bg: var(--theme-blue-color, #212877);
  --buy-bg-subtle: #2a3390;
  --buy-fg: #ffffff;
  /* bright enough to read against the navy body */
  --buy-highlight: #7d9bff;
  --buy-highlight-subtle: #c8d5ff;
  --buy-animation: pdh-gradient-angle linear infinite;
  --buy-duration: 3s;
  --buy-shadow-size: 2.5px;
  --buy-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  display: inline-block;
  /* The sheen is a square as wide as the button, so on a pill this short it
     hangs well above and below it. The pseudo-elements sit at z-index -1, which
     paints them over the background but still inside the element - they only
     stay inside if the box clips them. */
  overflow: hidden;
  outline-offset: 4px;
  padding: 0.95rem 1.8rem;
  font-family: "Inter", var(--font-heading), sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
  border-radius: 50px;
  color: var(--buy-fg);
  background:
    linear-gradient(var(--buy-bg), var(--buy-bg)) padding-box,
    conic-gradient(
        from calc(var(--pdh-ga) - var(--pdh-gao)),
        transparent 0%,
        var(--buy-highlight) 11%,
        var(--buy-highlight-subtle) 13%,
        transparent 24%
      )
      border-box;
  border: var(--buy-shadow-size) solid transparent;
  box-shadow: 0 14px 30px rgba(20, 26, 52, 0.22);
}

.pdh__buy:hover,
.pdh__buy:focus-visible {
  color: var(--buy-fg);
}

.pdh__buy::before,
.pdh__buy::after,
.pdh__buy span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.pdh__buy:active {
  translate: 0 1px;
}

/* dot pattern */
.pdh__buy::before {
  --size: calc(100% - var(--buy-shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
      circle at var(--position) var(--position),
      #ffffff calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(
    from calc(var(--pdh-ga) + 45deg),
    #000,
    transparent 10% 90%,
    #000
  );
  mask-image: conic-gradient(from calc(var(--pdh-ga) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit;
  opacity: 0.4;
}

/* travelling sheen */
.pdh__buy::after {
  --buy-animation: pdh-shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--buy-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: 0.42;
}

.pdh__buy span {
  z-index: 1;
}

/* breathing glow behind the label */
.pdh__buy span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--buy-highlight);
  opacity: 0;
  transition: opacity var(--buy-transition);
  animation: calc(var(--buy-duration) * 1.5) pdh-breathe linear infinite;
}

.pdh__buy,
.pdh__buy::before,
.pdh__buy::after {
  animation: var(--buy-animation) var(--buy-duration),
    var(--buy-animation) calc(var(--buy-duration) / 0.4) reverse paused;
  animation-composition: add;
}

.pdh__buy:is(:hover, :focus-visible),
.pdh__buy:is(:hover, :focus-visible)::before,
.pdh__buy:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}

.pdh__buy:is(:hover, :focus-visible) span::before {
  opacity: 1;
}

@keyframes pdh-gradient-angle {
  to {
    --pdh-ga: 360deg;
  }
}

@keyframes pdh-shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes pdh-breathe {
  from,
  to {
    scale: 1;
  }

  50% {
    scale: 1.2;
  }
}

/* ----- product shot ----- */
/* No card and no backdrop: the unit sits on the aurora directly, carried by
   its own drop shadow. */
.pdh-media {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the cap is a backstop for very wide screens, not the usual constraint - at
   ordinary widths the column decides the size, so nothing is letterboxed */
.pdh-media img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  filter: drop-shadow(0 26px 42px rgba(20, 26, 52, 0.2));
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .pdh {
    padding: 130px 0 80px;
  }

  .pdh__inner {
    gap: 26px;
  }

  .pdh__proof {
    margin-top: 28px;
  }

  .pdh-stat {
    gap: 16px;
    padding: 16px 16px 16px 24px;
  }

  .pdh-play {
    width: 92px;
    height: 92px;
    border-radius: 16px;
  }

  .pdh-play__icon {
    width: 36px;
    height: 36px;
  }

  .pdh-stat__text {
    font-size: 12px;
    line-height: 17px;
  }

}

/* stack below the point where the desktop nav collapses */
@media (max-width: 991px) {
  .pdh {
    padding: 120px 0 70px;
  }

  .pdh__inner {
    display: block;
  }

  .pdh__copy,
  .pdh__showcase {
    flex: none;
    max-width: none;
    /* stacked: the shot is centred in the column, so no bleed */
    margin-right: 0;
  }

  .pdh__showcase {
    margin-top: 54px;
  }

  /* the section is tall and narrow here, so the bands would read as stripes -
     more blur turns them back into a wash */
  .pdh__aurora {
    opacity: 0.4;
    filter: blur(22px) invert(1);
    -webkit-mask-image: radial-gradient(ellipse 150% 90% at 78% 2%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 150% 90% at 78% 2%, #000 10%, transparent 70%);
  }

  /* background-attachment: fixed is unreliable on mobile browsers */
  .pdh__aurora::after {
    background-attachment: scroll;
  }

  .pdh__grid {
    -webkit-mask-image: radial-gradient(140% 70% at 50% 78%, #000 6%, transparent 72%);
    mask-image: radial-gradient(140% 70% at 50% 78%, #000 6%, transparent 72%);
  }

  .pdh-media img {
    max-height: 560px;
  }

}

@media (max-width: 575px) {
  .pdh {
    padding: 132px 0 52px;
  }

  .pdh__lead {
    font-size: 16px;
    line-height: 27px;
  }

  .pdh__title {
    max-width: none;
  }

  .pdh-stat {
    max-width: none;
    gap: 14px;
    border-radius: 18px;
    padding: 16px 16px 16px 24px;
  }

  .pdh-stat__avatar {
    width: 30px;
    height: 30px;
  }

  .pdh-stat--usp {
    gap: 14px;
  }

  .pdh-stat__beacon {
    width: 50px;
    height: 50px;
  }

  .pdh-stat__beacon svg {
    width: 25px;
    height: 25px;
  }

  .pdh-stat__kicker,
  .pdh-stat--usp .pdh-stat__text {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .pdh-play {
    width: 84px;
    height: 84px;
    border-radius: 15px;
  }

  .pdh-play__icon {
    width: 32px;
    height: 32px;
  }

  .pdh-play__caption {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .pdh__actions {
    gap: 10px;
    margin-top: 28px;
  }

  .pdh__buy,
  .pdh__ghost {
    flex: 1 1 auto;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.95rem;
    text-align: center;
  }

  .pdh-media img {
    max-height: 380px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .pdh__title,
  .pdh__lead,
  .pdh__proof,
  .pdh__highlights,
  .pdh__actions {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .pdh-stat__ring {
    animation: none;
    opacity: 0;
  }

  .pdh-play,
  .pdh-play__icon {
    transition-duration: 0.01ms;
  }

  .pdh-play:hover,
  .pdh-play:focus-visible {
    transform: none;
  }

  .pdh__buy,
  .pdh__buy::before,
  .pdh__buy::after,
  .pdh__buy span::before {
    animation: none;
  }

  .pdh__aurora::after {
    animation: none;
  }
}

/* ---------- photograph background ----------
   Opt in with hero.background in config/products.php.

   The hero is exactly one screen tall. The photo is a real <img> in its own
   layer, starting under the white navbar so the bar never covers the top of
   it. It is sized to the layer's height and anchored bottom right, so its full
   height always shows; anything wider than the screen is trimmed from the left,
   where it is only sky. On a wide, short window the photo is narrower than the
   screen, so its left edge fades into the background instead of ending in a
   hard line. A white wash on the left keeps the copy readable. */
.pdh--photo {
  --pdh-header: 80px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--pdh-header) + 28px) 0 32px;
  background: #ffffff;
}

.pdh__photo-layer {
  position: absolute;
  top: var(--pdh-header);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #eef5fc;
}

/* --pdh-photo-top-fade comes from hero.background.top_fade in the config and
   fades the photo's top edge; at the default there is no fade. */
.pdh__photo-layer img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%),
    linear-gradient(180deg, transparent 0%, #000 var(--pdh-photo-top-fade, 0%));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%),
    linear-gradient(180deg, transparent 0%, #000 var(--pdh-photo-top-fade, 0%));
  mask-composite: intersect;
}

/* ----- 'fit' -----
   For a photo whose product sits near its middle (hero.background.fit). The
   photo is capped at the height where the part right of the product's left
   edge - about 55% of its width - still fits beside the copy column, so the
   product never runs under the text and the right-hand end is never cut off.
   The 2.4:1 photo makes that cap roughly 38vw; the constant keeps a gap of
   40-60px at every desktop width. Any height it leaves above the photo is a
   sky gradient its faded top edge blends into. */
.pdh--photo-fit .pdh__photo-layer {
  background: linear-gradient(180deg, #f7fbff 0%, #e3f0fd 55%, #cfe5fb 100%);
}

.pdh--photo-fit .pdh__photo-layer img {
  height: min(100%, calc(38vw + 30px));
}

/* the white wash, over the photo */
.pdh__photo-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.86) 32%,
    rgba(255, 255, 255, 0.35) 44%,
    rgba(255, 255, 255, 0) 53%
  );
}

/* ----- compact stat card -----
   Icons sit on the same line as the figure, and the video tile is smaller,
   so the card takes roughly two thirds of its usual height and the whole hero
   fits the first screen. The 'usp' card (Up to / 2 KM / ...) keeps its own
   stacked layout - only the padding and the video tile are shared. */
.pdh--photo .pdh-stat {
  gap: 16px;
  padding: 12px 12px 12px 24px;
}

.pdh--photo .pdh-stat__rule {
  top: 12px;
  bottom: 12px;
}

.pdh--photo .pdh-stat:not(.pdh-stat--usp) .pdh-stat__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "avatars value"
    "text text";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
}

.pdh--photo .pdh-stat:not(.pdh-stat--usp) .pdh-stat__avatars {
  grid-area: avatars;
  margin-bottom: 0;
}

.pdh--photo .pdh-stat:not(.pdh-stat--usp) .pdh-stat__value {
  grid-area: value;
}

.pdh--photo .pdh-stat:not(.pdh-stat--usp) .pdh-stat__text {
  grid-area: text;
}

.pdh--photo .pdh-play {
  gap: 5px;
  width: 80px;
  height: 80px;
  border-radius: 15px;
}

.pdh--photo .pdh-play__icon {
  width: 32px;
  height: 32px;
}

.pdh--photo .pdh-play__icon svg {
  width: 14px;
  height: 14px;
}

.pdh--photo .pdh-play__caption {
  font-size: 9px;
  letter-spacing: 0.1em;
}

/* the stacked-layout copy of the photo */
.pdh-photo {
  display: none;
  margin: 0;
}

/* short laptop screens: tighten the spacing so the whole hero still fits
   the first screen */
@media (min-width: 992px) and (max-height: 760px) {
  .pdh--photo {
    padding: calc(var(--pdh-header) + 16px) 0 20px;
  }

  .pdh--photo .pdh__title {
    font-size: clamp(34px, 3.6vw, 50px);
  }

  .pdh--photo .pdh__lead {
    margin-top: 14px;
    font-size: 16px;
    line-height: 27px;
  }

  .pdh--photo .pdh__proof,
  .pdh--photo .pdh__highlights {
    margin-top: 20px;
  }

  .pdh--photo .pdh__actions {
    margin-top: 18px;
  }
}

@media (max-width: 991px) {
  /* stacked: the photo moves under the copy, the section goes back to a
     plain light wash so nothing sits behind the text */
  .pdh--photo {
    display: block;
    min-height: 0;
    padding: 120px 0 70px;
    background: linear-gradient(180deg, #e9f2fc 0%, #ffffff 100%);
  }

  .pdh__photo-layer {
    display: none;
  }

  .pdh-photo {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(20, 26, 52, 0.16);
  }

  /* cropped from the right, where the controller, tank and sensor are */
  .pdh-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: right center;
  }
}

@media (max-width: 575px) {
  .pdh--photo {
    padding: 132px 0 52px;
  }

  .pdh-photo {
    border-radius: 16px;
  }

  .pdh-photo img {
    aspect-ratio: 4 / 3;
  }
}