/* ============================================================
   SERVICES PAGE — page-services.php specific styles
   (page-hero, wrap, split, reveal, about-block, cta-band base
   etc. are shared from style.css)
   ============================================================ */
/* ---------- Hero ---------- */
.page-hero{
  position:relative;min-height:65vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);
}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.page-hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 35%;
  transform:scale(1.08);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0,0);}
  100%{transform:scale(1.16) translate(-1.5%,-1.5%);}
}
.page-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,10,26,.35) 0%, rgba(6,10,26,.45) 45%, rgba(6,10,26,.92) 96%),
             linear-gradient(90deg, rgba(6,10,26,.7) 0%, rgba(6,10,26,.2) 55%, rgba(6,10,26,.1) 100%);
}
.page-hero-inner{position:relative;z-index:2;width:100%;padding:0px 28px 84px;max-width:1180px;margin:0 auto;}
.breadcrumb{
  display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:24px;
  opacity:0;transform:translateY(10px);animation:fadeUp .8s ease .1s forwards;
}
.breadcrumb a{color:rgba(255,255,255,.85);transition:color .2s ease;}
.breadcrumb a:hover{color:var(--lime);}
.breadcrumb .sep{color:rgba(255,255,255,.35);}
.breadcrumb .cur{color:#fff;}
.page-hero h1{
  color:#fff;font-size:clamp(38px,6vw,68px);max-width:760px;font-weight:600;letter-spacing:-.02em;
  opacity:0;transform:translateY(18px);animation:fadeUp .9s ease .25s forwards;
}
.page-hero h1 em{font-style:italic;color:var(--maroon-light);font-weight:500;}
.page-hero p{
  color:rgba(255,255,255,.82);font-size:18px;max-width:560px;margin-top:22px;line-height:1.65;
  opacity:0;transform:translateY(18px);animation:fadeUp .9s ease .4s forwards;
}
.page-hero-stats{
  display:flex;gap:0;margin-top:52px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-top:26px;max-width:820px;
  opacity:0;transform:translateY(18px);animation:fadeUp .9s ease .55s forwards;
}
.page-hero-stats .stat{padding-right:38px;margin-right:38px;border-right:1px solid rgba(255,255,255,.18);}
.page-hero-stats .stat:last-child{border-right:none;margin-right:0;padding-right:0;}
.page-hero-stats .num{font-family:var(--ff-display);color:#fff;font-size:clamp(22px,2.6vw,30px);font-weight:600;}
.page-hero-stats .lab{color:rgba(255,255,255,.65);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:4px;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
/* =====================================================
   INNER PAGE ADDITIONS — shares design tokens with home
   ===================================================== */

/* ---------- Page hero (breadcrumb banner) ---------- */
.page-hero{
  position:relative;background:var(--ink);color:#fff;
  padding:168px 0 84px;overflow:hidden;isolation:isolate;
}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.page-hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 35%;
  transform:scale(1.08);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0,0);}
  100%{transform:scale(1.16) translate(-1.5%,-1.5%);}
}
.page-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,10,26,.35) 0%, rgba(6,10,26,.45) 45%, rgba(6,10,26,.92) 96%),
             linear-gradient(90deg, rgba(6,10,26,.7) 0%, rgba(6,10,26,.2) 55%, rgba(6,10,26,.1) 100%);
}
.page-hero::before{
  content:"";position:absolute;top:-140px;right:-120px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(11,74,143,.45), transparent 70%);
  z-index:-1;animation:float-slow 9s ease-in-out infinite;
}
.page-hero::after{
  content:"";position:absolute;bottom:-160px;left:-100px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle at 60% 60%, rgba(129,0,0,.35), transparent 70%);
  z-index:-1;animation:float-slow 11s ease-in-out infinite reverse;
}
@keyframes float-slow{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(24px) scale(1.05);}}
.breadcrumb{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);
  letter-spacing:.03em;
}
.breadcrumb a{color:rgba(255,255,255,.55);transition:color .25s ease;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:#fff}
.page-hero h1{
  color:#fff;font-size:clamp(34px,5.2vw,58px);max-width:760px;margin-top:18px;font-weight:600;letter-spacing:-.01em;
}
.page-hero p{color:rgba(255,255,255,.7);font-size:16.5px;max-width:560px;margin-top:16px;line-height:1.7;}
.page-hero .ph-tag{
  display:inline-flex;align-items:center;gap:8px;color:#BFD9F2;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;
}
.page-hero .ph-tag::before{content:"";width:22px;height:1.5px;background:var(--signal);}
/* ---------- Process (How we work) ---------- */
.process{padding:60px 0;background:var(--paper-2);}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px;position:relative;}
@media (max-width:900px){.proc-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.proc-grid{grid-template-columns:1fr;}}
.proc-card{
  background:#fff;border-radius:var(--radius-md);padding:30px 22px;position:relative;
  border:1px solid var(--line);transition:transform .4s cubic-bezier(.16,.8,.28,1),box-shadow .4s ease;
}
.proc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);}
.proc-num{
  font-family:var(--ff-display);font-weight:800;font-size:34px;color:var(--paper-2);
  -webkit-text-stroke:1.5px var(--signal);position:absolute;top:14px;right:18px;
}
.proc-card h4{font-size:16.5px;font-weight:600;margin-top:26px;max-width:180px;}
.proc-card p{color:var(--slate);font-size:13.5px;margin-top:10px;line-height:1.6;}

/* ---------- Service detail rows (anchors) ---------- */
.svc-detail{padding:60px 0;border-top:1px solid var(--line);}
.svc-detail:first-of-type{border-top:none;}
.svc-detail .split-copy .svc-num{
  font-family:var(--ff-display);font-style:italic;color:#fff;font-weight:700;font-size:15px;margin-bottom:10px;display:block;
}
.svc-detail .split-copy h2{color:#fff;}
.svc-detail .split-copy p{color:#fff;}
.svc-list{margin-top:20px;display:flex;flex-direction:column;gap:12px;}
.svc-list li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:#fff;}
.svc-list li::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#810000;flex-shrink:0;
}
.svc-list1{margin-top:20px;display:flex;flex-direction:column;gap:12px;}
.svc-list1 li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:#fff;}
.svc-list1 li::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);flex-shrink:0;
}

/* ---------- Simple CTA banner (Services page variant) ---------- */
.services-cta-band{
  background:#fff;padding:50px 0;position:relative;overflow:hidden;
}
.services-cta-band::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.15), transparent 55%);
}
.cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cta-inner h3{color:#242424;font-size:clamp(22px,3vw,32px);max-width:520px;}
.cta-inner p{color:#242424;margin-top:8px;font-size:15px;max-width:480px;}
.services-cta-band .btn-solid{background:#003B76;color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.35);padding:20px; border-radius:50px;}
.services-cta-band .btn-solid:hover{background:#810000;color:#fff;}