/* =============================================================
   Service-page design system (mobile-first) — reference-grade polish
   Builds on site.css tokens. White lead · Green #1CBE72 · Black contrast.
   ============================================================= */

/* ---- HERO (cinematic, photo + dark gradient) ---- */
.svc-hero { position:relative; color:#fff; overflow:hidden; background:#0a0a0a; }
.svc-hero .svc-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.svc-hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.86) 100%),
             linear-gradient(95deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%); }
.svc-hero .wrap { position:relative; z-index:2; padding-top:64px; padding-bottom:64px; max-width:var(--maxw); }
.svc-hero .eyebrow { color:var(--green-light); display:inline-flex; align-items:center; gap:8px; }
.svc-hero .eyebrow::before { content:""; width:26px; height:3px; background:var(--green); border-radius:2px; }
.svc-hero h1 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.005em; line-height:1.0; font-size:clamp(34px,8vw,68px); margin:14px 0 0; max-width:16ch; text-wrap:balance; }
.svc-hero h1 .green { color:var(--green); }
.svc-hero .sub { color:rgba(255,255,255,.86); font-size:clamp(16px,2.2vw,20px); line-height:1.6; max-width:560px; margin-top:18px; }
.svc-hero .hero-actions { display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.svc-hero .hero-trust { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16); }
.svc-hero .ht-item { display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.85); }
.svc-hero .ht-item .stars { color:var(--green); letter-spacing:2px; font-size:15px; }
.svc-hero .ht-item b { color:#fff; }
.svc-hero .ht-item svg { width:18px; height:18px; color:var(--green); flex:0 0 18px; }
@media (min-width:768px){
  .svc-hero .wrap { padding-top:104px; padding-bottom:104px; }
  .svc-hero .hero-actions { flex-direction:row; align-items:center; }
}
@media (min-width:1024px){ .svc-hero .wrap { padding-top:140px; padding-bottom:128px; } }

/* ---- TRUST BAR ---- */
.trust-bar { background:var(--ink); color:#fff; }
.trust-bar .wrap { display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:0; max-width:var(--maxw); }
.trust-bar .tb-cell { display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; padding:18px 14px; font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:13px; color:rgba(255,255,255,.92); position:relative; }
.trust-bar .tb-cell svg { width:20px; height:20px; color:var(--green); flex:0 0 20px; }
.trust-bar .tb-cell:not(:last-child)::after { content:""; position:absolute; right:0; top:22%; bottom:22%; width:1px; background:rgba(255,255,255,.14); }
@media (min-width:768px){
  .trust-bar .wrap { grid-template-columns:repeat(5,1fr); }
  .trust-bar .tb-cell { padding:22px 12px; font-size:13.5px; }
}

/* ---- generic service section ---- */
.svc-section { padding:60px 0; }
@media (min-width:768px){ .svc-section { padding:84px 0; } }
.svc-section .sec-head { max-width:720px; }
.svc-section .sec-head.center { margin-inline:auto; text-align:center; }
.svc-section .sec-head h2 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.06; font-size:clamp(28px,5vw,44px); }
.svc-section .sec-head .eyebrow { display:block; margin-bottom:12px; }
.svc-section .sec-head .lede { margin-top:14px; }

/* ---- 3-col feature cards ---- */
.feature-grid { display:grid; grid-template-columns:1fr; gap:18px; margin-top:42px; }
.feature { background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:28px 26px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.feature:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.feature .fic { width:54px; height:54px; border-radius:14px; background:var(--green-tint); color:var(--green-hover); display:flex; align-items:center; justify-content:center; }
.feature .fic svg { width:27px; height:27px; }
.feature h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:20px; margin:18px 0 8px; }
.feature p { font-size:14.5px; line-height:1.65; color:var(--fg-muted); }
@media (min-width:768px){ .feature-grid { grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (min-width:1024px){ .feature-grid { grid-template-columns:repeat(3,1fr); gap:22px; } }

/* ---- alternating image + text rows ---- */
.altrow { display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.altrow + .altrow { margin-top:56px; }
.altrow .alt-media img { width:100%; border-radius:18px; box-shadow:var(--shadow-lg); object-fit:cover; aspect-ratio:4/3; }
.altrow .alt-body h2 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.08; font-size:clamp(24px,4vw,38px); margin:10px 0 14px; }
.altrow .alt-body p { color:var(--fg-muted); font-size:16px; line-height:1.7; margin-bottom:14px; }
.altrow .checklist { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.altrow .checklist li { list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:15px; font-weight:600; }
.altrow .checklist li svg { width:22px; height:22px; flex:0 0 22px; color:#fff; background:var(--green); border-radius:50%; padding:4px; margin-top:1px; }
@media (min-width:768px){
  .altrow { grid-template-columns:1fr 1fr; gap:48px; }
  .altrow.flip .alt-media { order:2; }
}

/* ---- green left-border callout ---- */
.callout { background:var(--green-tint); border-left:5px solid var(--green); border-radius:0 14px 14px 0; padding:28px 28px; margin:8px 0; display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.callout .co-stat { font-family:var(--font-display); font-weight:700; color:var(--green-hover); font-size:clamp(38px,7vw,56px); line-height:1; flex:0 0 auto; }
.callout .co-text { font-size:16px; line-height:1.6; color:var(--fg); }
.callout .co-text b { color:var(--green-press); }

/* ---- numbered process steps ---- */
.process2 { display:grid; grid-template-columns:1fr; gap:20px; margin-top:46px; }
.pstep { position:relative; background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:26px 24px 24px; }
.pstep .pnum { font-family:var(--font-display); font-weight:700; font-size:60px; line-height:.8; color:var(--green); opacity:.9; }
.pstep h4 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:18px; margin:12px 0 8px; }
.pstep p { font-size:14px; line-height:1.6; color:var(--fg-muted); }
@media (min-width:768px){ .process2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .process2 { grid-template-columns:repeat(4,1fr); gap:22px; } }

/* ---- big CTA banner ---- */
.svc-cta { position:relative; overflow:hidden; background:linear-gradient(120deg,#070707 0%, #0e1a14 60%, #0a0a0a 100%); color:#fff; }
.svc-cta::after { content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:340px; height:340px; background:radial-gradient(circle, rgba(28,190,114,.32), transparent 70%); }
.svc-cta .wrap { position:relative; z-index:2; text-align:center; padding:64px 20px; max-width:760px; }
.svc-cta .eyebrow { color:var(--green-light); }
.svc-cta h2 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.04; font-size:clamp(28px,6vw,52px); margin:12px 0 0; }
.svc-cta p { color:rgba(255,255,255,.8); font-size:17px; margin:16px auto 0; max-width:520px; }
.svc-cta .cta-actions { display:flex; flex-direction:column; gap:12px; margin-top:30px; align-items:center; }
@media (min-width:600px){ .svc-cta .cta-actions { flex-direction:row; justify-content:center; } }
@media (min-width:768px){ .svc-cta .wrap { padding:96px 28px; } }

/* ---- FAQ accordion ---- */
.svc-faq { max-width:840px; margin:42px auto 0; }
.svc-faq details { border:1px solid var(--border-subtle); border-radius:14px; background:#fff; margin-bottom:14px; overflow:hidden; }
.svc-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 22px; font-weight:700; font-size:16px; color:var(--fg); }
.svc-faq summary::-webkit-details-marker { display:none; }
.svc-faq .qi { flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--green-tint); color:var(--green-hover); display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.svc-faq details[open] .qi { transform:rotate(45deg); background:var(--green); color:#fff; }
.svc-faq .faq-a { padding:0 22px 22px; font-size:15px; line-height:1.7; color:var(--fg-muted); }

/* ---- testimonials ---- */
.testi-grid { display:grid; grid-template-columns:1fr; gap:18px; margin-top:42px; }
.testi { background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); }
.testi .stars { color:var(--green); letter-spacing:2px; font-size:15px; }
.testi p { font-size:14.5px; line-height:1.7; color:var(--fg-muted); margin:12px 0 16px; }
.testi .who { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:15px; }
@media (min-width:768px){ .testi-grid { grid-template-columns:repeat(3,1fr); gap:20px; } }

/* ---- prose band (paragraph-only sections) ---- */
.svc-prose { max-width:760px; margin:0 auto; }
.svc-prose.center { text-align:center; }
.svc-prose p { font-size:16px; line-height:1.75; color:var(--fg-muted); margin-bottom:16px; }
.svc-prose p:last-child { margin-bottom:0; }

/* list panel (plain-bullet sections rendered as a styled checklist grid) */
.list-panel { display:grid; grid-template-columns:1fr; gap:12px 28px; margin-top:8px; }
.list-panel li { list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.5; color:var(--fg); }
.list-panel li svg { width:22px; height:22px; flex:0 0 22px; color:#fff; background:var(--green); border-radius:50%; padding:4px; margin-top:2px; }
@media (min-width:680px){ .list-panel { grid-template-columns:1fr 1fr; } }