/* GLOBAL_SCALE_95: mimic 95% browser zoom */
html{font-size:95%;}
/* Autofix full site styles.css (stable build – hero width fixed everywhere) */
:root{
  --autofix-yellow:#fff000;

  --page-bg:#000000;
  --black:#000;
  --white:#fff;
  --accent:#ffe600;  /* Autofix yellow */
  --wrap:1100px;
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --leftpad:18px;

  --stripe-white:2px;
  --stripe-black:3px;

  --ui-scale: clamp(1, 0.92 + 0.15vw, 1.25);
  --gallery-gap:15px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#000000;
  color:var(--white);
  overflow-x:hidden; /* absolute stop */
}
main{ overflow-x:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--leftpad); }

/* carbon */
.carbon-top{
  background-image:url("/assets/common/carbon.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
}
.carbon-footer{
  background-image:url("/assets/common/carbon2.png");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
}

/* stripes */
.framed{ position:relative; }
.framed::before,
.framed::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:calc(var(--stripe-white) + var(--stripe-black));
  pointer-events:none;
  z-index:3;
}
.framed::before{
  top:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.92) 0 var(--stripe-white),
    rgba(0,0,0,.98) var(--stripe-white) calc(var(--stripe-white) + var(--stripe-black))
  );
}
.framed::after{
  bottom:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.98) 0 var(--stripe-black),
    rgba(255,255,255,.92) var(--stripe-black) calc(var(--stripe-white) + var(--stripe-black))
  );
}
.no-stripes::before,
.no-stripes::after{ display:none !important; }
.no-stripes::before,.no-stripes::after{ display:none !important; content:none !important; }

