/* ---------- SERVICES PAGE ---------- */

/* Hero */
.svc-hero{
  position:relative; overflow:hidden; color:#fff;
  background:var(--ink); padding:110px 0 120px;
}
.svc-hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(111,201,72,0.22), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(24,70,128,0.9), transparent 55%),
    linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 60%, var(--ink-3) 100%);
}
.svc-hero-bg::after{
  content:""; position:absolute; inset:0;
  /*background-image:*/
  /*  linear-gradient(rgba(210,226,245,0.05) 1px, transparent 1px),*/
  /*  linear-gradient(90deg, rgba(210,226,245,0.05) 1px, transparent 1px);*/
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, #000 20%, transparent 95%);
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 95%);
}
.svc-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;
}
.svc-breadcrumb{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); margin-bottom:22px; display:flex; gap:10px;
}
.svc-breadcrumb a{ color:var(--brass-light); }
.svc-breadcrumb a:hover{ text-decoration:underline; }
.svc-hero h1{ font-size:clamp(30px,4.2vw,54px); line-height:1.08; color:#fff; }
.svc-hero h1 span{ display:block; color:var(--brass-light); }
.svc-hero .lead{ margin-top:22px; font-size:16.5px; color:rgba(255,255,255,0.75); max-width:560px; }

.svc-hero-card{
  background:#fff; color:var(--ink-text); border-radius:var(--radius);
  padding:30px 28px; box-shadow:0 30px 70px rgba(0,0,0,0.35);
  border-top:4px solid var(--brass);
}
.svc-hero-logo{ width:100%; max-width:320px; height:auto; margin:0 auto 22px; }
.svc-sample{ border:1px solid var(--line-on-light); border-radius:12px; overflow:hidden; }
.svc-sample-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--parchment-2); font-size:11.5px; letter-spacing:.1em; color:var(--ink);
}
.svc-verified{
  font-size:11.5px; font-weight:700; color:var(--verified); background:var(--mint);
  padding:3px 10px; border-radius:var(--radius-pill); letter-spacing:0;
}
.svc-sample dl div{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 16px; border-top:1px solid var(--line-on-light); font-size:13.5px;
}
.svc-sample dt{ color:var(--slate); opacity:.75; }
.svc-sample dd{ font-weight:600; color:var(--ink); text-align:right; }

/* Strip */
.svc-strip{ position:relative; z-index:3; margin-top:-38px; }
.svc-strip-inner{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; box-shadow:0 24px 60px rgba(13,39,72,0.14), 0 0 0 1px rgba(13,39,72,0.05);
  padding:0;
}
.svc-strip-inner span{
  padding:24px 16px; text-align:center; font-size:13px; color:var(--slate);
  border-left:1px solid var(--line-on-light);
}
.svc-strip-inner span:first-child{ border-left:none; }
.svc-strip-inner strong{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800; color:var(--ink); }

/* Core services */
.svc-list{ background:var(--parchment); padding-top:110px; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line-on-light); border-radius:var(--radius);
  padding:30px 26px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--brass), var(--brass-light)); transition:width .35s ease;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(57,165,54,0.45); }
.svc-card:hover::before{ width:100%; }
.svc-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.svc-icon{
  width:56px; height:56px; border-radius:14px; background:var(--mint); color:var(--brass);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.svc-icon svg{ width:30px; height:30px; }
.svc-card:hover .svc-icon{ background:var(--ink); color:var(--brass-light); transform:rotate(-6deg) scale(1.06); }
.svc-num{ font-size:13px; font-weight:600; color:rgba(13,39,72,0.28); }
.svc-card h3{ font-size:19px; color:var(--ink); margin-bottom:10px; line-height:1.25; }
.svc-card p{ font-size:14.5px; color:var(--slate); opacity:.85; margin-bottom:18px; }
.svc-card ul{ display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.svc-card li{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; color:var(--ink-text); }
.svc-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--brass); transition:gap .2s ease;
}
.svc-link:hover{ gap:12px; color:var(--verified); }
.svc-card.reveal:nth-child(2){ transition-delay:.06s; }
.svc-card.reveal:nth-child(3){ transition-delay:.12s; }
.svc-card.reveal:nth-child(5){ transition-delay:.06s; }
.svc-card.reveal:nth-child(6){ transition-delay:.12s; }

