/* Werkstatt Lenz — concept car repair shop site (kit variant "workshop": several services in one visit,
   wait vs. drop-off, HU only on inspector days).
   Type: Archivo only (variable width): wide and heavy for display like tyre-wall lettering, normal width for text.
   Colour 60-30-10: concrete grey / petrol black / signal orange (actions only).
   Signature: the fixed-price job card (rows add to the visit), the photo-approval messages, the number-plate field. */

@font-face { font-family: "Archivo"; src: url("media/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bg: #eceeec;
  --bg-rgb: 236, 238, 236;
  --band: #dfe3e1;
  --ink: #121c22;
  --muted: #4c585e;
  --line: rgba(18, 28, 34, .16);
  --accent: #a63f0c;
  --accent-hi: #8a3409;
  --on-accent: #fff8f2;
  --signal: #ff9d5c;
  --live: #2f7d4a;
  --live-halo: rgba(47, 125, 74, .22);
  --warn: #b0322a;
  --hero-text: #f6f7f6;
  --hero-bg: #0d1418;
  --scrim: 10, 16, 20;
  --bar-solid: rgba(236, 238, 236, .92);
  --paper: #f7f8f7;
  --paper-ink: #121c22;
  --paper-field: #ffffff;
  --paper-line: #cfd5d3;
  --ink-soft: #4c585e;
  --ink-faint: #56626a;
  --ink-off: #9aa3a6;
  --on-dark-soft: #b9c2c4;
  --plate-blue: #1d4ea3;
  --radius: 3px;
  --radius-sheet: 12px;
}

em { font-style: normal; color: var(--accent); }
.h2, .hero-h, .foot-h, .sheet-h, .done-h, .h3, .free-h, .logo { font-weight: 760; font-stretch: 112%; letter-spacing: -.03em; }
.h2, .foot-h { line-height: .98; }
.h3 { font-size: var(--t-md); line-height: 1.2; letter-spacing: -.015em; }
.btn { font-weight: 640; letter-spacing: 0; }
.logo { display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--t-lg); font-stretch: 125%; font-weight: 820; letter-spacing: -.02em; }
.logo span { font: 500 var(--t-sm)/1 var(--sans); font-stretch: 100%; letter-spacing: .01em; opacity: .8; }
@media (max-width: 380px) { .logo span { display: none; } }

/* hero: dark wheel close-up, words sit in the black on the left */
.hero { --dim: .05; }
.hero-h { font-size: clamp(var(--t-2xl), 10vw, 6.5rem); line-height: .94; max-width: 11ch; }
.hero-h em { display: block; color: var(--signal); }
.hero .today::before { background: #7fd29a; box-shadow: 0 0 0 4px rgba(127, 210, 154, .25); }
.hero-lead { max-width: 40ch; }

/* free-slot strip: next free wheel changes, season line */
.free { background: var(--ink); color: var(--bg); }
.free-in { display: grid; gap: 20px; padding-top: 40px; padding-bottom: 40px; }
.free-h { margin: 0; font-size: var(--t-xl); line-height: 1; }
.free-text p { margin: 8px 0 0; color: var(--on-dark-soft); max-width: 52ch; }
.free-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.free-slots:empty { display: none; }
.free-slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 64px; padding: 10px 16px;
  border: 1px solid rgba(236, 238, 236, .26); border-radius: var(--radius);
  background: transparent; color: var(--bg); cursor: pointer; text-align: left;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.free-slot small { font-size: var(--t-sm); color: var(--on-dark-soft); transition: color .2s var(--ease); }
.free-slot b { font: 760 var(--t-lg)/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.free-slot:active { transform: scale(.97); }
@media (hover: hover) { .free-slot:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); } .free-slot:hover small { color: var(--ink); } }
.free-all { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; color: var(--bg); }
@media (min-width: 720px) { .free-slots { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) {
  .free-in { grid-template-columns: 5fr 7fr auto; align-items: center; gap: 40px; }
  .free-all { justify-self: end; }
}

/* fixed prices: a job card, every row books that job */
.prices-head { display: grid; gap: 20px; margin-bottom: 56px; }
.prices-head .lead { margin: 0; max-width: 46ch; }
@media (min-width: 960px) { .prices-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; } }
.prices-grid { display: grid; gap: 56px; }
.job { border-top: 2px solid var(--ink); }
.job-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "name time";
  column-gap: 20px; align-items: baseline;
  padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: none;
  text-align: left; cursor: pointer; color: var(--ink); font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.job-row > span:first-child { grid-area: name; font-size: var(--t-md); line-height: 1.3; font-weight: 560; }
.job-row > span:nth-child(2) { grid-area: time; justify-self: end; font-size: var(--t-sm); color: var(--muted); }
.job-row > span:last-child { grid-area: price; justify-self: end; font: 760 var(--t-md)/1.2 var(--display); font-stretch: 112%; white-space: nowrap; }
.job-row small { display: block; margin-top: 4px; font-size: var(--t-sm); font-weight: 400; line-height: 1.4; color: var(--muted); }
.job-head { display: none; cursor: default; padding: 10px 0; color: var(--muted); }
.job .job-head > span { font: 500 var(--t-sm)/1.2 var(--sans); font-stretch: 100%; color: var(--muted); }
@media (hover: hover) { .job-row:not(.job-head):hover { color: var(--accent); } }
@media (min-width: 640px) {
  .job-row { grid-template-columns: 1fr 5.5rem 6.5rem; grid-template-areas: "name time price"; }
  .job-row > span:nth-child(2) { font-size: var(--t-base); }
  .job-head { display: grid; }
}
.pnote { margin: 20px 0 0; font-size: var(--t-sm); max-width: 60ch; }
.prices-media video { aspect-ratio: 4 / 5; max-width: 520px; }
@media (min-width: 960px) { .prices-grid { grid-template-columns: 7fr 5fr; gap: 96px; align-items: start; } .prices-media { position: sticky; top: 104px; } }

