/* Jopestkil four service detail pages v21 — clean, readable, responsive */
body.jp-service-v20{
  font-family:"Segoe UI",Arial,sans-serif;
  color:#173e32;
  background:#fff;
}
body.jp-service-v20 .svc20{
  overflow:hidden;
  background:#fff;
}
body.jp-service-v20 .svc20 *,
body.jp-service-v20 .svc20 *::before,
body.jp-service-v20 .svc20 *::after{box-sizing:border-box}

body.jp-service-v20 .svc20-shell{
  width:min(1200px,calc(100% - 56px));
  margin:0 auto;
}

/* Breadcrumb */
body.jp-service-v20 .svc20-crumbs{
  padding:17px 0;
  color:#6c7a74;
  font-size:14px;
  line-height:1.5;
}
body.jp-service-v20 .svc20-crumbs a{
  color:#116b49;
  text-decoration:none;
  font-weight:700;
}
body.jp-service-v20 .svc20-crumbs a:hover{text-decoration:underline}

/* Hero */
body.jp-service-v20 .svc20-hero{
  position:relative;
  padding:54px 0 62px;
  background:#f5f8f6;
  border-top:1px solid #e6ece8;
  border-bottom:1px solid #dde6e1;
}
body.jp-service-v20 .svc20-hero::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-130px;
  width:440px;
  height:440px;
  border-radius:50%;
  background:rgba(124,221,76,.09);
  pointer-events:none;
}
body.jp-service-v20 .svc20-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr);
  gap:64px;
  align-items:center;
}
body.jp-service-v20 .svc20-kicker{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 15px;
  color:#0b7650;
  font-weight:800;
  font-size:13px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
body.jp-service-v20 .svc20-kicker::before{
  content:"";
  width:32px;
  height:2px;
  background:#67cf35;
  flex:0 0 auto;
}
body.jp-service-v20 .svc20 h1{
  margin:0 0 19px;
  max-width:760px;
  color:#112e25;
  font-size:clamp(42px,4.4vw,62px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:850;
}
body.jp-service-v20 .svc20-lead{
  margin:0 0 26px;
  max-width:750px;
  color:#536760;
  font-size:18px;
  line-height:1.7;
}
body.jp-service-v20 .svc20-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:29px 0 26px;
}
body.jp-service-v20 .svc20-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 23px;
  border:1px solid #0b6e4a;
  text-decoration:none;
  font-size:15px;
  font-weight:800;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
body.jp-service-v20 .svc20-btn:hover{transform:translateY(-2px)}
body.jp-service-v20 .svc20-btn--primary{
  background:#0b6e4a;
  color:#fff;
  box-shadow:0 10px 26px rgba(11,110,74,.15);
}
body.jp-service-v20 .svc20-btn--secondary{
  background:#fff;
  color:#0b6e4a;
}
body.jp-service-v20 .svc20-trust{
  display:flex;
  flex-wrap:wrap;
  gap:11px 24px;
  margin:0;
  padding:0;
  list-style:none;
  color:#415850;
  font-size:14px;
  font-weight:700;
}
body.jp-service-v20 .svc20-trust li{
  display:flex;
  align-items:center;
  gap:8px;
}
body.jp-service-v20 .svc20-trust li::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  background:#e5f6df;
  color:#157748;
  font-size:12px;
  font-weight:900;
}
body.jp-service-v20 .svc20-visual{
  position:relative;
  min-height:430px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:38px;
  background:#edf2ef;
  border:1px solid #d8e1dc;
  box-shadow:0 18px 44px rgba(22,57,45,.08);
}
body.jp-service-v20 .svc20-visual::before{
  content:"";
  position:absolute;
  width:285px;
  height:285px;
  border-radius:50%;
  right:-74px;
  top:-92px;
  background:#ddf2d5;
}
body.jp-service-v20 .svc20-visual::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  left:-60px;
  bottom:-70px;
  background:rgba(9,97,65,.06);
}
body.jp-service-v20 .svc20-visual img{
  position:relative;
  z-index:1;
  width:min(100%,360px);
  height:310px;
  object-fit:contain;
  filter:drop-shadow(0 24px 18px rgba(20,54,43,.16));
}
body.jp-service-v20 .svc20-visual-note{
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:22px;
  padding:13px 16px;
  background:#fff;
  color:#173e32;
  box-shadow:0 11px 28px rgba(18,55,43,.11);
  font-size:14px;
  font-weight:800;
  text-align:center;
}

