/* ============================================================
   EIS Reparatie — design system
   World: a Mercedes instrument cluster at night (anthracite,
   warm amber backlight) crossed with a printed diagnostic
   report (paper sections). Signature: the revival pulse.
   Type: Barlow Condensed / IBM Plex Sans / IBM Plex Mono.
   ============================================================ */

:root{
  /* Night dashboard */
  --bg:        #101214;
  --panel:     #17191d;
  --panel-2:   #1d2025;
  --line:      #2b2f35;
  --line-soft: #22262b;
  --text:      #ecebe5;
  --muted:     #a6aab0;
  --faint:     #7d828a;

  /* Instrument amber */
  --amber:     #f0a33f;
  --amber-hi:  #ffc46b;
  --amber-dim: #7a5620;
  --amber-ink: #241a0b;

  /* Diagnostic report paper */
  --paper:     #f2eee6;
  --paper-2:   #e8e3d8;
  --paper-line:#d4cdbe;
  --ink:       #1a1c1f;
  --ink-muted: #565a60;

  --disp: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --r: 4px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--amber-hi); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.mono{ font-family:var(--mono); font-size:.86em; letter-spacing:.02em; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--amber-ink);
  padding:10px 16px; font-weight:600; z-index:100;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Type scale ---------- */
h1,h2,h3{ font-family:var(--disp); font-weight:600; line-height:1.02; margin:0 0 .45em; letter-spacing:.005em; }
h1{ font-size:clamp(2.2rem, 4.8vw, 3.6rem); text-transform:uppercase; }
h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); text-transform:uppercase; }
h3{ font-size:1.35rem; font-family:var(--sans); font-weight:600; line-height:1.3; }
p{ margin:0 0 1em; }
.lead{ font-size:1.13rem; color:var(--muted); max-width:62ch; }

/* Eyebrow: gauge label */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--amber); opacity:.7; }

/* Amber status dot */
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber); }
.dot--live{ animation:pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

/* ============================================================
   Alert strip + header
   ============================================================ */
.alert-strip{
  background:linear-gradient(90deg, #1a1408, #201804 45%, #1a1408);
  border-bottom:1px solid var(--amber-dim);
  font-size:.85rem;
}
.alert-strip__in{ display:flex; justify-content:space-between; gap:14px; padding:8px 22px; flex-wrap:wrap; }
.alert-strip__label{ color:var(--amber-hi); display:inline-flex; gap:9px; align-items:center; font-weight:500; }
.alert-strip__links a{ font-family:var(--mono); font-size:.82rem; }
.alert-strip__links span{ color:var(--amber-dim); margin:0 6px; }

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(16,18,20,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-head__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 22px; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand__mark{ color:var(--text); flex:none; }
.brand__name{ display:block; font-family:var(--disp); font-weight:700; font-size:1.5rem; text-transform:uppercase; letter-spacing:.03em; line-height:1; }
.brand__sub{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:3px; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ color:var(--muted); font-size:.95rem; font-weight:500; }
.nav a:hover{ color:var(--text); text-decoration:none; }
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--amber); color:var(--amber-ink) !important;
  font-family:var(--mono); font-size:.85rem !important; font-weight:500;
  padding:10px 16px; border-radius:var(--r);
}
.nav__cta:hover{ background:var(--amber-hi); }
.nav-toggle{ display:none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:var(--r); font-weight:600; font-size:1rem;
  border:1px solid transparent; cursor:pointer; text-decoration:none !important;
}
.btn--amber{ background:var(--amber); color:var(--amber-ink); }
.btn--amber:hover{ background:var(--amber-hi); }
.btn--ghost{ border-color:var(--line); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--faint); }
.btn--paper-ghost{ border-color:#b9b09c; color:var(--ink); background:transparent; }
.btn--paper-ghost:hover{ border-color:var(--ink); }
.btn--wa{ background:#1f6f4a; color:#eafff3; }
.btn--wa:hover{ background:#25865a; }
.btn--lg{ padding:17px 30px; font-size:1.06rem; }

/* ============================================================
   HERO — instrument cluster readout
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:84px 0 72px;
  background:
    radial-gradient(1100px 480px at 78% -10%, rgba(240,163,63,.14), transparent 60%),
    radial-gradient(700px 380px at 8% 110%, rgba(240,163,63,.05), transparent 60%),
    var(--bg);
}
.hero::after{ /* faint gauge tick marks along the top */
  content:""; position:absolute; inset:0 0 auto 0; height:14px;
  background-image:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 34px);
  opacity:.5; pointer-events:none;
}
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; }
.hero h1 .amber{ color:var(--amber); }
.hero__sub{ font-size:1.16rem; color:var(--muted); max-width:56ch; margin-bottom:26px; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }

.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--mono); font-size:.78rem; color:var(--faint); letter-spacing:.05em; }
.hero__meta b{ color:var(--text); font-weight:500; }

/* The revival pulse — flatline that kicks into a heartbeat */
.pulsecard{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);
  padding:26px 26px 20px; position:relative;
}
.pulsecard__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pulsecard__label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.pulsecard__status{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--amber); }
.pulse-svg{ width:100%; height:auto; }
.pulse-svg .grid-line{ stroke:var(--line-soft); stroke-width:1; }
.pulse-svg .keyhole{ stroke:var(--faint); stroke-width:2; fill:none; }
.pulse-svg .trace{
  stroke:var(--amber); stroke-width:2.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(240,163,63,.55));
}
@media (prefers-reduced-motion: no-preference){
  .pulse-svg .trace{
    stroke-dasharray:760; stroke-dashoffset:760;
    animation:trace-in 2.6s cubic-bezier(.6,0,.3,1) .3s forwards;
  }
  @keyframes trace-in{ to{ stroke-dashoffset:0; } }
}
.pulsecard__caption{ margin:14px 2px 0; font-size:.92rem; color:var(--muted); }
.pulsecard__caption b{ color:var(--text); }

/* ---------- Model finder ---------- */
.finder{ margin-top:22px; }
.finder__box{ position:relative; }
.finder__input{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); font-family:var(--mono); font-size:1rem;
  padding:15px 16px 15px 46px;
}
.finder__input::placeholder{ color:var(--faint); }
.finder__input:focus{ border-color:var(--amber); outline:none; box-shadow:0 0 0 3px rgba(240,163,63,.18); }
.finder__icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
.finder__results{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
  max-height:300px; overflow:auto; box-shadow:var(--shadow); display:none;
}
.finder__results.is-open{ display:block; }
.finder__results a{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:11px 15px; color:var(--text); border-bottom:1px solid var(--line-soft); font-size:.95rem;
}
.finder__results a:last-child{ border-bottom:0; }
.finder__results a:hover{ background:var(--panel); text-decoration:none; }
.finder__results .tag{ flex:none; }
.finder__empty{ padding:13px 15px; color:var(--faint); font-size:.9rem; }
.finder__hint{ margin-top:9px; font-size:.82rem; color:var(--faint); }

/* Chassis-plate tag (mono on brushed plate) */
.tag{
  display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  padding:3px 8px; border-radius:3px; text-transform:uppercase;
  background:linear-gradient(180deg,#2a2e34,#1f2226); border:1px solid var(--line); color:var(--muted);
}
.tag--elv{ color:var(--amber-hi); border-color:var(--amber-dim); background:linear-gradient(180deg,#2c220f,#221a0a); }

/* ============================================================
   Sections
   ============================================================ */
.section{ padding:88px 0; }
.section--tight{ padding:64px 0; }
.section-head{ max-width:720px; margin-bottom:46px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center .eyebrow::before{ display:none; }

/* Paper (diagnostic report) sections */
.paper{ background:var(--paper); color:var(--ink); }
.paper h2,.paper h3{ color:var(--ink); }
.paper .lead, .paper p{ color:var(--ink-muted); }
.paper .eyebrow{ color:#a06a17; }
.paper .eyebrow::before{ background:#a06a17; }
.paper a{ color:#8a5a10; }

/* ---------- Symptom cards (warning lights) ---------- */
.sym-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sym-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:6px;
  padding:22px; display:flex; gap:16px; align-items:flex-start;
}
.sym-card__icon{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #2c230f, #1c1608);
  border:1px solid var(--amber-dim); color:var(--amber);
  box-shadow:inset 0 0 12px rgba(240,163,63,.15), 0 0 14px rgba(240,163,63,.12);
}
.sym-card p{ margin:0; color:var(--muted); font-size:.97rem; }
.sym-card b{ color:var(--text); display:block; margin-bottom:4px; font-size:1.02rem; }

/* ---------- Service rows ---------- */
.svc{ display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:start;
      padding:34px 0; border-top:1px solid var(--line-soft); }
.svc:last-of-type{ border-bottom:1px solid var(--line-soft); }
.svc__code{ font-family:var(--mono); color:var(--amber); font-size:.85rem; letter-spacing:.12em; padding-top:6px; }
.svc h3{ margin-bottom:8px; font-size:1.45rem; }
.svc p{ color:var(--muted); max-width:62ch; margin:0; }
.svc__link{ padding-top:6px; white-space:nowrap; font-family:var(--mono); font-size:.85rem; }

/* ---------- Process steps (paper) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step;
        border:1px solid var(--paper-line); border-radius:8px; overflow:hidden; background:var(--paper-2); }
.step{ padding:30px 26px 34px; border-left:1px solid var(--paper-line); position:relative; }
.step:first-child{ border-left:0; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  display:block; font-family:var(--disp); font-weight:700; font-size:2.6rem; line-height:1;
  color:#c9a35c; margin-bottom:14px;
}
.step b{ display:block; color:var(--ink); font-size:1.06rem; margin-bottom:8px; }
.step p{ font-size:.94rem; margin:0; }
.steps-note{ margin-top:18px; font-size:.92rem; color:var(--ink-muted); }

/* ---------- Model directory ---------- */
.dir-controls{
  margin-top:30px;
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
}
.dir-controls .finder__box{ flex:1 1 340px; max-width:520px; }
.class-block{ margin-bottom:40px; }
.class-block__h{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--line-soft); padding-bottom:10px; margin-bottom:16px;
  display:flex; justify-content:space-between;
}
.model-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.model-card{
  display:flex; flex-direction:column; gap:9px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:6px;
  padding:16px 17px; color:var(--text); position:relative;
}
.model-card:hover{ text-decoration:none; border-color:var(--amber-dim); background:var(--panel-2); }
.model-card:hover .model-card__go{ color:var(--amber); }
.model-card__row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.model-card__name{ font-weight:600; font-size:1.01rem; line-height:1.35; }
.model-card__meta{ font-family:var(--mono); font-size:.74rem; color:var(--faint); display:flex; gap:10px; align-items:center; }
.model-card__go{ color:var(--faint); flex:none; }
.model-card.is-hidden{ display:none; }
.dir-empty{ display:none; color:var(--faint); padding:26px 0; }
.dir-empty.is-visible{ display:block; }

/* ---------- Compare (repair vs dealer) ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare__col{ border-radius:8px; padding:30px; }
.compare__col--us{ background:var(--panel); border:1px solid var(--amber-dim); box-shadow:0 0 40px rgba(240,163,63,.06); }
.compare__col--them{ background:var(--panel); border:1px solid var(--line-soft); opacity:.88; }
.compare__title{ font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px; }
.compare__col--us .compare__title{ color:var(--amber); }
.compare__col--them .compare__title{ color:var(--faint); }
.compare ul{ list-style:none; margin:0; padding:0; }
.compare li{ padding:9px 0 9px 30px; position:relative; color:var(--muted); border-top:1px solid var(--line-soft); font-size:.97rem; }
.compare li:first-child{ border-top:0; }
.compare li::before{ position:absolute; left:0; top:9px; font-family:var(--mono); }
.compare__col--us li::before{ content:"+"; color:var(--amber); }
.compare__col--them li::before{ content:"–"; color:var(--faint); }

/* ---------- Trust band ---------- */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust__item{ border-top:2px solid var(--amber); padding-top:16px; }
.trust__num{ font-family:var(--disp); font-weight:700; font-size:2.5rem; line-height:1; color:var(--text); }
.trust__label{ font-size:.9rem; color:var(--muted); margin-top:6px; }

/* ---------- Review strip ---------- */
.review-strip{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:8px; padding:22px 26px; }
.review-strip__score{ font-family:var(--disp); font-weight:700; font-size:2.4rem; color:var(--amber); line-height:1; }
.review-strip p{ margin:0; color:var(--muted); font-size:.97rem; }
.stars{ color:var(--amber); letter-spacing:2px; font-size:1.05rem; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--line-soft); }
.paper .faq details{ border-color:var(--paper-line); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px;
  padding:20px 4px; font-weight:600; font-size:1.05rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--amber); font-size:1.2rem; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq .faq__a{ padding:0 4px 22px; color:var(--muted); max-width:68ch; }
.paper .faq .faq__a{ color:var(--ink-muted); }

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(800px 300px at 50% 120%, rgba(240,163,63,.16), transparent 65%),
    var(--panel);
  border-top:1px solid var(--line-soft);
  text-align:center; padding:92px 0;
}
.cta-band h2{ margin-bottom:14px; }
.cta-band .lead{ margin:0 auto 30px; }
.cta-band__btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.cta-band__note{ margin-top:20px; font-family:var(--mono); font-size:.8rem; color:var(--faint); }

/* ============================================================
   Model detail page
   ============================================================ */
.crumbs{ font-family:var(--mono); font-size:.76rem; color:var(--faint); margin-bottom:26px; letter-spacing:.04em; }
.crumbs a{ color:var(--faint); }
.crumbs a:hover{ color:var(--text); }

.model-hero{ padding:56px 0 60px; border-bottom:1px solid var(--line-soft);
  background:radial-gradient(900px 400px at 85% -20%, rgba(240,163,63,.12), transparent 60%), var(--bg); }
.model-hero h1{ font-size:clamp(2rem,4vw,3rem); }
.plates{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px; }
.plate{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em;
  background:linear-gradient(180deg,#2d3138,#212429);
  border:1px solid var(--line); border-radius:4px; padding:7px 13px; color:var(--text);
}
.plate--amber{ color:var(--amber-hi); border-color:var(--amber-dim); }
.model-hero .lead{ margin-bottom:28px; }
.model-hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; }

.model-body{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start; padding:64px 0 90px; }
.model-body__main h2{ font-size:1.9rem; margin-top:52px; }
.model-body__main h2:first-child{ margin-top:0; }

.checklist{ list-style:none; margin:0 0 8px; padding:0; }
.checklist li{ position:relative; padding:11px 0 11px 34px; border-bottom:1px solid var(--line-soft); color:var(--muted); }
.checklist li::before{
  content:""; position:absolute; left:2px; top:17px; width:9px; height:9px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 8px rgba(240,163,63,.6);
}
.sendlist{ list-style:none; margin:0; padding:0; counter-reset:send; }
.sendlist li{ position:relative; padding:12px 0 12px 42px; color:var(--muted); border-bottom:1px solid var(--line-soft); }
.sendlist li::before{
  counter-increment:send; content:counter(send);
  position:absolute; left:0; top:11px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--amber-dim); color:var(--amber);
  font-family:var(--mono); font-size:.78rem; display:grid; place-items:center;
}
.parts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.part{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.05em;
  border:1px dashed var(--line); border-radius:3px; padding:6px 10px; color:var(--muted);
}
.parts-note{ font-size:.88rem; color:var(--faint); margin-top:14px; }

/* Sidebar action card */
.side-card{
  position:sticky; top:96px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:8px; padding:26px; box-shadow:var(--shadow);
}
.side-card__label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin:0 0 14px; }
.side-card .btn{ width:100%; margin-bottom:10px; }
.side-card__price{ border-top:1px solid var(--line-soft); margin-top:14px; padding-top:16px; }
.side-card__price b{ font-family:var(--disp); font-size:1.7rem; font-weight:700; letter-spacing:.02em; }
.side-card__price span{ display:block; font-size:.86rem; color:var(--faint); margin-top:4px; }
.side-card__list{ list-style:none; margin:16px 0 0; padding:0; font-size:.88rem; color:var(--muted); }
.side-card__list li{ padding:5px 0 5px 22px; position:relative; }
.side-card__list li::before{ content:"✓"; position:absolute; left:0; color:var(--amber); font-family:var(--mono); }

.related{ border-top:1px solid var(--line-soft); padding:56px 0 80px; }

/* ============================================================
   Forms (contact)
   ============================================================ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field--full{ grid-column:1 / -1; }
.form-field label{ font-size:.86rem; font-weight:600; color:var(--text); }
.form-field label .req{ color:var(--amber); }
.form-field input, .form-field select, .form-field textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); font-family:var(--sans); font-size:1rem; padding:13px 14px; width:100%;
}
.form-field textarea{ min-height:140px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--amber); outline:none; box-shadow:0 0 0 3px rgba(240,163,63,.16);
}
.form-consent{ display:flex; gap:12px; align-items:flex-start; font-size:.88rem; color:var(--muted); }
.form-consent input{ width:auto; margin-top:3px; }
.form-note{ font-size:.84rem; color:var(--faint); }
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.flash{ border-radius:6px; padding:16px 20px; margin-bottom:28px; font-size:.97rem; }
.flash--ok{ background:#122117; border:1px solid #2d5c3d; color:#bfe8cd; }
.flash--err{ background:#26150f; border:1px solid #6b3a24; color:#f3c9b4; }

.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:start; }
.contact-aside .side-card{ position:static; }

/* ---------- Legal / prose pages ---------- */
.prose{ max-width:780px; }
.prose h2{ font-size:1.6rem; margin-top:46px; }
.prose h2:first-of-type{ margin-top:0; }
.prose ul{ color:var(--muted); padding-left:22px; }
.prose li{ margin-bottom:7px; }
.prose p{ color:var(--muted); }

/* ============================================================
   Footer
   ============================================================ */
.site-foot{ border-top:1px solid var(--line-soft); background:#0c0e10; padding:70px 0 110px; font-size:.94rem; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; margin-bottom:50px; }
.foot-col a{ display:block; color:var(--muted); padding:4px 0; }
.foot-col a:hover{ color:var(--text); }
.foot-h{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; }
.foot-brandname{ font-family:var(--disp); font-weight:700; font-size:1.4rem; text-transform:uppercase; margin:14px 0 8px; }
.foot-sub, .foot-parent, .foot-addr, .foot-note{ color:var(--faint); font-size:.9rem; margin:0 0 10px; }
.foot-parent a{ display:inline; color:var(--amber-hi); padding:0; }
.foot-contact{ font-family:var(--mono); font-size:.9rem; }
.foot-legal{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); padding-top:24px; color:var(--faint); font-size:.85rem; }
.foot-legal p{ margin:0; }
.foot-legal a{ color:var(--faint); }

/* Mobile sticky action bar */
.action-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:none; gap:1px; background:var(--line);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.action-bar__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 8px; font-size:.9rem; font-weight:600; text-decoration:none !important;
}
.action-bar__btn--call{ background:var(--panel-2); color:var(--text); }
.action-bar__btn--wa{ background:#14402c; color:#d9f7e6; }
.action-bar__btn--req{ background:var(--amber); color:var(--amber-ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .sym-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step:nth-child(3){ border-left:0; }
  .step:nth-child(n+3){ border-top:1px solid var(--paper-line); }
  .trust{ grid-template-columns:1fr 1fr; gap:28px 16px; }
  .model-body,.contact-grid{ grid-template-columns:1fr; gap:44px; }
  .side-card{ position:static; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .svc{ grid-template-columns:1fr; gap:10px; padding:28px 0; }
  .svc__code{ padding:0; }
  .svc__link{ padding:0; }
}

@media (max-width: 760px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .hero{ padding:56px 0 52px; }
  .sym-grid,.compare,.form-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-left:0; border-top:1px solid var(--paper-line); }
  .step:first-child{ border-top:0; }
  .action-bar{ display:flex; }
  .site-foot{ padding-bottom:150px; }

  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line);
    padding:10px 22px 18px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 2px; border-bottom:1px solid var(--line-soft); font-size:1.02rem; }
  .nav__cta{ margin-top:14px; justify-content:center; border-bottom:0 !important; }
  .nav-toggle{
    display:inline-flex; align-items:center; gap:10px;
    background:none; border:1px solid var(--line); border-radius:var(--r);
    color:var(--text); padding:9px 14px; cursor:pointer; font-family:var(--mono); font-size:.8rem;
    letter-spacing:.1em; text-transform:uppercase;
  }
  .nav-toggle__bar{ width:16px; height:2px; background:var(--amber); box-shadow:0 -5px 0 var(--amber), 0 5px 0 var(--amber); }
  .alert-strip__in{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ---------- Model unit figure (illustration or client photo) ---------- */
.model-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 44px;
  align-items: center;
}
.unit-figure {
  position: relative;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(240,163,63,.05), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(255,255,255,.025) 35px 36px),
    repeating-linear-gradient(90deg, transparent 0 35px, rgba(255,255,255,.025) 35px 36px),
    var(--panel, #14161a);
  border: 1px solid var(--line, #262a30);
  border-radius: 14px;
  padding: 26px 26px 16px;
}
/* corner ticks */
.unit-figure::before,
.unit-figure::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--amber, #f0a33f);
  border-style: solid;
  opacity: .8;
}
.unit-figure::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.unit-figure::after  { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

.unit-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
.unit-figure--photo { padding: 0 0 12px; overflow: hidden; }
.unit-figure--photo img {
  border-radius: 13px 13px 0 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: none;
}
.unit-figure figcaption {
  margin-top: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #8b8f98);
  text-align: center;
}
.unit-figure--photo figcaption { padding: 0 16px; }

@media (max-width: 980px) {
  .model-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .unit-figure { max-width: 420px; }
}

/* ============================================================
   v1.1 — UI fixes: plates, checklists, contact form, page heads,
   service details, sidebar extras, mobile polish
   ============================================================ */

/* ---------- Page head (modellen / diensten / vragen / contact / legal) ---------- */
.page-head{
  padding:64px 0 46px;
  border-bottom:1px solid var(--line-soft);
  background:radial-gradient(900px 380px at 80% -30%, rgba(240,163,63,.10), transparent 60%), var(--bg);
}
.page-head h1{ margin:10px 0 16px; }
.page-head .lead{ max-width:760px; }

/* ---------- Model data plates: label above value ---------- */
.plate{
  display:flex; flex-direction:column; gap:3px;
  padding:9px 14px 10px; min-width:104px;
}
.plate b{
  font-family:var(--mono); font-weight:500; font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}

/* ---------- Checklists: aligned amber dots, finished list ---------- */
.checklist{ margin:6px 0 10px; }
.checklist li{
  padding:13px 0 13px 30px; color:var(--muted); line-height:1.55;
}
.checklist li::before{
  left:4px; top:calc(13px + .78em); transform:translateY(-50%);
  width:8px; height:8px;
}
.checklist li:last-child{ border-bottom:0; }
.sendlist li:last-child{ border-bottom:0; }
.sendlist-note{
  margin-top:16px; padding:14px 16px; font-size:.92rem; color:var(--muted);
  background:var(--panel); border:1px solid var(--line-soft); border-radius:6px;
}
.crossref{
  margin-top:34px; padding:16px 18px; border:1px solid var(--amber-dim);
  border-radius:6px; background:rgba(240,163,63,.06); color:var(--muted); font-size:.95rem;
}
.crossref p{ margin:0; }

/* ---------- Sidebar card extras ---------- */
.btn--block{ display:flex; width:100%; justify-content:center; }
.side-card .btn--block{ margin-bottom:10px; }
.side-card__price{
  font-weight:600; color:var(--text); font-size:1.04rem; line-height:1.45;
  margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.side-card__note{ font-size:.82rem; color:var(--faint); text-align:center; margin:4px 0 0; }
.side-card__hr{ border:0; border-top:1px solid var(--line-soft); margin:20px 0; }
.side-card__addr{ font-size:.95rem; color:var(--muted); line-height:1.7; margin:0; }

/* ---------- Contact form: the finished version ---------- */
.form{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:10px;
  padding:30px 30px 28px; box-shadow:var(--shadow);
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.88rem; font-weight:600; color:var(--text); }
.field input,
.field select,
.field textarea{
  width:100%; background:var(--bg);
  border:1px solid var(--line); border-radius:6px;
  color:var(--text); font-family:var(--sans); font-size:1rem;
  padding:13px 15px; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--faint); font-family:var(--sans); }
.field textarea{ min-height:150px; resize:vertical; line-height:1.55; }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f0a33f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.field select optgroup, .field select option{ background:var(--panel); color:var(--text); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:#3a4048; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--amber); outline:none; box-shadow:0 0 0 3px rgba(240,163,63,.16);
}
.field--check label{
  display:flex; gap:11px; align-items:flex-start;
  font-weight:400; font-size:.92rem; color:var(--muted); cursor:pointer;
}
.field--check input{
  width:19px; height:19px; flex:none; margin-top:2px;
  accent-color:var(--amber); cursor:pointer;
}
.field--err input, .field--err select, .field--err textarea{ border-color:#8a4b2e; }
.field__msg{ margin:0; font-size:.83rem; color:#f0a48a; }
.form .btn{ margin-top:24px; }
.form__note{ font-size:.84rem; color:var(--faint); margin:14px 0 0; }

/* ---------- Service detail articles (diensten) ---------- */
.svc-detail{ padding:46px 0; border-top:1px solid var(--line-soft); }
.svc-detail:first-of-type{ border-top:0; padding-top:8px; }
.svc-detail__head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:14px; }
.svc-detail__head h2{ margin:0; font-size:2rem; }
.svc-detail p{ color:var(--muted); max-width:820px; }
.svc-detail .checklist{ max-width:820px; }
.svc-detail .btn{ margin-top:8px; }
.loyalty{
  margin-top:26px; padding:30px 32px;
  border:1px solid var(--amber-dim); border-radius:10px;
  background:linear-gradient(180deg, rgba(240,163,63,.08), rgba(240,163,63,.03));
}
.loyalty h2{ margin-top:0; font-size:1.7rem; }
.loyalty p{ color:var(--muted); max-width:760px; margin-bottom:0; }

/* ---------- Model directory ---------- */
.class-block{ margin-bottom:44px; }
.class-block__title{
  font-family:var(--disp); font-weight:700; font-size:1.35rem;
  text-transform:uppercase; letter-spacing:.05em;
  display:flex; align-items:center; gap:14px; margin:0 0 18px;
}
.class-block__title::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.dir-controls__legend{
  margin:0; font-family:var(--mono); font-size:.8rem; color:var(--muted);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.dir-controls__item{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
@media (max-width:760px){
  .dir-controls{ gap:14px; }
  .dir-controls__legend{ gap:16px; }
}
.model-grid--related{ margin-top:10px; }

/* ---------- Small bits ---------- */
.prose-note{
  margin-top:44px; padding-top:18px; border-top:1px dashed var(--line);
  font-size:.86rem; color:var(--faint);
}
.brand__pulse{ stroke-dasharray:none; }
.foot-col--brand{ max-width:300px; }
.nav-toggle__txt{ line-height:1; }
.hero__meta{ flex-wrap:wrap; }

/* ---------- Mobile polish ---------- */
@media (max-width: 760px){
  .page-head{ padding:46px 0 36px; }
  .model-hero{ padding:40px 0 44px; }
  .model-body{ padding:46px 0 70px; gap:36px; }
  .model-body__main h2{ font-size:1.55rem; margin-top:40px; }
  .plates{ gap:8px; margin:16px 0 4px; }
  .plate{ min-width:calc(50% - 4px); }
  .form{ padding:22px 18px 22px; }
  .form .btn{ width:100%; justify-content:center; }
  .unit-figure{ padding:20px 20px 12px; max-width:100%; }
  .svc-detail{ padding:36px 0; }
  .svc-detail__head h2{ font-size:1.6rem; }
  .loyalty{ padding:24px 20px; }
  .side-card{ padding:22px 20px; }
  .cta-band .btn{ width:100%; justify-content:center; }
  .cta-band__btns{ flex-direction:column; }
}
.brand__text{ display:flex; flex-direction:column; min-width:0; }
.model-body__side{ min-width:0; }

/* v1.2 — trust stats readable on paper sections */
.paper .trust__num{ color:var(--ink); }
.paper .trust__label{ color:var(--ink-muted); }

/* v1.3 — footer review band (topmost footer section) */
.foot-reviews{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
  padding:30px 0 34px; margin-bottom:40px;
  border-bottom:1px solid var(--line-soft);
}
.foot-reviews__score{ display:flex; align-items:center; gap:18px; }
.foot-reviews__num{
  font-family:var(--disp); font-weight:700; font-size:3rem; line-height:1;
  color:var(--amber);
}
.foot-reviews__num small{ font-size:1.4rem; color:var(--muted); font-weight:600; }
.foot-reviews__meta{ display:flex; flex-direction:column; gap:4px; font-size:.92rem; color:var(--muted); }
.foot-reviews__meta .stars{ color:var(--amber); letter-spacing:3px; font-size:1rem; }
.foot-reviews__quotes{
  flex:1 1 100%; order:3;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px; margin-top:6px;
}
.foot-reviews__quote{
  margin:0; padding:16px 18px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:8px;
  font-size:.92rem; color:var(--muted);
}
.foot-reviews__quote p{ margin:0 0 8px; }
.foot-reviews__quote cite{ font-style:normal; font-family:var(--mono); font-size:.74rem; color:var(--faint); }
@media (max-width:760px){
  .foot-reviews{ flex-direction:column; align-items:flex-start; padding:24px 0 28px; margin-bottom:30px; }
  .foot-reviews .btn{ width:100%; justify-content:center; }
}

/* v1.5 — hero 3D background stage */
.hero--can3d{ position:relative; overflow:hidden; }
.hero__stage{
  position:absolute; top:9%; right:-4%; bottom:0;
  width:60%; max-width:960px;
  opacity:0; pointer-events:none; z-index:0;
  transition:opacity .8s ease;
}
.hero__stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 46% at 58% 46%, rgba(240,163,63,.16), transparent 70%),
    radial-gradient(46% 11% at 55% 88%, rgba(0,0,0,.55), transparent 72%);
}
.hero__stage model-viewer{ position:relative; z-index:1; }
.hero__stage::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(16,18,20,.35) 26%, transparent 48%),
             linear-gradient(0deg, var(--bg) 0%, transparent 22%);
}
.hero__stage model-viewer{
  width:100%; height:100%;
  --progress-bar-color:transparent;
  background:transparent;
}
.hero .wrap{ position:relative; z-index:2; }
.hero.has-3d .hero__stage{ opacity:1; }
.hero.has-3d .pulsecard{ opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s .6s; }
.hero__credit{
  position:absolute; right:18px; bottom:12px; z-index:3; margin:0;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.04em;
  opacity:0; transition:opacity .8s ease .3s;
}
.hero.has-3d .hero__credit{ opacity:1; }
.hero__credit a{ color:var(--faint); text-decoration:none; border-bottom:1px dotted var(--line); }
.hero__credit a:hover{ color:var(--muted); }
@media (max-width:760px){
  .hero__stage, .hero__credit{ display:none; } /* mobile keeps the lightweight pulse */
}

/* v1.6 — agency credit */
.foot-made{ font-size:.8rem; color:var(--faint); }
.foot-made a{ color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--line); }
.foot-made a:hover{ color:var(--text); }