:root {
  --bg: #08090b;
  --panel: #111419;
  --panel-2: #171b21;
  --text: #f5f7fa;
  --muted: #b5beca;
  --line: #2b3038;
  --silver: #d9dde4;
  --red: #c41220;
  --red-dark: #820c14;
  --max: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; }
img { width: 100%; display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Same band as .section: the header used its own clamp() padding, so the
     logo and the menu sat inside a different column than the page below. */
  padding: 14px max(18px, calc((100% - var(--max)) / 2));
  background: rgba(8, 9, 11, .88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand-logo {
  width: 182px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.42));
}
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); font-size: 12px; }
.brand-location {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
}
/* margin-left:auto collects the nav and the actions into one block on the
   right. With space-between alone the nav floated in the leftover gap and
   shifted from page to page as the brand and buttons changed width. */
.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.header-actions::before {
  content: "";
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.16);
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.site-nav a:hover { color: #fff; }
.nav-toggle { display: none; }
/* A text link called "Kontakt" is a weak place to put the one action this
   site exists for. The number is the direct line; the button is for the
   people who would rather write, and it carries the reg.nr. field. */
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
}
.header-phone::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(196,18,32,.9);
}
.header-phone:hover { color: #ff5964; }
.header-cta { min-height: 42px; padding: 0 18px; font-size: 14px; }
/* Small laptops: too narrow for the full bar, too wide for the burger,
   which is where the header used to spill sideways. The number drops out
   first — the button is the one that has to survive. */
@media (min-width: 861px) and (max-width: 1030px) {
  .site-header { gap: 16px; }
  .site-nav { gap: 15px; }
  .header-phone { display: none; }
  .header-cta { padding: 0 14px; }
  .brand-location { display: none; }
}

/* Nine service pages in a flat bar overflowed the header below 1030px.
   They live behind one item now; the group keeps padding of its own so
   there is no dead gap between the button and the panel it opens. */
.nav-group { position: relative; padding-block: 14px; }
.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.nav-group-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.nav-group-toggle:hover,
.nav-group.is-current .nav-group-toggle { color: #fff; }
.nav-group.open .nav-group-toggle::after { transform: translateY(1px) rotate(-135deg); }
.nav-group-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 216px;
  padding: 8px;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
  z-index: 30;
}
.nav-group.open .nav-group-menu { display: grid; gap: 1px; }
.nav-group-menu a { padding: 9px 12px; }
.nav-group-menu a:hover,
.nav-group-menu a[aria-current="page"] { background: rgba(255,255,255,.07); color: #fff; }
@media (min-width: 861px) {
  .nav-group:hover .nav-group-menu,
  .nav-group:focus-within .nav-group-menu { display: grid; gap: 1px; }
}

.hero {
  position: relative;
  /* A flat 720px floor pushed the hero past the fold on short laptop
     screens; keep it on tall displays, follow the viewport below that. */
  min-height: min(720px, 86vh);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.045), transparent 25%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 48%, transparent 86%);
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  left: max(18px, calc((100vw - var(--max)) / 2));
  bottom: 42px;
  width: min(340px, 42vw);
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.28), transparent);
  box-shadow: 0 0 24px rgba(255,255,255,.24);
}
.hero-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 48%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(90deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.78) 44%, rgba(8,9,11,.18) 100%),
    linear-gradient(0deg, rgba(8,9,11,1) 0%, rgba(8,9,11,0) 32%),
    url("images/hero-desktop.jpg") 62% center / cover;
  z-index: -1;
  filter: saturate(.92) contrast(1.1) brightness(.86);
  transform: scale(1.018);
}
.hero-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .78;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes heroRoadDrift {
  from { transform: scale(1.018) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-1.2%, -.4%, 0); }
}
.hero-content, .section, .strip, .site-footer {
  width: min(var(--max), calc(100% - 36px));
  margin-inline: auto;
}
.hero-content { padding: clamp(44px, 8vh, 120px) 0 clamp(44px, 7vh, 92px); max-width: 760px; margin-left: max(18px, calc((100vw - var(--max)) / 2)); }
.eyebrow {
  margin: 0 0 12px;
  color: #ff5964;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 800;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.hero .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--red);
  box-shadow: 0 0 12px rgba(255,255,255,.42);
}
h1, h2, h3 { line-height: 1.05; margin: 0; letter-spacing: 0; }
/* Scale with the shorter viewport axis: on a wide but short laptop screen
   7vw alone pushed the headline to three lines and the hero past the fold. */
