/* ============================================================
   L&T MOT — brand tokens
   Navy + signal green (from their own signage/floor markings)
   plus a UK number-plate motif as the signature device.
   ============================================================ */

:root{
  --navy-ink:      #0c2340;   /* deep header/footer navy */
  --brand-blue:    #1a4d8f;   /* primary brand blue, from shopfront signage */
  --brand-blue-lt: #2b66b3;
  --signal-green:  #2fa84f;   /* reception floor chevrons */
  --signal-green-dk:#217a3a;
  --plate-yellow:  #ffd400;   /* UK rear-plate yellow, used for the reg lookup */
  --plate-blue:    #003399;   /* UK plate GB-strip blue */
  --mot-red:       #d5352b;   /* MOT-due urgency accent, common in the trade */
  --mot-red-dk:    #ab241c;
  --concrete:      #f2f0ea;   /* warm workshop-floor grey */
  --concrete-dk:   #e6e2d8;
  --ink:           #171d26;
  --ink-soft:      #4b5563;
  --white:         #ffffff;

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 4px;
  --container: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  text-transform:uppercase;
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
:focus-visible{
  outline:3px solid var(--signal-green);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Top utility bar ---------------- */
.topbar{
  background:var(--navy-ink);
  color:#cfd9e8;
  font-size:.82rem;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  flex-wrap:wrap;
  gap:6px;
}
.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }
.topbar .tel{ font-weight:700; letter-spacing:.02em; }
.topbar .badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--signal-green);
  color:#04240f;
  font-weight:700;
  padding:2px 10px;
  border-radius:999px;
  font-size:.75rem;
}

