/* Technigator Christmas 2026 -- stability and layout repairs (loads last). */
/* Orbit: crystal overlay must NEVER change absolute positioning of moving cards. */
html.xmas-active .service-orbit-section .service-orbit-stage{position:relative!important;overflow:visible!important;isolation:isolate!important;contain:none!important}
html.xmas-active .service-orbit-section .orbit-service-card{
  position:absolute!important;left:50%!important;top:50%!important;
  isolation:auto!important;box-sizing:border-box!important;
  overflow:hidden!important;transform-origin:50% 50%!important;
  will-change:auto!important; /* prevent unnecessary GPU layers for 9 cards */
}
html.xmas-active .service-orbit-section .service-hologram{
  position:absolute!important;left:50%!important;top:50%!important;
  z-index:81!important;width:clamp(180px,18vw,250px)!important;
  height:clamp(150px,17vw,225px)!important;transform:translate(-50%,-50%)!important;
  overflow:visible!important;pointer-events:none;
}
html.xmas-active .service-orbit-section .service-hologram img{
  display:block!important;width:min(95%,222px)!important;max-width:none!important;
  height:auto!important;object-fit:contain!important;
  filter:drop-shadow(0 5px 4px #022c2d) drop-shadow(0 0 19px rgba(137,255,233,.32))!important;
  transform:translateZ(1px); /* restores strong layered central mascot */
}
html.xmas-active .service-orbit-section .orbit-card-icon>svg.xpro-icon{display:block!important;opacity:1!important}
html.xmas-active .service-orbit-section .orbit-card-icon .xmas-gift-mark{display:none!important}
html.xmas-active .service-orbit-section .orbit-service-card .orbit-card-number{position:absolute;top:10px;right:10px}
html.xmas-active .service-orbit-section .orbit-service-card>div{min-width:0}
@media(max-width:760px){
 html.xmas-active .service-orbit-section .service-orbit-stage{height:465px!important;min-height:465px!important;overflow:visible!important}
 html.xmas-active .service-orbit-section .orbit-service-card{width:clamp(100px,30vw,128px)!important;min-height:92px!important;height:107px!important;padding:8px!important;grid-template-columns:26px minmax(0,1fr)!important;gap:6px!important}
 html.xmas-active .service-orbit-section .orbit-service-card h3{font-size:10px!important;line-height:1.16!important;overflow-wrap:break-word!important}
 html.xmas-active .service-orbit-section .orbit-card-icon{height:27px!important;width:27px!important}
 html.xmas-active .service-orbit-section .orbit-card-icon svg.xpro-icon{width:21px!important;height:21px!important}
 html.xmas-active .service-orbit-section .service-hologram{width:112px!important;height:107px!important;z-index:81!important}
 html.xmas-active .service-orbit-section .service-hologram img{width:110px!important}
 html.xmas-active .service-orbit-section .service-hologram small{display:none!important}
}
@media(max-width:370px){html.xmas-active .service-orbit-section .orbit-service-card{width:105px!important}html.xmas-active .service-orbit-section .service-hologram{width:100px!important}}
/* Preserve service list semantics but put description BELOW title instead of a narrow far-right column. */
html .service-index-row:has(>.xpro-row-icon){
 display:grid!important;grid-template-columns:40px 52px minmax(0,1fr) 38px!important;
 grid-template-rows:auto auto!important;align-items:center!important;
 gap:7px 20px!important;min-height:142px!important;padding:22px 22px!important;
}
html .service-index-row:has(>.xpro-row-icon)>span:first-child{display:block!important;grid-column:1!important;grid-row:1/3!important}
html .service-index-row:has(>.xpro-row-icon)>.xpro-row-icon{grid-column:2!important;grid-row:1/3!important;align-self:center!important}
html .service-index-row:has(>.xpro-row-icon)>div{grid-column:3!important;grid-row:1!important;min-width:0!important}
html .service-index-row:has(>.xpro-row-icon)>p{grid-column:3!important;grid-row:2!important;max-width:60ch!important;width:100%!important;margin:0!important;line-height:1.55!important;min-width:0!important}
html .service-index-row:has(>.xpro-row-icon)>i{grid-column:4!important;grid-row:1/3!important;justify-self:end!important;align-self:center!important}
@media(max-width:760px){
 html .service-index-row:has(>.xpro-row-icon){grid-template-columns:33px minmax(0,1fr) 27px!important;min-height:116px!important;gap:7px 11px!important;padding:20px 12px!important}
 html .service-index-row:has(>.xpro-row-icon)>span:first-child{display:none!important}
 html .service-index-row:has(>.xpro-row-icon)>.xpro-row-icon{grid-column:1!important;grid-row:1/3!important;width:30px!important;height:30px!important}
 html .service-index-row:has(>.xpro-row-icon)>div{grid-column:2!important;grid-row:1!important}
 html .service-index-row:has(>.xpro-row-icon)>p{grid-column:2!important;grid-row:2!important;font-size:11px!important}
 html .service-index-row:has(>.xpro-row-icon)>i{grid-column:3!important;grid-row:1/3!important}
 html .service-index-row:has(>.xpro-row-icon) h2{font-size:clamp(23px,7vw,34px)!important;line-height:1.02!important}
}
/* Individual service landing page -- body copy grouped directly below heading. */
html .service-detail-hero{column-gap:clamp(28px,4vw,65px)!important}
html .service-hero-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;max-width:900px!important;min-width:0!important}
html .service-hero-copy h1{max-width:100%!important;margin-bottom:22px!important}
html .service-hero-copy>p{display:block!important;width:100%!important;max-width:65ch!important;margin:0 0 24px!important;line-height:1.7!important;font-size:clamp(14px,1.12vw,17px)!important;overflow-wrap:normal!important}
html .service-hero-copy .service-hero-tags{margin-top:0!important;max-width:100%!important}
@media(max-width:900px){html .service-detail-hero{grid-template-columns:1fr!important}html .service-hero-copy>p{font-size:14px!important}}
/* Header controls cannot occupy an implicit grid column or overlap the logo/nav. */
html .site-header .xul-mode-switch{
  position:absolute!important;z-index:110!important;top:22px!important;
  right:clamp(170px,12vw,250px)!important;left:auto!important;bottom:auto!important;
  max-width:150px!important;width:auto!important;white-space:nowrap!important;
  transform:none!important;
}
html .site-header .xpro-light-switch{
  position:fixed!important;z-index:110!important;right:18px!important;top:105px!important;
  bottom:auto!important;left:auto!important;transform:none!important;
}
@media(min-width:980px) and (max-width:1450px){
 html .site-header .xul-mode-switch{top:101px!important;right:140px!important}
}
@media(max-width:979px){
 html .site-header .xul-mode-switch{top:22px!important;right:112px!important;min-height:38px!important;padding:8px!important}
 html .site-header .xul-mode-switch .xul-switch-copy span{display:none!important}
 html .site-header .xpro-light-switch{top:114px!important;right:12px!important;padding:9px 11px!important;font-size:9px!important}
}
@media(max-width:410px){
 html .site-header .xul-mode-switch{right:92px!important;top:24px!important;gap:5px!important;padding:6px 7px!important}
 html .site-header .xul-mode-switch .xul-switch-copy b{font-size:8px!important;letter-spacing:.04em!important}
 html .site-header .xul-mode-switch .xul-switch-chip{width:30px!important}
 html .site-header .xul-mode-switch .xul-switch-chip:after{width:13px!important;height:13px!important}
 html.xmas-snow-mode .site-header .xul-mode-switch .xul-switch-chip:after{transform:translateX(12px)!important}
}
/* Large scenic image inside the old dashboard phone -- snowfall follows rounded top corners. */
html .experience .phone-shell{isolation:isolate!important}
html .experience .phone-shell>.xul-snowcap{display:none!important}
html .experience .phone-shell::before{
  content:""!important;position:absolute!important;z-index:30!important;top:-2px!important;left:1px!important;right:1px!important;
  width:calc(100% - 2px)!important;height:21px!important;
  border-radius:38px 38px 15px 15px / 23px 23px 8px 8px!important;
  background:radial-gradient(ellipse 36px 14px at 18% 12%,#fff 80%,transparent 84%),
    radial-gradient(ellipse 43px 19px at 55% 10%,#eafaff 72%,transparent 78%),
    radial-gradient(ellipse 46px 14px at 86% 14%,#fff 76%,transparent 82%),
    linear-gradient(180deg,#fbffff 0%,#e9f7fa 54%,rgba(193,226,230,.9) 90%,transparent 100%)!important;
  pointer-events:none!important;box-shadow:0 -2px 6px #ffffff54!important;
}
/* Frost on header and cards must never mask headlines or buttons. */
html .xul-active .xul-snowcap{max-height:18px!important;top:-3px!important}
html .xul-active .experience .chart-card>.xul-snowcap{top:-5px!important}
html .xul-active .transformation .transform-label .xul-snowcap{opacity:.27!important}
/* Performance: remove repeated costly full-surface blur and perpetual GPU effects. */
html.xmas-active .orbit-service-card,html.xmas-active .service-index-row,html.xmas-active .metric,
html.xmas-active .experience-panel,html.xmas-active .chart-card,html.xmas-active .browser-window,
html.xmas-active .xpro-present,html.xmas-active .xw-workshop .xw-visual,
html.xmas-active .xmas-feature-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.xmas-active .xmas-snow-canvas{opacity:.55!important}
html.xmas-active .xcf-city-sky{animation-duration:38s!important;filter:blur(15px)!important}
html.xmas-active .xpro-aurora{animation-duration:36s!important;filter:blur(26px)!important}
html.xmas-active .xpro-sleigh-silhouette{display:none!important}
@media(max-width:900px),(prefers-reduced-motion:reduce){
 html .xcf-santa-flight{animation:none!important;display:none!important}
 html .xcf-city-sky,html .xpro-aurora{animation:none!important;filter:none!important;opacity:.28!important}
 html .xmas-snow-canvas{opacity:.48!important}
 html .xul-real-lights .xul-bulb, html .xul-real-lights .xul-glass{animation:none!important}
 html .xul-card-crystals{display:none!important}
 html .dynamic-grain,html .dynamic-scan{display:none!important}
 html .pointer-glow{display:none!important}
 html .xcf-city-shell,html .xcf-freeze-shell{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
/* Exit from snow theme must remain visibly dark emerald, not persist washed-out variables. */
html:not(.xmas-snow-mode) body{color-scheme:dark}
html:not(.xmas-snow-mode) .site-header{background:linear-gradient(to bottom,rgba(1,8,9,.91),rgba(1,8,9,.65),rgba(1,8,9,.24))!important}
html:not(.xmas-snow-mode) .xul-mode-switch{background:linear-gradient(145deg,#0b3938,#08302c)!important;color:#f0fff9!important}
/* Desktop and mobile safe preloader emblem (no cropping). */
html .preloader-logo-wrap{overflow:visible!important;height:auto!important;min-height:135px!important;padding:16px!important}
html .preloader-logo-wrap img{display:block!important;max-width:min(85vw,440px)!important;max-height:160px!important;width:auto!important;height:auto!important;object-fit:contain!important;margin:auto!important}
/* Keep original Three.js mascot visible behind homepage content, never over buttons. */
html.xmas-active .immersive-scene.scene-home{z-index:1!important;opacity:.83!important;pointer-events:none!important}
html.xmas-active .immersive-scene.scene-home .immersive-stage{visibility:visible!important}
html.xmas-active .hero-cinematic .xpro-winter-scene{opacity:.73!important}
@media(max-width:760px){html.xmas-active .immersive-scene.scene-home{opacity:.7!important}html.xmas-active .xmas-snow-canvas{opacity:.39!important}}