/* Interactive 3D phone — plumber feature section (desktop only; on mobile the
   .tpfeat__inner is hidden and .tpfeat__mobileimg is shown instead).
   Vanilla port of a Framer code component. Yaw is driven by phone3d.js:
   mapped to the section's scroll progress, plus drag-to-rotate with spring-back.
   Fixed params match the component defaults (maxYaw 48, corner 42, depth 16). */

.phone3d {
  position: relative;
  width: 100%;
  height: clamp(420px, 44vw, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.phone3d__device {
  position: relative;
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
  backface-visibility: hidden;
  cursor: grab;
  will-change: transform;
}
.phone3d.is-dragging .phone3d__device { cursor: grabbing; }

/* Body / metal edges — sits behind the bezel in Z. */
.phone3d__body {
  position: absolute;
  inset: -1.2%;
  border-radius: 42px;
  background: linear-gradient(140deg, #7D8594 0%, #101114 42%, #101114 68%, #7D8594 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.30), inset 0 -1px 1px rgba(0,0,0,.45);
  transform: translateZ(-16px);
}

/* Side buttons */
.phone3d__btn { position: absolute; border-radius: 999px; background: #7D8594; transform: translateZ(-4.8px); }
.phone3d__btn--pwr { right: -1.7%; top: 23%; width: 1.1%; height: 10%; box-shadow: inset 0 0 1px rgba(255,255,255,.4); }
.phone3d__btn--vup { left: -1.6%; top: 20%; width: 1.1%; height: 8%; }
.phone3d__btn--vdn { left: -1.6%; top: 30%; width: 1.1%; height: 14%; }

/* Bezel + screen */
.phone3d__bezel {
  position: absolute;
  inset: 0;
  border-radius: 42px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
  transform: translateZ(0);
}
.phone3d__screen {
  position: absolute;
  left: 1.008%;
  top: .528%;
  width: 97.984%;
  height: 98.944%;
  border-radius: 40px;
  overflow: hidden;
  background: #000;
}
/* fill (not cover) so the screenshot's edges meet the bezel's inner edges exactly. */
.phone3d__screenimg { width: 100%; height: 100%; object-fit: fill; display: block; }

/* Glass highlight */
.phone3d__glass {
  position: absolute;
  inset: 0;
  border-radius: 42px;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 45%, rgba(255,255,255,.05) 100%);
}

/* Contact shadow */
.phone3d__shadow {
  position: absolute;
  width: 58%;
  height: 10%;
  bottom: 6%;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  filter: blur(30px);
  opacity: .38;
  transform: translateZ(-80px);
  pointer-events: none;
}

/* Mobile (<=768px): show the live 3D phone instead of the baked mobile image.
   This file loads only on plumbing.html, so these overrides of the global
   ".tpfeat__inner{display:none}" mobile rule apply to the plumber page alone.
   Mirrors the --anim mobile treatment: white section, stacked (phone on top,
   dark copy below). */
@media (max-width: 768px) {
  .tpfeat { background: #fff; padding: clamp(30px, 7vw, 52px) var(--pad); min-height: 0; }
  .tpfeat__mobileimg { display: none; }
  .tpfeat__inner {
    display: flex; flex-direction: column; align-items: center;
    grid-template-columns: none; gap: clamp(18px, 5vw, 28px); min-height: 0;
  }
  .tpfeat__media { order: -1; width: 100%; min-height: 0; }
  /* Match the mobile feature node (Figma 2309:5163): gray title + sub on white,
     yellow highlight (.tpfeat__title .hl is already --yellow), blue CTA. */
  .tpfeat__copy { color: #707070; text-align: center; }
  .tpfeat__title { color: #707070; }
  .tpfeat__sub { color: #707070; }
  .phone3d { height: auto; }
  .phone3d__device { height: auto; width: min(72%, 300px); }
}