/* ==========================================================================
   Autorijschool Karin de Ruiter
   Eén stylesheet, alle tokens in :root.

   Beeldtaal: asfalt en wegmarkering. De gele streep uit het midden van de weg
   is het enige echt luide element; de rest blijft rustig zodat de tekst en de
   knoppen het werk doen.
   ========================================================================== */

/* ---------- FONTS (zelf gehost, geen externe verbinding) ---------- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/BarlowCondensed-700.woff2") format("woff2");
}

/* ---------- TOKENS ---------- */
:root {
  /* asfalt */
  --asphalt-900: #151922;
  --asphalt-800: #1E2431;
  --asphalt-700: #2C3546;

  /* tekst. --ink-2 haalt 7.4:1 op wit, --ink-3 haalt 4.9:1 op wit en 4.7:1
     op --bg-2, genoeg voor bijschriften. Lichter dan dit werd te vaag. */
  --ink: #151922;
  --ink-2: #444C5A;
  --ink-3: #666E7C;
  --on-dark: #FFFFFF;
  --on-dark-2: #C3C9D4;

  /* vlakken */
  --bg: #FFFFFF;
  --bg-2: #F4F5F8;
  --bg-3: #EBEDF2;
  --line: #DEE2E9;
  --line-dark: #38414F;

  /* wegmarkering. Geel is puur een vlak- en grafiekkleur: geel op wit haalt
     geen tekstcontrast, dus tekst op geel is altijd --asphalt-900 (11.4:1). */
  --marking: #F5C518;
  --marking-deep: #E0AF00;
  --marking-soft: rgba(245, 197, 24, 0.16);

  /* status */
  --ok: #1B7F4B;

  /* type */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* vorm */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* schaduw */
  --sh-sm: 0 1px 2px rgba(21, 25, 34, .06), 0 2px 6px rgba(21, 25, 34, .05);
  --sh-md: 0 2px 6px rgba(21, 25, 34, .05), 0 14px 30px rgba(21, 25, 34, .08);
  --sh-lg: 0 4px 10px rgba(21, 25, 34, .06), 0 30px 60px rgba(21, 25, 34, .14);

  --wrap: 1120px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: 200ms var(--ease);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0.002em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 6vw, 4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); text-transform: uppercase; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { text-wrap: pretty; }

/* Het height:auto hoort er echt bij: de width/height-attributen op een <img>
   winnen anders van de CSS-breedte en dan rekt het beeld scheef. */
img, svg, video { display: block; max-width: 100%; height: auto; }

/* Alle inline iconen delen een viewBox van 24 bij 24. Zonder een maat groeien
   ze mee met hun vak en dan staat er een reuzenvinkje naast een regel tekst.
   Componenten die een ander formaat willen, zetten dat verderop zelf. */
svg[aria-hidden="true"] { width: 20px; height: 20px; flex-shrink: 0; }

a { color: var(--ink); }
main a:not(.btn):not(.card):not(.map-link):not(.tile) {
  text-decoration-line: underline;
  text-decoration-color: var(--marking-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
main a:not(.btn):not(.card):not(.map-link):not(.tile):hover {
  background: var(--marking-soft);
}

:focus-visible {
  outline: 3px solid var(--asphalt-900);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--marking); }

ul, ol { padding-left: 1.15em; }
li { margin-bottom: .35em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--marking); color: var(--asphalt-900);
  padding: 10px 18px; border-radius: var(--r-sm); font-weight: 700;
  text-decoration: none; transition: top var(--t);
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap--narrow { max-width: 760px; }

/* ---------- SIGNATUURELEMENT: de wegmarkering ---------- */
.roadline {
  height: 6px;
  border-radius: 3px;
  background-image: repeating-linear-gradient(
    to right,
    var(--marking) 0 34px,
    transparent 34px 60px
  );
}
.roadline--short { width: 96px; margin-bottom: 22px; }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--asphalt-900);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; min-height: 68px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--on-dark); flex-shrink: 0;
}
svg.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__name {
  font-family: var(--font-display); font-size: 1.28rem; line-height: 1.02;
  text-transform: uppercase; letter-spacing: .01em;
}
.brand__name span { display: block; font-size: .62rem; letter-spacing: .18em; color: var(--marking); }

.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-burger {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--on-dark); cursor: pointer;
  padding: 9px 13px; border: 1px solid var(--line-dark); border-radius: var(--r-sm);
}
.nav-burger__bars { display: block; width: 20px; height: 2px; background: var(--marking); position: relative; }
.nav-burger__bars::before,
.nav-burger__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--marking);
}
.nav-burger__bars::before { top: -6px; }
.nav-burger__bars::after { top: 6px; }
.nav-toggle:focus-visible + .nav-burger { outline: 3px solid var(--marking); outline-offset: 2px; }

/* Op mobiel valt het menu onder de logoregel: als flexitem zou het naast de
   knop blijven staan en half buiten beeld hangen. */
