:root {
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 180ms;
  --motion-medium: 680ms;
}

html.motion-ready [data-animate] {
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
}

html.motion-ready [data-animate].is-visible {
  animation-duration: var(--motion-duration, var(--motion-medium));
  animation-delay: var(--motion-delay, 0ms);
  animation-fill-mode: both;
  animation-timing-function: var(--motion-ease);
}

html.motion-ready [data-motion="rise"].is-visible {
  animation-name: motion-rise;
}

html.motion-ready [data-motion="drift-left"].is-visible {
  animation-name: motion-drift-left;
}

html.motion-ready [data-motion="drift-right"].is-visible {
  animation-name: motion-drift-right;
}

html.motion-ready [data-motion="scale"].is-visible {
  animation-name: motion-scale;
}

html.motion-ready [data-motion="clip"].is-visible {
  animation-name: motion-clip;
}

html.motion-ready [data-motion="blur"].is-visible {
  animation-name: motion-blur;
}

html.motion-ready [data-motion="hero"].is-visible {
  --motion-duration: 840ms;
  animation-name: motion-hero;
}

html.motion-ready [data-motion="nav"].is-visible {
  --motion-duration: 560ms;
  animation-name: motion-nav;
}

html.motion-ready [data-motion="float"].is-visible {
  animation-name: motion-float-in;
}

.motion-interactive {
  transform-style: preserve-3d;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    filter var(--motion-fast) ease;
}

.motion-interactive.is-pointer-active {
  transform:
    perspective(900px)
    rotateX(var(--motion-rotate-x, 0deg))
    rotateY(var(--motion-rotate-y, 0deg))
    translateY(-3px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.24);
}

.motion-interactive.is-pressing {
  filter: brightness(1.08);
}

.motion-interactive:focus-visible {
  outline: 2px solid rgba(191, 247, 238, 0.86);
  outline-offset: 4px;
}

.jump-pill-nav a,
.jump-contact-pill,
.btn,
.hero-btn,
.service-link,
.contact-form button,
.mobile-menu-toggle,
.language-toggle,
[data-location-tab] {
  -webkit-tap-highlight-color: transparent;
}

.motion-ripple {
  position: relative;
  overflow: hidden;
}

.motion-ripple::after {
  content: "";
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(191, 247, 238, 0.34);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
}

.motion-ripple.is-rippling::after {
  animation: motion-ripple 520ms ease-out;
}

.jump-nav-row {
  transition: filter var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}

.page-mobile-menu-toggle,
.page-mobile-menu-panel {
  display: none;
}

body.is-scrolled .jump-nav-row.is-standalone,
body.is-scrolled .jump-nav-row.is-sticky {
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.22));
}

.service-icon,
.card-icon,
.benefit-icon,
.process-number,
.yes,
.no,
.mark {
  transition: transform var(--motion-fast) var(--motion-ease), filter var(--motion-fast) ease;
}

.motion-interactive:hover .service-icon,
.motion-interactive:hover .card-icon,
.motion-interactive:hover .benefit-icon,
.motion-interactive:hover .process-number,
.motion-interactive:hover .yes,
.motion-interactive:hover .no,
.motion-interactive:hover .mark {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.1);
}

.location-layout {
  transition: opacity 260ms ease, transform 260ms var(--motion-ease);
}

.location-layout.is-swapping {
  animation: motion-panel-swap 380ms var(--motion-ease) both;
}

