/* hpv5 — homepage variation blocks: plain-language, owner-facing */

/* who we serve — real cards instead of chips */
.hv-ind{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;text-align:left}
.hv-icard{background:#fff;border:1px solid rgba(13,45,82,.08);border-radius:16px;padding:26px 24px;box-shadow:0 6px 22px rgba(13,45,82,.05);transition:all .2s}
.hv-icard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(13,45,82,.1)}
.hv-icard .ihd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hv-icard .ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex:none}
.hv-icard .ic svg{width:36px;height:36px}
.hv-icard .ic{color:#0072BF}
.hv-icard h3{font-family:var(--fd);font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.015em;margin:0}
.hv-icard p{font-size:13.5px;color:var(--muted);line-height:1.6}
.hv-icard .sz{margin-top:14px;padding-top:12px;border-top:1px dashed var(--grey-mid);font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);font-weight:700}

/* towns band — local search */
.hv-town{background:#fff;border-top:1px solid rgba(13,45,82,.08);border-bottom:1px solid rgba(13,45,82,.08);padding:34px 80px;display:flex;align-items:center;gap:34px;justify-content:center;flex-wrap:wrap}
.hv-town .lbl{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap}
.hv-town .lbl em{font-style:normal;color:var(--amber)}
.hv-town .towns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.hv-town .towns span{font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;color:var(--muted);background:#f5f9fd;border:1px solid rgba(13,45,82,.07);border-radius:100px;padding:7px 15px;font-weight:600}

/* layered protection — plain-English replacement for the rings */
.hv-layers{display:flex;flex-direction:column;gap:12px;max-width:480px;margin:0 auto;text-align:left}
.hv-layer{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid rgba(13,45,82,.08);border-radius:14px;padding:18px 20px;box-shadow:0 6px 20px rgba(13,45,82,.05)}
.hv-layer .n{width:30px;height:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue-deep);font-family:var(--fd);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hv-layer:last-child .n{background:var(--green-bg);color:var(--green)}
.hv-layer h4{font-family:var(--fd);font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:3px}
.hv-layer p{font-size:12.5px;color:var(--muted);line-height:1.55}

/* overnight activity log — "while you were closed" */
.hv-watch{background:#fff;border:1px solid rgba(13,45,82,.08);border-radius:20px;box-shadow:0 18px 50px rgba(13,45,82,.1);max-width:470px;margin:0 auto;text-align:left;overflow:hidden}
.hv-watch .hd{background:linear-gradient(160deg,#0d2d52,#14406e);color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}
.hv-watch .hd b{font-family:var(--fd);font-size:14.5px;font-weight:700}
.hv-watch .hd span{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.hv-watch .rw{display:flex;gap:14px;padding:15px 24px;border-bottom:1px solid #f0f4f8;align-items:flex-start}
.hv-watch .rw:last-child{border-bottom:none}
.hv-watch .tm{font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--blue);width:56px;flex-shrink:0;padding-top:1px}
.hv-watch .rw p{font-size:13px;color:var(--navy);line-height:1.5;font-weight:500}
.hv-watch .rw p span{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.hv-watch .ft{background:#f7fbff;padding:15px 24px;font-size:12.5px;color:var(--muted);display:flex;gap:9px;align-items:center}
.hv-watch .ft i{font-style:normal;color:var(--green);font-weight:700}

/* service rows — compact keyword-led list */
.hv-svcrows{max-width:1000px;margin:48px auto 0;text-align:left;border-top:1px solid rgba(13,45,82,.09)}
.hv-svcrow{display:flex;gap:22px;align-items:flex-start;padding:24px 4px;border-bottom:1px solid rgba(13,45,82,.09)}
.hv-svcrow .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hv-svcrow .ic svg{width:21px;height:21px}
.hv-svcrow .bd{flex:1}
.hv-svcrow h3{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:5px}
.hv-svcrow p{font-size:14px;color:var(--muted);line-height:1.65;max-width:660px}
.hv-svcrow .go{font-size:13px;font-weight:600;color:var(--blue);white-space:nowrap;padding-top:12px}

/* handwritten note artifact */
.hv-note{background:#fffdf5;border:1px solid #ece5d2;border-radius:4px;box-shadow:0 24px 50px rgba(13,45,82,.13);padding:30px 32px;max-width:400px;margin:0 auto;text-align:left;transform:rotate(1deg);position:relative}
.hv-note::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);opacity:.5}
.hv-note .hd{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#a9a293;margin-bottom:16px;display:flex;justify-content:space-between}
.hv-note p{font-family:var(--fs);font-style:italic;font-size:19px;color:var(--navy);line-height:1.55;margin-bottom:14px}
.hv-note .sg{font-family:var(--fs);font-style:italic;font-size:21px;color:var(--navy);border-top:1px solid #e6dfcc;padding-top:12px}
.hv-note .sg span{display:block;font-family:var(--fm);font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#a9a293;margin-top:4px}

/* artifact caption */
.hv-cap{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:22px;font-weight:600}

/* three-step variant of the numbered process */
.hp-proc.c3{grid-template-columns:repeat(3,1fr)}
.hp-proc.c3::before{left:11%;right:11%}

/* reassurance strip under the hero */
.hv-strip{background:#fff;border-bottom:1px solid rgba(13,45,82,.08);padding:22px 80px;display:flex;justify-content:center;gap:44px;flex-wrap:wrap}
.hv-strip div{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:600;color:var(--navy)}
.hv-strip i{font-style:normal;color:var(--green);font-weight:800}

/* CTA with three real actions */
.hv-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;margin:40px auto 0;position:relative;z-index:1}
.hv-act{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:26px 22px;text-align:left}
.hv-act .ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.hv-act .ic svg{width:19px;height:19px}
.hv-act b{font-family:var(--fd);font-size:16px;color:#fff;display:block;margin-bottom:6px}
.hv-act p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:14px}
.hv-act a{font-family:var(--fd);font-size:13.5px;font-weight:700;color:var(--gold)}
.hv-act a:hover{color:#fff}

/* tighter vertical rhythm for the homepage variations */
.hptight .hp-sec{padding:64px 80px}
.hptight .hp-svc-grid{margin-top:44px}
.hptight .hv-ind{margin-top:42px}
.hptight .hp-partners{margin-top:42px;padding-top:26px}
.hptight .hp-proc{margin-top:48px}
.hptight .hv-svcrows{margin-top:40px}
.hptight .hp-num{margin-top:48px}
.hptight .hp-cta{padding:78px 80px}
.hptight .hp-2col{gap:60px}

/* no-icon service boxes, larger type */
.hv-svcbig{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;text-align:left}
.hv-box{background:#fff;border:1px solid rgba(13,45,82,.08);border-radius:16px;padding:32px 30px;box-shadow:0 6px 22px rgba(13,45,82,.05);transition:all .2s}
.hv-box:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(13,45,82,.1)}
.hv-box h3{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.025em;line-height:1.2;margin-bottom:12px}
.hv-box p{font-size:15.5px;color:var(--muted);line-height:1.65;margin-bottom:14px}
.hv-box a{font-size:14px;font-weight:600;color:var(--blue)}

/* seven-label security ring */
.hv-rings7{position:relative;width:620px;height:560px;margin:0 auto}
.hv-rings7 .rg{position:absolute;border-radius:50%;border:1.5px solid rgba(0,114,191,.2);left:50%;top:280px;transform:translate(-50%,-50%)}
.hv-rings7 .rg.a{width:230px;height:230px}
.hv-rings7 .rg.b{width:340px;height:340px;border-color:rgba(0,114,191,.14)}
.hv-rings7 .rg.c{width:452px;height:452px;border-color:rgba(0,114,191,.09)}
.hv-rings7 .core{position:absolute;left:50%;top:280px;transform:translate(-50%,-50%);width:154px;height:154px;border-radius:50%;background:linear-gradient(160deg,#0d2d52,#14406e);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 16px 44px rgba(13,45,82,.3);z-index:2}
.hv-rings7 .core b{font-family:var(--fd);font-size:15px;font-weight:700;line-height:1.25}
.hv-rings7 .core span{font-size:10px;color:var(--blue-soft);margin-top:3px}
.hv-rings7 .hp-rlabel{font-size:12.5px;padding:9px 16px}

/* support call record + follow-up */
.hv-call{background:#fff;border:1px solid rgba(13,45,82,.09);border-radius:20px;box-shadow:0 24px 50px rgba(13,45,82,.13);max-width:430px;margin:0 auto;text-align:left;overflow:hidden}
.hv-call .hd{background:linear-gradient(160deg,#0d2d52,#14406e);color:#fff;padding:20px 24px;display:flex;align-items:center;gap:13px}
.hv-call .hd .ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.13);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hv-call .hd .ic svg{width:19px;height:19px}
.hv-call .hd b{font-family:var(--fd);font-size:15px;display:block}
.hv-call .hd span{font-size:11.5px;color:rgba(255,255,255,.5)}
.hv-call .rw{display:flex;gap:14px;align-items:flex-start;padding:16px 24px;border-bottom:1px solid #f0f4f8}
.hv-call .rw .tm{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--blue);width:62px;flex-shrink:0;padding-top:2px}
.hv-call .rw p{font-size:13.5px;color:var(--navy);font-weight:600;line-height:1.5}
.hv-call .rw p span{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.hv-call .rw.ok .tm{color:var(--green)}
.hv-call .mail{padding:18px 24px 20px;background:#f7fbff}
.hv-call .mail .lb{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.hv-call .stars{color:#e0a63c;font-size:15px;letter-spacing:2px;margin-bottom:8px}
.hv-call .mail p{font-family:var(--fs);font-style:italic;font-size:16.5px;color:var(--navy);line-height:1.5;margin-bottom:10px}
.hv-call .mail .who{font-size:12px;color:var(--muted)}

/* single-testimonial carousel */
.hv-carou{position:relative;max-width:980px;margin:34px auto 0}
.hv-view{overflow:hidden}
.hv-track{display:flex;transition:transform .55s cubic-bezier(.4,.1,.2,1)}
.hv-slide{flex:0 0 100%;min-width:100%;padding:6px 8px}
.hv-dots{display:flex;gap:10px;justify-content:center;margin-top:34px}
.hv-dot{width:9px;height:9px;border-radius:50%;background:rgba(13,45,82,.18);border:none;padding:0;cursor:pointer;transition:all .25s}
.hv-dot:hover{background:rgba(13,45,82,.35)}
.hv-dot.on{background:var(--blue);width:28px;border-radius:100px}
.hv-carou .hp-tarrow svg{width:19px;height:19px}

/* why-we-stay points, two across */
.hv-why{display:grid;grid-template-columns:1fr 1fr;gap:10px 56px;max-width:1000px;margin:14px auto 0;text-align:left}

/* why-we-stay: larger, sharper type and plain stroked icons */
.hv-why{gap:26px 60px;margin-top:34px}
.hv-why .hp-pt{margin-top:0;gap:18px;align-items:flex-start}
.hv-why .hp-pt .ic{width:auto;height:auto;background:none;border-radius:0;color:var(--blue);margin-top:3px}
.hv-why .hp-pt.gr .ic{background:none;color:var(--blue)}
.hv-why .hp-pt .ic svg{width:27px;height:27px;stroke-width:1.5}
.hv-why .hp-pt h4{font-size:20px;letter-spacing:-.022em;color:var(--navy);margin-bottom:7px}
.hv-why .hp-pt p{font-size:15.5px;line-height:1.62;color:#41506b}
.hv-why+*{margin-top:0}

/* evenly spaced ring tags */
.hv-rings7{width:660px}
.hv-rings7 .hp-rlabel{transform:translate(-50%,-50%)}

/* single padlock at the core */
.hv-rings7 .core-lock{position:absolute;left:50%;top:280px;transform:translate(-50%,-50%)}
.hv-rings7 .core-lock svg{display:block;width:132px;height:132px;filter:drop-shadow(0 8px 18px rgba(13,45,82,.22))}

/* 4-step timeline: normal-speed sweep (~8s), then 10s hold fully lit */
.pJ .proc4 .p14-line i{animation:pJgrow4 18s linear infinite}
.pJ .proc4 .p14-stop:nth-child(1) .p14-card{animation:pJq1 18s linear infinite}
.pJ .proc4 .p14-stop:nth-child(2) .p14-card{animation:pJq2 18s linear infinite}
.pJ .proc4 .p14-stop:nth-child(3) .p14-card{animation:pJq3 18s linear infinite}
.pJ .proc4 .p14-stop:nth-child(4) .p14-card{animation:pJq4 18s linear infinite}
@keyframes pJgrow4{0%{transform:scaleX(0)}44%,100%{transform:scaleX(1)}}
@keyframes pJq1{0%,2%{opacity:.32}6%,98%{opacity:1}100%{opacity:.32}}
@keyframes pJq2{0%,13%{opacity:.32}17%,98%{opacity:1}100%{opacity:.32}}
@keyframes pJq3{0%,28%{opacity:.32}32%,98%{opacity:1}100%{opacity:.32}}
@keyframes pJq4{0%,42%{opacity:.32}46%,98%{opacity:1}100%{opacity:.32}}

/* bare stroked icons in the security section too */
.hptight .hp-2col .hp-pt .ic,.hv-why .hp-pt .ic{width:auto;height:auto;background:none;border-radius:0;color:var(--blue);margin-top:3px}
.hptight .hp-2col .hp-pt.gr .ic{background:none;color:var(--blue)}
.hptight .hp-2col .hp-pt .ic svg{width:27px;height:27px;stroke-width:1.5}
.hptight .hp-2col .hp-pt{gap:18px}

/* centre the rotating hero line */
.hptight .p14-rot{text-align:center}

/* 14-word rotation (one word removed) */
.hptight .p14-rot span{animation:rot14 35s infinite}
.hptight .p14-rot span:nth-child(1){animation-delay:0s}.hptight .p14-rot span:nth-child(2){animation-delay:2.5s}.hptight .p14-rot span:nth-child(3){animation-delay:5s}.hptight .p14-rot span:nth-child(4){animation-delay:7.5s}.hptight .p14-rot span:nth-child(5){animation-delay:10s}.hptight .p14-rot span:nth-child(6){animation-delay:12.5s}.hptight .p14-rot span:nth-child(7){animation-delay:15s}.hptight .p14-rot span:nth-child(8){animation-delay:17.5s}.hptight .p14-rot span:nth-child(9){animation-delay:20s}.hptight .p14-rot span:nth-child(10){animation-delay:22.5s}.hptight .p14-rot span:nth-child(11){animation-delay:25s}.hptight .p14-rot span:nth-child(12){animation-delay:27.5s}.hptight .p14-rot span:nth-child(13){animation-delay:30s}.hptight .p14-rot span:nth-child(14){animation-delay:32.5s}
@keyframes rot14{0%{opacity:0;transform:translateY(26px)}1.07%,6.1%{opacity:1;transform:translateY(0)}7.5%,100%{opacity:0;transform:translateY(-26px)}}

/* rotating word sizes to the active word so the H1 stays centred */
.hptight .p14-rot{transition:width .38s cubic-bezier(.4,.1,.2,1);text-align:left}
.hptight .p14-rot span{width:max-content;justify-self:start}

/* "Consider IT" stays put: the rotating box is a fixed width, words left-aligned inside it */
.hptight .p14-rot.fixedw{width:auto;transition:none;text-align:left}
.hptight .p14-rot.fixedw span{width:max-content;justify-self:start}

/* seven service boxes: last one centres in the trailing row */
.hv-svcbig>.hv-box:nth-child(7):last-child{grid-column:2}

/* nine boxes, three across, equal height rows */
.hv-svcbig.nine9{grid-template-columns:repeat(3,1fr)}
.hv-svcbig.nine9 .hv-box{padding:28px 26px;display:flex;flex-direction:column}
.hv-svcbig.nine9 .hv-box h3{font-size:20px;margin-bottom:10px}
.hv-svcbig.nine9 .hv-box p{font-size:14.5px;line-height:1.62;margin-bottom:16px}
.hv-svcbig.nine9 .hv-box a{margin-top:auto}

/* light footer, readable: darken text to clear AA on the pale gradient */
.hptight .p14-ft{color:#3d4e63}
.hptight .pf-desc,.hptight .pf-info,.hptight .pf-links a{color:#3d4e63}
.hptight .pf-copy,.hptight .pf-legal a{color:#2f4058}