/* header */
.header{ box-shadow:0 10px 30px rgba(0,0,0,.35);  position:relative; z-index:2000; }
.header .nav{
  /* full-width header so logo sits flush-left even on 4K */
  width:100%;
  max-width:none;
  margin:0;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* NAVBAR LAYOUT FIX (keep CALL NOW on same row on desktop) */
.header .nav{
  flex-wrap:nowrap;
  gap:14px;
}
.header .nav .brand{
  flex:0 0 auto;
}
.header .nav .menu{
  flex:1 1 auto;
  min-width:0;
  justify-content:center;
  gap:clamp(10px, 1.6vw, 22px);
}
.header .nav .menu a,
.header .nav .menu .dropbtn{
  font-size:clamp(13px, 1.05vw, 18px);
  padding:clamp(8px, 0.9vw, 14px) clamp(10px, 1.2vw, 18px);
  white-space:nowrap;
}
.callnow-nav{
  flex:0 0 auto;
  white-space:nowrap;
  margin-left:6px;
}
.callnow-nav img{
  display:block;
  height:clamp(34px, 4.2vw, 52px);
  width:auto;
}
@media (max-width: 980px){
  .header .nav{
    flex-wrap:wrap; /* allows the menu to drop before CALL NOW when needed */
    justify-content:center;
  }
  .callnow-nav{
    order:3;
  }
}

.brand{ display:flex; align-items:center; }
.logo{ height:75px; width:auto; } /* 25% bigger & left padded via wrap */

/* menu */
.menu{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}
.menu a,.dropbtn{
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:calc(12px * var(--ui-scale));
  color:rgba(255,255,255,.95);
  padding:calc(2.55px * var(--ui-scale)) calc(10px * var(--ui-scale));
  border-radius:999px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  display:inline-block;
}
.menu a:hover,.dropbtn:hover{ background:rgba(255,255,255,.10); color:var(--accent); }
.menu a.active{
  color:var(--accent);
  background:rgba(255,230,0,.12);
  border:2px solid rgba(255,230,0,.35);
}

/* dropdown – stable hover */
.dropdown{ position:relative; display:inline-block; }
.dropdown::after{
  content:"";
  position:absolute;
  left:-12px; right:-12px;
  top:100%;
  height:44px;     /* larger safe zone */
  background:transparent;
}
.dropbtn{ background:transparent; border:none; cursor:pointer; font-family:inherit; }
.dropdown-content{
  display:none;
  position:absolute;
  top:calc(100% + 30px);
  left:0;
  min-width:340px;
  background:#000;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  z-index:3000;
  border-radius:12px;
  overflow:hidden;
  padding:6px 0;
}
.dropdown-content a{
  display:block;
  padding:18px 22px; /* big click target */
  font-size:calc(12px * var(--ui-scale));
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.dropdown-content a:last-child{ border-bottom:none; }
.dropdown-content a:hover{ background:rgba(255,230,0,.20); }
.dropdown:hover .dropdown-content{ display:block; }

/* HERO – fixed everywhere */
.hero{
  margin-top:3px; /* sit just below 3px black stripe */

  background:transparent !important;
  line-height:0;
  overflow:hidden;
  width:100%;
  max-width:100%;
}
.hero img{
  width:100%;
  max-width:100%;
  height:auto;
}


/* content */
.section{
  margin-top:14px;
  background:#000;
  box-shadow:var(--shadow);
  padding:14px 0;
}
.section p,.section li{
  color:#fff;
  font-size:calc(14px * var(--ui-scale));
  line-height:1.7;
}
.section h2{
  margin:0 0 14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:calc(18px * var(--ui-scale));
  font-weight:900;
  color:var(--accent);
  text-align:center;
}
ol{ padding-left:22px; }

.inline-logo{
  height:26px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  margin-right:10px;
}

/* services */
.service-title{
  color:var(--accent);
  font-size:calc(22px * var(--ui-scale));
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:0 0 12px;
}
.qa p{ margin:0 0 12px; }
.qa .q{ color:#fff; font-weight:400; }
.qa .a-line{ color:var(--accent); font-weight:400; }

/* metal triple strip */
.metal{
  margin-top:14px;
  background:url("/assets/common/brushed-silver-metallic-background.jpg") center/cover;
  padding:22px 0 26px;
  box-shadow:var(--shadow);
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  align-items:center;
}
.gallery img{
  width:100%;
  height:210px;
  object-fit:contain;
  background:transparent;
  box-shadow:0 12px 26px rgba(0,0,0,.20);
}

/* makes grid */
.makes{
  border-top:none;
  border-bottom:none;
  margin-top:14px;
  background:#000;
  padding:18px 0 14px;
  box-shadow:var(--shadow);
}
.makes-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:15px;
  justify-items:center;
  align-items:center;
}
.makes-grid img{
  height:60px;
  width:100%;
  max-width:140px;
  object-fit:contain;
  background:transparent;
  border:2px solid #ffffff;
  border-radius:10px;
  padding:10px;
}

/* reviews */
.reviews{ display:grid; gap:var(--gallery-gap); }
.review{
  border:2px solid rgba(255,255,255,.65);
  padding:14px 16px;
  background:rgba(255,255,255,.04);
}
.review:nth-child(3n+1){ background:rgba(255,230,0,.10); border-color:rgba(255,230,0,.60); }
.review:nth-child(3n+2){ background:rgba(0,170,255,.10); border-color:rgba(0,170,255,.55); }
.review:nth-child(3n){ background:rgba(255,60,120,.10); border-color:rgba(255,60,120,.55); }
.review p{ margin:0 0 10px; }
.review p:last-child{ margin-bottom:0; }
.reviewer{
  margin-top:10px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:calc(12px * var(--ui-scale));
  color:#fff;
}

/* contact */
.card{
  border:2px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.04);
  padding:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.26);
}
.contact-form{ margin-top:14px; display:grid; gap:12px; }
.contact-form label{
  display:grid; gap:6px;
  font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  font-size:calc(12px * var(--ui-scale));
  color:var(--accent);
}
.contact-form input,.contact-form textarea{
  width:100%;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.75);
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:12px 14px;
  outline:none;
  font-size:calc(14px * var(--ui-scale));
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(255,230,0,.95);
  box-shadow:0 0 0 3px rgba(255,230,0,.20);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-actions{ display:flex; justify-content:center; margin-top:6px; }