/* Add-ons */
.svc-addons{ background:var(--ink); color:var(--parchment); }
.svc-addons-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.svc-addons-head{ position:sticky; top:120px; }
.svc-addons-head .eyebrow{ color:var(--brass-light); }
.svc-addons-head .eyebrow::before{ background:var(--brass-light); }
.svc-addons-head h2{ color:#fff; margin-bottom:18px; }
.svc-addons-head p{ color:rgba(246,243,236,0.65); margin-bottom:30px; max-width:440px; }
.svc-addons-list{ display:flex; flex-direction:column; gap:16px; }
.svc-addon{
  display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start;
  background:var(--ink-2); border:1px solid var(--line-on-dark); border-radius:var(--radius);
  padding:26px 24px; transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.svc-addon:hover{ background:var(--ink-3); border-color:var(--brass); transform:translateX(6px); }
.svc-addon-idx{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center; color:var(--brass-light); font-weight:600;
}
.svc-addon h3{ font-size:17px; color:#fff; margin-bottom:6px; }
.svc-addon p{ font-size:14.5px; color:rgba(246,243,236,0.62); }

/* Deliverables */
.svc-deliver{ background:var(--parchment-2); }
.svc-fields{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:900px; margin:0 auto; }
.svc-field{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line-on-light); border-radius:var(--radius-pill);
  padding:11px 20px 11px 12px; font-size:14px; font-weight:600; color:var(--ink);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.svc-field:hover{ border-color:var(--brass); transform:translateY(-2px); box-shadow:0 8px 20px rgba(13,39,72,0.08); }
.svc-field i{
  width:22px; height:22px; border-radius:50%; background:var(--brass); color:#fff;
  font-style:normal; font-size:11px; display:flex; align-items:center; justify-content:center;
}

/* Steps */
.svc-steps{ background:var(--parchment); }
.svc-steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.svc-steps-grid::before{
  content:""; position:absolute; top:28px; left:12.5%; right:12.5%; height:2px;
  background:linear-gradient(90deg, var(--brass), var(--brass-light)); opacity:.35;
}
.svc-step{ text-align:center; padding:0 18px; position:relative; }
.svc-step span{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  background:var(--ink); color:var(--brass-light); font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 0 0 6px var(--parchment), 0 10px 24px rgba(13,39,72,0.2);
  transition:background .25s ease, color .25s ease;
}
.svc-step:hover span{ background:var(--brass); color:#fff; }
.svc-step h3{ font-size:17px; color:var(--ink); margin-bottom:8px; }
.svc-step p{ font-size:14px; color:var(--slate); opacity:.85; }

/* CTA */
.svc-cta{ background:var(--parchment); padding-top:0; }
.faq + .svc-cta{ padding-top:96px; }
.svc-cta-box{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  background:linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 100%);
  border-radius:var(--radius); padding:56px 52px; color:#fff;
}
.svc-cta-box::after{
  content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,201,72,0.35), transparent 70%);
}
.svc-cta-box h2{ color:#fff; font-size:clamp(24px,3vw,34px); margin-bottom:12px; }
.svc-cta-box p{ color:rgba(255,255,255,0.72); max-width:520px; }
.svc-cta-actions{ display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1; flex-shrink:0; }

.svc-card h3 a{ color:inherit; transition:color .2s ease; }
.svc-card h3 a:hover{ color:var(--brass); }

/* Responsive */
@media (max-width:980px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:44px; }
  .svc-hero-card{ max-width:520px; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .svc-addons-grid{ grid-template-columns:1fr; gap:36px; }
  .svc-addons-head{ position:static; }
  .svc-steps-grid{ grid-template-columns:repeat(2,1fr); gap:40px 0; }
  .svc-steps-grid::before{ display:none; }
  .svc-cta-box{ flex-direction:column; align-items:flex-start; padding:44px 32px; }
}
@media (max-width:640px){
  .svc-hero{ padding:80px 0 100px; }
  .svc-strip-inner{ grid-template-columns:repeat(2,1fr); }
  .svc-strip-inner span:nth-child(3){ border-left:none; }
  .svc-strip-inner span:nth-child(n+3){ border-top:1px solid var(--line-on-light); }
  .svc-grid{ grid-template-columns:1fr; }
  .svc-steps-grid{ grid-template-columns:1fr; }
  .svc-addon{ grid-template-columns:44px 1fr; gap:16px; padding:22px 18px; }
  .svc-addon-idx{ width:44px; height:44px; font-size:13px; }
  .svc-cta-actions, .svc-cta-actions .btn{ width:100%; }
}