/* Soft controls and slow ambient motion in the Nabytech brand palette. */
.button,.button-small,.reader-control,.carousel-button,.filter-button,.menu-toggle{border-radius:12px;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease,transform .25s cubic-bezier(.22,1,.36,1)}
.button,.button-small{padding:17px 24px;box-shadow:0 5px 15px #005cb925}
.reader-control,.carousel-button,.filter-button,.menu-toggle{box-shadow:0 3px 11px #0b0d100d}
.reader-control{padding:14px 19px}
.carousel-button{padding:14px 17px}
.filter-button{padding:13px 20px}
.footer-bottom button{min-height:48px;padding:10px 14px;border:1px solid #63656955;border-radius:12px;background:white;text-decoration:none;box-shadow:0 3px 11px #0b0d100d;transition:color .2s,background .2s,box-shadow .2s}
.footer-bottom button:hover{color:#005CB9;border-color:#005CB9;box-shadow:0 5px 14px #005cb919}
.footer-bottom button:active{background:#005CB9;color:white}
.button:hover{transform:none}
.filter-button[aria-pressed="true"]{background:#005CB9;border-color:#005CB9;color:white;box-shadow:0 4px 13px #005cb926}
.logo-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.space-near { animation: space-near-drift 25s ease-in-out infinite alternate paused; }
.space-far { animation: space-far-drift 32s ease-in-out infinite alternate paused; }
.hero-logo-scene.is-motion-visible :is(.space-near, .space-far) { animation-play-state: running; }
@keyframes space-near-drift {
  from { transform: translate(-8px, 3px); }
  to { transform: translate(14px, -7px); }
}
@keyframes space-far-drift {
  from { transform: translate(4px, -3px); opacity: .25; }
  to { transform: translate(-8px, 5px); opacity: .63; }
}
html[data-motion="off"] .reader-control[data-motion-toggle]:not(:active) { border-color: #005cb966; background: #f3f8fe; color: #005CB9; }

.brand-marquee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 48px);
  padding-block: clamp(14px, 2.4vw, 36px);
}
.brand-marquee::before, .brand-marquee::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, #005cb931);
}
.brand-marquee::after { transform: scaleX(-1); }
.brand-marquee-stage {
  position: relative;
  display: grid;
  width: clamp(10.5rem, 18vw, 14.25rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #005cb92e;
  border-radius: 20px;
  background: radial-gradient(ellipse at 35% 22%, #fff, transparent 72%), #eaf4fb;
  box-shadow: inset 0 1px #fff, 0 14px 36px #005cb911;
}
.brand-marquee-marks { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.brand-marquee-marks > img { grid-area: 1 / 1; width: 78%; height: auto; }
.brand-marquee-marks > img:first-child { width: 49%; }
.brand-marquee-marks > img:last-child { width: 65%; }
.brand-marquee-marks > img:not(:first-child) { opacity: 0; visibility: hidden; }
.brand-marquee-progress {
  display: none;
  position: absolute;
  inset: auto 30% 14px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: #005cb92b;
}
html[data-motion="on"] .brand-marquee-progress { display: block; }
.brand-marquee-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: #005cb9;
}

.services-section .section-intro {
  padding-block: clamp(27px, 3.8vw, 58px) clamp(25px, 3vw, 42px);
}
.services-section .section-intro h2 {
  font-size: clamp(2.1rem, 4.6vw, 5.1rem);
  line-height: 1.12;
  text-wrap: balance;
}
.services-section .section-intro h2 > span { display: block; }
.service-explorer {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: start;
  gap: clamp(25px, 4.5vw, 78px);
}
.service-directory { display: grid; gap: 10px; min-width: 0; }
.service-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid #005cb924;
  border-radius: 13px;
  background: #f8fbfe;
  color: var(--ink);
  line-height: 1.45;
  box-shadow: 0 3px 9px #005cb909;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.service-link svg { width: 26px; height: 26px; justify-self: center; color: var(--blue); }
.service-link strong { display: block; font-size: calc(1.2rem * var(--reading-scale)); font-weight: 650; }
.service-link small { display: block; margin-top: 4px; color: #4d5055; font-size: var(--control-size); }
.service-link-arrow { justify-self: end; color: var(--blue); font-size: 24px; }
.service-link:focus-visible { border-color: var(--blue); }
.service-link:active { background: #e5f1fc; border-color: var(--blue); transform: translateY(1px); }

.service-showcase {
  padding: clamp(15px, 2.3vw, 34px);
  border: 1px solid #005cb922;
  border-radius: 21px;
  background: radial-gradient(ellipse at 82% 20%, #e6f3fb, #f5f9fd 56%, #fbfdff);
}
.showcase-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.showcase-head h3 {
  color: #14283d;
  font-size: calc(1.125rem * var(--reading-scale));
  line-height: 1.35;
  font-weight: 700;
}
.showcase-head .mono { display: block; color: var(--blue); font-variant-numeric: tabular-nums; }
.carousel-button .play-label { font-size: inherit; }
.play-icon {
  flex: 0 0 13px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.service-showcase[data-playing="true"] .carousel-play { background: var(--blue); border-color: var(--blue); color: white; }
.service-showcase[data-playing="true"] .play-icon {
  clip-path: none;
  background: linear-gradient(90deg, currentColor 0 33%, transparent 33% 67%, currentColor 67%);
}
.showcase-stage { position: relative; isolation: isolate; padding-top: 10px; }
.showcase-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px 9px auto;
  aspect-ratio: 16 / 10;
  border: 1px solid #007cba38;
  border-radius: 16px;
  background: #007cba0a;
  transform: rotate(2.2deg) translateY(7px);
}
.service-showcase .service-panel { position: relative; background: transparent; transition: none; }
.service-showcase .service-visual {
  aspect-ratio: 16 / 10;
  border: 1px solid #005cb927;
  border-radius: 14px;
  box-shadow: 0 20px 30px -18px #002f6375;
}
.service-showcase .service-visual::after { background: linear-gradient(transparent 75%, #0b0d1024); }
.showcase-caption {
  color: #283747;
  font-size: var(--control-size);
  line-height: 1.5;
  font-weight: 550;
  min-height: 3em;
  margin-top: 17px;
}
.showcase-note { margin-top: 3px; color: #55585d; }
::view-transition { pointer-events: none; }
.contact-brand {
  display: inline-block;
  margin-top: 24px;
  padding: 9px 10px;
  max-width: 100%;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #005cb929;
}
.contact-brand img { width: 220px; height: auto; }

.pointer-trail {
  position: fixed;
  inset: 0;
  z-index: 29;
  contain: strict;
  pointer-events: none;
  overflow: hidden;
}
.pointer-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #007CBA; opacity: 0; }
.pointer-spark:nth-child(3n) {
  width: 11px;
  height: 11px;
  border-radius: 0;
  background: #2b92d2;
  clip-path: polygon(50% 0, 64% 37%, 100% 50%, 64% 63%, 50% 100%, 36% 63%, 0 50%, 36% 37%);
}

.media-parallax, .media-cinematic { will-change: auto; }
.is-motion-visible > .media-parallax,
.is-motion-visible > .media-parallax > .media-cinematic { will-change: transform; }
html[data-motion="on"] .service-link svg { animation: icon-soft-float 7.5s ease-in-out infinite paused; }
html[data-motion="on"] .service-link:nth-child(even) svg { animation-delay: -2.3s; }
html[data-motion="on"] .service-directory.is-motion-visible .service-link svg { animation-play-state: running; }
html[data-motion="on"] .service-visual,
html[data-motion="on"] .project-image { animation: photo-lift 8s ease-in-out infinite paused; }
html[data-motion="on"] .project-card:nth-child(even) .project-image { animation-duration: 10s; animation-delay: -3s; }
html[data-motion="on"] .service-visual.is-motion-visible,
html[data-motion="on"] .project-image.is-motion-visible { animation-play-state: running; }
html[data-motion="on"] .service-panel.is-entering { animation: showcase-enter .7s var(--ease) both; }
@keyframes photo-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes showcase-enter {
  from { opacity: .35; transform: translateY(12px) scale(.978); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.logo-orbit{animation-duration:28s}
.orbit-two{animation-duration:36s}
.logo-glow{animation:logo-light-drift 26s ease-in-out infinite alternate,glow-soft-breathe 9s ease-in-out infinite alternate;animation-play-state:paused}
.ambient-wave{position:absolute;inset:15% -10% auto;width:120%;height:80%;opacity:.17;animation:wave-soft-drift 32s ease-in-out infinite alternate;animation-play-state:paused}
.hero-logo-scene.is-motion-visible .ambient-wave{animation-play-state:running}
.hero-logo-scene.is-motion-visible .logo-glow{animation-play-state:running}
@keyframes glow-soft-breathe{from{opacity:.35}to{opacity:.8}}
@keyframes wave-soft-drift{from{transform:translate(-3%,3%) scaleY(.96)}to{transform:translate(4%,-3%) scaleY(1.04)}}
@keyframes icon-soft-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(hover:hover) and (pointer:fine){
 .button:hover,.button-small:hover{background:#007CBA;transform:translateY(-3px);box-shadow:0 8px 20px #005cb92b}
 .reader-control:hover,.carousel-button:hover,.filter-button:hover,.menu-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0b0d1017;border-color:#005CB9}
 .service-link:hover{color:var(--blue);border-color:#005cb970;background:#eef7ff;transform:translateY(-2px);box-shadow:0 6px 17px #005cb917}
}
.button:active,.button-small:active,.reader-control:active,.carousel-button:active,.filter-button:active,.menu-toggle:active{transform:translateY(1px) scale(.98);box-shadow:0 1px 4px #005cb92b;background:#005CB9;border-color:#005CB9;color:white;transition-duration:.08s}
.button:disabled,.reader-control:disabled,.carousel-button:disabled{transform:none;box-shadow:0 2px 6px #0b0d100a}
@media(min-width:801px) and (max-width:1100px){.site-header .brand-logo img{width:220px}}
@media(min-width:901px) and (max-height:820px){
  .hero-wordmark > img { max-width: min(780px, 75vw); }
  html[data-text-size="large"] .hero-wordmark > img { max-width: min(600px, 75vw); }
  .hero-bottom { padding-block: 20px 30px; }
  .hero-actions { margin-top: 18px; }
}
@media(max-width:1100px){
  .service-explorer{grid-template-columns:1fr;gap:26px}
  .service-directory{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-showcase{width:100%;max-width:760px;justify-self:center}
}
@media(max-width:700px){
  .reader-control{padding:14px 10px}
  .carousel-button{padding:11px 12px}
  .service-directory{grid-template-columns:1fr;gap:8px}
  .service-link{grid-template-columns:28px minmax(0,1fr) 19px;gap:10px;padding:13px 11px}
  .service-link strong{font-size:calc(1.0625rem * var(--reading-scale))}
  .service-link svg{width:23px;height:23px}
  .service-link-arrow{font-size:21px}
  .service-showcase{border-radius:16px}
  .showcase-caption{margin-top:13px}
}
@media(max-width:520px){
  .showcase-head { display: flex; flex-wrap: wrap; }
  .showcase-head .carousel-play { width: 100%; }
}
@media(max-width:370px){.reader-control{padding:13px 8px}.filter-button{padding:13px 15px}.showcase-head{display:flex;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){
  .ambient-wave,.space-near,.space-far{animation:none!important}
  :is(.button,.reader-control,.carousel-button,.filter-button,.menu-toggle,.service-link):is(:hover,:active){transform:none!important}
}
html[data-motion="off"] :is(.button,.reader-control,.carousel-button,.filter-button,.menu-toggle,.service-link):is(:hover,:active){transform:none!important}