.btn{
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:calc(12px * var(--ui-scale));
  padding:calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
  border-radius:999px;
  border:2px solid rgba(255,230,0,.85);
  background:rgba(255,230,0,.18);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{ background:rgba(255,230,0,.28); border-color:rgba(255,230,0,.98); }

/* payments */
.payment-row{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:var(--gallery-gap);
  margin-top:16px;
  width:100%;
  background:#000;
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.20);
}
.payment-row img{
  height:64px;
  width:100%;
  object-fit:contain;
  background:transparent;
  border:none;
  padding:0;
  border-radius:0;
}

/* footer */
.footer{
  margin-top:0;
  padding:12px 0 18px;
}
.footer-inner{ display:grid; place-items:center; gap:15px; }
.footer-logo{ height:55px; }
.footer p{
  margin:0;
  color:#fff;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:calc(11px * var(--ui-scale));
}

/* responsive */
@media (max-width:1050px){ .makes-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){
  .header .nav{ flex-direction:column; }
  .gallery{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  
  .dropdown-content{ position:static; display:block; margin-top:10px; width:100%; }
  .dropdown::after{ display:none; }
  .payment-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){ .makes-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){
  
  .payment-row{ grid-template-columns:1fr; }
}



/* Page titles */
h2{
  text-align:center;
  color: var(--accent);
  font-size: 30px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 10px 0 18px;
  font-weight: 900;
}




/* HERO WIDTH: match page width (NOT 100vw) */
.hero{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:hidden;
}
.hero img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto;
}








/* --- HERO: 100% width, proportional height (no stretching) --- */
section.hero{
  display:block;
  width:100% !important;
  max-width:100% !important;
  margin:3px 0 0 !important;   /* below 3px black stripe */
  padding:0 !important;
  overflow:hidden;
  background:transparent !important;
}
section.hero > img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;      /* preserve aspect ratio */
}
/* Keep class name but ensure it doesn't force height */
.hero.hero-letterbox img{ height:auto !important; }

.section p{ margin:0 0 12px; }
.section p:last-child{ margin-bottom:0; }

/* Active service item in dropdown */
.dropdown-content a.active{
  background:rgba(255,230,0,.14);
  color:var(--accent);
}

/* Makes spacing tune */
.makes{
  margin-top:10px;      /* reduce black gap above makes */
  padding:10px 0 12px;  /* reduce blank area inside makes */
}
.footer{
  margin-top:10px;      /* reduce blank gap below makes */
}


/* Makes carousel */
.makes-carousel-wrap{ position:relative;  width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:0; padding-right:0; }
.makes-carousel{
  display:flex;
  gap:15px;
  overflow-x:auto;
  padding:6px 2px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action: pan-x;
  scrollbar-width: none;
}

.makes-carousel::-webkit-scrollbar{ display:none; }

.makes-carousel img{
  flex:0 0 auto;
  scroll-snap-align:start;
  height:82px;
  width:180px;
  object-fit:contain;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}

/* swipe on mobile */
  .makes-carousel img{
  flex:0 0 auto;
  scroll-snap-align:start;
  height:82px;
  width:180px;
  object-fit:contain;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}
}


/* Hide carousel scrollbar */
.makes-carousel{
  scrollbar-width:none;           /* Firefox */
  -ms-overflow-style:none;        /* IE/Edge legacy */
  touch-action: pan-x;
  scrollbar-width: none;
}

.makes-carousel::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

.makes-carousel{ cursor:grab;   touch-action: pan-x;
  scrollbar-width: none;
}

.makes-carousel.dragging{ cursor:grabbing; }
.makes-carousel img{ user-select:none; -webkit-user-drag:none; }


.footer{
  border-top:2px solid rgba(255,255,255,.85) !important; /* separator above carbon footer */
}

