/* ── HERO: Big Text & Image Background ─────────────────────────────────── */

/* hidden unless slide is active */
.hero-shadow-text {
  position: absolute;
  top: 30%;
  left: 0;
  width: 200%;              /* enough to scroll through */
  transform: translateY(-50%) translateX(100%);
  font-size: 10vw;          /* adjust scale */
  font-weight: 900;
  color: rgba(0,0,0,0.1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  animation: slideShadow 20s linear infinite;
  z-index: 0;
}

/* only active slide’s shadow is visible */
.swiper-slide-active .hero-shadow-text {
  opacity: 1;
}

/* shadow scroll animation */
@keyframes slideShadow {
  from { transform: translateY(-50%) translateX(100%); }
  to   { transform: translateY(-50%) translateX(-100%); }
}

/* lift hero text above the shadow */
.mil-hero-text, .mil-hero-text * {
  position: relative;
  z-index: 1;
}

/* HERO background + light overlay */
#top.mil-hero-4 {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  background:
    /* 1) dark‑to‑light wash */
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.9)),
    /* 2) hero image */
    url('../img/deb389ad-612d-4b4b-a65c-de05a0257b11.png')
      center/cover no-repeat;
}


h1,
h2,
h4,
.mil-h1,
.mil-h2,
.mil-h4 {
  font-family: 'Muli', sans-serif;
  color: #fff;
  /*font-weight: 800;*/
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -2%;
}

/* mobile overrides */
@media (max-width: 767.98px) {
  h1,
  .mil-h1 {
    font-size: 2.00rem;  /* was 3rem, now 75% */
  }

  h2,
  .mil-h2 {
    font-size: 1.5rem; /* was 2.5rem, now 75% */
  }

  h4,
  .mil-h4 {
    font-size: 1.0rem; /* was 1.75rem, now 75% */
  }
}

