/*
 * SSK Mechanics — Service Landing Pages
 * Applies to all dedicated service pages: repairs, servicing, diagnostics, all.
 * Mobile-first. Bold industrial aesthetic matching brand identity.
 */

:root {
  --slp-red:    #d6001c;
  --slp-red-dk: #a80016;
  --slp-black:  #0d0e10;
  --slp-ink:    #16181d;
  --slp-steel:  #5a6473;
  --slp-mist:   #f0f4f8;
  --slp-line:   #e3e7ee;
  --slp-white:  #ffffff;
  --slp-green:  #0d7f3f;
  --slp-plate:  #f5c518;
  --slp-plate-uk: #003399;
  --slp-font-h: 'Barlow Condensed','Impact',Arial,sans-serif;
  --slp-font-b: 'DM Sans','Segoe UI',system-ui,sans-serif;
  --slp-max:    1180px;
  --slp-gap:    clamp(16px,4vw,40px);
}

.slp { font-family:var(--slp-font-b); color:var(--slp-ink); line-height:1.6; }
.slp *,.slp *::before,.slp *::after { box-sizing:border-box; }
.slp a { text-decoration:none; }
.slp img { max-width:100%; display:block; }

/* ── HERO ─────────────────────────────────────────────────────────── */
.slp-hero {
  background:var(--slp-black);
  position:relative;
  overflow:hidden;
  padding:clamp(48px,8vw,96px) var(--slp-gap);
}
.slp-hero__bg {
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 50%, rgba(214,0,28,.15) 0%, transparent 60%);
}
.slp-hero__grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
.slp-hero__inner {
  max-width:var(--slp-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 440px;
  gap:clamp(32px,6vw,72px);
  align-items:center;
  position:relative;
  z-index:1;
}
@media(max-width:860px){ .slp-hero__inner{grid-template-columns:1fr;} }

/* Hero copy */
.slp-eyebrow {
  display:block;
  font-size:clamp(11px,1.5vw,13px);
  font-weight:700;
  color:var(--slp-red);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:16px;
}
.slp-h1 {
  font-family:var(--slp-font-h);
  font-size:clamp(40px,7vw,76px);
  font-weight:800;
  line-height:1.0;
  color:var(--slp-white);
  margin:0 0 20px;
  letter-spacing:-.5px;
}
.slp-accent { color:var(--slp-red); display:block; }
.slp-lead {
  font-size:clamp(15px,2vw,18px);
  color:rgba(255,255,255,.72);
  margin:0 0 28px;
  max-width:520px;
  line-height:1.65;
}
.slp-stats {
  display:flex;
  gap:clamp(16px,3vw,32px);
  flex-wrap:wrap;
}
.slp-stat {
  text-align:center;
}
.slp-stat strong {
  display:block;
  font-family:var(--slp-font-h);
  font-size:clamp(24px,3.5vw,36px);
  font-weight:800;
  color:var(--slp-white);
  line-height:1;
}
.slp-stat span {
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* Hero widget */
.slp-widget {
  background:var(--slp-white);
  border-radius:20px;
  padding:clamp(20px,3vw,28px);
  box-shadow:0 24px 64px rgba(0,0,0,.4);
}
.slp-widget__head {
  margin-bottom:16px;
}
.slp-widget__head strong {
  display:block;
  font-size:16px;
  font-weight:800;
  color:var(--slp-ink);
  margin-bottom:4px;
}
.slp-widget__head span {
  font-size:13px;
  color:var(--slp-steel);
}

/* UK number plate */
.slp-plate-row {
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.slp-plate {
  flex:1;
  display:flex;
  background:var(--slp-plate);
  border:3px solid #111;
  border-radius:7px;
  overflow:hidden;
  height:56px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.slp-plate__band {
  background:var(--slp-plate-uk);
  width:28px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:4px 0 3px;
}
.slp-plate__gb {
  color:#fff;
  font-size:8px;
  font-weight:800;
  font-family:var(--slp-font-h);
}
.slp-vrm-input {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  font-family:'Barlow Condensed',monospace;
  font-size:28px;
  font-weight:800;
  letter-spacing:4px;
  color:#000;
  text-align:center;
  text-transform:uppercase;
  caret-color:var(--slp-red);
  padding:0 6px;
}
.slp-vrm-input::placeholder { color:rgba(0,0,0,.3); letter-spacing:1px; font-size:18px; }
.slp-find-btn {
  background:var(--slp-red);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:0 16px;
  font-family:var(--slp-font-b);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:background .15s;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.slp-find-btn:hover { background:var(--slp-red-dk); }
.slp-find-btn:disabled { opacity:.6; cursor:not-allowed; }

/* Vehicle preview */
.slp-vehicle-preview {
  background:var(--slp-black);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
  animation:slpIn .25s ease;
}
@keyframes slpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.slp-vp-plate {
  background:var(--slp-plate);
  border:2px solid #111;
  border-radius:4px;
  padding:4px 8px;
  font-family:var(--slp-font-h);
  font-size:16px;
  font-weight:800;
  letter-spacing:2px;
  color:#000;
  flex-shrink:0;
}
.slp-vp-info { flex:1; }
.slp-vp-info strong { display:block; color:#fff; font-size:13px; font-weight:700; }
.slp-vp-info span  { color:rgba(255,255,255,.55); font-size:11px; }
.slp-vp-change {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);
  border-radius:6px;
  padding:4px 10px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  font-family:var(--slp-font-b);
}
.slp-vp-change:hover { background:rgba(255,255,255,.2); color:#fff; }

.slp-book-btn {
  display:block;
  background:var(--slp-red);
  color:#fff !important;
  text-align:center;
  font-weight:700;
  font-size:16px;
  padding:14px;
  border-radius:12px;
  margin-top:12px;
  transition:background .15s;
}
.slp-book-btn:hover { background:var(--slp-red-dk); }

.slp-widget__foot {
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
  flex-wrap:wrap;
}
.slp-widget__foot span {
  font-size:11px;
  color:var(--slp-steel);
  font-weight:600;
}

/* ── CATEGORY NAV ─────────────────────────────────────────────────── */
.slp-catnav {
  background:var(--slp-ink);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;
  top:0;
  z-index:100;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.slp-catnav::-webkit-scrollbar { display:none; }
.slp-catnav__inner {
  max-width:var(--slp-max);
  margin:0 auto;
  display:flex;
  gap:0;
  padding:0 var(--slp-gap);
  white-space:nowrap;
}
.slp-catlink {
  color:rgba(255,255,255,.6);
  font-size:13px;
  font-weight:700;
  padding:14px 16px;
  display:inline-block;
  border-bottom:2px solid transparent;
  transition:all .15s;
  flex-shrink:0;
}
.slp-catlink:hover { color:#fff; }
.slp-catlink.is-active { color:var(--slp-red); border-bottom-color:var(--slp-red); }

/* ── SERVICES SECTION ─────────────────────────────────────────────── */
.slp-services { padding:clamp(48px,6vw,80px) var(--slp-gap); background:var(--slp-white); }
.slp-section-inner { max-width:var(--slp-max); margin:0 auto; }
.slp-section-header { text-align:center; margin-bottom:clamp(32px,4vw,56px); }
.slp-section-header h2 { font-family:var(--slp-font-h); font-size:clamp(28px,4vw,48px); font-weight:800; margin:0 0 12px; }
.slp-section-header p  { color:var(--slp-steel); font-size:clamp(14px,1.8vw,17px); margin:0; }

.slp-cat-section { margin-bottom:clamp(32px,4vw,56px); }
.slp-cat-heading {
  font-family:var(--slp-font-h);
  font-size:clamp(20px,2.5vw,28px);
  font-weight:800;
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:3px solid var(--slp-red);
  display:flex;
  align-items:baseline;
  gap:10px;
}
.slp-cat-count {
  font-family:var(--slp-font-b);
  font-size:12px;
  font-weight:700;
  color:var(--slp-steel);
  background:var(--slp-mist);
  border-radius:100px;
  padding:2px 10px;
}

.slp-svc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
@media(max-width:600px){ .slp-svc-grid{grid-template-columns:1fr;} }

.slp-svc-card {
  border:1.5px solid var(--slp-line);
  border-radius:14px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--slp-white);
  transition:all .2s;
}
.slp-svc-card:hover {
  border-color:var(--slp-red);
  box-shadow:0 4px 20px rgba(214,0,28,.08);
  transform:translateY(-2px);
}
.slp-svc-card__head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.slp-svc-card__name {
  font-size:15px;
  font-weight:700;
  margin:0;
  line-height:1.3;
  flex:1;
}
.slp-svc-card__price {
  text-align:right;
  flex-shrink:0;
}
.slp-svc-card__price {
  font-size:17px;
  font-weight:800;
  color:var(--slp-ink);
  white-space:nowrap;
}
.slp-svc-card__price span {
  display:block;
  font-size:10px;
  font-weight:600;
  color:var(--slp-steel);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-top:1px;
}
.slp-svc-card__desc {
  font-size:13px;
  color:var(--slp-steel);
  margin:0;
  line-height:1.55;
  flex:1;
}
.slp-svc-card__foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--slp-line);
}
.slp-svc-card__badge {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:3px 8px;
  border-radius:100px;
}
.slp-svc-card__badge--mobile { background:#dcfce7; color:#166534; }
.slp-svc-card__badge--ramp   { background:#fef3c7; color:#92400e; }
.slp-svc-card__btn {
  background:var(--slp-red);
  color:#fff !important;
  font-size:12px;
  font-weight:700;
  padding:7px 14px;
  border-radius:8px;
  transition:background .15s;
  white-space:nowrap;
}
.slp-svc-card__btn:hover { background:var(--slp-red-dk); }

/* ── COVERAGE STRIP ───────────────────────────────────────────────── */
.slp-coverage-strip {
  background:var(--slp-black);
  padding:clamp(40px,5vw,64px) var(--slp-gap);
}
.slp-coverage-strip__inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
@media(max-width:680px){ .slp-coverage-strip__inner{grid-template-columns:1fr;} }
.slp-coverage-strip h3 { font-family:var(--slp-font-h); font-size:clamp(22px,3vw,32px); font-weight:800; color:#fff; margin:0 0 10px; }
.slp-coverage-strip p  { color:rgba(255,255,255,.65); font-size:14px; margin:0 0 14px; line-height:1.65; }
.slp-link { color:var(--slp-red); font-weight:700; font-size:14px; }
.slp-link:hover { text-decoration:underline; }

.slp-coverage-strip__check {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:20px;
}
.slp-coverage-strip__check input {
  width:100%;
  border:1.5px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:8px;
  padding:10px 14px;
  font-size:14px;
  font-family:var(--slp-font-b);
  outline:none;
  margin-bottom:10px;
}
.slp-coverage-strip__check input::placeholder { color:rgba(255,255,255,.35); }
.slp-coverage-strip__check input:focus { border-color:var(--slp-red); }
.slp-btn-red {
  background:var(--slp-red);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  font-family:var(--slp-font-b);
  transition:background .15s;
  width:100%;
}
.slp-btn-red:hover { background:var(--slp-red-dk); }

/* ── BOTTOM CTA ───────────────────────────────────────────────────── */
.slp-bottom-cta { padding:clamp(48px,6vw,80px) var(--slp-gap); background:var(--slp-mist); }
.slp-bottom-cta__inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.slp-bottom-cta h2 { font-family:var(--slp-font-h); font-size:clamp(26px,3.5vw,40px); font-weight:800; margin:0 0 6px; }
.slp-bottom-cta p  { color:var(--slp-steel); margin:0; font-size:15px; }
.slp-btn-xl {
  background:var(--slp-red);
  color:#fff !important;
  font-weight:800;
  font-size:17px;
  padding:16px 36px;
  border-radius:14px;
  display:inline-block;
  transition:background .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.slp-btn-xl:hover { background:var(--slp-red-dk); }

/* ── Spinner ─────────────────────────────────────────────────────── */
.slp-spinner {
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:slpSpin .6s linear infinite;
  display:inline-block;
}
@keyframes slpSpin{to{transform:rotate(360deg)}}


/* G1 — Responsive safety net (catch-all) */
@media (max-width: 540px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .ssk-section-inner { padding-left: 16px !important; padding-right: 16px !important; }
}
img, video, iframe, table { max-width: 100%; height: auto; }