*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#092f27;background:#fff}.wrap{width:min(1260px,92%);margin:auto}header{height:74px;background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 5px #0001}.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{width:205px;height:62px;object-fit:contain}.nav nav{display:flex;gap:30px}.nav nav a{text-decoration:none;color:#111;font-size:14px;font-weight:700}.nav nav .active{color:#f47a00;border-bottom:2px solid #f47a00;padding-bottom:8px}.head-actions{display:flex;gap:12px}.call,.wa{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;text-decoration:none;color:#fff;border-radius:8px;padding:8px 18px;min-width:145px}.call{background:#07813d}.wa{background:#ff7600}.call>b,.wa>b{font-size:16px}.call small,.wa small{grid-column:2}.hero{height:405px;position:relative;overflow:hidden;background:#edf7f2}.hero-photo{position:absolute;right:0;top:0;width:66%;height:100%;background:url("../images/hero-sand.jpg") center/cover no-repeat}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.88) 43%,rgba(255,255,255,0) 67%)}.hero-content{position:relative;z-index:2;padding-top:32px}.eyebrow{color:#08783d;font-weight:800;letter-spacing:.04em}.hero h1{font-size:43px;line-height:.96;margin:8px 0 14px;letter-spacing:-1px}.hero-content>p:not(.eyebrow){max-width:480px;color:#222;font-size:15px}.hero-buttons{display:flex;gap:18px;margin:20px 0}.big{padding:12px 25px}.trust{display:flex;gap:40px;margin-top:20px;color:#111}.trust span,.benefits span{display:grid;grid-template-columns:auto 1fr;column-gap:8px;font-size:13px}.trust small,.benefits small{grid-column:2;color:#333}.products{padding:20px 0 16px}.product-layout{display:grid;grid-template-columns:2.1fr .9fr;gap:26px}.product-area h2,.quote h2{text-align:center;margin:0;font-size:28px}.center{text-align:center;font-size:12px}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.product-grid article{display:grid;grid-template-columns:180px 1fr;gap:18px}.product-grid img{width:180px;height:210px;object-fit:cover;border-radius:8px}.product-grid h3{font-size:16px;margin:8px 0}.product-grid p,.product-grid li{font-size:12px;color:#222}.product-grid ul{padding-left:18px}.product-grid li::marker{color:#07813d}.enquire{display:inline-block;border:1px solid #07813d;border-radius:20px;padding:8px 18px;text-decoration:none;color:#08783d;font-weight:800;font-size:12px}.quote{background:#edf8ef;border-radius:12px;padding:18px}.quote>p{text-align:center;font-size:12px}.quote form{display:grid;gap:8px}.quote input,.quote select,.quote textarea{width:100%;padding:10px;border:1px solid #cfdad2;border-radius:5px;font:inherit;font-size:12px;background:#fff}.quote textarea{height:38px;resize:none}.quote button{background:#ff7600;color:#fff;border:0;border-radius:6px;padding:12px;font-weight:800;font-size:15px}.quote form small{text-align:center}.benefits{background:#f6f6f6;padding:12px 0}.benefits-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.benefits span{font-size:13px}.about-contact{padding:22px 0}.lower{display:grid;grid-template-columns:1fr 1.15fr;gap:65px}.lower h2{font-size:20px;border-bottom:3px solid #16824a;width:max-content;padding-bottom:6px}.lower p{font-size:13px;color:#333}.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.mini span{font-size:12px}.location-row{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.location-row iframe{width:100%;height:150px;border:0}.details{font-size:12px}.details p{font-size:11px}.foot{height:100px;display:grid;grid-template-columns:1.2fr 1.5fr 1.4fr;align-items:center;gap:25px}footer{background:#063b32;color:#fff}.foot img{width:200px;height:80px;object-fit:contain;background:#fff0}.foot nav{display:flex;justify-content:center;gap:22px}.foot nav a{color:#fff;text-decoration:none;font-size:12px}.foot p{text-align:right;font-size:11px;line-height:1.7}.floating-wa{position:fixed;right:25px;bottom:22px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#1cc85b;color:#fff;font-size:28px;text-decoration:none;z-index:70}.mobilebar{display:none}@media(max-width:850px){header{height:68px}.logo{width:155px}.nav nav,.head-actions{display:none}.hero{height:auto;min-height:650px}.hero-photo{width:100%;height:260px;top:auto;bottom:0}.hero:after{background:linear-gradient(#fff 0%,#fff 55%,rgba(255,255,255,.2) 82%)}.hero-content{padding-top:28px}.hero h1{font-size:38px}.hero-buttons{flex-direction:column;width:100%}.big{width:100%}.trust{display:grid;grid-template-columns:1fr 1fr;gap:14px}.product-layout,.product-grid,.lower,.location-row{grid-template-columns:1fr}.product-grid article{grid-template-columns:120px 1fr}.product-grid img{width:120px;height:180px}.quote{margin-top:12px}.benefits-grid{grid-template-columns:1fr 1fr}.mini{grid-template-columns:1fr 1fr}.foot{height:auto;padding:24px 0 80px;grid-template-columns:1fr}.foot nav{justify-content:flex-start;flex-wrap:wrap}.foot p{text-align:left}.floating-wa{display:none}.mobilebar{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:80}.mobilebar a{text-align:center;padding:14px;background:#07813d;color:#fff;text-decoration:none;font-weight:800}.mobilebar a:last-child{background:#ff7600}}
/* overlap-safe trust section */
.hero{height:auto!important;min-height:450px;overflow:visible;padding-bottom:24px}
.trust{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px!important;margin-top:24px!important;padding:14px 0;position:relative;z-index:5;align-items:start}
.trust span{min-width:0;grid-template-columns:28px minmax(0,1fr)!important;line-height:1.3}
.trust b,.trust small{overflow-wrap:anywhere}
.products{clear:both;position:relative;z-index:1;padding-top:32px!important}
@media(max-width:1050px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{min-height:520px}}
@media(max-width:850px){.hero{min-height:740px!important}.trust{grid-template-columns:1fr 1fr!important}}
@media(max-width:480px){.hero{min-height:820px!important}.trust{grid-template-columns:1fr!important}}


