/* SERVICES PAGE — premium, long page */

.services-hero{
  padding: 90px 0 70px;
  background:
          radial-gradient(900px 420px at 25% 15%, rgba(212,175,55,0.18), transparent 60%),
          radial-gradient(700px 350px at 75% 60%, rgba(212,175,55,0.10), transparent 60%),
          linear-gradient(120deg, #001F54, #07142e, #001F54);
}

.services-hero-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 34px;
  align-items: center;
}

.eyebrow{
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 13px;
  margin: 0 0 10px;
}

.services-title{
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 14px;
}

.services-sub{
  padding-top: 10px;
  max-width: 640px;
  margin: 0 0 22px;
  opacity: 0.92;
  line-height: 1.65;
}

/* re-use About button container & button styles (already in your global/about css) */
.about-actions{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.services-trust{
  margin-top: 18px;
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.trust-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}

.trust-num{
  color: var(--gold);
  font-weight: 900;
  letter-spacing: .08em;
}

.trust-text{
  opacity: 0.92;
}

/* Glass card (same concept as About) */
.glass-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 26px;
  backdrop-filter: blur(10px);
}

.glass-pill{
  color: var(--gold);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 12px;
  margin: 0 0 12px;
}

.glass-title{
  font-size: 20px;
  margin: 0 0 12px;
}

.glass-text{
  padding-top: 10px;
  margin: 0 0 16px;
  opacity: 0.92;
  line-height: 1.6;
}

.glass-list{
  margin: 0;
  padding-left: 18px;
  opacity: 0.95;
}

.glass-list li{ margin: 8px 0; }

/* ==========================================================
   CORE SERVICES SECTION (LIGHT) — REMOVE DESIGN STYLES
   We keep ONLY safe layout + wrapping so text doesn't overflow.
   (No card backgrounds, no pills, no hover, no illustrations styling.)
========================================================== */

#service-cards .service-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

/* Make links behave normally but without "card design" */
#service-cards .service-card{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Safety: prevent long text overflow */
#service-cards .service-card-title,
#service-cards .service-card-text,
#service-cards .service-link{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================
   WHAT WE DELIVER (LIGHT)
========================================================== */

.deliver-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.deliver-item{
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(10,22,51,0.03);
  border: 1px solid rgba(10,22,51,0.08);
}

.deliver-item p{
  margin: 10px 0 0;
  padding-top: 10px;
  opacity: 0.85;
  line-height: 1.7;
}

/* Navy sections */
.services-navy{
  background:
          radial-gradient(900px 420px at 30% 20%, rgba(212,175,55,0.10), transparent 60%),
          linear-gradient(120deg, #07142e, #0a1b3d);
}

.services-sub-light{
  color: rgba(255,255,255,0.85);
}

/* Steps (navy) uses glass mini */
.steps-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.glass-mini{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

@media (hover:hover){
  .glass-mini:hover{
    transform: translateY(-4px);
    border-color: rgba(212,175,55,0.30);
    background: rgba(255,255,255,0.075);
  }
}

.step-num{
  font-weight: 900;
  color: var(--gold);
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.glass-mini p{
  margin: 0;
  padding-top: 10px;
  opacity: 0.90;
  line-height: 1.6;
}

/* Packages */
.packages-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.package-card{
  border-radius: 18px;
}

.pkg-list{
  margin: 14px 0 0;
  padding-left: 18px;
  opacity: 0.9;
  line-height: 1.75;
}

/* FAQ */
.faq{
  margin-top: 20px;
  display: grid;
  gap: 12px;
  max-width: 860px;
}

.faq-item{
  border-radius: 16px;
  border: 1px solid rgba(10,22,51,0.08);
  background: rgba(10,22,51,0.02);
  padding: 14px 16px;
}

.faq-q{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.faq-q::-webkit-details-marker{ display:none; }

.faq-a{
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(10,22,51,0.08);
  opacity: 0.85;
  line-height: 1.7;
}

/* CTA navy layout (same concept as About) */
.cta-navy{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
}

.cta-navy-right{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* Responsive */
@media (max-width: 1024px){
  .services-hero{ padding: 70px 0 50px; }
  .services-hero-inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  #service-cards .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deliver-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packages-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .services-title{
    font-size: clamp(28px, 4.2vw, 40px);
    line-height: 1.15;
  }

  .about-actions{
    gap: 10px;
  }
  .about-actions .btn-primary,
  .about-actions .btn-outline{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  #service-cards .service-grid{ grid-template-columns: 1fr; }
  .deliver-grid{ grid-template-columns: 1fr; }
  .steps-grid{ grid-template-columns: 1fr; }

  .cta-navy{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .cta-navy-right{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   FIGMA "OUR SERVICES" CARDS (scoped only to #service-cards)
   Paste at the bottom of services.css
   ========================================================= */

#service-cards.section.gray{
  /* turn the old gray section into the dark Figma background */
  background: linear-gradient(135deg, #001F54 0%, #07142e 55%, #0a1b3d 100%);
  position: relative;
  overflow: hidden;
  padding-top: 64px;
  padding-bottom: 72px;
}

/* ambient glows like in the Figma preview */
#service-cards.section.gray::before,
#service-cards.section.gray::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: .9;
}

#service-cards.section.gray::before{
  left: 10%;
  top: 10%;
  background: rgba(218,165,32,0.08);
}
#service-cards.section.gray::after{
  right: 10%;
  bottom: 10%;
  background: rgba(26,41,66,0.35);
}

#service-cards .section-title{
  color: #DAA520;
  text-align: left;
  margin: 0 0 14px 0;
  filter: drop-shadow(0 0 30px rgba(218,165,32,0.25));
}

#service-cards .section-sub{
  color: rgba(209,213,219,0.85);
  text-align: left;
  max-width: 760px;
  margin: 0 0 34px 0;
  line-height: 1.75;
}

#service-cards .service-grid{
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 26px;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px){
  #service-cards .service-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}
@media (min-width: 1024px){
  #service-cards .service-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* kill any old overlay behavior */
#service-cards .service-card-overlay{ display:none !important; }

/* Card base */
#service-cards .service-card{
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(26,41,66,0.78) 0%, rgba(15,24,40,0.90) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(22px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.55);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

/* soft glass shine layer */
#service-cards .service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 45%, transparent 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events:none;
}

/* moving shine "sweep" */
#service-cards .service-card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 120%;
  height: 200%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
  transform: rotate(18deg) translateX(-25%);
  opacity: 0;
  transition: opacity .45s ease, transform .75s ease;
  pointer-events:none;
}

@media (hover:hover){
  #service-cards .service-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 60px -15px rgba(218,165,32,0.28);
    border-color: rgba(218,165,32,0.30);
  }
  #service-cards .service-card:hover::before{ opacity: 1; }
  #service-cards .service-card:hover::after{
    opacity: 1;
    transform: rotate(18deg) translateX(55%);
  }
}

/* Mobile / touch: keep a subtle glow always + stronger glow on tap/focus */
@media (hover: none){
  #service-cards .service-card{
    border-color: rgba(218,165,32,0.18);
    box-shadow: 0 18px 55px -18px rgba(218,165,32,0.22);
  }

  /* tap / keyboard focus */
  #service-cards .service-card:active,
  #service-cards .service-card:focus,
  #service-cards .service-card:focus-visible{
    transform: translateY(-2px);
    border-color: rgba(218,165,32,0.38);
    box-shadow: 0 22px 70px -18px rgba(218,165,32,0.32);
  }

  /* show shine a bit on touch too */
  #service-cards .service-card::before{ opacity: 0.35; }
}

