/*
Theme Name: JS HIAB Services
Theme URI: https://jshiabservices.live.co.uk
Author: JS HIAB Services
Description: Pixel-perfect one-page landing theme for JS HIAB Services — Lorry Loader & HIAB Driver Hire. Fully editable via Appearance > Customize.
Version: 1.2.2
License: GPL-2.0-or-later
Text Domain: js-hiab
Tags: one-page, business, custom-logo, custom-menu, custom-colors, featured-images
*/

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter','Helvetica Neue',Arial,sans-serif;color:#1a1a1a;background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== HEADER ===== */
.site-header{background:#fff;padding:18px 0;border-bottom:1px solid #f0f0f0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:62px;height:62px;background:#e02424;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:30px;border-radius:8px}
.brand-logo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.brand-text .brand-title{font-size:22px;font-weight:800;letter-spacing:.5px;color:#111;line-height:1}
.brand-text .brand-sub{font-size:11px;letter-spacing:2px;color:#555;margin-top:4px;font-weight:600}
.primary-nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.primary-nav a{font-size:15px;font-weight:600;color:#222;padding:6px 0;position:relative}
.primary-nav .current-menu-item > a,.primary-nav a:hover{color:#e02424}
.primary-nav .current-menu-item > a::after,.primary-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#e02424}
.header-cta{background:#e02424;color:#fff;padding:14px 22px;border-radius:8px;font-weight:700;display:inline-flex;align-items:center;gap:10px;font-size:15px}
.header-cta:hover{background:#c41d1d}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;background:#fff}
.hero-grid{display:grid;grid-template-columns:1.1fr 1.6fr 1fr;gap:0;align-items:stretch;min-height:560px}
.hero-left{padding:40px 30px 40px 20px;background:#fff;position:relative;z-index:2}
.hero-kicker{color:#e02424;font-size:12px;font-weight:800;letter-spacing:2px;margin-bottom:14px}
.hero h1{font-size:44px;line-height:1.05;margin:0 0 18px;font-weight:900;letter-spacing:-.5px}
.hero h1 .red{color:#e02424;display:block}
.hero h1 .black{color:#111;display:block}
.hero-divider{width:60px;height:3px;background:#e02424;margin:14px 0 18px}
.hero p{font-size:14px;color:#444;margin:0 0 14px;max-width:340px}
.hero-buttons{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;border:2px solid transparent;transition:all .2s}
.btn-primary{background:#e02424;color:#fff;border-color:#e02424}
.btn-primary:hover{background:#c41d1d}
.btn-outline{background:#fff;color:#111;border-color:#111}
.btn-outline:hover{background:#111;color:#fff}

.hero-image{position:relative}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-image::before{content:"";position:absolute;left:0;top:0;bottom:0;width:35%;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.85) 40%,rgba(255,255,255,0) 100%);z-index:1;pointer-events:none}

.hero-right{background:#0a0a0a;color:#fff;padding:30px 24px}
.hero-right h3{font-size:14px;font-weight:800;letter-spacing:1.5px;margin:0 0 10px}
.hero-right .accent{width:40px;height:3px;background:#e02424;margin-bottom:14px}
.hero-right p.lead{font-size:13px;color:#cfcfcf;margin:0 0 22px;line-height:1.6}
.contact-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.contact-icon{width:36px;height:36px;border-radius:50%;background:#e02424;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:14px}
.contact-icon.wa{background:#25D366}
.contact-meta .label{font-size:12px;color:#bbb;font-weight:700;letter-spacing:.5px}
.contact-meta .value{font-size:14px;font-weight:600;color:#fff;display:block;margin-top:2px}
.contact-meta .value a{color:#fff}
.why{margin-top:24px;border-top:1px solid #222;padding-top:18px}
.why h4{font-size:14px;font-weight:800;letter-spacing:1.5px;margin:0 0 10px}
.why-list{list-style:none;padding:0;margin:0}
.why-list li{display:flex;gap:10px;margin-bottom:12px;font-size:13px;color:#ddd;line-height:1.5}
.why-list li::before{content:"\2713";color:#fff;background:#e02424;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:2px}
.why-list strong{color:#fff}

/* ===== TRUST STRIP ===== */
.trust-strip{background:#0a0a0a;color:#fff;padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust-item{display:flex;gap:14px;align-items:flex-start;padding:0 22px;border-right:1px solid #222}
.trust-item:last-child{border-right:none}
.trust-icon{width:48px;height:48px;border-radius:50%;background:transparent;border:2px solid #e02424;color:#e02424;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.trust-item h5{margin:0 0 4px;font-size:14px;font-weight:800;letter-spacing:1px}
.trust-item p{margin:0;font-size:13px;color:#bbb;line-height:1.4}

/* ===== 3-COL SECTION ===== */
.three-col{padding:40px 0;background:#fff}
.three-col-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:30px}
.col-card h3{color:#e02424;font-size:15px;font-weight:800;letter-spacing:1.5px;margin:0 0 8px}
.col-card .col-divider{width:50px;height:3px;background:#e02424;margin-bottom:18px}
.svc-item,.book-item{display:flex;gap:12px;margin-bottom:18px}
.svc-bullet{color:#e02424;font-size:18px;flex-shrink:0;line-height:1.2}
.book-num{width:24px;height:24px;border-radius:50%;background:#e02424;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-item h4,.book-item h4{margin:0 0 4px;font-size:14px;font-weight:700;color:#111}
.svc-item p,.book-item p{margin:0;font-size:13px;color:#555;line-height:1.5}

.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.cc-card{border:1px solid #e5e5e5;border-radius:8px;padding:14px 10px;text-align:center;font-size:11px}
.cc-card .cc-icon{width:32px;height:32px;border-radius:50%;background:#e02424;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:13px}
.cc-card .cc-icon.wa{background:#25D366}
.cc-card .cc-label{font-weight:700;color:#111;font-size:11px;margin-bottom:4px}
.cc-card .cc-value{color:#555;font-size:11px;word-break:break-word}

.coverage-box{background:#0a0a0a;color:#fff;border-radius:10px;padding:18px;margin-top:10px}
.coverage-box h3{margin:0 0 12px;font-size:14px;font-weight:800;letter-spacing:1.5px}
.coverage-box img{border-radius:6px;margin-top:8px}

.badges-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
.badge-card{border:1px solid #e5e5e5;border-radius:8px;padding:12px;display:flex;align-items:center;gap:10px;font-size:11px}
.badge-card .b-icon{width:28px;height:28px;border-radius:50%;border:2px solid #e02424;color:#e02424;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.badge-card .b-text{font-weight:800;color:#111;letter-spacing:.5px;line-height:1.2}

/* ===== BOTTOM TRUST STRIP ===== */
.bottom-strip{background:#0a0a0a;color:#fff;padding:24px 0}
.bottom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:center}
.bottom-item{display:flex;gap:14px;align-items:center;padding:0 22px;border-right:1px solid #222}
.bottom-item:last-child{border-right:none}
.bottom-item .b-img{height:50px;width:auto;background:#fff;padding:4px;border-radius:6px}
.bottom-item h5{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:1px}
.bottom-item p{margin:0;font-size:12px;color:#bbb}

/* ===== FOOTER ===== */
.site-footer{background:#fff;padding:0;border-top:1px solid #eee}
.footer-main{background:#0a0a0a;color:#fff;padding:22px 0}
.footer-main .container{display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand .brand-logo{width:48px;height:48px;font-size:22px}
.footer-meta{display:flex;flex-wrap:wrap;gap:24px;font-size:13px;color:#ddd;align-items:center}
.footer-meta .fm-item{display:flex;align-items:center;gap:8px}
.footer-meta .fm-ic{width:26px;height:26px;border-radius:50%;background:#e02424;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.footer-bottom{background:#fff;color:#666;padding:14px 0;font-size:12px}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
.footer-links a{margin-left:18px;color:#666}
.footer-links a:hover{color:#e02424}
.payments-row{display:flex;align-items:center;gap:14px}
.payments-row img{height:28px;width:auto}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
 .hero-grid{grid-template-columns:1fr;min-height:auto}
 .hero-image{min-height:300px}
 .three-col-grid{grid-template-columns:1fr}
 .trust-grid,.bottom-grid{grid-template-columns:1fr 1fr}
 .trust-item,.bottom-item{border-right:none;border-bottom:1px solid #222;padding-bottom:14px;margin-bottom:14px}
 .contact-cards,.badges-row{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
 .primary-nav{display:none}
 .hero h1{font-size:32px}
 .trust-grid,.bottom-grid,.contact-cards,.badges-row{grid-template-columns:1fr}
}

/* ===== v1.2.1: 3 accreditation placements, clickable map ===== */
.bottom-grid.bottom-grid--3{grid-template-columns:repeat(3,1fr)}
.bottom-item--link{color:inherit;text-decoration:none;transition:transform .2s ease, background .2s ease}
.bottom-item--link:hover{background:#141414;transform:translateY(-1px)}
.bottom-item .b-img{height:60px;width:auto;background:#fff;padding:6px;border-radius:6px;object-fit:contain}

/* Coverage map: hover hint + click to expand */
.coverage-box .coverage-map-trigger{position:relative;display:block;border-radius:6px;overflow:hidden;cursor:zoom-in}
.coverage-box .coverage-map-trigger img{display:block;width:100%;height:auto;border-radius:6px;transition:transform .35s ease}
.coverage-box .coverage-map-trigger:hover img,.coverage-box .coverage-map-trigger:focus img{transform:scale(1.04)}
.coverage-map-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(224,36,36,.92);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .2s ease;pointer-events:none}
.coverage-box .coverage-map-trigger:hover .coverage-map-hint,.coverage-box .coverage-map-trigger:focus .coverage-map-hint{opacity:1}

/* Lightbox */
.jsh-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:99999;padding:24px}
.jsh-lightbox.is-open{display:flex}
.jsh-lightbox__img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.jsh-lightbox__close{position:absolute;top:18px;right:22px;background:#e02424;border:none;color:#fff;width:42px;height:42px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.jsh-lightbox__close:hover{background:#c41d1d}

@media (max-width:1024px){
 .bottom-grid.bottom-grid--3{grid-template-columns:1fr}
}