/* =========================================================================
 * Cargro Solutions — de secties rond de productfoto's en het klantengids-
 * verhaal: productfoto's in de hero en de dienstkaarten, Best Day, de
 * productwand met filters, "Meer dan vervoer" en het tarievenboek.
 *
 * De productfoto's zijn studio-opnames op een lichtgrijze achtergrond. Ze
 * staan daarom altijd in een eigen afgeronde tegel: de grijze ondergrond
 * hoort bij het ontwerp, in plaats van dat we hem proberen weg te werken.
 * ====================================================================== */

:root { --photo-bg: #e4e4e4; }

/* ------------------------------------------------- hero: order met foto */

.card-product { align-items: center; }
.card-product img { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--photo-bg); }
.card-product small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }

/* ------------------------------------------- dienstkaart: productstapel */

.pstack { display: block; }
.pstack .ps {
  position: absolute; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; background: var(--photo-bg);
  box-shadow: 0 24px 48px -20px rgba(12, 18, 20, 0.45); transition: transform 0.6s var(--ease);
}
.pstack .ps1 { left: 8%; top: 9%; width: 52%; transform: rotate(-4deg); z-index: 2; }
.pstack .ps2 { right: 7%; top: 6%; width: 38%; transform: rotate(5deg); }
.pstack .ps3 { right: 12%; top: 40%; width: 36%; transform: rotate(-2deg); }
.stack-card:hover .pstack .ps1 { transform: rotate(-6deg) translateY(-6px); }
.stack-card:hover .pstack .ps2 { transform: rotate(8deg) translateY(-4px); }
.pstack .float-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; border-radius: var(--r-tile); padding: 16px 18px;
  background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (max-width: 640px) { .pstack .ps1 { width: 56%; } .pstack .ps3 { top: 34%; } }

/* Ritbonregels met een fotootje of icoon ervoor. */
.tk-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--photo-bg); }
.tk-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--surface); color: var(--muted); }
.tk-icon svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------- Best Day */

