:root {
  --white: #f7fbfd;
  --muted: #b9cbd4;
  --cyan: #62cdf8;
  --cyan-soft: #b5ecff;
  --green: #8fd166;
  --red: #ed1b2f;
  --deep: #0b151c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--deep);
  color: var(--white);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.intro-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #142430;
}

.hero-photo,
.hero-wash,
.fine-grid,
.signal-field {
  position: absolute;
  inset: 0;
}

.hero-photo {
  z-index: -5;
  background-image: url("hero-desktop.webp");
  background-position: center;
  background-size: cover;
  filter: brightness(1.07) saturate(0.91) contrast(1.02);
  transform: scale(1.035);
  animation: heroSettle 11.8s cubic-bezier(0.18, 0.78, 0.2, 1) forwards;
}

.hero-wash {
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(9, 17, 22, 0.96) 0%, rgba(12, 23, 30, 0.91) 31%, rgba(12, 27, 36, 0.51) 54%, rgba(10, 23, 31, 0.12) 78%, rgba(8, 19, 27, 0.24) 100%),
    linear-gradient(0deg, rgba(5, 13, 18, 0.84) 0%, transparent 39%),
    radial-gradient(circle at 75% 40%, rgba(97, 203, 247, 0.15), transparent 31%);
}

.fine-grid {
  z-index: -3;
  opacity: 0;
  background-image:
    linear-gradient(rgba(101, 207, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 207, 248, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 37%, #000 58%, #000 100%);
  transition: opacity 1s ease;
}

.is-linked .fine-grid {
  opacity: 0.8;
}

.signal-field {
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.signal-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.diagnostic-orbits {
  fill: none;
  stroke: rgba(141, 217, 248, 0.25);
  stroke-width: 1.1;
  stroke-dasharray: 4 9;
  opacity: 0.36;
  transform-box: fill-box;
  transform-origin: center;
  animation: orbitRotate 11.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.diagnostic-orbits .orbit-secondary {
  stroke: rgba(143, 209, 102, 0.22);
  stroke-dasharray: 2 13;
}

.diagnostic-orbits .orbit-tilted {
  stroke: rgba(110, 204, 244, 0.2);
}

.diagnostic-orbits .orbit-cross {
  stroke-dasharray: 2 15;
  opacity: 0.48;
}

.sine-waves {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.sine {
  fill: none;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
  stroke-dashoffset: 160;
  transform-box: fill-box;
  transform-origin: center;
}

.sine-two {
  stroke-width: 1.1;
  opacity: 0.74;
}

.sine-three {
  stroke-width: 0.95;
  opacity: 0.54;
}

.is-linked .sine-waves {
  opacity: 1;
}

.is-linked .sine-one {
  animation: waveTravel 2.15s linear infinite, waveFloat 3.4s ease-in-out infinite alternate;
}

.is-linked .sine-two {
  animation: waveTravel 2.75s linear infinite reverse, waveFloat 4.1s ease-in-out infinite alternate-reverse;
}

.is-linked .sine-three {
  animation: waveTravel 3.2s linear infinite, waveFloat 4.7s ease-in-out infinite alternate;
}

.wireless-signals {
  fill: none;
  stroke: var(--cyan-soft);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.wireless-signals path {
  opacity: 0;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}

.is-scanning .wireless-signals path {
  animation: wirelessPulse 2.1s ease-out infinite;
}

.is-scanning .wireless-signals path:nth-child(2),
.is-scanning .wireless-signals path:nth-child(5),
.is-scanning .wireless-signals path:nth-child(7) {
  animation-delay: 0.35s;
}

.is-scanning .wireless-signals path:nth-child(3) {
  animation-delay: 0.68s;
}

.signal-nodes circle {
  fill: var(--green);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(143, 209, 102, 0.9));
  transform-box: fill-box;
  transform-origin: center;
}

.is-scanning .signal-nodes circle {
  animation: nodePulse 1.8s ease-in-out infinite;
}

.is-scanning .signal-nodes circle:nth-child(2) { animation-delay: 0.38s; }
.is-scanning .signal-nodes circle:nth-child(3) { animation-delay: 0.74s; }
.is-scanning .signal-nodes circle:nth-child(4) { animation-delay: 1.1s; }

.signal-packets circle {
  fill: #c8f1ff;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(99, 210, 255, 0.9));
  offset-rotate: 0deg;
}

.signal-packets circle:nth-child(1) {
  offset-path: path("M720 300C748 254 776 254 804 300S860 346 888 300S944 254 972 300S1028 346 1056 300S1112 254 1140 300S1196 346 1224 300S1280 254 1308 300S1364 346 1392 300S1448 254 1476 300S1532 346 1560 300");
}

.signal-packets circle:nth-child(2) {
  offset-path: path("M790 510C814 477 838 477 862 510S910 543 934 510S982 477 1006 510S1054 543 1078 510S1126 477 1150 510S1198 543 1222 510S1270 477 1294 510S1342 543 1366 510S1414 477 1438 510S1486 543 1510 510");
}

.signal-packets circle:nth-child(3) {
  offset-path: path("M862 649C882 623 902 623 922 649S962 675 982 649S1022 623 1042 649S1082 675 1102 649S1142 623 1162 649S1202 675 1222 649S1262 623 1282 649S1322 675 1342 649S1382 623 1402 649S1442 675 1462 649");
}

.is-linked .signal-packets circle {
  animation: packetFlow 3.1s linear infinite;
}

.is-linked .signal-packets circle:nth-child(2) { animation-delay: 0.85s; }
.is-linked .signal-packets circle:nth-child(3) { animation-delay: 1.7s; }

.intro-header {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 2.2rem) clamp(1.1rem, 4.2vw, 4.5rem);
}

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.28rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--red);
}

.brand-lockup img {
  display: block;
  width: clamp(14rem, 21vw, 21rem);
  height: auto;
  filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 5px 18px rgba(0, 0, 0, 0.4));
}

.brand-lockup span {
  color: rgba(246, 251, 253, 0.9);
  font-size: clamp(0.5rem, 0.66vw, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.anniversary-badge {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(10, 28, 38, 0.5);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(14px);
}

.anniversary-badge strong {
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 2.1rem);
  line-height: 0.9;
}

.anniversary-badge sup {
  color: var(--red);
  font-size: 0.4em;
}

.anniversary-badge span {
  color: #dceaf0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.intro-copy {
  position: absolute;
  z-index: 8;
  top: clamp(10.2rem, 21vh, 14rem);
  left: clamp(1.3rem, 4.8vw, 5.1rem);
  width: min(47vw, 42rem);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}

.eyebrow {
  margin: 0 0 0.9rem;
  color: #a4dcf3;
  font-size: clamp(0.62rem, 0.78vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.intro-copy h1 {
  max-width: 12ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.8rem, 4.7vw, 5.7rem);
  font-weight: 720;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.45);
}

.intro-copy h1 span {
  color: #d9f2fc;
}

.intro-copy h1::after {
  display: block;
  width: 4rem;
  height: 0.2rem;
  margin-top: 1rem;
  background: var(--red);
  box-shadow: 0 0 16px rgba(237, 27, 47, 0.38);
  content: "";
}

.intro-summary {
  max-width: 35rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.05vw, 1.1rem);
  line-height: 1.55;
}

.capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.capability-list li {
  position: relative;
  padding-left: 0.85rem;
  color: #f6fbfd;
  font-size: clamp(0.56rem, 0.68vw, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.capability-list li::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(143, 209, 102, 0.75);
  content: "";
}

.regional-office {
  max-width: 36rem;
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid var(--cyan);
  background: rgba(7, 22, 30, 0.38);
  color: #bfd1da;
  font-size: clamp(0.7rem, 0.8vw, 0.84rem);
  line-height: 1.45;
}

.regional-office strong {
  color: #fff;
}

.regional-office b {
  color: var(--green);
  font-weight: 750;
}

.sensor-tag {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;
  transform: translateX(0.7rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.sensor-tag > i {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(147, 224, 253, 0.52);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(87, 202, 246, 0.25);
}

.sensor-tag > i::before,
.sensor-tag > i::after {
  position: absolute;
  inset: -0.3rem;
  border: 1px solid rgba(101, 207, 248, 0.34);
  border-radius: 50%;
  content: "";
  animation: arRing 1.8s ease-out infinite;
}

.sensor-tag > i::after {
  animation-delay: 0.9s;
}

.sensor-tag > i b {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(143, 209, 102, 0.9);
}

.sensor-tag > span {
  display: grid;
  gap: 0.1rem;
  min-width: 9.6rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(137, 217, 249, 0.22);
  border-radius: 0.2rem;
  background: rgba(4, 20, 28, 0.73);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9px);
}

.sensor-tag small {
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.38rem;
  letter-spacing: 0.13em;
}

.sensor-tag strong {
  color: #eef8fc;
  font-size: 0.58rem;
}

.sensor-tag em {
  color: #9cb4bf;
  font-size: 0.47rem;
  font-style: normal;
}

.sensor-bushing { top: 24%; right: 13%; }
.sensor-winding { top: 48%; right: 5%; }
.sensor-dga { top: 64%; right: 13%; }
.sensor-vibration { top: 72%; right: 31%; }

.is-linked .sensor-tag {
  opacity: 1;
  transform: translateX(0);
}

.is-linked .sensor-winding { transition-delay: 0.28s; }
.is-linked .sensor-dga { transition-delay: 0.56s; }
.is-linked .sensor-vibration { transition-delay: 0.84s; }

.wave-monitor {
  position: absolute;
  z-index: 7;
  right: 3.8%;
  bottom: 12.5%;
  width: min(19vw, 18rem);
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(130, 215, 249, 0.25);
  border-radius: 0.25rem;
  background: rgba(4, 20, 28, 0.72);
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.65s ease, transform 0.65s ease;
  backdrop-filter: blur(9px);
}

.wave-monitor > div {
  display: flex;
  justify-content: space-between;
  color: #89afbf;
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.wave-monitor > div strong {
  color: var(--green);
}

.wave-monitor svg {
  display: block;
  width: 100%;
  height: 2.8rem;
  margin-top: 0.28rem;
}

.monitor-grid {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.monitor-wave {
  stroke: var(--cyan);
  stroke-width: 1.7;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  filter: drop-shadow(0 0 5px rgba(98, 205, 248, 0.65));
}

.is-analysing .wave-monitor {
  opacity: 1;
  transform: translateY(0);
}

.is-analysing .monitor-wave {
  animation: drawMonitor 1.8s ease forwards, monitorPulse 2.7s ease-in-out 1.8s infinite;
}

.intro-status {
  position: absolute;
  z-index: 9;
  bottom: clamp(3.6rem, 6.5vh, 4.8rem);
  left: clamp(1.3rem, 4.8vw, 5.1rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(218, 236, 244, 0.74);
  font-size: clamp(0.5rem, 0.62vw, 0.65rem);
  font-weight: 760;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
}

.status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(143, 209, 102, 0.85);
  animation: statusPulse 1.15s ease-in-out infinite;
}

.final-action {
  position: absolute;
  z-index: 30;
  top: 52%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: min(92vw, 34rem);
  padding: 1.05rem;
  border: 1px solid rgba(164, 226, 251, 0.36);
  border-radius: 0.55rem;
  background: rgba(6, 22, 31, 0.87);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.46), inset 0 0 46px rgba(94, 201, 244, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44%) scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
  backdrop-filter: blur(18px);
}

.final-action p {
  margin: 0;
  color: #bcd1da;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.enter-button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.22rem 0.8rem;
  width: 100%;
  min-height: 3.7rem;
  padding: 0.72rem 3.5rem 0.72rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 0.3rem;
  background: rgba(249, 252, 253, 0.96);
  color: #10222d;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.enter-button span {
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.enter-button strong {
  grid-column: 1;
  color: #506975;
  font-size: 0.66rem;
  font-weight: 700;
}

.enter-button i {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  color: var(--red);
  font-size: 1.4rem;
  font-style: normal;
  transform: translateY(-50%);
}

.enter-button:hover,
.enter-button:focus-visible {
  background: var(--red);
  color: #fff;
  outline: none;
  transform: translateY(-2px);
}

.enter-button:hover strong,
.enter-button:focus-visible strong,
.enter-button:hover i,
.enter-button:focus-visible i {
  color: #fff;
}

.contact-line {
  position: absolute;
  z-index: 25;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 1rem;
  min-height: 2.9rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(5, 14, 20, 0.78);
  color: rgba(211, 229, 237, 0.74);
  font-size: clamp(0.53rem, 0.62vw, 0.66rem);
  backdrop-filter: blur(12px);
}

.contact-line strong {
  color: #fff;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-line a {
  color: inherit;
  text-decoration: none;
}

.contact-line a:hover,
.contact-line a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.is-predicting .intro-copy h1 span {
  animation: insightGlow 1.25s ease both;
}

.is-complete .intro-copy {
  opacity: 0.46;
  filter: blur(0.6px);
  transform: translateX(-0.45rem);
}

.is-complete .sensor-tag,
.is-complete .wave-monitor,
.is-complete .signal-field {
  opacity: 0.58;
}

.is-complete .intro-status {
  opacity: 0;
}

.is-complete .final-action {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.is-complete *,
.is-complete *::before,
.is-complete *::after {
  animation-play-state: paused !important;
}

@keyframes heroSettle {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}

@keyframes orbitRotate {
  from { opacity: 0.12; transform: rotate(-8deg); }
  to { opacity: 0.58; transform: rotate(5deg); }
}

@keyframes waveTravel {
  to { stroke-dashoffset: -160; }
}

@keyframes waveFloat {
  from { transform: translate3d(-8px, -4px, 0); }
  to { transform: translate3d(10px, 5px, 0); }
}

@keyframes wirelessPulse {
  0% { opacity: 0; stroke-dashoffset: 90; }
  24% { opacity: 0.9; }
  75% { opacity: 0.42; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.4); }
}

@keyframes packetFlow {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes arRing {
  0% { opacity: 0.75; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes drawMonitor {
  to { stroke-dashoffset: 0; }
}

@keyframes monitorPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.42; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes insightGlow {
  0% { color: #fff; text-shadow: 0 0 0 rgba(98, 205, 248, 0); }
  45% { color: var(--cyan-soft); text-shadow: 0 0 34px rgba(98, 205, 248, 0.7); }
  100% { color: #d9f2fc; text-shadow: 0 0 20px rgba(98, 205, 248, 0.2); }
}

@media (max-height: 780px) and (min-width: 701px) {
  .intro-header {
    padding-top: 0.8rem;
  }

  .brand-lockup img {
    width: clamp(12.5rem, 18vw, 17rem);
  }

  .intro-copy {
    top: 7.8rem;
  }

  .intro-copy h1 {
    font-size: clamp(2.55rem, 4.35vw, 4.1rem);
  }

  .intro-summary,
  .regional-office {
    margin-top: 0.7rem;
  }

  .capability-list {
    margin-top: 0.7rem;
  }

  .intro-status {
    bottom: 3.45rem;
  }

  .sensor-vibration {
    display: none;
  }
}

@media (max-width: 900px) and (min-width: 701px) {
  .intro-copy {
    width: 48vw;
  }

  .sensor-tag > span {
    min-width: 7.8rem;
  }

  .sensor-tag em {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero-photo {
    background-image: url("hero-mobile.webp");
    background-position: 70% center;
    filter: brightness(1.03) saturate(0.9) contrast(1.02);
  }

  .hero-wash {
    background:
      linear-gradient(180deg, rgba(7, 17, 23, 0.53) 0%, rgba(7, 18, 24, 0.45) 31%, rgba(6, 17, 23, 0.52) 57%, rgba(4, 13, 18, 0.95) 100%),
      linear-gradient(90deg, rgba(7, 17, 23, 0.77), rgba(7, 17, 23, 0.05));
  }

  .fine-grid {
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
  }

  .signal-svg {
    width: 80rem;
    max-width: none;
    transform: translateX(-42%);
  }

  .intro-header {
    padding: 0.8rem 0.85rem;
  }

  .brand-lockup {
    gap: 0.15rem;
    padding-left: 0.5rem;
    border-left-width: 2px;
  }

  .brand-lockup img {
    width: min(47vw, 11.5rem);
  }

  .brand-lockup span {
    font-size: 0.4rem;
  }

  .anniversary-badge {
    gap: 0.35rem;
    padding: 0.44rem 0.55rem;
  }

  .anniversary-badge strong {
    font-size: 1.28rem;
  }

  .anniversary-badge span {
    font-size: 0.4rem;
  }

  .intro-copy {
    top: 5.8rem;
    left: 1rem;
    width: calc(100% - 2rem);
  }

  .eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.48rem;
    letter-spacing: 0.18em;
  }

  .intro-copy h1 {
    max-width: 12ch;
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 0.93;
  }

  .intro-copy h1::after {
    width: 2.8rem;
    margin-top: 0.6rem;
  }

  .intro-summary {
    max-width: 28rem;
    margin-top: 0.55rem;
    font-size: clamp(0.67rem, 2.8vw, 0.8rem);
    line-height: 1.36;
  }

  .capability-list {
    gap: 0.38rem 0.7rem;
    margin-top: 0.55rem;
  }

  .capability-list li {
    font-size: 0.46rem;
  }

  .regional-office {
    max-width: 26rem;
    margin-top: 0.55rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.58rem;
    line-height: 1.32;
  }

  .sensor-tag {
    gap: 0.3rem;
  }

  .sensor-tag > i {
    width: 1.15rem;
    height: 1.15rem;
  }

  .sensor-tag > i b {
    width: 0.3rem;
    height: 0.3rem;
  }

  .sensor-tag > span {
    min-width: 6.6rem;
    padding: 0.3rem 0.38rem;
  }

  .sensor-tag small {
    font-size: 0.28rem;
  }

  .sensor-tag strong {
    font-size: 0.42rem;
  }

  .sensor-tag em {
    font-size: 0.34rem;
  }

  .sensor-bushing { top: 43%; right: 8%; }
  .sensor-winding { top: 55%; right: 2%; }
  .sensor-dga { top: 66%; right: 9%; }
  .sensor-vibration { top: 73%; right: 31%; }

  .wave-monitor {
    right: auto;
    bottom: 10.2%;
    left: 1rem;
    width: min(43vw, 10.5rem);
    padding: 0.4rem 0.46rem;
  }

  .wave-monitor > div {
    font-size: 0.32rem;
  }

  .wave-monitor svg {
    height: 2rem;
  }

  .intro-status {
    bottom: 3.55rem;
    left: 1rem;
    font-size: 0.42rem;
  }

  .final-action {
    top: 53%;
    width: calc(100vw - 1.5rem);
    padding: 0.8rem;
  }

  .final-action p {
    font-size: 0.47rem;
  }

  .enter-button {
    min-height: 3.3rem;
    padding-left: 0.9rem;
  }

  .enter-button span {
    font-size: 0.78rem;
  }

  .enter-button strong {
    font-size: 0.55rem;
  }

  .contact-line {
    flex-wrap: wrap;
    gap: 0.15rem 0.65rem;
    min-height: 3.05rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.48rem;
  }

  .contact-line span,
  .contact-line strong {
    display: none;
  }
}

@media (max-width: 700px) and (max-height: 720px) {
  .intro-copy {
    top: 5rem;
  }

  .intro-summary,
  .capability-list {
    display: none;
  }

  .sensor-bushing { top: 37%; }
  .sensor-winding { top: 50%; }
  .sensor-dga { top: 63%; }
  .sensor-vibration { display: none; }

  .wave-monitor {
    bottom: 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}