/* ==========================================================================
   SERVICES PAGE — additional styles
   Loaded after style.css
   ========================================================================== */

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative;
  padding:96px 0 84px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
  overflow:hidden;
}
.page-hero::after{
  content:'';
  position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,57,70,.22),transparent 68%);
  pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:1; max-width:800px; }
.page-hero h1{ color:#fff; margin-bottom:16px; font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; line-height:1.15; }
.page-hero p{ color:rgba(255,255,255,.80); font-size:1.06rem; margin:0; max-width:62ch; }

.breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; color:rgba(255,255,255,.62); margin-bottom:18px;
}
.breadcrumb a{ color:rgba(255,255,255,.78); transition:color var(--t-fast); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span[aria-hidden]{ color:var(--accent); font-size:1.05rem; }

/* ---------- Smooth scroll for anchor links ---------- */
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .page-hero{ padding:84px 0 72px; }
}
@media (max-width:768px){
  .page-hero{ padding:72px 0 62px; }
  .page-hero h1{ font-size:clamp(1.6rem,6vw,2.2rem); }
  .page-hero p{ font-size:.96rem; }
}
@media (max-width:560px){
  .page-hero{ padding:62px 0 54px; }
  .breadcrumb{ font-size:.76rem; margin-bottom:14px; }
}
/* ---------- Highlight on anchor jump ---------- */
.service-card{
  scroll-margin-top:calc(var(--header-h) + 30px);
}
.service-card--highlight{
  animation:serviceHighlight 2.2s ease-out;
}
@keyframes serviceHighlight{
  0%{
    box-shadow:0 0 0 0 rgba(230,57,70,.65);
    border-color:rgba(230,57,70,.9);
    transform:translateY(-6px);
  }
  40%{
    box-shadow:0 0 0 10px rgba(230,57,70,0);
    border-color:rgba(230,57,70,.6);
  }
  100%{
    box-shadow:0 0 0 0 rgba(230,57,70,0);
    border-color:transparent;
    transform:translateY(0);
  }
}