.site-nav { display: none; flex-basis: 100%; max-height: calc(100vh - 68px); overflow-y: auto; }
.nav-toggle:checked ~ .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0 0 18px; }
.site-nav a {
  display: block; padding: 12px 2px; color: var(--on-dark); text-decoration: none;
  font-weight: 600; border-bottom: 1px solid var(--line-dark);
}
.site-nav a[aria-current="page"] { color: var(--marking); }
.site-nav .nav-cta {
  margin-top: 14px; border-bottom: 0; background: var(--marking);
  color: var(--asphalt-900); text-align: center; border-radius: var(--r-sm);
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem;
  letter-spacing: .04em; padding: 13px 18px;
}

@media (min-width: 980px) {
  .nav-burger { display: none; }
  .site-nav { display: block; flex-basis: auto; max-height: none; overflow: visible; }
  .site-nav ul { display: flex; align-items: center; gap: 4px; padding: 0; }
  .site-nav a { border-bottom: 0; padding: 9px 12px; border-radius: var(--r-sm); font-size: .98rem; }
  .site-nav a:hover { background: var(--asphalt-700); }
  .site-nav a[aria-current="page"] { background: var(--asphalt-700); color: var(--marking); }
  .site-nav .nav-cta { margin: 0 0 0 10px; font-size: 1rem; padding: 10px 16px; }
  .site-nav .nav-cta:hover { background: var(--marking-deep); }
}

/* ---------- KNOPPEN ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.18rem; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1; text-decoration: none;
  padding: 17px 26px; border-radius: var(--r-sm); border: 2px solid transparent;
  transition: transform var(--t), background-color var(--t), border-color var(--t);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--marking); color: var(--asphalt-900); }
.btn--primary:hover { background: var(--marking-deep); }
.btn--dark { background: var(--asphalt-900); color: var(--on-dark); }
.btn--dark:hover { background: var(--asphalt-700); }
.btn--ghost { border-color: var(--asphalt-900); color: var(--asphalt-900); }
.btn--ghost:hover { background: var(--asphalt-900); color: var(--on-dark); }
.btn--ondark { border-color: rgba(255,255,255,.45); color: var(--on-dark); }
.btn--ondark:hover { background: rgba(255,255,255,.12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- HERO ---------- */
.hero {
  background: var(--asphalt-900);
  color: var(--on-dark-2);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background-image: repeating-linear-gradient(to right, var(--marking) 0 46px, transparent 46px 84px);
}
.hero__inner { padding-block: clamp(46px, 8vw, 88px) clamp(52px, 8vw, 92px); }
.hero__grid { display: grid; gap: clamp(30px, 5vw, 54px); }
.hero__eyebrow svg { color: var(--marking); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em;
  font-size: .92rem; color: var(--marking); margin-bottom: 16px;
}
.hero h1 { color: var(--on-dark); margin-bottom: 20px; }
.hero__lead { font-size: 1.16rem; max-width: 46ch; margin-bottom: 26px; color: var(--on-dark-2); }
.hero__actions { margin-bottom: 26px; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .95rem; color: var(--on-dark-2);
  padding-top: 20px; border-top: 1px solid var(--line-dark);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { color: var(--marking); }
.hero__meta strong { color: var(--on-dark); font-weight: 600; }

.hero-card {
  background: var(--bg); color: var(--ink-2); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: var(--sh-lg);
}
.hero-card h2 { font-size: 1.5rem; margin-bottom: 4px; }
.hero-card__note { font-size: .95rem; color: var(--ink-3); margin-bottom: 18px; }
.hero-card__list { list-style: none; padding: 0; margin: 0 0 20px; }
.hero-card__list li {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 1rem;
}
.hero-card__list li:last-child { border-bottom: 0; }
.hero-card__list svg { margin-top: 3px; color: var(--marking-deep); }
.hero-card .btn { width: 100%; }
.hero-card__sub { font-size: .9rem; color: var(--ink-3); margin-top: 12px; text-align: center; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
}

/* ---------- PAGINAKOP (subpagina's) ---------- */
.pagehead {
  background: var(--asphalt-900); color: var(--on-dark-2);
  padding-block: clamp(34px, 5vw, 60px) clamp(38px, 5vw, 64px);
  position: relative;
}
.pagehead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background-image: repeating-linear-gradient(to right, var(--marking) 0 38px, transparent 38px 68px);
}
.pagehead h1 { color: var(--on-dark); margin-bottom: 14px; }
.pagehead__lead { font-size: 1.1rem; max-width: 60ch; }

.crumbs { font-size: .88rem; margin-bottom: 16px; color: var(--on-dark-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li::after { content: "›"; margin-left: 6px; color: var(--marking); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--on-dark-2); text-decoration: underline; text-decoration-color: rgba(245,197,24,.6); }
.crumbs a:hover { color: var(--on-dark); }

/* ---------- SECTIES ---------- */
.section { padding-block: clamp(46px, 6vw, 82px); }
.section--tint { background: var(--bg-2); }
.section--dark { background: var(--asphalt-900); color: var(--on-dark-2); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section__head { max-width: 62ch; margin-bottom: 34px; }
.section__head p { margin-top: 12px; font-size: 1.05rem; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 1.7em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.2em; }

/* ---------- KAARTEN / GRIDS ---------- */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.card {
  display: block; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px 22px 22px; text-decoration: none;
  color: var(--ink-2); position: relative; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--marking); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--bg-3); }