/* =========================================================
   QA FIXES — desktop alignment + responsive/mobile hardening
   ========================================================= */

:root{
  --page-gutter: 32px;
  --content-max: 1500px;
}

/* One horizontal grid for header, hero, sections and footer */
.wrap{
  width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2))) !important;
  max-width: var(--content-max);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Prevent any child from widening the viewport */
html,body{max-width:100%;overflow-x:hidden}
img,svg,iframe{max-width:100%}

/* Header re-balance */
.nav{
  gap:20px !important;
}
.logo{
  flex:0 0 auto;
  max-width:210px;
}
.nav nav{
  flex:1;
  justify-content:center;
  gap:clamp(18px,2vw,34px) !important;
}
.head-actions{
  flex:0 0 auto;
}

/* Hero: wider text area and less right-heavy imagery */
.hero{
  height:auto !important;
  min-height:470px !important;
  overflow:hidden !important;
  padding:0 0 30px !important;
}
.hero-photo{
  width:56% !important;
  right:0 !important;
  left:auto !important;
}
.hero:after{
  background:linear-gradient(
    90deg,
    #fff 0%,
    #fff 36%,
    rgba(255,255,255,.94) 44%,
    rgba(255,255,255,.48) 57%,
    rgba(255,255,255,0) 72%
  ) !important;
}
.hero-content{
  padding-top:38px !important;
}
.hero-content>p:not(.eyebrow){
  max-width:560px !important;
}
.trust{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:20px !important;
  max-width:760px;
  margin-top:26px !important;
}

/* Product/quote section gets more usable width */
.products{
  padding:34px 0 30px !important;
}
.product-layout{
  grid-template-columns:minmax(0,2.2fr) minmax(320px,.8fr) !important;
  gap:34px !important;
  align-items:start;
}
.product-grid{
  gap:30px !important;
}
.product-grid article{
  grid-template-columns:minmax(150px,190px) minmax(0,1fr) !important;
}
.product-grid img{
  width:100% !important;
  max-width:190px;
}

/* Consistent lower-section alignment */
.benefits-grid{
  gap:22px !important;
}
.lower{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important;
  gap:44px !important;
}
.location-row{
  grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr) !important;
}
.foot{
  grid-template-columns:1.1fr 1.5fr 1.2fr !important;
}

/* Large laptops / small desktop */
@media (max-width:1200px){
  :root{--page-gutter:28px}
  .head-actions .call,.head-actions .wa{min-width:132px;padding:8px 12px}
  .product-layout{grid-template-columns:minmax(0,1.8fr) minmax(300px,.8fr) !important}
  .product-grid article{grid-template-columns:145px minmax(0,1fr) !important}
  .product-grid img{max-width:145px;height:190px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:600px}
  .hero{min-height:520px !important}
}

