/* ECU software service pages v2 (jfa-del-v2.php). Builds on jfa-ds.css. */
.hv2.del{background:#fff}
.hv2 .del-hero{position:relative;min-height:440px;display:flex;align-items:flex-end;background:var(--dark);overflow:hidden}
.hv2 .del-hero-img{position:absolute;inset:0}
html body .hv2 .del-hero-img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center 45%;display:block}
.hv2 .del-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,17,22,.9) 0%,rgba(11,17,22,.62) 50%,rgba(11,17,22,.2) 100%)}
.hv2 .del-hero-in{position:relative;z-index:1;padding-top:56px;padding-bottom:44px;width:100%}
.hv2 .del-hero .kick{color:#7FD8F7}
html body .hv2.del .del-hero h1{color:#fff!important;font-size:clamp(34px,5.4vw,60px);line-height:1;margin:8px 0 14px;text-transform:uppercase}
.hv2 .del-lead{color:#DCE6EE;font-size:17.5px;line-height:1.55;max-width:620px;margin:0 0 20px}
.hv2 .del-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
html body .hv2.del .btn{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;border-radius:10px;background:var(--cyan);color:#04141C!important;font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0}
html body .hv2.del .btn.ghost{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.4)}
html body .hv2 .del-ticks,html body .hv2 .del-ticks li{list-style:none!important;margin:0;padding:0}
.hv2 .del-ticks{display:flex;flex-wrap:wrap;gap:8px 22px}
html body .hv2 .del-ticks li{color:#fff;font-size:14px;padding-left:22px;position:relative}
.hv2 .del-ticks li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:7px;border-left:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);transform:rotate(-45deg)}

.hv2 .del-routes{position:relative;z-index:2;margin-top:-34px}
.hv2 .del-routes .w{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.hv2 .del-route{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:var(--ink);box-shadow:0 22px 40px -30px rgba(16,23,30,.9);transition:transform .2s}
.hv2 .del-route:hover{transform:translateY(-3px)}
.hv2 .del-route h2{font-size:21px;margin:10px 0 6px}
.hv2 .del-route p{color:var(--ink2);margin:0 0 10px;line-height:1.55}
.hv2 .del-route b{color:#0079AE;font-weight:600}
.hv2 .del-route .tag{display:inline-block;font-family:Oswald,sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.hv2 .del-route .tag.ok{background:#E6F7EE;color:#137A43}
.hv2 .del-route .tag.off{background:#FDEDE8;color:var(--warn,#B4381F)}

.hv2 .del-split{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hv2 .del-copy h2{font-size:var(--h2);margin:0 0 14px}
.hv2 .del-copy p{color:var(--ink2);line-height:1.7;font-size:16.5px;margin:0 0 14px}
.hv2 .del-side{margin:0;border-radius:14px;overflow:hidden;height:440px}
html body .hv2 .del-side img{width:100%!important;height:100%!important;object-fit:cover;display:block}

.hv2 .del-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);counter-reset:s}
.hv2 .del-steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;counter-increment:s;position:relative;margin:0}
.hv2 .del-steps li::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:Oswald,sans-serif;font-weight:600;margin-bottom:12px}
.hv2 .del-steps b{display:block;font-family:Oswald,sans-serif;text-transform:uppercase;font-size:18px;margin-bottom:6px}
.hv2 .del-steps span{color:var(--ink2);line-height:1.6;font-size:15px}

.hv2 .del-legal{border:1px solid #F1C9BD;background:#FFF7F4;border-radius:var(--radius);padding:24px 26px;scroll-margin-top:110px}
.hv2 .del-legal h2{font-size:21px;margin:0 0 10px;color:var(--warn,#B4381F)}
.hv2 .del-legal p{margin:0 0 10px;line-height:1.65;color:var(--ink)}
.hv2 .del-legal p:last-child{margin-bottom:0}
.hv2 .del-legal a{color:#0079AE}
.hv2 .del-legal.soft{border-color:var(--line);background:var(--soft)}
.hv2 .del-legal.soft h2{color:var(--ink)}
.hv2 #quote{scroll-margin-top:100px}
.hv2 .del-form{max-width:640px;margin:0 auto}

.hv2 .del-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
html body .hv2 .del-pics img{width:100%!important;height:360px!important;object-fit:cover;border-radius:14px;display:block}
.hv2 .del-team{margin:16px 0 0}
.hv2 .del-team a{color:#0079AE;font-weight:600;text-decoration:none}

.hv2 .del-search{width:100%;max-width:520px;height:50px;border:1px solid var(--line);border-radius:10px;padding:0 16px;font-size:16px;margin-bottom:16px;background:#fff}
.hv2 .del-search:focus{outline:2px solid var(--cyan);outline-offset:1px}
.hv2 .del-none{color:var(--ink2)}
.hv2 .del-ecus{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.hv2 .del-ecus details{background:#fff;border:1px solid var(--line);border-radius:12px}
.hv2 .del-ecus summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:600;display:flex;justify-content:space-between;gap:10px}
.hv2 .del-ecus summary::-webkit-details-marker{display:none}
.hv2 .del-ecus summary span{color:var(--ink2);font-weight:400;font-size:13px}
html body .hv2 .del-ecus ul{list-style:none!important;margin:0;padding:0 16px 12px}
html body .hv2 .del-ecus li{list-style:none!important;margin:0;padding:6px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.hv2 .del-ecus li small{display:block;color:var(--ink2);font-size:12px;margin-top:2px}

.hv2 .del-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.hv2 .del-revs figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.hv2 .del-revs blockquote{margin:0 0 12px;padding:0;border:0;font-style:normal;line-height:1.6;color:var(--ink)}
.hv2 .del-revs blockquote::before{content:"“";display:block;font-family:Oswald,sans-serif;font-size:44px;line-height:.6;color:var(--cyan);margin-bottom:8px}
.hv2 .del-revs figcaption{color:var(--ink2);font-size:14px}
.hv2 .del-revs figcaption b{color:var(--ink);margin-right:6px}

.hv2 .del-faq{max-width:820px}
.hv2 .del-faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.hv2 .del-faq summary{cursor:pointer;padding:16px 18px;font-weight:600}
.hv2 .del-faq p{margin:0;padding:0 18px 16px;color:var(--ink2);line-height:1.65}

.hv2 .del-more{display:flex;flex-wrap:wrap;gap:8px}
.hv2 .del-more a{padding:10px 16px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;font-size:15px;background:#fff}
.hv2 .del-more a:hover{border-color:#C9D3DC}

@media (max-width:900px){
  .hv2 .del-split{grid-template-columns:1fr}
  .hv2 .del-side{height:300px}
  .hv2 .del-steps,.hv2 .del-revs{grid-template-columns:1fr}
  .hv2 .del-ecus{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hv2 .del-hero{min-height:420px}
  .hv2 .del-hero::after{background:linear-gradient(0deg,rgba(11,17,22,.94) 0%,rgba(11,17,22,.6) 70%,rgba(11,17,22,.35) 100%)}
  .hv2 .del-lead{font-size:16px}
  .hv2 .del-routes .w{grid-template-columns:1fr}
  .hv2 .del-pics{grid-template-columns:1fr 1fr}
  html body .hv2 .del-pics img{height:220px!important}
  html body .hv2 .del-pics img:nth-child(3){display:none}
  .hv2 .del-ecus{grid-template-columns:1fr}
  html body .hv2.del .btn{width:100%;justify-content:center}
}

/* the theme overrides [hidden] */
html body .hv2.del [hidden]{display:none!important}

/* John, 1 Oct 2026: the theme numbers <ol> itself, so the steps showed "1." next to our own number badge. */
html body .hv2 .del-steps,html body .hv2 .del-steps li{list-style:none!important;margin-left:0;padding-left:0}
html body .hv2 .del-steps li{padding:22px!important}
html body .hv2 .del-steps li::marker{content:none}
/* the Help Centre coverage table, dropped in as-is */
.hv2 .del-cov .del-kblink{text-align:center;margin:0;padding:0 0 46px;background:var(--soft)}
.hv2 .del-cov .del-kblink a{color:#0079AE;font-weight:600;text-decoration:none}

/* Hero photo sizing (John, 1 Oct 2026): the generated photos are 1680px wide, so never stretch one across
   the full screen. Desktop: the photo sits on the right (max 940px) and fades into the dark on the left,
   so it is never blown up past its own size, even on a retina screen. Phone: the photo is a 240px band
   above the heading instead of a tall crop behind the text, so the part is fully visible and sharp. */
@media (min-width:901px){
  .hv2 .del-hero-img{left:auto;right:0;width:min(62%,940px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
  html body .hv2 .del-hero-img img{object-position:65% 50%}
  .hv2 .del-hero::after{background:linear-gradient(90deg,rgba(11,17,22,.92) 0%,rgba(11,17,22,.55) 45%,rgba(11,17,22,.05) 100%)}
}
@media (max-width:900px){
  .hv2 .del-hero{display:block;min-height:0}
  .hv2 .del-hero-img{position:relative;inset:auto;height:240px}
  html body .hv2 .del-hero-img img{object-position:70% 50%}
  .hv2 .del-hero::after{top:0;bottom:auto;height:240px;background:linear-gradient(180deg,rgba(11,17,22,0) 55%,rgba(11,17,22,1) 100%)}
  .hv2 .del-hero-in{padding-top:14px;padding-bottom:36px}
}