h3,
h5,
h6,
.mil-h3,
.mil-h5,
.mil-h6 {
  font-family: 'Muli', sans-serif;
  color: #fff;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -2%;
}
 
 /* ── LOGO ────────────────────────────────────────────────────────────── */
  .mil-logo-img {
    height: 80px;
    width: auto;
    display: block;
    -webkit-transition: opacity .3s;
            transition: opacity .3s;
  }
  body.scrolled .mil-logo-img {
    opacity: .75;
  }

  /* ── PRELOADER VIDEO ─────────────────────────────────────────────────── */
  .mil-logo-video {
    height: 30%;
    width: 30%;
    object-fit: cover;
    opacity: 0;
    -webkit-transition: opacity .4s ease;
            transition: opacity .4s ease;
    pointer-events: none;
  }
  @media (max-width: 768px) {
    .mil-logo-video {
      width: 60vw;
      height: auto;
      max-width: 300px;
      max-height: 260px;
      object-fit: contain;
    }
  }
  .mil-preloader.mil-hide {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .6s ease .2s;
            transition: opacity .6s ease .2s;
  }
  
  .mil-iconbox i {
    font-size: 100px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(255 255 255 / 60%);
}

  /* ── HERO TEXT ON DESKTOP ───────────────────────────────────────────── */
  .mil-hero-4 .mil-hero-text {
    position: absolute;
    top: 50%;
    left: 5%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    max-width: 45%;
    z-index: 2;
    padding: 1rem;
  }

  /* ── HERO TITLE OVERRIDE ───────────────────────────────────────────── */
  .hero-title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .hero-desc {
    font-size: 1rem;
    color: #ccc;
  }

  /* ── HERO TEXT ON TABLET & MOBILE ─────────────────────────────────── */
  @media (max-width: 992px) {
    .mil-hero-4 .mil-hero-text {
      position: relative;
      top: 140px;
      max-width: 90%;
      padding: 0 1rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .hero-title,
    .hero-desc {
      text-align: center !important;
    }
    .hero-title { font-size: 1.75rem; }
    .hero-desc  { font-size: 0.9rem;  }
  }

  /* ── DESKTOP HERO LAYOUT ────────────────────────────────────────────── */
  @media (min-width: 992px) {
    :root { --header-h: 150px; }
    .mil-hero-4 .swiper-slide,
    .mil-hero-4 .mil-hero-main {
      height: calc(140vh - var(--header-h));
    }
    .mil-hero-4 .mil-hero-main {
      display: flex;
      align-items: center;
    }
    .mil-hero-4 .mil-hero-text {
      position: static;
      -webkit-transform: none;
              transform: none;
      max-width: 500px;
      margin-right: auto;
      text-align: left;
    }
    .hero-title { font-size: 3.25rem; }
    .hero-desc  { font-size: 1.05rem; }
  }

  /* ── HERO CTA BUTTON ───────────────────────────────────────────────── */
  .hero-cta {
    padding: .35rem .9rem;
    font-size: .75rem;
    line-height: 1.15;
    -webkit-transition: transform .25s ease;
            transition: transform .25s ease;
  }
  @media (min-width:576px) { .hero-cta { padding:.5rem 1.15rem; font-size:.8rem; } }
  @media (min-width:768px) { .hero-cta { padding:.6rem 1.4rem;  font-size:.9rem; } }
  @media (min-width:992px) { .hero-cta { padding:.7rem 1.75rem; font-size:1rem; } }
  @media (min-width:1200px){ .hero-cta { padding:.9rem 2.25rem; font-size:1.1rem; } }
  .hero-cta:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }

  /* ── DESKTOP ANIMATION POSITION ─────────────────────────────────────── */
  @media (min-width: 992px) {
    .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
      top: -60px;
      right: 100px;
      left: auto;
      -webkit-transform: none;
              transform: none;
      width: 60%;
    }
  }

  /* ── VERY LARGE DESKTOP ─────────────────────────────────────────────── */
  @media (min-width: 1400px) {
    .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
      width: 80%;
    }
  }

  /* ── TABLET & PHONE ANIMATION ───────────────────────────────────────── */
  @media (max-width:991.98px) {
    .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
      top: 200px;
      right: 10%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      width: 200%;
      -webkit-animation: hero-anim-sm 12s ease-in-out infinite;
              animation: hero-anim-sm 12s ease-in-out infinite;
    }
  }
  @media (max-width:575.98px) {
    .mil-hero-4 .mil-hero-scene .mil-anim-frame .mil-hero-animation {
      top: 220px;
      left: 20%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      width: 140%;
      -webkit-animation: hero-anim-sm 12s ease-in-out infinite;
              animation: hero-anim-sm 12s ease-in-out infinite;
    }
  }

  /* ── NAV CLUSTER ────────────────────────────────────────────────────── */
  .hero-nav {
    position: absolute;
    right: 25px;
    top: 60%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    z-index: 200;
    overflow: visible;
  }
  .hero-nav .hero-pagination {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    opacity: .35;
    position: relative;
    -webkit-transition: height .25s, opacity .25s;
            transition: height .25s, opacity .25s;
  }
  .hero-pagination .swiper-pagination-bullet-active {
    height: 32px;
    border-radius: 4px;
    opacity: 1;
    background-color: #f37021 !important;
  }
  .hero-pagination .swiper-pagination-bullet::after {
    content: attr(data-service);
    position: absolute;
    right: calc(100% + 12px);
    top: 60%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: #fff;
    color: #000;
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .15s;
            transition: opacity .15s;
  }
  .hero-pagination .swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #fff;
    box-shadow: 0 0 1px rgba(0,0,0,.05);
    opacity: 0;
    -webkit-transition: opacity .15s;
            transition: opacity .15s;
  }
  .hero-pagination .swiper-pagination-bullet:hover::after,
  .hero-pagination .swiper-pagination-bullet:hover::before {
    opacity: 1;
  }

  /* ── CIRCULAR ARROW ────────────────────────────────────────────────── */
  .hero-arrow {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #24c3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: background .25s;
            transition: background .25s;
  }
  .hero-arrow:hover { background: #1aa8e0; }
  .hero-arrow::before {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 36px;
    color: #fff;
  }
  @media (max-width:575.98px) {
    .hero-arrow { width: 60px; height: 60px; }
    .hero-arrow::before { font-size: 28px; }
    .hero-pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
    .hero-pagination .swiper-pagination-bullet-active { height: 24px; }
    .hero-pagination .swiper-pagination-bullet::after {
      right: calc(100% + 6px);
      top: auto; bottom: 130%;
      -webkit-transform: none;
              transform: none;
    }
    .hero-pagination .swiper-pagination-bullet::before {
      right: calc(100% + 2px);
      top: auto; bottom: 120%;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
  }

  /* ── SHOW/HIDE CIRCLE & BUTTON ─────────────────────────────────────── */
  .circle-desktop,
  .btn-mobile {
    display: none !important;
  }
  @media (max-width: 991.98px) {
    .btn-mobile { display: inline-block !important; }
    .circle-desktop { display: none !important; }
  }
  @media (min-width: 992px) {
    .circle-desktop {
      display: block !important;
      text-align: left !important;
      margin-top: 1rem !important;
    }
    .btn-mobile { display: none !important; }
  }

  /* ── SHAPE POSITION & FLOAT ───────────────────────────────────────── */
  .hero-shape2-1 {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 1;
  }
  

  /* ── FLOAT KEYFRAMES ───────────────────────────────────────────────── */
  @-webkit-keyframes floatY {
    0%,100% { -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); }
    50%     { -webkit-transform: translateY(-60%) translateX(0); transform: translateY(-60%) translateX(0); }
  }
  @keyframes floatY {
    0%,100% { -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); }
    50%     { -webkit-transform: translateY(-60%) translateX(0); transform: translateY(-60%) translateX(0); }
  }
  .jump {
    -webkit-animation: floatY 4s ease-in-out infinite;
            animation: floatY 4s ease-in-out infinite;
  }
  .jump-reverse {
    -webkit-animation: floatY 4s ease-in-out infinite reverse;
            animation: floatY 4s ease-in-out infinite reverse;
  }

  /* ── SPIN TEXT KEYFRAMES ───────────────────────────────────────────── */
  @-webkit-keyframes spin-text {
    0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }
  @keyframes spin-text {
    0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }
  .mil-rotate {
    -webkit-transform-box: fill-box;
            transform-box: fill-box;
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation: spin-text 12s linear infinite;
            animation: spin-text 12s linear infinite;
  }
  
  

  /* ── SMALL-SCREEN HERO ANIMATION ───────────────────────────────────── */
  @-webkit-keyframes hero-anim-sm {
    /* your existing keyframes here */
  }
  @keyframes hero-anim-sm {
    /* your existing keyframes here */
  }
  
  
  .section-animation-shape1-2 {
  position: absolute;      /* or relative, depending on your layout */
  top: 20px;               /* tweak to wherever you want it */
  right: 0;                /* or left:0; */
  width: 300px;            /* give it a width */
  height: 300px;           /* give it a height */
  background-repeat: no-repeat;
  background-size: contain;  /* or cover, or a specific size */
  pointer-events: none;      /* so it won’t steal clicks */
}