/* Tighten lists to remove extra blank space */
.section ol{ margin:10px 0 0; padding-left:22px; }
.section li{ margin:0 0 6px; }
.section li:last-child{ margin-bottom:0; }

/* Carousel interaction */
.makes-carousel{ overflow-x:auto; overflow-y:hidden;   touch-action: pan-x;
  scrollbar-width: none;
}

.makes-carousel{ cursor:grab;   touch-action: pan-x;
  scrollbar-width: none;
}

.makes-carousel.dragging{ cursor:grabbing; }


/* Mobile nav */
.nav-toggle{
  display:none;
  border:2px solid rgba(255,230,0,.85);
  background:rgba(255,230,0,.15);
  color:#fff;
  border-radius:999px;
  width:52px;
  height:40px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav-toggle:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,230,0,.20); }

@media (max-width:900px){
  .header .nav{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
  }
  .menu{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:15px;
    padding:12px 0 6px;
  }
  .menu a,.dropbtn{
    text-align:left;
    border-radius:12px;
    padding:14px 14px;
  }
  .dropdown{ width:100%; }
  .dropdown::after{ display:none; }
  .dropdown-content{
    position:static;
    min-width:unset;
    width:100%;
    margin-top:8px;
    border-radius:12px;
  }
  .nav-toggle{ display:inline-grid; place-items:center; }
  .nav.is-open .menu{ display:flex; }
}


/* DEFINITIVE MENU BUTTON HEIGHT (desktop) */
.menu a,
.dropbtn{
  padding:6px 12px !important;   /* shorter buttons */
  line-height:1.1 !important;
}

/* Dropdown items a bit tighter too */
.dropdown-content a{
  padding:8px 12px !important;
}

/* Mobile keeps larger tap targets */
@media (max-width:900px){
  .menu a,.dropbtn{
    padding:14px 14px !important;
    line-height:1.2 !important;
  }
}


/* Carbon background sizing (header/footer) */
.carbon-top,
.carbon-footer{
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:cover !important; /* scales with window */
}


/* Gallery: always 3 across (scale with window) */
.gallery{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:var(--gallery-gap);
  align-items:stretch;
}
.gallery img{
  width:100% !important;
  height:auto !important;
  display:block;
  object-fit:cover;
}
@media (max-width:520px){
  .gallery{ gap:8px; }
}


/* Footer stripe stack: 2px white line then 3px black then carbon footer */
.footer{
  position:relative;
  border-top:2px solid rgba(255,255,255,.85) !important;
}
.footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:1px;              /* just below the white line */
  height:3px;
  background:#000;
}



/* black stripes just inside the silver area */
.metal.framed .wrap.gallery{
  position:relative;
  max-width:100%;
  width:100%;
  padding-left:var(--gallery-gap);
  padding-right:var(--gallery-gap);
  padding-top:6px;   /* space for top stripes */
  padding-bottom:6px;
}
.metal.framed .wrap.gallery::before,
.metal.framed .wrap.gallery::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:3px;
  background:#000;
}
.metal.framed .wrap.gallery::before{ top:2px; }
.metal.framed .wrap.gallery::after{ bottom:2px; }



/* Header logo vertical centering */
.header .nav{
  display:flex;
  align-items:center;
}
.brand{
  display:flex;
  align-items:center;
  height:100%;
}
.brand .logo{
  display:block;
  margin:0;
}






/* === STRIPE FIX: remove the two extra black lines inside the silver (metal) strip === */
.metal.framed .wrap.gallery{
  padding-top:0 !important;
  padding-bottom:0 !important;
  max-width:100%;
  width:100%;
  padding-left:var(--gallery-gap);
  padding-right:var(--gallery-gap);
}
.metal.framed .wrap.gallery::before,
.metal.framed .wrap.gallery::after{
  content:none !important;
  display:none !important;
}
/* Contact thank-you (inline, no redirect) */
.contact-thanks{
  margin-top: 12px;
  padding: 12px 14px;
  border: 2px solid #000;
  color: #000;
  background: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  text-align:center;
  line-height: 1.35;
  white-space: normal;
}



