/* TAG Solutions overrides layered on top of the ITSulu template CSS. */

/* Logo: swap between the light (transparent-bg, white) mark used over the dark
   hero and the boxed mark used once the header turns solid white on scroll. */
.mil-top-panel .mil-logo.mil-logo-tags {
  background: none;
  width: auto;
  height: auto;
}
.mil-logo-tags img {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
}
/* Solid (scrolled / non-hero) state → show boxed logo, hide light one. */
.mil-logo-tags .mil-logo-light { display: none; }
.mil-logo-tags .mil-logo-dark { display: block; }
/* Transparent state (over dark hero) → show light logo, hide boxed one. */
.mil-top-panel-transparent .mil-logo-tags .mil-logo-light { display: block; }
.mil-top-panel-transparent .mil-logo-tags .mil-logo-dark { display: none; }
/* Immersive mobile hero: the template forces the "transparent" header to a
   solid white background at <=1200px (see style.css @media), which stacks a
   white header box on top of the dark hero and then the white trust strip below
   — a boxy white/dark/white sandwich on first view. Instead, keep the header
   genuinely transparent over the hero (light logo + white burger) so the hero
   reads as one full-bleed block. The scroll handler removes .mil-top-panel-
   transparent past 220px, at which point the header falls back to solid white
   with the dark logo/burger (the base rules below), so the menu stays legible. */
@media screen and (max-width: 1200px) {
  .mil-top-panel.mil-top-panel-transparent {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
  }
  .mil-top-panel-transparent .mil-logo-tags .mil-logo-light { display: block; }
  .mil-top-panel-transparent .mil-logo-tags .mil-logo-dark { display: none; }
  .mil-top-panel.mil-top-panel-transparent .mil-menu-btn span,
  .mil-top-panel.mil-top-panel-transparent .mil-menu-btn span:before,
  .mil-top-panel.mil-top-panel-transparent .mil-menu-btn span:after {
    background: #fff;
  }
}

/* Contact form on the dark gradient panel: make placeholders legible and give
   the message box a comfortable height. */
.mil-contact-form input::placeholder,
.mil-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.mil-contact-form textarea {
  min-height: 140px;
  padding-top: 15px;
}

/* Dark gradient panel used to hold the contact form. Unlike the mil-p-* helpers
   (vertical padding only) and .mil-gradient-bg (an absolute background layer),
   this is a normal content box with padding on all sides. */