h1 { font-size: clamp(44px, min(6.2vw, 9.2vh), 86px); max-width: 760px; }
h2 { font-size: clamp(30px, 4vw, 52px); }
h3 { font-size: 22px; }
.lead {
  color: var(--silver);
  font-size: clamp(18px, 2vw, 23px);
  max-width: 680px;
}
/* Desktop only: mobile keeps its own hero rhythm. */
@media (min-width: 861px) {
  .hero-content .lead { margin: 14px 0 0; }
}
.hero-actions, .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero-reg-search {
  display: grid;
  gap: 10px;
  width: min(100%, 670px);
  margin-top: clamp(18px, 3.4vh, 30px);
  padding: 14px;
  border: 1px solid rgba(255,255,255,.18);
  /* Thin enough to read the workshop through it. The blur carries the
     legibility the opacity used to, so the label and the field still hold
     against whatever part of the photo ends up behind them. */
  background: linear-gradient(180deg, rgba(18,22,28,.56), rgba(8,10,14,.44));
  box-shadow: 0 26px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(1.15);
}
.hero-reg-search label {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.hero-reg-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.hero-reg-search input {
  min-height: 58px;
  border-color: rgba(255,255,255,.26);
  background: rgba(3,5,8,.84);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: inset 4px 0 0 #d8dde6;
}
.hero-reg-search input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(255,89,100,.38);
  outline-offset: 2px;
  border-color: rgba(255,89,100,.7);
}
.hero-reg-search .btn {
  min-height: 58px;
  white-space: nowrap;
}
.hero-reg-search p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.hero-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
}
.hero-secondary-actions a {
  color: var(--silver);
  font-weight: 800;
  text-decoration-color: rgba(255,255,255,.28);
}
.hero-secondary-actions a:hover { color: #fff; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 800;
  color: #fff;
  background: #161a20;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: linear-gradient(135deg, #f5f7fa, #aeb6c3);
  border-color: #f5f7fa;
  color: #08090b;
  box-shadow: 0 12px 32px rgba(255,255,255,.18);
}
.btn.primary:hover { background: #ffffff; }
.btn.secondary { background: #f3f5f8; color: #090a0c; border-color: #f3f5f8; }
.btn.ghost { background: transparent; }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.hero-facts span, .badge-grid div {
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  padding: 10px 13px;
  color: var(--silver);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.section { padding: 88px 0; }
.strip { padding: 26px 0; border-block: 1px solid rgba(255,255,255,.08); }
.section-head {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin-bottom: 34px;
}
.section-head p, .section > p, .split p, .seo-text p { color: var(--muted); }
.badge-grid, .service-grid, .result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.card, .result-card, .review-card, .form-panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
}
.card {
  min-height: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card .card-image-link {
  display: block;
  position: relative;
  margin: -22px -22px 4px;
  overflow: hidden;
  text-decoration: none;
  background: #07090c;
}
.card .card-image-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.52) 100%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.16), transparent 28%);
}
.card .card-image-link::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  width: 92px;
  height: 34px;
  opacity: .82;
  pointer-events: none;
  background: url("images/jm-logo-original-white.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.72));
}
.card .card-image-link img {
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  width: 100%;
  filter: saturate(1.06) contrast(1.04) brightness(.96);
  transition: transform .22s ease, filter .22s ease;
}
.card .card-image-link:hover img,
.card .card-image-link:focus-visible img {
  filter: saturate(1.12) contrast(1.08) brightness(1.02);
  transform: scale(1.025);
}
.card p, .result-card p, .review-card p { color: var(--muted); margin: 0; }
.card a:not(.card-image-link) { color: #fff; font-weight: 800; text-decoration-color: var(--red); margin-top: auto; }

.split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
  gap: 42px;
  align-items: start;
}
.check-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.check-list li::before { content: "✓"; color: #ff5964; margin-right: 10px; font-weight: 900; }
.form-panel {
  padding: 24px;
  display: grid;
  gap: 14px;
}
.compact-section { padding-top: 0; }
.tuning-calculator { gap: 18px; }
.calculator-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.calculator-topline span {
  color: #ff5964;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 900;
}
.calculator-topline strong { color: #fff; }
.reg-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}
.stage-search {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stage-search button { grid-column: 1 / -1; }
.calculator-message {
  min-height: 0;
  color: var(--silver);
}
.calculator-message .alert {
  border: 1px solid rgba(255,255,255,.1);
  padding: 13px 14px;
  background: #101820;
}
.calculator-message .alert-success { border-color: rgba(65, 185, 112, .45); }
.calculator-message .alert-warning { border-color: rgba(255, 189, 46, .45); }

/* Vehicle card — the reg.nr. lookup result, shown in place of sending the
   visitor off to regdata.no. */
.vehicle-card:empty { display: none; }
.vehicle-card {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(196,18,32,.10), rgba(255,255,255,.03));
  padding: 18px;
  margin-top: 4px;
}
.vehicle-card.is-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}
.vehicle-card .spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: vehicle-spin .7s linear infinite;
}
@keyframes vehicle-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vehicle-card .spinner { animation-duration: 2.4s; }
}
.vehicle-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 14px;
}
.vehicle-card-plate {
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: #0d1016;
  font-size: .95rem;
}
.vehicle-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}
.vehicle-card-sub {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}
.vehicle-card-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0;
}
.vehicle-card-specs div {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 8px;
}
.vehicle-card-specs dt {
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 3px;
}
.vehicle-card-specs dd {
  margin: 0;
  font-weight: 600;
}
.vehicle-card-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .82rem;
}
.vehicle-card-flag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 9px;
  font-size: .78rem;
  border: 1px solid rgba(255, 189, 46, .45);
  background: rgba(255, 189, 46, .08);
}
.hero-reg-status:empty { display: none; }
.hero-reg-status {
  margin: 8px 0 0;
  font-size: .88rem;
  color: #ffd479;
}

