/* ============================================================
   SERVICES.CSS — styles only used on services.html.
   Load after base.css.
   ============================================================ */

/* ---- Services hero (text left, photo right) ---- */
.services-hero{ position:relative; padding: 56px 0 44px; background: linear-gradient(180deg, var(--sky) 0%, #ffffff 82%); overflow:hidden; }
.services-hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center; }
.services-hero h1{ font-size: clamp(30px,4vw,44px); font-weight:800; margin-top:10px; }
.services-hero p.lede{ margin-top:14px; font-size:16px; color: var(--muted); line-height:1.6; max-width:480px; }
.services-trait-row{ display:flex; gap:26px; margin-top:28px; flex-wrap:wrap; }
.services-trait{ display:flex; align-items:flex-start; gap:8px; max-width:160px; }
.services-trait-icon{ width:30px; height:30px; border-radius:9px; background: linear-gradient(155deg,#5A86FF,#2B57E8); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.services-trait-icon svg{ width:15px; height:15px; color:#fff; }
.services-trait b{ display:block; font-size:12.5px; color: var(--navy); }
.services-trait span{ font-size:11px; color: var(--muted); }

.contact-note{ position:absolute; left:4px; bottom:14px; font-size:17px; line-height:1.22; color: var(--navy); text-align:left; z-index:3; max-width:150px; white-space:nowrap; text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 2px 14px rgba(255,255,255,.85), 0 0 24px rgba(255,255,255,.6); }
.contact-note svg{ width:56px; height:10px; color: var(--royal); margin:3px auto 0 0; display:block; }
.contact-photo{ border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow); height:300px; }
.contact-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
@media (max-width: 900px){ .contact-note{ display:none; } }

/* ---- Service cards (photo + icon badge + details) ---- */
.svc-detail-grid{ margin-top:44px; display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.svc-detail-grid .svc-detail-card:nth-child(1){ transition-delay:0ms; }
.svc-detail-grid .svc-detail-card:nth-child(2){ transition-delay:60ms; }
.svc-detail-grid .svc-detail-card:nth-child(3){ transition-delay:120ms; }
.svc-detail-grid .svc-detail-card:nth-child(4){ transition-delay:0ms; }
.svc-detail-grid .svc-detail-card:nth-child(5){ transition-delay:60ms; }
.svc-detail-grid .svc-detail-card:nth-child(6){ transition-delay:120ms; }
.svc-detail-grid .svc-detail-card:nth-child(7){ transition-delay:0ms; }
.services-trust-row .services-trust-item:nth-child(1){ transition-delay:0ms; }
.services-trust-row .services-trust-item:nth-child(2){ transition-delay:60ms; }
.services-trust-row .services-trust-item:nth-child(3){ transition-delay:120ms; }
.services-trust-row .services-trust-item:nth-child(4){ transition-delay:180ms; }
.svc-detail-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-m); overflow:hidden; display:flex; flex-direction:column; transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease; scroll-margin-top: 90px; }
.svc-detail-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-s); }
.svc-photo-wrap{ position:relative; height:190px; }
.svc-photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-photo-badge{
  position:absolute; bottom:-18px; left:20px; width:44px; height:44px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 16px -6px rgba(11,27,58,0.4); border:3px solid #fff;
}
.svc-photo-badge svg{ width:21px; height:21px; color:#fff; }
.svc-photo-badge.svc-1{ background: linear-gradient(155deg,#5A86FF,#2B57E8); }
.svc-photo-badge.svc-2{ background: linear-gradient(155deg,#A78BE0,#7C5CC7); }
.svc-photo-badge.svc-3{ background: linear-gradient(155deg,#F17FA8,#E8467F); }
.svc-photo-badge.svc-4{ background: linear-gradient(155deg,#FFB25C,#F5911F); }
.svc-photo-badge.svc-5{ background: linear-gradient(155deg,#4FD387,#22A85E); }
.svc-photo-badge.svc-6{ background: linear-gradient(155deg, var(--navy-2), var(--navy)); }
.svc-photo-badge.svc-7{ background: linear-gradient(155deg,#8F7CF0,#6C5CE7); }
.svc-detail-body{ padding: 30px 22px 22px; display:flex; flex-direction:column; flex:1; }
.svc-detail-card h3{ font-size:17px; font-weight:800; }
.svc-detail-card p.svc-desc{ margin-top:8px; font-size:13px; color: var(--muted); line-height:1.55; }
.svc-includes{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; flex:1; }
.svc-includes li{ display:flex; gap:7px; align-items:flex-start; font-size:12.8px; color: var(--ink); }
.svc-includes li svg{ width:14px; height:14px; color: var(--royal); flex-shrink:0; margin-top:2px; }
.svc-detail-foot{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; }
.svc-detail-foot .learn{ font-size:13px; font-weight:700; color: var(--royal); display:inline-flex; align-items:center; gap:5px; }
.svc-arrow{
  width:30px; height:30px; border-radius:50%; background: var(--sky-2); color: var(--royal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .15s ease;
}
.svc-arrow svg{ width:13px; height:13px; }
.svc-detail-card:hover .svc-arrow{ background: var(--royal); color:#fff; }

/* ---- Trust row ---- */
.services-trust-row{ margin-top:40px; display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.services-trust-item{ display:flex; align-items:flex-start; gap:12px; }
.services-trust-icon{ width:40px; height:40px; border-radius:50%; background: var(--sky-2); color: var(--royal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.services-trust-icon svg{ width:19px; height:19px; }
.services-trust-item b{ display:block; font-size:14px; color: var(--navy); }
.services-trust-item span{ font-size:12px; color: var(--muted); }

/* ---- Final CTA icon badge (services page) ---- */
.cta-icon-badge{
  width:44px; height:44px; border-radius:12px; background: rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.cta-icon-badge svg{ width:22px; height:22px; color:#fff; }

@media (max-width: 980px){
  .services-hero-grid{ grid-template-columns: 1fr; }
  .svc-detail-grid{ grid-template-columns: repeat(2,1fr); }
  .services-trust-row{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .svc-detail-grid{ grid-template-columns: 1fr; }
  .services-trust-row{ grid-template-columns: 1fr; }
  .services-trait-row{ gap:16px; }
}