/*
Theme Name: ERS Cargo Child
Theme URI: https://erscargo.co.za/
Description: Premium custom WordPress child theme for East Rand Secure Cargo.
Author: Sandow Alliance
Template: astra
Version: 6.0.0
Text Domain: erscargo-child
*/

:root{
  --ers-red:#E30613;
  --ers-black:#202020;
  --ers-dark:#111111;
  --ers-light:#F4F4F4;
  --ers-grey:#777777;
  --ers-white:#FFFFFF;
  --ers-shadow:0 18px 45px rgba(0,0,0,.12);
  --ers-border:#e5e5e5;
  --ers-container:1420px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Montserrat',Arial,sans-serif;color:var(--ers-black);background:#fff;font-size:17px;line-height:1.65;overflow-x:hidden}
body.admin-bar .ers-site-header{top:32px}
img{max-width:100%;height:auto}
a{color:inherit}
.ers-container{max-width:var(--ers-container);margin:0 auto;padding:0 34px}
.ers-red{color:var(--ers-red)}
.ers-kicker{position:relative;margin:0 0 16px;padding-left:18px;color:var(--ers-red);font-weight:900;text-transform:uppercase;letter-spacing:4px;font-size:15px;line-height:1.55}
.ers-kicker:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:var(--ers-red)}
h1,h2,h3,h4,.ers-title,.ers-nav a,.ers-btn{font-family:'Oswald','Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:1.1px}
.ers-title{font-size:clamp(46px,5vw,74px);margin:0 0 23px;color:#111;line-height:.98;font-weight:900}
.ers-lead{font-size:20px;line-height:1.75;max-width:780px;margin:0 0 28px;color:#2b2b2b}
.ers-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:17px 34px;border:none;background:var(--ers-red);color:#fff!important;text-decoration:none;font-weight:900;font-size:17px;line-height:1;transition:.25s ease;box-shadow:none;cursor:pointer}
.ers-btn:hover{background:var(--ers-black);transform:translateY(-2px)}
.ers-btn.ers-btn-dark{background:var(--ers-black)}.ers-btn.ers-btn-dark:hover{background:var(--ers-red)}

/* Header */
.ers-topbar{background:var(--ers-black);color:#fff;font-size:14px}
.ers-topbar .ers-container{height:40px;display:flex;align-items:center;justify-content:flex-end;gap:34px}
.ers-topbar strong{color:var(--ers-red);margin-right:6px}
.ers-site-header{position:sticky;top:0;z-index:999;background:#fff;border-bottom:5px solid var(--ers-red);box-shadow:0 6px 30px rgba(0,0,0,.06)}
.ers-header-inner{height:124px;display:flex;align-items:center;justify-content:space-between;gap:35px}
.ers-logo{display:flex;align-items:center}
.ers-logo img{width:245px;max-height:104px;object-fit:contain;display:block}
.ers-nav{display:flex;align-items:center;gap:31px}
.ers-nav a:not(.ers-btn){text-decoration:none;color:#111;font-size:17px;font-weight:900;line-height:1}
.ers-nav a:hover,.ers-nav a.active{color:var(--ers-red)}
.ers-menu-toggle{display:none;background:#111;color:#fff;border:none;width:48px;height:48px;font-size:26px;cursor:pointer}

/* Hero */
.ers-hero{min-height:720px;position:relative;overflow:hidden;background:#fff;display:flex;align-items:center}
.ers-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 34%,rgba(255,255,255,.26) 64%,rgba(255,255,255,.9) 100%);z-index:1}
.ers-hero:after{content:"";position:absolute;right:-4%;top:0;bottom:0;width:28%;background:var(--ers-red);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);z-index:2}
.ers-hero-image{position:absolute;right:16%;top:0;width:55%;height:100%;background:url('assets/images/hero-cargo.jpg') center/cover no-repeat;clip-path:polygon(11% 0,100% 0,89% 100%,0 100%);z-index:0;filter:saturate(1.08) contrast(1.04)}
.ers-hero .ers-container{position:relative;z-index:3;width:100%}
.ers-hero-content{width:44%;padding:80px 0}
.ers-hero h1{margin:0 0 24px;color:#111;font-size:clamp(64px,8vw,110px);line-height:.91;font-weight:900}
.ers-hero .ers-lead{max-width:560px}.ers-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Sections */
.ers-section{padding:92px 0;position:relative}
.ers-section-light{background:var(--ers-light)}
.ers-about-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:66px;align-items:center}
.ers-about-card{background:#fff;box-shadow:var(--ers-shadow);border:1px solid var(--ers-border);transform:rotate(-2deg);padding:18px;position:relative}
.ers-about-card img{width:100%;height:390px;object-fit:cover}
.ers-about-card:after{content:"";position:absolute;left:18px;right:18px;bottom:18px;height:54px;background:linear-gradient(135deg,var(--ers-black) 0%,var(--ers-black) 72%,var(--ers-red) 72%)}
.ers-industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.ers-industry-card{position:relative;height:170px;overflow:hidden;box-shadow:var(--ers-shadow);background:#111}
.ers-industry-card img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.ers-industry-card:hover img{transform:scale(1.07)}
.ers-industry-card span{position:absolute;left:0;right:0;bottom:0;background:rgba(17,17,17,.92);color:#fff;font-family:'Oswald';font-size:25px;font-weight:900;text-align:center;text-transform:uppercase;padding:13px;line-height:1}

/* Products - compact brochure style */
.ers-product-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;margin-top:34px}
.ers-product-card{background:#fff;border:1px solid var(--ers-border);box-shadow:0 8px 22px rgba(0,0,0,.07);transition:.25s ease;overflow:hidden;position:relative}
.ers-product-card:hover{transform:translateY(-5px);box-shadow:var(--ers-shadow)}
.ers-product-img{height:142px;display:flex;align-items:center;justify-content:center;background:#fff;padding:8px}
.ers-product-img img{width:100%;height:100%;object-fit:contain;display:block}
.ers-product-body{padding:0}
.ers-product-card h3{margin:0;background:var(--ers-red);color:#fff;text-align:center;font-size:15px;line-height:1.05;font-weight:900;padding:13px 5px;min-height:52px;display:flex;align-items:center;justify-content:center}
.ers-product-card p,.ers-card-link{display:none}

/* Why */
.ers-why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:34px}
.ers-why-box{background:#fff;border:1px solid var(--ers-border);border-bottom:7px solid var(--ers-red);padding:27px 19px;min-height:218px;box-shadow:0 10px 28px rgba(0,0,0,.05);transition:.25s ease}
.ers-why-box:hover{transform:translateY(-5px);box-shadow:var(--ers-shadow)}
.ers-why-box img{width:62px;height:62px;margin-bottom:18px}
.ers-why-box h3{font-size:24px;line-height:1.06;margin:0 0 10px;color:#111;font-weight:900}
.ers-why-box p{font-size:16px;line-height:1.48;margin:0;color:#555}

/* Commitment */
.ers-commitment{background:linear-gradient(90deg,#111,#202020);color:#fff;overflow:hidden;padding:82px 0;position:relative}
.ers-commitment:before{content:"";position:absolute;left:0;bottom:0;width:58%;height:46px;background:var(--ers-red);clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}
.ers-commitment h2{text-align:center;font-size:clamp(42px,5vw,78px);line-height:1;margin:0;color:#fff;font-weight:900}

/* Contact */
.ers-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.ers-contact-box{background:var(--ers-light);padding:42px;border-left:6px solid var(--ers-red)}
.ers-contact-box p{font-size:18px;margin:0 0 22px}.ers-contact-box strong{font-weight:900}
.ers-form-card{background:var(--ers-light);padding:42px}
.ers-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ers-form-card input,.ers-form-card select,.ers-form-card textarea{width:100%;height:52px;border:1px solid #cfcfcf;background:#fff;padding:14px 17px;font-family:'Montserrat';font-size:16px;margin-bottom:15px;color:#222}
.ers-form-card textarea{height:170px;resize:vertical}.ers-form-card .full{grid-column:1/-1}
.ers-form-note{font-size:14px;color:#666;margin:12px 0 0}

/* Footer */
.ers-footer{background:var(--ers-black);color:#fff;padding:70px 0 28px}
.ers-footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1.1fr 1.25fr;gap:52px;margin-bottom:42px}
.ers-footer-logo{display:inline-block;background:#fff;padding:10px 14px;margin-bottom:18px}
.ers-footer-logo img{width:230px;display:block;height:auto}
.ers-footer p{font-size:16px;line-height:1.7;color:#e8e8e8;margin:0}
.ers-footer h3{font-size:32px;line-height:1;margin:0 0 22px;color:#fff;font-weight:900}
.ers-footer ul{list-style:none;padding:0;margin:0}
.ers-footer li{margin-bottom:10px;font-size:18px;line-height:1.35;color:#f3f3f3}
.ers-footer a{text-decoration:none;color:#f3f3f3}
.ers-footer a:hover{color:var(--ers-red)}
.ers-footer-contact li{display:flex;gap:10px;align-items:flex-start}
.ers-social{display:flex;gap:12px;margin-top:22px}
.ers-social a{width:38px;height:38px;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-weight:900;text-decoration:none}
.ers-social a:hover{background:var(--ers-red);color:#fff}
.ers-social img{width:23px;height:23px;display:block}
.ers-footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;text-align:center;font-size:14px;color:#ddd}
.ers-float-whatsapp,.ers-back-top{position:fixed;right:26px;width:54px;height:54px;border-radius:50%;z-index:990;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.ers-float-whatsapp{bottom:94px;background:#25D366}
.ers-float-whatsapp img{width:32px;height:32px;display:block}
.ers-back-top{bottom:28px;background:var(--ers-red);font-size:24px}

/* Pages */
.ers-page-hero{padding:92px 0;background:var(--ers-light);border-bottom:5px solid var(--ers-red)}
.ers-page-content{padding:70px 0}.screen-reader-text{position:absolute;left:-9999px}

/* Responsive */
@media(max-width:1360px){.ers-product-grid{grid-template-columns:repeat(6,1fr)}.ers-product-img{height:155px}.ers-product-card h3{font-size:15px}}
@media(max-width:1180px){.ers-why-grid{grid-template-columns:repeat(3,1fr)}.ers-header-inner{gap:20px}.ers-nav{gap:22px}.ers-logo img{width:220px}.ers-product-grid{grid-template-columns:repeat(3,1fr)}.ers-product-img{height:210px}.ers-product-card h3{font-size:19px}}
@media(max-width:960px){body.admin-bar .ers-site-header{top:46px}.ers-topbar .ers-container{height:auto;min-height:40px;justify-content:center;flex-wrap:wrap;gap:10px 22px;padding-top:8px;padding-bottom:8px}.ers-header-inner{height:96px}.ers-menu-toggle{display:block}.ers-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:5px solid var(--ers-red);flex-direction:column;align-items:flex-start;padding:24px 28px;gap:18px;display:none}.ers-nav.open{display:flex}.ers-nav .ers-btn{width:100%}.ers-hero{min-height:auto;padding:0}.ers-hero:before{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.98))}.ers-hero:after{width:30%;right:-30px}.ers-hero-image{position:relative;right:auto;top:auto;width:100%;height:320px;clip-path:none;margin-top:0}.ers-hero .ers-container{display:flex;flex-direction:column-reverse;padding:0}.ers-hero-content{width:100%;padding:55px 28px}.ers-about-grid,.ers-contact-grid{grid-template-columns:1fr;gap:35px}.ers-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.ers-container{padding:0 20px}.ers-logo img{width:185px;max-height:84px}.ers-header-inner{height:90px}.ers-hero h1{font-size:58px}.ers-title{font-size:42px}.ers-section{padding:62px 0}.ers-product-grid,.ers-why-grid,.ers-industry-grid,.ers-footer-grid,.ers-form-grid{grid-template-columns:1fr}.ers-product-img{height:240px}.ers-product-card h3{font-size:20px}.ers-why-box h3{font-size:24px}.ers-footer h3{font-size:30px}.ers-footer li{font-size:18px}.ers-float-whatsapp,.ers-back-top{right:18px;width:50px;height:50px}.ers-float-whatsapp img{width:30px;height:30px}}

/* =========================================================
   ERS Cargo Mobile Upgrade v6
   Desktop remains unchanged. These rules only apply below 1024px.
   ========================================================= */
@media (max-width: 1024px) {
  body { font-size: 16px; }
  .ers-container { padding-left: 26px; padding-right: 26px; }
  .ers-topbar .ers-container { justify-content: center; gap: 12px 22px; }
  .ers-header-inner { height: 104px; }
  .ers-logo img { width: 205px; max-height: 92px; }
  .ers-nav { gap: 20px; }
  .ers-nav a:not(.ers-btn) { font-size: 15px; }
  .ers-nav .ers-btn { min-height: 48px; padding: 15px 26px; font-size: 15px; }
  .ers-product-grid { grid-template-columns: repeat(3, 1fr); }
  .ers-why-grid { grid-template-columns: repeat(2, 1fr); }
  .ers-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  body.admin-bar .ers-site-header { top: 46px; }
  .ers-topbar { display: none; }
  .ers-site-header { position: sticky; top: 0; }
  .ers-header-inner { height: 82px; gap: 14px; }
  .ers-logo img { width: 158px; max-height: 72px; }
  .ers-menu-toggle { display: flex; align-items: center; justify-content: center; border-radius: 0; }
  .ers-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: 0;
    border-top: 1px solid #eee;
    border-bottom: 5px solid var(--ers-red);
    box-shadow: 0 18px 34px rgba(0,0,0,.13);
  }
  .ers-nav.open { display: flex; }
  .ers-nav a:not(.ers-btn) {
    display: block;
    padding: 17px 28px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
  }
  .ers-nav .ers-btn {
    width: auto;
    margin: 18px 28px 22px;
    min-height: 52px;
  }

  .ers-hero {
    min-height: 680px;
    padding: 0;
    display: block;
    background: #fff;
  }
  .ers-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    right: auto;
    top: auto;
    clip-path: none;
    margin: 0;
    background-position: 58% center;
    opacity: 1;
  }
  .ers-hero:before {
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 46%, rgba(255,255,255,.52) 78%, rgba(255,255,255,.18) 100%);
    z-index: 1;
  }
  .ers-hero:after {
    width: 20%;
    right: -7%;
    clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
  }
  .ers-hero .ers-container {
    display: block;
    padding-left: 28px;
    padding-right: 28px;
  }
  .ers-hero-content {
    width: 72%;
    padding: 86px 0 76px;
  }
  .ers-hero h1 {
    font-size: clamp(58px, 12vw, 84px);
    line-height: .9;
  }
  .ers-hero .ers-lead { max-width: 520px; font-size: 18px; line-height: 1.65; }
  .ers-actions { gap: 12px; }
  .ers-btn { min-height: 50px; padding: 15px 24px; font-size: 15px; }

  .ers-section { padding: 72px 0; }
  .ers-title { font-size: clamp(42px, 8vw, 60px); }
  .ers-about-grid, .ers-contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .ers-about-card { transform: rotate(0deg); }
  .ers-about-card img { height: 300px; }
  .ers-industry-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ers-industry-card { height: 142px; }
  .ers-industry-card span { font-size: 20px; padding: 10px; }
  .ers-product-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ers-product-img { height: 150px; }
  .ers-product-card h3 { font-size: 16px; min-height: 54px; }
  .ers-why-grid { grid-template-columns: repeat(2, 1fr); }
  .ers-contact-box, .ers-form-card { padding: 32px; }
}

@media (max-width: 680px) {
  .ers-container { padding-left: 20px; padding-right: 20px; }
  .ers-header-inner { height: 76px; }
  .ers-logo img { width: 142px; max-height: 66px; }
  .ers-menu-toggle { width: 44px; height: 44px; font-size: 24px; }

  .ers-hero { min-height: 620px; }
  .ers-hero-image { background-position: 62% center; }
  .ers-hero:before { background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.95) 57%, rgba(255,255,255,.6) 100%); }
  .ers-hero:after { width: 18%; right: -9%; }
  .ers-hero .ers-container { padding-left: 22px; padding-right: 22px; }
  .ers-hero-content { width: 86%; padding: 68px 0 64px; }
  .ers-kicker { font-size: 12px; letter-spacing: 3px; margin-bottom: 13px; }
  .ers-hero h1 { font-size: clamp(52px, 15vw, 68px); }
  .ers-hero .ers-lead { font-size: 16px; line-height: 1.58; max-width: 92%; }
  .ers-actions { flex-direction: column; align-items: flex-start; }
  .ers-actions .ers-btn { width: auto; min-width: 178px; }

  .ers-section { padding: 58px 0; }
  .ers-title { font-size: 40px; line-height: 1; }
  .ers-lead { font-size: 16px; line-height: 1.65; }
  .ers-about-card img { height: 250px; }
  .ers-industry-grid { grid-template-columns: 1fr; }
  .ers-industry-card { height: 185px; }
  .ers-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ers-product-img { height: 145px; padding: 10px; }
  .ers-product-card h3 { font-size: 14px; min-height: 50px; padding: 11px 5px; }
  .ers-why-grid { grid-template-columns: 1fr; gap: 16px; }
  .ers-why-box { min-height: auto; padding: 24px 20px; }
  .ers-why-box h3 { font-size: 25px; }
  .ers-commitment { padding: 58px 0; }
  .ers-commitment h2 { font-size: 42px; }
  .ers-form-grid { grid-template-columns: 1fr; }
  .ers-contact-box, .ers-form-card { padding: 26px 22px; }
  .ers-form-card input, .ers-form-card select, .ers-form-card textarea { font-size: 15px; }
  .ers-footer { padding: 54px 0 24px; }
  .ers-footer-grid { grid-template-columns: 1fr; gap: 34px; text-align: left; }
  .ers-footer-logo img { width: 190px; }
  .ers-footer h3 { font-size: 28px; margin-bottom: 16px; }
  .ers-footer li { font-size: 16px; margin-bottom: 8px; }
  .ers-social a { width: 36px; height: 36px; }
  .ers-float-whatsapp, .ers-back-top { right: 16px; width: 48px; height: 48px; }
  .ers-float-whatsapp { bottom: 82px; }
  .ers-back-top { bottom: 22px; }
}

@media (max-width: 420px) {
  .ers-hero { min-height: 590px; }
  .ers-hero-content { width: 92%; padding-top: 58px; }
  .ers-hero h1 { font-size: 48px; }
  .ers-hero .ers-lead { font-size: 15px; }
  .ers-title { font-size: 34px; }
  .ers-product-grid { grid-template-columns: 1fr; }
  .ers-product-img { height: 210px; }
  .ers-product-card h3 { font-size: 18px; }
  .ers-commitment h2 { font-size: 34px; }
}