.contact-thanks span{
  color: var(--autofix-yellow);
  font-weight: 700;
}

/* Hero CTA (top-right) */
.hero{ position: relative; }
.hero-cta{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  z-index:1;
}
.hero-cta-btn{
  display:inline-block;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  border:2px solid var(--autofix-yellow);
  background:var(--autofix-yellow);
  color:#000;
  border-radius:6px;
  line-height:1;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero-cta-btn:hover{ filter:brightness(.95); }
.hero-cta-secondary{
  background:rgba(0,0,0,.55);
  color:var(--autofix-yellow);
}
@media (max-width: 520px){
  .hero-cta{ top:8px; right:8px; gap:6px; }
  .hero-cta-btn{ padding:6px 8px; font-size:11px; }
}

/* Service Q&A styling (separate lines) */
.qa{ margin-top:14px; }
.qa-item{ margin: 0 0 12px; }
.qline{
  color:#fff;
  font-weight:700;
  margin:0 0 4px;
}
.aline{
  color:var(--autofix-yellow);
  font-weight:700;
  margin:0;
}
.qtag, .atag{ font-weight:700; }

/* Header phone button (top-right) */
.phone-btn{
  display:inline-block;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  border:2px solid var(--autofix-yellow);
  background:var(--autofix-yellow);
  color:#000;
  border-radius:6px;
  line-height:1;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  white-space:nowrap;
}
.phone-btn:hover{ filter:brightness(.95); }



/* Use Autofix yellow consistently */
.phone-btn,
.menu a:hover,
.menu a.active,
.dropdown-content a:hover,
.dropdown-content a.active,
.btn,
.cta-btn,
.hero-cta-btn,
.service-title,
.aline,
.qa .a,
.qa .aline,
.atag{
  border-color: var(--autofix-yellow) !important;
}
.aline,
.qa .aline{
  color: var(--autofix-yellow) !important;
}
.phone-btn{
  background: var(--autofix-yellow) !important;
  color:#000 !important;
}

/* Phone button on hero (top-right) - definitive */
.hero{ position:relative; }
.hero .phone-btn{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 !important;
  z-index:50 !important;
}

/* === HERO PHONE (top-right on every hero) === */
.hero{ position:relative; }
.hero .hero-phone{
  position:absolute !important;
  top:8px !important;
  right:5px !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 !important;
  z-index:1500 !important;

  border:3px solid #000 !important;

  padding:8px 13px !important;
  font-size:15px !important;
}

/* Contact page spacing: match other pages */
.section.no-stripes{ margin-top:0; padding-top:0; }
.section.no-stripes .contact-form{ margin-top:0; }

/* Makes carousel: ensure items don't shrink on mobile so auto-scroll works */
.makes-carousel > *{ flex:0 0 auto; }
.makes-carousel img{ width:140px; height:70px; object-fit:contain; }
@media (max-width:520px){
  .makes-carousel img{ width:120px; height:62px; }
}

/* Global spacing below hero */
.hero{ margin-bottom:1em; }

/* Robust 1-line gap after hero */
.hero + .section{ margin-top:1em; }

/* Contact form: make enquiry/message field match other white boxes */
.contact-form textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"]{
  background:#fff;
  color:#000;
  border:2px solid #000;
}
.contact-form textarea::placeholder,
.contact-form input::placeholder{ color:#555; }

/* Ensure SERVICES trigger highlights like other nav items */
.nav .dropdown{ position: relative; z-index: 1000; }
.nav .dropdown-content{ z-index: 1001; }
.nav .dropdown > a{ position: relative; }
.nav .dropdown > a.active{
  color: var(--autofix-yellow);
}
.nav .dropdown > a.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-8px;
  height:3px;
  background: var(--autofix-yellow);
}
.hero .phone-btn{ z-index: 10; }