/* ---------------- Header / nav ---------------- */
.site-header{
  background:var(--white);
  border-bottom:4px solid var(--brand-blue);
  position:sticky; top:0; z-index:50;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.logo-badge{
  display:inline-flex;
  align-items:baseline;
  background:linear-gradient(180deg, #2c65b3 0%, #123a78 100%);
  color:#fff;
  padding:9px 16px 8px;
  border-radius:9px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.5rem;
  letter-spacing:-0.01em;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 3px 8px rgba(12,35,64,.35), inset 0 1px 0 rgba(255,255,255,.25);
  white-space:nowrap;
}
.logo-badge em{
  font-style:italic;
  font-weight:500;
  font-size:.6em;
  margin:0 2px;
  align-self:center;
}
.logo-badge .mot{
  font-weight:900;
  margin-left:2px;
}
.logo-badge .dot{ font-weight:900; }
.logo small{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  text-transform:none;
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

nav.main-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
nav.main-nav a{
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--navy-ink);
  padding:6px 2px;
  border-bottom:3px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
nav.main-nav a:hover,
nav.main-nav a[aria-current="page"]{
  border-color:var(--signal-green);
  color:var(--brand-blue);
}
.nav-cta{
  background:var(--signal-green) !important;
  color:#04240f !important;
  padding:9px 16px !important;
  border-radius:var(--radius);
  border-bottom:none !important;
}
.nav-cta:hover{ background:var(--signal-green-dk) !important; }

.nav-toggle{
  display:none;
  background:none; border:2px solid var(--navy-ink); border-radius:4px;
  width:42px; height:38px; cursor:pointer; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:9px; right:9px; height:2.5px; background:var(--navy-ink);
}
.nav-toggle span{ top:18px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  nav.main-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-bottom:4px solid var(--brand-blue);
    box-shadow:0 8px 16px rgba(0,0,0,.08);
  }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{ flex-direction:column; gap:0; padding:8px 24px 18px; }
  nav.main-nav li{ border-top:1px solid var(--concrete-dk); }
  nav.main-nav a{ display:block; padding:14px 2px; border-bottom:none !important; }
  .nav-cta{ margin-top:10px; display:inline-block; }
}

.logo-footer .logo-badge{
  background:linear-gradient(180deg, #3a72c2 0%, #1a4d8f 100%);
  border-color:rgba(255,255,255,.5);
}

/* ---------------- MOT-check emphasis banner ----------------
   A loud, unmissable band pushing the MOT history check —
   the pattern used across MOT-centre sites in this trade.
------------------------------------------------------------------ */
.mot-banner{
  background:var(--mot-red);
  color:#fff;
  padding:26px 0;
  position:relative;
}
.mot-banner::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 18px, transparent 18px 36px);
  pointer-events:none;
}
.mot-banner .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  position:relative;
}
.mot-banner .msg{ display:flex; align-items:center; gap:14px; }
.mot-banner .msg-icon{
  width:52px; height:52px; flex:none;
  background:#fff; color:var(--mot-red);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:900; font-size:1.3rem;
}
.mot-banner h2{
  color:#fff; margin:0; font-size:1.3rem;
}
.mot-banner p{ margin:0; color:#ffe3e1; font-size:.92rem; }
.mot-banner .btn-white{
  background:#fff; color:var(--mot-red);
}
.mot-banner .btn-white:hover{ background:#ffe9e7; }
@media (max-width:700px){
  .mot-banner .container{ flex-direction:column; align-items:flex-start; }
}

/* Slim persistent MOT-check ribbon under the header, all pages */
.mot-ribbon{
  background:var(--navy-ink);
  border-top:1px solid rgba(255,255,255,.08);
}
.mot-ribbon .container{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px 24px;
  flex-wrap:wrap;
}
.mot-ribbon a{
  color:var(--plate-yellow);
  text-decoration:none;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.02em;
}
.mot-ribbon a:hover{ text-decoration:underline; }
.mot-ribbon span{ color:#cfd9e8; font-size:.85rem; }
   Echoes the green directional floor chevrons at reception.
------------------------------------------------------------------ */
.chevrons{
  height:16px;
  background:repeating-linear-gradient(
    -45deg,
    var(--signal-green) 0 14px,
    var(--navy-ink) 14px 28px
  );
}
.chevrons.thin{ height:8px; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  background:var(--navy-ink);
  color:#fff;
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
  padding:64px 24px 56px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(47,168,79,.18);
  border:1px solid var(--signal-green);
  color:#a9f0bd;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  margin-bottom:.35em;
  color:#fff;
}
.hero h1 .accent{ color:var(--signal-green); }
.hero p.lead{
  font-size:1.1rem;
  color:#cfd9e8;
  max-width:46ch;
  margin-bottom:1.6em;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-figure{
  position:relative;
  border:6px solid var(--white);
  border-radius:2px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  transform:rotate(1.2deg);
}
.hero-figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 1px;
  display: block;
}
.hero-figure .tag{
  position:absolute; bottom:-16px; left:-16px;
  background:var(--plate-yellow);
  color:var(--navy-ink);
  font-family:var(--font-display);
  font-weight:900;
  padding:8px 14px;
  transform:rotate(-3deg);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  font-size:.95rem;
}

@media (max-width: 860px){
  .hero-inner{ grid-template-columns:1fr; padding:44px 20px 40px; }
  .hero-figure{ transform:none; order:-1; }
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.92rem;
  text-decoration:none;
  padding:14px 24px;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--signal-green); color:#04240f; }
.btn-primary:hover{ background:var(--signal-green-dk); }
.btn-outline{ background:transparent; color:#fff; border-color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.1); }
.btn-navy{ background:var(--navy-ink); color:#fff; }
.btn-navy:hover{ background:#08192e; }
.btn-block{ display:block; width:100%; text-align:center; }

/* ---------------- Sections ---------------- */
.section{ padding:64px 0; }
.section-tight{ padding:40px 0; }
.section-alt{ background:var(--concrete); }
.section-navy{ background:var(--navy-ink); color:#fff; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--signal-green-dk);
  font-weight:700;
  margin-bottom:.6em;
  display:block;
}
.section-navy .eyebrow{ color:#a9f0bd; }
.section-head{ max-width:640px; margin-bottom:36px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }

/* ---------------- Cards / grids ---------------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:800px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:#fff;
  border:1px solid var(--concrete-dk);
  border-radius:var(--radius);
  padding:28px;
  position:relative;
}
.card .num{
  font-family:var(--font-mono);
  color:var(--signal-green-dk);
  font-weight:700;
  font-size:.85rem;
  display:block;
  margin-bottom:10px;
}
.card h3{ font-size:1.05rem; margin-bottom:.5em; }
.card p{ color:var(--ink-soft); font-size:.96rem; margin-bottom:0; }
.card.accent{ border-top:4px solid var(--signal-green); }

.icon-badge{
  width:46px; height:46px;
  border-radius:8px;
  background:var(--navy-ink);
  color:var(--signal-green);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:900;
  margin-bottom:14px;
}

/* ---------------- Stat strip ---------------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.stats div{ padding:22px 20px; text-align:center; border-left:1px solid rgba(255,255,255,.15); }
.stats div:first-child{ border-left:none; }
.stats strong{
  display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--plate-yellow);
}
.stats span{ font-size:.8rem; color:#cfd9e8; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:700px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats div{ border-left:none; border-top:1px solid rgba(255,255,255,.15); }
}

/* ---------------- Number-plate lookup — signature widget ---------------- */
.plate-form{
  display:flex;
  max-width:520px;
  margin:0 auto;
}
.plate-input-wrap{
  display:flex;
  background:var(--plate-yellow);
  border:3px solid var(--ink);
  border-radius:6px 0 0 6px;
  overflow:hidden;
  flex:1;
}
.plate-gb{
  background:var(--plate-blue);
  color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 10px;
  font-weight:800;
  font-size:.7rem;
  line-height:1.1;
}
.plate-gb .stars{ color:var(--plate-yellow); font-size:.6rem; letter-spacing:1px; }
#plate-input{
  border:none;
  background:transparent;
  font-family:var(--font-display);
  font-size:1.6rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  padding:10px 14px;
  width:100%;
  min-width:0;
}
#plate-input::placeholder{ color:rgba(0,0,0,.35); }
#plate-input:focus{ outline:none; background:#fff7cc; }
.plate-submit{
  border:3px solid var(--ink);
  border-left:none;
  border-radius:0 6px 6px 0;
  background:var(--navy-ink);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  padding:0 22px;
  cursor:pointer;
  letter-spacing:.03em;
}
.plate-submit:hover{ background:#08192e; }
@media (max-width:520px){
  .plate-form{ flex-direction:column; }
  .plate-input-wrap{ border-radius:6px 6px 0 0; }
  .plate-submit{ border-left:3px solid var(--ink); border-top:none; border-radius:0 0 6px 6px; padding:12px; }
}
.plate-note{ text-align:center; color:var(--ink-soft); font-size:.85rem; margin-top:12px; }

.mot-results{ margin-top:36px; }
.mot-results[hidden]{ display:none; }
.result-summary{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--concrete-dk); border-left:6px solid var(--signal-green);
  padding:20px 24px; border-radius:var(--radius); margin-bottom:24px;
}
.result-summary.fail{ border-left-color:#c0392b; }
.result-summary h3{ margin:0; font-size:1.2rem; }
.result-summary .meta{ color:var(--ink-soft); font-size:.9rem; font-family:var(--font-mono); }
.test-row{
  border:1px solid var(--concrete-dk); border-radius:var(--radius);
  padding:18px 22px; margin-bottom:14px;
}
.test-row .row-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:.9rem; }
.test-row .status{ font-weight:700; text-transform:uppercase; }
.status.pass{ color:var(--signal-green-dk); }
.status.fail{ color:#c0392b; }
.test-row ul{ margin:10px 0 0; padding-left:18px; color:var(--ink-soft); font-size:.9rem; }
.loading-msg, .error-msg{
  font-family:var(--font-mono); font-size:.92rem; padding:16px 0; color:var(--ink-soft);
}
.error-msg{ color:#c0392b; }

/* ---------------- Testimonials ---------------- */
.quote{
  background:#fff;
  border:1px solid var(--concrete-dk);
  border-radius:var(--radius);
  padding:26px;
}
.quote p{ font-size:1.02rem; color:var(--ink); }
.quote cite{ font-style:normal; font-weight:700; color:var(--brand-blue); font-size:.88rem; }

/* ---------------- Forms (contact) ---------------- */
.form-grid{ display:grid; gap:18px; }
label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
input[type=text], input[type=email], input[type=tel], textarea, select{
  width:100%; padding:12px 14px; border:1px solid #c7c2b4; border-radius:var(--radius);
  font-family:var(--font-body); font-size:1rem; background:#fff;
}
textarea{ min-height:130px; resize:vertical; }
input:focus, textarea:focus, select:focus{ outline:3px solid var(--signal-green); outline-offset:1px; border-color:var(--signal-green); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--navy-ink); color:#cfd9e8; }
.footer-inner{
  padding:52px 0 26px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
}
.footer-inner h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-inner p, .footer-inner li{ font-size:.9rem; color:#a9b6cb; }
.footer-inner ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-inner a{ text-decoration:none; color:#a9b6cb; }
.footer-inner a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 0 28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.8rem; color:#8695ac;
}
@media (max-width:800px){ .footer-inner{ grid-template-columns:1fr; } }

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero{
  background:var(--navy-ink); color:#fff; padding:48px 0 40px;
}
.page-hero h1{ color:#fff; margin-bottom:.2em; }
.page-hero p{ color:#cfd9e8; max-width:60ch; margin-bottom:0; }
.breadcrumb{ font-family:var(--font-mono); font-size:.8rem; color:#a9b6cb; margin-bottom:14px; }
.breadcrumb a{ color:#a9f0bd; text-decoration:none; }

/* ---------------- Misc ---------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }
.img-frame{ border:6px solid var(--concrete); border-radius:2px; overflow:hidden; }
ul.check-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
ul.check-list li{ padding-left:30px; position:relative; }
ul.check-list li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:#fff; background:var(--signal-green);
  width:20px; height:20px; border-radius:4px;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:900;
}