/* Global service page type scale */
body.jp-service-v20 .svc20-section{padding:78px 0}
body.jp-service-v20 .svc20-section--soft{
  background:#f7f9f8;
  border-top:1px solid #eef2ef;
  border-bottom:1px solid #eef2ef;
}
body.jp-service-v20 .svc20-head{
  max-width:830px;
  margin:0 auto 40px;
  text-align:center;
}
body.jp-service-v20 .svc20-head--left{
  max-width:680px;
  margin:0 0 24px;
  text-align:left;
}
body.jp-service-v20 .svc20-eyebrow{
  display:block;
  margin:0 0 10px;
  color:#0b7750;
  font-size:12px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.jp-service-v20 .svc20 h2{
  margin:0 0 13px;
  color:#15352b;
  font-size:clamp(30px,2.8vw,40px);
  line-height:1.13;
  letter-spacing:-.025em;
  font-weight:820;
}
body.jp-service-v20 .svc20 h3{
  margin:0 0 9px;
  color:#173f32;
  font-size:20px;
  line-height:1.34;
  letter-spacing:-.01em;
  font-weight:800;
}
body.jp-service-v20 .svc20 p{
  color:#5b6d66;
  font-size:16px;
  line-height:1.72;
}
body.jp-service-v20 .svc20-head p{
  margin:0;
  color:#62736c;
  font-size:17px;
  line-height:1.7;
}

/* What service includes */
body.jp-service-v20 .svc20-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
body.jp-service-v20 .svc20-card{
  position:relative;
  min-height:190px;
  padding:28px 28px 27px 86px;
  background:#fff;
  border:1px solid #dce5e0;
  box-shadow:0 8px 24px rgba(24,58,47,.045);
}
body.jp-service-v20 .svc20-card-num{
  position:absolute;
  left:26px;
  top:27px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin:0;
  background:#e5f6df;
  color:#0b7650;
  font-size:13px;
  font-weight:900;
}
body.jp-service-v20 .svc20-card p{
  margin:0;
  font-size:15.5px;
  line-height:1.7;
}

/* Informational two-column section */
body.jp-service-v20 .svc20-two-col{
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:56px;
  align-items:start;
}
body.jp-service-v20 .svc20-copy p{margin:0 0 17px}
body.jp-service-v20 .svc20-copy ul{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
body.jp-service-v20 .svc20-copy li{
  position:relative;
  padding-left:30px;
  color:#4f655c;
  font-size:15.5px;
  line-height:1.65;
}
body.jp-service-v20 .svc20-copy li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#0b7750;
  font-size:17px;
  font-weight:900;
}
body.jp-service-v20 .svc20-info-panel{
  padding:34px 36px;
  background:#0b5a3e;
  color:#fff;
  box-shadow:0 14px 34px rgba(10,74,51,.12);
}
body.jp-service-v20 .svc20-info-panel h3{
  color:#fff;
  font-size:24px;
}
body.jp-service-v20 .svc20-info-panel p{color:#dce9e4}
body.jp-service-v20 .svc20-info-panel ul{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:0;
}
body.jp-service-v20 .svc20-info-panel li{
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:15px;
  line-height:1.55;
  font-weight:700;
}

/* Process — comfortable 2 x 2, never skinny */
body.jp-service-v20 .svc20-process{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  border:0;
  background:transparent;
}
body.jp-service-v20 .svc20-step{
  position:relative;
  min-height:200px;
  padding:30px 30px 29px 86px;
  background:#fff;
  border:1px solid #dce5e0;
  box-shadow:0 8px 24px rgba(24,58,47,.045);
}
body.jp-service-v20 .svc20-step strong{
  position:absolute;
  left:28px;
  top:31px;
  display:block;
  margin:0;
  color:#4fc627;
  font-size:27px;
  line-height:1;
  font-weight:900;
}
body.jp-service-v20 .svc20-step p{
  margin:0;
  font-size:15.5px;
  line-height:1.7;
}

/* Methods + warning signs — fixes the narrow card issue */
body.jp-service-v20 .svc20-section--soft .svc20-two-col{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:64px;
}
body.jp-service-v20 .svc20-section--soft .svc20-two-col > .svc20-copy{
  padding:30px 32px;
  background:#fff;
  border:1px solid #dce5e0;
  box-shadow:0 8px 24px rgba(24,58,47,.04);
}
body.jp-service-v20 .svc20-signal-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
body.jp-service-v20 .svc20-signal{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  column-gap:16px;
  align-items:start;
  padding:22px 24px;
  background:#fff;
  border:1px solid #dce5e0;
  box-shadow:0 7px 20px rgba(24,58,47,.035);
}
body.jp-service-v20 .svc20-signal::before{
  content:"!";
  grid-column:1;
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-top:1px;
  background:#e5f6df;
  color:#0b7650;
  font-size:15px;
  font-weight:900;
}
body.jp-service-v20 .svc20-signal h3{
  grid-column:2;
  margin:0 0 4px;
  font-size:18px;
  line-height:1.35;
}
body.jp-service-v20 .svc20-signal p{
  grid-column:2;
  margin:0;
  font-size:15px;
  line-height:1.65;
}

/* Problem / solution */
body.jp-service-v20 .svc20-problem-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
body.jp-service-v20 .svc20-problem{
  min-height:265px;
  padding:28px;
  background:#fff;
  border:1px solid #dce5e0;
  box-shadow:0 8px 24px rgba(24,58,47,.04);
}
body.jp-service-v20 .svc20-label{
  display:inline-block;
  margin-bottom:13px;
  color:#0b7750;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.jp-service-v20 .svc20-problem hr{
  border:0;
  border-top:1px solid #e2e9e5;
  margin:19px 0;
}
body.jp-service-v20 .svc20-problem p{margin:0}

/* Benefits */
body.jp-service-v20 .svc20-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 28px;
}
body.jp-service-v20 .svc20-benefit{
  position:relative;
  padding:24px 24px 24px 60px;
  background:#fff;
  border:1px solid #dce5e0;
}
body.jp-service-v20 .svc20-benefit::before{
  content:"✓";
  position:absolute;
  left:22px;
  top:24px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  background:#e5f6df;
  color:#0b7650;
  font-weight:900;
}
body.jp-service-v20 .svc20-benefit p{
  margin:0;
  font-size:15.5px;
  line-height:1.68;
}

/* FAQ */
body.jp-service-v20 .svc20-faq{
  max-width:920px;
  margin:0 auto;
  border-top:1px solid #dce5e0;
}
body.jp-service-v20 .svc20-faq details{
  border-bottom:1px solid #dce5e0;
  background:#fff;
}
body.jp-service-v20 .svc20-faq summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:22px 54px 22px 0;
  color:#173e32;
  font-size:17px;
  line-height:1.45;
  font-weight:800;
}
body.jp-service-v20 .svc20-faq summary::-webkit-details-marker{display:none}
body.jp-service-v20 .svc20-faq summary::after{
  content:"+";
  position:absolute;
  right:5px;
  top:17px;
  color:#0b7750;
  font-size:27px;
  font-weight:500;
}
body.jp-service-v20 .svc20-faq details[open] summary::after{content:"−"}
body.jp-service-v20 .svc20-faq p{
  margin:0;
  padding:0 48px 23px 0;
  font-size:15.5px;
  line-height:1.7;
}