a.card:hover::before { transform: scaleY(1); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: .98rem; }
.card__more {
  display: inline-block; margin-top: 14px; font-weight: 600; color: var(--ink);
  border-bottom: 2px solid var(--marking-deep);
}
.section--tint .card { background: var(--bg); }

/* ---------- STAPPEN (zo werkt het) ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 54px 1fr; gap: 18px;
  padding-bottom: 26px; position: relative;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--marking); color: var(--asphalt-900);
  font-family: var(--font-display); font-size: 1.6rem;
  display: grid; place-items: center; z-index: 1;
}
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 26px; top: 58px; bottom: 6px; width: 3px;
  background-image: repeating-linear-gradient(to bottom, var(--marking) 0 10px, transparent 10px 20px);
}
.step h3 { margin-bottom: 5px; padding-top: 10px; }
.step p { font-size: 1rem; }

/* ---------- TABELLEN (prijzen) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 420px; }
caption { text-align: left; padding: 18px 20px 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); text-transform: uppercase; }
th, td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--line); }
thead th { background: var(--bg-2); font-family: var(--font-display); font-size: 1.02rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.price, th.price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

.pkg {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px 22px; display: flex; flex-direction: column;
}
.pkg__price {
  font-family: var(--font-display); font-size: 2.5rem; color: var(--ink);
  line-height: 1; margin: 4px 0 14px;
}
.pkg ul { list-style: none; padding: 0; margin: 0 0 18px; flex-grow: 1; }
.pkg li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.pkg li:last-child { border-bottom: 0; }
.pkg__note { font-size: .88rem; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 4px 20px;
}
.faq summary {
  font-family: var(--font-display); font-size: 1.22rem; color: var(--ink);
  padding: 16px 30px 16px 0; cursor: pointer; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 12px; height: 12px;
  border-right: 3px solid var(--marking-deep); border-bottom: 3px solid var(--marking-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--t);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding-bottom: 18px; }
.faq details > div > * + * { margin-top: .8em; }

/* ---------- CONTACTBLOK ---------- */
.contact-panel {
  display: grid; gap: 22px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list svg { width: 22px; height: 22px; margin-top: 4px; color: var(--marking-deep); }
.contact-list strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.contact-list a { color: var(--ink); }

.map-link { display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); text-decoration: none; }
.map-link img { width: 100%; }
.map-link span {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  background: var(--bg); color: var(--ink); font-weight: 600; font-size: .97rem;
}
.map-link span svg { color: var(--marking-deep); }
.map-link:hover span { background: var(--marking-soft); }

/* ---------- CTA-BAND ---------- */
.cta-band { background: var(--asphalt-900); color: var(--on-dark-2); position: relative; }
.cta-band__inner { padding-block: clamp(42px, 6vw, 70px); display: grid; gap: 24px; align-items: center; }
.cta-band h2 { color: var(--on-dark); }
.cta-band p { margin-top: 12px; max-width: 52ch; }
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1.3fr auto; } }

/* ---------- REGIO-LIJST ---------- */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.tile {
  display: flex; align-items: center; gap: 10px; padding: 15px 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); font-weight: 600;
  transition: border-color var(--t), background-color var(--t);
}
.tile svg { width: 17px; height: 17px; color: var(--marking-deep); flex-shrink: 0; }
.tile:hover { background: var(--marking-soft); border-color: var(--marking-deep); }

/* ---------- FEITENBLOK ---------- */
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fact { border-top: 4px solid var(--marking); padding-top: 14px; }
.fact__value { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--ink); line-height: 1.05; margin-bottom: 4px; }
.section--dark .fact__value { color: var(--on-dark); }
.fact__label { display: block; font-size: .96rem; }

/* ---------- NOTITIE ---------- */
.note {
  background: var(--marking-soft); border-left: 4px solid var(--marking);
  padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .98rem;
}
.section--dark .note { background: rgba(245,197,24,.12); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--asphalt-900); color: var(--on-dark-2); padding-block: 52px 30px; font-size: .97rem; }
.site-footer h2 { font-size: 1.2rem; color: var(--on-dark); margin-bottom: 14px; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: var(--marking); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.footer-bottom {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; color: var(--on-dark-2);
}
.footer-address { font-style: normal; }

/* ---------- MOBIELE BELBALK ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--asphalt-900); border-top: 2px solid var(--marking);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px; color: var(--on-dark); text-decoration: none;
  font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em;
}
.callbar a + a { border-left: 1px solid var(--line-dark); }
.callbar a:first-child { background: var(--marking); color: var(--asphalt-900); }
.callbar svg { width: 19px; height: 19px; }
@media (min-width: 760px) { .callbar { display: none; } }
@media (max-width: 759px) { body { padding-bottom: 58px; } }