/* =========================================================================
   Ozark Motors — Design System
   Aesthetic: industrial workshop premium. Gunmetal steel base, signal-red
   anchor, safety-amber accent. Anton (billboard condensed) + Archivo.
   Signature device: UK number-plate motif (.plate).
   ========================================================================= */

:root {
  /* Brand palette */
  --ink:        #0e1116;   /* near-black steel        */
  --steel:      #14181d;   /* page background          */
  --steel-2:    #1b212a;   /* raised surface           */
  --steel-3:    #232b36;   /* hover / borders          */
  --line:       #2c3540;   /* hairline borders         */
  --fog:        #8a97a6;   /* muted text               */
  --paper:      #f4f1ea;   /* warm off-white text      */
  --paper-dim:  #c9cfd6;

  --red:        #e63946;   /* signal red (anchor)      */
  --red-deep:   #c01f2c;
  --amber:      #ffc233;   /* safety amber accent      */
  --amber-deep: #e0a200;

  /* Number plate */
  --plate-yellow: #ffd400;
  --plate-white:  #f3f3f3;
  --plate-black:  #111;

  /* Type */
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Archivo', system-ui, sans-serif;

  /* Spatial */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --shadow:   0 18px 50px -20px rgba(0,0,0,.65);
  --shadow-2: 0 30px 80px -30px rgba(0,0,0,.8);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
body {
  font-family: var(--body);
  background: var(--steel);
  color: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* faint blueprint grid + radial depth */
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(230,57,70,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(255,194,51,.06), transparent 55%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }

/* ---------- Type ---------- */
h1,h2,h3 { font-family: var(--display); font-weight:400; line-height:.98; letter-spacing:.5px; text-transform:uppercase; }
h1 { font-size: clamp(2.9rem, 8vw, 6.2rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing:.6px; }
p  { color: var(--paper-dim); }
strong { color: var(--paper); font-weight:700; }

.container { max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gut); }

.eyebrow {
  font-family: var(--body);
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before { content:""; width:28px; height:2px; background:var(--red); display:inline-block; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--paper-dim); max-width: 60ch; }

/* ---------- Hazard top bar ---------- */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(45deg, var(--amber) 0 16px, var(--ink) 16px 32px);
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--red); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--body); font-weight:800; letter-spacing:.04em;
  font-size:.96rem;
  padding: 15px 28px;
  background: var(--bg); color: var(--fg);
  border-radius: 50px; border:0; cursor:pointer;
  text-transform: uppercase;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow: 0 10px 26px -10px rgba(230,57,70,.7);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -12px rgba(230,57,70,.85); }
.btn:active { transform: translateY(0); }
.btn--amber { --bg: var(--amber); --fg: var(--ink); box-shadow: 0 10px 26px -10px rgba(255,194,51,.6); }
.btn--amber:hover { box-shadow: 0 18px 36px -12px rgba(255,194,51,.8); }
.btn--ghost {
  background: transparent; color: var(--paper);
  border: 2px solid rgba(255,255,255,.28); box-shadow:none;
}
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--paper); box-shadow:none; }
.btn i { font-size:1.05em; }

/* ---------- UK number plate (signature device) ---------- */
.plate {
  display:inline-flex; align-items:center; gap:.4ch;
  font-family: var(--display);
  letter-spacing: .06em;
  background: var(--plate-yellow);
  color: var(--plate-black);
  border: 2px solid #d9b400;
  border-radius: 7px;
  padding: .42em .7em .34em;
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 8px 22px -10px rgba(0,0,0,.7);
  position: relative;
  white-space: nowrap;
}
.plate--white { background: var(--plate-white); border-color:#cfcfcf; }
/* GB/euro band */
.plate::before {
  content:"GB";
  display:grid; place-items:end center;
  align-self:stretch;
  background: #063298; color:#fff;
  font-family: var(--body); font-weight:800; font-size:.5em;
  padding: .25em .35em; margin: -.42em .55em -.34em -.7em;
  border-radius: 5px 0 0 5px;
  letter-spacing:0;
}
.plate--white::before { content:"GB"; }
a.plate { transition: transform .2s var(--ease); }
a.plate:hover { transform: translateY(-2px) rotate(-1deg); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--gut);
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s;
}
.nav.scrolled {
  background: rgba(14,17,22,.86);
  backdrop-filter: blur(14px) saturate(140%);
  padding: 12px var(--gut);
  box-shadow: 0 1px 0 var(--line), var(--shadow);
}
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-size:1.55rem; letter-spacing:1px; white-space:nowrap; }
.brand .mark {
  width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
  background: var(--red); color:#fff; font-size:1.05rem; letter-spacing:0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.brand .mark::after { content:"OM"; }
.nav-links { display:flex; align-items:center; gap:30px; list-style:none; }
.nav-links a {
  font-weight:600; font-size:.95rem; color:var(--paper-dim);
  position:relative; padding:4px 0; transition:color .25s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--paper); }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--red);
  transition:width .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:16px; }
