/* Motion only: existing content, dimensions, and settled states stay intact. */
:root {
  --civilian-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Content remains readable when JavaScript or IntersectionObserver is unavailable. */
.animated {
  animation: none !important;
  opacity: 1;
  transform: none;
}

[data-civilian-reveal] {
  transition: opacity 400ms var(--civilian-ease-out), transform 400ms var(--civilian-ease-out);
}

[data-civilian-reveal="pending"] {
  opacity: 0;
  transform: translateY(12px);
}

/* Focus never waits for an entrance. */
[data-civilian-reveal]:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Service cards unfold inside their final footprint, without pushing the next row. */
.servicelist_sec .servicesbg .service-item > .heading1 {
  display: none;
}

.servicelist_sec .servicesbg .service-item .openstat1 {
  max-height: 300px;
  transition: none;
}

.servicelist_sec .servicesbg .service-item[data-civilian-service] .openstat1 {
  clip-path: inset(-8px -10px -10px -8px);
  transition: clip-path 600ms var(--civilian-ease-out);
}

.servicelist_sec .servicesbg .service-item[data-civilian-service="pending"] .openstat1 {
  clip-path: inset(0 0 calc(100% - 54px) 0 round 15px);
}

.servicelist_sec .servicesbg .service-item[data-civilian-service] .details1 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms var(--civilian-ease-out), transform 400ms var(--civilian-ease-out);
}

.servicelist_sec .servicesbg .service-item[data-civilian-service="pending"] .details1 {
  opacity: 0;
  transform: translateY(-8px);
}

