/* Contact + finance pages v2 (jfa-cf-v2.php). Builds on jfa-ds.css and jfa-ds-del.css (hero, steps, reviews, FAQ). */
.hv2.cf .del-hero{min-height:400px}
.hv2 .cf-open{display:inline-flex;align-items:center;gap:9px;margin:4px 0 6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14.5px}
.hv2 .cf-open i{width:9px;height:9px;border-radius:50%;background:#E0723F;box-shadow:0 0 0 4px rgba(224,114,63,.18)}
.hv2 .cf-open.on i{background:#2FCB7A;box-shadow:0 0 0 4px rgba(47,203,122,.2)}

/* one-tap contact strip, overlapping the hero */
.hv2 .cf-acts{position:relative;z-index:2;margin-top:-30px}
.hv2 .cf-acts .w{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.hv2 .cf-act{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px;text-decoration:none;color:var(--ink);box-shadow:0 22px 40px -30px rgba(16,23,30,.9);transition:transform .2s,border-color .2s}
.hv2 .cf-act:hover{transform:translateY(-3px);border-color:#BFD3E0}
.hv2 .cf-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#E8F7FD;color:#0079AE;margin-bottom:8px}
.hv2 .cf-ic.wa{background:#E7F8EE;color:#1E9E57}
.hv2 .cf-act b{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:18px;font-weight:600}
.hv2 .cf-act em{font-style:normal;color:var(--ink2);font-size:14.5px;overflow-wrap:anywhere}

.hv2 .cf-builder{text-align:center;margin:22px 0 0;color:#C9D6E0}
html body .hv2 .cf-builder a{color:#7FD8F7!important;font-weight:600}

/* find us */
.hv2 .cf-find{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:stretch}
.hv2 .cf-map{border-radius:14px;overflow:hidden;min-height:380px;background:#E9EEF2}
.hv2 .cf-map iframe{display:block;width:100%;height:100%;min-height:380px;border:0}
.hv2 .cf-where h2{font-size:var(--h2);margin:6px 0 12px}
.hv2 .cf-where h3{font-size:18px;margin:22px 0 8px}
.hv2 .cf-where address{font-style:normal;line-height:1.7;color:var(--ink);font-size:16.5px}
html body .hv2 .cf-link{color:#0079AE!important;font-weight:600;text-decoration:none}
.hv2 .cf-hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.hv2 .cf-hours dt{font-weight:600;color:var(--ink)}
.hv2 .cf-hours dd{margin:0;color:var(--ink2)}

/* quick routes */
.hv2 .cf-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.hv2 .cf-routes a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.hv2 .cf-routes a:hover{border-color:#BFD3E0}
.hv2 .cf-routes b{display:block;font-family:Oswald,sans-serif;text-transform:uppercase;font-size:17px;letter-spacing:.03em;margin-bottom:5px;color:var(--ink)}
.hv2 .cf-routes b::after{content:" \2192";color:#0079AE}
.hv2 .cf-routes span{color:var(--ink2);font-size:15px;line-height:1.55}

/* finance providers */
.hv2 .cf-prov{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.hv2 .cf-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.hv2 .cf-logo{height:56px;display:flex;align-items:center;margin-bottom:14px}
html body .hv2 .cf-logo img{max-height:44px!important;width:auto!important;max-width:170px!important}
.hv2 .cf-zero{align-self:flex-start;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#E6F7EE;color:#137A43}
.hv2 .cf-card h3{font-size:22px;margin:12px 0 10px}
html body .hv2 .cf-card ul,html body .hv2 .cf-card li{list-style:none!important;margin:0;padding:0}
.hv2 .cf-card ul{display:grid;gap:8px;margin-bottom:20px;flex:1}
html body .hv2 .cf-card li{position:relative;padding-left:22px;color:var(--ink2);line-height:1.5;font-size:15.5px}
.hv2 .cf-card li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:7px;border-left:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);transform:rotate(-45deg)}
html body .hv2.del .cf-card .btn{justify-content:center;width:100%}

.hv2 .cf-tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.hv2 .cf-tbl table{width:100%;border-collapse:collapse;min-width:620px;margin:0}
.hv2 .cf-tbl th,.hv2 .cf-tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top;background:none}
.hv2 .cf-tbl thead th{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);background:#F4F7F9}
.hv2 .cf-tbl tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
.hv2 .cf-tbl td{color:var(--ink2)}
.hv2 .cf-tbl tr:last-child th,.hv2 .cf-tbl tr:last-child td{border-bottom:0}
html body .hv2 .cf-tbl a{color:#0079AE!important;font-weight:600}
.hv2 .cf-small{margin:26px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink2);max-width:900px}

.hv2 .cf-end{text-align:center}
.hv2 .cf-end h2{color:#fff;margin:0 0 10px}
.hv2 .cf-end p{color:#C9D6E0;margin:0 0 20px}
.hv2 .cf-end .del-cta{justify-content:center}

@media (max-width:900px){
  .hv2 .cf-acts .w{grid-template-columns:1fr 1fr}
  .hv2 .cf-acts .cf-act:last-child:nth-child(odd){grid-column:1/-1}
  .hv2 .cf-acts{margin-top:0;padding-top:18px}
  .hv2 .cf-find,.hv2 .cf-prov{grid-template-columns:1fr}
  .hv2 .cf-routes{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hv2 .cf-acts .w{gap:10px}
  .hv2 .cf-act{padding:14px}
  .hv2 .cf-act b{font-size:16px}
  .hv2 .cf-act em{font-size:13px}
  .hv2 .cf-routes{grid-template-columns:1fr}
  .hv2 .cf-map,.hv2 .cf-map iframe{min-height:280px}
}
html body .hv2 .cf-card ul{margin:0 0 22px!important}

/* Contact hero, take 2 (John, 1 Oct 2026: "the first one ... where it was faded out"). Same layout and fade as
   the ECU pages: text on the left, picture on the right melting into the dark. The picture is the black GT3 on
   our dyno with the team cut-out standing in front of it, and the fade runs over both so the team blends in. */
.hv2 .cf-art{background:#0b1116}
html body .hv2 .cf-art img.cf-car{object-position:50% 30%}
html body .hv2 .cf-art img.cf-crew{position:absolute!important;left:0;right:0;bottom:0;top:auto!important;width:100%!important;height:auto!important;object-fit:contain}
.hv2 .cf-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,17,22,.55) 0%,rgba(11,17,22,0) 30%),linear-gradient(180deg,rgba(11,17,22,.35) 0%,rgba(11,17,22,0) 35%);pointer-events:none}
@media (max-width:900px){
  .hv2 .cf-art{height:300px}
  html body .hv2 .cf-art img.cf-crew{width:150%!important;left:-25%;right:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
}
/* Take 3 (John: "too faded, you can't see all the staff"). Only the car fades now. The fade moves off the box
   and onto the car photo, so the team cut-out is no longer masked, and it sits above the hero's dark wash. */
@media (min-width:901px){
  .hv2 .del-hero-img.cf-art{-webkit-mask-image:none;mask-image:none;background:none}
  html body .hv2 .cf-art img.cf-car{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
}
html body .hv2 .cf-art img.cf-crew{z-index:2;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));-webkit-mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.35) 100%)}
.hv2 .cf-art::after{background:linear-gradient(180deg,rgba(11,17,22,.35) 0%,rgba(11,17,22,0) 35%)}
@media (max-width:900px){
  html body .hv2 .cf-art img.cf-crew{width:100%!important;left:0;right:0}
  .hv2 .cf-hero2::after{height:300px;background:linear-gradient(180deg,rgba(11,17,22,0) 45%,rgba(11,17,22,.85) 100%)}
}
/* Dark wash behind the team (John: "black fading behind the staff so it doesn't look so cut out"). A soft dark
   band rises from the bottom, and each person gets a dark halo, so the cut edges sit on shadow, not on the car. */
.hv2 .cf-art .cf-crew-bg{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(11,17,22,0) 0%,rgba(11,17,22,.55) 40%,rgba(11,17,22,.9) 100%)}
html body .hv2 .cf-art img.cf-crew{z-index:3;filter:drop-shadow(0 0 14px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(0,0,0,.7))}
@media (max-width:900px){ .hv2 .cf-art .cf-crew-bg{height:45%} }
.hv2 .cf-hero2 .del-hero-in{z-index:4}
/* Email card scrolls to the form (John prefers the form); land below the sticky header */
html{scroll-behavior:smooth}
.hv2.cf #quote{scroll-margin-top:110px}
/* John: "slightly darker behind the staff, and faded". Taller, darker wash and a wider halo round each person. */
.hv2 .cf-art .cf-crew-bg{height:68%;background:linear-gradient(180deg,rgba(11,17,22,0) 0%,rgba(11,17,22,.7) 35%,rgba(11,17,22,.95) 65%,#0b1116 100%)}
html body .hv2 .cf-art img.cf-crew{filter:drop-shadow(0 0 26px rgba(0,0,0,.95)) drop-shadow(0 0 10px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(0,0,0,.8));-webkit-mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.25) 100%)}
@media (max-width:900px){ .hv2 .cf-art .cf-crew-bg{height:60%} html body .hv2 .cf-art img.cf-crew{filter:drop-shadow(0 0 6px rgba(0,0,0,.85)) drop-shadow(0 0 2px rgba(0,0,0,.8))} }
/* the contact cards sit below the team, never over them */
.hv2 .cf-hero2 + .cf-acts{margin-top:0;padding:40px 0}
/* 15 Oct: cards centred in their band, icon left / text right, small action line, arrow on the right */
.hv2 .cf-acts .cf-act{flex-direction:row;align-items:center;gap:16px;padding:20px 22px}
.hv2 .cf-acts .cf-ic{margin:0;flex:0 0 48px;width:48px;height:48px}
.hv2 .cf-acts .cf-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hv2 .cf-acts .cf-act small{font-size:13px;color:#5B6B78;margin-top:2px}
.hv2 .cf-acts .cf-go{font-style:normal;color:#0079AE;font-size:18px;transition:transform .2s}
.hv2 .cf-acts .cf-act:hover .cf-go{transform:translateX(3px)}
@media (max-width:900px){ .hv2 .cf-hero2 + .cf-acts{padding:24px 0} }
@media (max-width:600px){ .hv2 .cf-acts .w{grid-template-columns:1fr} .hv2 .cf-acts .cf-act{padding:14px 16px} .hv2 .cf-acts .cf-ic{flex-basis:42px;width:42px;height:42px} }

/* Credit risk warning next to finance claims: legible, not small print (Klarna UK prominence rules). */
.hv2 .cf-warn{margin:16px 0 0;font-size:14px;line-height:1.55;color:inherit;opacity:.92;max-width:760px}
.hv2 .cf-warn-l{margin:22px 0 0;color:var(--ink2);opacity:1}
.hv2 .del-hero .cf-warn{color:#DCE6EE;opacity:1}
.hv2 .cf-acts .nw{white-space:nowrap}