/* ===========================================================
   CARSTADT — design system
   Premium body & paint shop. Graphite + white, signal-red accent.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root{
  /* palette — warm-neutral graphite & off-white */
  --ink:        oklch(0.21 0.012 250);   /* near-black graphite */
  --ink-2:      oklch(0.30 0.012 250);
  --steel:      oklch(0.48 0.012 250);   /* muted body text */
  --steel-2:    oklch(0.62 0.010 250);
  --line:       oklch(0.90 0.004 250);   /* hairlines */
  --line-2:     oklch(0.94 0.004 250);
  --paper:      oklch(0.985 0.003 95);   /* warm white bg */
  --paper-2:    oklch(0.965 0.004 95);   /* card / alt section */
  --white:      #ffffff;

  /* dark surfaces */
  --night:      oklch(0.20 0.013 255);
  --night-2:    oklch(0.25 0.013 255);

  /* accent — signal red (automotive). Single source of truth. */
  --accent:     oklch(0.575 0.205 28);
  --accent-ink: oklch(0.50 0.20 28);
  --accent-soft:oklch(0.96 0.03 30);

  --ok:         oklch(0.62 0.14 155);

  /* type */
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;

  /* spacing rhythm */
  --r: 4px;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(20,22,30,.05), 0 1px 1px rgba(20,22,30,.04);
  --shadow: 0 8px 30px -12px rgba(20,22,30,.18), 0 2px 6px rgba(20,22,30,.05);
  --shadow-lg: 0 30px 70px -30px rgba(20,22,30,.35), 0 8px 24px -12px rgba(20,22,30,.14);

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:var(--paper);
  font-size:17px; line-height:1.6; font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent);color:#fff}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:.98;letter-spacing:.01em;
  text-transform:uppercase;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0;text-wrap:pretty}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,120px)}
.eyebrow{
  font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent);display:inline-block}
.lead{font-size:clamp(18px,2vw,21px);color:var(--steel);line-height:1.65;font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 24px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease, background .2s ease, box-shadow .2s, border-color .2s, color .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px var(--accent)}
.btn-primary:hover{background:var(--accent-ink);box-shadow:0 12px 26px -10px var(--accent)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--white)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.btn-light:hover{background:rgba(255,255,255,.18)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}
.btn-lg{padding:16px 30px;font-size:19px}

/* ---------- placeholder image (striped) ---------- */
.ph{
  position:relative;overflow:hidden;background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 14px, var(--white) 14px 28px);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--steel-2);
}
.ph::after{
  content:attr(data-label);font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--steel-2);
  padding:6px 10px;background:rgba(255,255,255,.7);border-radius:6px;border:1px solid var(--line);
}

/* image-slot theming */
image-slot{--slot-bg:var(--paper-2);box-shadow:var(--shadow-sm)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line-2);transition:box-shadow .2s}
.hdr.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(0,0,0,.3)}
.hdr-in{display:flex;align-items:center;gap:28px;height:74px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;
  font-size:28px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);line-height:1}
.brand .bar{width:5px;height:28px;background:var(--accent);transform:skewX(-14deg);flex:none}
.brand .tag{font-family:var(--body);font-weight:600;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--steel-2);margin-top:4px;display:block;white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:8px 13px;border-radius:6px;transition:background .15s,color .15s}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a.active{color:var(--accent)}
.hdr-actions{display:flex;align-items:center;gap:14px}

/* language switcher */
.lang{display:flex;align-items:center;gap:2px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:8px;padding:3px}
.lang button{border:0;background:transparent;font-family:var(--body);font-weight:700;font-size:12px;
  letter-spacing:.04em;color:var(--steel);padding:5px 9px;border-radius:4px;cursor:pointer;transition:.15s}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- footer ---------- */
.ftr{background:var(--night);color:#fff;padding-block:72px 32px;margin-top:0}
.ftr a{color:rgba(255,255,255,.7);transition:color .15s}
.ftr a:hover{color:#fff}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
.ftr h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
  font-weight:600;margin-bottom:18px;font-family:var(--display)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:15px}
.ftr .brand{color:#fff;font-size:26px}
.ftr .brand .tag{color:rgba(255,255,255,.45)}
.ftr-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;color:rgba(255,255,255,.5)}

/* ---------- utilities ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.muted{color:var(--steel)}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  font-family:var(--display);padding:6px 12px;border-radius:100px;background:var(--paper-2);
  border:1px solid var(--line);color:var(--ink-2)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:920px){
  .nav,.hdr-actions .lang{display:none}
  .burger{display:flex}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:32px}
  .cols-3,.cols-4{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto}
}