.bd-section { overflow: hidden; }
.bd { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .bd { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.bd-text h2 { margin-top: 20px; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.04em; font-weight: 600; }
.bd-text > p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.bd-steps { margin-top: 28px; display: grid; gap: 10px; }
.bd-steps li { display: flex; align-items: center; gap: 14px; border-radius: var(--r-tile); background: var(--surface); padding: 14px 16px; }
.bd-steps strong { display: block; font-weight: 600; }
.bd-steps li > span:last-child { color: var(--muted); font-size: var(--fs-small); }
.bd-n { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; background: var(--ink); color: var(--accent-bright); font-weight: 700; }
.bd-quote { margin-top: 24px; padding-left: 16px; border-left: 3px solid var(--accent-bright); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em; }

.bd-visual { position: relative; display: grid; place-items: center; padding: 24px 0; }
.bd-visual::before {
  content: ""; position: absolute; width: 440px; height: 440px; max-width: 100%; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(240, 169, 46, 0.22), transparent);
}
.bd-phone { position: relative; width: min(360px, 100%); border-radius: 36px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.bd-phone-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--ink); color: #fff; }
.bd-phone-top img { width: 30px; height: 30px; border-radius: 999px; }
.bd-phone-top b { display: block; font-size: var(--fs-small); }
.bd-phone-top small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.bd-chat { display: grid; gap: 10px; padding: 18px; min-height: 340px; align-content: start; background: linear-gradient(180deg, var(--soft), #fff); }
.bub { max-width: 86%; border-radius: 18px; padding: 10px 14px; font-size: var(--fs-small); line-height: 1.45; }
.bub.them { justify-self: start; background: var(--surface); border-bottom-left-radius: 6px; }
.bub.me { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.bub img { display: block; width: 100%; max-width: 180px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 8px; background: var(--photo-bg); }
/* Het gesprek speelt zich af als een korte lus, net als de kaarten in de hero. */
@keyframes bub { 0% { opacity: 0; transform: translateY(10px) scale(0.96); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
html.motion .bub { animation: bub 12s var(--ease) infinite both; animation-delay: calc(var(--i) * 1.4s + 0.4s); }
.bd-badge {
  position: absolute; right: calc(50% - 230px); top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: var(--r-tile); background: var(--paper); border: 1px solid var(--line);
}
.bd-badge svg { width: 26px; height: 26px; color: var(--go); }
.bd-badge b { display: block; font-size: var(--fs-small); }
.bd-badge small { display: block; font-size: 12px; color: var(--muted); }
html.motion .bd-badge { animation: bub 12s var(--ease) infinite both; animation-delay: 5.4s; }
@media (max-width: 640px) { .bd-badge { right: 0; top: 2px; } }

/* --------------------------------------------- ladingreel met productfoto's */

.collage { position: absolute; inset: 0; background: radial-gradient(90% 90% at 50% 40%, #24343b 0%, #0c1214 70%); }
.collage img {
  position: absolute; aspect-ratio: 1; object-fit: cover; border-radius: 28px; background: var(--photo-bg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.collage .c1 { left: 50%; top: 50%; width: 40%; transform: translate(-50%, -54%) rotate(-2deg); z-index: 2; }
.collage .c2 { left: 6%; top: 14%; width: 28%; transform: rotate(-7deg); opacity: 0.92; }
.collage .c3 { right: 6%; top: 22%; width: 26%; transform: rotate(6deg); opacity: 0.92; }
@media (max-width: 767px) {
  .collage .c1 { width: 66%; transform: translate(-50%, -44%) rotate(-2deg); }
  .collage .c2 { left: 4%; top: 7%; width: 38%; }
  .collage .c3 { right: 4%; top: 10%; width: 36%; }
}

/* ------------------------------------------------------ productwand */

.wall { margin-top: 72px; }
.wall-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.wall-head h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.04em; font-weight: 600; }
.wall-head p { color: rgba(255, 255, 255, 0.6); }
.wall-filters { position: relative; margin-top: 20px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.wall-filters::-webkit-scrollbar { display: none; }
.wall-filters input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wall-filters label {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--night-line); color: rgba(255, 255, 255, 0.78); font-weight: 600; font-size: var(--fs-small);
  transition: background-color 0.25s, color 0.25s;
}
.wall-filters label small { font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.wall-filters input:checked + label { background: #fff; color: var(--ink); }
.wall-filters input:checked + label small { color: var(--accent); }
.wall-filters input:focus-visible + label { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.wall-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .wall-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 1024px) { .wall-grid { grid-template-columns: repeat(6, 1fr); } }
.ptile { position: relative; overflow: hidden; border-radius: var(--r-tile); background: var(--photo-bg); animation: tile-in 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
.ptile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 0.6s var(--ease); }
.ptile:hover img { transform: scale(1.06); }
.ptile span {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); border-radius: 999px; padding: 3px 10px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Filteren zonder JavaScript: de gekozen categorie bepaalt wat er staat. */
.wall:has(#c-wonen:checked) .ptile:not([data-cat="wonen"]),
.wall:has(#c-tuin:checked) .ptile:not([data-cat="tuin"]),
.wall:has(#c-sport:checked) .ptile:not([data-cat="sport"]),
.wall:has(#c-techniek:checked) .ptile:not([data-cat="techniek"]),
.wall:has(#c-bouw:checked) .ptile:not([data-cat="bouw"]),
.wall:has(#c-zorg:checked) .ptile:not([data-cat="zorg"]) { display: none; }
/* Bij "Alles" eerst een selectie; de knop toont de rest. */
.wall:has(#c-all:checked):not(.open) .ptile.extra { display: none; }
.wall:not(:has(#c-all:checked)) .wall-more, .wall.open .wall-more { display: none; }
.wall-foot { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ------------------------------------------------- meer dan vervoer */

.sol { margin-top: 48px; display: grid; gap: 16px; }
@media (min-width: 900px) {
  .sol { grid-template-columns: repeat(6, 1fr); }
  .sol-track { grid-column: span 3; } .sol-pod { grid-column: span 3; }
  .sol-stat { grid-column: span 2; } .sol-tech { grid-column: span 4; }
}
.sol-tile { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); padding: 28px; }
.sol-tile h3 { margin-top: 18px; font-size: var(--fs-h3); letter-spacing: -0.03em; font-weight: 600; }
.sol-tile > p { margin-top: 10px; color: var(--muted); }
.sol-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--ink); }
.sol-icon svg { width: 22px; height: 22px; }

.eta { margin-top: auto; padding-top: 24px; }
.eta > .row-between { font-size: 13px; }
.eta-live { display: inline-flex; align-items: center; font-weight: 600; color: var(--go); }
.eta-upd { color: var(--wait); font-weight: 600; }
.eta-time { margin-top: 6px; font-size: 2.6rem; line-height: 1; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.eta-time s { margin-right: 10px; font-size: 1.1rem; font-weight: 600; color: var(--subtle); letter-spacing: 0; }
.eta-bar { position: relative; margin-top: 16px; height: 6px; border-radius: 6px; background: var(--surface); }
.eta-bar i { position: absolute; inset: 0 30% 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-bright), var(--go)); }
.eta-van { position: absolute; left: 70%; top: 50%; display: grid; place-items: center; width: 34px; height: 24px; margin: -12px 0 0 -17px; border-radius: 999px; background: var(--ink); color: var(--accent-bright); }
.eta-van svg { width: 16px; height: 16px; }
@keyframes eta-drive { 0% { left: 18%; } 100% { left: 70%; } }
@keyframes eta-fill { 0% { right: 82%; } 100% { right: 30%; } }
html.motion .eta-van { animation: eta-drive 6s ease-in-out infinite alternate; }
html.motion .eta-bar i { animation: eta-fill 6s ease-in-out infinite alternate; }
.eta-btns { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.eta-btns span { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 12px; background: var(--surface); font-size: 13px; font-weight: 600; }
.eta-btns svg { width: 16px; height: 16px; }
.eta-btns span:last-child svg { color: #25d366; }

.pod { margin-top: auto; padding-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pod li { position: relative; overflow: hidden; border-radius: 16px; background: var(--photo-bg); }
.pod img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pod span { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: space-between; gap: 4px; border-radius: 10px; padding: 4px 8px; background: rgba(255, 255, 255, 0.92); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pod b { color: var(--ink); }
.pod li::after { content: "✓"; position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--go); color: #fff; font-size: 12px; font-weight: 700; }

.sol-stat { background: var(--ink); color: #fff; border-color: var(--ink); position: relative; overflow: hidden; }
.sol-stat::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 999px; background: radial-gradient(closest-side, rgba(240, 169, 46, 0.35), transparent); }
.sol-stat .sol-icon { background: rgba(255, 255, 255, 0.1); color: var(--accent-bright); }
.sol-big { position: relative; margin-top: 20px; font-size: clamp(3.4rem, 6vw, 4.6rem); line-height: 1; font-weight: 700; letter-spacing: -0.06em; color: var(--amber-glow); font-variant-numeric: tabular-nums; }
.sol-stat h3 { margin-top: 6px; }
.sol-stat > p { color: rgba(255, 255, 255, 0.7); }

.flow { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 8px; }
.flow-node { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; border-radius: 999px; padding: 10px 14px; background: var(--surface); font-size: 13px; font-weight: 600; }
.flow-node.is-cargro { background: var(--ink); color: #fff; }
.flow-node img { width: 20px; height: 20px; border-radius: 999px; }
.flow-line { position: relative; flex: 1; min-width: 16px; height: 2px; background: var(--line); overflow: hidden; }
.flow-line i { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent-bright); }
@keyframes flow { from { left: -40%; } to { left: 100%; } }
html.motion .flow-line i { animation: flow 1.6s linear infinite; }
html.motion .flow-line:nth-of-type(4) i { animation-delay: 0.8s; }
@media (max-width: 640px) { .flow { flex-direction: column; align-items: stretch; } .flow-line { width: 2px; height: 18px; flex: none; align-self: center; } .flow-node { justify-content: center; } }

/* ------------------------------------------------- tarievenboek */

.ratebook {
  margin-top: 16px; display: grid; gap: 20px; align-items: center; border-radius: var(--r-card); padding: 28px;
  color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2a3d47 0%, var(--ink) 60%);
}
@media (min-width: 900px) { .ratebook { grid-template-columns: 1fr auto; padding: 36px 40px; } }
.ratebook h3 { margin-top: 14px; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.04em; font-weight: 600; }
.ratebook p { margin-top: 8px; color: rgba(255, 255, 255, 0.7); }
.plan .price strong { font-size: 1.5rem; }

/* ------------------------------------------------- formulier: vinkje */

.tick-label { display: inline-flex !important; align-items: center; gap: 10px; cursor: pointer; font-weight: 500 !important; margin: 0 !important; }
.tick-label input { width: 20px !important; min-height: 20px !important; height: 20px; padding: 0 !important; accent-color: var(--ink); }
.field.route-field.is-hidden { display: none; }

/* Productfoto's in het portaalscherm. */
.dash-list li img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: var(--photo-bg); }
.dash-list em.low { color: var(--wait); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ptile { animation: none; }
}

/* =========================================================================
 * Conversie: de offertebalk in de hero, bewijs eronder, "Past het?", een
 * tussentijdse CTA, geruststelling bij het formulier en de mobiele balk.
 * ====================================================================== */

/* ---------------------------------------------- hero: offertebalk */

.qbar {
  margin: 32px auto 0; display: grid; gap: 6px; max-width: 720px; padding: 8px; text-align: left;
  border-radius: 28px; background: rgba(255, 255, 255, 0.96);
}
@media (min-width: 720px) { .qbar { grid-template-columns: 1.25fr 1fr auto; align-items: center; border-radius: 999px; padding: 8px 8px 8px 12px; } }
.qf { display: grid; gap: 2px; min-width: 0; padding: 8px 14px; border-radius: 20px; cursor: text; transition: background-color 0.2s; }
.qf:hover, .qf:focus-within { background: var(--surface); }
@media (min-width: 720px) { .qf { border-radius: 999px; } .qf-naar { border-left: 1px solid var(--line); border-radius: 0; } .qf-naar:hover, .qf-naar:focus-within { border-radius: 999px; } }
.qf small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--subtle); }
.qf select, .qf input {
  width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; outline: none;
  font-size: var(--fs-body); font-weight: 600; color: var(--ink); text-overflow: ellipsis;
}
.qf select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%235b6474' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center / 16px; }
.qf input::placeholder { color: var(--subtle); font-weight: 500; }
.qbar .btn { width: 100%; min-height: 54px; }
@media (min-width: 720px) { .qbar .btn { width: auto; } }

.hero-proof { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: rgba(255, 255, 255, 0.9); font-size: var(--fs-small); font-weight: 600; }
.hero-proof li { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--amber-glow); }

/* ------------------------------------------------------ past het? */

.fit { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .fit { grid-template-columns: 0.95fr 1.05fr; gap: 56px; } }
.fit-text h2 { margin-top: 20px; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.04em; font-weight: 600; }
.fit-text > p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.fit-pick { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.fit-pick button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 16px 4px 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); font-weight: 600;
}
.fit-pick button:hover { border-color: var(--ink); }
.fit-pick img { width: 38px; height: 38px; border-radius: 999px; object-fit: cover; background: var(--photo-bg); }

.fit-card { border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); padding: 24px; }
@media (min-width: 640px) { .fit-card { padding: 32px; } }
.fit-fields { display: grid; gap: 12px; }
@media (min-width: 560px) { .fit-fields { grid-template-columns: repeat(3, 1fr); } }
.fit-fields .field > span { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; }
.fit-fields .field small { color: var(--subtle); font-weight: 500; }
.fit-meters { margin-top: 22px; display: grid; gap: 12px; }
.fit-meter span { display: block; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit-meter b { color: var(--ink); }
.fit-meter i { position: relative; display: block; margin-top: 6px; height: 8px; border-radius: 8px; background: var(--surface); overflow: hidden; }
.fit-meter em { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--go); transition: width 0.5s var(--ease), background-color 0.3s; }
.fit-meter.is-over em { background: var(--wait); }
.fit-result { margin-top: 22px; display: grid; gap: 14px; border-radius: var(--r-tile); padding: 18px 20px; background: var(--surface); transition: background-color 0.3s; }
.fit-msg strong { display: block; font-size: var(--fs-h4); letter-spacing: -0.02em; }
.fit-msg span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); }
.fit-result[data-state="past"] { background: var(--go-tint); }
.fit-result[data-state="past"] .fit-msg strong { color: var(--go); }
.fit-result[data-state="groot"] { background: var(--wait-tint); }
.fit-result[data-state="groot"] .fit-msg strong { color: var(--wait); }
.fit-cta { justify-self: start; }
@keyframes fit-pop { from { transform: scale(0.98); opacity: 0.6; } to { transform: none; opacity: 1; } }
.fit-result.bump { animation: fit-pop 0.35s var(--ease); }

/* ---------------------------------------------- tussentijdse CTA */

.cta-band {
  margin-top: 16px; display: grid; gap: 16px; align-items: center; border-radius: var(--r-card); padding: 24px 28px;
  background: var(--paper); border: 1px solid var(--line);
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band strong { display: block; font-size: var(--fs-h3); letter-spacing: -0.03em; }
.cta-band span { display: block; margin-top: 4px; color: var(--muted); }
.cta-band-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* -------------------------------------------- formulier: geruststelling */

.form-trust { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-small); font-weight: 600; }
.form-trust li { display: inline-flex; align-items: center; gap: 6px; }
.form-trust svg { width: 16px; height: 16px; color: var(--go); }

/* ------------------------------------------------- mobiele actiebalk */

.mbar { display: none; }
@media (max-width: 1023px) {
  .mbar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 65; display: flex; gap: 8px; padding: 8px;
    border-radius: 999px; background: rgba(12, 18, 20, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(160%); transition: transform 0.5s var(--ease);
  }
  .mbar.is-on { transform: none; }
  .mbar-cta { flex: 1; display: grid; place-items: center; min-height: 48px; border-radius: 999px; background: var(--accent-bright); color: var(--ink); font-weight: 700; }
  .mbar-ic { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; }
  .mbar-ic svg { width: 22px; height: 22px; }
  .mbar-wa { background: #25d366; }
  .footer { padding-bottom: 104px; }
}

/* Charterportaal: tweede alinea iets kleiner, de chip met een live-stip. */
.product-dark .product-text > p.product-sub { margin-top: 12px; font-size: var(--fs-body); color: rgba(255, 255, 255, 0.55); }
.product-dark .chip-dark .live-dot { margin-right: 2px; }

/* ===================================================== REVISIE: KLEUR EN RUST */

/* Labels boven de koppen: geen grijs-op-grijs meer, maar amber met een stip. */
.chip:not(.strong):not(.chip-dark) {
  background: linear-gradient(135deg, #fff3dc, #ffe2ad); color: #8a4a00; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(240, 169, 46, 0.35);
}
.heading > .chip:not(.strong):not(.chip-dark)::before,
.statement > .chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(240, 169, 46, 0.25);
}
.chip-dark { background: rgba(240, 169, 46, 0.14); color: var(--amber-glow); border-color: rgba(240, 169, 46, 0.38); font-weight: 600; }

/* Het gekleurde deel van een kop: een warme amber-oranje gloed in plaats van
   één platte kleur. De extra ruimte onderin houdt de staart van g, j en p heel. */
.hl {
  background: linear-gradient(100deg, #cf6f0a 0%, #e8901a 55%, #d97706 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* SplitText zet woorden in eigen blokjes: die krijgen dezelfde gloed. */
/* Losse woorden (SplitText) krijgen één egale kleur: een verloop per woord
   liet elk woord op rood eindigen (de s van "Pas"). */
.hl:has(div, .w) { background: none; color: #dd8210; padding-bottom: 0; }
.hl div, .hl .w { color: #dd8210; }
a.hl, .form-note .hl { background: none; color: var(--accent); padding-bottom: 0; }
.hl-amber { background: linear-gradient(100deg, #ffd88f, #f0a92e 60%, #ff9f43); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.14em; }
.statement-text .hl { font-weight: 700; }

/* Hero: de g van "bezorgen" viel half weg onder de regel. */
.hero-title em, .hero-title em > div, .hero-title em .split-line > div { padding-bottom: 0.16em; }
.hero-title em > div, .hero-title em .split-line > div { margin-bottom: -0.16em; }
html.motion .hero-title .split-line { padding-bottom: 0.2em; margin-bottom: -0.14em; }
html.motion [data-split] > div { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* Voet: idem voor de g van "Cargro" in het grote woordmerk. */
.wordmark { line-height: 1.1; padding-bottom: 0.08em; }

/* ------------------------------------------------ diensten: eigen kleur */

.services {
  padding-top: 72px; padding-bottom: 72px;
  background: radial-gradient(1200px 500px at 85% 0%, rgba(240, 169, 46, 0.22), transparent 70%), linear-gradient(180deg, #fff6e6 0%, #fbe7c6 100%);
}
.services .stack { margin-top: 0; }
.services .stack-card { border-color: rgba(180, 95, 6, 0.14); box-shadow: 0 30px 80px -40px rgba(120, 60, 0, 0.35); }
.services .stack-text { background: #fffaf2; }
@media (min-width: 960px) {
  .stack-text { padding: 36px 40px; }
  .stack-text > p { font-size: var(--fs-body); }
  .stack-text .btn-row { padding-top: 24px; }
}

/* -------------------------------------- wat we bezorgen: fotobanden */

.heading-dark h2 { color: #fff; }
.photo-title { margin-top: 56px; text-align: center; font-size: var(--fs-h3); letter-spacing: -0.03em; font-weight: 600; color: #fff; }
.photo-title::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, #ffd88f, #f0a92e); }
.photo-rows { margin-top: 32px; display: grid; gap: 16px; }
.photo-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
}
.photo-row { display: flex; width: max-content; gap: 16px; animation: marquee 90s linear infinite; }
.photo-row-rev { animation-direction: reverse; animation-duration: 100s; }
.photo-rows:hover .photo-row { animation-play-state: paused; }
.photo-row li { flex-shrink: 0; width: 132px; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); }
.photo-row li img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.photo-row li:hover img { transform: scale(1.06); }
@media (min-width: 640px) { .photo-row li { width: 184px; border-radius: 24px; } }
@media (min-width: 1100px) { .photo-row li { width: 216px; } }
@media (prefers-reduced-motion: reduce) { .photo-row { animation: none; } .photo-mask { overflow-x: auto; } }

/* ------------------------------------------------- trust en reviews */

.trust-marquee .g-stars, .g-score .g-stars { color: #f0a92e; letter-spacing: 1px; }
.g-score { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.g-score b { font-size: 1.25em; }

/* ----------------------------------------------- kosten en aanvraag */

.section-tight { padding: 8px 0 88px; }
.ask-box { padding: 72px 24px; }
@media (min-width: 640px) { .ask-box { padding: 96px 32px; } }
.ask-box h2 { max-width: 860px; }
#aanvraag .book { margin-top: 32px; }

/* Hero: de eerste regel past op een laptop op één regel. */
@media (min-width: 1100px) {
  .hero-copy h1 { font-size: clamp(2.6rem, min(5vw, 9.5svh), 4.6rem); }
  .hero-copy h1 > span:first-child { white-space: nowrap; }
}
/* Zonder maten is er nog niets aan te vragen: de knop blijft dan echt weg. */
.fit-cta[hidden] { display: none; }
.ask-box h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.05; }
.hero-link, a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 639px) { .hero-copy h1 { font-size: 2.3rem; } }

/* Diensten: de kop boven de zes tegels */
.services-head { margin-bottom: 40px; }
.services-head h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); }

/* Best Day als tegel 06: de telefoon met het gesprek in het paneel */
.bd-media { display: grid; place-items: center; padding: 28px 16px; }
.bd-media .bd-visual { width: 100%; padding: 32px 0 0; }
.bd-media .bd-phone { width: min(320px, 100%); }
.bd-media .bd-chat { min-height: 300px; }
.bd-media .bd-badge { right: 8px; top: 0; }

/* Slimme technologie op de telefoon: een rustige verticale lijn met een
   lopend stipje, in plaats van dikke blokjes. */
@keyframes flow-v { from { top: -40%; } to { top: 100%; } }
@media (max-width: 640px) {
  .flow { gap: 0; }
  .flow-line { min-width: 0; width: 2px; height: 22px; border-radius: 2px; background: rgba(12, 18, 20, 0.12); }
  .flow-line i { left: 0; right: 0; width: auto; height: 40%; border-radius: 2px; }
  html.motion .flow-line i { animation-name: flow-v; }
  .flow-node { padding: 9px 14px; }
}

/* Aanvraagbox: donkerder en rustiger, zodat de tekst goed leesbaar is. */
.ask-box { background: linear-gradient(180deg, #121a1d 0%, #1d2a30 60%, #2b3d46 100%); }
.ask-box .aurora i:nth-child(1), .ask-box .aurora i:nth-child(2) { display: none; }
.ask-box .aurora i:nth-child(3) { opacity: 0.28; }
.ask-box p { color: rgba(255, 255, 255, 0.82); }

/* ======================================== TELEFOON: COMPACT EN IN TEGELS
   Maatvoering zoals vergelijkbare sites op ±390 px: kop 26 px, kaarttitel
   19–20 px, tekst 15–16 px, 52 px tussen secties, 16 px zijmarge, kaarten
   als veegrij met de volgende kaart half in beeld, hooguit 3 regels tekst
   per kaart en beelden van ±170 px. */
@media (max-width: 639px) {
  .wrap, .wrap-narrow { padding: 0 16px; }
  .section { padding: 52px 0; }
  .heading h2, .fit-text h2, .hsec-head h2, .product-text h2 { font-size: 1.625rem; line-height: 1.12; }
  .heading p { font-size: 0.975rem; margin-top: 12px; }
  .heading h2 { margin-top: 14px; }
  .btn { min-height: 48px; padding-top: 0; padding-bottom: 0; }

  /* hero: kop 32 px, voorbeeldkaarten op ±40% van het scherm */
  .hero-copy h1 { font-size: 2rem; line-height: 1.06; }
  .hero-body { font-size: 1rem; margin-top: 16px; }

  /* "De laatste kilometers" */
  .trust { padding-top: 36px; }
  .statement { padding-top: 52px; padding-bottom: 44px; }
  .statement-text { font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.035em; }

  /* over ons: één merktegel, de cijfers staan al in de feitenlijst */
  .photos { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; }
  .photos .tile-stat { display: none; }
  .tile-brand { min-height: 0; padding: 16px; }
  .tile-brand .tb-seal { width: 210px; margin: 6px auto 10px; }
  .story { padding: 20px; }
  .story blockquote { font-size: 1.2rem; }
  .story > p { font-size: 0.95rem; margin-top: 12px; }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
  .fact { padding: 10px; }
  .fact strong { font-size: 0.95rem; }
  .fact span { font-size: 12px; }

  /* diensten: dezelfde stapel als op desktop — elke kaart blijft bovenin
     plakken en de volgende schuift eroverheen terwijl je gewoon scrolt */
  .services { padding-top: 44px; padding-bottom: 40px; }
  .services-head { margin-bottom: 18px; }
  .services-head h2 { font-size: 1.9rem; }
  .services .stack { display: grid; gap: 14px; margin: 0; padding: 0 0 24px; }
  .services .stack .stack-card {
    position: sticky; top: calc(74px + var(--n) * 10px);
    display: flex; flex-direction: column; padding: 8px; gap: 8px; border-radius: 24px;
  }
  .stack-media, .stack-media.panel-visual, .stack-media.pstack { order: -1; min-height: 0; height: 236px; padding: 0; border-radius: 18px; }
  .stack-media.panel-visual { display: grid; place-items: center; padding: 12px 10px; }
  .stack-media .ticket { zoom: 0.84; max-width: 400px; }
  .stack-media .ticket ul > li:nth-child(n+4), .stack-media .ticket-foot { display: none; }
  /* Best Day: het gesprek zelf, zonder telefoonrand */
  .bd-media .bd-visual { padding: 0; width: 100%; }
  .bd-media .bd-visual::before, .bd-media .bd-badge, .bd-media .bd-phone-top, .bd-media .bub img, .bd-media .bub:nth-child(n+4) { display: none; }
  .bd-media .bd-phone { width: 100%; border: 0; background: transparent; box-shadow: none !important; }
  .bd-media .bd-chat { min-height: 0; padding: 4px 6px; background: transparent; gap: 8px; }
  .bd-media .bub { font-size: 13px; }
  html.motion .bd-media .bub { animation: none; }
  .stack-text { flex: 1; padding: 16px 16px 14px; border-radius: 18px; }
  .stack-num { font-size: 2.2rem; right: 14px; top: 10px; }
  .stack-text .chip { font-size: 13px; padding: 4px 10px; }
  .stack-text h3 { margin-top: 10px; font-size: 1.2rem; line-height: 1.18; max-width: none; }
  .stack-text > p {
    margin-top: 6px; font-size: 0.94rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .stack-text .ticks { display: none; }
  .stack-text .btn-row { padding-top: 14px; }
  .stack-text .btn { width: 100%; }

  /* twijfel je? */
  .fit { gap: 20px; }

  /* meer dan vervoer: veegrij */
  .sol {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 24px -16px 0; padding: 4px 16px 14px; scroll-padding: 0 16px; scrollbar-width: none;
  }
  .sol::-webkit-scrollbar { display: none; }
  .sol-tile { flex: 0 0 86%; scroll-snap-align: start; padding: 20px; }
  .sol-tile h3 { font-size: 1.15rem; }
  .sol-tile > p { font-size: 0.94rem; }
  .sol-big { font-size: 2.6rem; }

  /* werkwijze: compacte genummerde lijst */
  .hsec { padding: 52px 0 32px; }
  .hsec-track { display: grid; gap: 8px; margin-top: 24px; padding: 0 16px; overflow: visible; }
  .hcard { flex: none; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; padding: 14px 16px; border-radius: 18px; }
  .hcard-num { grid-row: span 2; width: 36px; height: 36px; margin: 0; font-size: 1rem; }
  .hcard .chip, .hcard .note, .hcard-big { display: none; }
  .hcard h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
  .hcard > p { margin-top: 4px; font-size: 0.92rem; line-height: 1.4; max-width: none; }
  .hsec .swipe-hint { display: none; }

  /* kosten en reviews */
  .section-tight { padding: 0 0 52px; }
  .cta-band { padding: 20px; }
  .cta-band strong { font-size: 1.2rem; }
  .cta-band-btns { display: grid; grid-template-columns: 1fr; }
  .cta-band .btn { width: 100%; white-space: nowrap; }
  .hcard-dark .hcard-num { color: var(--ink); }

  /* aanvraag */
  .ask-box { padding: 40px 18px; border-radius: 28px; }
  .ask-box h2 { font-size: 1.6rem; }
  .ask-box p { font-size: 0.95rem; }
  .form { padding: 20px 16px; }
  .side-card { padding: 18px; }
  .side-card:last-child { display: none; }

  /* charterportaal en vragen */
  .bottle-stage { height: 380px; zoom: 0.85; }
  .product-text > p { font-size: 0.975rem; }
  .faq summary { font-size: 0.98rem; }

  /* voet */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer nav a { min-height: 34px; }
}
.swipe-hint { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--subtle); }
.swipe-hint svg { width: 16px; height: 16px; animation: swipe 1.6s var(--ease) infinite; }
@keyframes swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint svg { animation: none; } }

/* Zwevende nav: in- en uitschuiven met een eigen laag en zichtbaarheid,
   zodat er in de verborgen stand niets kan blijven hangen. */
.topbar {
  transform: translate3d(0, -140%, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  opacity: 0; visibility: hidden;
  transition: transform 0.6s var(--ease), opacity 0.3s ease, visibility 0s linear 0.6s;
}
.topbar.is-on {
  transform: translate3d(0, 0, 0); opacity: 1; visibility: visible;
  transition: transform 0.6s var(--ease), opacity 0.3s ease, visibility 0s;
}
/* Telefoon en tablet: de balk 'plakt' bovenaan in plaats van vast te
   zweven. Sticky schuift met het scrollen van de pagina zelf mee, dat tekent
   iOS Safari altijd op de goede plek; een vaste, verschuivende laag zag je
   daar tijdens het scrollen soms midden in beeld. */
@media (max-width: 1023px), (hover: none) {
  .topbar {
    position: sticky; top: 8px; height: 0; overflow: visible; align-items: flex-start; padding: 0 10px;
    transform: translate3d(0, -12px, 0);
  }
  .topbar.is-on { transform: translate3d(0, 0, 0); }
  .topbar-pill { gap: 12px; padding: 6px 6px 6px 10px; }
}
@media (max-width: 639px) {
  main .swipe-hint { display: flex; }
  main .hsec .swipe-hint, main .services .swipe-hint { display: none; }
}

/* ============================================ REVIEWS: DRIJVENDE BAND
   Zoals op de Apollo-preview: zachte pastelkaarten zonder rand die traag
   voorbij drijven, met vervagende randen. Elke kaart heeft zijn eigen
   marge (geen gap), zodat -50% precies één reeks is en de lus niet hapert. */
.rv-band {
  margin: 40px calc(50% - 50vw) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rv-row { display: flex; width: max-content; padding: 4px 0; animation: rv-scroll 64s linear infinite; }
.rv-band:hover .rv-row { animation-play-state: paused; }
@keyframes rv-scroll { to { transform: translateX(-50%); } }
.rv {
  flex: none; width: clamp(280px, 26vw, 400px); margin: 0 16px 0 0; padding: clamp(22px, 1.8vw, 30px);
  border-radius: 28px; display: flex; flex-direction: column; gap: 14px; background: #fbf3e4;
}
.rv-1 { background: #e6eef5; } .rv-2 { background: #fff1cc; }
.rv-stars { color: #f2b705; letter-spacing: 2px; font-size: 18px; }
.rv blockquote { font-size: clamp(16px, 0.5vw + 10px, 20px); line-height: 1.45; letter-spacing: -0.02em; font-weight: 500; color: var(--text); }
.rv figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.rv figcaption b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.rv figcaption small { display: block; font-size: 13px; color: var(--muted); }
.rv-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--accent-bright); color: var(--ink); }
.rv-1 .rv-avatar { background: #3b5563; color: #fff; } .rv-2 .rv-avatar { background: var(--ink); color: #fff; }
@media (prefers-reduced-motion: reduce) { .rv-row { animation: none; } .rv-band { overflow-x: auto; } }
@media (max-width: 639px) { .rv-band { margin-top: 28px; } .rv { width: 280px; padding: 20px; } .rv-row { animation-duration: 48s; } }

/* ====================================== OVER ONS: LEVENDIGER MERKZEGEL
   Een gestippelde baan die de andere kant op draait, een amber stip die
   eromheen rijdt, en een zachte gloed die ademt achter het logo. */
.tb-seal::before, .tb-seal::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; pointer-events: none; }
.tb-seal::before { border: 1.5px dashed rgba(240, 169, 46, 0.4); animation: spin-slow 28s linear infinite reverse; }
.tb-seal::after { background: radial-gradient(circle at 50% 0, #f0a92e 0 5px, rgba(240, 169, 46, 0.35) 6px 9px, transparent 10px); animation: spin-slow 9s linear infinite; }
.tb-seal img { position: relative; z-index: 1; animation: seal-glow 5s ease-in-out infinite; }
@keyframes seal-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 0 0 0 rgba(240, 169, 46, 0), 0 24px 48px -12px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 0 44px 6px rgba(240, 169, 46, 0.32), 0 24px 48px -12px rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .tb-seal::before, .tb-seal::after, .tb-seal img { animation: none; } }

/* Het citaat in "Ons verhaal": meer lucht, een amber aanhalingsteken. */
.story blockquote { position: relative; margin: 26px 0 6px; font-size: clamp(1.45rem, 2.5vw, 1.9rem); line-height: 1.22; text-wrap: balance; }
.story blockquote::before {
  content: "“"; display: block; height: 0.52em; margin-bottom: 10px; font-size: 3.4em; line-height: 1; font-weight: 700;
  background: linear-gradient(180deg, #f0a92e, #d97706); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story > p:first-of-type { margin-top: 20px; }
@media (max-width: 639px) { .story blockquote { margin-top: 20px; font-size: 1.35rem; line-height: 1.25; } }

/* ======================================== MINDER WIT TUSSEN SECTIES */
@media (min-width: 640px) {
  .section { padding: 88px 0; }
  .statement { padding-top: 72px; padding-bottom: 64px; }
  .reel-section { padding: 88px 0 80px; }
  .hsec { padding-top: 88px; }
}
.reel-section { margin-top: 0; }
#aanvraag { padding-top: 24px; }
@media (max-width: 639px) {
  .reel-section { padding: 52px 0 44px; }
  .hsec { padding-top: 44px; }
  .photo-title { margin-top: 32px; }
  .photo-rows { margin-top: 20px; }
}
/* Telefoon: kort "Offerte" in de balk, zodat logo, naam en knop netjes passen. */
@media (max-width: 479px) {
  .hide-xs { display: none; }
  .nav { gap: 10px; }
  .nav-cta { padding: 0 14px; }
}

/* ===================================== BALK OP TELEFOON EN TABLET
   Hier geen "Offerte" (die staat al in de actiebalk onderin), maar de
   secties als veegbare menuregel; de sectie waar je bent licht op. */
.topbar-links .navlink.is-active { color: var(--text); }
@media (max-width: 1023px) {
  .topbar .nav-cta { display: none; }
  .topbar-pill { gap: 8px; padding: 6px 6px 6px 10px; }
  .topbar-links {
    display: flex; flex: 1; min-width: 0; margin: 0; gap: 2px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 24px), transparent);
  }
  .topbar-links::-webkit-scrollbar { display: none; }
  .topbar-links .navlink { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; white-space: nowrap; color: var(--muted); }
  .topbar-links .navlink::after { display: none; }
  .topbar-links .navlink.is-active { background: var(--ink); color: #fff; }
}
@media (max-width: 639px) {
  .topbar .brand-name { display: none; }
  /* hero: logo en Offerte-knop iets lager */
  .hero-frame .nav { padding-top: 24px; }
}

/* Hero-kop: op de telefoon "Groot, zwaar, / lang of kwetsbaar? / Wij
   bezorgen het." met wat meer regelafstand en een kleine pauze tussen
   vraag en antwoord. Op grotere schermen blijft de vraag één regel. */
.br-m { display: none; }
.hero-copy h1 > span + span { margin-top: 0.08em; }
@media (max-width: 639px) {
  .br-m { display: inline; }
  .hero-copy h1 { margin-top: 20px; font-size: 2.15rem; line-height: 1.12; }
  .hero-copy h1 > span + span { margin-top: 0.22em; }
  .hero-body { margin-top: 18px; }
}
/* De ondertitel past op een laptop op één regel (geen los "passen."). */
@media (min-width: 640px) { .hero-body { max-width: 680px; } }