/* Merksite (sinds november 2026): Tringo als fietsmerk van de Tringo One en Two.
   Richting "tech en modern": de fiets groot en centraal, grote cijfers, klikbare
   onderdelen, detailopnamen. Bouwt voort op de tokens uit main.css en overschrijft
   daar de nav en footer voor pagina's met body.merk. */

.merk {
  --ink: #053339;
  --muted: #4f6466;
  --line: #dfe5e4;
  --soft: #eef1f0;
  --deep: #032428;
  --lime: var(--highlighter);
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
}
.merk section { padding: 112px 0; position: relative; }
.merk .wrap { max-width: 1216px; padding: 0 32px; box-sizing: content-box; }
.m-center { text-align: center; }
.m-center .m-lead, .m-center .m-body { margin-left: auto; margin-right: auto; }

/* Typografie */
.m-h1, .m-h2, .m-h3 { font-family: var(--font-body); font-weight: 600; color: inherit; text-wrap: balance; }
.m-display { font-size: clamp(52px, 8.4vw, 120px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; }
.m-h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.m-h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.m-h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; }
.m-lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; color: var(--muted); max-width: 640px; letter-spacing: -0.01em; }
.m-body { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 560px; }
.m-eyebrow { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.m-dark .m-lead, .m-dark .m-body, .m-dark .m-eyebrow { color: rgba(238,247,244,.72); }
.m-grad {
  /* Laag 1: lichtschittering (staat buiten beeld tot de animatie), laag 2: het verloop zelf. */
  background-image:
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%),
    linear-gradient(100deg, var(--ink) 10%, #0b6b6f 60%, #2a9d8f 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Ruimte zodat het verloop ook de staart van g/j en de rand van de laatste letter dekt. */
  padding: 0 .08em .12em 0; margin-right: -.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.m-dark .m-grad {
  background-image:
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%),
    linear-gradient(100deg, #ffffff 20%, var(--lime) 90%);
}

/* Knoppen en links */
.m-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.m-center .m-actions { justify-content: center; }
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s var(--ease);
}
.m-btn:hover { transform: translateY(-1px); }
.m-btn--primary { background: var(--ink); color: var(--white); }
.m-btn--primary:hover, .m-btn--primary:focus-visible { background: #0a4a52; color: var(--white); }
.m-btn--lime:hover, .m-btn--lime:focus-visible { background: #f6ff5a; color: var(--ink); }
.m-btn--secondary:hover, .m-btn--secondary:focus-visible { background: var(--ink); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.m-btn:focus-visible, .m-more:focus-visible, .m-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.m-btn--lime { background: var(--lime); color: var(--ink); }
.m-btn--secondary { box-shadow: inset 0 0 0 1.5px currentColor; }
.m-btn svg { width: 14px; height: 14px; flex: none; }
.m-more { font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; gap: 4px; }
.m-more::after { content: "›"; font-size: 1.3em; line-height: 1; transition: transform .2s var(--ease); }
.m-more:hover::after { transform: translateX(3px); }
.m-dark .m-more { color: var(--lime); }
.m-link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.m-status {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1.3; vertical-align: middle; letter-spacing: 0;
}

/* Nav: vaste balk met glas-effect in plaats van de zwevende pil uit main.css */
.merk .nav {
  position: sticky; top: 0; left: auto; transform: none;
  width: 100%; max-width: none; border-radius: 0;
  /* Hele pixels: een logo op een halve pixel wordt wazig op schermen zonder retina. */
  padding: 0 max(32px, round(down, (100% - 1216px) / 2, 1px));
  height: 64px; box-sizing: border-box;
  background: rgba(255,255,255,.82); color: var(--ink);
  border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(5,51,57,.08) !important;
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.merk .nav__logo { height: 24px; }
.merk .nav__logo svg { shape-rendering: geometricPrecision; }
.merk .nav__logo g { fill: var(--ink); }
.merk .nav__links { gap: 34px; }
.merk .nav__links a { font-size: 14.5px; opacity: 1; color: var(--muted); }
.merk .nav__links a:hover, .merk .nav__links a.active { color: var(--ink); }
.merk .nav__links a.active::after { bottom: -22px; height: 2px; }
.merk .nav__cta { background: var(--ink); color: var(--white); padding: 10px 18px; font-size: 14.5px; }
.merk .nav__cta:hover { transform: none; background: #0a4a52; color: var(--white); }
@media (max-width: 860px) {
  .merk .nav { padding: 0 16px; height: 60px; }
  .merk .nav__burger { background: var(--soft); color: var(--ink); }
  .merk .nav__mobile {
    top: 60px; left: 0; right: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.97);
  }
  .merk .nav__mobile a { color: var(--ink); opacity: 1; }
  .merk .nav__mobile a:hover, .merk .nav__mobile a.active { background: var(--soft); }
  .merk .nav__mobile-cta { background: var(--ink) !important; color: var(--white) !important; }
}

/* Productlokale nav (zoals op productpagina's van techmerken) */
.m-localnav {
  position: sticky; top: 64px; z-index: 90;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(5,51,57,.08);
}
.m-localnav .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; gap: 16px; }
.m-localnav strong { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.m-localnav nav { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--muted); }
.m-localnav nav a:not(.m-btn):hover { color: var(--ink); }
.m-localnav .m-btn { min-height: 32px; padding: 0 14px; font-size: 13px; color: var(--white); }
@media (max-width: 860px) {
  .m-localnav { top: 60px; }
  .m-localnav nav a:not(.m-btn) { display: none; }
}

/* Footer: zelfde donkere basis, rustiger tekst */

/* Producttegels (home) */
.m-tile { overflow: hidden; padding: 96px 0 0 !important; }
.m-tile--soft { background: var(--soft); }
.m-tile--sand { background: linear-gradient(180deg, #f4ebe2 0%, var(--sand) 100%); }
.m-tile--dark { background: radial-gradient(120% 90% at 50% 0%, #0b4a50 0%, var(--ink) 45%, var(--deep) 100%); color: var(--white); }
.m-tile .m-lead { margin-top: 14px; }
.m-tile .m-actions { margin-top: 24px; }
.m-tile__img { margin: 40px auto 0; max-width: 1040px; padding: 0 16px; }
.m-tile__img img { width: 100%; height: auto; display: block; }
.m-tile--dark .m-tile__img { filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.m-tile--dark .m-tile__img::after {
  content: ""; display: block; height: 1px; margin: 0 auto; width: 70%;
  background: radial-gradient(closest-side, rgba(238,254,35,.55), transparent);
}

/* Cijfers */
.m-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.m-number__val { font-size: clamp(44px, 5.6vw, 80px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }
.m-number__val small { font-size: .42em; letter-spacing: -0.01em; margin-left: 4px; color: rgba(238,247,244,.9); }
.m-number__lbl { margin-top: 12px; font-size: 16px; color: rgba(238,247,244,.72); }
.m-numbers--light .m-number__val { color: var(--ink); }
.m-numbers--light .m-number__val small { color: var(--muted); }
.m-numbers--light .m-number__lbl { color: var(--muted); }

/* Klikbare onderdelen op de fiets */
.m-explore { position: relative; max-width: 1040px; margin: 56px auto 0; }
.m-explore img { width: 100%; height: auto; display: block; }
.m-hs {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--lime); box-shadow: 0 0 0 4px rgba(5,51,57,.9), 0 6px 20px rgba(5,51,57,.35);
  display: grid; place-items: center; transition: transform .2s var(--ease);
}
.m-hs::before { content: "+"; font: 600 20px/1 var(--font-body); color: var(--ink); transition: transform .2s var(--ease); }
.m-hs::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--lime); opacity: 0; animation: m-pulse 2.4s var(--ease) infinite;
}
.m-hs:hover, .m-hs[aria-expanded="true"] { transform: translate(-50%, -50%) scale(1.12); }
.m-hs[aria-expanded="true"]::before { transform: rotate(45deg); }
.m-hs:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@keyframes m-pulse { 0% { opacity: .8; transform: scale(.7); } 80%, 100% { opacity: 0; transform: scale(1.5); } }
.m-hs-card {
  position: absolute; z-index: 2; width: min(300px, 80%);
  background: var(--white); color: var(--ink); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 20px 50px -12px rgba(5,51,57,.35); font-size: 15px; line-height: 1.5; text-align: left;
}
.m-hs-card strong { display: block; font-size: 17px; margin-bottom: 4px; }
.m-hs-card p { color: var(--muted); }
.m-hs-hint { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }

/* Detailopnamen */
.m-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.m-detail { background: var(--soft); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.m-detail img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.m-detail:hover img { transform: scale(1.04); }
.m-detail__txt { padding: 20px 22px 24px; }
.m-detail__txt .m-h3 { font-size: 18px; }
.m-detail__txt p { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* Banden en kaarten */
.m-soft { background: var(--soft); }
.m-dark { background: var(--ink); color: var(--white); }
.m-deep { background: var(--deep); color: var(--white); }
.m-band { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.m-band .m-body { margin-top: 18px; }
.m-phone { display: flex; justify-content: center; }
.m-phone img { width: min(340px, 78%); height: auto; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.m-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.m-card { position: relative; border-radius: 24px; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: var(--white); isolation: isolate; }
.m-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.m-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,36,40,0) 30%, rgba(3,36,40,.88) 100%); }
.m-card:hover > img { transform: scale(1.03); }
.m-card .m-body { color: rgba(238,247,244,.82); margin-top: 10px; }
.m-card .m-more { color: var(--lime); margin-top: 18px; }
.m-card--plain { background: var(--soft); color: var(--ink); justify-content: space-between; }
.m-card--plain::before { display: none; }
.m-card--plain .m-body { color: var(--muted); }
.m-card--plain .m-more { color: var(--ink); }

/* Vertrouwen */
.m-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; margin-top: 56px; text-align: left; }
.m-pillar { border-top: 1px solid rgba(238,247,244,.2); padding-top: 22px; }
.m-pillar p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: rgba(238,247,244,.72); }
.m-light .m-pillar { border-color: var(--line); }
.m-light .m-pillar p { color: var(--muted); }
.m-maker { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 56px; font-size: 15px; color: rgba(238,247,244,.6); }
.m-maker img { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .9; }

/* Productpagina */
.m-crumbs { font-size: 14px; color: var(--muted); padding-top: 24px; }
.m-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.m-specs { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; }
.m-specs dl { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; border-bottom: 1px solid var(--line); }
.m-specs dt, .m-specs dd { padding: 18px 0; border-top: 1px solid var(--line); }
.m-specs dt { font-weight: 600; }
.m-specs dd { color: var(--muted); }
.m-specs__empty { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }

/* Servicepagina */
.m-rows { border-top: 1px solid var(--line); }
.m-row { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; padding: 44px 0; border-bottom: 1px solid var(--line); }
.m-row .m-actions { margin-top: 24px; }
.m-list { list-style: none; counter-reset: m; }
.m-list li { counter-increment: m; display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; color: var(--muted); }
.m-list li + li { border-top: 1px solid var(--line); }
.m-list li::before { content: counter(m, decimal-leading-zero); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Zakelijk formulier */
.m-panel { background: var(--soft); border-radius: 24px; padding: 40px; }
.m-form { display: grid; gap: 18px; }
.m-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.m-field { display: grid; gap: 6px; }
.m-field label { font-size: 14px; font-weight: 600; }
.m-field input, .m-field select, .m-field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
  border: 1px solid #c9d2d1; border-radius: 12px; padding: 13px 15px; width: 100%; box-sizing: border-box;
}
.m-field textarea { min-height: 140px; resize: vertical; }
.m-field input:focus, .m-field select:focus, .m-field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.m-form .m-btn { justify-self: start; border: 0; cursor: pointer; }
/* Los vinkje in een formulier: het hokje naast de tekst, niet erboven, en de
   tekst uitlijnen op de eerste regel. */
.m-form__check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.m-form__check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ink); }
.m-form__check label { font-size: 14px; line-height: 1.5; color: var(--muted); }

.m-note { font-size: 14px; color: var(--muted); }
.m-note a { text-decoration: underline; }
.m-melding { border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
.m-melding--goed { background: #eaf6ef; color: #0f3d2e; border: 1px solid #b7e0c6; }
.m-melding--fout { background: #fdeceb; color: #7a1c14; border: 1px solid #f5c2bd; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

@media (max-width: 960px) {
  .merk section { padding: 72px 0; }
  .m-tile { padding-top: 64px !important; }
  .m-band, .m-specs, .m-row, .m-cards { grid-template-columns: 1fr; gap: 36px; }
  .m-row { gap: 12px; padding: 32px 0; }
  .m-numbers { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .m-details { grid-template-columns: 1fr 1fr; }
  .m-card { min-height: 400px; padding: 28px; }
}
@media (max-width: 600px) {
  .merk .wrap { padding: 0 16px; }
  .m-details { grid-template-columns: 1fr; }
  .m-form__row { grid-template-columns: 1fr; }
  .m-specs dl { grid-template-columns: 1fr; }
  .m-specs dd { border-top: 0; padding-top: 0; }
  .m-panel { padding: 28px 20px; }
  .m-hs { width: 26px; height: 26px; }
  .m-hs-card { left: 0 !important; right: 0; margin: 0 auto; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .m-hs::after { animation: none; }
  .m-detail img, .m-card > img, .m-btn { transition: none; }
  .m-detail:hover img, .m-card:hover > img { transform: none; }
}

/* ------------------------------------------------------------------
   Animaties. Alleen actief met html.m-js (gezet in de head), zodat
   zonder JavaScript alles gewoon zichtbaar is. data-anim op een element,
   data-stagger op de ouder voor een vertraging per kind (--i).
   ------------------------------------------------------------------ */
.m-js [data-anim] {
  opacity: 0;
  transition:
    opacity .9s var(--ease) calc(var(--i, 0) * 110ms),
    transform 1.2s var(--ease) calc(var(--i, 0) * 110ms);
  will-change: opacity, transform;
}
.m-js [data-anim="up"] { transform: translateY(44px); }
.m-js [data-anim="zoom"] { transform: scale(.94); }
.m-js [data-anim="ride"] { transform: translateX(-38vw); transition-duration: .9s, 1.6s; }
/* Hero-beeld: alleen beweging, geen opacity, zodat het direct telt als zichtbaar. */
.m-js [data-anim="rise"] { opacity: 1; transform: translateY(70px) scale(.95); transition-duration: 0s, 1.6s; }
.m-js [data-anim].is-in { opacity: 1; transform: none; }

/* Kop in regels: elke .m-line schuift apart omhoog */
.m-line { display: block; overflow: hidden; padding: 0 .1em .2em; margin: 0 -.1em -.2em; }
.m-line > span { display: inline-block; }
.m-js .m-line > span { transform: translateY(105%); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 120ms + 80ms); }
.m-js .is-in .m-line > span, .m-js .m-line.is-in > span { transform: none; }

/* Kleurverloop schuift één keer door bij binnenkomst */
.m-js .is-in .m-grad, .m-js .m-grad.is-in { animation: m-sweep 2.2s cubic-bezier(.45,0,.2,1) .7s both; }
@keyframes m-sweep { from { background-position: 150% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

/* Klikbare punten verschijnen één voor één */
.m-js .m-explore .m-hs { opacity: 0; scale: .2; transition: opacity .4s var(--ease), scale .6s cubic-bezier(.34,1.56,.64,1); }
.m-js .m-explore.is-in .m-hs { opacity: 1; scale: 1; }
.m-js .m-explore.is-in .m-hs:nth-of-type(1) { transition-delay: .5s; }
.m-js .m-explore.is-in .m-hs:nth-of-type(2) { transition-delay: .62s; }
.m-js .m-explore.is-in .m-hs:nth-of-type(3) { transition-delay: .74s; }
.m-js .m-explore.is-in .m-hs:nth-of-type(4) { transition-delay: .86s; }
.m-js .m-explore.is-in .m-hs:nth-of-type(5) { transition-delay: .98s; }

/* Detailfoto's zoomen uit bij binnenkomst */
.m-js .m-detail[data-anim] img { scale: 1.14; transition: scale 1.6s var(--ease) calc(var(--i, 0) * 110ms), transform .8s var(--ease); }
.m-js .m-detail.is-in img { scale: 1; }

/* Meebewegen met scrollen: --p loopt van -1 (onder) naar 1 (boven) */
[data-parallax] { --p: 0; }
.m-js .m-tile__img[data-parallax] > img, .m-js .m-tile__img[data-parallax] > .m-colors__stage { transform: scale(calc(1 + var(--p) * 0.05)) translateY(calc(var(--p) * -24px)); }
.m-js .m-phone[data-parallax] img { transform: translateY(calc(var(--p) * -50px)) rotateY(calc(var(--p) * -14deg)) rotateX(calc(var(--p) * 6deg)) rotateZ(calc(var(--p) * -2deg)); }

@media (prefers-reduced-motion: reduce) {
  .m-js [data-anim], .m-js [data-anim="rise"] { opacity: 1; transform: none; transition: none; }
  .m-js .m-line > span { transform: none; transition: none; }
  .m-js .is-in .m-grad, .m-js .m-grad.is-in { animation: none; }
  .m-js .m-explore .m-hs { opacity: 1; scale: 1; transition: none; }
  .m-js .m-detail[data-anim] img { scale: 1; transition: none; }
  .m-js [data-parallax] img { transform: none !important; }
}

/* ------------------------------------------------------------------
   Hero homepage: de One rijdt binnen, daarna blijft het blok staan
   tijdens het scrollen. merk.js zet --sp (0 tot 1) op .m-hero.
   ------------------------------------------------------------------ */
.m-hero {
  --sp: 0;
  --t1: clamp(0, (var(--sp) - .04) / .34, 1);
  height: 270vh; padding: 0 !important;
  background: radial-gradient(90% 60% at 50% 70%, #ffffff 0%, var(--soft) 70%);
}
.m-hero__stick {
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.m-hero__txt {
  padding: clamp(28px, 6vh, 64px) 32px 0; position: relative; z-index: 2;
  opacity: calc(1 - var(--t1) * 1.5);
  transform: translateY(calc(var(--t1) * -90px));
  will-change: transform, opacity;
}
.m-hero__txt .m-lead { margin-top: 14px; }
.m-hero .m-display { font-size: clamp(44px, min(8.4vw, 10.5vh), 120px); }
/* Lage schermen (laptops): compactere tekst, zodat de fiets meteen helemaal in beeld past. */
@media (max-height: 920px) and (min-width: 861px) {
  .m-hero__txt { padding-top: clamp(16px, 3vh, 32px); }
  .m-hero .m-eyebrow { margin-bottom: 8px; }
  .m-hero .m-display { font-size: clamp(44px, min(7vw, 8.6vh), 96px); }
  .m-hero__txt .m-lead { font-size: 17px; margin-top: 10px; max-width: 560px; }
  .m-hero__txt .m-actions { margin-top: 16px; }
  .m-hero .m-price { margin-top: 10px; }
  .m-hero__stage { margin-top: 8px; }
}
.m-hero__txt .m-actions { margin-top: 24px; }
.m-hero__stage {
  /* Het vlak onder de tekst vult de rest van het vaste blok; de fiets vult de hoogte van dat vlak.
     Zo bepaalt CSS de maat, in elke browser en ongeacht wanneer lettertype of beelden laden. */
  width: 100%; flex: 1 1 0; min-height: 0; display: flex; justify-content: center; align-items: flex-start;
  margin-top: clamp(8px, 2vh, 24px); padding-bottom: clamp(24px, 5vh, 56px); box-sizing: border-box;
}
.m-hero__bike {
  /* Maat: zo hoog als het vlak, begrensd op de breedte. merk.js rekent alleen --zoom (hoeveel groter
     aan het eind) en --lift (zo ver omhoog dat de fiets midden in beeld staat) uit. */
  position: relative; height: 100%; width: auto; aspect-ratio: 1600 / 1190;
  max-height: calc(min(1240px, 92vw) / 1.3445); min-height: 180px;
  transform: translateY(calc(var(--t1) * var(--lift, 260px) * -1)) scale(calc(1 + var(--t1) * (var(--zoom, 1.06) - 1)));
  transform-origin: 50% 50%;
  will-change: transform;
}
.m-hero__bike .m-colors__img { z-index: 1; }

/* Weg onder de wielen */
.m-hero__road {
  /* Alleen een zachte grondschaduw onder de wielen, geen lijn. */
  position: absolute; left: 0; right: 0; bottom: 1%; height: 3px; z-index: 0;
}
.m-hero__road::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: -14px; height: 28px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5,51,57,.22), transparent);
}

/* Binnenrijden bij laden */
.m-js .m-hero__bike .m-colors__img.is-on { animation: m-drive 1.7s cubic-bezier(.16,1,.3,1) .25s both; }
.m-js .m-hero__road { animation: m-road 1.5s cubic-bezier(.16,1,.3,1) .1s both; }
@keyframes m-drive {
  0% { transform: translateX(55vw) skewX(-8deg); filter: blur(10px); }
  70% { transform: translateX(-1.5%) skewX(1deg); filter: blur(0); }
  100% { transform: none; filter: none; }
}
@keyframes m-road {
  0%, 40% { opacity: 0; }
  100% { opacity: 1; }
}

/* Labels met lijntjes */
.m-callouts { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.m-callout {
  --c: clamp(0, (var(--sp) - var(--at)) / .1, 1);
  position: absolute; left: var(--x); top: var(--y); width: 0; height: 0;
  /* Labels schalen niet mee met de inzoomende fiets. */
  scale: calc(1 / (1 + var(--t1) * (var(--zoom, 1.06) - 1)));
}
.m-callout__dot {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 3px var(--ink);
  transform: translate(-50%, -50%) scale(var(--c));
}
.m-callout__line {
  position: absolute; left: -.75px; width: 1.5px; height: 64px; background: var(--ink);
  transform: scaleY(var(--c));
}
.m-callout--boven .m-callout__line { bottom: 6px; transform-origin: 50% 100%; }
.m-callout--onder .m-callout__line { top: 6px; transform-origin: 50% 0; }
.m-callout__lbl {
  position: absolute; left: 0; white-space: nowrap;
  background: var(--white); color: var(--muted); border-radius: 999px; padding: 9px 16px;
  font-size: 14px; line-height: 1.2; box-shadow: 0 12px 30px -10px rgba(5,51,57,.35);
  opacity: var(--c);
  transform: translateX(var(--ax, -50%)) translateY(calc((1 - var(--c)) * 10px));
}
.m-callout__lbl strong { color: var(--ink); font-size: 16px; margin-right: 4px; }
.m-callout--boven .m-callout__lbl { bottom: 72px; }
.m-callout--onder .m-callout__lbl { top: 72px; }

/* Scroll-hint */
.m-hero__scroll {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  opacity: calc(.8 - var(--t1) * 3); padding-bottom: 28px; z-index: 3;
}
.m-hero__scroll::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1.5px; height: 20px; background: var(--muted);
  animation: m-hint 1.8s var(--ease) infinite;
}
@keyframes m-hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 860px) {
  .m-hero { height: 220vh; }
  .m-hero__stick { top: 60px; height: calc(100vh - 60px); }
  .m-hero__txt { padding: 28px 16px 0; }
  .m-callout__line { height: 34px; }
  .m-callout--boven .m-callout__lbl { bottom: 42px; }
  .m-callout--onder .m-callout__lbl { top: 42px; }
  .m-callout__lbl { font-size: 0; padding: 7px 11px; }
  .m-callout__lbl strong { font-size: 13px; margin: 0; }
}

/* Zonder JavaScript of met minder beweging: geen vastgezet blok, labels direct zichtbaar. */
html:not(.m-js) .m-hero { height: auto; padding-bottom: 72px !important; }
html:not(.m-js) .m-hero__stick { position: static; height: auto; }
html:not(.m-js) .m-hero__bike { height: auto; width: min(1040px, 92vw); }
html:not(.m-js) .m-callout { --c: 1; }
@media (prefers-reduced-motion: reduce) {
  .m-hero { height: auto; padding-bottom: 72px !important; }
  .m-hero__stick { position: static; height: auto; overflow: visible; }
  .m-hero__bike { height: auto !important; width: min(1040px, 92vw); }
  .m-hero__txt, .m-hero__bike { transform: none !important; opacity: 1 !important; }
  .m-callout { --c: 1; }
  .m-js .m-hero__bike .m-colors__img, .m-js .m-hero__road, .m-hero__scroll::after { animation: none; }
  .m-hero__scroll { display: none; }
}

/* Waarom Tringo: bento-raster */
.m-bento {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(260px, auto);
  gap: 20px; margin-top: 56px;
}
.m-bento__tile {
  position: relative; border-radius: 28px; padding: 36px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; background: var(--white);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.m-bento__tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(5,51,57,.35); }
.m-bento__nr { font-size: 13px; font-weight: 600; letter-spacing: .08em; opacity: .55; margin-bottom: auto; padding-bottom: 28px; font-variant-numeric: tabular-nums; }
.m-bento__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.m-bento__tile p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 520px; }

.m-bento__tile--photo { grid-column: span 2; grid-row: span 2; min-height: 560px; color: var(--white); padding: 0; justify-content: flex-end; }
.m-bento__tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.m-bento__tile--photo:hover img { transform: scale(1.04); }
.m-bento__tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,36,40,0) 35%, rgba(3,36,40,.92) 100%); }
.m-bento__tile--photo .m-bento__txt { padding: 40px; }
.m-bento__tile--photo .m-bento__nr { display: block; padding-bottom: 14px; color: var(--lime); opacity: 1; }
.m-bento__tile--photo .m-bento__title { font-size: clamp(30px, 3.4vw, 48px); }
.m-bento__tile--photo p { color: rgba(238,247,244,.85); }

.m-bento__tile--lime { background: var(--lime); color: var(--ink); }
.m-bento__tile--lime p { color: rgba(5,51,57,.78); }

.m-bento__tile--ink { background: var(--ink); color: var(--white); }
.m-bento__tile--ink p { color: rgba(238,247,244,.72); }
.m-bento__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(238,247,244,.18); }
.m-bento__stats dt { font-size: 12.5px; color: rgba(238,247,244,.6); order: 2; margin-top: 4px; }
.m-bento__stats div { display: flex; flex-direction: column; }
.m-bento__stats dd { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--lime); }

.m-bento__tile--wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
.m-bento__tile--wide .m-bento__nr { display: block; margin: 0; padding-bottom: 18px; }
.m-bento__tile--wide .m-more { white-space: nowrap; color: var(--ink); }

@media (max-width: 960px) {
  .m-bento { grid-template-columns: 1fr 1fr; }
  .m-bento__tile--photo { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
}
@media (max-width: 600px) {
  .m-bento { grid-template-columns: 1fr; gap: 14px; }
  .m-bento__tile { padding: 28px; border-radius: 22px; }
  .m-bento__tile--photo { min-height: 420px; padding: 0; }
  .m-bento__tile--photo .m-bento__txt { padding: 28px; }
  .m-bento__tile--wide { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .m-bento__tile, .m-bento__tile--photo img { transition: none; }
  .m-bento__tile:hover, .m-bento__tile--photo:hover img { transform: none; }
}

/* Tringo Smart: bewegende achtergrond, gloed, zwevende labels */
/* Geen overflow op .m-smart zelf: dat breekt position: sticky. Het vaste blok knipt zelf af. */
.m-smart__orb { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; opacity: .5; pointer-events: none; }
.m-smart__orb--a { width: 520px; height: 520px; background: #0b6b6f; left: -120px; top: -160px; animation: m-drift 16s ease-in-out infinite alternate; }
.m-smart__orb--b { width: 420px; height: 420px; background: rgba(238,254,35,.35); right: 4%; bottom: -200px; animation: m-drift 20s ease-in-out -6s infinite alternate-reverse; }
@keyframes m-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(120px, 80px) scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .m-smart__orb, .m-phone__glow { animation: none; }
}

/* Prijs en onderhoudsregel */
.m-price { margin-top: 18px; font-size: 15px; color: var(--muted); }
.m-price strong { color: var(--ink); font-weight: 600; font-size: 17px; margin-left: 4px; }
.m-buy { margin-top: 8px; }
.m-buy__note { margin: 10px auto 0; max-width: 520px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* Onderhoud naar keuze */
.m-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m-choice { background: var(--soft); border-radius: 20px; padding: 24px; }
.m-choice__nr { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.m-choice h3 { margin-top: 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.m-choice p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.m-choice:first-child { background: var(--ink); color: var(--white); }
.m-choice:first-child .m-choice__nr { color: var(--lime); }
.m-choice:first-child p { color: rgba(238,247,244,.75); }
@media (max-width: 960px) { .m-choices { grid-template-columns: 1fr; } }

/* Tringo Smart: vastgezet scroll-verhaal. merk.js zet --sp en data-step op .m-smart. */
.m-smart {
  --e: clamp(0, var(--sp) / .12, 1);
  height: 420vh; padding: 0 !important;
}
.m-smart__stick { position: sticky; top: 64px; height: calc(100vh - 64px); overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.m-smart__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; width: 100%; }
.m-smart .m-body { margin-top: 18px; }

.m-steps { list-style: none; margin: 36px 0 0; padding: 0; max-width: 480px; display: grid; gap: 4px; }
.m-step { position: relative; padding: 14px 0 14px 24px; opacity: .38; transition: opacity .5s var(--ease); }
.m-step strong { display: block; color: var(--white); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.m-step__b { display: block; color: rgba(238,247,244,.72); font-size: 15.5px; line-height: 1.5; max-height: 0; overflow: hidden; transition: max-height .6s var(--ease), margin .6s var(--ease); }
.m-step__bar { position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: rgba(238,247,244,.18); overflow: hidden; }
.m-step__bar::after { content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); }
.m-smart[data-step="0"] .m-step[data-s="0"], .m-smart[data-step="1"] .m-step[data-s="1"], .m-smart[data-step="2"] .m-step[data-s="2"], .m-smart[data-step="3"] .m-step[data-s="3"], .m-smart[data-step="4"] .m-step[data-s="4"] { opacity: 1; }
.m-smart[data-step="0"] .m-step[data-s="0"] .m-step__b, .m-smart[data-step="1"] .m-step[data-s="1"] .m-step__b, .m-smart[data-step="2"] .m-step[data-s="2"] .m-step__b, .m-smart[data-step="3"] .m-step[data-s="3"] .m-step__b, .m-smart[data-step="4"] .m-step[data-s="4"] .m-step__b { max-height: 80px; margin-top: 4px; }
.m-smart[data-step="0"] .m-step[data-s="0"] .m-step__bar::after, .m-smart[data-step="1"] .m-step[data-s="1"] .m-step__bar::after, .m-smart[data-step="2"] .m-step[data-s="2"] .m-step__bar::after, .m-smart[data-step="3"] .m-step[data-s="3"] .m-step__bar::after, .m-smart[data-step="4"] .m-step[data-s="4"] .m-step__bar::after { transform: scaleY(1); }

/* Telefoon: draait bij binnenkomst vanuit een hoek naar voren */
.m-device-wrap { position: relative; display: flex; justify-content: center; perspective: 1600px; }
.m-device {
  /* Hoogte past altijd in het vaste blok: de app-afbeelding is 2,1 keer zo hoog als breed. */
  --dw: min(310px, calc((100vh - 64px - 120px) / 2.15), 80vw);
  position: relative; width: var(--dw); z-index: 1;
  transform: translateY(calc((1 - var(--e)) * 90px)) rotateY(calc((1 - var(--e)) * -28deg)) rotateX(calc((1 - var(--e)) * 12deg)) rotateZ(calc((1 - var(--e)) * 4deg));
  filter: drop-shadow(0 50px 70px rgba(0,0,0,.5));
  will-change: transform;
}

@media (max-width: 860px) {
  .m-smart { height: 370vh; }
  .m-smart__stick { top: 60px; height: calc(100vh - 60px); align-items: flex-start; padding-top: 28px; }
  .m-smart__grid { grid-template-columns: 1fr; gap: 20px; }
  .m-smart .m-h2 { font-size: 30px; }
  .m-smart .m-body, .m-smart .m-eyebrow { display: none; }
  .m-steps { margin-top: 12px; }
  .m-step { display: none; padding: 6px 0 6px 18px; }
  .m-smart[data-step="0"] .m-step[data-s="0"], .m-smart[data-step="1"] .m-step[data-s="1"], .m-smart[data-step="2"] .m-step[data-s="2"], .m-smart[data-step="3"] .m-step[data-s="3"], .m-smart[data-step="4"] .m-step[data-s="4"] { display: block; }
  .m-device { --dw: min(230px, calc((100vh - 60px - 220px) / 2.15)); }
  .ip__tag { display: none; }
}

/* Zonder JavaScript of met minder beweging: niet vastzetten, alles leesbaar, geen kader. */
html:not(.m-js) .m-smart { height: auto; padding: 96px 0 !important; }
html:not(.m-js) .m-smart__stick { position: static; height: auto; }
html:not(.m-js) .m-step { opacity: 1; display: block; }
html:not(.m-js) .m-step__b { max-height: none; margin-top: 4px; }
html:not(.m-js) .ip__tag { display: none; }
@media (prefers-reduced-motion: reduce) {
  .m-smart { height: auto; padding: 96px 0 !important; }
  .m-smart__stick { position: static; height: auto; }
  .m-step { opacity: 1; display: block !important; }
  .m-step__b { max-height: none; margin-top: 4px; }
  .m-device { transform: none; }
  .ip__tag { display: none; }
}

/* iPhone in HTML/CSS (Tringo Smart). Breedte bepaalt alles: maten in em t.o.v. font-size. */
.m-device { font-size: calc(var(--dw, 300px) / 27); }
/* Huidige iPhone Pro: dunne metalen rand, smalle zwarte bezel, ronde schermhoeken, kleine Dynamic Island,
   links actieknop en volume, rechts aan/uit en de vlakke cameraknop. Verhouding 71,5 x 149,6 mm. */
.ip {
  position: relative; aspect-ratio: 71.5 / 149.6; border-radius: 5.2em; padding: .22em;
  background: linear-gradient(145deg, #d3d6d8 0%, #7a8083 10%, #34393c 28%, #1d2123 52%, #3b4043 78%, #c4c8ca 100%);
  box-shadow: 0 2.6em 4.4em -1.6em rgba(0,0,0,.7), 0 0 0 .04em rgba(255,255,255,.25);
}
.ip__glass { height: 100%; border-radius: 5em; background: #050607; padding: .42em; box-shadow: inset 0 0 0 .04em rgba(255,255,255,.08); }
.ip__btn { position: absolute; width: .26em; border-radius: .2em; background: linear-gradient(90deg, #2c3134, #a3a8ab 55%, #3a3f42); }
.ip__btn--action { left: -.2em; top: 16%; height: 3.6%; }
.ip__btn--up { left: -.2em; top: 23.5%; height: 7%; }
.ip__btn--down { left: -.2em; top: 32%; height: 7%; }
.ip__btn--power { right: -.2em; top: 26%; height: 11%; background: linear-gradient(270deg, #2c3134, #a3a8ab 55%, #3a3f42); }
.ip__btn--camera { right: -.12em; top: 52%; height: 6.5%; width: .16em; background: #15181a; box-shadow: 0 0 0 .05em #6c7275; }
.ip__screen {
  position: relative; height: 100%; border-radius: 4.65em; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, #0f3b40 0%, #082a2e 55%, #061f22 100%);
  color: #eef7f4; font-family: var(--font-body); display: flex; flex-direction: column;
}
/* Glasschittering */
.ip__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 32%, rgba(255,255,255,0) 45%); }
.ip__status { display: flex; align-items: center; justify-content: space-between; height: 3.5em; padding: 0 2.35em 0 2.75em; font-size: 1.1em; font-weight: 600; position: relative; flex: none; }
.ip__status > span:first-child { font-size: 1.08em; letter-spacing: -0.01em; }
.ip__island { position: absolute; left: 50%; top: .62em; transform: translateX(-50%); width: 6.6em; height: 1.95em; border-radius: 2em; background: #000; box-shadow: inset 0 0 0 .05em rgba(255,255,255,.04); }
.ip__icons { display: flex; align-items: center; gap: .35em; }
.ip__icons svg { fill: currentColor; width: auto; height: .8em; }
.ip__batt { width: 1.9em; height: .9em; border-radius: .25em; border: .09em solid rgba(238,247,244,.55); padding: .09em; position: relative; }
.ip__batt span { display: block; height: 100%; width: 80%; background: #eef7f4; border-radius: .12em; }
.ip__app { flex: 1; display: flex; flex-direction: column; gap: .8em; padding: .8em 1.4em 0; min-height: 0; }
.ip__bar { display: flex; align-items: baseline; gap: .45em; }
.ip__bar strong { font-size: 1.7em; font-weight: 600; letter-spacing: -0.03em; }
.ip__bar em { font-style: normal; font-size: .85em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.ip__tabs { display: flex; gap: .5em; }
.ip__tabs span { font-size: .95em; padding: .55em 1em; border-radius: 2em; background: rgba(238,247,244,.08); color: rgba(238,247,244,.75); }
.ip__tabs .on { background: var(--lime); color: var(--ink); font-weight: 600; }
.ip__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85em; }
.ip__card {
  position: relative; border-radius: 1.5em; padding: 1.1em 1.25em; background: rgba(238,247,244,.06);
  box-shadow: inset 0 0 0 .08em rgba(238,247,244,.08); display: flex; flex-direction: column; gap: .3em;
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.ip__card--hi { background: transparent; box-shadow: none; padding-left: .2em; padding-right: .2em; }
.ip__hello { font-size: 2em; font-weight: 600; letter-spacing: -0.02em; }
.ip__lock { display: inline-flex; align-items: center; gap: .45em; font-size: .95em; color: rgba(238,247,244,.7); }
.ip__lock svg { fill: var(--lime); height: 1.05em; width: auto; }
.ip__lbl { font-size: .95em; color: rgba(238,247,244,.65); }
.ip__val { font-size: 2.1em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ip__val small { font-size: .5em; font-weight: 500; color: rgba(238,247,244,.6); }
.ip__bars { position: absolute; right: 1.25em; bottom: 1.1em; display: flex; align-items: flex-end; gap: .3em; height: 2.6em; }
.ip__bars i { width: .55em; height: var(--h); border-radius: .3em; background: rgba(238,254,35,.55); }
.ip__home { width: 9.5em; height: .36em; border-radius: 1em; background: rgba(238,247,244,.8); align-self: center; margin: auto 0 .7em; flex: none; }

/* Actieve kaart licht op, de rest dimt; het label hangt aan de kaart zelf. */
.m-smart .ip__card { opacity: .38; }
.ip-tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ip__tag {
  position: absolute; top: var(--ty, 50%); right: var(--tr, auto); left: var(--tl, auto); white-space: nowrap;
  padding: .7em 1.2em; border-radius: 2em; background: var(--lime); color: var(--ink);
  font-size: 1.25em; font-weight: 600; box-shadow: 0 1em 2.4em -.8em rgba(0,0,0,.6);
  opacity: 0; transform: translate(1em, -50%); transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.ip__tag::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--tg, 2.6em); height: .1em; background: var(--lime); }
.ip__tag--r { transform: translate(-1em, -50%); }
.ip__tag--r::after { left: auto; right: 100%; }
.m-smart[data-step="0"] .ip__card[data-s="0"] { opacity: 1; transform: scale(1.04); background: rgba(238,247,244,.12); box-shadow: inset 0 0 0 .1em rgba(238,254,35,.85), 0 1.2em 2.6em -1em rgba(0,0,0,.55); }
.m-smart[data-step="0"] .ip__tag[data-s="0"] { opacity: 1; transform: translate(0, -50%); transition-delay: .3s; }
.m-smart[data-step="1"] .ip__card[data-s="1"] { opacity: 1; transform: scale(1.04); background: rgba(238,247,244,.12); box-shadow: inset 0 0 0 .1em rgba(238,254,35,.85), 0 1.2em 2.6em -1em rgba(0,0,0,.55); }
.m-smart[data-step="1"] .ip__tag[data-s="1"] { opacity: 1; transform: translate(0, -50%); transition-delay: .3s; }
.m-smart[data-step="2"] .ip__card[data-s="2"] { opacity: 1; transform: scale(1.04); background: rgba(238,247,244,.12); box-shadow: inset 0 0 0 .1em rgba(238,254,35,.85), 0 1.2em 2.6em -1em rgba(0,0,0,.55); }
.m-smart[data-step="2"] .ip__tag[data-s="2"] { opacity: 1; transform: translate(0, -50%); transition-delay: .3s; }
.m-smart[data-step="3"] .ip__card[data-s="3"] { opacity: 1; transform: scale(1.04); background: rgba(238,247,244,.12); box-shadow: inset 0 0 0 .1em rgba(238,254,35,.85), 0 1.2em 2.6em -1em rgba(0,0,0,.55); }
.m-smart[data-step="3"] .ip__tag[data-s="3"] { opacity: 1; transform: translate(0, -50%); transition-delay: .3s; }
.m-smart[data-step="4"] .ip__card[data-s="4"] { opacity: 1; transform: scale(1.04); background: rgba(238,247,244,.12); box-shadow: inset 0 0 0 .1em rgba(238,254,35,.85), 0 1.2em 2.6em -1em rgba(0,0,0,.55); }
.m-smart[data-step="4"] .ip__tag[data-s="4"] { opacity: 1; transform: translate(0, -50%); transition-delay: .3s; }
.m-smart[data-step="0"] .ip__card--hi[data-s="0"] { padding-left: 1.1em; padding-right: 1.1em; }
.m-device__note { position: absolute; bottom: -2.2em; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(238,247,244,.45); }
html:not(.m-js) .m-smart .ip__card { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .m-smart .ip__card { opacity: 1; transform: none !important; } }
.ip__list { display: grid; gap: .1em; padding: .2em .2em 0; opacity: .55; }
.ip__ride { display: grid; grid-template-columns: 1fr auto auto; gap: 1em; padding: .55em 0; font-size: .95em; border-top: .08em solid rgba(238,247,244,.1); }
.ip__ride b { font-weight: 500; }
.ip__ride span { color: rgba(238,247,244,.65); text-align: right; min-width: 3.6em; }

/* Hero in Apple-opbouw: productnaam groot, slogan eronder, weinig tekst zodat de fiets ruimte krijgt. */
.m-hero__title { display: block; font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.m-hero__name { font-size: clamp(44px, min(6.2vw, 8vh), 88px); line-height: 1.02; letter-spacing: -0.04em; }
.m-hero__tag { margin-top: .1em; font-size: clamp(24px, min(3.2vw, 4.4vh), 46px); line-height: 1.15; letter-spacing: -0.03em; }
.m-hero__txt .m-actions { margin-top: 22px; }
.m-hero .m-price { margin-top: 12px; }

/* Kleurkiezer Tringo One */
.m-colors { position: relative; overflow: hidden; isolation: isolate; }
.m-colors__glow {
  position: absolute; left: 50%; top: 58%; width: min(1100px, 110vw); aspect-ratio: 2 / 1; transform: translate(-50%, -50%);
  background-color: var(--tint); opacity: .22; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
  transition: background-color .8s var(--ease);
}
/* Fiets en kleurstalen samen in beeld: breedte begrensd op de schermhoogte. */
.m-colors__stage { position: relative; width: min(980px, 100%, calc((100vh - 64px - 52px - 300px) * 1.344)); margin: 36px auto 0; aspect-ratio: 1600 / 1190; }
.m-colors__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: translateX(14px) scale(.985); transition: opacity .7s var(--ease), transform .9s var(--ease);
  filter: drop-shadow(0 30px 30px rgba(5,51,57,.12));
}
.m-colors__img.is-on { opacity: 1; transform: none; }
.m-colors__pick { display: flex; justify-content: center; gap: 18px; margin-top: 24px; }
.m-swatch {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sw); cursor: pointer; padding: 0; border: 0;
  box-shadow: inset 0 0 0 1px rgba(5,51,57,.16), inset 0 6px 10px rgba(255,255,255,.35);
  outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .25s var(--ease), transform .25s var(--ease);
}
.m-swatch:hover { transform: scale(1.08); }
.m-swatch[aria-checked="true"] { outline-color: var(--ink); }
.m-swatch:focus-visible { outline-color: var(--ink); outline-style: dashed; }
.m-colors__name { margin-top: 18px; font-size: 17px; color: var(--muted); min-height: 1.6em; }
.m-colors__name strong { color: var(--ink); font-weight: 600; }
/* Toevoeging bij de kleurnaam (bijv. Standaard): ondergeschikt aan de naam zelf. */
.m-colors__name span:not(:empty) { margin-left: 2px; font-size: .9em; font-weight: 400; color: var(--muted); }
.m-colors__name span:not(:empty)::before { content: "\00B7"; margin-right: 6px; color: var(--muted); }
@media (max-width: 600px) { .m-colors__stage { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .m-colors__img, .m-colors__glow, .m-swatch { transition: none; } }

/* Juridische pagina's (privacy): rustige leestypografie met vaste inhoudsopgave */
.merk .m-doc-head { padding: 32px 0 56px; }
.merk .m-doc { padding: 0 0 120px; }
.m-doc__grid { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 80px; align-items: start; border-top: 1px solid var(--line); padding-top: 56px; }
.m-toc { position: sticky; top: 96px; }
.m-toc__title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.m-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.m-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; color: var(--muted); transition: color .2s, border-color .2s; }
.m-toc a:hover { color: var(--ink); }
.m-toc a.is-on { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
.m-prose { font-size: 18px; line-height: 1.75; color: #24474b; }
.m-prose > p:first-child { font-size: 20px; line-height: 1.65; color: var(--ink); }
.m-prose h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 56px 0 14px; scroll-margin-top: 96px; }
.m-prose p { margin: 0 0 20px; }
.m-prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.m-prose a:hover { text-decoration-color: var(--lime); }
@media (max-width: 960px) {
  .m-doc__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .m-toc { position: static; }
  .m-toc ol { grid-template-columns: 1fr 1fr; border-left: 0; gap: 0 16px; }
  .m-toc a { padding-left: 0; border-left: 0; }
  .m-prose { font-size: 17px; }
  .m-prose > p:first-child { font-size: 18px; }
}

/* Kleurkeuze in de hero's */
.m-tile__img .m-colors__stage { width: 100%; margin: 0; }
.m-colors__choose { margin-top: 18px; }
.m-colors__choose .m-colors__pick { margin-top: 0; gap: 14px; }
.m-colors__choose .m-swatch { width: 28px; height: 28px; outline-offset: 3px; }
.m-colors__choose .m-colors__name { margin-top: 10px; font-size: 15px; }

/* Smart: tekstkolom iets smaller zodat de labels naast de telefoon passen. */
@media (min-width: 861px) { .m-smart__grid { grid-template-columns: minmax(0, 460px) 1fr; } }
/* Te weinig ruimte: label compact op de kaart zelf, zonder lijn. */
.m-smart.is-tight .ip__tag {
  top: var(--tt); left: var(--tx); right: auto; font-size: .95em; padding: .45em .8em;
  transform: translate(0, -55%) !important;
}
.m-smart.is-tight .ip__tag::after { display: none; }
.m-smart.is-tight .ip__tag:not([data-s]) { display: none; }

/* Onderhoud als keuze, onder de kop van de specificaties */
.m-spec-note { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 340px; }
.m-spec-note .m-body { margin-top: 6px; font-size: 16px; }
.m-spec-note .m-more { margin-top: 12px; font-size: 16px; }

/* Garantievoorwaarde bij onderhoud naar keuze */
.m-warn { grid-column: 1 / -1; border-left: 3px solid var(--lime); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0 16px 16px 0; padding: 18px 22px; }
.m-warn strong { display: block; font-size: 16px; color: var(--ink); }
.m-warn p { margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.m-spec-note__warn { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--lime); font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* Zonder specificaties (bijv. Tringo Two): twee nette kaarten in plaats van een lege tabel */
.m-spec-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.m-spec-card { background: var(--white); border-radius: 24px; padding: clamp(28px, 4vw, 48px); }
.m-spec-card .m-body { margin-top: 12px; }
.m-spec-note--card { margin-top: 0; padding-top: 0; border-top: 0; max-width: none; }
@media (max-width: 860px) { .m-spec-cards { grid-template-columns: 1fr; } }

/* Formulier: keuzelijst in huisstijl en foute velden zichtbaar */
.m-field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23053339' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.m-field [aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }

/* Veelgestelde vragen. Open <details>, zodat de antwoorden ook zonder JavaScript
   in de HTML staan: zoekmachines en AI-assistenten lezen ze dan gewoon mee. */
.m-faq { max-width: 860px; margin: 48px auto 0; border-top: 1px solid var(--line); }
.m-faq__item { border-bottom: 1px solid var(--line); }
.m-faq__vraag {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 20px;
  padding: 24px 0; font-size: 19px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.015em; color: var(--ink);
}
.m-faq__vraag::-webkit-details-marker { display: none; }
.m-faq__vraag::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-left: auto; margin-top: 6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .25s ease;
}
.m-faq__item[open] .m-faq__vraag::after { transform: rotate(225deg); margin-top: 10px; }
.m-faq__vraag:hover { color: #0b6b6f; }
.m-faq__vraag:focus-visible { outline: 2px solid #0b6b6f; outline-offset: 4px; border-radius: 4px; }
.m-faq__antwoord { padding: 0 44px 26px 0; }
.m-faq__antwoord p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
.m-faq__meer { margin: 32px 0 0; text-align: center; }
@media (max-width: 760px) {
  .m-faq { margin-top: 36px; }
  .m-faq__vraag { font-size: 17px; gap: 14px; padding: 20px 0; }
  .m-faq__antwoord { padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) { .m-faq__vraag::after { transition: none; } }

/* Vergelijktabel Tringo One / Tringo Two. Echte tabelopmaak, zodat schermlezers,
   zoekmachines en AI-assistenten de verhoudingen tussen de modellen kunnen lezen. */
.m-vgl { margin-top: 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.m-vgl__tabel { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.m-vgl__caption { caption-side: top; text-align: left; font-size: 15px; color: var(--muted); padding-bottom: 16px; }
.m-vgl__tabel th, .m-vgl__tabel td { padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 16px; line-height: 1.5; }
.m-vgl__tabel thead th { border-bottom: 1px solid var(--ink); padding-top: 0; }
.m-vgl__tabel tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.m-vgl__tabel tbody td { color: var(--muted); }
.m-vgl__tabel tbody tr:hover td, .m-vgl__tabel tbody tr:hover th { background: var(--soft); }
.m-vgl__th-label { font-size: 15px; font-weight: 600; color: var(--muted); }
.m-vgl__kop { display: block; text-decoration: none; color: var(--ink); }
.m-vgl__beeld { display: block; width: 100%; max-width: 220px; height: auto; margin-bottom: 12px; }
.m-vgl__naam { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.m-vgl__kop:hover .m-vgl__naam { color: #0b6b6f; }
.m-vgl__hint { display: none; font-size: 14px; color: var(--muted); margin: 0 0 12px; }
@media (max-width: 760px) {
  .m-vgl__tabel { min-width: 560px; }
  .m-vgl__tabel th, .m-vgl__tabel td { padding: 14px 14px; font-size: 15px; }
  .m-vgl__beeld { max-width: 120px; }
  .m-vgl__naam { font-size: 16px; }
  .m-vgl__hint { display: block; }
  /* De labelkolom blijft staan tijdens het zijwaarts vegen, anders zie je wel
     de waarden maar niet meer waar ze bij horen. */
  .m-vgl__tabel tbody th, .m-vgl__tabel thead th:first-child {
    position: sticky; left: 0; z-index: 1; width: 38%;
    background: var(--white); box-shadow: 1px 0 0 var(--line);
  }
  .m-vgl__tabel tbody tr:hover th { background: var(--soft); }
}
.m-vgl__leeg { color: #8a9a9b; font-style: italic; }