/* Small readable layer for behavior that used to be controlled by React. */
html {
  scroll-behavior: smooth;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

/* Keep the contact actions compact even when the browser panel is wide. */
.compact-contact {
  max-width: 76rem;
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}

.compact-contact-panel {
  max-width: 58rem;
  padding: 0;
}

.compact-contact + #reviews {
  padding-top: 0.5rem !important;
}

.compact-contact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.compact-contact-action {
  min-height: 3.75rem;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
}

.compact-contact-icon {
  width: 2rem;
  height: 2rem;
}

.compact-contact-icon--padded img {
  transform: scale(1.72);
}

.compact-phone-icon {
  width: 2rem;
  height: 2rem;
  color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 759px) {
  .compact-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-contact-action {
    min-height: 3.9rem;
  }

  .compact-contact {
    padding-top: 0.5rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Contact actions remain inside the page; do not cover mobile content with a fixed bar. */
[data-testid="mobile-contact-bar"] {
  display: none !important;
}

@media (max-width: 639px) {
  body[data-page="home"] #contact,
  body[data-page="service"] footer {
    padding-bottom: 2.5rem;
  }

  body[data-page="thermal-care"] main > section:last-of-type {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Make console entrances visible on mobile and keep the hero motion calm. */
.hero-panel-intro {
  animation-duration: 1.75s;
  animation-delay: 0.18s;
}

.hero-console-float {
  animation: hero-console-float 7.2s ease-in-out infinite;
}

.hero-console-float-delayed {
  animation-delay: -3.6s;
}

.console-reveal-title,
.console-reveal-card,
.console-reveal-visual {
  backface-visibility: hidden;
}

.console-reveal-title {
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s ease;
}

.console-reveal-card {
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.18s + var(--console-delay, 0s)),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) calc(0.14s + var(--console-delay, 0s)),
    filter 0.9s ease calc(0.18s + var(--console-delay, 0s));
}

.console-reveal-visual {
  transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    transform 1.28s cubic-bezier(0.16, 1, 0.3, 1) 0.06s,
    filter 1.05s ease 0.1s;
}

.console-reveal[data-console-popup="pending"] .console-reveal-title {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(var(--console-copy-x), 32px, 0) scale(0.96);
}

.console-reveal[data-console-popup="pending"] .console-reveal-card {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 38px, 0) scale(0.9);
}

.console-reveal[data-console-popup="pending"] .console-reveal-visual {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(var(--console-visual-x), 58px, 0) scale(0.78);
}

.console-reveal[data-console-popup="visible"] :is(.console-reveal-title, .console-reveal-card, .console-reveal-visual) {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.thermal-meter-fill {
  opacity: 0.28;
  transform-origin: center bottom;
  will-change: transform, opacity;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.48s ease;
}

.thermal-showcase[data-thermal-active="false"] .thermal-meter-fill {
  opacity: 0.28;
  transform: scaleY(0);
}

.thermal-showcase[data-thermal-active="true"] .thermal-meter-fill {
  opacity: 1;
  transform: scaleY(1);
  will-change: auto;
}

.source-nav-link:hover,
.source-nav-link:focus-visible {
  border-color: rgba(186, 230, 253, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: white;
  outline: none;
}

.source-nav-link[aria-current="location"] {
  border-color: rgba(186, 230, 253, 0.25);
  background: rgba(224, 242, 254, 0.15);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 18px rgba(80, 180, 255, 0.1);
}

.source-menu-open {
  overflow: hidden;
}

.source-mobile-menu[hidden] {
  display: none;
}

.source-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.source-mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.76);
  backdrop-filter: blur(12px);
}

.source-mobile-menu__panel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: 0.75rem;
  display: grid;
  gap: 0.45rem;
  max-width: 30rem;
  margin-left: auto;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  background: rgba(7, 10, 16, 0.98);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.source-mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.35rem 0.45rem 0.7rem;
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
}

.source-mobile-menu__close {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  color: white;
  font-size: 1.7rem;
  line-height: 1;
}

.source-mobile-menu__panel > a {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 650;
  text-decoration: none;
}

.source-mobile-menu__panel > a:hover,
.source-mobile-menu__panel > a:focus-visible {
  border-color: rgba(125, 211, 252, 0.35);
  background: rgba(125, 211, 252, 0.1);
  color: white;
  outline: none;
}

@media (min-width: 1024px) {
  .source-mobile-menu {
    display: none;
  }
}

/* Mobile Safari can keep :hover active after a touch and freeze the marquee. */
@media (hover: none), (pointer: coarse) {
  .reviews-scroll-viewport:hover .reviews-scroll-running {
    animation-play-state: running !important;
  }

  .reviews-scroll-viewport:hover .reviews-scroll-paused {
    animation-play-state: paused !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-console-float,
  .hero-console-float-delayed {
    animation: none;
  }

  .console-reveal[data-console-popup] :is(.console-reveal-title, .console-reveal-card, .console-reveal-visual) {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    transform: none !important;
  }
}