.booking-section { align-items: start; }
.booking-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.slot-button {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: #090d12;
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.slot-button span {
  font-weight: 900;
  text-transform: capitalize;
}
.slot-button strong {
  color: #dce3ec;
  font-size: 14px;
}
.slot-button:hover,
.slot-button.selected {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}
.slot-button.selected {
  border-color: rgba(90, 212, 134, .72);
  background: rgba(50, 145, 85, .2);
  box-shadow: inset 5px 0 0 #5ad486;
}
.slot-button.selected strong { color: #bfe8cb; }
.slot-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}
.selected-slot {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--silver);
  font-weight: 850;
}
.checkbox-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--silver);
  line-height: 1.5;
}
.checkbox-label input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}
.booking-admin-page {
  min-height: 100svh;
  background: radial-gradient(circle at 78% 0%, rgba(255,255,255,.08), transparent 30%), #08090b;
}
.admin-app {
  width: min(960px, calc(100% - 24px));
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 0 32px;
}
.admin-app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  background: rgba(8,9,11,.92);
  backdrop-filter: blur(14px);
}
.admin-app-header > div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
}
.admin-unread-badge {
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(8,9,11,.95);
}
.admin-unread-badge[hidden] {
  display: none;
}
.admin-app-header img { width: 112px; }
.admin-login,
.admin-card {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: var(--panel);
}
.admin-login {
  min-height: calc(100svh - 110px);
  display: grid;
  align-content: center;
  gap: 18px;
}
.admin-login h1 {
  margin: 0;
  font-size: clamp(42px, 12vw, 78px);
  line-height: .95;
}
.admin-login form,
.admin-dashboard {
  display: grid;
  gap: 14px;
}
/* The hidden attribute has to beat the layout rules above it — enumerating
   elements one by one only works until the next one is added. */
[hidden] {
  display: none !important;
}
.admin-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: #0b0e13;
}
.admin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}
.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.admin-card h2 {
  margin: 0;
  font-size: clamp(28px, 7vw, 48px);
  line-height: 1;
}
.admin-hint {
  margin: 10px 0 18px;
  color: var(--muted);
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.admin-day {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}
.admin-day h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
.admin-day h3 span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.admin-slot {
  min-height: 58px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #080b10;
  color: var(--text);
  text-align: left;
  font: inherit;
}
.admin-slot span {
  font-size: 18px;
  font-weight: 950;
}
.admin-slot strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.admin-slot.open {
  border-color: rgba(90, 212, 134, .65);
  background: rgba(50, 145, 85, .18);
}
.admin-slot.open strong { color: #bfe8cb; }
.admin-slot.booked {
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.12);
  cursor: not-allowed;
}
.admin-slot.booked strong { color: #fff; }
.booking-list {
  display: grid;
  gap: 12px;
}
.booking-groups {
  display: grid;
  gap: 20px;
}
.booking-groups h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
.admin-booking {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: #0b0f15;
}
.admin-booking.new {
  border-color: rgba(90, 212, 134, .6);
  box-shadow: inset 4px 0 0 #5ad486;
}
/* Overview tiles. Numbers the shop actually acts on: what is coming, what is
   unbooked, what needs a reply. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.stat {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: #0b0f15;
  border-left: 3px solid rgba(255,255,255,.18);
}
.stat dt {
  margin: 0 0 4px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.stat dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
}
.stat-warn { border-left-color: #ffbd2e; }
.stat-warn dd { color: #ffe0a3; }
.stat-muted dd { color: var(--muted); }

/* Eight bars do not justify a charting library. */
.stat-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 6px;
  height: 108px;
  /* Side padding so the first and last date labels, which are wider than a
     narrow bar, have somewhere to sit instead of being clipped at the edge. */
  padding: 8px 14px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.stat-bar {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  justify-items: center;
  gap: 3px;
  height: 100%;
  min-width: 0;
}
.stat-bar span {
  display: block;
  width: 100%;
  min-height: 2px;
  background: linear-gradient(180deg, var(--red), rgba(196,18,32,.45));
  border-top: 1px solid rgba(255,255,255,.25);
}
/* A week with no bookings should read as empty, not as a dash — at 26 weeks the
   2px stubs lined up into a dotted rule across the baseline. */
.stat-bar.is-zero span {
  min-height: 0;
  background: none;
  border-top: 1px solid rgba(255,255,255,.14);
}
/* Keep the newest label inside the chart rather than hanging off the edge. */
.stat-bar.is-last em { transform: translateX(-4px); }
.stat-bar b {
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}
.stat-bar em {
  font-size: .6rem;
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
}
.stat-chart-label {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--muted);
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .stat { padding: 9px 10px; }
  .stat dd { font-size: 1.05rem; }
  .stat-bar em { font-size: .52rem; }
}

/* An enquiry whose email notification never went out — nobody has been told
   about this lead except this screen, so it has to stand out from the rest. */
.admin-booking.needs-followup {
  border-color: rgba(196, 18, 32, .75);
  box-shadow: inset 4px 0 0 var(--red);
}
.admin-warn {
  margin: 0;
  padding: 8px 10px;
  font-size: .82rem;
  color: #ffd0d4;
  background: rgba(196, 18, 32, .16);
  border: 1px solid rgba(196, 18, 32, .45);
}
.admin-enquiry-note {
  white-space: pre-wrap;
  color: var(--silver);
  padding: 10px;
  background: rgba(255,255,255,.04);
  border-left: 2px solid rgba(255,255,255,.18);
}
.admin-unsaved {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: .82rem;
  color: #ffe0a3;
  background: rgba(255, 189, 46, .12);
  border: 1px solid rgba(255, 189, 46, .45);
}
/* Unsaved work should be visible on the button you need to press. */
.btn.has-changes {
  animation: admin-save-pulse 2s ease-in-out infinite;
}
@keyframes admin-save-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 189, 46, .55); }
  50% { box-shadow: 0 0 0 6px rgba(255, 189, 46, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.has-changes { animation: none; outline: 2px solid rgba(255, 189, 46, .8); }
}

.admin-booking h3,
.admin-booking p { margin: 0; }
.admin-booking span {
  color: #bfe8cb;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 900;
}
.admin-booking a {
  color: #fff;
  font-weight: 800;
}
.admin-booking-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-booking-links a {
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.admin-booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Conta panel on a booking or enquiry card. Set off by a rule above it so it
   reads as a separate concern from the booking itself. */
.conta-block {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #22272f;
}
.conta-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.conta-note.found { color: var(--silver); }
.conta-note.error { color: #ffb4b4; }
/* The card styles its own <span> as the small green status label. Inside the
   Conta panel a span is just text, so that styling is undone here. */
.conta-block span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.conta-block .conta-warn { color: #ffd8a8; font-weight: 650; }
.conta-create {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #262c36;
  background: #0b0d12;
}
.conta-create label { font-size: 13px; }
.conta-create input, .conta-create select { padding: 10px; }

.btn.danger {
  border-color: rgba(255, 120, 120, .45);
  color: #ffd0d0;
}
.btn.danger:hover {
  border-color: rgba(255, 120, 120, .8);
}
.admin-version {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.tuning-result {
  display: none;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 18px;
}
.tuning-result:not(:empty) { display: block; }
.tuning-result:not(:empty) {
  background: linear-gradient(180deg, rgba(196,18,32,.08), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.1);
  padding: 22px;
}
.result-lead-form {
  display: none;
  gap: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 18px;
}
.result-lead-form.show { display: grid; gap: 12px; justify-items: start; }
.result-lead-form p { color: var(--muted); margin: 0; max-width: 62ch; }
.result-lead-form .eyebrow { margin: 0; }
.result-lead-form h3 { font-size: 24px; }
.result-lead-form.show {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  padding: 20px;
}
.tuning-result table {
  width: 100%;
  border-collapse: collapse;
  color: var(--silver);
}
.tuning-result th,
.tuning-result td {
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px;
  text-align: left;
}
.tuning-result h1,
.tuning-result h2,
.tuning-result h3 { font-size: 24px; }
.stage-result {
  display: grid;
  gap: 18px;
}
.stage-result-head {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.stage-result-head span {
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 900;
}
.stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.stage-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.stage-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.stage-card-head span {
  display: inline-flex;
  min-width: 78px;
  justify-content: center;
  padding: 7px 10px;
  background: #f5f7fa;
  color: #08090b;
  font-weight: 950;
}
.stage-card-head strong {
  color: var(--silver);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stage-card p {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  margin: 0;
  color: var(--silver);
}
.stage-card b { color: #fff; }
.stage-note {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  font-size: 14px;
}
.stage-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.stage-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 46px;
}

/* The result and the lead form sit beside the intro column in the source, but
   they are full-width blocks: let them span the whole section so a tall result
   does not leave a long empty column next to it on desktop. */
.calculator-section > .tuning-result,
.calculator-section > .result-lead-form { grid-column: 1 / -1; }

/* Wide desktop: spend the width sideways instead of stacking. */
@media (min-width: 1080px) {
  .calculator-section {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 28px;
  }
  .tuning-calculator { padding: 26px 30px; }
  .stage-search { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Cap the track width so one or two stages do not stretch across the
     whole section; three or more still fill it. */
  .stage-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
    justify-content: start;
  }
}

/* Below that the section is one column again: keep the old rhythm, where the
   result blocks followed the panel closely. */
@media (min-width: 861px) and (max-width: 1079px) {
  .calculator-section { row-gap: 28px; }
}
@media (max-width: 860px) {
  .calculator-section { row-gap: 18px; }
  .calculator-section > .form-panel { margin-top: 24px; }
}

label { display: grid; gap: 7px; color: var(--silver); font-weight: 750; font-size: 14px; }
input, select, textarea {
  width: 100%;
  border: 1px solid #323944;
  background: #080a0e;
  color: #fff;
  padding: 13px 12px;
  font: inherit;
}
select .option-group { color: #ff5964; font-weight: 900; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Invoicing block on the booking form — set apart so it reads as "details for
   the invoice" rather than more of the same required questions. */
.form-fieldset {
  display: grid;
  gap: 14px;
  margin: 0;
  border: 1px solid #262c36;
  padding: 16px 14px 18px;
}
.form-fieldset legend {
  padding: 0 8px;
  color: var(--silver);
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.field-note { margin: -4px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.field-label { display: flex; align-items: baseline; gap: 8px; }
.field-optional {
  color: var(--muted);
  font-weight: 650;
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0;
}
/* Off-screen rather than display:none — a bot that skips hidden inputs would
   walk straight past the trap, and this one is meant to be walked into. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.form-status.success { color: #bfe8cb; }
.form-status.error { color: #ffb4b4; }
button:disabled {
  opacity: .62;
  cursor: wait;
  transform: none;
}
/* The search button is disabled for two different reasons: busy fetching
   (cursor: wait, above) and the result already being on screen. */
.stage-search .btn.is-hidden { display: none; }

.results-band {
  background: linear-gradient(135deg, rgba(196,18,32,.18), transparent 48%);
}
.result-card { padding: 24px; display: grid; gap: 10px; }
.result-card span { color: #ff5964; font-weight: 900; }
.review-stack { display: grid; gap: 14px; }
.review-card { padding: 20px; }
.review-card span { color: #ffbd2e; letter-spacing: 0; }

.seo-text {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.faq-list { display: grid; gap: 12px; margin-bottom: 24px; }
/* The homepage links into faq.html instead of repeating the answers, so
   these rows borrow the look of the details blocks they point at. */
.faq-links {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.faq-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid rgba(255,255,255,.09);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-weight: 850;
  transition: border-color .15s ease, background .15s ease;
}
.faq-links a::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-top: 2px solid #ff5964;
  border-right: 2px solid #ff5964;
  transform: rotate(45deg);
}
.faq-links a:hover {
  border-color: rgba(255,255,255,.24);
  background: var(--panel-2);
}
details {
  border: 1px solid rgba(255,255,255,.09);
  background: var(--panel);
  padding: 18px 20px;
}
summary { cursor: pointer; font-weight: 850; }
details p { color: var(--muted); margin-bottom: 0; }
.contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.site-footer {
  padding: 34px 0 92px;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}
.site-footer span { display: block; }
.mobile-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mobile-cta a {
  min-height: 52px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}
.mobile-cta a:first-child { background: #f4f6f8; color: #08090b; }

.page-hero {
  --hero-image: url("images/ecu-bench-jm.webp");
  --hero-pos: 50% 55%;
  padding: 96px 0 54px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(8,9,11,.94), rgba(8,9,11,.72)),
    var(--hero-image) center / cover;
}
.page-hero > div { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; max-width: 880px; }
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  background: rgba(8,9,11,.72);
  border: 1px solid rgba(255,255,255,.12);
}
/* Every service page used the same ECU bench photo. Each one now shows the
   work it describes — the same image as its card on the homepage. */
.page-chiptuning .page-hero { --hero-image: url("images/chiptuning-passenger-car-opt.jpg"); --hero-pos: 52% 60%; }
.page-diagnose .page-hero { --hero-image: url("images/diagnose-autel-pc-workshop-opt.jpg"); --hero-pos: 46% 55%; }
.page-utslipp .page-hero { --hero-image: url("images/dpf-egr-adblue-theme-opt.jpg"); --hero-pos: 50% 58%; }
.page-ecu .page-hero { --hero-image: url("images/ecu-cloning-tape-original-clone-v2-opt.jpg"); --hero-pos: 52% 58%; }
.page-varebil .page-hero { --hero-image: url("images/work-vehicle-pickup-opt.jpg"); --hero-pos: 48% 90%; }
.page-bobil .page-hero { --hero-image: url("images/bobil-workshop-clean-opt.jpg"); --hero-pos: 44% 92%; }
.page-traktor .page-hero { --hero-image: url("images/jm-car-tractor.webp"); --hero-pos: 46% 86%; }
.page-atv .page-hero { --hero-image: url("images/atv-utv-diagnostics-opt.jpg"); --hero-pos: 50% 72%; }
.page-bat .page-hero { --hero-image: url("images/boat-green-engines.webp"); --hero-pos: 54% 56%; }
.about-page .page-hero { --hero-image: url("images/about-hero.webp"); --hero-pos: 50% 92%; }
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}
.text-panel {
  display: grid;
  gap: 26px;
}
.text-panel p, .text-panel li { color: var(--muted); }
.media-article {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  gap: 24px;
  align-items: center;
}
.media-article::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 98px;
  height: 36px;
  opacity: .78;
  pointer-events: none;
  background: url("images/jm-logo-original-white.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.76));
}
.media-article img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--panel);
  filter: saturate(1.06) contrast(1.05) brightness(.96);
  box-shadow: 0 20px 46px rgba(0,0,0,.24);
}
.side-panel {
  position: sticky;
  top: 92px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.09);
  padding: 22px;
}
.side-panel nav { display: grid; gap: 10px; margin-top: 18px; }
.side-panel a { color: var(--silver); }
.qr-box {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px dashed #59616e;
  background: #0d1015;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}
.map {
  width: 100%;
  min-height: 360px;
  border: 1px solid rgba(255,255,255,.09);
}

@media (max-width: 860px) {
  body { padding-bottom: 74px; }
  .site-header {
    min-height: 64px;
    padding: 10px 14px;
    gap: 12px;
  }
  .site-nav {
    margin-left: 0;
    display: none;
    position: absolute;
    inset: 64px 0 auto 0;
    padding: 18px;
    background: #08090b;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .site-nav.open { display: grid; }
  .site-nav.open { gap: 4px; }
  .nav-group { padding-block: 0; }
  .nav-group-toggle { padding: 6px 0; }
  .nav-group-menu {
    position: static;
    min-width: 0;
    margin: 4px 0 8px;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-left: 2px solid rgba(255,255,255,.14);
    box-shadow: none;
  }
  .nav-group-menu a { padding: 8px 0; }
  .header-actions { display: none; }
  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    background: #151920;
    color: #fff;
    font-size: 22px;
  }
  .hero {
    min-height: calc(100svh - 64px);
    align-items: end;
  }
  .hero-content {
    width: min(100% - 28px, var(--max));
    padding: 24px 0 82px;
    margin-inline: auto;
  }
  /* Two scrims were stacked here, a vertical one and a horizontal one, and
     they multiply: the top left came out around 99% black with
     brightness(.86) still to come, so the photo never showed. One scrim
     now — light over the picture, dark under the words. */
  .hero-media {
    background:
      radial-gradient(circle at 68% 22%, rgba(255,255,255,.10), transparent 34%),
      linear-gradient(180deg,
        rgba(8,9,11,.10) 0%,
        rgba(8,9,11,.16) 18%,
        rgba(8,9,11,.44) 30%,
        rgba(8,9,11,.96) 40%,
        rgba(8,9,11,1) 46%),
      url("images/hero-mobile.jpg");
    /* The whole car and the sign behind it are wider than this box, so cover
       could only ever show a slice of them. The photo runs full width as a
       band across the top instead, and the scrim takes over where it ends. */
    background-size: 100% 100%, 100% 100%, 100% auto;
    background-position: center, center, center top;
    background-repeat: no-repeat;
    filter: saturate(1) contrast(1.04) brightness(1);
  }
  /* Let the photo be seen before the words start. */
  .hero-content { padding: 40px 0 44px; }
  /* Same treatment on the subpages — one rule, thanks to --hero-image. */
  .page-hero {
    background-image:
      linear-gradient(180deg,
        rgba(8,9,11,.26) 0%,
        rgba(8,9,11,.48) 24%,
        rgba(8,9,11,.88) 60%,
        rgba(8,9,11,.97) 100%),
      var(--hero-image);
    /* Under cover a landscape photo shows its full height in a portrait
       box, so sky and roof always survive the crop and the subject is a
       strip. Zooming past cover gives the position something to move. */
    background-size: 100% 100%, auto 148%;
    background-position: center, var(--hero-pos, 50% 55%);
    background-repeat: no-repeat, no-repeat;
  }
  .hero-motion { opacity: .45; }
  .brand-logo { width: 122px; }
  .brand-location { display: none; }
  .hero::after { bottom: 24px; width: 62vw; }
  .hero .eyebrow {
    max-width: 100%;
    padding: 6px 9px;
    font-size: 10px;
  }
  .hero .eyebrow::before {
    width: 7px;
    height: 7px;
  }
  .hero .lead {
    margin: 12px 0 0;
    max-width: 34rem;
  }
  .hero-reg-search { margin-top: 16px; }
  .hero-reg-search {
    padding: 12px;
    box-shadow: 0 18px 42px rgba(0,0,0,.34);
  }
  .hero-reg-search > div { grid-template-columns: 1fr; }
  .hero-reg-search input,
  .hero-reg-search .btn {
    min-height: 52px;
    font-size: 16px;
  }
  .hero-reg-search p { font-size: 12px; }
  .hero-secondary-actions {
    gap: 14px;
    margin-top: 12px;
    font-size: 14px;
  }
  .hero-facts {
    gap: 8px;
    margin-top: 18px;
  }
  .hero-facts span {
    font-size: 12px;
    padding: 8px 9px;
  }
  .badge-grid, .service-grid, .result-grid, .split, .content-grid, .media-article, .faq-links { grid-template-columns: 1fr; }
  /* Nine cards with photos is a very long scroll on a phone. Swipe through
     them instead: one card at a time, with the next one peeking so it is
     obvious there is more. Pure CSS — the touch behaviour is the browser's. */
  .card-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: -18px;
    padding: 0 18px 14px;
    scroll-padding-inline: 18px;
  }
  .card-rail > .card { scroll-snap-align: start; }
  /* height="400" on the img is a presentational hint, and it wins over an
     auto aspect-ratio — which is why the 16/10 above never applied. Freeing
     the height lets it, and halves how tall each card is. */
  .card-rail > .card img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
  .card-rail::-webkit-scrollbar { height: 4px; }
  .card-rail::-webkit-scrollbar-track { background: rgba(255,255,255,.07); }
  .card-rail::-webkit-scrollbar-thumb { background: var(--red); }
  .card-rail:focus-visible { outline: 2px solid #ff5964; outline-offset: 4px; }
  .form-row { grid-template-columns: 1fr; }
  .reg-search, .stage-search, .booking-slots { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: 1fr; }
  .booking-admin-page .admin-app {
    width: 100%;
  }
  .booking-admin-page .admin-app-header {
    padding: 6px 10px;
  }
  .booking-admin-page .admin-app-header img {
    width: 64px;
  }
  .booking-admin-page .admin-app-header .btn {
    min-height: 36px;
    padding: 0 10px;
  }
  .booking-admin-page .admin-dashboard {
    gap: 6px;
  }
  .booking-admin-page .admin-toolbar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 5px;
    padding: 6px;
    align-items: center;
  }
  .booking-admin-page .admin-toolbar label {
    grid-column: auto;
    order: 0;
  }
  .booking-admin-page .admin-toolbar .btn {
    min-height: 36px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
  }
  .booking-admin-page .admin-card {
    margin-top: 6px;
    padding: 7px;
  }
  .booking-admin-page .admin-card-head {
    /* Four action buttons and a heading do not fit on one 375px row — the
       heading was being squeezed to 73px with ~96px of text, so it ran into
       the buttons. Give each its own row. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    /* Cards differ: one puts its buttons in .admin-card-actions, another makes
       the button a direct child. Without this the direct child stretches to the
       full row. */
    justify-items: start;
    gap: 8px;
  }
  .booking-admin-page .admin-card-actions {
    justify-content: flex-start;
  }
  .booking-admin-page .admin-card h2 {
    font-size: 20px;
    line-height: 1;
  }
  .booking-admin-page .admin-card-head .btn {
    min-height: 34px;
    padding: 0 10px;
  }
  .booking-admin-page .admin-card-actions {
    gap: 5px;
  }
  .booking-admin-page .admin-card-actions .btn {
    min-height: 32px;
    padding: 0 8px;
    font-size: 10px;
  }
  .booking-admin-page .admin-hint {
    display: none;
  }
  .booking-admin-page .week-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .booking-admin-page .admin-day {
    grid-template-columns: 42px repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
  }
  .booking-admin-page .admin-day h3 {
    grid-column: auto;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    display: grid;
    align-content: center;
    gap: 1px;
    font-size: 12px;
    line-height: 1.05;
  }
  .booking-admin-page .admin-day h3 span {
    display: block;
    font-size: 9px;
  }
  /* Four slots share a 375px row. Side by side there is no room for the status
     label next to the time — it either overflows the button or ellipsises to
     "STE…". Stacked, both stay legible in the same height. */
  .booking-admin-page .admin-slot {
    min-height: 34px;
    display: grid;
    align-content: center;
    gap: 0;
    padding: 3px 4px;
    overflow: hidden;
  }
  .booking-admin-page .admin-slot span {
    font-size: 12px;
    line-height: 1.1;
  }
  .booking-admin-page .admin-slot strong {
    font-size: 8px;
    letter-spacing: .02em;
    line-height: 1.1;
    white-space: nowrap;
  }
  .booking-admin-page .booking-list {
    gap: 8px;
  }
  .booking-admin-page .admin-booking {
    gap: 5px;
    padding: 7px;
  }
  .booking-admin-page .admin-booking h3 {
    font-size: 15px;
  }
  .booking-admin-page .admin-booking p {
    font-size: 11px;
  }
  .booking-admin-page .admin-booking span {
    font-size: 10px;
  }
  .booking-admin-page .admin-booking-links,
  .booking-admin-page .admin-booking-actions {
    gap: 6px;
  }
  .booking-admin-page .admin-booking-links a {
    flex: 1 1 120px;
    padding: 5px 6px;
    font-size: 10px;
  }
  .booking-admin-page .admin-booking-actions .btn {
    flex: 1 1 110px;
    min-height: 32px;
    padding: 0 7px;
    font-size: 10px;
  }
  .admin-toolbar { grid-template-columns: 1fr; }
  .admin-card-head { display: grid; }
  .stage-grid { grid-template-columns: 1fr; }
  .calculator-topline {
    align-items: start;
    display: grid;
  }
  .tuning-result:not(:empty),
  .result-lead-form.show,
  .form-panel {
    padding: 18px;
  }
  .tuning-result {
    overflow-x: auto;
  }
  .stage-card {
    padding: 15px;
  }
  .stage-card-head {
    display: grid;
    justify-content: start;
  }
  .stage-card p {
    grid-template-columns: 48px 1fr;
  }
  .contact-band { display: grid; }
  .hero-actions .btn,
  .contact-actions .btn {
    width: 100%;
  }
  .mobile-cta { display: grid; }
  .side-panel { position: static; }
  h1 { font-size: 36px; }
  .lead { font-size: 17px; }
  .section { padding: 62px 0; }
  .section-head {
    gap: 10px;
    margin-bottom: 24px;
  }
  .page-hero { padding: 64px 0 42px; }
  .page-hero > div { width: min(100% - 28px, var(--max)); }
  .card { padding: 18px; }
  .card .card-image-link { margin: -18px -18px 2px; }
  .card .card-image-link::after,
  .media-article::after {
    width: 72px;
    height: 28px;
    right: 10px;
    bottom: 10px;
  }
  .map { min-height: 300px; }
  .site-footer {
    display: grid;
    padding-bottom: 92px;
  }
}

@media (max-width: 430px) {
  .hero-content { width: min(100% - 24px, var(--max)); }
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .lead { font-size: 16px; }
  .hero-reg-search input,
  .hero-reg-search .btn { min-height: 50px; }
  .hero-facts span:nth-child(n+3) { display: none; }
  .hero-secondary-actions a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .card p,
  .text-panel p,
  .text-panel li,
  details p {
    font-size: 15px;
  }
  input, select, textarea {
    font-size: 16px;
  }
  .mobile-cta {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 430px) and (max-height: 740px) {
  .hero-content { padding-top: 18px; }
  .hero .eyebrow { display: none; }
  .hero-facts { display: none; }
}

/* --- a11y + restructured homepage (v4) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
summary:focus-visible {
  outline: 2px solid #ff5964;
  outline-offset: 3px;
}

.site-nav a[aria-current="page"] { color: #fff; }

.band-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.site-footer { align-items: flex-start; }
.footer-col { display: flex; flex-direction: column; gap: 7px; }
.footer-col strong { color: #fff; margin-bottom: 3px; }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-brand span { color: var(--muted); }

@media (max-width: 620px) {
  .site-footer { gap: 26px 20px; }
  .footer-col { flex: 1 1 42%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}