.location-tabs button,
.package-tab {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.location-tabs button:hover,
.package-tab:hover {
  transform: translateY(-2px);
}

@keyframes motion-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes motion-drift-left {
  from {
    opacity: 0;
    transform: translate3d(34px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-drift-right {
  from {
    opacity: 0;
    transform: translate3d(-34px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-scale {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes motion-clip {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 18px);
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 18px);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-blur {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-hero {
  from {
    opacity: 0;
    transform: translate3d(0, 38px, 0) scale(0.985);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes motion-nav {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes motion-float-in {
  from {
    opacity: 0;
    transform: translate3d(0, -22px, 0) rotate(-1.5deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes motion-ripple {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

@keyframes motion-panel-swap {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  html.motion-ready [data-animate] {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .has-page-mobile-source {
    display: none !important;
  }

  .page-mobile-menu-toggle {
    position: absolute;
    top: max(48px, calc(env(safe-area-inset-top) + 42px));
    right: 36px;
    z-index: 1001;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(146, 214, 215, 0.28);
    border-radius: 50%;
    background: rgba(0, 45, 50, 0.22);
    color: #ffffff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .hero-shell > .page-mobile-menu-toggle {
    right: 0;
  }

  .page-mobile-menu-toggle span {
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .page-mobile-menu-toggle.is-open {
    position: fixed;
    right: 36px;
    background: rgba(255, 255, 255, 0.96);
    color: #002f34;
    border-color: rgba(255, 255, 255, 0.7);
    z-index: 1003;
  }

  .page-mobile-menu-toggle.is-open span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .page-mobile-menu-toggle.is-open span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .page-mobile-menu-panel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding:
      max(96px, calc(env(safe-area-inset-top) + 88px))
      36px
      max(20px, calc(env(safe-area-inset-bottom) + 20px));
    background:
      radial-gradient(circle at 100% 0%, rgba(191, 247, 238, 0.16), transparent 40%),
      linear-gradient(180deg, #003237 0%, #001c20 100%);
    color: #ffffff;
    overflow-y: auto;
  }

  .page-mobile-menu-panel.is-open {
    display: block;
  }

  .page-mobile-menu-inner {
    display: grid;
    gap: 0;
  }

  .page-mobile-menu-eyebrow {
    margin: 0 0 22px;
    color: rgba(191, 247, 238, 0.7);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .page-mobile-menu-inner a {
    min-height: 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(191, 247, 238, 0.2);
    color: #ffffff;
    font-family: "Funnel Display", "Funnel Sans", sans-serif;
    font-size: clamp(28px, 8.5vw, 40px);
    font-weight: 300;
    line-height: 0.95;
  }

  .page-mobile-menu-inner a.is-active {
    color: #bff7ee;
  }

  .page-mobile-menu-panel.is-open .mobile-menu-language {
    display: flex;
  }

  .page-mobile-menu-inner .mobile-menu-language {
    margin-top: 22px;
    gap: 16px;
    flex-wrap: wrap;
  }

  .page-mobile-menu-inner .mobile-menu-language a {
    min-height: 24px;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.66);
    font-family: "Funnel Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
  }

  .page-mobile-menu-inner .mobile-menu-language a.is-active {
    border-bottom-color: currentColor;
    color: #ffffff;
  }

  .about-page .why-container,
  .services-page .shell,
  .accounting-page .shell,
  .secretarial-page .shell,
  .virtual-page .shell,
  .admin-page .shell,
  .service-combo-page .container,
  .services-preview-page .container,
  .contact-page .container {
    width: calc(100% - 72px) !important;
  }

  .why-hero,
  .services-hero,
  .accounting-hero,
  .secretarial-hero,
  .virtual-hero,
  .admin-hero {
    min-height: 100svh !important;
  }

  .hero-shell {
    min-height: 100svh !important;
    padding-top: max(48px, calc(env(safe-area-inset-top) + 42px)) !important;
  }

  .why-hero .why-container {
    position: relative !important;
    min-height: 100svh !important;
    padding-top: max(48px, calc(env(safe-area-inset-top) + 42px)) !important;
  }

  .why-header {
    min-height: 18px !important;
    height: 18px !important;
  }

  .why-header,
  .hero-shell > .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: absolute !important;
    top: max(48px, calc(env(safe-area-inset-top) + 42px)) !important;
    left: 0 !important;
    width: 82px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-shell > .brand {
    right: auto !important;
  }

  .why-header .logo,
  .hero-shell > .brand .logo,
  .service-combo-page .jump-pill-nav .spark-link img,
  .contact-page .jump-pill-nav .spark-link img,
  .services-preview-page .jump-pill-nav .spark-link img {
    width: 82px !important;
    height: 18px !important;
    object-fit: contain !important;
  }

  .why-hero .hero-copy,
  .services-hero .hero-copy,
  .accounting-hero .hero-copy,
  .secretarial-hero .hero-copy,
  .virtual-hero .hero-copy,
  .admin-hero .hero-copy {
    width: 100% !important;
    max-width: 360px !important;
    margin-top: 0 !important;
    padding-top: min(38svh, 280px) !important;
    text-align: left !important;
  }

  .accounting-hero .hero-layout,
  .secretarial-hero .hero-layout,
  .virtual-hero .hero-layout,
  .admin-hero .hero-layout {
    display: block !important;
    margin-top: 0 !important;
  }

  .why-hero h1,
  .services-hero h1,
  .accounting-hero .hero-copy h1,
  .secretarial-hero .hero-copy h1,
  .virtual-hero .hero-copy h1,
  .admin-hero .hero-copy h1,
  .service-combo-page .hero-copy h1,
  .services-preview-page .hero h1,
  .contact-page .contact-intro h1 {
    max-width: 360px !important;
    margin-left: 0 !important;
    font-size: clamp(30px, 9.2vw, 36px) !important;
    font-weight: 200 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.018em !important;
    text-align: left !important;
    transform: none !important;
  }

  .why-hero .hero-copy p,
  .services-hero .hero-copy p,
  .accounting-hero .hero-copy p,
  .secretarial-hero .hero-copy p,
  .virtual-hero .hero-copy p,
  .admin-hero .hero-copy p {
    display: none !important;
  }

  .hero-actions,
  .hero-media,
  .hero-arc {
    display: none !important;
  }

  .accounting-hero .hero-copy p,
  .secretarial-hero .hero-copy p,
  .virtual-hero .hero-copy p,
  .admin-hero .hero-copy p,
  .service-combo-page .hero-copy p {
    display: block !important;
    max-width: 310px !important;
    margin: 18px 0 0 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    line-height: 1.14 !important;
  }

  .accounting-hero .hero-actions,
  .secretarial-hero .hero-actions,
  .virtual-hero .hero-actions,
  .admin-hero .hero-actions,
  .service-combo-page .hero-actions {
    display: flex !important;
    margin-top: 22px !important;
    gap: 0 !important;
  }

  .accounting-hero .btn,
  .secretarial-hero .btn,
  .virtual-hero .btn,
  .admin-hero .btn,
  .service-combo-page .btn {
    min-width: 96px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  .accounting-hero .btn.secondary,
  .secretarial-hero .btn.secondary,
  .virtual-hero .btn.secondary,
  .admin-hero .btn.secondary,
  .service-combo-page .btn-outline {
    display: none !important;
  }

  .accounting-hero,
  .secretarial-hero,
  .virtual-hero,
  .admin-hero {
    min-height: auto !important;
  }

  .accounting-hero .hero-shell,
  .secretarial-hero .hero-shell,
  .virtual-hero .hero-shell,
  .admin-hero .hero-shell {
    min-height: auto !important;
    padding-bottom: 0 !important;
  }

  .accounting-hero .hero-media,
  .secretarial-hero .hero-media,
  .virtual-hero .hero-media,
  .admin-hero .hero-media,
  .service-combo-page .hero-media {
    display: block !important;
    width: 100vw !important;
    width: 100svw !important;
    max-width: none !important;
    height: clamp(460px, 132vw, 680px) !important;
    margin: 58px 0 0 calc(50% - 50vw) !important;
    margin: 58px 0 0 calc(50% - 50svw) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .accounting-hero .hero-media img,
  .secretarial-hero .hero-media img,
  .virtual-hero .hero-media img,
  .admin-hero .hero-media img,
  .service-combo-page .hero-media img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.12) !important;
    transform-origin: center !important;
  }

  .accounting-page .support-list li,
  .secretarial-page .beyond-list li,
  .admin-page .support-list li {
    min-height: 56px !important;
    padding: 0 0 20px 34px !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
  }

  .accounting-page .support-list li::before,
  .secretarial-page .beyond-list li::before,
  .admin-page .support-list li::before {
    top: 5px !important;
    width: 10px !important;
    height: 10px !important;
  }

  .accounting-page .support-list li:not(:last-child)::after,
  .secretarial-page .beyond-list li:not(:last-child)::after,
  .admin-page .support-list li:not(:last-child)::after {
    bottom: 10px !important;
  }

  .hero-shell > .jump-nav-row,
  .why-hero > .jump-nav-row {
    display: none !important;
  }

  .why-hero {
    overflow: hidden !important;
  }

  .why-page,
  .services-page {
    background-image: url("/assets/about-background-jump.png") !important;
    background-position: calc(50% + 120px) 0px !important;
    background-size: 160% 61% !important;
    background-repeat: no-repeat !important;
    background-color: #001c20 !important;
  }

  .services-page {
    background-image: url("/assets/services-background-jump.png") !important;
    background-position: top center !important;
    background-size: auto max(100svh, 1800px) !important;
  }

  .accounting-page {
    background-image:
      linear-gradient(180deg, rgba(0, 28, 32, 0) 0%, rgba(0, 28, 32, 0.18) 20%, #001c20 38%, #001c20 100%),
      url("/assets/accounting-background-jump.png") !important;
  }

  .accounting-page.hr-page {
    background-image:
      linear-gradient(180deg, rgba(0, 28, 32, 0) 0%, rgba(0, 28, 32, 0.18) 20%, #001c20 38%, #001c20 100%),
      url("/assets/hr-background-jump.png") !important;
  }

  .secretarial-page {
    background-image:
      linear-gradient(180deg, rgba(0, 28, 32, 0) 0%, rgba(0, 28, 32, 0.18) 20%, #001c20 38%, #001c20 100%),
      url("/assets/secretarial-background-jump.png") !important;
  }

  .virtual-page {
    background-image: url("/assets/virtual-office-background-jump.png") !important;
  }

  .admin-page {
    background-image:
      linear-gradient(180deg, rgba(0, 28, 32, 0) 0%, rgba(0, 28, 32, 0.18) 20%, #001c20 38%, #001c20 100%),
      url("/assets/admin-pa-background-jump.png") !important;
  }

  .admin-page.referral-page {
    background-image:
      linear-gradient(180deg, rgba(0, 28, 32, 0) 0%, rgba(0, 28, 32, 0.18) 20%, #001c20 38%, #001c20 100%),
      url("/assets/referral-background-jump.png") !important;
  }

  .admin-page.registration-page {
    background-image:
      linear-gradient(180deg, rgba(0, 28, 32, 0) 0%, rgba(0, 28, 32, 0.18) 20%, #001c20 38%, #001c20 100%),
      url("/assets/business-registration-background-jump.png") !important;
  }

  .service-combo-page {
    background-image:
      linear-gradient(180deg, rgba(0, 28, 32, 0) 0%, rgba(0, 28, 32, 0.18) 20%, #001c20 38%, #001c20 100%),
      url("/assets/secretarial-background-jump.png") !important;
  }

  .accounting-page,
  .secretarial-page,
  .admin-page,
  .service-combo-page {
    background-position: center top, calc(50% + 120px) 0px !important;
    background-size: 100% 100%, 160% auto !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: #001c20 !important;
  }

  .virtual-page {
    background-position: calc(50% + 120px) 0px !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    background-color: #001c20 !important;
  }


  .why-title-desktop {
    display: none !important;
  }

  .why-header {
    left: 19px !important;
    top: max(58px, calc(env(safe-area-inset-top) + 52px)) !important;
  }

  .why-title-mobile {
    display: inline !important;
  }

  .why-hero .hero-copy {
    max-width: 430px !important;
    margin-left: 19px !important;
    padding-top: min(36svh, 260px) !important;
  }

  .why-hero .eyebrow {
    width: 78px !important;
    height: 24px !important;
    margin: 0 0 20px !important;
    font-size: 7px !important;
    letter-spacing: 0.12em !important;
  }

  .why-hero h1 {
    max-width: 430px !important;
    margin-top: 0 !important;
    font-size: clamp(30px, 9.2vw, 36px) !important;
    font-weight: 200 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
  }
}