.hero-top-nav-shell {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

@media (min-width: 768px) {
  .hero-top-nav-shell {
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 20px;
  }
}

a[href],
button,
summary,
[role="button"],
[role="tab"],
[aria-controls],
[aria-expanded],
[data-menu-open],
[data-menu-close],
.accordion-item,
.automation-item,
.sticky-tab,
.highlight-tab,
.finish-button,
.solutions-tag,
.homepad-option,
.interface-toggle button {
  cursor: pointer;
}

:root {
  --section-vertical-gap: 40px;
  --header-stack-height: 0px;
}

@media (min-width: 768px) {
  :root {
    --section-vertical-gap: 64px;
  }
}

@media (min-width: 1440px) {
  :root {
    --section-vertical-gap: 72px;
  }
}

@media (min-width: 1920px) {
  :root {
    --section-vertical-gap: 96px;
  }
}

button:disabled,
[role="button"][aria-disabled="true"],
[role="tab"][aria-disabled="true"],
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Sticky nav tabs: animated underline from left to right on hover,
   and persistent underline while the tab is active. */
a.sticky-tab {
  position: relative;
}

a.sticky-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #111111;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.24s ease;
}

@media (hover: hover) {
  a.sticky-tab:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

a.sticky-tab:focus-visible::after,
a.sticky-tab.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

a.sticky-tab.is-active {
  color: #111;
  font-weight: 500;
  border-bottom-color: transparent;
}

.sticky [data-sticky-ctas] a.sticky-menu-cta {
  transition:
    background-color 180ms ease-in-out,
    color 180ms ease-in-out,
    border-color 180ms ease-in-out,
    box-shadow 180ms ease-in-out;
}

@media (hover: hover) {
  .sticky [data-sticky-ctas] a.sticky-menu-cta-outline:hover {
    background-color: #5e5e5e;
    color: #fff;
    border-color: #5e5e5e;
  }

  .sticky [data-sticky-ctas] a.sticky-menu-cta-solid:hover {
    background-color: transparent;
    color: #5e5e5e;
    box-shadow: inset 0 0 0 2px #5e5e5e;
  }
}

.sticky [data-sticky-ctas] a.sticky-menu-cta:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  [data-sticky-menu-root] {
    transition: top 220ms ease-in-out;
  }

  body.header-stack-visible [data-sticky-menu-root] {
    top: var(--header-stack-height, 0px);
  }

  [data-header-navbar].is-scroll-stack.is-detached .header-navbar-shell {
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    z-index: 35;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.92), rgba(17, 17, 17, 0.8));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 220ms ease-in-out, opacity 220ms ease-in-out;
  }

  body.header-stack-visible [data-header-navbar].is-scroll-stack.is-detached .header-navbar-shell {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* CTA hover unification: buttons without motion use color inversion only. */
.smart-home-cta,
.highlight-cta {
  transition:
    background-color 180ms ease-in-out,
    color 180ms ease-in-out,
    border-color 180ms ease-in-out;
}

@media (hover: hover) {
  .smart-home-cta:hover {
    padding: 13.5px 20px 13.5px 24px;
    background: #111;
    color: #fff;
  }

  .smart-home-cta:hover .smart-home-cta-icon:before {
    transform: rotate(180deg);
  }

  .highlight-cta:hover {
    background: #111;
    color: #fff;
  }
}

/* D26: contact cards scale with grid size and keep arrow proportions. */
main .contacta .contacta-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

main .contacta .contacta-card {
  min-height: clamp(160px, 12vw, 176px);
  padding: clamp(20px, 1.6vw, 24px);
  gap: clamp(10px, 1vw, 12px);
  align-items: flex-start;
  transition:
    background-color 180ms ease-in-out,
    color 180ms ease-in-out;
}

main .contacta .contacta-card-text {
  font-size: clamp(18px, 1.25vw, 20px);
  line-height: 1.4;
}

main .contacta .contacta-card-arrow {
  position: relative;
  flex: 0 0 auto;
  width: clamp(28px, 2.1vw, 32px);
  height: clamp(28px, 2.1vw, 32px);
  align-self: flex-start;
  overflow: hidden;
  transform: none;
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
}

main .contacta .contacta-card-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(21px, 1.6vw, 24px);
  height: clamp(17px, 1.3vw, 20px);
  transform: translate(-50%, -50%);
  background-color: currentColor;
  -webkit-mask: url(/assets/images/icons/icon-arrow-right.svg) no-repeat center / contain;
  mask: url(/assets/images/icons/icon-arrow-right.svg) no-repeat center / contain;
  transition: transform 180ms ease-in-out;
}

@media (hover: hover) {
  main .contacta .contacta-card:hover {
    background: #504d47;
  }

  main .contacta .contacta-card:hover .contacta-card-arrow::before {
    transform: translate(calc(-50% + 2px), -50%);
  }
}

main .contacta .contacta-card:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* D11: keep video blocks aligned with home behavior and capped to viewport height. */
@media (min-width: 1024px) {
  :root {
    --video-home-max-height: min(720px, 100svh);
  }

  main .section-video .video-frame,
  main .history-c.section-video .video-frame {
    width: min(100%, calc(var(--video-home-max-height) * 1.55));
    max-width: 1240px;
    max-height: var(--video-home-max-height);
    aspect-ratio: 1240 / 800;
    margin-inline: auto;
  }

  main .video-highlight .video-highlight-media {
    max-height: var(--video-home-max-height);
  }
}

/* D20/D21: make stack carousels full-width in desktop across pages. */
@media (min-width: 1024px) {
  main .section-carousel.s360-carousel-stack {
    padding-left: 0;
    padding-right: 0;
  }

  main .section-carousel.s360-carousel-stack .container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Standard desktop carousel drag behavior across pages. */
@media (min-width: 768px) {
  main .section-carousel.s360-carousel-stack .carousel-track,
  main .tech-carousel {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  main .section-carousel.s360-carousel-stack .carousel-track.is-dragging,
  main .tech-carousel.is-dragging {
    cursor: grabbing;
  }

  main .section-carousel.s360-carousel-stack .carousel-track img,
  main .tech-carousel img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }

  main .inspiration-carousel.is-horizontal-enabled {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  main .inspiration-carousel.is-horizontal-enabled .inspiration-track {
    animation: none !important;
    transform: none !important;
  }

  main .inspiration-carousel.is-horizontal-enabled.is-dragging {
    cursor: grabbing;
  }

  main .inspiration-carousel.is-horizontal-enabled img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }
}

.footer-simon-copy,
.footer-simon-links p {
  margin: 0;
}

.footer-simon .footer-simon-lang {
  position: relative;
  isolation: isolate;
}

.footer-simon .nav-lang-trigger {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.75rem 0.625rem 0.875rem 1rem;
  list-style: none;
  user-select: none;
  color: #fff;
  transition: color 180ms ease-in-out, background-color 180ms ease-in-out;
}

.footer-simon .nav-lang-trigger::-webkit-details-marker {
  display: none;
}

.footer-simon .nav-lang-current {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 500;
  min-width: 1.5rem;
  text-align: right;
}

.footer-simon .nav-lang-chevron {
  width: 1rem;
  height: 1rem;
  transition: transform 180ms ease-in-out;
  filter: brightness(0) invert(1);
}

.footer-simon .nav-lang[open] .nav-lang-chevron {
  transform: rotate(180deg);
}

.footer-simon .nav-lang-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: none;
  min-width: 100%;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  border-radius: 0.25rem;
  padding: 0.75rem 0.625rem 2.675rem 1rem;
  background-color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.footer-simon .nav-lang[open] .nav-lang-menu {
  display: flex;
}

.footer-simon .nav-lang-option {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  border: 0;
  padding: 0 1.25rem 0 0;
  box-sizing: border-box;
  background: transparent;
  color: #6b6b6b;
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: right;
  cursor: pointer;
  transition: color 180ms ease-in-out;
}

.footer-simon .nav-lang-option.is-active {
  display: none;
}

.footer-simon .nav-lang[open] .nav-lang-trigger {
  color: #6b6b6b;
  background-color: #fff;
}

.footer-simon .nav-lang[open] .nav-lang-chevron {
  filter: none;
}

@media (hover: hover) {
  .footer-simon .nav-lang-option:hover {
    color: #111;
  }
}

@media (max-width: 767px) {
  .footer-simon {
    padding: 40px clamp(16px, 6vw, 24px) !important;
    background: #002e4e !important;
  }

  .footer-simon-inner {
    width: min(100%, 384px);
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .footer-simon-top {
    width: 100%;
    gap: 24px;
  }

  .footer-simon-top p {
    max-width: 328px;
    margin: 0;
    line-height: 1.33;
  }

  .footer-simon-divider {
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }

  .footer-simon-bottom {
    width: 100%;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    text-align: center;
  }

  .footer-simon-social-wrap {
    order: 1;
    gap: 24px;
    align-items: center;
    justify-content: center;
  }

  .footer-simon-follow {
    display: none;
  }

  .footer-simon-social {
    gap: 24px;
  }

  .footer-simon-social img {
    opacity: 0.6;
  }

  .footer-simon-lang {
    order: 2;
  }

  .footer-simon-legal {
    order: 3;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-simon-links {
    justify-content: center;
    gap: 24px;
  }
}