.mil-form-panel {
  background: linear-gradient(180deg, #181e26 0%, #121820 100%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  padding: 56px;
}
@media (max-width: 576px) {
  .mil-form-panel { padding: 32px 24px; }
}

/* Success story cards (home page "Latest Success Stories"): show in full color by
   default, and go black & white with the existing zoom on hover — reversing the
   template's default grayscale-until-hover behavior. */
.mil-card .mil-cover-frame img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
.mil-card:hover .mil-cover-frame img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* Trust strip ("Certified by Big Companies"): reverse the template's default so
   partner logos show in full color, and go black & white on hover. */
.mil-partners-frame a {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: -webkit-filter 0.35s ease;
  transition: filter 0.35s ease;
}
.mil-partners-frame a:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* Breadcrumbs over a dark hero: the template ships no `.mil-breadcrumbs-light`
   rule, so links default to dark and vanish. Make them light. */
.mil-breadcrumbs-light li a {
  color: rgba(255, 255, 255, 0.85);
}
.mil-breadcrumbs-light li a:hover {
  color: #f57c00;
}
.mil-breadcrumbs-light li:last-child a {
  color: rgba(255, 255, 255, 0.55);
}

/* Service cards (services page grid): hover lift + image zoom. Base look is
   inline-styled so it survives even if this stylesheet is cached. */
.mil-svc-card {
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.36, 1), box-shadow 0.35s;
  transition: transform 0.35s cubic-bezier(0, 0, 0.36, 1), box-shadow 0.35s;
}
.mil-svc-card:hover {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(18, 24, 32, 0.13);
  border-color: rgba(245, 124, 0, 0.4) !important;
}
.mil-svc-card .mil-svc-img img {
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.mil-svc-card:hover .mil-svc-img img {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

/* Solutions mega-menu: multi-column dropdown grouped by solution domain. */
.mil-top-panel .mil-navigation nav ul li.mil-mega > ul {
  display: flex;
  gap: 46px;
  min-width: 0;
  width: -webkit-max-content;
  width: max-content;
  max-width: 92vw;
  padding: 36px 40px;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(10px) scale(0.98);
  transform: translateX(-50%) translateY(10px) scale(0.98);
}
.mil-top-panel .mil-navigation nav ul li.mil-mega:hover > ul {
  -webkit-transform: translateX(-50%) translateY(0) scale(1);
  transform: translateX(-50%) translateY(0) scale(1);
}
.mil-top-panel .mil-navigation nav ul li.mil-mega > ul > li.mil-mega-col {
  margin: 0;
}
.mil-mega-title {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mil-mega-title a {
  color: #f57c00 !important;
  font-weight: 600 !important;
}
.mil-mega-list {
  /* Undo the template's descendant-ul dropdown styling so the nested list
     renders inline as a static column instead of a hidden fly-out. */
  position: static !important;
  opacity: 1 !important;
  /* Inherit the container's pointer-events (none while hidden, all on hover) so
     the invisible panel doesn't capture the cursor and open on near-hover. */
  pointer-events: inherit !important;
  -webkit-transform: none !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  min-width: 0 !important;
  list-style: none;
  padding: 0 !important;
  margin: 0;
  top: auto;
  left: auto;
}
.mil-mega-list li {
  margin: 0 0 12px;
  list-style: none;
}
.mil-mega-list li:last-child { margin-bottom: 0; }
.mil-mega-list li a { white-space: nowrap; }

/* Mobile menu: the multi-column mega panel can't render inside the template's
   stacked mobile nav (it collapses to a gray box with one heading). Hide the
   mega dropdowns on mobile — tapping the parent link goes to the section index
   (Services/Solutions), which lists everything. */
@media screen and (max-width: 1200px) {
  .mil-top-panel .mil-navigation nav ul li.mil-mega > ul {
    display: none !important;
  }
  /* The dropdown "dot" marker after Services/Solutions is now meaningless on
     mobile since there's no dropdown — hide it for those two. */
  .mil-top-panel .mil-navigation nav ul li.mil-mega > a:before {
    display: none;
  }
}

/* Hero fit on mobile: the template's banner is height:100vh with content
   vertically centered but also carrying padding-top:200px, and the h1 renders
   at 42px. On phones that combination makes the 4-5 line headline + description
   overflow, pushing the CTAs below the fold on first view. Anchor the content to
   the top under the fixed header, shrink the headline, and tighten the vertical
   rhythm so eyebrow -> headline -> copy -> CTAs all land in the first viewport. */
@media screen and (max-width: 992px) {
  .mil-banner .mil-banner-content {
    padding-top: 120px;
    padding-bottom: 40px;
    align-items: flex-start;
  }
  .mil-banner .mil-banner-content h1 {
    font-size: 34px;
  }
  .mil-banner .mil-banner-content .mil-mb-30 {
    margin-bottom: 18px !important;
  }
  .mil-banner .mil-banner-content p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    /* Trim the hero blurb to 3 lines on phones so it stays a hook, not a
       paragraph — keeps eyebrow → headline → copy → CTAs in the first view. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media screen and (max-width: 480px) {
  .mil-banner .mil-banner-content {
    padding-top: 105px;
  }
  .mil-banner .mil-banner-content h1 {
    font-size: 29px;
  }
}

/* Hero buttons on mobile: the template's base .mil-button uses padding:0 60px,
   which balloons the long "Book a Discovery Call" label to near-full-width while
   the short "Explore Services" stays narrow — so they render as mismatched pills.
   The hero also sets flexWrap inline, defeating the framework's stack-to-column
   rule. Force a clean, equal, full-width stacked layout on small screens. */
@media screen and (max-width: 992px) {
  .mil-banner .mil-buttons-frame {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
  }
  .mil-banner .mil-buttons-frame .mil-button {
    width: 100%;
    height: 58px;
    padding: 0 24px;
    margin: 0;
  }
}

/* Trust-strip logos on mobile: the template drops the row to 2 columns with
   justify-content:space-between, which shoves each pair to the far edges (big
   middle gap) and strands the odd 5th logo alone on the left. Let the logos
   flow centered and wrap naturally so every row — including a short last row —
   is balanced. */
@media screen and (max-width: 992px) {
  .mil-partners-frame {
    justify-content: center !important;
    gap: 28px 36px;
  }
  .mil-partners-frame a {
    width: auto !important;
    margin-bottom: 0 !important;
  }
}

/* Trust-strip marquee: on mobile the certified-by logos scroll continuously
   left-to-right as a single row instead of a static grid. The desktop grid is
   hidden on mobile and vice-versa. The track holds two copies of the logo set
   so the loop is seamless (animating a full 50% == one complete set width). */
.mil-trust-marquee { display: none; }
@media screen and (max-width: 992px) {
  .mil-partners-frame.mil-trust-desktop { display: none !important; }
  .mil-trust-marquee {
    display: block;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .mil-trust-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* start shifted one set to the left, slide back to 0 => travels left->right */
    animation: mil-trust-scroll 24s linear infinite;
  }
  .mil-trust-track a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    /* no hover on touch, so show the logos in full color rather than grayscale */
    filter: none;
  }
  .mil-trust-track a img {
    height: 34px;
    width: auto;
    display: block;
  }
  @keyframes mil-trust-scroll {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mil-trust-track { animation: none; }
  }
}

/* Closing CTA band buttons on mobile: same mismatched-pill problem as the hero
   (padding:0 60px makes the long label balloon while the short one stays narrow).
   Stack them equal and full-width for a clean, consistent pair. */
@media screen and (max-width: 992px) {
  .mil-cta-buttons {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
  }
  .mil-cta-buttons .mil-button {
    width: 100%;
    height: 58px;
    padding: 0 24px;
    margin: 0;
  }
}

/* Newsletter form on mobile: the template stacks the input above the button
   below 768px, but both keep their desktop sizing (input height:70-80px, the
   .mil-button height:70px), so the pair looks oversized on a phone. Slim both
   down to a comfortable touch height. */
@media screen and (max-width: 768px) {
  .mil-subscribe-form input {
    height: 54px;
    padding: 0 24px;
    font-size: 15px;
  }
  .mil-subscribe-form button.mil-button {
    height: 52px;
    padding: 0 24px;
  }
}

/* Site-wide scroll progress bar (see components/ScrollProgress.jsx): a thin
   track fixed to the bottom of the viewport whose orange fill grows with scroll
   depth. Sits above page content but the track itself is transparent so it's
   unobtrusive. */
.mil-scroll-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(18, 24, 32, 0.08);
  z-index: 9999;
  pointer-events: none;
}
.mil-scroll-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f57c00, #ff9d3c);
  box-shadow: 0 0 10px rgba(245, 124, 0, 0.6);
  border-radius: 0 4px 4px 0;
  transition: width 0.1s linear;
}

/* ── Global branded loader ─────────────────────────────────────────────
   TAG Solutions loading state: pulsing brand mark + orange indeterminate
   bar. Rendered by app/loading.jsx during route transitions, and reusable
   anywhere via <Loader fullscreen={false} />. */
.tag-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}
.tag-loader--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 0;
  background: #ffffff;
}
.tag-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.tag-loader__mark {
  width: 72px;
  height: 72px;
  object-fit: contain;
  animation: tag-loader-pulse 1.4s ease-in-out infinite;
}
.tag-loader__bar {
  width: 132px;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 124, 0, 0.15);
  overflow: hidden;
}
.tag-loader__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f57c00, #ff9d3c);
  animation: tag-loader-slide 1.15s ease-in-out infinite;
}
@keyframes tag-loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.86); opacity: 0.5; }
}
@keyframes tag-loader-slide {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(360%); }
}
@media (prefers-reduced-motion: reduce) {
  .tag-loader__mark { animation: none; opacity: 1; }
  .tag-loader__bar span { animation: tag-loader-slide 2.4s linear infinite; }
}