/* photo approval: messages like on the phone */
.ok { background: var(--band); padding: var(--section) 0; }
.ok-in { display: grid; gap: 56px; align-items: center; }
.ok-text .lead { margin: 24px 0 0; max-width: 40ch; }
.ok-media video { aspect-ratio: 1; }
.sms { display: grid; gap: 8px; max-width: 400px; margin-top: 40px; }
.sms p { margin: 0; display: grid; gap: 6px; max-width: 86%; padding: 12px 14px; border-radius: 14px; line-height: 1.4; }
.sms time { font-size: var(--t-sm); color: var(--muted); justify-self: end; font-variant-numeric: tabular-nums; }
.sms-in { justify-self: start; background: var(--paper-field); color: var(--ink); border-bottom-left-radius: 4px; }
.sms-in img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.sms-out { justify-self: end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; font-weight: 700; }
.sms-out time { color: inherit; opacity: .85; }
@media (min-width: 960px) {
  .ok-in { grid-template-columns: 6fr 5fr; gap: 96px; align-items: start; }
  .ok-media { position: sticky; top: 104px; }
  .ok-media video { aspect-ratio: 4 / 5; }
}

/* wait or drop off: full-width video band */
.drop { position: relative; isolation: isolate; overflow: hidden; color: var(--hero-text); background: var(--hero-bg); }
.drop-media { position: absolute; inset: 0; z-index: -1; }
.drop-media video { width: 100%; height: 100%; object-fit: cover; }
.drop-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--scrim), .9) 0%, rgba(var(--scrim), .62) 60%, rgba(var(--scrim), .35) 100%); }
.drop-in { padding-top: clamp(120px, 16vw, 216px); padding-bottom: clamp(120px, 16vw, 216px); }
.drop .h2 { max-width: 14ch; }
.drop .h2 em { color: var(--signal); }
.drop-two { display: grid; gap: 32px; margin-top: 48px; max-width: 880px; }
.drop-two p { margin: 12px 0 0; max-width: 38ch; color: #d3d9da; font-size: var(--t-base); line-height: 1.55; }
.drop-two > div { padding-top: 20px; border-top: 2px solid var(--signal); }
@media (min-width: 720px) { .drop-two { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* visit */
.visit { padding: var(--section) 0; }
.visit-in { display: grid; gap: 64px; }
.today-band { margin: 24px 0 0; }
.visit .lead { margin: 16px 0 32px; max-width: 36ch; }
@media (min-width: 960px) { .visit-in { grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; } }

/* booking sheet: services as checkboxes (several per visit) */
.chips-multi .chip > span { justify-content: flex-start; }
.chips-multi .chip > span::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-right: -4px;
  border: 1.5px solid var(--paper-line); border-radius: 3px; background: var(--paper-field);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.chips-multi .chip-t { flex: 1 1 auto; }
.chips-multi .chip input:checked + span { background: var(--paper-field); color: var(--paper-ink); border-color: var(--paper-ink); box-shadow: inset 0 0 0 1px var(--paper-ink); }
.chips-multi .chip input:checked + span small { color: var(--ink-faint); opacity: 1; }
.chips-multi .chip > span { position: relative; }
.chips-multi .chip input:checked + span::before { border-color: var(--accent); background: var(--accent); }
.chips-multi .chip input:checked + span::after {
  content: ""; position: absolute; left: 23px; top: 50%; width: 6px; height: 11px; margin-top: -7px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.field-file input { padding: 10px 14px; min-height: 52px; cursor: pointer; }
.field-file input::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--paper-line); border-radius: var(--radius);
  background: var(--paper); color: var(--paper-ink); font: 500 var(--t-sm)/1 var(--sans); cursor: pointer;
}
.field-file[hidden] { display: none; }
.b-price { margin: 20px 0 0; font: 640 var(--t-base)/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.b-price:empty { display: none; }
.b-price + .btn-main { margin-top: 12px; }

/* number plate field: EU band + plate border */
.plate {
  display: flex; align-items: stretch; max-width: 300px;
  border: 2px solid var(--paper-ink); border-radius: 5px; background: var(--paper-field); overflow: hidden;
}
.plate b {
  flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; width: 28px; padding-bottom: 6px;
  background: var(--plate-blue); color: #fff; font: 700 var(--t-sm)/1 var(--sans);
}
.field .plate input {
  border: 0; border-radius: 0; background: transparent; min-height: 52px; padding: 0 14px;
  font: 700 1.333rem/1 var(--display); font-stretch: 88%; letter-spacing: .06em; text-transform: uppercase;
}
.field .plate input::placeholder { color: #7a8488; }
.field .plate input:focus { outline: none; }
.plate:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }