:root{
      --green-900:#0f3b2e;
      --green-800:#154535;
      --green-700:#1b5a44;
      --green-600:#2a7a5b;
      --cream:#f6f2eb;
      --ink:#123;
      --muted:#5b6b63;
      --gold:#d7b56d;
      --shadow: 0 10px 25px rgba(0,0,0,.10);
      --max: 1100px;
    }

    *{box-sizing:border-box}
    body{margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:#fff; line-height:1.5;}
    a{color:inherit; text-decoration:none}

    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 88px;}

    /* Top row */
    .topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:10px 0 4px;}
    .bullets{margin:0; padding:0; list-style:none; display:grid; gap:10px; font-weight:600;}
    .bullets li{display:flex; gap:10px; align-items:flex-start; font-size:16px;}
    .tick{width:22px; height:22px; flex:0 0 22px; border-radius:999px; background:rgba(215,181,109,.22); display:grid; place-items:center; margin-top:2px;}
    .tick svg{width:14px; height:14px; fill:var(--gold)}

    .badge{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px; border:1px solid #eef0ee; background:#fff;}
    .badge .mark{width:58px; height:58px; border-radius:999px; background:rgba(27,90,68,.12); display:grid; place-items:center; border:1px solid rgba(27,90,68,.18);}
    .badge .mark svg{width:34px; height:34px; fill:var(--green-700)}
    .badge .text{line-height:1.05}
    .badge .text .big{font-size:26px; font-weight:900; color:var(--green-700)}
    .badge .text .small{font-size:12px; font-weight:900; letter-spacing:.8px; color:#2c3a34}
    .license{font-size:12px; font-weight:900; color:#3b4a44; margin-top:6px}

    /* CTA */
    .cta-row{margin:16px 0 26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:999px; border:0; cursor:pointer; font-weight:900; font-size:16px; box-shadow: var(--shadow); user-select:none; transition: transform .08s ease; white-space:nowrap;}
    .btn:active{transform: translateY(1px)}
    .btn.primary{background:var(--green-900); color:#fff;}
    .btn.secondary{background:var(--green-800); color:#fff; position:relative;}
    .btn.secondary::before{content:""; width:14px; height:14px; border-radius:999px; background:var(--gold); position:absolute; left:-7px; top:50%; transform:translateY(-50%); box-shadow:0 4px 12px rgba(0,0,0,.18);}    
    .btn.ghost{background:#fff; color:var(--green-900); border:2px solid rgba(27,90,68,.25); box-shadow:none;}
    .btn svg{width:18px; height:18px; fill:currentColor}

    /* Hero */
    .hero{background:linear-gradient(180deg, rgba(27,90,68,.10), transparent); border-radius:22px; padding:20px 18px;}
    .hero h1{margin:0 0 10px; font-size:38px; text-align:center; letter-spacing:.2px;}
    .hero p{margin:0 auto; max-width:820px; text-align:center; color:#33433d; font-weight:650; font-size:17px;}

    /* Before/After */
    .ba-title{margin:18px 0 10px; text-align:center; font-size:28px; font-weight:950; color:var(--green-900)}
    .ba-sub{margin:0 0 16px; text-align:center; color:#3b4a44; font-weight:650}
    .ba-head{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:end; margin:10px 0 10px; color:var(--green-700); font-weight:950; font-size:24px; text-align:center;}
    .ba{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
    .imgcard{border-radius:18px; overflow:hidden; box-shadow: var(--shadow); background:#ddd; aspect-ratio: 16/10;}
    .imgcard img{width:100%; height:100%; object-fit:cover; display:block;}

    /* Tiles */
    .tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:16px 0 22px; padding:14px; background:#f4f5f4; border-radius:18px;}
    .tile{background:linear-gradient(180deg, var(--green-700), var(--green-900)); color:#fff; border-radius:16px; padding:16px 14px; box-shadow: var(--shadow); text-align:center; min-height:110px; display:grid; gap:6px; align-content:center;}
    .tile .icon{width:28px; height:28px; margin:0 auto 4px; border-radius:999px; background:rgba(215,181,109,.18); display:grid; place-items:center;}
    .tile .icon svg{width:16px; height:16px; fill:var(--gold)}
    .tile .t1{font-weight:950; font-size:16px}
    .tile .t2{opacity:.9; font-weight:650; font-size:13px}

    /* Sections */
    .section{background:var(--cream); border-radius:22px; padding:22px 18px; box-shadow: 0 8px 22px rgba(0,0,0,.06); margin:18px 0;}
    .section.white{background:#fff;}
    .section h2{margin:0 0 8px; font-size:30px; letter-spacing:.2px; color:var(--green-900);}
    .lead{margin:0 0 14px; color:#3b4a44; font-weight:650; font-size:17px}

    .checks{display:flex; flex-wrap:wrap; gap:14px 22px; padding:0; margin:0; list-style:none; font-weight:850; color:#2b3b35;}
    .checks li{display:flex; gap:10px; align-items:center;}
    .checks .dot{width:20px; height:20px; border-radius:999px; background:rgba(215,181,109,.24); display:grid; place-items:center;}
    .checks .dot svg{width:14px; height:14px; fill:var(--gold)}

    .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px;}
    .card{border-radius:18px; padding:14px; background:#fff; box-shadow: var(--shadow); border:1px solid rgba(20,69,53,.10);}
    .card h3{margin:0 0 6px; font-size:18px; color:var(--green-900)}
    .card p{margin:0; color:#3a4a44; font-weight:600}

    .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
    .quote{border-radius:18px; padding:14px; background: rgba(20,69,53,.82); color:#fff; box-shadow: var(--shadow); min-height:110px; display:grid; align-content:center;}

    /* Areas */
    .areas{display:grid; gap:10px; justify-items:center;}
    .area-link{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; border-radius:999px; background:#fff; border:1px solid rgba(27,90,68,.18); box-shadow: 0 6px 16px rgba(0,0,0,.06); font-weight:900; color:var(--green-900)}

    /* Contact */
    form{display:grid; gap:12px; max-width:720px; margin:0 auto;}
    input, textarea{padding:14px 12px; border-radius:14px; border:1px solid #d9dfdb; font-weight:700; font-size:15px;}
    textarea{resize:vertical}

    /* Map */
    .map{border-radius:18px; overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.06)}
    iframe{width:100%; height:420px; border:0; display:block;}

    /* Floating WhatsApp */
    .wa{position:fixed; right:18px; bottom:92px; background:#16a34a; color:#fff; padding:12px 14px; border-radius:999px; font-weight:950; box-shadow: var(--shadow); z-index:50;}

    /* Sticky mobile call bar */
    .callbar{position:fixed; left:0; right:0; bottom:0; background:var(--green-700); color:#fff; text-align:center; padding:12px 14px; font-weight:950; z-index:60; display:none;}
    .callbar a{color:#fff; font-size:18px;}

    footer{margin-top:18px; padding:18px 0 0; color:var(--muted); text-align:center; font-weight:700;}

    @media (max-width: 920px){
      .tiles{grid-template-columns:repeat(2,1fr)}
      .quotes{grid-template-columns:1fr}
      .grid3{grid-template-columns:1fr}
      .hero h1{font-size:32px}
    }
    @media (max-width: 640px){
      .topbar{flex-direction:column; align-items:stretch}
      .ba-head{grid-template-columns:1fr; gap:8px}
      .ba{grid-template-columns:1fr}
      .callbar{display:block}
      .wa{bottom:120px}
    }
  
    /* Before/after captions */
    .imgcard{position:relative}
    .imgcap{position:absolute; left:14px; top:14px; background:rgba(15, 23, 20, .72); color:#fff; padding:8px 10px; border-radius:999px; font-weight:950; font-size:14px; letter-spacing:.2px}

    /* Areas buttons */
    .area-link{width:100%; max-width:460px; justify-content:center; text-align:center; line-height:1.2}

    /* Prevent sticky elements covering content */
    body{scroll-padding-bottom:120px}

  

/* === Footer alignment fix (all pages) === */
footer, .footer {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 16px !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

footer p, footer div, footer small {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* === Nearby Areas alignment fix === */
#nearby-areas, section#nearby-areas {
  text-align: center !important;
  max-width: 980px;
  margin: 0 auto !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

#nearby-areas ul {
  display: inline-block;   /* centers the list block */
  text-align: left;        /* keeps bullets/labels neat */
  margin: 12px auto 0 auto !important;
  padding-left: 0 !important;
  list-style-position: inside;
}

#nearby-areas li {
  margin: 6px 0;
}


/* === Nearby Areas horizontal layout === */
#nearby-areas ul, .nearby-areas ul, section ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
  list-style: disc inside !important;
  padding: 0 !important;
  margin: 12px auto !important;
}

#nearby-areas li, .nearby-areas li {
  display: list-item;
}


/* === Nearby Areas spacing + WhatsApp overlap fix === */
#nearby-areas{margin-top:18px !important; padding:18px 16px 24px !important;}
#nearby-areas p{margin:0 auto 10px auto !important;}
#nearby-areas ul{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px !important;
  list-style: disc inside !important;
  padding:0 !important;
  margin:10px auto 0 auto !important;
}
#nearby-areas li{margin:0 !important;}

@media (max-width: 600px){
  /* give space so floating WhatsApp doesn't cover the last row */
  #nearby-areas{padding-bottom:170px !important;}
  .wa{bottom:140px !important;}
}


/* === FINAL Nearby Areas mobile layout fix === */

/* remove big gaps */
#nearby-areas{
  padding: 12px 16px 12px !important;
  margin-bottom: 10px !important;
}

/* SINGLE HORIZONTAL LINE */
#nearby-areas ul{
  display:flex !important;
  flex-wrap:nowrap !important;   /* no wrapping */
  overflow-x:auto !important;    /* scroll if needed */
  white-space:nowrap !important;
  gap:18px !important;
  justify-content:flex-start !important;
  padding-bottom:6px !important;
}

/* tighter footer spacing */
footer{
  margin-top: 8px !important;
}

/* move WhatsApp higher so it never covers content */
.wa{
  bottom: 110px !important;
}


/* === WhatsApp position footer safe fix === */

/* add a little breathing room under footer */
footer{
  padding-bottom: 70px !important;
}

/* place WhatsApp lower but not overlapping */
.wa{
  bottom: 60px !important;
}


/* === Force top CTA buttons into ONE horizontal row on mobile === */
@media (max-width:768px){
  .cta-row{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
  }
  .cta-row .btn{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}


/* === FINAL FIX: Mobile top 3 CTA buttons in one row (no overlap, scrollable) === */
@media (max-width: 768px){
  .cta-row{
    display:flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    max-width: 100% !important;
    padding: 6px 2px 10px !important;
    margin: 0 auto !important;
  }

  .cta-row::-webkit-scrollbar{ display:none; }
  .cta-row{ scrollbar-width: none; }

  .cta-row > a.btn{
    flex: 0 0 auto !important;          /* keep each button intact */
    min-height: 58px !important;        /* same height */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    white-space: nowrap !important;      /* stop text wrapping */
    padding: 14px 22px !important;       /* consistent padding */
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }

  /* keep icons consistent so buttons don't "jump" */
  .cta-row > a.btn svg{
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    margin-right: 10px !important;
    display:block !important;
  }
}




/* === VERSION: desktop-centre-all-gapfix-v13v17 (DESKTOP ONLY) === */
@media (min-width: 768px){

  /* Nearby section heading + paragraph centered */
  #nearby-areas h2,
  #nearby-areas p{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Nearby areas line centered with dot separators between items only */
  #nearby-areas ul{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    list-style: none !important;
    padding: 0 !important;
    margin: 12px auto 0 !important;

    gap: 10px !important;
  }
  #nearby-areas li{
    list-style: none !important;
    position: relative !important;
    padding: 0 8px !important;
  }
  #nearby-areas li::marker{ content: "" !important; }

  /* Dot separators ONLY between items (no dot before first item) */
  #nearby-areas li:not(:first-child)::before{
    content: "•" !important;
    position: absolute !important;
    left: -8px !important;
    color: #333 !important;
  }

  /* Footer: centered + © underneath */
  footer .wrap > div{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* DESKTOP gap fix: remove extra bottom padding that creates whitespace */
  .wrap{ padding-bottom: 18px !important; }   /* overrides padding:22px 18px 88px */
  footer{ padding-bottom: 0 !important; }     /* overrides any footer padding hacks */
}


/* === VERSION: mobile-first-dot-fix === */
/* Mobile ONLY — remove dot before first item (Nottingham) */
@media (max-width: 767px){
  #nearby-areas li:first-child::marker{
    content: "" !important;
  }
}

/* v8 fix: scrap metal CTA buttons should stack on mobile (no horizontal slider) */
@media (max-width: 768px){
  .page-scrap .cta-row{
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 !important;
    margin: 16px 0 26px !important;
  }
  .page-scrap .cta-row > a.btn{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}



/* === FIX: stack CTA buttons vertically on mobile === */
@media (max-width: 768px){
  .cta-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:12px !important;
    overflow:visible !important;
    padding:0 !important;
    margin:16px 0 26px !important;
  }

  .cta-row > a.btn,
  .cta-row > .btn{
    width:100% !important;
    max-width:none !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    margin:0 !important;
  }
}

/* === FIX: align 'What We Collect' text neatly on desktop === */
@media (min-width: 769px){
  .page-scrap .checks{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    column-gap:28px !important;
    row-gap:12px !important;
    align-items:start !important;
  }

  .page-scrap .checks li{
    align-items:flex-start !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .page-scrap .checks .dot{
    flex:0 0 20px !important;
    margin-top:2px !important;
  }
}
/* Fix Why Choose bullet alignment */
.why-list{
padding-left:0 !important;
margin-left:0 !important;
max-width:650px;
margin-right:auto;
margin-left:auto;
}

.why-list li{
text-align:left;
}
/* Fix What We Collect alignment */
.checks{
justify-content:flex-start !important;
}

.checks li{
text-align:left;
}
/* Fix ONLY the Why Choose bullet alignment */
section[aria-label="Why choose us"] .why-list{
  padding-left:0 !important;
  margin:10px auto !important;
  max-width:650px;
  list-style-position:inside;
}

section[aria-label="Why choose us"] .why-list li{
  text-align:left;
}
/* Why Choose heading: left on desktop, centered on mobile */
.why-heading{
  text-align:left;
}

@media (max-width: 768px){
  .why-heading{
    text-align:center;
  }
}