#service-cards .service-card-content{
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
}

/* IMAGE (top, big, like the Figma card) */
#service-cards .service-illus{
  width: 100%;
  height: 230px;                 /* make it big */
  object-fit: cover;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 35px rgba(0,0,0,0.35);
  transition: transform .70s ease;
}

/* image zoom on hover */
@media (hover:hover){
  #service-cards .service-card:hover .service-illus{
    transform: scale(1.08);
  }
}

/* BADGE ON TOP OF IMAGE (your request) */
#service-cards .service-pill{
  position: absolute;
  top: 30px;          /* inside the image area */
  left: 30px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;

  background: rgba(218,165,32,0.18);
  border: 1px solid rgba(218,165,32,0.40);
  backdrop-filter: blur(12px);

  color: #DAA520;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: none; /* keep your exact text */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.30);
}

/* Text styles */
#service-cards .service-card-title{
  margin-top: 2px;
  color: #DAA520; /* Figma design uses gold titles */
  font-weight: 700;
  line-height: 1.2;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.5));
}

#service-cards .service-card-text{
  color: rgba(209,213,219,0.92);
  line-height: 1.75;
  margin: 0;
}

/* CTA button at bottom (use your existing <span class="service-link">...) */
#service-cards .service-link{
  margin-top: 8px;
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  color: #DAA520;
  background: rgba(15,24,40,0.35);
  border: 1px solid rgba(218,165,32,0.45);
  backdrop-filter: blur(12px);

  box-shadow: 0 12px 18px -10px rgba(0,0,0,0.45);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

#service-cards .service-link .arrow{
  display:inline-block;
  transition: transform .25s ease;
}

@media (hover:hover){
  #service-cards .service-card:hover .service-link{
    background: rgba(218,165,32,0.12);
    border-color: rgba(218,165,32,0.70);
    transform: translateY(-1px);
  }
  #service-cards .service-card:hover .service-link .arrow{
    transform: translateX(2px);
  }
}

/* Small screens: keep image big but not too tall */
@media (max-width: 420px){
  #service-cards .service-illus{ height: 210px; }
  #service-cards .service-pill{ top: 26px; left: 26px; }
}

/* --- Tap to show hover/glow for a moment --- */
@media (hover: none) and (pointer: coarse){
  #service-cards .service-card.is-tapped{
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(218,165,32,0.55);
    box-shadow: 0 26px 70px -18px rgba(218,165,32,0.38);
  }
  #service-cards .service-card.is-tapped::before{ opacity: 1; }
  #service-cards .service-card.is-tapped::after{
    opacity: 1;
    transform: rotate(18deg) translateX(55%);
  }
  #service-cards .service-card.is-tapped .service-illus{ transform: scale(1.06); }
  #service-cards .service-card.is-tapped .service-link{
    background: rgba(218,165,32,0.12);
    border-color: rgba(218,165,32,0.70);
    transform: translateY(-1px);
  }
  #service-cards .service-card.is-tapped .service-link .arrow{ transform: translateX(2px); }
}