@media (hover: hover) and (pointer: fine) {
  .worklist_sec .work_list a.civilian-motion-card {
    overflow: hidden;
  }

  .worklist_sec .work_list a.civilian-motion-card .infobg {
    isolation: isolate;
    background: rgba(44, 44, 44, 0.65);
    transform: translateY(var(--civilian-description-height, 0px));
    transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .worklist_sec .work_list a.civilian-motion-card .infobg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #2c2c2c;
    opacity: 1;
    transition: opacity 420ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .worklist_sec .work_list a.civilian-motion-card span.hovertext {
    display: block;
    opacity: 0;
    transition: opacity 260ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .worklist_sec .work_list a.civilian-motion-card:hover .infobg,
  .worklist_sec .work_list a.civilian-motion-card:focus-visible .infobg {
    transform: translateY(0);
  }

  .worklist_sec .work_list a.civilian-motion-card:hover .infobg::before,
  .worklist_sec .work_list a.civilian-motion-card:focus-visible .infobg::before {
    opacity: 0;
  }

  .worklist_sec .work_list a.civilian-motion-card:hover span.hovertext,
  .worklist_sec .work_list a.civilian-motion-card:focus-visible span.hovertext {
    opacity: 1;
  }

  .worklist_sec .work_list a.civilian-motion-card:focus-visible .infobg,
  .worklist_sec .work_list a.civilian-motion-card:focus-visible .infobg::before,
  .worklist_sec .work_list a.civilian-motion-card:focus-visible span.hovertext {
    transition: none;
  }

  .imgcontent_sec .imgcontentblock span.caption,
  .imgsliderbox_sec .slider-item span.caption,
  .imgsliderbox_sec.masonry .slider-item span {
    transition: opacity 140ms var(--civilian-ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .servicelist_sec .servicesbg .service-item[data-civilian-service] .openstat {
    clip-path: none;
    transition: none;
  }

  .servicelist_sec .servicesbg .service-item[data-civilian-service] .details {
    opacity: 1;
    transform: none;
    transition: opacity 80ms var(--civilian-ease-out);
    transition-delay: 0s !important;
  }

  [data-civilian-reveal],
  [data-civilian-reveal="pending"] {
    opacity: 1;
    transform: none;
    transition: opacity 80ms var(--civilian-ease-out);
    transition-delay: 0s !important;
  }

  .worklist_sec .work_list a.civilian-motion-card .infobg {
    transition: none;
  }

  .worklist_sec .work_list a.civilian-motion-card .infobg::before,
  .worklist_sec .work_list a.civilian-motion-card span.hovertext,
  .imgcontent_sec .imgcontentblock span.caption,
  .imgsliderbox_sec .slider-item span.caption,
  .imgsliderbox_sec.masonry .slider-item span {
    transition: opacity 80ms var(--civilian-ease-out);
  }

  .videogallery_sec .videobox {
    transition: none;
  }
}

/* Existing CTA artwork moves independently of the label. */
.civilian-cta-arrow {
  position: absolute !important;
  inset: 0;
  display: block;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-size: inherit !important;
  background-position: inherit !important;
  background-repeat: inherit !important;
  pointer-events: none;
  transition: transform 220ms var(--civilian-ease-out);
}

.information_sec .info-item {
  transition: none;
}

.information_sec .civilian-info-layout {
  display: block;
  position: relative;
}

.information_sec .civilian-info-layout > .info-item {
  position: absolute;
  margin: 0;
  cursor: pointer;
}

.information_sec .civilian-info-layout .infomid {
  position: relative;
  height: 100%;
  background: none !important;
  box-shadow: none;
  overflow: hidden;
}

.civilian-info-surface {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 3px 3px 8px #00000029;
  transform-origin: 0 0;
  pointer-events: none;
}

.information_sec .civilian-info-layout .info-item:not(.active) .details {
  display: none;
}

.information_sec .civilian-info-layout .info-item.active .details {
  display: block;
}

.information_sec .civilian-info-layout .info-item:focus-visible {
  outline: 2px solid #0075cf;
  outline-offset: 5px;
  border-radius: 20px;
}

.information_sec .civilian-info-layout .civilian-info-ghost {
  z-index: 3;
  pointer-events: none;
}

.civilian-info-measure,
.civilian-info-ghost {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .civilian-info-surface {
    border-radius: 10px;
  }
}

/* Contain article images so their full artwork stays inside the frame. */
.bottom_blog_sec .blog_list .posts figure img,
.bottom_blog_sec .blog_list .posts:hover figure img {
  height: 100%;
  object-fit: contain;
  transform: none;
  transition: none;
}

.bottom_blog_sec.newhome figure {
  background: #fff;
}

/* Stretch the existing title link across the card; keep the protruding CTA clickable. */
.bottom_blog_sec.newhome .posts h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 15px;
}

.bottom_blog_sec.newhome .posts h4 a:hover {
  color: inherit;
}

.bottom_blog_sec.newhome .posts a.read-more {
  z-index: 2;
  transition: background-color 220ms var(--civilian-ease-out);
}

.bottom_blog_sec.newhome .posts h4 a:focus-visible::after {
  outline: 2px solid #0075cf;
  outline-offset: 3px;
}

.bottom_blog_sec.newhome .posts:has(a:focus-visible) a.read-more {
  background-color: #ea5500;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .bottom_blog_sec.newhome .posts:hover a.read-more {
    background-color: #ea5500;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Zoom from a 2% inset to full size, never beyond the image frame. */
  .bottom_blog_sec.newhome .blog_list .posts figure img {
    transform: scale(0.98);
    transition: transform 250ms var(--civilian-ease-out);
  }

  .bottom_blog_sec.newhome .blog_list .posts:hover figure img {
    transform: scale(1);
  }

  .bottom_blog_sec.newhome .blog_list .posts:has(a:focus-visible) figure img {
    transform: none;
    transition: none;
  }
}

.information_sec .civilian-info-layout .info-item.active .infomid::after,
.information_sec .info-item.active .heading11 .civilian-cta-arrow {
  display: none;
}

@media (max-width: 1023px) {
  .information_sec .heading11 .civilian-cta-arrow {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .civilian-arrow-trigger:hover .civilian-cta-arrow {
    transform: translateX(4px);
  }
  .civilian-arrow-trigger:hover .civilian-cta-arrow.civilian-arrow-back {
    transform: translateX(-4px);
  }
  .about_sec .right_side li a span.last::after,
  .information_sec .info-item .infomid::after {
    transition: transform 220ms var(--civilian-ease-out);
  }
  .about_sec .right_side li a:hover span.last::after,
  .information_sec .info-item:hover .infomid::after {
    transform: translateX(4px);
  }
  .civilian-arrow-trigger:focus-visible .civilian-cta-arrow {
    transform: none;
    transition: none;
  }
}

/* The requested hero video modal uses the theme's existing Fancybox dialog. */
.civilian-hero-modal .fancybox-slide {
  padding: 0;
}
.civilian-hero-modal .fancybox-slide::before {
  display: none;
}
.civilian-hero-modal .civilian-video-dialog {
  width: 90vw;
  height: 100vh;
  height: 100dvh;
  max-width: 90vw;
  max-height: none;
  padding: 0;
  margin: 0;
  background: #000;
  vertical-align: top;
  overflow: hidden;
}
.civilian-video-dialog video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.civilian-hero-modal .fancybox-close-small {
  width: 48px;
  height: 48px;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 1;
  z-index: 2;
}
.civilian-hero-modal .fancybox-close-small:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.civilian-hero-modal .fancybox-bg {
  background: #000;
}
.civilian-hero-modal.fancybox-is-open .fancybox-bg {
  opacity: 0.88;
}

/* Switching the OS preference must also stop an arrow already in motion. */
@media (prefers-reduced-motion: reduce) {
  .civilian-cta-arrow,
  .about_sec .right_side li a span.last::after,
  .information_sec .info-item .infomid::after {
    transform: none !important;
    transition: none !important;
  }
}

/* XD's two orange-banner states; preserve the original image as the no-JS fallback. */
.howwedo_sec .imgs .animatedimg.civilian-banner-ready {
  width: 667px;
  max-width: calc(100% - 32px);
}
.civilian-banner-ready > .imgdesktop {
  display: none !important;
}
.civilian-banner-art svg {
  display: block;
  width: 100%;
  height: auto;
}
.civilian-banner-art .civilian-banner-mobile {
  display: none;
}
.civilian-banner-talk { opacity: 0; }
.civilian-banner-surface { transform-origin: center; transform-box: fill-box; }
.civilian-banner-started .civilian-banner-surface,
.civilian-banner-started .civilian-banner-words,
.civilian-banner-started .civilian-banner-reach,
.civilian-banner-started .civilian-banner-talk {
  animation-duration: 4800ms;
  animation-timing-function: var(--civilian-ease-out);
  animation-fill-mode: both;
  animation-play-state: paused;
}
.civilian-banner-started .civilian-banner-surface { animation-name: civilian-banner-width; }
.civilian-banner-started .civilian-banner-words { animation-name: civilian-banner-position; }
.civilian-banner-started .civilian-banner-reach { animation-name: civilian-banner-reach; }
.civilian-banner-started .civilian-banner-talk { animation-name: civilian-banner-talk; }
.civilian-banner-playing .civilian-banner-surface,
.civilian-banner-playing .civilian-banner-words,
.civilian-banner-playing .civilian-banner-reach,
.civilian-banner-playing .civilian-banner-talk {
  animation-play-state: running;
}
@keyframes civilian-banner-width {
  0%, 41.6667%, 100% { transform: scaleX(1); }
  50%, 91.6667% { transform: scaleX(0.83508); }
}
@keyframes civilian-banner-position {
  0%, 41.6667%, 100% { transform: translateX(0); }
  50%, 91.6667% { transform: translateX(50px); }
}
@keyframes civilian-banner-reach {
  0%, 41.6667%, 100% { opacity: 1; }
  50%, 91.6667% { opacity: 0; }
}
@keyframes civilian-banner-talk {
  0%, 41.6667%, 100% { opacity: 0; }
  50%, 91.6667% { opacity: 1; }
}
@keyframes civilian-banner-mobile-width {
  0%, 41.6667%, 100% { transform: scaleX(1); }
  50%, 91.6667% { transform: scaleX(0.81323); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .howwedo_sec .imgs .animatedimg.civilian-banner-ready { width: 479px; }
}
@media (max-width: 767px) {
  .howwedo_sec .imgs .animatedimg.civilian-banner-ready { width: 257px; }
  .civilian-banner-art .civilian-banner-desktop { display: none; }
  .civilian-banner-art .civilian-banner-mobile { display: block; }
  .civilian-banner-started .civilian-banner-mobile .civilian-banner-surface { animation-name: civilian-banner-mobile-width; }
}
@media (prefers-reduced-motion: reduce) {
  .civilian-banner-started .civilian-banner-surface,
  .civilian-banner-started .civilian-banner-words,
  .civilian-banner-started .civilian-banner-reach,
  .civilian-banner-started .civilian-banner-talk {
    animation: none;
  }
}