/* Xenid motion. Original layout, typography and content remain authoritative. */
:root { --xenid-motion-sheet: ready; }
html.xm-enabled { overflow-x: clip; }
.xm-pending { opacity: 0; }
.xm-running { will-change: opacity, translate, scale; }
.xm-logo-stage { position: relative; display: block; line-height: 0; }
.xm-logo-stage > img { display: block; }
.xm-logo-mark { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.xm-logo-ready > img { opacity: 0; }
.xm-logo-ready > .xm-logo-mark { display: block; }
.xm-logo-x { transform-box: fill-box; transform-origin: center; }
.xm-menu-label { display: inline-block; transform-origin: 50% 0; pointer-events: none; }

/* Reserve the original header space while its existing action follows scroll. */
.xm-cta-slot { display: grid; justify-self: end; align-self: center; }
.xm-cta-slot[hidden] { display: none; }
header .xenid-header-actions.xm-cta-pinned {
  position: fixed;
  top: 16px;
  left: var(--xm-cta-left);
  width: var(--xm-cta-width);
  z-index: 70;
}
header .xenid-header-actions.xm-cta-pinned > a {
  box-shadow: 0 8px 28px rgb(4 17 43 / 22%), 0 0 0 1px rgb(255 255 255 / 18%);
}

/* Existing UI illustrations assemble after their surrounding frame appears. */
.xm-assembly:not(.xm-assembled) .xm-piece { opacity: 0; }
.xm-icon-path { stroke-dasharray: var(--xm-length); stroke-dashoffset: var(--xm-length); }
.xm-complete .xm-icon-path { stroke-dashoffset: 0; transition: stroke-dashoffset .95s cubic-bezier(.22,1,.36,1); }

@media (hover: hover) and (pointer: fine) {
  html.xm-enabled main :is(.button, .services-primary-button, .about-primary-button, .packages-primary-button, .website-service-primary, .seo-detail-primary-button) {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .28s;
  }
  html.xm-enabled main :is(.button, .services-primary-button, .about-primary-button, .packages-primary-button, .website-service-primary, .seo-detail-primary-button):hover {
    transform: translateY(-3px) scale(1.025);
  }
  .xm-interactive.xm-complete { transition: translate .35s cubic-bezier(.2,.8,.2,1); }
  .xm-interactive.xm-complete:hover { translate: 0 -6px; }
}

/* Focus and find-in-page must never lead to an invisible control or text. */
.xm-pending:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .xm-logo-stage > img { opacity: 1 !important; }
  .xm-logo-mark { display: none !important; }
  .xm-menu-label { opacity: 1 !important; translate: none !important; rotate: none !important; }
  .xm-pending, .xm-piece { opacity: 1 !important; }
  .xm-running, .xm-interactive, .xm-parallax { translate: none !important; scale: none !important; rotate: none !important; }
  .xm-icon-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  html.xm-enabled main *, html.xm-enabled main *::before, html.xm-enabled main *::after { scroll-behavior: auto !important; }
}
@media print {
  header .xenid-header-actions.xm-cta-pinned { position: static; width: auto; box-shadow: none; }
  .xm-logo-stage > img { opacity: 1 !important; }
  .xm-logo-mark { display: none !important; }
  .xm-pending, .xm-piece { opacity: 1 !important; }
  .xm-running, .xm-parallax { translate: none !important; scale: none !important; rotate: none !important; }
  .xm-icon-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* Keep the genuine homepage visible below a translucent cinematic layer. */
:root {
  --xm-intro-size: min(72vw, 94svh);
  --xm-intro-height: calc(var(--xm-intro-size) * .79181788);
  --xm-intro-left: calc((100vw - var(--xm-intro-size)) / 2);
  --xm-intro-top: calc((100svh - var(--xm-intro-height)) / 2);
}
html.xm-intro-active body > :not(.xm-intro) { pointer-events: none !important; }
/* Keep the complete homepage header out of the intro, including mobile controls.
   Visibility preserves the logo's landing geometry and removes hidden tab stops. */
.xenid-home > .site-header { transition: opacity .52s cubic-bezier(.4,0,.2,1); }
html.xm-intro-active .xenid-home > .site-header {
  opacity: 0; visibility: hidden; pointer-events: none; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .xenid-home > .site-header { transition: none; }
}
/* The opening photograph remains visible; its message enters after the intro. */
html.xm-intro-active .hero-content { opacity: 0 !important; }
html.xm-intro-active :is(.xm-pending, .xm-piece) { opacity: 1 !important; }
html.xm-intro-active .xm-icon-path { stroke-dashoffset: 0; }
html.xm-intro-active header .xm-logo-x { opacity: 0; }
html.xm-intro-boot::before {
  content: ''; position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  background: rgb(7 22 46 / 78%) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2218%2018.5%20394.03%20312%22%3E%3Cpath%20fill%3D%22%23D05F40%22%20fill-rule%3D%22evenodd%22%20d%3D%22M%2032.00%2018.50%20L%20129.00%2018.50%20L%20139.00%2023.55%20L%20202.50%2097.00%20L%20269.48%20170.00%20L%20288.34%20197.00%20L%20301.50%20220.00%20L%20304.32%20227.00%20L%20284.00%20205.50%20L%20268.00%20192.50%20L%20240.00%20176.50%20L%20217.00%20168.50%20L%20200.00%20165.50%20L%20170.00%20165.50%20L%20164.00%20166.50%20L%2031.50%2019.00%20L%2032.00%2018.50%20Z%20M%20319.00%2018.50%20L%20411.00%2018.50%20L%20412.03%2019.00%20L%20411.49%2020.00%20L%20393.50%2039.00%20L%20277.00%20154.14%20L%20237.50%20111.00%20L%20232.50%20105.00%20L%20232.50%20103.00%20L%20311.00%2022.50%20L%20318.50%2019.00%20L%20319.00%2018.50%20Z%20M%20182.00%20180.66%20L%20200.00%20180.50%20L%20219.00%20183.50%20L%20236.00%20189.50%20L%20248.00%20195.50%20L%20268.00%20208.59%20L%20284.00%20221.50%20L%20310.50%20247.00%20L%20360.45%20301.00%20L%20385.50%20330.00%20L%20311.00%20330.50%20L%20306.00%20328.50%20L%20241.50%20257.00%20L%20210.00%20223.85%20L%20130.46%20310.00%20L%20118.00%20322.50%20L%20112.00%20326.33%20L%2099.00%20330.50%20L%2018.00%20330.50%20L%20151.00%20192.50%20L%20165.00%20184.50%20L%20181.66%20181.00%20L%20182.00%20180.66%20Z%22%2F%3E%3C%2Fsvg%3E") left var(--xm-intro-left) top var(--xm-intro-top) / var(--xm-intro-size) auto no-repeat;
}
.xm-intro { position: fixed; inset: 0; z-index: 10001; pointer-events: none; }
.xm-intro-backdrop { position: absolute; inset: 0; background: rgb(7 22 46 / 78%); }
.xm-intro-x {
  position: absolute; left: var(--xm-intro-left); top: var(--xm-intro-top);
  display: block; width: var(--xm-intro-size); height: auto; aspect-ratio: 394.03 / 312;
  transform-origin: 0 0; will-change: transform, opacity;
}
.xm-intro-copy {
  position: absolute; left: 4vw; right: 4vw; top: 50%; transform: translateY(-50%);
  color: #fff; text-align: center; text-shadow: 0 3px 32px rgb(7 22 46 / 35%);
}
.xm-intro-brand {
  margin: 0 0 clamp(24px, 4svh, 48px); font-family: Poppins, Arial, sans-serif;
  font-size: clamp(.9rem, 1.45vw, 1.35rem); font-weight: 800; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase;
}
.xm-intro-scenes { display: grid; align-items: center; }
.xm-intro-title, .xm-intro-services {
  grid-area: 1 / 1; margin: 0; font-family: Poppins, Arial, sans-serif;
  font-weight: 700; line-height: 1.14; letter-spacing: -.04em;
}
.xm-intro-title { font-size: clamp(2rem, 6.3vw, 7rem); }
.xm-intro-services { font-size: clamp(1.75rem, 4.7vw, 5.15rem); line-height: 1.22; }
.xm-intro-line { display: block; overflow: clip; padding: .12em .06em; margin: -.12em -.06em; }
.xm-intro-words { display: block; transform-origin: 50% 100%; }
.xm-intro-accent { color: #70f3d5; }
.xm-intro-footer {
  position: absolute; bottom: max(28px, 5svh); left: 20px; right: 20px;
  display: grid; justify-items: center; gap: 14px; color: #d6dce5;
  font: 400 .75rem/1.4 Poppins, Arial, sans-serif; letter-spacing: .025em;
}
.xm-intro-progress { display: block; width: 88px; height: 2px; background: rgb(255 255 255 / 20%); overflow: hidden; }
.xm-intro-progress > span { display: block; width: 100%; height: 100%; background: #70f3d5; transform-origin: left; }
@media (max-width: 760px) {
  :root { --xm-intro-size: min(96vw, 82svh); }
  .xm-intro-copy { left: 20px; right: 20px; }
  .xm-intro-brand { font-size: .8rem; letter-spacing: .13em; margin-bottom: 28px; }
  .xm-intro-title { font-size: clamp(2.35rem, 10.8vw, 3.6rem); line-height: 1.16; }
  .xm-intro-services { font-size: clamp(1.9rem, 8vw, 3rem); line-height: 1.25; }
  .xm-intro-services .xm-intro-line + .xm-intro-line { margin-top: .12em; }
}
@media (max-height: 520px) {
  .xm-intro-brand { margin-bottom: 18px; font-size: .75rem; }
  .xm-intro-title { font-size: min(6.3vw, 10svh); }
  .xm-intro-services { font-size: min(4.7vw, 8svh); }
  .xm-intro-footer { bottom: 16px; gap: 8px; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.xm-intro-active body > :not(.xm-intro) { pointer-events: auto !important; }
  html.xm-intro-active .hero-content { opacity: 1 !important; }
  html.xm-intro-boot::before, .xm-intro { display: none !important; }
}
@media print {
  html.xm-intro-active body > :not(.xm-intro) { pointer-events: auto !important; }
  html.xm-intro-active .hero-content { opacity: 1 !important; }
  html.xm-intro-boot::before, .xm-intro { display: none !important; }
}