/* Tablet */
@media (max-width:900px){
  :root{--page-gutter:22px}
  .nav nav,.head-actions{display:none !important}
  .nav{justify-content:flex-start !important}
  .hero{
    min-height:720px !important;
    padding-bottom:24px !important;
  }
  .hero-photo{
    width:100% !important;
    height:270px !important;
    top:auto !important;
    bottom:0 !important;
  }
  .hero:after{
    background:linear-gradient(
      180deg,
      #fff 0%,
      #fff 55%,
      rgba(255,255,255,.88) 68%,
      rgba(255,255,255,.18) 88%
    ) !important;
  }
  .hero-content>p:not(.eyebrow){max-width:650px !important}
  .trust{
    grid-template-columns:1fr 1fr !important;
    max-width:100%;
  }
  .product-layout,.product-grid,.lower,.location-row{
    grid-template-columns:1fr !important;
  }
  .product-grid article{
    grid-template-columns:160px minmax(0,1fr) !important;
  }
  .product-grid img{
    max-width:160px;
    height:200px;
  }
  .benefits-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .foot{
    height:auto !important;
    padding:24px 0 82px !important;
    grid-template-columns:1fr !important;
  }
  .foot nav{justify-content:flex-start !important;flex-wrap:wrap}
  .foot p{text-align:left !important}
}

/* Mobile */
@media (max-width:600px){
  :root{--page-gutter:16px}
  .logo{width:155px !important;height:58px !important}
  .hero{
    min-height:800px !important;
  }
  .hero-content{padding-top:24px !important}
  .hero h1{
    font-size:clamp(32px,10vw,42px) !important;
    line-height:1.02 !important;
  }
  .hero-buttons{
    flex-direction:column !important;
    width:100%;
  }
  .hero-buttons .big{
    width:100% !important;
  }
  .trust{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
  }
  .product-grid article{
    grid-template-columns:1fr !important;
  }
  .product-grid img{
    width:100% !important;
    max-width:none !important;
    height:210px !important;
  }
  .quote{padding:16px !important}
  .benefits-grid,.mini{
    grid-template-columns:1fr 1fr !important;
  }
  .location-row iframe{height:220px !important}
}

/* Narrow phones */
@media (max-width:390px){
  :root{--page-gutter:14px}
  .hero{min-height:870px !important}
  .trust,.benefits-grid,.mini{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   DESKTOP HERO IMAGE QA FIX
   Keeps the hero photo fitted across the full hero without
   stretching, clipping into a second visual layer, or leaving
   a mismatched lower band.
   ========================================================= */
@media (min-width:901px){
  .hero{
    position:relative !important;
    min-height:470px !important;
    padding-bottom:28px !important;
    overflow:hidden !important;
    background:#eef3ef !important;
  }

  .hero-photo{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:url("../images/hero-sand.jpg") !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  .hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 24%,
      rgba(255,255,255,.90) 34%,
      rgba(255,255,255,.56) 44%,
      rgba(255,255,255,.14) 56%,
      rgba(255,255,255,0) 67%
    ) !important;
  }

  .hero-content{
    position:relative !important;
    z-index:2 !important;
  }

  .hero-content > p:not(.eyebrow){
    max-width:510px !important;
  }

  .trust{
    max-width:760px !important;
    background:rgba(255,255,255,.82);
    border-radius:10px;
    padding:12px 14px !important;
    backdrop-filter:blur(2px);
  }
}

/* Wide desktop: show more of the sand pile/conveyor composition */
@media (min-width:1500px){
  .hero-photo{
    background-position:center 46% !important;
  }
}

/* Preserve the existing tablet/mobile image treatment */
@media (max-width:900px){
  .hero-photo{
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }
}

.aggregate-visual{width:100%;max-width:190px;height:210px;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;background:linear-gradient(145deg,#666b67,#afb2ac);color:#fff;font-weight:900;letter-spacing:.06em;line-height:1.25}
@media(max-width:1200px){.aggregate-visual{max-width:145px;height:190px}}
@media(max-width:900px){.aggregate-visual{max-width:160px;height:200px}}
@media(max-width:600px){.aggregate-visual{max-width:none;height:210px}}