@media(max-width:1050px){
  body.jp-service-v20 .svc20-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);
    gap:38px;
  }
  body.jp-service-v20 .svc20-section--soft .svc20-two-col,
  body.jp-service-v20 .svc20-two-col{gap:36px}
  body.jp-service-v20 .svc20-problem-grid{grid-template-columns:1fr 1fr}
  body.jp-service-v20 .svc20-problem:last-child{grid-column:1 / -1}
}

@media(max-width:860px){
  body.jp-service-v20 .svc20-shell{width:min(100% - 40px,1200px)}
  body.jp-service-v20 .svc20-hero-grid{grid-template-columns:1fr;gap:32px}
  body.jp-service-v20 .svc20-visual{min-height:350px}
  body.jp-service-v20 .svc20-two-col,
  body.jp-service-v20 .svc20-section--soft .svc20-two-col{grid-template-columns:1fr;gap:30px}
  body.jp-service-v20 .svc20-section--soft .svc20-two-col > .svc20-copy{padding:28px}
  body.jp-service-v20 .svc20-head--left{max-width:100%}
}

@media(max-width:680px){
  body.jp-service-v20 .svc20-shell{width:min(100% - 30px,1200px)}
  body.jp-service-v20 .svc20-crumbs{padding:13px 0;font-size:13px}
  body.jp-service-v20 .svc20-hero{padding:32px 0 40px}
  body.jp-service-v20 .svc20 h1{font-size:35px;line-height:1.08}
  body.jp-service-v20 .svc20-lead{font-size:16px;line-height:1.65}
  body.jp-service-v20 .svc20-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:23px 0}
  body.jp-service-v20 .svc20-btn{width:100%}
  body.jp-service-v20 .svc20-trust{display:grid;grid-template-columns:1fr;gap:9px;font-size:13px}
  body.jp-service-v20 .svc20-visual{min-height:275px;padding:22px}
  body.jp-service-v20 .svc20-visual img{height:205px}
  body.jp-service-v20 .svc20-visual-note{left:13px;right:13px;bottom:13px;padding:11px 12px;font-size:12.5px}
  body.jp-service-v20 .svc20-section{padding:50px 0}
  body.jp-service-v20 .svc20-head{margin-bottom:28px;text-align:left}
  body.jp-service-v20 .svc20 h2{font-size:28px;line-height:1.18}
  body.jp-service-v20 .svc20 h3{font-size:18px}
  body.jp-service-v20 .svc20-head p{font-size:16px}
  body.jp-service-v20 .svc20-feature-grid,
  body.jp-service-v20 .svc20-process,
  body.jp-service-v20 .svc20-problem-grid,
  body.jp-service-v20 .svc20-benefits{grid-template-columns:1fr}
  body.jp-service-v20 .svc20-problem:last-child{grid-column:auto}
  body.jp-service-v20 .svc20-card,
  body.jp-service-v20 .svc20-step{min-height:0;padding:24px 22px 24px 72px}
  body.jp-service-v20 .svc20-card-num,
  body.jp-service-v20 .svc20-step strong{left:21px;top:24px}
  body.jp-service-v20 .svc20-info-panel{padding:27px 22px}
  body.jp-service-v20 .svc20-section--soft .svc20-two-col > .svc20-copy{padding:24px 21px}
  body.jp-service-v20 .svc20-signal{grid-template-columns:34px minmax(0,1fr);column-gap:13px;padding:20px 18px}
  body.jp-service-v20 .svc20-signal::before{width:29px;height:29px}
  body.jp-service-v20 .svc20-signal h3{font-size:17px}
  body.jp-service-v20 .svc20-problem{min-height:0;padding:23px 21px}
  body.jp-service-v20 .svc20-benefit{padding:22px 18px 22px 54px}
  body.jp-service-v20 .svc20-benefit::before{left:18px;top:22px}
  body.jp-service-v20 .svc20-faq summary{padding:20px 44px 20px 0;font-size:16px}
  body.jp-service-v20 .svc20-faq p{padding:0 20px 20px 0}
}