/* Simple infinite float + rotate animation */
.animation-infinite {
  animation: float-rotate 8s linear infinite;
}

@keyframes float-rotate {
  0%   { transform: translateY(0)    rotate(0deg);   }
  50%  { transform: translateY(20px) rotate(180deg); }
  100% { transform: translateY(0)    rotate(360deg); }
}


   /* ── DESKTOP ONLY: fixed bottom positions ─────────────────────────── */
@media (min-width: 992px) {
  /* down-arrow in center bottom */
  .mil-scroll-down {
    position: fixed !important;
    left: 50% !important;
    bottom: 40px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    width: 56px;
    height: 56px;
    border: 2px solid var(--text-primary);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity .3s, transform .3s;
  }
  .mil-scroll-down i {
    font-size: 24px;
    color: var(--text-primary);
    animation: arrowBounce 1.6s ease-in-out infinite;
  }

  /* up-next in bottom-right */
  .hero-up-next {
    position: fixed !important;
    right: 25px !important;
    bottom: 40px !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    color: var(--text-primary);
    line-height: 1.4;
    cursor: pointer;
    z-index: 10000;
  }
  .hero-up-next .label {
    font-size: .75rem;
    opacity: .7;
  }
  .hero-up-next .name {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
  }
}

/* ── TABLET & MOBILE: hide arrow, center up-next under hero ───────── */
@media (max-width: 991.98px) {
  .mil-scroll-down {
    display: none !important;
  }
  .hero-up-next {
    position: fixed !important;
    left: 50% !important;
    bottom: 120px !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    text-align: center;
  }
}

/* ── bounce keyframes ─────────────────────────────────────────────── */
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ──────────────────────────────────────────────────────────────
   HERO – ensure calls-to-action are always on top & clickable
   1. Lift the text/button layer above everything else
   2. Make the floating/parallax hero images ignore pointer events
──────────────────────────────────────────────────────────────── */
.mil-hero-text,
.circle-desktop,
.btn-mobile,
.hero-up-next,
.mil-scroll-down {
  position: relative;   /* create a new stacking context              */
  z-index: 300;         /* higher than .mil-hero-scene (default ≤200) */
}

/* disable click “shield” caused by the big PNG/JPG/SVG frames */
.mil-hero-animation,
.mil-anim-frame,
.mil-pad-frame {
  pointer-events: none !important;   /* let clicks pass through */
}

/* Conacts Section */

  /* ensure this heading is full-width and centered */
  .mil-head1.mil-rubber.mil-mb60.mil-up {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
                  
                  .mil-head1 {
  text-align: center !important;
}

.mil-head6 {
    font-size: 16px;
    line-height: 120%;
    color: #fff;
}
                  

        /* allow positioning of the pseudo-element */
    .has-bg-text {
      position: relative;
      z-index: 1; /* keep the real text on top */
    }
    
    /* create the big background text */
    .has-bg-text::before {
      content: attr(data-text);
      position: absolute;
      top: 50%;
      left: 70%;
      transform: translate(-0%, -50%);
      font-size: 2rem;          /* adjust size as needed */
      font-weight: 800;         /* make it bold enough to show */
      color: rgba(255, 255, 255, 0.1);
      white-space: nowrap;
      pointer-events: none;     /* so it never blocks anything */
      z-index: -1;              /* behind your real text */
    }


    /* ─── Call-to-Action Section ─── */
    .mil-call-action {
      position: relative;
      
      color: #fff;
      padding: 80px 0;
      overflow: hidden;
    }
    
    /* ─── Call-to-Action Section ─── */
    .mil-call-action1 {
      position: relative;
      
      color: #fff;
      padding: 0px 0;
      overflow: hidden;
    }
    
    .mil-call-action .mil-call-overlay {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      pointer-events: none;  /* so overlay never blocks clicks */
      z-index: 1;
    }
    
    .mil-call-action .mil-relative {
      position: relative;
      z-index: 2;            /* bring content above overlay */
    }

    .mil-head1.mil-mb90.mil-up {
      text-align: center;
    }

    /* Decorative objects (optional styling if you need) */
    .mil-objects .mil-obj-1,
    .mil-objects .mil-obj-2 {
      /* your existing object styles */
    }

    /* Headline & subtext keep your mil- classes */

    /* Portfolio button – your existing styling */
    .mil-btn-border { /* ... */ }
    .mil-m1 { /* ... */ }
    .mil-c-gone { /* ... */ }

    /* Get in Touch button */
    .mil-cta-btn {
      display: inline-block;
      background-color: #f37021;
      color: #fff;
      text-transform: uppercase;
      font-weight: 600;
      padding: 0.75rem 2.5rem;
      border-radius: 4px;
      transition: background 0.2s;
      text-decoration: none;
      position: relative;
      z-index: 2;            /* above overlay */
    }
    .mil-cta-btn:hover {
      background-color: #e56f0c;
    }

    /* Social columns */
    .social-col {
      text-align: center;
    }
    .social-col a {
      display: block;        /* full-block link */
      width: 100%;
      height: 100%;
      padding: 0.75rem 0;    /* breathing room */
      position: relative;
      z-index: 2;            /* above overlay */
      text-decoration: none;
      color: inherit;
      transition: color 0.2s;
    }
    .social-col .icon i {
      font-size: 2.5rem;
      color: #f37021;
      margin-bottom: 0.5rem;
    }
    .social-col h5 {
      margin: 0.25rem 0;
      font-weight: 500;
      font-size: 1.1rem;
      color: #fff;
    }
    .social-col p {
      margin: 0;
      font-size: 0.9rem;
      color: #ddd;
    }
    .social-col:hover h5,
    .social-col:hover p {
      color: #f37021;
    }
    
/* Services Section */

    /* Grid for the three highlight cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Individual card styles */
.cards-grid .card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  color: #fff;
  transition: transform .3s, box-shadow .3s;
}
.cards-grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.cards-grid .card-subtitle {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.cards-grid .card-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.cards-grid .card-text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.cards-grid .card-btn {
  display: inline-block;
  background: #f37021;
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background .3s;
}
.cards-grid .card-btn:hover {
  background: #c37119;
}

/* Ensure service-icon-circle is centered */
.service-icon-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .cards-grid .card-title { font-size: 1.2rem; }
  .cards-grid .card-text  { font-size: .95rem; }
}

    
    
    .swiper-pagination-bullet {
  background-color: #fff !important;
}
    
  /* ── Reset the grid inside the Swiper ── */
  .services-swiper .mil-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .services-swiper .mil-services-list.swiper-wrapper {
    display: flex; /* let Swiper handle slide widths */
  }

  /* ── Circle‐icon wrapper ───────────────────────────────────────────── */
  .service-icon-circle {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto 0.75rem;
  }
  .service-icon-circle img {
    max-width: 100%;
    max-height: 100%;
  }

  /* ── Text block spacing ───────────────────────────────────────────── */
  .mil-item-text {
    margin-bottom: 1rem;
  }

  /* ── “Read more” button styling ───────────────────────────────────── */
  .services-swiper .mil-stylized-btn {
    display: inline-block;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    color: #333;
    border: 1px solid #333;
    transition: background 0.2s, color 0.2s;
  }
  .services-swiper .mil-stylized-btn:hover {
    background: #333;
    color: #fff;
  }

  /* ── Swiper nav & pagination ──────────────────────────────────────── */
  .services-swiper .swiper-button-prev,
  .services-swiper .swiper-button-next {
    color: #333;
  }
  .services-swiper .swiper-pagination-bullet {
    background: rgba(0,0,0,0.3);
  }
  .services-swiper .swiper-pagination-bullet-active {
    background: #333;
  }

  /* ── Desktop circle link (large screens) ────────────────────────── */
  .services-swiper .circle-desktop {
    display: block;
    text-align: center;
    margin: 1rem auto;
  }

  /* ── Mobile circle link hidden by default ───────────────────────── */
  .services-swiper .circle-mobile {
    display: none;
  }

  /* ── MOBILE‐ONLY OVERRIDES (<768px) ─────────────────────────────── */
  @media (max-width: 767.98px) {
    /* 1) Stack & center each slide */
    .services-swiper .mil-service-item {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      padding: 0 1rem !important;
    }

    /* 2) Center the icon */
    .services-swiper .service-icon-circle {
      margin: 0 auto 1rem !important;
    }

    /* 3) Center the text block */
    .services-swiper .mil-item-text {
      margin: 0 auto 1rem !important;
    }

    /* 4) Hide desktop “Read more” button */
    .services-swiper .mil-stylized-btn,
    .services-swiper .btn-mobile {
      display: none !important;
    }

    /* 5) Hide desktop circle link */
    .services-swiper .circle-desktop {
      display: none !important;
    }

    /* 6) Show & center mobile circle link */
    .services-swiper .circle-mobile {
      display: flex !important;
      justify-content: center;
      align-items: center;
      margin: 1rem auto !important;
      width: 80px !important;
      height: 80px !important;
    }
    .services-swiper .circle-mobile .mil-circle-text {
      display: inline-flex !important;
      justify-content: center;
      align-items: center;
      width: 100% !important;
      height: 100% !important;
      text-align: center !important;
    }
    .services-swiper .circle-mobile .mil-circle-text svg {
      width: 100% !important;
      height: 100% !important;
    }
  }
  


/* === KEEP #services positioned like light mode === */
#services {
  position: relative;
  overflow: hidden;
}

/* === FAR LEFT vertical SERVICES label — synced with STYLE_LIGHT.CSS === */
#services .vertical-text {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;

  font-size: 4vw;
  font-weight: 700;
  letter-spacing: 0.5rem;
  color: #cecece;
  pointer-events: none;
  z-index: 1;
}




/* NEW: Dark overlay */
.parallax-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 120%;
  background-color: rgba(0, 0, 0, 0.9);  /* was .5, now .7 = 70% */
  z-index: 1;
}


/* ensure your content is above both bg & overlay */
.parallax-section .container {
  position: relative;
  z-index: 2;
}

/* Achievements Section */

  /* Counters */
  #achievements .counter-item h4 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  /*#achievements .counter-number { font-weight: bold; }*/

  /* Cards grid */
  #achievements .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  #achievements .card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.5rem;
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  #achievements .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  }
  #achievements .card-subtitle {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }
  #achievements .card-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  #achievements .card-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  #achievements .card-btn {
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background: #f37021;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    transition: background 0.3s;
  }
  #achievements .card-btn:hover {
    background: #c37119;
  }

  /* Overlay */
  #achievements .overlay {
    pointer-events: none;
  }

  /* Responsive tweaks */
  @media (max-width: 768px) {
    #achievements .counter-item h4 { font-size: 2rem; }
    #achievements .card-title { font-size: 1.2rem; }
    #achievements .card-text { font-size: 0.95rem; }
  }


    /* optional: tighten up the four-across on desktop, two on tablet */
        @media (min-width: 992px) {
          .mil-p-0-160 .row > [class*="col-lg-3"] {
            max-width: 25%;
          }
        }
        @media (max-width: 767px) {
          .mil-p-0-160 .row > [class*="col-md-6"] {
            max-width: 50%;
          }
        }
        
        /* Make the counter number & % smaller */
        .mil-counter-item1 h4 {
          font-size: 2rem;       /* overall size */
        }
        .mil-counter-item1 h4 .counter-number {
          font-size: 2rem;
        }
        .mil-counter-item1 h4 .mil-a2 {
          font-size: 1.2rem;
          vertical-align: super;
          margin-left: 0.2rem;
        }
        
        /* Small tablets (576px–767px), if you want a slightly larger size there: */
        @media (min-width: 206px) and (max-width: 767.98px) {
          .mil-head4 {
            font-size: 16px;
            line-height: 120%;
            text-align: center;
          }
        }
        
        /* small “subtitle” above each card */
.mil-subtitle {
  display: block;
  font-size: .9rem;
  color: rgba(255,255,255,.8);
}

/* thin centered line under the heading */
.mil-underline {
  width: 50px;
  height: 2px;
  background-color: rgba(255,255,255,.6);
  border: none;
  margin: .5rem auto 1.5rem;
}

/* ensure each card stretches to equal height in the row */
.mil-item-text.h-100 {
  height: 100%;
}

.mil-counter-item1 {
    width: 100%;
    
    padding-bottom: 30px;
    position: relative;
    }
/*────────────────────────────────────────────────────────
  Giant vertical “ACHIEVEMENTS” down the left
  (paste this AFTER every other stylesheet rule)
────────────────────────────────────────────────────────*/
#achievements {
  position: relative;
  overflow: hidden;
}

/* big word */
#achievements > .achievements-bg-text {
  position: absolute;
  top: 70%;
  left: 10px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;

  font-size: 6vw;                 /* responsive */
  font-weight: 800;
  /* ✱ use a LIGHT colour so it’s visible on the dark bg */
  color: #012060;                 /* <──── change only this line */

  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 2;                     /* above bg, below real content */
}

/* hide the big word on mobile (<768px) */
@media (max-width: 767px) {
  #achievements > .achievements-bg-text {
    display: none;
  }
}


/* normal content stays on top */
#achievements>.container{
  position:relative;
  z-index:3;
}

/* smaller on phones */
@media(max-width:768px){
  #achievements>.achievements-bg-text{font-size:15vw;}
}

/* FAQ SECTION */
:root {
  --faq-bg: #111;
  --faq-text: #e0e0e0;
  --faq-accent: #f37021;
  --faq-shadow: rgba(0,0,0,0.4);
}
.mil-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.mil-accordion-item {
    background: var(--faq-bg);
    border-radius: .75rem;
    box-shadow: 0 4px 12px var(--faq-shadow);
    overflow: hidden;
    transition: transform .3s;
}
.mil-accordion-item:hover {
  transform: translateY(-3px);
}
.mil-accordion-header {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--faq-text);
  font-size: 0.8rem;
  
  cursor: pointer;
  transition: background .3s;
}
.mil-accordion-header:hover {
  background: rgba(255,255,255,.05);
}
/* ← Push icon all the way right */
.mil-accordion-icon {
  margin-left: auto;
  font-size: 1.5rem;
  color: var(--faq-accent);
  transition: transform .3s;
}
.mil-accordion-header.active .mil-accordion-icon {
  transform: rotate(45deg);
}
.mil-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  background: var(--faq-bg);
  padding: 0 1.5rem;
}
.mil-accordion-body p {
  margin: 1rem 0;
  color: var(--faq-text);
  line-height: 1.6;
}

/* FAR RIGHT vertical FAQ label */
   #faq {
  position: relative;
  overflow: hidden; /* keep floats tidy */
}
  #faq .vertical-text {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: rgba(255,255,255,.05);
    pointer-events: none;
    z-index: 1;
  }
  
  .vertical-text2 {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: rgba(255,255,255,.05);
    pointer-events: none;
    z-index: 1;
  }
  
  .vertical-text3 {
    position: absolute;
    top: 60%;
    right: 30px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: rgba(255,255,255,.05);
    pointer-events: none;
    z-index: 1;
  }
  
 /* Floating animation for FAQ illustration via CSS background */
  @keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
  }
  .faq-animation {
    position: fixed;
    
    left: 20px;
    width: 200px;
    height: 200px;
    background-image: url('../img/faq-animation-dark.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: float 4s ease-in-out infinite;
    pointer-events: none;
  }
  
/* FAR RIGHT vertical NEWS label for #clients */
  #clients {
    position: relative;
  }
  #clients .vertical-text {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: rgba(255,255,255,.05);
    pointer-events: none;
    z-index: 1;
  }

/* ── FOOTER SECTION ────────────────────────────────────────────────── */
footer {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.footer-main {
  background: var(--bg-primary);
  padding: 3rem 0 1rem;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-col {
  flex: 1 1 280px;
  min-width: 220px;
}
.footer-col.about .logo {
  max-width: 180px;
  margin-bottom: 1rem;
}
.footer-col.about p,
.footer-col.links p,
.footer-col.links a {
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.6;
}
.footer-col.links h4,
.footer-col.about h4,
.footer-col.partners h4 {
  color: var(--accent);
  margin-bottom: 1rem;
}
.footer-col.links ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.footer-col.links ul li {
  margin-bottom: .5rem;
}
.footer-col.links ul a:hover {
  color: var(--text-primary);
}
.footer-col.partners .partner {
  margin-bottom: 1.5rem;
}
.footer-col.partners img {
  max-width: 140px;
  display: block;
}
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 1rem;
  border-top: 1px solid var(--overlay-dark);
  padding-top: 1rem;
  color: var(--text-secondary);
}

/* ↓ pick the breakpoint that matches the rest of your site –  
   575.98 px (Bootstrap “xs”) or 767.98 px (“sm”) are both common. */
@media (max-width: 767.98px) {
  .footer-bottom {
    text-align: center;
    margin-bottom: 6rem;
    font-size: 1rem;
    border-top: 1px solid var(--overlay-dark);
    padding-bottom: 4rem;
    color: var(--text-secondary);
  }
}

footer .footer-anim-shape {
  position: absolute;
  bottom: 0px;
  right: 20px;
  width: 60vw;            /* adjust size as needed */
  max-width: 400px;
  opacity: 0.90;          /* subtle behind-text look */
  pointer-events: none;
  z-index: 0;             /* behind all footer content */
  animation: floatFooter 8s ease-in-out infinite;
}

/* Anniversary logo via CSS background */
.footer-col.about .anniversary {
  display: block;               /* make it a block so width/height apply */
  width: 120px;
  height: 120px;
  background-image: url('../img/faq-animation-dark.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin-bottom: 1rem;
}

/* make sure footer is the positioning context */
.sgb-footer {
  position: relative;
}

/* floating animation keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}



/* keep the footer above any parallax layers or page‑transition frames */
.sgb-footer { position: relative; z-index: 20; }

/* give a little breathing room so the copyright strip is never clipped */
.sgb-footer .footer-main { padding-bottom: 3rem; }

/* add breathing room equal to footer height */
#smooth-content::after{
  content:"";
  display:block;
  height:120px;        /* ≈ footer‑bottom height – adjust if you change it */
}

@keyframes floatFooter {
  0%, 100%   { transform: translateY(0)    rotate(0deg); }
  50%        { transform: translateY(-15px) rotate(-1deg); }
}

.mil-tp-btn .fa-globe {
  color: #ffffff !important;
}

/* show only dark-mode image */
.dark-mode-img  { display: inline-block !important; }
.light-mode-img { display: none           !important; }

/* ── RESPONSIVE TWEAKS ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .cards-grid .card-title { font-size: 1.2rem; }
  .cards-grid .card-text  { font-size: .95rem; }
  #achievements .counter-item h4 { 
      font-size: 2rem; 
      color:#fff;
  }
  #achievements .card-title { font-size: 1.2rem; }
  #achievements .card-text  { font-size: .95rem; }
}
@media (max-width: 576px) {
  .hero-cta { font-size: .7rem; }
}

/* show only the dark image */
.dark-img  { display: inline-block !important; }
.light-img { display: none          !important; }

/* New Section */
/* Container of cards */
  .slanted-cards {
    gap: 1rem;
  }

  /* Base card: equal width, orange-tinted glass, slanted */
  .slanted-card {
    flex: 1;                                /* equal widths */
    display: flex;
    background: rgba(20,20,20);     /* #f37021 at 15% opacity */
    backdrop-filter: blur(12px);
    border: 3px solid rgba(243,112,33,0.9); /* #f37021 at 30% opacity */
    border-radius: 1rem;
    transform: skew(-10deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
  }
  .slanted-card:hover {
    transform: skew(-10deg) translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  }

  /* Counter-skew inner content */
  .card-content {
    transform: skew(10deg);
    padding: 2rem;
    width: 100%;
  }

  /* White text & icons */
  .card-content i,
  .card-content h3,
  .card-content p {
    color: #fff !important;
  }

  /* Mobile: remove skew for readability */
  @media (max-width: 767px) {
    .slanted-cards {
      flex-direction: column;
    }
    .slanted-card {
      transform: none !important;
    }
    .card-content {
      transform: none !important;
    }
  }

/* CTA visuals (unchanged feel) */
  .mil-call-overlay{
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(90deg,#00000050,#00000020,#00000050);
    background-size:200% 200%;
    animation:overlaySlide 15s ease-in-out infinite alternate;
  }
  @keyframes overlaySlide{0%{background-position:0% 50%}100%{background-position:100% 50%}}

 /* ---------- Contact form: clean, responsive, and theme-aware ---------- */
:root{
  --bc-orange: #f37021;
  --bc-focus:  rgba(243,112,33,.25);
  --bc-radius: 14px;
  --bc-gap:    16px;

  /* Light defaults (overridden for dark below) */
  --card-bg:   #ffffff;
  --line:      #e7e7ea;
  --text:      #1c1c22;
  --muted:     #6c6f79;
  --shadow:    0 10px 24px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark) {
  :root{
    --card-bg:   #15161a;
    --line:      #2a2d35;
    --text:      #f3f4f6;
    --muted:     #9aa0a6;
    --shadow:    0 10px 24px rgba(0,0,0,.45);
  }
}

/* Container card */
.contact-card{
  
  box-shadow: var(--shadow);
  padding: 28px;
  color: var(--text);
  max-width: 720px;
  margin-inline: auto;
}

/* Title */
.contact-card__title{
  margin: 0 0 18px 0;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: normal;
  word-spacing: normal;   /* ensure normal spacing */
}

/* Alerts */
.alert{
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: .95rem;
  line-height: 1.35;
  border: 1px solid transparent;
}
.alert-success{
  background: #eaf7ee;
  border-color: #c6ebd3;
  color: #146c2e;
}
.alert-danger{
  background: #fdeceb;
  border-color: #f6c6c5;
  color: #8a1a16;
}

/* Grid */
.contact-form{
  margin-top: 8px;
}
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bc-gap);
}
.input-span-2{
  grid-column: 1 / -1;
}

/* Floating labels (no Bootstrap dependency) */
.input-wrap{
  position: relative;
  isolation: isolate;
}
.input-wrap input,
.input-wrap textarea{
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  outline: none;
  font: inherit;
  line-height: 1.35;
  letter-spacing: normal;
  word-spacing: normal; /* ensure normal word spacing */
  padding: 14px 14px 14px 14px;          /* base padding */
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-wrap textarea{ resize: vertical; min-height: 120px; }

/* Label sits over placeholder until focus or value */
.input-wrap label{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 6px;
  background: var(--card-bg);
  color: var(--muted);
  font-size: .95rem;
  pointer-events: none;
  transition: transform .15s ease, color .15s ease, font-size .15s ease, top .15s ease;
}

/* When focused or not placeholder-shown, float label */
.input-wrap:focus-within label,
.input-wrap input:not(:placeholder-shown) + label,
.input-wrap textarea:not(:placeholder-shown) + label{
  top: 0;
  transform: translateY(-50%) translateY(-8px);
  font-size: .78rem;
  color: var(--bc-orange);
}

/* Focus ring */
.input-wrap:focus-within input,
.input-wrap:focus-within textarea{
  border-color: var(--bc-orange);
  box-shadow: 0 0 0 4px var(--bc-focus);
}

/* Invalid state (native HTML5 validation) */
input:invalid, textarea:invalid{
  border-color: #e55353;
}
input:invalid:focus, textarea:invalid:focus{
  box-shadow: 0 0 0 4px rgba(229,83,83,.2);
}

/* Submit button */
.btn-contact{
  display: inline-block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--bc-orange);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 18px rgba(243,112,33,.25);
}
.btn-contact:hover{ filter: brightness(1.05); }
.btn-contact:active{ transform: translateY(1px) scale(.998); }

/* Honeypot */
.hp{ position: absolute !important; left: -9999px !important; opacity: 0 !important; }

/* Responsive */
@media (max-width: 768px){
  .form-grid{ grid-template-columns: 1fr; }
  .contact-card{ padding: 22px; }
}

<!-- Scoped styles (pills fixed) -->
 
    :root{ --pd-orange:#f37021; --pd-panel:#111; --pd-line:#1f1f1f; }

    .pd-pill{
      display:inline-flex; align-items:center; gap:.55rem;
      background:var(--pd-orange); color:#fff; text-decoration:none;
      padding:.55rem 1rem; border-radius:999px; font-weight:800;
      box-shadow:0 10px 26px rgba(0,0,0,.35)
    }
    .pd-pill i{ font-size:.95em }

    .pd-card{
      background:var(--pd-panel); border:1px solid var(--pd-line);
      border-radius:16px; padding:18px 18px 12px;
      box-shadow:0 20px 60px rgba(0,0,0,.28);
    }
    .pd-meta{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; opacity:.9 }
    .pd-cat{
      display:inline-block; padding:.35rem .65rem; border-radius:999px;
      border:1px solid #2c2c2c; background:#1a1a1a; color:var(--pd-orange);
      font-size:.85rem; font-weight:700
    }
    .pd-dot{ opacity:.6 }
    .pd-date{ opacity:.85; font-size:.95rem }
    .pd-title{ margin:.3rem 0 .6rem; line-height:1.12; font-weight:900 }
    .pd-lead{ margin:.2rem 0 1rem; opacity:.9 }

    .pd-share{ display:flex; gap:10px; margin:.2rem 0 1rem }
    .pd-share a{ color:#fff; opacity:.9; text-decoration:none; font-size:1.05rem }
    .pd-share a:hover{ opacity:1 }

    .pd-body p{ margin:0 0 1.05em }
    .pd-body h2,.pd-body h3,.pd-body h4{ margin:1.2em 0 .6em }
    .pd-body a{ color:#ffb17a }

    .pd-nav{ display:flex; justify-content:space-between; gap:12px; padding-top:10px }
    .pd-nav a{ display:inline-block; background:#2f2f2f; color:#fff; text-decoration:none; padding:10px 12px; border-radius:10px }
    .pd-nav a:hover{ background:#3a3a3a }

    /* ===== Square hero with COMPACT PILLS (fixed) ===== */
    .pd-hero{
      position:sticky; top:96px; margin:0;
      border:1px solid #222; border-radius:18px; overflow:hidden;
      background:#0e0e0e; aspect-ratio:1/1;
      box-shadow:0 24px 70px rgba(0,0,0,.38), 0 0 0 6px rgba(243,112,33,.06) inset;
    }
    .pd-hero img{
      width:100%; height:100%; object-fit:cover; object-position:center;
      display:block; transform:scale(1); transition:transform .45s ease;
    }
    .pd-hero:hover img{ transform:scale(1.03) }

    /* Overlay layer */
    .pd-hero-cap{
      position:absolute; inset:0; z-index:2; pointer-events:none;
    }
    /* Corner pills — COMPACT, no stretching */
    .pd-hero-badge,
    .pd-hero-date{
      position:absolute; top:12px;
      display:inline-flex; align-items:center; white-space:nowrap;
      height:auto; line-height:1;                /* <-- prevents tall pills */
      padding:6px 10px; border-radius:999px;
      background:rgba(22,22,22,.88);
      border:1px solid #2c2c2c; font-size:.85rem;
      box-shadow:0 4px 10px rgba(0,0,0,.25);
      pointer-events:auto;                       /* allow copy/select if needed */
    }
    .pd-hero-badge{ left:12px;  color:var(--pd-orange); }
    .pd-hero-date { right:12px; color:#fff; opacity:.95; }

    /* Aspect-ratio fallback */
    @supports not (aspect-ratio: 1 / 1){
      .pd-hero{ position:relative }
      .pd-hero::before{ content:""; display:block; padding-top:100% }
      .pd-hero > img{ position:absolute; inset:0 }
    }

    /* Mobile tweaks */
    @media (max-width: 991.98px){
      .pd-hero{ position:relative; top:0; }
    }
  
  

  :root{ --ng-orange:#f37021; --ng-bg:#0b0b0b; --ng-panel:#111; --ng-line:#1f1f1f; }
  .ng-head{ margin:0 0 .25rem; }

  /* Search form */
  .ng-search{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
  .ng-input{
    background:#121212; border:1px solid #232323; border-radius:12px;
    color:#fff; padding:10px 12px; min-width:250px;
  }
  .ng-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--ng-orange); color:#fff; border:0; border-radius:12px;
    padding:10px 14px; font-weight:700; text-decoration:none; cursor:pointer;
  }
  .ng-btn.alt{ background:#2f2f2f; }

  /* Chips */
  .ng-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .ng-chip{
    display:inline-block; padding:7px 14px; border-radius:999px;
    background:#161616; color:#fff; border:1px solid #272727; text-decoration:none;
  }
  .ng-chip.active{ background:var(--ng-orange); border-color:var(--ng-orange); }

  /* Grid cards */
  .ng-grid{ row-gap:24px; }
  .ng-card-wrap{ display:flex; }
  .ng-card{
    background:var(--ng-panel); border:1px solid var(--ng-line); border-radius:16px;
    overflow:hidden; display:flex; flex-direction:column; width:100%;
    text-decoration:none; color:#fff; transition:transform .25s ease, box-shadow .25s ease;
  }
  .ng-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.35); }

  .ng-thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#0e0e0e; }
  .ng-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1); transition:transform .35s ease; }
  .ng-card:hover .ng-thumb img{ transform:scale(1.06); }

  /* Compact corner pills */
  .ng-pill{
    position:absolute; top:12px; display:inline-flex; align-items:center; white-space:nowrap;
    height:auto; line-height:1; padding:6px 10px; border-radius:999px;
    background:rgba(22,22,22,.88); border:1px solid #2c2c2c; font-size:.85rem;
    box-shadow:0 4px 10px rgba(0,0,0,.25); z-index:2;
  }
  .ng-cat{ left:12px; color:var(--ng-orange); }
  .ng-date{ right:12px; color:#fff; opacity:.95; }

  .ng-body{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;        /* <<< stops full-width stretch */
  }
  .ng-title{ margin:0; font-weight:800; line-height:1.3; }
  .ng-sum{ margin:0; opacity:.92; }

  /* Old "more" hidden */
  .ng-more{ display:none; }

  /* Compact pill CTA (content width) */
  .ng-cta{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-top:auto;
    padding:8px 12px;             /* smaller */
    font-size:.9rem;              /* smaller */
    border-radius:999px;
    background: var(--ng-orange);
    color:#111;
    font-weight:800;
    letter-spacing:.02em;
    box-shadow:0 10px 20px rgba(243,112,33,.25);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    align-self:flex-start;        /* <<< content width */
    width:auto;                   /* <<< content width */
    white-space:nowrap;           /* keep short */
  }
  .ng-cta i{ transition: transform .2s ease; }
  .ng-card:hover .ng-cta,
  .ng-card:focus-visible .ng-cta{
    transform: translateY(-1px);
    box-shadow:0 14px 30px rgba(243,112,33,.35);
  }
  .ng-card:hover .ng-cta i,
  .ng-card:focus-visible .ng-cta i{
    transform: translateX(3px);
  }

  /* Optional ghost variant */
  .ng-cta.ghost{
    background: transparent;
    color:#fff;
    border:1px solid #2c2c2c;
    box-shadow:none;
  }
  .ng-card:hover .ng-cta.ghost{
    border-color: var(--ng-orange);
    color:#fff;
    box-shadow:0 8px 26px rgba(0,0,0,.25);
  }

  /* Pager */
  .ng-pager{ display:flex; gap:8px; justify-content:center; margin:28px 0 10px; flex-wrap:wrap; }
  .ng-pager a,.ng-pager span{ padding:9px 12px; border-radius:10px; border:1px solid #2c2c2c; text-decoration:none; color:#fff; }
  .ng-pager .active{ background:var(--ng-orange); border-color:var(--ng-orange); color:#000; font-weight:800; }
  .ng-pager .dots{ border:none; padding:9px 6px; }

  /* Empty */
  .ng-empty{
    background:#111; border:1px dashed #2b2b2b; padding:28px; border-radius:14px; text-align:center;
  }

  /* Fallback for very old browsers (no aspect-ratio) */
  @supports not (aspect-ratio: 1 / 1){
    .ng-thumb{ position:relative; }
    .ng-thumb::before{ content:""; display:block; padding-top:100%; }
    .ng-thumb > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  }