/* ------------------------------------------------------------------ */
/* Banner hero — mobile overlay fix                                    */
/* On <=992px the template collapses .mil-banner to height:auto, so    */
/* the short hero reveals the lit lower third of the space background  */
/* image. The default flat 80% overlay isn't strong enough to keep     */
/* that area dark, leaving a washed-out grey band under the copy.      */
/* Anchor a dark base colour and use a bottom-weighted gradient so the */
/* hero reads as one cohesive dark block and text stays legible.       */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  .mil-banner {
    background-color: #0d1117;
  }
  .mil-banner .mil-overlay {
    background: linear-gradient(
      180deg,
      rgba(18, 24, 32, 0.78) 0%,
      rgba(18, 24, 32, 0.88) 55%,
      rgba(13, 17, 23, 0.96) 100%
    );
  }
}

/* Static-image page heroes (Services, Contact, Careers, FAQ, SLED, Industries,
   Engagement — every hero using /tags/hero-bg.png rather than the home/about
   swiper slides) show the same washed-out grey band on DESKTOP that the rule
   above fixes for phones: the space image's lit lower third bleeds through the
   flat 0.8 overlay, leaving a grey strip above the white section. Apply the dark
   base + bottom-weighted gradient at all widths so the hero reads as one
   cohesive dark block. Swiper heroes keep their own treatment (excluded here). */
.mil-banner:not(:has(.swiper-container)) {
  background-color: #0d1117;
}
.mil-banner:not(:has(.swiper-container)) .mil-overlay {
  background: linear-gradient(
    180deg,
    rgba(18, 24, 32, 0.72) 0%,
    rgba(18, 24, 32, 0.85) 55%,
    rgba(13, 17, 23, 0.97) 100%
  );
}

/* About page "Our Story & Mission" growth-trajectory illustration
   (components/MissionGraphic.jsx). All motion is CSS so it can be switched off
   under prefers-reduced-motion: the trajectory line draws itself in, milestone
   nodes pulse in sequence, background stars twinkle, and a glowing node climbs
   the curve via offset-path. */
.mil-mission-graphic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.mil-mission-line {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: mil-mission-draw 3s ease forwards;
}
@keyframes mil-mission-draw {
  to { stroke-dashoffset: 0; }
}
.mil-mission-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: mil-mission-pulse 2.8s ease-in-out infinite;
}
@keyframes mil-mission-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
.mil-mission-comet {
  offset-rotate: 0deg;
  animation: mil-mission-climb 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes mil-mission-climb {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.mil-mission-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: mil-mission-twinkle 3.5s ease-in-out infinite;
}
@keyframes mil-mission-twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .mil-mission-line { animation: none; stroke-dashoffset: 0; }
  .mil-mission-node,
  .mil-mission-star { animation: none; opacity: 0.9; }
  .mil-mission-comet { animation: none; offset-distance: 100%; opacity: 1; }
}