/* Large screens: keep layout centred and readable */
:root{ --site-max: 1200px; }
.wrap, .container, .site-container, .page, .content, .main, .header-inner, .footer-inner{
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1400px){
  .wrap, .container, .site-container, .page, .content, .main, .header-inner, .footer-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* highlight SERVICES button when on service pages */
.dropbtn.active{background:var(--yellow); color:#000;}


/* === MAKES CAROUSEL: full-bleed seamless banner (4K friendly) === */
.makes{
  width:100%;
}
.makes .wrap{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.makes-carousel{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important; /* full-bleed even inside centered containers */
  margin-right:calc(50% - 50vw) !important;
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important; /* hide scrollbars */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.makes-carousel::-webkit-scrollbar{ display:none; }
.makes-carousel a,
.makes-carousel .make,
.makes-carousel .make-tile{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.makes-carousel img{
  display:block !important;
  height:72px !important;     /* all same height per your updated assets */
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  object-fit:contain !important;
}
@media (max-width:520px){
  .makes-carousel img{ height:58px !important; }
}
/* =============================================================== */


/* === FIX: tighter copy spacing under hero === */
.section{ padding:8px 0; }

/* === FIX: metal/silver strip vertical centering (equal top/bottom gaps) === */
.metal{
  padding:18px 0;
  display:flex;
  align-items:center;
}
.gallery{ width:100%; }
.gallery img{
  height:clamp(120px, 22vw, 210px);
  display:block;
}

/* Tighten copy spacing under hero (target ~1 line) */
.section{ padding:6px 0 !important; }

/* Contact thank-you banner: black background */
.contact-thanks{
  background:#000 !important;
  color:#fff !important;
  border:2px solid var(--autofix-yellow) !important;
}

/* Makes carousel spacing */
.makes-carousel{ gap:30px !important; }
.callnow-nav img{
  height:52px;
  width:auto;
  display:block;
}
@media (max-width: 640px){
  .callnow-nav img{ height:44px; }
}

/* Nav CALL NOW image button (text-sized) */
.callnow-nav{
  display:inline-flex;
  align-items:center;
  margin-left:12px;
}
.callnow-nav img{
  height:28px;
  width:auto;
  vertical-align:middle;
}
@media (max-width: 640px){
  .callnow-nav img{ height:24px; }
}


/* === POLISH v4: phone + 4K CTA sizing === */
.hero .hero-phone{
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
}
/* Make CTA more obvious */
.hero .hero-phone{
  padding:10px 16px !important;
  font-size:16px !important;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
/* Phone layout: keep CTA visible and not overlapping menu */
@media (max-width: 520px){
  .hero .hero-phone{
    top:10px !important;
    right:10px !important;
    padding:10px 14px !important;
    font-size:15px !important;
  }
  /* Button bar: wrap neatly */
  .btn-bar, .button-bar{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .btn-bar a, .button-bar a, .btn-bar button, .button-bar button{
    flex:1 1 calc(50% - 8px) !important;
    text-align:center;
    padding:8px 10px !important;
    font-size:14px !important;
  }
}
/* 4K: slightly larger CTA without breaking */
@media (min-width: 2560px){
  .hero .hero-phone{
    padding:12px 18px !important;
    font-size:18px !important;
  }
}


/* Keep copyright on one line on small screens */
.footer .copyright, footer .copyright, .footer-copyright{
  white-space:nowrap;
}
@media (max-width:520px){
  .footer .copyright, footer .copyright, .footer-copyright{
    font-size:12px !important;
    letter-spacing:0 !important;
  }
}

/* Contact page: make Send Enquiry button border thicker */
.contact-form button[type="submit"],
.contact-form .submit-btn{
  border-width:3px !important;
}

/* Contact page: give Send Enquiry button breathing room */
.contact-form button[type="submit"],
.contact-form .submit-btn{
  padding:12px 20px !important;
  line-height:1.2 !important;
}


/* Trade page: reuse reviews 3-colour scheme */
.trade-panels{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
@media (max-width: 980px){
  .trade-panels{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 620px){
  .trade-panels{grid-template-columns:1fr;}
}

/* Invisible 2-column list (no borders) */
.two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:30px;
  row-gap:10px;
  padding-left:18px;
}
@media (max-width: 620px){
  .two-col{grid-template-columns:1fr;}
}

/* menu-gap-tune */
@media (max-width: 1200px){.menu{gap:14px;}}
@media (max-width: 1020px){.menu{gap:10px;} .menu a{font-size:15px;}}

/* === Header nav: even spacing between logo and right edge === */
header .wrap, .header .wrap, .header-inner{
  display:flex;
  align-items:center;
}
header nav, .header nav, .nav, .header-inner nav{
  flex:1 1 auto;
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  margin-left:18px;
}
header nav a, header nav button,
.header nav a, .header nav button,
.header-inner nav a, .header-inner nav button{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Ensure CALL NOW never squishes */
.call-now, .hero-phone, .phone-btn{
  white-space:nowrap;
  flex:0 0 auto;
}

/* Smaller screens: allow tighter spacing (mobile menu handles wrap) */
@media (max-width: 720px){
  header nav, .header nav, .nav, .header-inner nav{
    justify-content:flex-end;
    gap:10px;
  }
}

/* === Trade page: CTA buttons above footer === */
.trade-cta, .trade-cta-row, .trade-buttons{
  margin: 14px 0;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.trade-cta .btn, .trade-cta-row .btn, .trade-buttons .btn{
  padding:12px 18px !important;
  line-height:1.2 !important;
}

/* Carousel drag UX */
.makes-carousel.dragging{ cursor:grabbing; }
.makes-carousel{ cursor:grab; }

/* At very small widths, allow nav to wrap (mobile layout) */
@media (max-width:520px){
  header nav, .header nav, .nav, .header-inner nav{
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  .call-now, .hero-phone, .phone-btn{
    flex:1 1 100% !important;
    text-align:center;
  }
}

/* Trade promo button block */
.trade-promo{
  display:block;
  text-align:left;
  margin:14px 0;
  padding:14px 18px !important;
  line-height:1.35;
}

/* H2 global bump (+2px) */
h2{ font-size:32.0px !important; }

/* === MENU POLISH v2: resilient under zoom + resizing === */
header .wrap, .header .wrap, .header-inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap; /* allows safe wrap when zoomed */
}
header nav, .header nav, .nav, .header-inner nav{
  flex:1 1 620px;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  gap:10px;
  margin-left:18px;
  flex-wrap:wrap; /* prevents overlap at high zoom */
}
header nav a, header nav button,
.header nav a, .header nav button,
.header-inner nav a, .header-inner nav button{
  white-space:nowrap;
  font-size:clamp(12px, 1.05vw, 16px);
  padding:8px clamp(8px, 0.9vw, 14px);
}
/* Keep CALL NOW readable and never squished */
.call-now, .hero-phone, .phone-btn{
  white-space:nowrap;
  flex:0 0 auto;
  font-size:clamp(13px, 1.1vw, 18px) !important;
  padding:10px clamp(10px, 1.0vw, 18px) !important;
  margin-left:auto; /* tends to stay rightmost */
}
/* When space is genuinely tight (or zoomed), drop CALL NOW to its own line (still visible, not squished) */
@media (max-width: 980px){
  .call-now, .hero-phone, .phone-btn{
    flex-basis:100%;
    text-align:center;
    margin-left:0;
  }
  header nav, .header nav, .nav, .header-inner nav{
    justify-content:center;
    margin-left:0;
  }
}
/* Phone layout remains the phone button bar behaviour */
@media (max-width:520px){
  header nav, .header nav, .nav, .header-inner nav{
    flex:1 1 100%;
  }
}

/* Trade promo button (clickable block) */
.trade-promo-wrap{ margin:14px 0; }
.trade-promo-btn{
  display:block;
  text-align:left;
  padding:14px 18px !important;
  line-height:1.35;
  cursor:pointer;
  pointer-events:auto;
}