/*
Theme Name: OJS Commercials V3
Theme URI: https://www.ojscommercials.co.uk/
Author: Vigilate
Description: Corrected OJS Commercials theme matching the approved dark industrial mock-up with duplicate image overlays removed.
Version: 3.0.0
Text Domain: ojs-commercials
*/
:root{--bg:#0a0f12;--panel:#10171b;--panel2:#0d1418;--white:#f5f5f3;--muted:#b8bec2;--orange:#ff5b12;--line:rgba(255,255,255,.14);--max:1480px;--head:'Bebas Neue','Arial Narrow',Impact,sans-serif;--body:'Inter',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.52;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}svg{display:block;fill:currentColor}.wrap{width:min(calc(100% - 64px),var(--max));margin-inline:auto}.display{font-family:var(--head);text-transform:uppercase;letter-spacing:.005em;line-height:.9;font-weight:400}.eyebrow{font:400 14px/1 var(--head);letter-spacing:.28em;text-transform:uppercase;color:var(--orange)}
.site-header{height:78px;background:#080e12;border-bottom:1px solid var(--line);position:relative;z-index:50}.nav-wrap{height:100%;display:flex;align-items:center;gap:26px}.brand{width:190px;height:64px;overflow:hidden;display:flex;align-items:center;flex:0 0 auto}.brand img{width:198px;max-width:none;filter:brightness(0) invert(1);transform:translateY(-3px)}.site-nav{display:flex;align-items:center;gap:26px;margin-left:auto;font:400 16px/1 var(--head);text-transform:uppercase;white-space:nowrap}.site-nav a{height:78px;display:flex;align-items:center;border-bottom:3px solid transparent;padding-top:3px}.site-nav a:hover,.site-nav a.active{border-bottom-color:var(--orange);color:#fff}.header-phone{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;white-space:nowrap}.header-phone svg{width:20px;color:var(--orange)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:54px;padding:0 27px;border:1px solid rgba(255,255,255,.78);font:400 18px/1 var(--head);text-transform:uppercase;letter-spacing:.025em;transition:.18s ease}.btn svg{width:19px}.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}.btn.orange{background:var(--orange);border-color:var(--orange);color:#090c0e}.btn.ghost{background:rgba(8,13,16,.34)}.header-cta{min-height:44px;padding:0 19px;font-size:16px}.arrow{font-family:Arial,sans-serif;font-weight:700}.menu-toggle{display:none;margin-left:auto;width:42px;height:42px;padding:9px;border:0;background:transparent}.menu-toggle span{display:block;height:2px;background:#fff;margin:5px 0;transition:.2s}.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{background:#10181d;overflow:hidden}.hero-grid{display:grid;grid-template-columns:53% 47%;min-height:486px}.hero-photo{background-image:linear-gradient(90deg,transparent 70%,#10181d 100%),url('assets/images/hero-truck.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat}.hero-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:42px clamp(42px,5vw,86px) 42px 55px;background:radial-gradient(circle at 52% 18%,rgba(255,255,255,.07),transparent 42%),linear-gradient(90deg,#10181d 0%,#091014 88%)}.hero-kicker{font-size:13px;letter-spacing:.45em;text-transform:uppercase;margin-bottom:16px;color:#e3e6e7}.hero h1{font-size:clamp(58px,5.15vw,84px);margin:0 0 15px}.hero h1 em{font-style:normal;color:var(--orange)}.hero-sub{font-size:12px;letter-spacing:.32em;text-transform:uppercase;margin:0 0 22px;color:#f2f3f3}.hero-sub span{opacity:.6;margin-inline:6px}.hero p{max-width:610px;font-size:16px;color:#e0e2e3;margin:0 0 25px}.hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.quick-services{background:#080e12;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr)}.quick-item{min-height:92px;padding:18px 26px;display:flex;gap:20px;align-items:center;border-right:1px solid var(--line)}.quick-item:last-child{border-right:0}.quick-icon{width:48px;min-width:48px;height:48px;display:grid;place-items:center;color:var(--orange)}.quick-icon svg{width:42px;height:42px}.recovery-icon{border:3px solid var(--orange);border-radius:50%;position:relative}.recovery-icon:after{content:"";position:absolute;width:9px;height:3px;background:var(--orange);right:-5px;top:6px;transform:rotate(35deg)}.recovery-icon span{font:400 16px/1 var(--head)}.quick-item strong{display:block;font:400 25px/.92 var(--head);text-transform:uppercase;letter-spacing:.015em}.quick-item small{display:block;margin-top:7px;letter-spacing:.11em;text-transform:uppercase;color:#b9c0c3;font-size:9px;line-height:1.2}
.about{background:#f3f3f1;color:#151719;overflow:hidden}.about-grid{display:grid;grid-template-columns:55.5% 44.5%;min-height:360px}.about-copy{padding:35px 74px 28px max(40px,calc((100vw - var(--max))/2 + 32px));clip-path:polygon(0 0,89% 0,100% 100%,0 100%);background:#f3f3f1;position:relative;z-index:2}.about-copy h2{font-size:55px;margin:0 0 14px}.about-copy p{max-width:720px;font-size:15px;line-height:1.5;margin:0 0 18px;color:#24282a}.small-btn{min-height:45px;padding:0 22px;font-size:16px}.about-image{background:url('assets/images/workshop.jpg') center center/cover no-repeat;min-height:360px}.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:760px;margin-top:19px}.stat{padding:0 18px;border-right:1px solid #c7c9ca;text-align:center}.stat:first-child{padding-left:0}.stat:last-child{border-right:0}.stat b{display:block;font:400 31px/1 var(--head);text-transform:uppercase}.stat span{display:block;margin-top:5px;font-size:9px;line-height:1.2;text-transform:uppercase;letter-spacing:.03em}
.services{padding:22px 0 28px;background:#0b1114}.services-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:17px}.services h2{font-size:43px;margin:6px 0 0}.view-link{color:var(--orange);text-transform:uppercase;font:400 17px/1 var(--head);padding-bottom:4px}.view-link span{font-family:Arial,sans-serif;margin-left:8px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:#11191d;border:1px solid rgba(255,255,255,.12);overflow:hidden;min-height:305px}.card-media{height:157px;background-position:center;background-size:cover;background-repeat:no-repeat}.service-repairs{background-image:url('assets/images/service-repairs.jpg')}.service-fleet{background-image:url('assets/images/service-fleet.jpg')}.service-recovery{background-image:url('assets/images/service-recovery.jpg')}.service-mot{background-image:url('assets/images/service-mot.jpg')}.card-body{padding:18px 18px 20px;position:relative}.bubble{position:absolute;top:-28px;left:18px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#0b0d0f}.bubble svg{width:30px;height:30px}.bubble-247{font:400 16px/1 var(--head)}.card h3{font:400 23px/1 var(--head);text-transform:uppercase;margin:12px 0 7px}.card p{color:#d2d6d8;font-size:13px;line-height:1.48;margin:0}
.location-strip{display:grid;grid-template-columns:50% 50%;background:#f2f2ef;color:#171a1c;min-height:158px}.testimonial{padding:33px max(42px,calc((100vw - var(--max))/2 + 32px)) 26px;position:relative}.testimonial:after{content:"";position:absolute;right:-69px;top:0;border-top:79px solid transparent;border-bottom:79px solid transparent;border-left:70px solid #f2f2ef;z-index:2}.quote-mark{position:absolute;left:max(22px,calc((100vw - var(--max))/2 + 2px));top:6px;font:400 78px/1 Georgia,serif;color:#bbbfc0}.quote{font-size:14px;line-height:1.65;max-width:590px;margin-left:28px}.stars{color:var(--orange);font-size:18px;letter-spacing:3px;margin:8px 0 0 28px}.stars span{font-size:9px;color:#232729;letter-spacing:.08em;margin-left:7px}.map-panel{background:url('assets/images/location-map.jpg') center/cover no-repeat;position:relative}.map-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,16,.72),rgba(7,13,16,.22))}.map-copy{position:relative;z-index:1;color:#fff;padding:32px 52px 24px 80px;display:flex;gap:18px;align-items:flex-start;max-width:700px}.map-pin{width:34px;min-width:34px;color:var(--orange);padding-top:1px}.map-pin svg{width:34px}.map-copy h3{font-size:29px;margin:0 0 8px}.map-copy p{font-size:12px;line-height:1.55;margin:0;color:#e5e7e8;max-width:500px}
.contact-band{background:#091014;position:relative;overflow:hidden}.contact-band:before{content:"";position:absolute;left:0;top:0;bottom:0;width:40%;background:url('assets/images/footer-trucks.jpg') center/cover no-repeat;opacity:.34}.contact-grid{position:relative;display:grid;grid-template-columns:36% 35% 29%;align-items:center;min-height:190px}.contact-brand{padding-right:30px}.contact-logo{width:230px;filter:brightness(0) invert(1)}.contact-info h3{font:400 25px/1 var(--head);text-transform:uppercase;margin:0}.contact-sub{font-size:11px;color:#d4d8da;margin:4px 0 7px}.contact-line{display:flex;align-items:center;gap:12px;margin:5px 0;font-size:17px}.contact-line svg{width:20px;color:var(--orange);flex:0 0 auto}.contact-line strong{font-size:20px}.email-line strong{font-size:16px}.contact-info .btn{margin-top:9px}.address{border-left:1px solid var(--line);padding-left:34px;display:flex;align-items:flex-start;gap:14px;color:#e2e5e6;font-size:12px}.address svg{width:20px;color:var(--orange);flex:0 0 auto}.address p{margin:0;line-height:1.7}
.site-footer{border-top:1px solid var(--line);background:#070c0f;color:#8f979b;font-size:10px}.foot{height:58px;display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-links{display:flex;gap:19px}.generic-page{padding:80px 0;min-height:60vh}.generic-page h1{font-size:60px}
@media(max-width:1250px){.site-nav{gap:16px;font-size:14px}.header-phone span{display:none}.hero h1{font-size:62px}.about-copy{clip-path:none}.quick-item{padding-inline:18px}.quick-item strong{font-size:22px}}
@media(max-width:1080px){.site-nav{display:none}.menu-toggle{display:block}.header-phone{margin-left:auto}.header-phone span{display:inline}.hero-grid{grid-template-columns:51% 49%}.quick-grid,.cards{grid-template-columns:repeat(2,1fr)}.quick-item:nth-child(2){border-right:0}.quick-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.card-media{height:190px}}
@media(max-width:820px){.wrap{width:min(calc(100% - 30px),var(--max))}.site-header{height:70px;position:relative}.brand{width:155px;height:58px}.brand img{width:166px}.header-phone,.header-cta{display:none}.site-nav.open{display:flex;position:absolute;z-index:60;top:70px;left:0;right:0;margin:0;padding:10px 20px 18px;background:#071014;flex-direction:column;align-items:flex-start;gap:0;border-top:1px solid var(--line);box-shadow:0 18px 34px rgba(0,0,0,.35)}.site-nav.open a{height:auto;padding:12px 0;border-bottom:1px solid var(--line);width:100%;font-size:18px}.hero-grid{grid-template-columns:1fr}.hero-photo{min-height:320px;background-image:linear-gradient(180deg,transparent 70%,#10181d 100%),url('assets/images/hero-truck.jpg');background-position:48% center}.hero-copy{padding:32px 22px 36px}.hero-kicker{font-size:10px;letter-spacing:.38em}.hero h1{font-size:53px}.hero-sub{font-size:9px;letter-spacing:.17em}.hero p{font-size:14px}.hero-actions .btn{width:100%}.quick-grid{grid-template-columns:1fr 1fr}.quick-item{padding:17px 12px;gap:12px}.quick-icon{width:40px;min-width:40px;height:40px}.quick-icon svg{width:34px;height:34px}.quick-item strong{font-size:20px}.quick-item small{font-size:8px}.about-grid{grid-template-columns:1fr}.about-copy{padding:30px 20px}.about-copy h2{font-size:46px}.about-copy p{font-size:14px}.about-image{min-height:270px}.stats{grid-template-columns:repeat(2,1fr);gap:17px}.stat:nth-child(2){border-right:0}.services{padding-top:25px}.services-head{align-items:flex-start}.services h2{font-size:37px}.view-link{font-size:14px;margin-top:5px}.cards{grid-template-columns:1fr}.card-media{height:225px}.location-strip{grid-template-columns:1fr}.testimonial{padding:30px 20px 28px}.testimonial:after{display:none}.quote-mark{left:8px}.quote,.stars{margin-left:20px}.map-panel{min-height:180px}.map-copy{padding:30px 22px;gap:14px}.map-copy h3{font-size:25px}.contact-grid{grid-template-columns:1fr;padding:30px 0;gap:26px}.contact-band:before{width:100%;opacity:.15}.contact-brand{padding:0}.contact-logo{width:210px}.address{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}.foot{height:auto;flex-direction:column;align-items:flex-start;padding:20px 0;gap:12px}.footer-links{flex-wrap:wrap}}
@media(max-width:520px){.quick-grid{grid-template-columns:1fr}.quick-item{border-right:0;border-bottom:1px solid var(--line)!important}.quick-item:last-child{border-bottom:0!important}.services-head{display:block}.view-link{display:inline-block;margin-top:8px}.hero h1{font-size:47px}.stats{gap:14px}.stat{padding-inline:10px}.contact-line strong{font-size:18px}.email-line strong{font-size:13px}}


/* V3 corrections: approved mock-up imagery already contains several graphic elements.
   These rules prevent those elements being rendered a second time over the images. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.card-body{padding-top:14px}
.card h3{margin-top:0}
.location-strip .map-panel{background-image:url('assets/images/location-map.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;min-height:158px}
.location-strip .map-panel:before{display:none!important}
.contact-band:before{display:none!important}
.contact-brand{align-self:stretch;min-height:190px;padding:0;background:url('assets/images/footer-trucks.jpg') center center/cover no-repeat}
.contact-logo{display:none!important}
@media(max-width:820px){
  .location-strip .map-panel{min-height:220px;background-size:cover;background-position:center center}
  .contact-brand{min-height:180px;background-size:cover;background-position:center center}
  .contact-band:before{display:none!important}
}