/* ==========================================================================
   Services Page — Page-specific styles
   Loaded after style.css; responsive.css loads last and wins overrides.
   ========================================================================== */

/* ---------- Services Hero ---------- */
.services-hero{
  position:relative;min-height:48vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--navy-950);padding-top:var(--header-h);
}
.services-hero-media{position:absolute;inset:0;z-index:0;}
.services-hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);}
.services-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,19,.6) 0%,rgba(5,10,19,.78) 55%,rgba(5,10,19,.96) 100%);
}
.services-hero-content{position:relative;z-index:2;padding:56px 0 48px;}
.services-hero-title{font-size:clamp(32px,4.6vw,54px);color:var(--paper-0);max-width:760px;margin:16px 0 16px;}
.services-hero-sub{font-size:16px;color:rgba(255,255,255,.78);max-width:600px;line-height:1.7;}

/* ---------- Sticky sub-nav ---------- */
.services-subnav{
  /* --header-h-scrolled = fixed topbar + .site-header.scrolled's height —
     by the time this sub-nav is reachable the user has scrolled past the
     hero, so the header is always in its scrolled state. */
  position:sticky;top:var(--header-h-scrolled);z-index:400;background:var(--paper-0);
  border-bottom:1px solid var(--line-100);box-shadow:0 2px 12px rgba(10,18,32,.04);
}
.services-subnav-row{
  display:flex;gap:6px;overflow-x:auto;padding:14px 0;scrollbar-width:none;
}
.services-subnav-row::-webkit-scrollbar{display:none;}
.services-subnav-link{
  flex-shrink:0;display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px;
  font-size:13.5px;font-weight:600;color:var(--grey-500);white-space:nowrap;transition:background .25s,color .25s;
}
.services-subnav-link i{font-size:12px;color:var(--gold-500);}
.services-subnav-link:hover{background:var(--paper-50);color:var(--navy-900);}
.services-subnav-link.active{background:var(--gold-500);color:var(--paper-0);}
.services-subnav-link.active i{color:var(--paper-0);}

/* ---------- Service detail sections ---------- */
/* scroll-margin-top clears the sticky sub-nav bar (~68px) below the header.
   The header clearance itself already comes from the global
   html{scroll-padding-top:calc(var(--header-h) + 12px)} — and that stacks
   ADDITIVELY with this element's own scroll-margin-top (confirmed empirically
   on the About page's tabs: repeating the full header height here overshoots
   by 130px+), so only the extra bit belongs here. */
.service-detail{padding:100px 0;border-bottom:1px solid var(--line-100);scroll-margin-top:calc(var(--nav-h-scrolled) - var(--nav-h) - 12px + 68px);}
.service-detail:nth-child(even){background:var(--paper-50);}
.service-detail:last-of-type{border-bottom:none;}
.service-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.service-detail.reverse .service-detail-media{order:2;}
.service-detail.reverse .service-detail-content{order:1;}

.service-detail-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.service-detail-media img{width:100%;height:480px;object-fit:cover;}
.service-stat-badge{
  position:absolute;left:24px;bottom:24px;background:rgba(10,18,32,.9);backdrop-filter:blur(8px);
  color:var(--paper-0);padding:18px 22px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1);
}
.service-stat-badge .counter,.service-stat-badge .stat-suffix{font-family:var(--font-head);font-size:26px;font-weight:700;}
.service-stat-badge .stat-suffix{color:var(--gold-400);}
.service-stat-badge p{font-size:11.5px;color:var(--grey-300);margin-top:4px;max-width:150px;line-height:1.4;}

.service-detail-icon{
  width:56px;height:56px;border-radius:16px;background:var(--navy-900);color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:22px;
}
.service-detail-num{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold-500);margin-bottom:10px;text-transform:uppercase;}
.service-detail-content h2{font-size:clamp(24px,2.8vw,34px);color:var(--navy-900);margin-bottom:16px;}
.service-detail-content > p{font-size:15.5px;color:var(--grey-500);line-height:1.8;margin-bottom:28px;}

.service-block-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--navy-900);margin-bottom:14px;}
.service-deliverables{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-bottom:32px;}
.service-deliverables li{display:flex;gap:10px;font-size:14px;color:var(--navy-800);line-height:1.6;}
.service-deliverables li i{color:var(--gold-500);font-size:12px;margin-top:5px;flex-shrink:0;}

.service-process{display:flex;flex-direction:column;gap:0;margin-bottom:32px;}
.service-process-step{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line-100);}
.service-process-step:first-child{border-top:none;padding-top:0;}
.service-process-index{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--paper-0);border:1.5px solid var(--gold-500);
  color:var(--gold-500);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.service-detail:nth-child(even) .service-process-index{background:var(--paper-50);}
.service-process-step h4{font-size:14.5px;color:var(--navy-900);margin-bottom:3px;}
.service-process-step p{font-size:13px;color:var(--grey-500);line-height:1.5;}

/* ---------- Why choose (compact) ---------- */
.services-why{padding:100px 0;background:var(--paper-0);}
.services-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.services-why-card{text-align:center;padding:30px 22px;}
.services-why-icon{
  width:56px;height:56px;border-radius:16px;background:var(--navy-900);color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 18px;
}
.services-why-card h3{font-size:16px;color:var(--navy-900);margin-bottom:8px;}
.services-why-card p{font-size:13.5px;color:var(--grey-500);line-height:1.6;}

/* ---------- Final CTA ---------- */
.services-cta{position:relative;padding:140px 0;overflow:hidden;isolation:isolate;text-align:center;}
.services-cta-media{position:absolute;inset:0;z-index:-1;}
.services-cta-media img{width:100%;height:100%;object-fit:cover;}
.services-cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,19,.88),rgba(5,10,19,.92));}
.services-cta-content{max-width:680px;margin:0 auto;}
.services-cta h2{font-size:clamp(30px,4.6vw,52px);color:var(--paper-0);margin-bottom:20px;}
.services-cta p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.75;margin-bottom:38px;}
.services-cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}