/*
Theme Name: Bexbourne Cleaning Co. V11 — Services Mobile Rebuild
Theme URI: https://bexbournecleaning.co.uk/
Author: Bexbourne Cleaning Co.
Description: Custom WordPress theme converted from the approved Bexbourne static website design.
Version: 11.0
Text Domain: bexbourne
*/

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --teal:#164B60;
  --teal-dark:#0F3A4C;
  --gold:#B98F3F;
  --gold-light:#C8A254;
  --paper:#F7F5F0;
  --cream:#F1EDE3;
  --ink:#1C2622;
  --muted:#5C6864;
  --line:#DCD6C8;
  --green:#3C7A5C;
  --green-tint:#E7F0EA;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;}
h1,h2,h3{font-family:'Spectral',serif;margin:0;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

/* NAV */
nav.site{position:sticky;top:0;background:rgba(247,245,240,0.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:20;}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:38px;width:38px;}
.brand .word{font-family:'Spectral',serif;font-weight:700;font-size:21px;color:var(--teal);}
.brand .word span{color:var(--gold);}
.navlinks{display:flex;gap:30px;font-size:14px;font-weight:500;color:var(--muted);}
.navlinks a:hover{color:var(--teal);}
.navlinks a.current{color:var(--teal);font-weight:600;}
.navcta{background:var(--teal);color:#fff;padding:11px 22px;border-radius:6px;font-weight:600;font-size:14px;}
.navcta:hover{background:var(--teal-dark);}
.mobile-toggle{display:none;}

/* BUTTONS */
.btn{display:inline-block;background:var(--teal);color:#fff;padding:15px 28px;border-radius:7px;font-weight:600;font-size:15px;}
.btn:hover{background:var(--teal-dark);}
.btn-ghost{color:var(--teal);font-weight:600;font-size:15px;padding:15px 6px;}
.btn-outline{border:1.5px solid var(--teal);color:var(--teal);padding:13px 26px;border-radius:7px;font-weight:600;font-size:15px;}

/* PAGE HERO (inner pages) */
.page-hero{padding:60px 0 50px;border-bottom:1px solid var(--line);}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal);background:#E4EDF0;padding:6px 12px;border-radius:20px;margin-bottom:18px;}
.page-hero h1{font-size:38px;color:var(--teal-dark);font-weight:700;}
.page-hero p{color:var(--muted);font-size:16.5px;max-width:640px;margin-top:14px;}

/* SECTIONS */
.section{padding:64px 0;}
.section[id^="service-"]{scroll-margin-top:78px;}
.section.alt{background:var(--cream);}
.section-head{max-width:600px;margin-bottom:36px;}
.section-head h2{font-size:28px;color:var(--teal-dark);font-weight:700;}
.section-head p{color:var(--muted);margin-top:12px;font-size:16px;}

/* CARDS */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}

/* SERVICE CARD */
.svc-card{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff;transition:.2s;display:block;}
.svc-card:hover{border-color:var(--teal);transform:translateY(-2px);}
.svc-num{font-size:12px;font-weight:700;color:var(--teal);letter-spacing:0.06em;}
.svc-card h3{font-size:19px;font-weight:700;margin:10px 0 8px;font-family:'Inter';}
.svc-card p{font-size:14px;color:var(--muted);margin:0;}

/* QUICK NAV (services index) */
.quicknav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.quicknav a{background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:20px;font-size:13.5px;font-weight:600;color:var(--teal);}
.quicknav a:hover{background:var(--teal);color:#fff;border-color:var(--teal);}

/* PRICING TABLE */
table.pricing{width:100%;border-collapse:collapse;margin-top:18px;}
table.pricing th{background:var(--teal);color:#fff;text-align:left;padding:12px 16px;font-size:13.5px;font-weight:600;}
table.pricing td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px;}
table.pricing tr:nth-child(even){background:#fff;}
table.pricing tr:nth-child(odd) td{background:var(--cream);}

/* CHECKLIST CARD (signature element, reused from hero) */
.check-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -24px rgba(22,75,96,0.25);overflow:hidden;}
.cc-head{background:var(--teal);color:#fff;padding:16px 22px;font-size:13.5px;font-weight:600;display:flex;justify-content:space-between;}
.cc-body{padding:20px 22px;}
.cc-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #EEF0EC;}
.cc-row:last-child{border-bottom:none;}
.cc-check{width:22px;height:22px;border-radius:50%;background:var(--green-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cc-check svg{width:12px;height:12px;stroke:var(--green);}
.cc-label{font-size:14px;font-weight:500;}
.cc-time{margin-left:auto;font-size:12px;color:var(--muted);}
.cc-footer{background:var(--green-tint);color:var(--green);font-size:12.5px;font-weight:600;padding:12px 22px;}

/* FORM */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink);}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:7px;font-family:'Inter';font-size:14.5px;background:#fff;color:var(--ink);}
textarea{resize:vertical;min-height:90px;}
.check-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);}

/* CHIPS */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.chip{background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:20px;font-size:13.5px;}

/* CTA STRIP */
.ctastrip{background:var(--teal);color:#fff;padding:60px 0;text-align:center;}
.ctastrip h2{font-size:28px;font-weight:700;margin-bottom:12px;color:#fff;}
.ctastrip p{color:#CFE0E6;font-size:16px;margin-bottom:26px;}
.ctastrip .btn{background:#fff;color:var(--teal);}
.ctastrip .btn:hover{background:var(--cream);}

/* LEGAL PAGES */
.legal h2{font-size:20px;color:var(--teal-dark);margin-top:34px;margin-bottom:10px;}
.legal p, .legal li{color:var(--muted);font-size:15px;}
.legal .updated{color:var(--muted);font-style:italic;font-size:14px;margin-bottom:30px;}
.legal .callout{background:var(--cream);border-left:3px solid var(--gold);padding:16px 20px;font-size:14px;color:var(--ink);margin:20px 0;border-radius:0 8px 8px 0;}

/* FOOTER */
footer.site{padding:40px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted);}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
footer.site .foot-links{display:flex;gap:20px;}
footer.site .foot-links a:hover{color:var(--teal);}

/* =========================================================
   RESPONSIVE ENHANCEMENTS — V6
   Conservative breakpoints: desktop >= 1025, tablet 768-1024,
   mobile <= 767. The approved desktop geometry is preserved.
   ========================================================= */
.home-hero{padding:88px 0 72px;}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:56px;align-items:center;}
.home-hero-title{font-size:46px;line-height:1.1;font-weight:700;color:var(--teal-dark);}
.home-hero-copy{font-size:17.5px;color:var(--muted);margin:22px 0 30px;max-width:480px;}
.home-hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.trust-row{display:flex;gap:26px;margin-top:32px;flex-wrap:wrap;}
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.coverage-grid{display:block;}
.coverage-grid > div{max-width:760px;}
.standards-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.mobile-menu{display:none;}
html,body{max-width:100%;overflow-x:hidden;}
input,select,textarea,button{max-width:100%;}
.wrap,.grid-2,.grid-3,.grid-5,.services-grid,.standards-grid{min-width:0;}
.grid-2 > *,.grid-3 > *,.grid-5 > *,.services-grid > *,.standards-grid > *{min-width:0;max-width:100%;}
.section,.page-hero,.ctastrip{max-width:100%;overflow-x:clip;}

/* TABLET: retain columns rather than forcing a mobile stack */
@media (max-width:1024px) and (min-width:768px){
  .wrap{max-width:100%;padding-left:30px;padding-right:30px;}
  nav.site .wrap{height:72px;}
  .navlinks{gap:18px;font-size:13px;}
  .navcta{padding:10px 15px;font-size:13px;}
  .brand .word{font-size:19px;}

  .home-hero{padding:64px 0 56px;}
  .home-hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:30px;align-items:center;}
  .home-hero-title{font-size:38px;}
  .home-hero-copy{font-size:16px;margin:18px 0 24px;}
  .home-hero-actions{gap:10px;}
  .home-hero-actions .btn{padding:13px 20px;}
  .trust-row{gap:14px;margin-top:24px;}
  .trust-row span{font-size:12px!important;}

  .section{padding:52px 0;}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .coverage-grid{display:block;}
  .standards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-hero{padding:50px 0 42px;}
  .page-hero h1{font-size:34px;}
  table.pricing{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* MOBILE NAV + MOBILE LAYOUT */
@media (max-width:767px){
  .wrap{padding-left:20px;padding-right:20px;}
  nav.site .wrap{height:64px;position:relative;}
  .navlinks,.navcta{display:none;}
  .mobile-toggle{display:flex;width:42px;height:42px;border:0;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:8px;cursor:pointer;border-radius:7px;}
  .mobile-toggle span{display:block;width:22px;height:2px;background:var(--teal);transition:transform .2s,opacity .2s;}
  .mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu{position:absolute;left:0;right:0;top:64px;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 20px 22px;box-shadow:0 16px 30px rgba(15,58,76,.10);}
  .mobile-menu.is-open{display:flex;flex-direction:column;}
  .mobile-menu a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--teal-dark);}
  .mobile-menu .mobile-cta{margin-top:14px;border:0;background:var(--teal);color:#fff;text-align:center;padding:13px 18px;border-radius:7px;}
  .brand{gap:9px;min-width:0;}
  .brand img{width:32px;height:32px;}
  .brand .word{font-size:17px;white-space:nowrap;}

  .home-hero{padding:44px 0 42px;}
  .home-hero-grid{grid-template-columns:1fr;gap:30px;}
  .home-hero-title{font-size:32px;line-height:1.1;}
  .home-hero-copy{font-size:16px;margin:18px 0 24px;max-width:none;}
  .home-hero-actions{display:grid;grid-template-columns:1fr;gap:8px;align-items:stretch;}
  .home-hero-actions .btn,.home-hero-actions .btn-ghost{display:block;width:100%;text-align:center;}
  .trust-row{display:grid;grid-template-columns:1fr;gap:7px;margin-top:24px;}
  .trust-row span{font-size:12.5px!important;}
  .check-card{width:100%;min-width:0;}

  .section{padding:44px 0;}
  .section-head{margin-bottom:28px;}
  .section-head h2,.ctastrip h2{font-size:24px;line-height:1.2;}
  .section-head p,.ctastrip p{font-size:15px;}
  .services-grid,.grid-2,.grid-3,.grid-5,.standards-grid{grid-template-columns:1fr;}
  .svc-card,.card{padding:22px;}
  .svc-card:hover{transform:none;}

  /* Coverage is text/chips only; the old empty map placeholder has been removed. */
  .coverage-grid{display:block;}
  .chip-row{gap:8px;}
  .chip{padding:7px 12px;font-size:12.5px;}

  .page-hero{padding:42px 0 36px;}
  .page-hero h1{font-size:28px;line-height:1.16;}
  .page-hero p{font-size:15.5px;}
  .ctastrip{padding:46px 0;}
  .quicknav{gap:8px;}
  .quicknav a{width:100%;border-radius:7px;padding:10px 13px;}

  .cc-head{padding:14px 16px;gap:12px;}
  .cc-body{padding:14px 16px;}
  .cc-row{gap:9px;padding:10px 0;}
  .cc-label{font-size:13px;min-width:0;}
  .cc-time{font-size:11px;flex-shrink:0;}
  .cc-footer{padding:11px 16px;}

  .form-grid{grid-template-columns:1fr;gap:14px;}
  input,select,textarea{font-size:16px;}
  .form-grid .btn{width:100%;text-align:center;}
  .check-row{align-items:flex-start;}

  /* Services mobile safety: prevent long copy, buttons and pricing from widening the page. */
  #service-1,#service-2,#service-3,#service-4,#service-5,#service-6,#service-7{overflow-x:hidden;}
  #service-1 .wrap,#service-2 .wrap,#service-3 .wrap,#service-4 .wrap,#service-5 .wrap,#service-6 .wrap,#service-7 .wrap{width:100%;min-width:0;}
  #service-1 .grid-2,#service-2 .grid-2,#service-3 .grid-2,#service-4 .grid-2,#service-5 .grid-2,#service-6 .grid-2,#service-7 .grid-2{width:100%;min-width:0;}
  #service-1 h2,#service-2 h2,#service-3 h2,#service-4 h2,#service-5 h2,#service-6 h2,#service-7 h2{font-size:24px!important;line-height:1.2;overflow-wrap:anywhere;}
  #service-1 p,#service-2 p,#service-3 p,#service-4 p,#service-5 p,#service-6 p,#service-7 p,
  #service-1 li,#service-2 li,#service-3 li,#service-4 li,#service-5 li,#service-6 li,#service-7 li{overflow-wrap:anywhere;word-break:normal;}
  #service-1 .btn,#service-2 .btn,#service-3 .btn,#service-4 .btn,#service-5 .btn,#service-6 .btn,#service-7 .btn{display:block;width:100%;max-width:100%;padding:13px 16px!important;text-align:center;white-space:normal;overflow-wrap:anywhere;}

  table.pricing{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;border:1px solid var(--line);border-radius:8px;}
  table.pricing th,table.pricing td{padding:11px 12px;font-size:13px;min-width:108px;}

  footer.site{padding:30px 0;}
  footer.site .wrap{flex-direction:column;align-items:flex-start;gap:18px;}
  footer.site .foot-links{gap:14px;flex-wrap:wrap;}
}

@media (max-width:380px){
  .wrap{padding-left:16px;padding-right:16px;}
  .brand .word{font-size:15.5px;}
  .brand img{width:30px;height:30px;}
  .home-hero-title{font-size:29px;}
  .eyebrow{font-size:11.5px;}
  .cc-row{gap:7px;}
}

/* V8: permanently remove legacy homepage map/placeholder at ALL screen sizes. */
.home-map, .coverage-map, .map-placeholder, .coverage-placeholder, .home-coverage-map, [class*="map-placeholder"] { display:none !important; }
.coverage-grid { display:block !important; grid-template-columns:1fr !important; }
.coverage-grid > div { max-width:760px; width:100%; }




/* =========================================================
   V11 — CLEAN SERVICES MOBILE REBUILD
   No fixed-width tables; no inherited desktop overflow.
   ========================================================= */
@media (max-width: 767px) {
  .services-page,
  .services-page * {
    min-width: 0;
  }

  .services-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .services-page .wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
  }

  .services-page .page-hero {
    padding: 34px 0 30px;
  }

  .services-page .page-hero h1 {
    font-size: 28px;
    line-height: 1.12;
  }

  .services-page .page-hero p {
    font-size: 15px;
    line-height: 1.55;
    max-width: none;
  }

  .services-page .quicknav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .services-page .quicknav a {
    width: 100%;
    white-space: normal;
    border-radius: 8px;
  }

  .services-page .section {
    padding: 38px 0;
  }

  .services-page .section h2 {
    font-size: 23px !important;
    line-height: 1.18 !important;
    max-width: 100%;
  }

  .services-page .section > .wrap > p {
    font-size: 15px !important;
    line-height: 1.55;
    max-width: 100% !important;
  }

  .services-page .grid-2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
  }

  .services-page .grid-2 > div {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .services-page .grid-2 > div + div {
    margin-top: 30px;
  }

  .services-page .grid-2 h3 {
    font-size: 18px !important;
    line-height: 1.25;
    margin-bottom: 10px !important;
  }

  .services-page .grid-2 ul {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 20px !important;
  }

  .services-page .grid-2 li {
    width: auto;
    max-width: 100%;
    font-size: 15px !important;
    line-height: 1.5;
    margin: 0 0 7px;
    padding: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .services-page .legal.callout {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
  }

  .services-page .btn {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 14px !important;
    padding: 13px 16px !important;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  /* Mobile pricing cards */
  .services-page table.pricing,
  .services-page table.pricing tbody,
  .services-page table.pricing tr,
  .services-page table.pricing td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .services-page table.pricing {
    margin-top: 12px;
    border: 0;
    border-collapse: separate;
    white-space: normal !important;
    overflow: visible !important;
    table-layout: auto !important;
  }

  .services-page table.pricing thead,
  .services-page table.pricing th {
    display: none !important;
  }

  .services-page table.pricing tr {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #fff !important;
    border: 1px solid var(--line);
    border-radius: 9px;
  }

  .services-page table.pricing td,
  .services-page table.pricing tr:nth-child(odd) td,
  .services-page table.pricing tr:nth-child(even) td {
    position: relative;
    padding: 5px 0 5px 92px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 1.4;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  .services-page table.pricing td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 5px;
    width: 78px;
    color: var(--teal-dark);
    font-weight: 700;
    font-size: 12px;
  }

  .services-page table.pricing td:empty {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .services-page .wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
  .services-page .page-hero h1 { font-size: 25px; }
  .services-page .section h2 { font-size: 21px !important; }
  .services-page table.pricing td { padding-left: 82px !important; }
  .services-page table.pricing td::before { width: 70px; }
}