.nav-call { display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:var(--paper); }
.nav-call i { color:var(--amber); }
.burger {
  display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--paper);
  font-size:1.5rem;
}

/* ---------- Hero ---------- */
.hero {
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding: 140px var(--gut) 90px;
  overflow:hidden;
}
.hero::before {
  /* diagonal hazard slash */
  content:""; position:absolute; top:0; right:-10%; width:46%; height:100%;
  background: repeating-linear-gradient(45deg, rgba(255,194,51,.10) 0 22px, transparent 22px 44px);
  transform: skewX(-12deg); transform-origin:top right; pointer-events:none;
  mask-image: linear-gradient(to left, #000, transparent);
}
.hero-inner { position:relative; max-width: 920px; }
.hero h1 { margin: 18px 0 0; }
.hero h1 .accent { color: var(--red); }
.hero .lead { margin: 22px 0 0; }
.hero-cta { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:34px; }
.hero-plate { margin-top:30px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-plate .label { font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fog); font-weight:700; }

/* ---------- Trust bar ---------- */
.trust {
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.trust .container { display:flex; flex-wrap:wrap; gap:10px 38px; padding-block:22px; align-items:center; justify-content:space-between; }
.trust-item { display:flex; align-items:center; gap:.7rem; font-weight:600; color:var(--paper-dim); font-size:.96rem; }
.trust-item i { color:var(--amber); font-size:1.2rem; }
.trust-item strong { color:var(--paper); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; position:relative; }
.section--alt { background: linear-gradient(180deg, var(--steel-2), var(--steel)); border-block:1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: 54px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head.center .eyebrow { justify-content:center; }
.section-head h2 { margin:14px 0 16px; }

/* ---------- Service cards ---------- */
.svc-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:26px; }
.svc-card {
  position:relative; background: var(--steel-2); border:1px solid var(--line);
  border-radius: var(--r-lg); padding: 38px 32px; overflow:hidden;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.svc-card::after {
  content:""; position:absolute; top:0; left:0; width:100%; height:4px;
  background: linear-gradient(90deg, var(--red), var(--amber)); transform:scaleX(0);
  transform-origin:left; transition:transform .4s var(--ease);
}
.svc-card:hover { transform: translateY(-10px); border-color: var(--steel-3); box-shadow: var(--shadow-2); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-icon {
  width:62px; height:62px; border-radius:14px; display:grid; place-items:center;
  background: radial-gradient(circle at 30% 25%, var(--steel-3), var(--ink));
  border:1px solid var(--line); color:var(--amber); font-size:1.5rem; margin-bottom:22px;
}
.svc-card h3 { color:var(--paper); margin-bottom:12px; }
.svc-card p { font-size:.98rem; }
.svc-card .more { margin-top:18px; display:inline-flex; gap:.5rem; align-items:center; color:var(--red); font-weight:800; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; }
.svc-card .more i { transition: transform .25s var(--ease); }
.svc-card:hover .more i { transform: translateX(5px); }

/* ---------- Process steps ---------- */
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:24px; counter-reset:step; }
.step { position:relative; padding:30px 26px; background:var(--steel-2); border:1px solid var(--line); border-radius:var(--r); }
.step::before {
  counter-increment:step; content:"0" counter(step);
  font-family:var(--display); font-size:2.4rem; color:var(--red); line-height:1; display:block; margin-bottom:14px;
}
.step h3 { color:var(--paper); font-size:1.15rem; margin-bottom:8px; }
.step p { font-size:.95rem; }

/* ---------- Feature list (why choose) ---------- */
.feat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px 40px; }
.feat { display:flex; gap:16px; align-items:flex-start; }
.feat i { color:var(--amber); font-size:1.4rem; margin-top:3px; flex:none; }
.feat h3 { color:var(--paper); font-size:1.1rem; margin-bottom:4px; }
.feat p { font-size:.95rem; }

/* ---------- Areas ---------- */
.areas { display:flex; flex-wrap:wrap; gap:16px; }
.area-plate {
  font-family:var(--display); letter-spacing:.05em; font-size:1.35rem;
  background:var(--plate-yellow); color:var(--plate-black);
  border:2px solid #d9b400; border-radius:7px; padding:.4em .8em .32em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 8px 22px -12px rgba(0,0,0,.7);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.area-plate:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 16px 30px -14px rgba(0,0,0,.8); }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:24px; text-align:center; }
.stat .num { font-family:var(--display); font-size:clamp(2.6rem,6vw,4rem); color:var(--paper); line-height:1; }
.stat .num span { color:var(--red); }
.stat .lbl { color:var(--fog); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; margin-top:8px; }

/* ---------- FAQ ---------- */
.faq { max-width:840px; margin-inline:auto; }
.faq details {
  border:1px solid var(--line); border-radius:var(--r); background:var(--steel-2);
  margin-bottom:14px; overflow:hidden; transition:border-color .25s;
}
.faq details[open] { border-color:var(--steel-3); }
.faq summary {
  list-style:none; cursor:pointer; padding:22px 26px; font-weight:700; color:var(--paper);
  display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:1.05rem;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"\002B"; font-family:var(--display); color:var(--amber); font-size:1.6rem; transition:transform .3s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .answer { padding:0 26px 24px; color:var(--paper-dim); }
.faq .answer p + p { margin-top:.8em; }

/* ---------- CTA band ---------- */
.cta-band { position:relative; background: linear-gradient(120deg, var(--red-deep), var(--red)); overflow:hidden; }
.cta-band::before {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 18px, transparent 18px 36px);
  mask-image: linear-gradient(to right, transparent, #000);
}
.cta-band .container { position:relative; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; padding-block:54px; }
.cta-band h2 { color:#fff; max-width:18ch; }
.cta-band .lead { color:rgba(255,255,255,.92); }
.cta-actions { display:flex; flex-wrap:wrap; gap:14px; }
.cta-band .btn--amber { box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }

/* ---------- Contact / info ---------- */
.info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:22px; }
.info-card { background:var(--steel-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; }
.info-card i { color:var(--amber); font-size:1.7rem; margin-bottom:14px; display:block; }
.info-card h3 { color:var(--paper); font-size:1.2rem; margin-bottom:8px; }
.info-card p, .info-card a { color:var(--paper-dim); }
.info-card a:hover { color:var(--amber); }

/* ---------- Form ---------- */
.form { display:grid; gap:18px; max-width:640px; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--paper-dim); }
.field input, .field select, .field textarea {
  background:var(--steel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 16px; color:var(--paper); font-family:var(--body); font-size:1rem; transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(230,57,70,.2);
}
.field textarea { resize:vertical; min-height:130px; }

/* ---------- Map ---------- */
.map-embed { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-height:340px; height:100%; }
.map-embed iframe { width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.3) contrast(1.05); }

/* ---------- Breadcrumb ---------- */
.crumbs { padding: 110px var(--gut) 0; }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; font-size:.85rem; color:var(--fog); }
.crumbs a:hover { color:var(--amber); }
.crumbs li:not(:last-child)::after { content:"/"; margin-left:.5rem; color:var(--line); }

/* ---------- Footer ---------- */
.footer { background:var(--ink); border-top:1px solid var(--line); padding: 70px 0 0; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer h4 { font-family:var(--body); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem; color:var(--amber); margin-bottom:18px; }
.footer ul { list-style:none; display:grid; gap:10px; }
.footer a, .footer p { color:var(--fog); font-size:.95rem; }
.footer a:hover { color:var(--paper); }
.footer .brand { margin-bottom:16px; }
.footer-bottom { border-top:1px solid var(--line); margin-top:54px; padding:24px var(--gut); text-align:center; color:var(--fog); font-size:.85rem; }
.footer-bottom .container { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-inline:0; }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position:fixed; left:0; right:0; bottom:0; z-index:1100; display:none;
  grid-template-columns:1fr 1fr;
  background: rgba(14,17,22,.95); backdrop-filter: blur(10px); border-top:1px solid var(--line);
}
.callbar a { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:15px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; }
.callbar a:first-child { background:var(--red); color:#fff; }
.callbar a:last-child { color:var(--paper); }
.callbar i { font-size:1.05rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Utilities ---------- */
.grid-2 { display:grid; grid-template-columns: 1.1fr .9fr; gap:clamp(30px,5vw,70px); align-items:center; }
.mt-s{margin-top:14px}.mt{margin-top:26px}.mt-l{margin-top:44px}
.prose p{margin-bottom:1.1em}
.prose h3{color:var(--paper); margin:1.6em 0 .5em}
.prose ul{margin:0 0 1.1em 1.2em; color:var(--paper-dim)} .prose li{margin-bottom:.5em}
.tag { display:inline-block; background:var(--steel-3); border:1px solid var(--line); color:var(--paper-dim); font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:50px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display:none; }
  .burger { display:block; }
  .nav.open .nav-links {
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:rgba(14,17,22,.98); backdrop-filter:blur(14px); padding:22px var(--gut); gap:18px;
    border-bottom:1px solid var(--line);
  }
  .grid-2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:32px; }
  .cta-band .container { flex-direction:column; align-items:flex-start; }
  .callbar { display:grid; }
  body { padding-bottom:54px; }
  .form .row { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns:1fr; }
  .trust .container { justify-content:flex-start; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}