/* ==========================================================================
   TAKUMI · takumi.css  (ontwerpsysteem "Het Takumi-pakket")
   --------------------------------------------------------------------------
   Idee: de site is de blauwe Takumi-doos, uitgepakt. De pagina ligt op een
   koele Mist-ondergrond (het karton). Elke sectie is een afgeronde kleurplaat
   (blauw, graphite, silver, wit, één rode band). Daarop: de korte scherpe rode
   balk, de 匠-cirkel, pills, het chevron-vierkantenpatroon en de snede met de
   gouden en witte lijn van de echte doos. Alles uit het brandboard.

   Namespace: tk-   ·   Geen afhankelijkheid van de oude stijlbladen.
   Volgorde: 1 tokens · 2 basis · 3 typografie · 4 tonen en platen · 5 knoppen
   6 header · 7 decor (sticker, patroon, cirkel, tape) · 8 hero · 9 statement
   10 producttegels · 11 iconen, usp · 12 kolommen, cijfers, bento, stappen
   13 tabellen en vergelijken · 14 productpagina · 15 faq · 16 formulier
   17 aside, lege staat · 18 afsluitband · 19 footer · 19b duo, waarden, podia,
   orbs · 20 reveal en bewegen · responsive · pagina-specifiek (smalle regels
   voor één pagina of paginatype, na de responsive blokken)

   Regels in het kort: blauw is de hoofdplaat (min. 40% van elke pagina), rood
   alleen als balk, kleine pill en één band per pagina, goud alleen als snede of
   rolkern (max. één per scherm), nooit rood op blauw, nooit Mist op silver,
   µ nooit in hoofdletters (.tk-nocase), outline-tekst alleen decoratief en
   aria-hidden, alles wat langer dan 5 s beweegt is stopbaar of stopt vanzelf.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
@font-face {
  font-family: 'Nohemi';
  src: url('assets/fonts/nohemi.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Fallback met de breedte van Nohemi (gemeten: 1,04 op 400, 1,01 op 700, 0,97 op 800 tot 900 ten opzichte van Arial), zodat de koppen niet verspringen
   tijdens het laden. Nohemi zit als subset in het bestand en mist µ (U+00B5), Δ (U+0394), → en ≥: die komen uit deze Arial-rij, in het juiste gewicht.
   Het bestand zelf opnieuw subsetten kan ook (voeg die vier tekens toe), dan vervalt deze regel niet maar wordt hij niet meer gebruikt. */
@font-face { font-family: 'Nohemi Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 599; size-adjust: 104%; }
@font-face { font-family: 'Nohemi Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 799; size-adjust: 101%; }
@font-face { font-family: 'Nohemi Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 800 900; size-adjust: 97%; }

:root {
  /* merkkleuren */
  --tk-blue: #103685;
  --tk-red: #AA2704;
  --tk-graphite: #3C4142;
  --tk-silver: #BCBEC0;
  --tk-mist: #E5E5E6;
  --tk-white: #FFFFFF;
  --tk-gold: #D6A94A;           /* geschat uit de doos: alleen de ene lijn per pagina en de rolkern */

  /* blauwschaal (alleen verloop binnen het blauw) */
  --tk-blue-50: #EEF2FA;
  --tk-blue-100: #D8E0F1;
  --tk-blue-200: #B1C1E3;
  --tk-blue-300: #7F97CC;
  --tk-blue-400: #4D6CB2;
  --tk-blue-500: #23489A;
  --tk-blue-600: #103685;
  --tk-blue-700: #0D2C6D;
  --tk-blue-800: #0A2255;
  --tk-blue-900: #07183C;

  /* roodschaal */
  --tk-red-50: #FBEEEA;
  --tk-red-100: #F5D3C9;
  --tk-red-500: #C1360F;
  --tk-red-600: #AA2704;
  --tk-red-700: #8A1F03;
  --tk-red-800: #661702;

  /* koud grijs */
  --tk-gray-25: #F7F7F7;
  --tk-gray-50: #F0F0F1;
  --tk-gray-100: #E5E5E6;
  --tk-gray-200: #D2D3D4;
  --tk-gray-300: #BCBEC0;
  --tk-gray-400: #9A9D9F;
  --tk-gray-500: #6E7274;
  --tk-gray-600: #575B5C;
  --tk-gray-700: #3C4142;
  --tk-gray-800: #2B2F30;
  --tk-gray-900: #1B1E1F;

  /* vorm: radius-schaal (cirkel = 50%, pill = 999px, de rode balk is de uitzondering) */
  --tk-r-1: 12px;
  --tk-r-2: 20px;
  --tk-r-3: 28px;
  --tk-r-4: 36px;
  --tk-r-5: 48px;
  --tk-r-6: clamp(32px, 5.2vw, 56px);   /* platen: 32px op 375, 56px vanaf ca. 1080 */
  --tk-r-pill: 999px;
  --tk-bar-w: 56px;
  --tk-bar-h: 10px;
  --tk-bar-r: 2px;                        /* scherp: de enige harde vorm tussen de ronde */
  --tk-tilt: 11deg;                       /* de hoek van de doos: snede, gekantelde doos */
  --tk-sticker-tilt: 0deg;                /* stickers (pill, stempel, ring) staan recht; zet hier een hoek om ze weer te kantelen */

  /* ruimte */
  --tk-gutter: clamp(16px, 4vw, 40px);
  --tk-inset: clamp(8px, 1.6vw, 20px);    /* marge van een plaat tot de rand van het scherm */
  --tk-seam: 12px;                        /* de naad tussen twee platen: de rand van de doos */
  --tk-pad-y: clamp(56px, 7vw, 96px);
  --tk-max: 1180px;
  --tk-overlap: 72px;                     /* hoever de Kort-gezegd-kaart over de heronaad schuift */
  --tk-lap: clamp(16px, 2.5vw, 28px);     /* hoever een gekleurde plaat over de vorige schuift */
  --tk-header-h: 64px;

  /* schaduw: blauw getint, nooit grijs; platen hebben er geen */
  --tk-lift: 0 18px 40px -22px rgba(16, 54, 133, .45);
  --tk-lift-lg: 0 24px 48px -24px rgba(7, 24, 60, .55);
  --tk-sticker-shadow: 0 10px 20px -8px rgba(7, 24, 60, .45);
  --tk-nav-shadow: 0 14px 40px -12px rgba(7, 24, 60, .38);

  /* beweging */
  --tk-ease: cubic-bezier(.2, .7, .2, 1);
  --tk-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* type */
  --tk-font: 'Nohemi', 'Nohemi Fallback', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --tk-font-jp: 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', 'Meiryo', sans-serif;
  --tk-fs-h2: clamp(30px, 4.6vw, 56px);
  --tk-fs-h3: clamp(20px, 2.2vw, 26px);
  --tk-fs-lead: clamp(18px, 1.7vw, 20px);
  --tk-fs-text: 17px;

  /* pijl voor knoppen en chips (data-uri, geen extra bestand) */
  --tk-arrow-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --tk-arrow-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103685' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --tk-down-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M6 11l6 6 6-6M5 20h14'/%3E%3C/svg%3E");
  --tk-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  --tk-x-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
  /* chevron-vierkantenpatroon van de doos: geneste afgeronde vierkanten, 45 graden, lijnwerk */
  --tk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none' stroke='%23E5E5E6' stroke-width='5' stroke-linejoin='round'%3E%3Cg transform='rotate(45 70 70)'%3E%3Crect x='22' y='22' width='96' height='96' rx='16'/%3E%3Crect x='38' y='38' width='80' height='80' rx='12'/%3E%3Crect x='54' y='54' width='64' height='64' rx='8'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 560px) {
  :root {
    --tk-r-3: 24px;
    --tk-r-4: 28px;
    --tk-r-5: 32px;
    --tk-overlap: 48px;
  }
}

/* ---------- 2. basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;               /* header eindigt op 76px, het anker landt 16px eronder (alleen hier, niet ook op [id]) */
  interpolate-size: allow-keywords;
}
html.tk-lock { overflow: hidden; }        /* open mobiel menu: de pagina erachter scrolt niet */
body {
  margin: 0;
  background: var(--tk-white);
  color: var(--tk-graphite);
  font: var(--fw-r) var(--fs-m)/var(--lh-b) var(--tk-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;                     /* Safari 15 en ouder kent clip niet */
  overflow-x: clip;
}
main:focus { outline: 0; }                /* skiplink-doel (tabindex -1), geen ring om de hele pagina */
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
b, strong { font-weight: var(--fw-h); }
::selection { background: var(--tk-blue); color: var(--tk-white); }
.tk-plate--blue ::selection, .tk-plate--graphite ::selection, .tk-plate--red ::selection { background: var(--tk-mist); color: var(--tk-blue); }
:focus-visible { outline: 3px solid var(--focus, var(--tk-red)); outline-offset: 3px; }
.tk-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tk-skip {
  position: fixed; left: 16px; top: -80px; z-index: 200; padding: var(--sp-3) var(--sp-4); border-radius: 999px;
  background: var(--tk-mist); color: var(--tk-blue); font-weight: var(--fw-h); text-decoration: none; transition: top .2s;
}
.tk-skip:focus { top: 16px; }
.tk-skip:focus-visible { outline-color: var(--tk-mist); }   /* ligt over de blauwe hero: Mist op blauw 8,8:1 */

.tk-container { width: 100%; max-width: var(--tk-max); margin-inline: auto; padding-inline: var(--tk-gutter); }
.tk-measure { max-width: 62ch; }

/* ---------- 3. typografie ---------- */
/* H1 past per constructie: zet .tk-cq (container-type) op de tekstkolom. Het langste woord
   (BESCHERMFOLIE 7,88em, ONDERSTEUNING 8,13em) blijft binnen 100cqi bij 10,2cqi. */
.tk-cq { container-type: inline-size; }
.tk-h1 {
  font-weight: var(--fw-h); text-transform: uppercase; letter-spacing: var(--ls-h); line-height: var(--lh-d);
  color: var(--head, var(--tk-white)); text-wrap: balance; hyphens: manual; overflow-wrap: normal;
  font-size: var(--fs-h1);
  font-size: var(--fs-num);
}
.tk-h1--xl { font-size: var(--fs-num); font-size: var(--fs-num); }
.tk-h1--panel { font-size: var(--fs-h2); font-size: var(--fs-h1); }
.tk-nowrap { white-space: nowrap; }
.tk-nocase { text-transform: none !important; letter-spacing: normal; } /* voor µ en eenheden in tekst met hoofdletters */
.tk-h2 {
  font-weight: var(--fw-h); letter-spacing: var(--ls-h); line-height: var(--lh-d); color: var(--head);
  font-size: var(--tk-fs-h2); text-wrap: balance; max-width: 24ch;
}
.tk-h2--wide { max-width: none; }
.tk-h3 {
  font-weight: var(--fw-h); letter-spacing: var(--ls-h); line-height: var(--lh-d); color: var(--head);
  font-size: var(--tk-fs-h3); text-wrap: balance;
}
.tk-h2 em, .tk-h2 .tk-light, .tk-h1 .tk-light { font-style: normal; font-weight: var(--fw-r); }
.tk-h1 .tk-light { color: var(--ink-2, var(--tk-blue-200)); }
.tk-light { font-weight: var(--fw-r); }
.tk-lead { font-size: var(--tk-fs-lead); line-height: var(--lh-b); font-weight: var(--fw-r); color: var(--ink-2, var(--ink)); max-width: 52ch; text-wrap: pretty; }
.tk-text { max-width: 62ch; color: var(--ink); text-wrap: pretty; }
.tk-text > * + * { margin-top: 1em; }
/* links in lopende tekst (v18k): overal het zachte kader van de kernwoorden, ook op blauwe en graphite platen (via --soft en --soft-ink van de plaat).
   Geen onderstreping en geen rode lijn bij hover: het kader wordt iets dieper. Pijl-links (.tk-link) en knoppen blijven zoals ze zijn. */
.tk-text a, .tk-faq__a a, .tk-note a, .tk-lead a, .tk-tablenote a:not(.tk-link), .tk-step__card p a, .tk-check a, .tk-statement__text a {
  background: var(--soft, var(--tk-blue-50)); color: var(--soft-ink, var(--tk-blue)); font-weight: var(--fw-b); text-decoration: none;
  padding: .02em .38em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .2s;
}
.tk-text a:hover, .tk-faq__a a:hover, .tk-note a:hover, .tk-lead a:hover, .tk-tablenote a:not(.tk-link):hover, .tk-step__card p a:hover, .tk-check a:hover, .tk-statement__text a:hover {
  background: color-mix(in srgb, var(--soft-ink, var(--tk-blue)) 14%, var(--soft, var(--tk-blue-50)));
}
.tk-note { font-size: var(--fs-s); line-height: var(--lh-b); font-weight: var(--fw-r); color: var(--ink-2); max-width: 70ch; }

/* de korte dikke rode balk + label (kicker). h2 mag een label zijn (h2.tk-label) */
.tk-bar {
  display: block; width: var(--tk-bar-w); height: var(--tk-bar-h); border-radius: var(--tk-bar-r);
  background: var(--bar, var(--tk-red)); flex: none;
}
.tk-bar--sm { width: 40px; height: 8px; }
.tk-bar--xs { width: 32px; height: 6px; }
.tk-bar--lg { width: 72px; height: 10px; }
.tk-label {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-xs); line-height: var(--lh-h); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase;
  color: var(--ink); margin: 0;
}
.tk-label::before {
  content: ""; display: block; width: var(--tk-bar-w); height: var(--tk-bar-h); border-radius: var(--tk-bar-r); background: var(--bar, var(--tk-red));
  transform-origin: left center;
}
.tk-label + .tk-h1, .tk-label + .tk-h2 { margin-top: var(--sp-3); }
.tk-label--chip {
  display: inline-flex; flex-direction: row; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3); border-radius: 999px;
  background: var(--soft); color: var(--soft-ink);
}
.tk-label--chip::before { width: 22px; height: 6px; }

/* kernwoorden in lopende tekst als pill */
.tk-mark, .tk-text strong.tk-mark, .tk-statement__text strong {
  background: var(--soft, var(--tk-blue-50)); color: var(--soft-ink, var(--tk-blue)); font-weight: var(--fw-h);
  padding: .02em .38em; border-radius: 999px; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: normal;
}
.tk-text .tk-mark, .tk-bigtext .tk-mark, .tk-care__list .tk-mark { white-space: nowrap; }
.tk-mark--red { background: var(--tk-red); color: #fff; }
.tk-mark--white { background: var(--tk-white); color: var(--tk-blue); }
/* zichtbare placeholders ([haakjes]) blijven een opdracht, maar netjes.
   De stip is een achtergrond op een inline ::before met padding en een vaste spatie (U+00A0). Dat teken kleeft aan het eerste woord, dus de regel
   breekt vóór de stip en nooit erachter. Zonder teken (alleen padding) bleef Chrome het begin van de pil achter aan de vorige regel zetten: een
   losse stip boven de rand van de kaart. Ook op 320 en 375px (een inline-block liet de stip los achter). */
.tk-ph {
  --dot: var(--tk-red);
  display: inline; padding: .12em .7em .12em .6em; border-radius: 14px; font-weight: var(--fw-b); font-size: .92em; line-height: var(--lh-b);
  background: var(--soft); color: var(--soft-ink); white-space: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tk-plate--red .tk-ph, .tk-card--red .tk-ph { --dot: var(--tk-mist); }
.tk-ph::before { content: "\00a0"; display: inline; padding-left: .76em; background: radial-gradient(circle at .25em 50%, var(--dot) .25em, transparent calc(.25em + 1px)) no-repeat; }   /* .76em + de vaste spatie (±.24em) = 1em, de oude breedte */
/* Een pil die over meer regels loopt krijgt per regel een rechterrand (clone). Aan het regeleinde steekt die rand ±.65em voorbij de tekstkolom.
   Een alinea met een pil houdt daarom een smalle goot over, zodat de rand binnen het eigen vak blijft. */
:where(p):has(> .tk-ph) { padding-inline-end: .7em; }
:where(p):has(> .tk-mark) { padding-inline-end: .4em; }   /* idem voor een kernwoord-pil (.tk-mark, .38em) in lopende tekst: op 375px stak die in de stijlkit 6px voorbij de alinea */
.tk-contact__row > span:has(> .tk-ph) { padding-inline-end: .7em; }   /* idem in de contactrij: de pil (clone) stak op 360px 2px voorbij het vak */
.tk-squares { display: inline-flex; gap: var(--sp-2); }
.tk-squares i { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--tk-graphite); }
.tk-squares i:nth-child(2) { background: var(--tk-red); }
.tk-squares i:nth-child(3) { background: var(--tk-blue); }
.tk-plate--blue .tk-squares i:first-child, .tk-plate--graphite .tk-squares i:first-child { background: var(--tk-silver); }
.tk-plate--blue .tk-squares i:nth-child(3) { background: var(--tk-mist); }
.tk-plate--graphite .tk-squares i:nth-child(3) { background: var(--tk-blue-500); }

/* ---------- 4. tonen en platen ---------- */
/* Een tone zet kleur, kopkleur, tekst, balk, focus en zachte vlakken. Platen en kaarten gebruiken dezelfde set.
   Verboden: rood als tekst op blauw (1,6:1), Mist op silver, blauw op rood, kaart in dezelfde kleur als de plaat. */
.tk-plate--blue {
  --bg: var(--tk-blue); --head: var(--tk-white); --ink: var(--tk-white); --ink-2: var(--tk-blue-100); --bar: var(--tk-red);
  --focus: var(--tk-white); --soft: rgba(229, 229, 230, .14); --soft-ink: var(--tk-white); --accent: var(--tk-white); --on-accent: var(--tk-blue);
  --link: var(--tk-white); --track: var(--tk-blue-700); --deep: var(--tk-blue-700);
}
.tk-plate--graphite {
  --bg: var(--tk-graphite); --head: var(--tk-white); --ink: var(--tk-white); --ink-2: var(--tk-silver); --bar: var(--tk-red);
  --focus: var(--tk-white); --soft: rgba(229, 229, 230, .12); --soft-ink: var(--tk-white); --accent: var(--tk-white); --on-accent: var(--tk-graphite);
  --link: var(--tk-white); --track: rgba(188, 190, 192, .35); --deep: var(--tk-gray-800);
}
.tk-plate--red {
  --bg: var(--tk-red); --head: var(--tk-white); --ink: var(--tk-white); --ink-2: var(--tk-mist); --bar: var(--tk-mist);
  --focus: var(--tk-white); --soft: rgba(229, 229, 230, .18); --soft-ink: #fff; --accent: var(--tk-white); --on-accent: var(--tk-red);
  --link: var(--tk-white); --track: rgba(229, 229, 230, .4); --deep: var(--tk-red-700);
}
.tk-plate--white {
  --bg: #fff; --head: var(--tk-blue); --ink: var(--tk-graphite); --ink-2: var(--tk-gray-600); --bar: var(--tk-red);
  --focus: var(--tk-red); --soft: var(--tk-blue-50); --soft-ink: var(--tk-blue); --accent: var(--tk-blue); --on-accent: var(--tk-white);
  --link: var(--tk-blue); --track: var(--tk-gray-100); --deep: var(--tk-gray-50);
}
.tk-plate--tint {
  --bg: var(--tk-blue-50); --head: var(--tk-blue); --ink: var(--tk-graphite); --ink-2: var(--tk-gray-600); --bar: var(--tk-red);
  --focus: var(--tk-red); --soft: #fff; --soft-ink: var(--tk-blue); --accent: var(--tk-blue); --on-accent: var(--tk-white);
  --link: var(--tk-blue); --track: var(--tk-blue-100); --deep: #fff;
}

.tk-plate {
  position: relative; margin: var(--tk-seam) var(--tk-inset) 0; padding-block: var(--tk-pad-y);
  border-radius: var(--tk-r-6); overflow: hidden; overflow: clip;
  background: var(--bg); color: var(--ink);
}
main > .tk-plate:first-child { margin-top: var(--tk-inset); }
.tk-plate--tight { padding-block: var(--sp-7); }
.tk-plate > .tk-container { position: relative; z-index: 1; }

/* smallere plaat: rand van het scherm iets verder weg, schaalverschil in de stapel */
.tk-plate--inset { margin-inline: calc(var(--tk-inset) + clamp(8px, 3.6vw, 48px)); }
/* de naad-sticker: nul hoog element tussen twee platen, de sticker hangt over de rand van de plaat eronder */
.tk-seam { position: relative; z-index: 5; height: 0; pointer-events: none; }
.tk-seam .tk-sticker { top: calc(var(--s, 96px) / -2 - var(--tk-lap)); right: clamp(24px, 7vw, 120px); }
.tk-seam .tk-sticker--ring { --s: 120px; }
/* spook-merkteken: het 匠-embleem als watermerk op lichte platen, zodat ook wit en Mist merk dragen */
.tk-plate--white::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 340px; aspect-ratio: 1; pointer-events: none; z-index: 0;
  background: url('assets/logo/takumi-mark-blue.png') center / contain no-repeat; opacity: .05;
}
.tk-plate__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-6); }
.tk-head > div { min-width: 0; }
.tk-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-7); align-items: start; }

/* kaarten: standaardtoon per plaat, daarna expliciete tonen (later in de bron, zelfde specificiteit) */
.tk-card { position: relative; border-radius: var(--tk-r-4); padding: var(--sp-5); }
.tk-plate--blue .tk-card, .tk-plate--graphite .tk-card, .tk-plate--red .tk-card, .tk-plate--white .tk-card, .tk-plate--tint .tk-card, .tk-card.tk-card--white {
  --bg: #fff; --head: var(--tk-blue); --ink: var(--tk-graphite); --ink-2: var(--tk-gray-600); --bar: var(--tk-red);
  --focus: var(--tk-red); --soft: var(--tk-blue-50); --soft-ink: var(--tk-blue); --accent: var(--tk-blue); --on-accent: var(--tk-white);
  --link: var(--tk-blue); --track: var(--tk-gray-100); --deep: var(--tk-gray-50);
}
.tk-card.tk-card--blue {
  --bg: var(--tk-blue); --head: var(--tk-white); --ink: var(--tk-white); --ink-2: var(--tk-blue-100); --bar: var(--tk-red);
  --focus: var(--tk-white); --soft: rgba(229, 229, 230, .14); --soft-ink: var(--tk-white); --accent: var(--tk-white); --on-accent: var(--tk-blue);
  --link: var(--tk-white); --track: var(--tk-blue-700); --deep: var(--tk-blue-700);
}
.tk-card.tk-card--graphite {
  --bg: var(--tk-graphite); --head: var(--tk-white); --ink: var(--tk-white); --ink-2: var(--tk-silver); --bar: var(--tk-red);
  --focus: var(--tk-white); --soft: rgba(229, 229, 230, .12); --soft-ink: var(--tk-white); --accent: var(--tk-white); --on-accent: var(--tk-graphite);
  --link: var(--tk-white); --track: rgba(188, 190, 192, .35); --deep: var(--tk-gray-800);
}
.tk-card.tk-card--red {
  --bg: var(--tk-red); --head: var(--tk-white); --ink: var(--tk-white); --ink-2: var(--tk-mist); --bar: var(--tk-mist);
  --focus: var(--tk-white); --soft: rgba(229, 229, 230, .18); --soft-ink: #fff; --accent: var(--tk-white); --on-accent: var(--tk-red);
  --link: var(--tk-white); --track: rgba(229, 229, 230, .4); --deep: var(--tk-red-700);
}
.tk-card { background: var(--bg); color: var(--ink); }
.tk-card > .tk-bar + .tk-h3, .tk-card > .tk-bar + .tk-text { margin-top: var(--sp-3); }

/* ---------- 5. knoppen ---------- */
.tk-btn {
  --btn-bg: var(--tk-blue); --btn-ink: var(--tk-white); --chip: var(--tk-red); --arrow: var(--tk-arrow-w);
  display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
  border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); cursor: pointer;
  font: var(--fw-b) var(--fs-m)/var(--lh-s) var(--tk-font); letter-spacing: 0; text-decoration: none; text-align: left;
  transition: background-color .2s, color .2s, transform .38s var(--tk-spring), box-shadow .2s;
}
.tk-btn::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--chip) var(--arrow) center / 18px no-repeat; transition: transform .38s var(--tk-spring), background-color .2s;
}
.tk-btn:hover { background-color: var(--btn-hover, var(--tk-blue-700)); transform: translateY(-3px); box-shadow: var(--tk-lift); }
.tk-btn:hover::after { transform: translateX(4px); }
.tk-btn:active { transform: translateY(-1px) scale(.98); }
.tk-btn--light { --btn-bg: var(--tk-white); --btn-ink: var(--tk-blue); --btn-hover: var(--tk-blue-50); --chip: var(--tk-red); }
.tk-plate--red .tk-btn--light { --chip: var(--tk-blue); }
.tk-btn--blue { --btn-bg: var(--tk-blue); --btn-ink: var(--tk-white); --btn-hover: var(--tk-blue-700); }
.tk-btn--graphite { --btn-bg: var(--tk-graphite); --btn-ink: var(--tk-white); --btn-hover: var(--tk-gray-800); }
.tk-btn--soft { --btn-bg: var(--tk-blue-50); --btn-ink: var(--tk-blue); --btn-hover: var(--tk-blue-100); }
.tk-btn--red { --btn-bg: var(--tk-red); --btn-ink: #fff; --btn-hover: var(--tk-red-700); --chip: var(--tk-mist); --arrow: var(--tk-arrow-b); }
.tk-btn--ghost {
  --btn-bg: transparent; --btn-ink: var(--ink, var(--tk-blue)); --btn-hover: transparent;
  padding: 0 var(--sp-4); box-shadow: inset 0 0 0 2px currentColor;
}
.tk-btn--ghost::after { display: none; }
.tk-btn--ghost:hover { box-shadow: inset 0 0 0 2px currentColor, var(--tk-lift); background-color: rgba(229, 229, 230, .12); }
.tk-plate--white .tk-btn--ghost:hover, .tk-plate--tint .tk-btn--ghost:hover { background-color: rgba(16, 54, 133, .06); }
.tk-btn--nochip { padding: 0 var(--sp-4); }
.tk-btn--nochip::after { display: none; }
.tk-btn--sm { min-height: 44px; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); font-size: var(--fs-s); gap: var(--sp-3); }
.tk-btn--sm::after { width: 36px; height: 36px; background-size: 16px; }
.tk-btn--sm.tk-btn--nochip, .tk-btn--sm.tk-btn--ghost { padding: 0 var(--sp-3); }
.tk-btn--block { width: 100%; justify-content: space-between; }
.tk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
/* tekstlink met pijl */
.tk-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-h); color: var(--link, var(--tk-blue)); text-decoration: none;
  background: linear-gradient(var(--tk-red), var(--tk-red)) 0 100% / 0 3px no-repeat; padding-bottom: var(--sp-1); transition: background-size .26s var(--tk-ease);
}
.tk-link::after { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--tk-red) var(--tk-arrow-w) center / 14px no-repeat; transition: transform .38s var(--tk-spring); }
.tk-link:hover { background-size: calc(100% - 38px) 3px; }
.tk-link:hover::after { transform: translateX(4px); }

/* ---------- 6. header (zwevende pill), productpaneel, mobiel menu ---------- */
.tk-header {
  --nav-ink: var(--tk-white); --nav-hover: rgba(255, 255, 255, .16); --nav-on-bg: var(--tk-white); --nav-on-ink: var(--tk-blue); --burger-bg: var(--tk-white); --burger-ink: var(--tk-blue);
  position: fixed; inset: 12px 0 auto 0; z-index: 100; pointer-events: none;
}
.tk-header { --focus: var(--tk-white); }                      /* de kop is blauw (transparant boven de hero, vlak blauw bij scrollen): wit op blauw */
.tk-header__bar {
  pointer-events: auto; position: relative; z-index: 2; width: min(var(--tk-max), calc(100% - 24px)); height: var(--tk-header-h); margin-inline: auto;
  display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2) 0 var(--sp-4); border-radius: 999px; color: var(--nav-ink);
  background: transparent; transition: background-color .32s var(--tk-ease), box-shadow .32s var(--tk-ease);
}
.tk-header.is-floating .tk-header__bar, .tk-header.is-open .tk-header__bar { background: var(--tk-blue); box-shadow: var(--tk-nav-shadow); }
@media (min-width: 1000px) {
  /* logo en CTA-rand sluiten aan op de inhoud van de platen: plaatrand + .tk-container (max 1180px, gecentreerd) + gutter,
     min de rand van de balk zelf (12px of de gecentreerde 1180px) */
  .tk-header__bar { padding-inline: calc(var(--tk-gutter) + max(var(--tk-inset), (100vw - var(--tk-max)) / 2) - max(12px, (100vw - var(--tk-max)) / 2)); }
}
.tk-logo { display: block; flex: none; margin-right: var(--sp-4); line-height: var(--lh-d); border-radius: 8px; }
.tk-logo img { height: 28px; width: auto; }
.tk-nav { flex: 1 1 auto; min-width: 0; }
.tk-nav__list { display: flex; align-items: center; justify-content: flex-start; gap: 0; }
.tk-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-2); border-radius: 999px;
  font-size: var(--fs-s); font-weight: var(--fw-b); letter-spacing: 0; white-space: nowrap; color: var(--nav-ink); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.tk-nav__link:hover { background: var(--nav-hover); }
.tk-nav__link[aria-current="page"], .tk-nav__link.is-on { background: var(--nav-on-bg); color: var(--nav-on-ink); }
.tk-nav__link[aria-current="page"]::after, .tk-nav__link.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 20px; height: 4px; margin-left: -10px; border-radius: 2px; background: var(--tk-red);
}
.tk-nav__link[aria-expanded="true"] { background: var(--nav-hover); }
.tk-nav__link[aria-current="page"][aria-expanded="true"], .tk-nav__link.is-on[aria-expanded="true"] { background: var(--nav-on-bg); }   /* open paneel op de actieve pagina: anders Mist-tekst op lichtblauw (onleesbaar) */
.tk-header__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex: none; }
.tk-burger {
  display: none; position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--burger-bg); color: var(--burger-ink);
}
.tk-burger span { position: absolute; left: 14px; right: 14px; height: 3px; border-radius: 2px; background: var(--burger-ink); transition: transform .28s var(--tk-ease), top .28s var(--tk-ease); }
.tk-burger span:nth-child(1) { top: 18px; }
.tk-burger span:nth-child(2) { top: 27px; }
.tk-burger[aria-expanded="true"] span:nth-child(1) { top: 22.5px; transform: rotate(45deg); }
.tk-burger[aria-expanded="true"] span:nth-child(2) { top: 22.5px; transform: rotate(-45deg); }

.tk-panel {
  pointer-events: none; visibility: hidden; opacity: 0; position: absolute; z-index: 1; top: calc(var(--tk-header-h) + 10px); left: 50%;
  width: min(940px, calc(100% - 24px)); transform: translate(-50%, -8px) scale(.98); transform-origin: 50% 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: var(--sp-2) var(--sp-3); padding: var(--sp-3);
  border-radius: var(--tk-r-4); background: var(--tk-white); color: var(--tk-graphite); box-shadow: var(--tk-nav-shadow);
  transition: opacity .22s var(--tk-ease), transform .22s var(--tk-ease), visibility 0s linear .22s;
}
.tk-panel.is-open { pointer-events: auto; visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.tk-panel__col { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-2); }
.tk-panel__t { display: block; margin: 0 0 var(--sp-2) var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase; color: var(--tk-gray-600); }
.tk-panel__t::before { content: ""; display: block; width: 28px; height: 6px; margin-bottom: var(--sp-2); border-radius: 2px; background: var(--tk-red); }
.tk-panel__col a {
  display: flex; align-items: center; min-height: 42px; padding: 0 var(--sp-3); border-radius: 999px; font-weight: var(--fw-b); font-size: var(--fs-s); color: var(--tk-blue); text-decoration: none;
  transition: background-color .2s, transform .3s var(--tk-spring);
}
.tk-panel__col a:hover { background: var(--tk-blue-50); transform: translateX(3px); }
.tk-feature {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--tk-r-3); text-decoration: none;
  background: var(--tk-blue); color: var(--tk-white); overflow: hidden; transition: transform .38s var(--tk-spring);
}
.tk-feature:hover { transform: translateY(-4px); }
.tk-feature__media { position: relative; display: grid; place-items: center; min-height: 118px; }
.tk-feature__media::before { content: ""; position: absolute; width: 112px; aspect-ratio: 1; border-radius: 50%; background: var(--tk-blue-800); }
.tk-feature__media img { position: relative; width: 122%; max-width: none; margin-block: -8px; transform: rotate(-2deg); }
.tk-feature__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.tk-feature__head b { font-size: var(--fs-l); font-weight: var(--fw-h); text-transform: uppercase; letter-spacing: var(--ls-h); }
.tk-feature__head span { font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase; color: var(--tk-blue-200); }
.tk-feature__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.tk-feature__meta span { padding: var(--sp-1) var(--sp-2); border-radius: 999px; background: var(--tk-blue-700); }

.tk-mobile {
  display: none; pointer-events: none; visibility: hidden; opacity: 0; position: absolute; z-index: 1; top: calc(var(--tk-header-h) + 10px); left: 50%;
  width: calc(100% - 24px); max-width: var(--tk-max); transform: translate(-50%, -8px); padding: var(--sp-3);
  border-radius: var(--tk-r-4); background: var(--tk-white); color: var(--tk-blue); box-shadow: var(--tk-nav-shadow);
  transition: opacity .28s var(--tk-ease), transform .28s var(--tk-ease), visibility 0s linear .28s;
  max-height: calc(100svh - 96px); overflow-y: auto;
}
.tk-mobile.is-open { pointer-events: auto; visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }
.tk-mobile a:not(.tk-btn) {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--sp-4); border-radius: 999px;
  font-size: var(--fs-l); font-weight: var(--fw-h); letter-spacing: var(--ls-h); color: var(--tk-blue); text-decoration: none;
}
.tk-mobile a:not(.tk-btn):hover, .tk-mobile a[aria-current="page"] { background: var(--tk-blue-50); }
.tk-mobile a[aria-current="page"]::after { content: ""; width: 20px; height: 4px; border-radius: 2px; background: var(--tk-red); }
.tk-mobile .tk-btn { margin-top: var(--sp-2); width: 100%; justify-content: space-between; }
.tk-mobile ul { display: grid; gap: 0; }
.tk-mobile__sub { display: grid; gap: 2px; margin: 2px 0 var(--sp-1) var(--sp-3); }
.tk-mobile__sub a:not(.tk-btn) { min-height: 44px; font-size: var(--fs-m); font-weight: var(--fw-b); padding: 0 var(--sp-3); }

@media (max-width: 999px) {
  .tk-nav, .tk-header__actions > .tk-nav__link, .tk-panel { display: none; }
  .tk-burger { display: block; }
  .tk-mobile { display: block; }
  .tk-header__actions { gap: var(--sp-2); }
}
@media (max-width: 639px) {
  .tk-header__actions > .tk-btn { display: none; }
  .tk-header__bar { padding-left: var(--sp-3); }
}

/* ---------- 7. decor: cirkels, patroon, watermerk, stickers, outline, tagline, tape ---------- */
.tk-circle { position: absolute; border-radius: 50%; width: var(--d, 320px); aspect-ratio: 1; background: var(--c, var(--tk-blue-700)); pointer-events: none; }
.tk-circle--roll { background: radial-gradient(circle, var(--tk-gray-800) 0 9%, var(--tk-gold) 9.6% 27%, var(--tk-silver) 27.6%); } /* het uiteinde van de rol: gouden kern in zilver */
.tk-dot { position: absolute; width: var(--d, 24px); aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--tk-red)); pointer-events: none; }
.tk-pattern {
  position: absolute; width: var(--w, 560px); aspect-ratio: 1; pointer-events: none; opacity: var(--o, .16);
  background: var(--tk-chevron) 0 0 / 140px 140px;
  -webkit-mask-image: linear-gradient(var(--mask-a, 200deg), #000 0%, rgba(0, 0, 0, .55) 35%, transparent 80%);
          mask-image: linear-gradient(var(--mask-a, 200deg), #000 0%, rgba(0, 0, 0, .55) 35%, transparent 80%);
}
.tk-watermark { position: absolute; width: var(--w, 560px); aspect-ratio: 1; opacity: var(--o, .1); pointer-events: none; max-width: none; }

/* sticker: Mist die-cut rand, 11 graden, maximaal twee per scherm */
.tk-sticker { position: absolute; z-index: 3; pointer-events: none; }
.tk-sticker--ring {
  --s: 132px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--tk-white); color: var(--tk-blue);
  box-shadow: 0 0 0 4px #fff, var(--tk-sticker-shadow); display: grid; place-items: center; transform: rotate(var(--tk-sticker-tilt));
}
.tk-sticker--ring.tk-sticker--blue { background: var(--tk-blue); color: var(--tk-white); box-shadow: 0 0 0 4px var(--tk-mist), var(--tk-sticker-shadow); }
.tk-sticker--ring.tk-sticker--graphite { background: var(--tk-graphite); color: var(--tk-white); box-shadow: 0 0 0 4px var(--tk-silver), var(--tk-sticker-shadow); }   /* mat: graphite met zilveren rand (Satin Protect-afsluitband) */
.tk-sticker__ring { position: absolute; inset: 5%; width: 90%; height: 90%; animation: tk-spin 40s linear 1; } /* één trage ronde, daarna stil (WCAG 2.2.2) */
.tk-sticker__ring text { font: 700 15px var(--tk-font); fill: currentColor; letter-spacing: 0; }
.tk-sticker__mark { position: relative; width: 54%; height: auto; }
.tk-sticker--xl { --s: 168px; }
.tk-sticker--pill {
  padding: var(--sp-2) var(--sp-3); border-radius: 999px; background: var(--tk-white); color: var(--tk-blue); box-shadow: 0 0 0 3px #fff, var(--tk-sticker-shadow);
  font-size: var(--fs-xs); font-weight: var(--fw-h); letter-spacing: var(--ls-l); text-transform: uppercase; line-height: var(--lh-h); transform: rotate(var(--tk-sticker-tilt));
}
.tk-sticker--pill.tk-sticker--blue { background: var(--tk-blue); color: var(--tk-white); box-shadow: 0 0 0 3px var(--tk-mist), var(--tk-sticker-shadow); }
.tk-sticker--pill.tk-sticker--graphite { background: var(--tk-graphite); color: var(--tk-white); box-shadow: 0 0 0 3px var(--tk-mist), var(--tk-sticker-shadow); }
.tk-sticker.is-off .tk-sticker__ring { animation-play-state: paused; }
@keyframes tk-spin { to { transform: rotate(360deg); } }

/* die-cut rand om de blauwe doos (alleen statische PNG, nooit op de animatie) */
.tk-diecut { filter: drop-shadow(3px 0 0 var(--tk-mist)) drop-shadow(-3px 0 0 var(--tk-mist)) drop-shadow(0 3px 0 var(--tk-mist)) drop-shadow(0 -3px 0 var(--tk-mist)); }

/* contourtekst: dunne, stille contour zoals op het brandboard. Alleen decoratief (aria-hidden), nooit kernwoorden, nooit onder 48px */
.tk-outline {
  margin: 0; font-weight: var(--fw-r); text-transform: uppercase; letter-spacing: 0; line-height: var(--lh-d); white-space: nowrap;
  font-size: var(--fs-num); color: var(--bg, var(--tk-blue)); -webkit-text-stroke: 4px var(--tk-mist); paint-order: stroke fill;
  transition: color 1.4s ease .2s;
}
.tk-outline > span { display: block; }
/* één claim in lopende regel, midden op de pagina (Home, plaat Over Takumi): breekt op mobiel op de spaties */
.tk-outline--row { margin-top: var(--sp-7); font-size: var(--fs-num); white-space: normal; }
.tk-outline--row > span { display: inline; }
.tk-outline.is-in { color: color-mix(in srgb, var(--tk-mist) 12%, var(--bg, var(--tk-blue))); }
@supports not (-webkit-text-stroke: 1px #000) { .tk-outline { color: var(--tk-white); } }
@media (max-width: 559px) { .tk-outline > span > span { display: block; } }

/* tagline-lockup van het brandboard: balk, 情熱を極める (300), tagline in kapitalen, balk */
.tk-tagline { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin: 0; color: var(--tk-white); }
.tk-tagline__jp { font-family: var(--tk-font-jp); font-weight: var(--fw-r); font-size: var(--fs-h1); line-height: var(--lh-d); letter-spacing: 0; }
.tk-tagline__en { font-size: var(--fs-m); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase; }
.tk-tagline .tk-bar { --bar: var(--tk-red); }

/* verpakkingsband (marquee): silver pill, -2 graden, ligt over de naad. Pauzeerknop, pauze bij hover en buiten beeld */
.tk-tape-wrap { position: relative; z-index: 4; display: flow-root; overflow-x: clip; overflow-y: visible; pointer-events: none; }
.tk-tape-wrap > * { pointer-events: auto; }
.tk-tape {
  --h: clamp(72px, 7.4vw, 96px); position: relative; z-index: 4; margin: calc(var(--h) / -2) -8px calc(var(--h) / -2); height: var(--h);
  transform: rotate(-2deg); border-radius: 999px; background: var(--tk-white); color: var(--tk-blue); overflow: hidden; overflow: clip;
}
.tk-tape__track { display: flex; width: max-content; height: 100%; align-items: center; animation: tk-marquee 38s linear infinite; }
.tk-tape:hover .tk-tape__track, .tk-tape:focus-within .tk-tape__track, .tk-tape.is-paused .tk-tape__track, .tk-tape.is-off .tk-tape__track { animation-play-state: paused; }
.tk-tape__row { display: flex; align-items: center; flex: none; gap: var(--sp-5); padding-right: var(--sp-5); }
.tk-tape__t { font-size: calc(var(--h) * .56); font-weight: var(--fw-h); text-transform: uppercase; letter-spacing: var(--ls-h); line-height: var(--lh-d); white-space: nowrap; }
.tk-tape__t--o { font-weight: var(--fw-r); color: var(--tk-silver); -webkit-text-stroke: 4px var(--tk-blue); paint-order: stroke fill; letter-spacing: 0; }
.tk-tape__jp { font-family: var(--tk-font-jp); font-weight: var(--fw-r); font-size: calc(var(--h) * .46); line-height: var(--lh-d); white-space: nowrap; letter-spacing: 0; }
.tk-tape__sep { flex: none; width: calc(var(--h) * .56); height: calc(var(--h) * .56); background: url('assets/logo/takumi-mark-blue.png') center / contain no-repeat; }
.tk-tape__btn {
  position: absolute; right: clamp(28px, 4vw, 48px); top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--tk-blue); color: var(--tk-white); display: grid; place-items: center; transition: transform .38s var(--tk-spring);
}
.tk-tape__btn:hover { transform: scale(1.08); }
.tk-tape__btn::before, .tk-tape__btn::after { content: ""; width: 4px; height: 16px; border-radius: 2px; background: currentColor; grid-area: 1 / 1; transform: translateX(-4px); }
.tk-tape__btn::after { transform: translateX(4px); }
.tk-tape__btn[aria-pressed="true"]::before { width: 0; height: 0; background: none; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-radius: 0; transform: translateX(2px); }
.tk-tape__btn[aria-pressed="true"]::after { display: none; }
@keyframes tk-marquee { to { transform: translateX(-50%); } }
@media (max-width: 599px) { .tk-tape__t--o { display: none; } .tk-tape__row { gap: var(--sp-3); } }
@media (prefers-reduced-motion: reduce) {
  .tk-tape { height: auto; padding: var(--sp-3) var(--sp-5); border-radius: 36px; margin-block: -28px; }
  .tk-tape__track { width: auto; animation: none; justify-content: center; }
  .tk-tape__row { flex-wrap: wrap; justify-content: center; }
  .tk-tape__row + .tk-tape__row, .tk-tape__btn { display: none; }
  .tk-tape__t { font-size: 36px; }
}

/* ---------- 8. hero, stage, kruimelpad, feiten ---------- */
.tk-hero {
  padding-top: calc(var(--tk-header-h) + 12px + clamp(24px, 3.4vw, 44px));
  padding-bottom: calc(var(--tk-overlap) + 28px);
}
.tk-hero--flat { padding-bottom: var(--tk-pad-y); }
/* subhero met de Kort-gezegd-kaart (of snelkeuze) eronder: de rol-cirkel en de sticker hangen tot 34px onder de stage en de kaart schuift 72px over de plaat.
   56px extra houdt kaart en cirkel uit elkaar (gemeten: op 768 tot 1100px bleef er -10 tot 8px, Ondersteuning had op 1440px -20px) */

.tk-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.tk-hero__copy { min-width: 0; }
.tk-hero__copy .tk-h1 { margin: var(--sp-3) 0 var(--sp-3); }
.tk-hero__copy .tk-lead { max-width: 46ch; }
.tk-hero__stage { position: relative; min-width: 0; z-index: 3; }
.tk-hero__stage .tk-circle--a { --d: 88%; --c: var(--tk-blue-700); right: -24%; top: -24%; z-index: -1; }
.tk-hero .tk-circle--b { --d: 120px; --c: var(--tk-silver); }
.tk-hero__stage > .tk-circle--b { right: -26px; bottom: -34px; z-index: 2; }
.tk-hero__stage > .tk-dot { left: -12px; top: -12px; z-index: 2; }
.tk-hero__stage > .tk-sticker { left: -34px; bottom: -34px; }
.tk-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tk-hero__bg .tk-pattern { right: -140px; top: 22%; --w: 640px; --o: .2; }
.tk-hero__bg .tk-watermark { left: -170px; bottom: -190px; --w: 520px; --o: .08; }
.tk-subhero .tk-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.tk-subhero .tk-hero__copy .tk-h1 { margin: var(--sp-3) 0 var(--sp-4); }

/* kruimelpad: <nav class="tk-crumbs"><ol><li><a>…</a></li><li aria-hidden="true">/</li><li><span aria-current="page">…</span></li></ol></nav> */
.tk-crumbs { margin-bottom: var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.tk-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.tk-crumbs li { min-width: 0; }
.tk-crumbs a, .tk-crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-3); border-radius: 999px; text-decoration: none; }
.tk-crumbs a { background: var(--soft); color: var(--ink); transition: background-color .2s; }
.tk-crumbs a:hover { background: rgba(229, 229, 230, .28); }
.tk-crumbs li[aria-hidden] { opacity: .5; }
.tk-crumbs [aria-current="page"] { background: var(--tk-white); color: var(--tk-blue); }
@media (max-width: 480px) {
  /* één rij: Home en het scheidingsteken houden hun breedte, de huidige pagina krijgt de resterende ruimte. Een lange naam
     ('Sportwagen en supercar beschermen') breekt af op een tweede regel in de pil in plaats van met een ellips, zodat hij volledig leesbaar blijft
     (op 320 en 375px kapte de ellips hem af) */
  .tk-crumbs ol { flex-wrap: nowrap; }
  .tk-crumbs li:not(:last-child) { flex: none; }
  .tk-crumbs li:last-child { flex: 0 1 auto; }
  .tk-crumbs a, .tk-crumbs [aria-current="page"] { min-height: 36px; }
  .tk-crumbs [aria-current="page"] { line-height: var(--lh-h); padding-block: var(--sp-2); }
}

/* productstudio: donkere radiale studio (zoals .ff-stage), of diep blauw. Rol en animatie lezen alleen op donker. */
.tk-stage {
  --ar: 1400 / 1088; position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; border-radius: var(--tk-r-5);
  aspect-ratio: var(--ar); background: radial-gradient(110% 100% at 50% 8%, #6b7480 0%, #3c4142 52%, #20262b 100%);
}
.tk-stage--blue { background: radial-gradient(110% 100% at 50% 8%, var(--tk-blue-500) 0%, var(--tk-blue-700) 55%, var(--tk-blue-900) 100%); }
.tk-stage--graphite { background: radial-gradient(110% 100% at 50% 8%, #4b5253 0%, var(--tk-graphite) 55%, var(--tk-gray-900) 100%); }
.tk-stage--box { --ar: 1489.7 / 1004.3; }
.tk-stage--square { --ar: 1 / 1; }
.tk-stage--tall { --ar: 4 / 5; }
.tk-stage--soft { border-radius: var(--tk-r-4); }
.tk-stage > picture, .tk-stage > img { grid-area: 1 / 1; position: relative; z-index: 1; width: 100%; height: 100%; }
.tk-stage picture img, .tk-stage > img { width: 100%; height: 100%; object-fit: contain; }
.tk-stage--tall > img { width: auto; max-width: 74%; margin: auto; }
.tk-stage__cut {
  position: absolute; z-index: 0; left: -8%; top: var(--cut-y, 8%); width: 130%; height: 130%; pointer-events: none;
  transform-origin: 0 0; transform: rotate(var(--tk-tilt)) translateY(-100%);
  background: var(--tk-blue-700); border-bottom: 3px solid #fff;
}
.tk-stage__cut::before { content: ""; position: absolute; inset: 0; background: var(--tk-chevron) 0 0 / 120px 120px; opacity: .16; -webkit-mask-image: linear-gradient(0deg, transparent 5%, #000 70%); mask-image: linear-gradient(0deg, transparent 5%, #000 70%); }
.tk-stage__cut::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--tk-gold); }
.tk-stage__tag { position: absolute; z-index: 2; left: 18px; top: 18px; }
/* pauzeknop voor de animatie in de stage (WCAG 2.2.2): zelfde taal als de knop van de tape. takumi.js zet hem erbij. */
.tk-stage__pause {
  position: absolute; z-index: 3; right: 14px; top: 14px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--tk-white); color: var(--tk-blue); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(7, 24, 60, .6); transition: transform .38s var(--tk-spring);
}
.tk-stage__pause:hover { transform: scale(1.08); }
.tk-stage__pause:focus-visible { outline: 3px solid var(--tk-mist); outline-offset: 3px; }
.tk-stage__pause::before, .tk-stage__pause::after { content: ""; width: 4px; height: 16px; border-radius: 2px; background: currentColor; grid-area: 1 / 1; transform: translateX(-4px); }
.tk-stage__pause::after { transform: translateX(4px); }
.tk-stage__pause[aria-pressed="true"]::before { width: 0; height: 0; background: none; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-radius: 0; transform: translateX(2px); }
.tk-stage__pause[aria-pressed="true"]::after { display: none; }
.tk-stage > img { transition: opacity .35s var(--tk-ease); }
.tk-stage picture img { transition: opacity .35s var(--tk-ease); }
.tk-stage img.is-swap { opacity: 0; }

/* feiten: drie vlakjes */
.tk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-5) 0 0; position: relative; z-index: 2; }
.tk-facts > div { padding: var(--sp-3) var(--sp-4) var(--sp-3); border-radius: var(--tk-r-3); background: var(--tk-blue-700); color: var(--tk-white); }
.tk-facts dt { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase; color: var(--tk-blue-200); }
.tk-facts dt::before { content: ""; width: 20px; height: 5px; border-radius: 2px; background: var(--tk-red); flex: none; }
.tk-facts dd { margin-top: var(--sp-2); font-size: var(--fs-m); line-height: var(--lh-s); font-weight: var(--fw-b); }
.tk-plate--graphite .tk-facts > div { background: var(--tk-gray-800); }
.tk-plate--graphite .tk-facts dt { color: var(--tk-silver); }

/* chips */
.tk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tk-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-3); border-radius: 999px;
  background: var(--soft); color: var(--soft-ink); font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase; line-height: var(--lh-d);
}
.tk-chip--blue { background: var(--tk-blue); color: var(--tk-white); }
.tk-chip--graphite { background: var(--tk-graphite); color: var(--tk-white); }
.tk-chip--white { background: var(--tk-white); color: var(--tk-blue); }
.tk-chip--red { background: var(--tk-red); color: #fff; }
.tk-chip--mark::before { content: ""; width: 20px; height: 20px; margin-left: -6px; background: url('assets/logo/takumi-mark-white.png') center / contain no-repeat; }
.tk-chip--mark.tk-chip--white::before, .tk-plate--white .tk-chip--mark::before { background-image: url('assets/logo/takumi-mark-blue.png'); }
.tk-pill {
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3); border-radius: 999px; background: var(--soft); color: var(--soft-ink);
  font-size: var(--fs-s); font-weight: var(--fw-b); line-height: var(--lh-h);
}
.tk-pill--solid { background: var(--accent); color: var(--on-accent); font-weight: var(--fw-h); }

/* ---------- 9. samenvatting "Kort gezegd" ---------- */
.tk-statement-wrap { position: relative; z-index: 3; margin: calc(var(--tk-overlap) * -1) var(--tk-inset) 0; padding-bottom: var(--sp-6); }
.tk-statement-wrap > .tk-container { padding-inline: calc(var(--tk-gutter) * .6); }
.tk-statement { overflow: visible; padding: var(--sp-7); border-radius: var(--tk-r-5); display: grid; grid-template-columns: minmax(150px, .22fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.tk-statement__side { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.tk-statement__side .tk-label { font-size: var(--fs-xs); }
.tk-statement__text { font-size: var(--fs-xl); line-height: var(--lh-s); font-weight: var(--fw-r); letter-spacing: var(--ls-h); max-width: 34em; color: var(--ink); text-wrap: pretty; }
.tk-statement__text:has(> strong) { padding-inline-end: .4em; }   /* een kernwoord-pil (strong) dat aan het einde van een regel afbreekt, steekt met zijn ronde rand .38em voorbij de tekstkolom (box-decoration-break: clone houdt daar geen ruimte voor vrij): die ruimte hoort bij de alinea. Zelfde aanpak als bij .tk-ph (.7em) */

/* groot statement (Over Takumi) met 匠 in een ring */
.tk-bigtext { font-size: var(--fs-h2); line-height: var(--lh-h); font-weight: var(--fw-h); letter-spacing: var(--ls-h); color: var(--head); max-width: 24em; text-wrap: pretty; }
.tk-bigtext em { font-style: normal; }
.tk-kanji {
  display: inline-grid; place-items: center; width: 1.12em; height: 1.12em; margin-right: .1em; border-radius: 50%; box-shadow: inset 0 0 0 .075em currentColor;
  font-family: var(--tk-font-jp); font-weight: var(--fw-r); font-size: .86em; line-height: var(--lh-d); vertical-align: -.1em; letter-spacing: 0;
}
.tk-over { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--sp-7); align-items: center; }
.tk-over__copy { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.tk-over__copy .tk-label + .tk-bigtext { margin-top: 0; }
.tk-over__art { position: relative; display: grid; place-items: center; min-height: 240px; }
.tk-over__art .tk-sticker { position: relative; }
.tk-over--rev { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.tk-over--rev .tk-over__art { order: -1; }
.tk-over--rev .tk-over__copy { gap: var(--sp-4); }
.tk-over--rev .tk-over__copy .tk-text { max-width: 58ch; }
.tk-over__art .tk-watermark { position: absolute; left: 50%; top: 50%; margin: calc(var(--w, 320px) / -2) 0 0 calc(var(--w, 320px) / -2); }

/* ---------- 10. producttegels (Home, 100vh) ---------- */
.tk-products { padding-block: clamp(32px, 5svh, 56px) calc(clamp(32px, 5svh, 56px) + 24px); }   /* de plaat eronder schuift er over: extra ruimte onderaan */
.tk-products .tk-head { margin-bottom: clamp(18px, 3svh, 28px); }
.tk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.tk-tile {
  --tile-bg: var(--tk-white); --tile-ink: var(--tk-blue); --tile-2: var(--tk-gray-600); --tile-circle: var(--tk-blue); --tile-ring: transparent;
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: clamp(330px, 52svh, 440px); border-radius: var(--tk-r-5); overflow: hidden;
  background: var(--tile-bg); color: var(--tile-ink); text-decoration: none; transition: transform .38s var(--tk-spring), box-shadow .3s; isolation: isolate;
}
.tk-tile--gloss, .tk-tile--white { --tile-bg: var(--tk-white); --tile-ink: var(--tk-blue); --tile-2: var(--tk-gray-600); --tile-circle: var(--tk-blue); }
.tk-tile--mat { --tile-bg: var(--tk-graphite); --tile-ink: var(--tk-white); --tile-2: var(--tk-gray-200); --tile-circle: var(--tk-gray-800); --tile-ring: rgba(188, 190, 192, .5); }
.tk-tile:focus-visible { transform: translateY(-8px); box-shadow: var(--tk-lift); }   /* de ring volgt --focus van de plaat (Mist op blauw en graphite, rood op wit en silver) */
@media (hover: hover) and (pointer: fine) { .tk-tile:hover { transform: translateY(-8px); box-shadow: var(--tk-lift); } }   /* geen plakkende lift na een tik op touch */
.tk-tile__media { position: relative; display: grid; place-items: center; min-height: 0; padding: var(--sp-3) var(--sp-3) 0; }
.tk-tile__media::before {
  content: ""; position: absolute; z-index: 0; width: min(76%, 290px); max-height: 92%; aspect-ratio: 1; border-radius: 50%;
  background: var(--tile-circle); box-shadow: 0 0 0 12px var(--tile-ring);
}
.tk-tile__a, .tk-tile__b {
  position: absolute; inset: 14px 0 0; margin: auto; z-index: 1; width: auto; height: 100%; max-width: 92%; object-fit: contain;
  transition: opacity .3s var(--tk-ease), transform .45s var(--tk-spring);
}
.tk-tile__b { opacity: 0; transform: translateX(10%) scale(.92); }
.tk-tile__media .tk-sticker { left: 20px; top: 20px; }
.tk-tile__info { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 var(--sp-3); padding: 0 var(--sp-5) var(--sp-4); }
.tk-tile__info .tk-bar { --bar: var(--tk-red); grid-column: 1; margin-bottom: var(--sp-2); width: 40px; height: 8px; }
.tk-tile__name { grid-column: 1; font-size: var(--fs-h2); font-weight: var(--fw-h); text-transform: uppercase; letter-spacing: var(--ls-h); line-height: var(--lh-d); color: var(--tile-ink); }
.tk-tile__meta { grid-column: 1; margin-top: var(--sp-2); font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--fw-b); letter-spacing: 0; color: var(--tile-2); }
/* de diagonale rode streepjes van de doos sluiten de tegel af */
.tk-tile__info::after, .tk-tile__dl::after { content: ""; display: block; flex: none; width: 56px; height: 8px; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--tk-red) 0 5px, transparent 5px 11px); }
.tk-tile__info::after { grid-column: 1; margin-top: var(--sp-3); }
.tk-tiles--info .tk-tile__info::after, .tk-tiles--3 .tk-tile__info::after { display: none; }   /* hier sluit de rij met gegevens of de pil-link af */
.tk-tile__dl::after { margin-top: var(--sp-3); }
.tk-tile__go { grid-column: 2; grid-row: 2 / span 2; align-self: end; width: 52px; height: 52px; border-radius: 50%; background: var(--tk-red) var(--tk-arrow-w) center / 22px no-repeat; transition: transform .38s var(--tk-spring); }
.tk-tile:focus-visible .tk-tile__go { transform: translateX(4px) rotate(-8deg); }
@media (hover: hover) and (pointer: fine) { .tk-tile:hover .tk-tile__go { transform: translateX(4px) rotate(-8deg); } }
@media (hover: hover) and (pointer: fine) {
  .tk-tile:hover .tk-tile__a:not(:only-of-type), .tk-tile:focus-visible .tk-tile__a:not(:only-of-type) { opacity: 0; transform: translateX(-12%) scale(.9); }
  .tk-tile:hover .tk-tile__b, .tk-tile:focus-visible .tk-tile__b { opacity: 1; transform: rotate(-2deg) scale(1.06); }
  .tk-tile:hover .tk-tile__a:only-of-type, .tk-tile:focus-visible .tk-tile__a:only-of-type { transform: rotate(-2deg) scale(1.05); }
}
.tk-tiles--info .tk-tile, .tk-tiles--3 .tk-tile { height: auto; grid-template-rows: auto auto auto 1fr; }
@supports (grid-template-rows: subgrid) {
  .tk-tiles--info .tk-tile, .tk-tiles--3 .tk-tile { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.tk-tiles--info .tk-tile__media, .tk-tiles--3 .tk-tile__media { aspect-ratio: 1.45; }
.tk-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-tile--blue { --tile-bg: var(--tk-blue); --tile-ink: var(--tk-white); --tile-2: var(--tk-blue-100); --tile-circle: var(--tk-blue-700); --tile-ring: rgba(229, 229, 230, .22); }
.tk-tile__name--sm { font-size: var(--fs-xl); font-weight: var(--fw-h); text-transform: none; letter-spacing: var(--ls-h); line-height: var(--lh-d); }
.tk-tile__cta { justify-self: start; align-self: end; margin: 0 var(--sp-5) var(--sp-4); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-radius: 999px; font-size: var(--fs-s); font-weight: var(--fw-h); background: var(--tile-ink); color: var(--tile-bg); transition: transform .38s var(--tk-spring); }
.tk-tile:focus-visible .tk-tile__cta { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .tk-tile:hover .tk-tile__cta { transform: translateX(4px); } }
.tk-tiles--3 .tk-tile__info { align-items: start; }
.tk-tiles--3 .tk-tile__go { width: 44px; height: 44px; background-size: 18px; grid-row: 1 / span 3; align-self: start; margin-top: var(--sp-1); }
.tk-tile__dl { padding: var(--sp-1) var(--sp-5) var(--sp-4); }
.tk-tile__dl dl { display: grid; gap: var(--sp-1); }
.tk-tile__dl dl > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--tk-r-2); background: rgba(255, 255, 255, .6); font-size: var(--fs-s); }
.tk-tile--mat .tk-tile__dl dl > div { background: rgba(229, 229, 230, .1); }
.tk-tile__dl dt { color: var(--tile-2); font-weight: var(--fw-b); }
.tk-tile__dl dd { font-weight: var(--fw-h); text-align: right; }
/* de pil-link staat na de gegevens in tk-tile__dl (een vijfde kind van de tegel breekt de subgrid-rijen): zonder eigen inspringing, en zij sluit de tegel af i.p.v. de rode streepjes */
.tk-tile__dl > .tk-tile__cta { margin: var(--sp-3) 0 0; }
.tk-tile__dl:has(> .tk-tile__cta)::after { display: none; }
.tk-tile__lead { padding: 0 var(--sp-5); font-size: var(--fs-m); line-height: var(--lh-s); color: var(--tile-2); margin-bottom: var(--sp-3); }

/* ---------- 11. iconen en usp ---------- */
.tk-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tk-icon {
  display: grid; place-items: center; flex: none; width: var(--is, 60px); height: var(--is, 60px); border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: calc(var(--is, 60px) * .46);
}
.tk-icon--sm { --is: 48px; }
.tk-icon--lg { --is: 72px; }
.tk-icon--soft { background: var(--soft); color: var(--soft-ink); }
.tk-quicknav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.tk-quick { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); text-decoration: none; transition: transform .38s var(--tk-spring), box-shadow .3s; }
.tk-quick:hover { box-shadow: var(--tk-lift); }
@media (hover: hover) and (pointer: fine) { .tk-quicknav:not(.tk-wave) .tk-quick:hover { transform: translateY(-8px); } }   /* in een golf-groep tilt de golf, anders telde de lift dubbel */
.tk-quick:hover .tk-icon { background: var(--tk-red); color: #fff; }
.tk-quick__label { position: relative; padding-bottom: var(--sp-3); font-size: var(--fs-l); font-weight: var(--fw-h); letter-spacing: var(--ls-h); color: var(--head); }
.tk-quick__label::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 8px; border-radius: 2px; background: var(--bar); }
.tk-quick .tk-icon { transition: background-color .2s, color .2s; }

/* ---------- 12. kolommen met nummers, cijfers, bento, stappen ---------- */
.tk-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: stretch; }
.tk-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-numcard { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.tk-numcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.tk-numcard .tk-text { max-width: 44ch; }
.tk-numcard > .tk-actions { margin-top: auto; padding-top: var(--sp-3); }   /* de knop zakt naar de onderrand (de kaarten zijn even hoog), zodat de knoppen op één lijn staan; 14px gap + 16px = de 30px van .tk-actions */
.tk-numcard--accent { z-index: 1; position: relative; top: -16px; }
.tk-num {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-l); font-weight: var(--fw-h); letter-spacing: var(--ls-h); box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--accent);
}
.tk-cols--wave > .tk-numcard:nth-child(2) { margin-top: var(--sp-5); }
.tk-cols--wave > .tk-numcard:nth-child(3) { margin-top: var(--sp-7); }

/* cijfertegels */
.tk-stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3); }
.tk-stat { grid-column: span 4; container-type: inline-size; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--tk-r-4); }   /* alles bovenaan: balk, uitleg en bron volgen het cijfer, de overtollige ruimte valt onderaan i.p.v. als gat in het midden */
.tk-stat--lg { grid-column: span 7; }
.tk-stat--md { grid-column: span 5; }
.tk-stat__num { display: block; font-size: var(--fs-num); font-size: var(--fs-num); font-weight: var(--fw-h); letter-spacing: var(--ls-h); line-height: var(--lh-d); color: var(--head); font-variant-numeric: tabular-nums lining-nums; }
.tk-stat__unit { font-weight: var(--fw-r); letter-spacing: var(--ls-h); }
.tk-stat__desc { font-size: var(--fs-m); line-height: var(--lh-s); font-weight: var(--fw-b); color: var(--ink); max-width: 28ch; }
.tk-stat__sub { margin-top: -4px; font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--fw-r); color: var(--ink-2); max-width: 36ch; }
.tk-stat > .tk-bar { margin-top: 0; }
.tk-stats__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.tk-stats__foot p { max-width: 56ch; font-size: var(--fs-s); font-weight: var(--fw-r); color: var(--ink-2); }

/* bento (zones en eigenschappen) */
.tk-props { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.tk-prop { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--tk-r-3); }
.tk-prop--wide { grid-column: span 2; }
.tk-prop__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.tk-prop .tk-text { font-size: var(--fs-m); max-width: 46ch; }
.tk-prop .tk-h3 { font-size: var(--fs-l); }   /* in de vierkolommige bento (1000 tot 1200px) is een kaart maar 160 tot 200px breed: 'Waterafstotend' liep op 22 tot 24px over de padding. Boven 1370px en onder 1050px blijft het de gewone h3-grootte. */
.tk-prop__val { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: 0; padding-top: var(--sp-3); }   /* de waarde volgt de uitleg: geen gat van 120 tot 180px in hogere rijen */
.tk-prop__val span { font-size: var(--fs-xs); line-height: var(--lh-s); font-weight: var(--fw-r); color: var(--ink-2); }
.tk-prop__val b { display: inline-flex; align-items: center; min-height: 40px; padding: var(--sp-1) var(--sp-3); border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-m); font-weight: var(--fw-h); letter-spacing: var(--ls-h); white-space: nowrap; }   /* nowrap: 'Ultra hydrofoob' brak op 1000 tot 1030px op twee regels in een pil */

/* stappen: nummerbolletjes op een dik spoor */
.tk-steps { --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--sp-3); position: relative; }
.tk-steps--3 { --n: 3; }
.tk-steps::before { content: ""; position: absolute; z-index: 0; left: 36px; right: 36px; top: 35px; height: 10px; border-radius: 999px; background: var(--track); }
.tk-steps::after { content: ""; position: absolute; z-index: 0; left: 36px; right: 36px; top: 35px; height: 10px; border-radius: 999px; background: var(--accent); opacity: .85; transform-origin: left; transform: scaleX(1); }
.tk-js .tk-steps:not(.is-in)::after { transform: scaleX(0); }
.tk-js .tk-steps::after { transition: transform .9s var(--tk-ease) .2s; }
.tk-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.tk-step .tk-num { width: 72px; height: 72px; font-size: var(--fs-xl); box-shadow: 0 0 0 6px var(--bg), 0 0 0 9px var(--accent); margin: var(--sp-1) 0 var(--sp-2) var(--sp-1); }
.tk-step__card { width: 100%; flex: 1; padding: var(--sp-5); border-radius: var(--tk-r-3); background: var(--deep); color: var(--ink); display: flex; flex-direction: column; gap: var(--sp-3); }
.tk-plate--blue .tk-step__card { background: var(--tk-blue-700); }
.tk-step__card .tk-h3 { color: var(--head); }
.tk-step__card p { font-size: var(--fs-m); line-height: var(--lh-b); color: var(--ink); }
.tk-step__card .tk-pill { margin-top: auto; align-self: flex-start; background: var(--soft); color: var(--soft-ink); border-radius: 20px; padding-block: var(--sp-2); }   /* de pil breekt op 1000 tot 1100px op twee of drie regels: 20px straal geeft dan een afgeronde rechthoek in plaats van een ovaal */
.tk-plate--white .tk-step__card, .tk-plate--tint .tk-step__card { background: #fff; }
.tk-step--accent .tk-step__card { background: var(--tk-blue-50); color: var(--tk-graphite); --head: var(--tk-blue); --ink: var(--tk-graphite); --soft: #fff; --soft-ink: var(--tk-blue); --bar: var(--tk-red); }
.tk-step--accent .tk-step__card p { color: var(--tk-graphite); }
.tk-step--accent .tk-step__card a { color: var(--tk-blue); }
.tk-plate--blue .tk-step__card .tk-pill, .tk-plate--graphite .tk-step__card .tk-pill { background: rgba(229, 229, 230, .14); color: var(--tk-white); }
.tk-step--accent .tk-step__card .tk-pill { background: #fff; color: var(--tk-blue); }
.tk-steps--lg .tk-step .tk-num { width: 96px; height: 96px; font-size: var(--fs-xl); }
.tk-steps--lg::before, .tk-steps--lg::after { top: 47px; left: 48px; right: 48px; }

/* ja/nee-lijsten */
.tk-care { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--tk-r-4); }
.tk-care__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin: calc(clamp(24px, 3vw, 34px) * -1) calc(clamp(24px, 3vw, 34px) * -1) 0; border-radius: var(--tk-r-4) var(--tk-r-4) 0 0; background: var(--tk-blue); color: var(--tk-white); min-height: 76px; }
.tk-care--mat .tk-care__head { background: var(--tk-graphite); }
.tk-care__head .tk-h3 { color: var(--tk-white); }
.tk-care__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-care__list li { position: relative; display: block; min-height: 56px; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-7); border-radius: var(--tk-r-2); background: var(--soft); color: var(--ink); font-size: var(--fs-m); line-height: var(--lh-s); font-weight: var(--fw-r); }
.tk-care__list li::before { content: ""; position: absolute; left: 14px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%; background: var(--tk-blue) var(--tk-check-w) center / 16px no-repeat; }
.tk-care__list li.is-no::before { background: var(--tk-red) var(--tk-x-w) center / 14px no-repeat; }

/* vraag-en-antwoord-lijsten (Waarom Takumi): streepje voor een vraag, vinkje voor een antwoord */
.tk-care__list--dash li::before { background: var(--tk-graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tk-card--blue .tk-care__list li { background: rgba(229, 229, 230, .14); }
.tk-card--blue .tk-care__list li::before { background: var(--tk-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103685' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tk-care--qa .tk-care__head { background: var(--tk-graphite); }
.tk-card--blue.tk-care--qa .tk-care__head { background: var(--tk-blue-700); }
.tk-plate--graphite .tk-care--mat .tk-care__head { background: var(--tk-gray-800); }   /* kaart op een graphite plaat: de kop is dieper dan de plaat en smelt er niet mee weg (zoals blue-700 bij de blauwe kaart hierboven) */

/* downloadrijen */
.tk-dl { display: flex; flex-direction: column; gap: var(--sp-3); }
.tk-dl__row { display: flex; align-items: center; gap: var(--sp-3); min-height: 84px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3); border-radius: 999px; background: #fff; color: var(--tk-graphite); text-decoration: none; transition: transform .38s var(--tk-spring), box-shadow .3s; }
.tk-dl__row:hover { transform: translateY(-3px); box-shadow: var(--tk-lift); }
.tk-dl__row:hover .tk-dl__go { background-color: var(--tk-red); }
.tk-dl__pdf { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tk-blue); color: var(--tk-white); font-size: var(--fs-xs); font-weight: var(--fw-h); letter-spacing: var(--ls-l); }
.tk-dl__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-dl__txt b { font-size: var(--fs-l); font-weight: var(--fw-h); color: var(--tk-blue); letter-spacing: var(--ls-h); overflow-wrap: anywhere; hyphens: auto; }
.tk-dl__txt span { font-size: var(--fs-s); color: var(--tk-gray-600); font-weight: var(--fw-r); }
.tk-dl__go { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--tk-blue) var(--tk-down-w) center / 22px no-repeat; transition: background-color .2s; }
@media (max-width: 420px) {
  .tk-dl__row { gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border-radius: 32px; }
  .tk-dl__pdf { width: 44px; height: 44px; font-size: var(--fs-xs); }
  .tk-dl__go { width: 40px; height: 40px; background-size: 18px; }
}
.tk-dl__row--ph { background: rgba(255, 255, 255, .55); }
.tk-dl__row--ph .tk-dl__pdf { background: var(--tk-gray-600); }
.tk-dl__row--ph .tk-dl__go { background-color: var(--tk-gray-600); }

/* ---------- 13. tabellen en vergelijken ---------- */
.tk-tablecard { position: relative; border-radius: var(--tk-r-4); background: #fff; color: var(--tk-graphite); padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.tk-tablecard__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--tk-r-3); }
.tk-tablecard__scroll:focus-visible { outline-color: var(--tk-red); outline-offset: 0; }
.tk-tablecard::after { content: ""; position: absolute; right: 10px; top: 10px; bottom: 14px; width: 44px; border-radius: 0 var(--tk-r-3) var(--tk-r-3) 0; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%); }
.tk-tablecard.has-more::after { opacity: 1; }
.tk-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-s); line-height: var(--lh-s); font-variant-numeric: tabular-nums; }
.tk-table th, .tk-table td { padding: var(--sp-3) var(--sp-3); text-align: left; vertical-align: top; }
.tk-table thead th { font-size: var(--fs-xs); font-weight: var(--fw-h); letter-spacing: var(--ls-l); text-transform: uppercase; color: var(--tk-gray-600); vertical-align: bottom; padding-block: var(--sp-3) var(--sp-3); white-space: nowrap; }
.tk-table tbody th { font-weight: var(--fw-h); color: var(--tk-blue); white-space: nowrap; }
.tk-table tbody tr:nth-child(odd) > * { background: var(--tk-gray-25); }
.tk-table tbody tr:nth-child(even) > * { background: #fff; }
.tk-table tbody tr > :first-child { border-radius: var(--tk-r-2) 0 0 var(--tk-r-2); }
.tk-table tbody tr > :last-child { border-radius: 0 var(--tk-r-2) var(--tk-r-2) 0; }
.tk-table--cmp thead th:nth-child(3) { background: var(--tk-blue); color: var(--tk-white); }
.tk-table--cmp thead th:nth-child(3) { border-radius: 24px 24px 0 0; font-size: var(--fs-xs); padding-top: var(--sp-4); white-space: normal; }   /* lange kop ('Takumi Defend+ / Satin Protect') breekt op twee regels: de kolom blijft ~190px i.p.v. 320 en de tabel op mobiel smaller */
.tk-table--cmp thead th:nth-child(3)::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: -4px var(--sp-2) -4px 0; vertical-align: middle; background: url('assets/logo/takumi-mark-white.png') center / contain no-repeat; }
.tk-table--cmp tbody td:nth-child(3), .tk-table--cmp tbody tr:nth-child(odd) > td:nth-child(3), .tk-table--cmp tbody tr:nth-child(even) > td:nth-child(3) { background: var(--tk-blue-50); color: var(--tk-blue-700); font-weight: var(--fw-h); border-radius: 0; }
.tk-table--cmp tbody tr:last-child > td:nth-child(3) { border-radius: 0 0 24px 24px; }
.tk-table--cmp tbody td:nth-child(2), .tk-table--cmp tbody td:nth-child(4) { color: var(--tk-gray-600); font-weight: var(--fw-r); }
.tk-table--cmp tbody tr > :nth-child(4) { border-radius: 0 var(--tk-r-2) var(--tk-r-2) 0; }
.tk-table--data { min-width: 860px; font-size: var(--fs-s); }
.tk-table--data thead th { background: var(--tk-blue-800); color: var(--tk-white); padding-block: var(--sp-3); }
.tk-table--data thead th:first-child { border-radius: var(--tk-r-2) 0 0 var(--tk-r-2); }
.tk-table--data thead th:last-child { border-radius: 0 var(--tk-r-2) var(--tk-r-2) 0; }
.tk-table--data tbody th { white-space: normal; }   /* de eerste cel is een <th scope="row">, de tekst mag breken */
.tk-table--data tbody td:nth-child(2) { font-weight: var(--fw-h); white-space: nowrap; }
.tk-table--data tbody td:nth-child(3) { white-space: nowrap; color: var(--tk-gray-600); }
.tk-table--data tbody td:nth-child(5) { color: var(--tk-gray-600); }
.tk-tablecard + .tk-note, .tk-tablecard + .tk-tablenote, .tk-compare + .tk-note { margin-top: var(--sp-3); }
.tk-tablenote { max-width: 80ch; font-size: var(--fs-s); line-height: var(--lh-b); font-weight: var(--fw-r); color: var(--ink-2); }
.tk-tablenote strong { color: var(--head); }
@media (max-width: 899px) {
  .tk-table tbody th { position: sticky; left: 0; z-index: 1; white-space: normal; min-width: 128px; max-width: 150px; }
  .tk-table tbody tr:nth-child(odd) > th { background: var(--tk-gray-25); }
  .tk-table tbody tr:nth-child(even) > th { background: #fff; }
  .tk-table--cmp { min-width: 620px; }   /* 620 = echte min-content van de vergelijkingstabel: op 768px past de hele tabel zonder zijwaarts scrollen (voorheen 700, 38px te breed) */
  /* de labelkolom is hooguit 150px: de opvulling van 18px laat 'Kwaliteitscontrole' en 'Schuurbestendigheid' net niet passen. Minder opvulling, en afbreken als vangnet i.p.v. in de buurcel lopen */
  .tk-table--cmp tbody th { padding-inline: var(--sp-3) var(--sp-2); overflow-wrap: anywhere; hyphens: auto; }
  .tk-table--data tbody th { min-width: 150px; padding-inline: var(--sp-3) var(--sp-2); overflow-wrap: anywhere; hyphens: auto; }   /* 'Schuurbestendigheid' is 150px breed en past niet in de labelkolom: netjes afbreken ('Schuurbesten-digheid'). min-width: met afbreken in de tekst krimpt de kolom anders tot ~130px */
}
@media (max-width: 640px) {
  /* de Takumi-kolom is de boodschap: smalle vaste labelkolom, drie kolommen van 150px, scroll-snap en (takumi.js) openen op de blauwe kolom */
  .tk-table--cmp { min-width: 560px; }
  .tk-table--cmp th:first-child, .tk-table--cmp td:first-child {
    position: sticky; left: 0; z-index: 2; width: 112px; min-width: 112px; max-width: 112px; font-size: var(--fs-xs); padding-inline: var(--sp-2) var(--sp-1); background: #fff;
  }
  .tk-table--cmp tbody th:first-child { overflow-wrap: anywhere; hyphens: auto; }   /* 'Kwaliteitscontrole' is breder dan de labelkolom van 112px: afbreken i.p.v. over de Takumi-kolom lopen. 112 (was 104): 'Scheursterkte' past nu heel, zonder verweesd 'te' */
  .tk-table--cmp th:nth-child(n+2), .tk-table--cmp td:nth-child(n+2) { min-width: 150px; }
  .tk-tablecard__scroll { scroll-snap-type: x proximity; }
  .tk-table--cmp th:nth-child(3) { scroll-snap-align: start; scroll-margin-left: 112px; }
}

/* twee productkaarten naast elkaar met sleutel-waarde-rijen */
.tk-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.tk-spec { display: flex; flex-direction: column; padding: 0; overflow: hidden; overflow: clip; border-radius: var(--tk-r-5); }
.tk-compare > .tk-spec, .tk-compare > .tk-care { align-self: stretch; }   /* gelijke hoogte, onderranden staan op één lijn */
@supports not (overflow: clip) { .tk-spec__head { position: static !important; } }
.tk-spec__head { position: sticky; top: 76px; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 128px; align-content: center; padding: var(--sp-3) var(--sp-5); background: var(--tk-blue); color: var(--tk-white); }   /* vaste hoogte: Satin Protect breekt soms naar twee regels, de rijen eronder blijven gelijk */
.tk-spec--mat .tk-spec__head { background: var(--tk-graphite); }
.tk-spec__img { position: relative; width: 92px; height: 72px; display: grid; place-items: center; }
.tk-spec__img::before { content: ""; position: absolute; inset: 0 10px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.tk-spec__img img { position: relative; width: 150%; max-width: none; }
.tk-spec__name { font-size: var(--fs-xl); font-weight: var(--fw-h); text-transform: uppercase; letter-spacing: var(--ls-h); line-height: var(--lh-d); color: var(--tk-white); }
.tk-spec__name small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); white-space: nowrap; font-weight: var(--fw-b); letter-spacing: var(--ls-l); color: var(--tk-blue-200); }
.tk-spec--mat .tk-spec__name small { color: var(--tk-silver); }
.tk-badge { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--tk-white); color: var(--tk-blue); text-align: center; line-height: var(--lh-d); box-shadow: 0 0 0 4px rgba(229, 229, 230, .25); }
.tk-badge b { display: block; font-size: var(--fs-xl); font-weight: var(--fw-h); letter-spacing: var(--ls-h); }
.tk-badge span { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-h); letter-spacing: var(--ls-l); text-transform: uppercase; }
.tk-spec__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.tk-spec__body > .tk-actions { margin-top: auto; padding-top: var(--sp-3); }   /* knoppen staan onderaan op gelijke hoogte */
.tk-kv { display: grid; gap: var(--sp-1); }
.tk-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: var(--tk-r-2); font-size: var(--fs-s); line-height: var(--lh-s); }
.tk-kv > div:nth-child(odd) { background: var(--tk-gray-25); }
.tk-kv > div:nth-child(even) { background: var(--tk-gray-50); }
.tk-kv dt { flex: 1 1 0; min-width: 0; color: var(--tk-gray-600); font-weight: var(--fw-r); }
.tk-kv dd { flex: 0 1 auto; max-width: 64%; text-align: right; font-weight: var(--fw-r); color: var(--tk-gray-600); }
.tk-kv dd.diff, .tk-kv .diff dd { font-weight: var(--fw-h); color: var(--tk-gray-900); }
.tk-kv dd.diff::before, .tk-kv .diff dd::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-2); border-radius: 50%; background: var(--tk-blue); }
.tk-spec--mat .tk-kv dd.diff::before { background: var(--tk-graphite); }
.tk-kv.tk-kv--plain > div:nth-child(n) { background: transparent; padding: var(--sp-2) 0; }
/* Vergelijkskaarten (#naast-elkaar): rijen waar de waarden verschillen krijgen een kleurtint met ring (blauw bij Defend+, grafiet bij Satin Protect); gelijke rijen blijven rustig en lichtgrijs, zonder zebra die met de markering concurreert */
.tk-spec .tk-kv > div:nth-child(n) { background: var(--tk-gray-25); }
.tk-spec .tk-kv > div:is(.diff, :has(> dd.diff)) { background: var(--tk-blue-50); box-shadow: inset 0 0 0 2px var(--tk-blue-100); }
.tk-spec--mat .tk-kv > div:is(.diff, :has(> dd.diff)) { background: var(--tk-gray-100); box-shadow: inset 0 0 0 2px var(--tk-gray-200); }
.tk-spec .tk-kv > div:is(.diff, :has(> dd.diff)) dt { color: var(--tk-gray-900); font-weight: var(--fw-b); }
.tk-spec .tk-kv dt { min-width: min-content; }   /* smalle telefoon (320px): het label breekt nooit midden in een woord en loopt niet onder de waarde door; de waarde krijgt de rest en breekt af */

/* ---------- 14. productpagina: galerij links, kooppaneel rechts ---------- */
.tk-pdp { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--sp-5); align-items: stretch; }
.tk-buy { --tk-prod: var(--tk-blue); align-self: start; container-type: inline-size; padding: var(--sp-5); border-radius: var(--tk-r-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.tk-buy[data-finish="mat"] { --tk-prod: var(--tk-graphite); }
@media (min-width: 1000px) and (min-height: 760px) { .tk-buy { position: sticky; top: 96px; } }
/* Vanaf 1000px staat de galerij (een carrousel) naast het kooppaneel en is even hoog als het paneel. */
@media (min-width: 1000px) {
  .tk-buy { gap: var(--sp-3); }
  .tk-specs { gap: var(--sp-1); }
  .tk-specs > div { padding: var(--sp-2) var(--sp-3) var(--sp-2); }
}
.tk-buy__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.tk-buy .tk-h1 { color: var(--tk-blue); letter-spacing: var(--ls-h); }
.tk-buy__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--tk-gray-600); }
.tk-buy .tk-text { font-size: var(--fs-m); }
.tk-buy .tk-field__l { display: block; margin-bottom: var(--sp-2); }   /* label 'Afwerking' boven de schakelaar; op Defend+ een <p>, op Satin Protect een <span> (display: block, anders telt de marge niet) */
.tk-toggle { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: 999px; background: var(--tk-gray-50); align-self: flex-start; }
.tk-toggle a, .tk-toggle span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-radius: 999px; font-size: var(--fs-s); font-weight: var(--fw-h); color: var(--tk-gray-600); text-decoration: none; transition: background-color .2s, color .2s; }
.tk-toggle a:hover { background: #fff; color: var(--tk-blue); }
.tk-toggle .is-on, .tk-toggle [aria-current="page"] { background: var(--tk-prod); color: var(--tk-white); }
.tk-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tk-specs > div { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-radius: var(--tk-r-2); background: var(--tk-gray-50); }
.tk-specs span { display: block; overflow-wrap: break-word; hyphens: auto; font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase; color: var(--tk-gray-600); line-height: var(--lh-h); }
.tk-specs b { display: block; margin-top: var(--sp-1); font-size: var(--fs-m); line-height: var(--lh-h); font-weight: var(--fw-h); color: var(--tk-gray-900); }
.tk-buy .tk-btn { align-self: flex-start; }
.tk-dotline { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--ink-2); }
.tk-dotline::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tk-red); flex: none; }

/* ---------- 15. faq (details/summary) ---------- */
.tk-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-7); align-items: start; }
.tk-faq__intro { position: sticky; top: 104px; display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.tk-faq__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-faq__item {
  --faq-bg: var(--tk-blue-50); --faq-open: #fff; --faq-ink: var(--tk-graphite); --faq-head: var(--tk-blue); --faq-tg: var(--tk-blue);
  --link: var(--tk-blue);   /* het item heeft altijd een licht vlak (Mist, wit of blauw-50), ook op een blauwe of graphite plaat: de link in het antwoord is dus blauw, niet Mist (was 1,0 tot 1,3:1) */
  border-radius: var(--tk-r-3); background: var(--faq-bg); color: var(--faq-ink); transition: background-color .25s; overflow: hidden;
}
.tk-plate--blue .tk-faq__item, .tk-plate--graphite .tk-faq__item { --faq-bg: var(--tk-white); --faq-open: var(--tk-blue-50); }
.tk-plate--white .tk-faq__item { --faq-open: var(--tk-blue-100); }   /* open item was wit op een witte plaat en dus een kaart zonder vorm; blauw-100 houdt blauwe kop (ruim 7:1) en link leesbaar */
.tk-faq__item[open] { background: var(--faq-open); }
.tk-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 72px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.tk-faq__item > summary::-webkit-details-marker { display: none; }
.tk-faq__item > summary h3 { font-size: var(--fs-l); font-weight: var(--fw-h); letter-spacing: var(--ls-h); line-height: var(--lh-h); color: var(--faq-head); }
.tk-faq__item > summary::after {
  content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(#fff, #fff) center / 16px 3px no-repeat, linear-gradient(#fff, #fff) center / 3px 16px no-repeat, var(--faq-tg);
  transition: transform .32s var(--tk-spring), background-color .24s;
}
.tk-faq__item > summary:hover::after { background-color: var(--tk-blue-700); }
.tk-faq__item[open] > summary::after { transform: rotate(45deg); background-color: var(--tk-red); }
.tk-faq__item > summary:focus-visible { outline-offset: -3px; outline-color: var(--tk-red); border-radius: var(--tk-r-3); }
.tk-faq__a { padding: 0 var(--sp-4) var(--sp-4); }
.tk-faq__a p { max-width: 60ch; font-size: var(--fs-m); line-height: var(--lh-b); color: var(--faq-ink); }
.tk-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--tk-ease), content-visibility .32s allow-discrete; }
.tk-faq__item[open]::details-content { block-size: auto; }

/* ---------- 16. formulier ---------- */
.tk-form {
  --head: var(--tk-blue); --ink: var(--tk-graphite); --ink-2: var(--tk-gray-600); --link: var(--tk-blue); --focus: var(--tk-red); --soft: var(--tk-blue-50); --soft-ink: var(--tk-blue);   /* witte kaart: eigen tone, ook op een blauwe plaat */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--tk-r-5); background: #fff; color: var(--tk-graphite); }
.tk-form div[data-grp], .tk-form__full { grid-column: 1 / -1; }
.tk-form [data-grp]:not([hidden]):not(label) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
/* Naast de aside (vanaf 1000px, ook op 1440) is een keuzelijst in twee kolommen te smal: 'Vraag over een product' en 'Demo of stalen aanvragen' werden afgeknipt.
   Zodra de formulierkaart te smal is voor twee volle keuzelijsten (minder dan 560px inhoud), krijgt elke keuzelijst de volle breedte. Op tablet blijven ze naast elkaar. */
.tk-form { container-type: inline-size; }
@container (max-width: 560px) { .tk-form .tk-field:has(> .tk-select) { grid-column: 1 / -1; } }
.tk-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.tk-field__l { font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--tk-gray-800); }
.tk-req { color: var(--tk-red); }
/* velden: rand van 2px in gray-500 (4,9:1 op wit), zodat de grens van het veld te zien is (WCAG 1.4.11). Op silver gray-600. */
.tk-input, .tk-select, .tk-textarea {
  --line: var(--tk-gray-500);
  width: 100%; min-height: 52px; padding: 0 var(--sp-4); border: 0; border-radius: 26px; background: var(--tk-gray-50); color: var(--tk-gray-900);
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: var(--fs-m); font-weight: var(--fw-r); transition: box-shadow .2s, background-color .2s; appearance: none; -webkit-appearance: none;
}
.tk-input::placeholder, .tk-textarea::placeholder { color: var(--tk-gray-600); }   /* 6,0:1 op gray-50, 5,5:1 bij hover */
.tk-input:hover, .tk-select:hover, .tk-textarea:hover { background-color: var(--tk-gray-100); }   /* background-color, niet de shorthand: anders verdwijnt de chevron van .tk-select bij hover */
.tk-input:focus-visible, .tk-select:focus-visible, .tk-textarea:focus-visible, .tk-input:focus, .tk-select:focus, .tk-textarea:focus {
  outline: 3px solid var(--tk-blue); outline-offset: 2px; background-color: #fff; --line: var(--tk-blue);   /* echte outline: blijft zichtbaar in forced-colors; background-color laat de chevron van .tk-select staan */
}
.tk-input:user-invalid, .tk-select:user-invalid, .tk-textarea:user-invalid, .tk-input[aria-invalid="true"] { --line: var(--tk-red); box-shadow: inset 0 0 0 3px var(--tk-red); }
.tk-error { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding-left: var(--sp-1); font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--fw-b); color: var(--tk-red); }
.tk-error::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--tk-red) var(--tk-x-w) center / 10px no-repeat; }
/* een veld dat rood wordt na het verlaten (:user-invalid) toont ook meteen zijn tekst; het script doet dat anders pas bij verzenden. Kleur alleen is geen foutmelding. */
.tk-input:user-invalid ~ .tk-error[hidden] { display: flex !important; }
.tk-textarea { min-height: 140px; padding: var(--sp-3) var(--sp-4); border-radius: 26px; line-height: var(--lh-b); resize: vertical; }
.tk-select { padding-right: var(--sp-6); text-overflow: ellipsis; cursor: pointer; background: var(--tk-gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103685' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }   /* 44px rechts: 'Demo of stalen aanvragen' past op 375px; wat nog te lang is krijgt een ellips */
.tk-segment { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); margin: 0; border: 0; border-radius: 999px; background: var(--tk-gray-50); min-width: 0; }
.tk-segment legend { padding: 0; margin-bottom: var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--tk-gray-800); float: left; width: 100%; }
.tk-segment > label { position: relative; }
.tk-segment input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tk-segment > label > span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-radius: 999px; font-size: var(--fs-s); font-weight: var(--fw-h); color: var(--tk-gray-600); transition: background-color .2s, color .2s; }
.tk-segment input:checked + span { background: var(--tk-blue); color: var(--tk-white); }
.tk-segment input:focus-visible + span { outline: 3px solid var(--tk-red); outline-offset: 2px; }
.tk-segment-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-segment-wrap > .tk-field__l { margin: 0; }
.tk-check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-s); line-height: var(--lh-b); cursor: pointer; grid-column: 1 / -1; }
.tk-check input { appearance: none; -webkit-appearance: none; flex: none; width: 28px; height: 28px; margin: 0; border: 2px solid var(--tk-gray-500); border-radius: 10px; background: var(--tk-gray-50) center / 16px no-repeat; cursor: pointer; transition: background-color .2s, border-color .2s; }
.tk-check input:checked { background-color: var(--tk-blue); background-image: var(--tk-check-w); border-color: var(--tk-blue); }
.tk-check input:focus-visible { outline: 3px solid var(--tk-red); outline-offset: 3px; }
.tk-form__submit { grid-column: 1 / -1; }
.tk-confirm {
  --head: var(--tk-white); --ink: var(--tk-white); --ink-2: var(--tk-blue-100); --bar: var(--tk-red); --focus: var(--tk-white); --bg: var(--tk-blue);
  padding: var(--sp-7); border-radius: var(--tk-r-5); background: var(--bg); color: var(--tk-white); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
}
/* kaarttoon en halo volgen --bg: met tk-card--graphite (zoals op Contact) wordt de kaart graphite met een graphite halo, zonder inline stijl */
.tk-confirm__check { width: 96px; height: 96px; border-radius: 50%; background: var(--tk-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103685' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 46px no-repeat; box-shadow: 0 0 0 6px var(--bg), 0 0 0 10px var(--tk-mist); margin: var(--sp-2) 0 var(--sp-3) var(--sp-2); }
.tk-confirm .tk-h2 { color: var(--tk-white); }
.tk-plate--blue .tk-confirm { --bg: var(--tk-graphite); --ink-2: var(--tk-silver); --deep: var(--tk-gray-800); }   /* standaard graphite op een blauwe plaat: nooit een blauwe kaart op blauw (de kaarttoon tk-card--graphite geeft dezelfde waarden) */

/* ---------- 17. aside-kaarten, lege staat, referentiekaart ---------- */
.tk-layout-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-3); align-items: stretch; }   /* formulier en aside even hoog: geen holte onder de kortste kolom */
.tk-layout-form > .tk-form { grid-column: 1; grid-row: 1; }
.tk-layout-form > .tk-aside { grid-column: 2; grid-row: 1; }
.tk-layout-form > .tk-status { grid-column: 1; grid-row: 1; }   /* leeg tot verzenden, dan komt de bevestiging op de plek van het formulier */
/* een lege live-region met display: none staat niet in de toegankelijkheidsboom en wordt dan niet betrouwbaar aangekondigd: hij blijft in de boom
   (visueel verborgen, buiten de grid-stroom: geen extra rij of gap), en krijgt zijn plek zodra het script de bevestiging erin zet */
.tk-status:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* de bevestiging komt op de plek van het formulier (korter dan de aside ernaast): de kaart vult de rij en centreert haar inhoud, geen blauwe holte onder de kortste kolom */
.tk-layout-form > .tk-status:not(:empty) { display: flex; }
.tk-layout-form > .tk-status > .tk-confirm { flex: 1; justify-content: center; }
.tk-layout-form > .tk-order { grid-column: 1 / -1; grid-row: 2; }   /* de rode bestelkaart loopt onder beide kolommen door: geen holte rechtsonder */
.tk-aside { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.tk-aside .tk-card { padding: var(--sp-5); border-radius: var(--tk-r-4); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.tk-aside h2 { font-size: var(--fs-xl); font-weight: var(--fw-h); letter-spacing: var(--ls-h); color: var(--head); }
.tk-aside p { font-size: var(--fs-s); line-height: var(--lh-b); color: var(--ink); }
.tk-aside .tk-card:target { animation: tk-target 1.2s var(--tk-ease) 1; }
@keyframes tk-target { 0% { box-shadow: 0 0 0 0 rgba(170, 39, 4, .6); } 40% { box-shadow: 0 0 0 10px rgba(170, 39, 4, .35); } 100% { box-shadow: 0 0 0 0 rgba(170, 39, 4, 0); } }
.tk-search { display: flex; flex-wrap: wrap; width: 100%; gap: var(--sp-2); }   /* smalle kaart (375, 1000px): de knop zakt onder het veld i.p.v. het veld te knijpen */
.tk-search .tk-input { background: #fff; flex: 1 1 220px; min-width: 0; }   /* 220px: de placeholder 'Postcode of gemeente' past volledig */
.tk-map { position: relative; width: 100%; min-height: 250px; border-radius: var(--tk-r-3); background: rgba(255, 255, 255, .6); display: grid; place-items: center; align-content: end; text-align: center; padding: var(--sp-8) var(--sp-3) var(--sp-4); overflow: hidden; }
.tk-map::before { content: ""; position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 130px; aspect-ratio: 1; border-radius: 50%; background: url('assets/logo/takumi-mark-blue.png') center / 70% no-repeat, rgba(16, 54, 133, .08); opacity: .5; }   /* embleem boven, tekst eronder: ze raken elkaar niet */
.tk-map > span { position: relative; padding-inline: .7em; }   /* goot voor de rechterrand van de [placeholder]-pil die over twee regels loopt (clone): anders 2px breder dan het vak */
.tk-contact { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.tk-contact__row { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border-radius: 999px; background: var(--soft); font-size: var(--fs-s); font-weight: var(--fw-b); line-height: var(--lh-s); color: var(--ink); }
.tk-contact__row a { color: var(--tk-white); font-weight: var(--fw-h); text-underline-offset: 4px; }
.tk-contact__row .tk-icon { --is: 44px; background: var(--tk-white); color: var(--tk-graphite); }
.tk-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-5); border-radius: var(--tk-r-4); overflow: hidden; }
.tk-order > div { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.tk-order h2 { font-size: var(--fs-xl); font-weight: var(--fw-h); letter-spacing: var(--ls-h); color: var(--head); }
.tk-order p { font-size: var(--fs-s); line-height: var(--lh-b); color: var(--ink); max-width: 44ch; }
.tk-order__art { width: clamp(150px, 20vw, 210px); aspect-ratio: 1; margin: -24px -52px -60px 0; border-radius: 50%; background: var(--tk-blue); display: grid; place-items: center; overflow: hidden; flex: none; }
.tk-order__art img { width: 138%; max-width: none; }

.tk-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.tk-empty__steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-empty__steps li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); border-radius: 999px; background: var(--tk-white); color: var(--tk-graphite); }
.tk-empty__steps .tk-num { --accent: var(--tk-blue); --on-accent: var(--tk-white); --bg: var(--tk-white); width: 52px; height: 52px; font-size: var(--fs-m); }
.tk-empty__steps b { display: block; font-size: var(--fs-m); font-weight: var(--fw-h); color: var(--tk-blue); }
.tk-empty__steps span.tk-s { font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--fw-r); color: var(--tk-gray-600); }
.tk-ghosts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-6); }
.tk-ghost { aspect-ratio: 4 / 3; border-radius: var(--tk-r-4); background: var(--tk-gray-800); position: relative; overflow: hidden; }
.tk-ghost::before { content: ""; position: absolute; left: 50%; top: 42%; width: 28%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url('assets/logo/takumi-mark-grey.png') center / contain no-repeat; opacity: .35; }
.tk-ghost::after { content: ""; position: absolute; left: 20px; right: 40%; bottom: 20px; height: 12px; border-radius: 999px; background: rgba(188, 190, 192, .3); box-shadow: 0 -24px 0 -2px rgba(188, 190, 192, .2); }
.tk-ref {
  --head: var(--tk-blue); --ink: var(--tk-graphite); --ink-2: var(--tk-gray-600); --link: var(--tk-blue); --focus: var(--tk-red); --soft: var(--tk-blue-50); --soft-ink: var(--tk-blue);   /* witte kaart: eigen tone (zoals .tk-form), ook buiten tk-card--white en op een blauwe of graphite plaat (was Mist op wit, ca. 1,2:1) */
  padding: var(--sp-3); border-radius: var(--tk-r-4); background: #fff; color: var(--tk-graphite); display: flex; flex-direction: column; gap: var(--sp-3);
}
.tk-ref__photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--tk-r-3); background: var(--tk-blue-50); display: grid; place-items: center; color: var(--tk-graphite); font-size: var(--fs-s); font-weight: var(--fw-b); text-align: center; padding: var(--sp-3); }
.tk-ref__photo .tk-chip { position: absolute; left: 14px; top: 14px; }
.tk-ref__body { padding: var(--sp-1) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-ref .tk-kv > div { padding: var(--sp-2) var(--sp-3); }
.tk-ref dt { flex: none; white-space: nowrap; }
.tk-ref dd { max-width: none; min-width: 0; text-align: left; }
.tk-ref dl > div { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); align-items: baseline; }

/* ---------- 18. afsluitband (rood, de installateur-CTA) ---------- */
.tk-band { padding-block: var(--sp-8); }
.tk-band__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-7); align-items: center; }
.tk-band .tk-h2 { max-width: 22ch; }
.tk-band__art { position: relative; min-height: 260px; }
.tk-band__art .tk-watermark { right: -90px; top: 50%; margin-top: -250px; --w: 500px; --o: .12; }
.tk-band__art .tk-sticker { left: 50%; top: 50%; margin: -84px 0 0 -84px; --s: 168px; }
.tk-band--tape { padding-bottom: calc(clamp(56px, 7vw, 96px) + 56px); }

/* ---------- 19. footer ---------- */
.tk-footer { padding-block: var(--sp-8) 0; margin-bottom: var(--tk-inset); }
.tk-footer--tape { padding-top: calc(clamp(56px, 7vw, 88px) + 56px); }
.tk-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-8); align-items: start; }
.tk-footer__cta { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-5); max-width: 40ch; }
.tk-footer__cta p { font-size: var(--fs-m); line-height: var(--lh-b); font-weight: var(--fw-r); color: var(--tk-blue-100); }
.tk-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-3); }
.tk-footer__col { display: flex; flex-direction: column; gap: 2px; }
.tk-footer__t { margin: 0 0 var(--sp-3) var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase; color: var(--tk-blue-200); }
.tk-footer__t::before { content: ""; display: block; width: 28px; height: 6px; margin-bottom: var(--sp-2); border-radius: 2px; background: var(--tk-red); }
.tk-footer__col a { display: flex; align-items: center; min-height: 42px; padding: 0 var(--sp-3); border-radius: 999px; font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--tk-white); text-decoration: none; transition: background-color .2s, transform .3s var(--tk-spring); }
.tk-footer__col a:hover { background: rgba(229, 229, 230, .16); transform: translateX(3px); }
.tk-footer__outline { margin-top: var(--sp-7); }
@media (max-width: 359px) { .tk-footer__outline { margin-right: -16px; letter-spacing: var(--ls-h); } }   /* 'PERFECTING' is op de minimumgrootte (48px, nooit kleiner) 288px breed en de container op 320px maar 272px. Iets strakker gezet (276px) en 16px in de rechtermarge laten lopen: de contour blijft binnen zijn vak en 12px van de rand van de plaat */
.tk-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-4); border-radius: 999px; background: var(--tk-blue-800); font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--tk-blue-100); }
.tk-footer__legal a { display: inline-block; min-height: 28px; line-height: 28px; color: var(--tk-white); font-weight: var(--fw-b); text-underline-offset: 4px; }
.tk-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.tk-footer__mark { display: block; width: min(1100px, calc(100% - var(--tk-gutter) * 2)); margin: var(--sp-7) auto 0; aspect-ratio: 781 / 170; overflow: hidden; }
.tk-footer__mark img { width: 100%; height: auto; }
.tk-footer .tk-pattern { right: -120px; top: -140px; --w: 560px; --o: .2; --mask-a: 210deg; }
.tk-footer .tk-tagline { margin-bottom: 0; }
.tk-footer .tk-tagline .tk-bar:last-child { display: none; }   /* het label 'Installateur zoeken' heeft zelf een balk: geen twee balken boven elkaar */

/* ---------- 19b. extra bouwstenen: duo, waarden, podia, orbs ---------- */
/* duo: twee grote kaarten naast elkaar (Garantie en Verwijderen) */
.tk-duo { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-6); border-radius: var(--tk-r-5); }
.tk-duo .tk-h2 { font-size: var(--fs-h2); max-width: 18ch; }
.tk-duo .tk-text { font-size: var(--fs-m); }
.tk-duo .tk-icon { --is: 72px; }
.tk-compare--duo { align-items: stretch; gap: var(--sp-3); }
.tk-compare--duo > .tk-duo { height: 100%; }

/* waarden: label links, de waarde van elke folie als pill rechts (Eigenschappen bij het plaatsen) */
.tk-vals { display: grid; gap: var(--sp-2); }
.tk-vals > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: var(--sp-2) var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-3); border-radius: var(--tk-r-2); background: var(--tk-gray-25); }
.tk-vals > div:nth-child(even) { background: var(--tk-gray-50); }
.tk-vals dt { font-size: var(--fs-m); font-weight: var(--fw-h); color: var(--tk-blue); }
.tk-vals dd { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tk-vals__p { display: inline-flex; align-items: baseline; gap: var(--sp-2); min-height: 40px; padding: var(--sp-2) var(--sp-3); border-radius: 22px; background: var(--tk-blue); color: var(--tk-white); font-size: var(--fs-s); font-weight: var(--fw-b); line-height: var(--lh-h); font-variant-numeric: tabular-nums; }
.tk-vals__p b { font-weight: var(--fw-h); font-size: var(--fs-m); }
.tk-vals__p--mat { background: var(--tk-graphite); }
.tk-card--blue .tk-vals > div, .tk-plate--blue .tk-card .tk-vals > div { background: var(--tk-gray-25); }

/* podia: twee rollen op twee cirkels (hero van Producten) */
.tk-podia { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding-bottom: 8%; }
.tk-podium { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--tk-blue-700); }
.tk-podium img { position: relative; width: 128%; max-width: none; transform: rotate(-4deg); filter: none; }
.tk-podium--mat { background: var(--tk-gray-800); margin: 16% 0 0 -12%; box-shadow: 0 0 0 10px rgba(188, 190, 192, .45); }
.tk-podium > .tk-sticker { left: 6%; top: 6%; right: auto; bottom: auto; }
.tk-podium--mat > .tk-sticker { left: auto; right: 6%; }

/* ---------- 20. reveal en bewegen ---------- */
/* De klasse tk-js staat op <html> via een inline regeltje in de <head> (zie kit.html), met een waakhond: haalt takumi.js het
   niet binnen 3 s, dan wordt tk-js weer weggehaald en is alles gewoon zichtbaar. Geen CSS-fallback-animatie: die liet alles
   na 3 s toch verschijnen en maakte de reveal onzichtbaar voor wie verder scrolde. */
.tk-js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .56s var(--tk-ease), transform .56s var(--tk-ease); }
.tk-js [data-reveal].is-in { opacity: 1; transform: none; }
.tk-js .tk-label::before { transform: scaleX(0); transition: transform .4s var(--tk-ease) .1s; }
.tk-js .tk-label.is-in::before, .tk-js [data-reveal].is-in .tk-label::before { transform: none; }
@media print { .tk-js [data-reveal] { opacity: 1; transform: none; } .tk-js .tk-label::before { transform: none; } }

/* domino-golf: lift en kanteling nemen af met de afstand (alleen muis, nooit op touch) */
/* Domino-golf: de kaart onder je muis tilt 8 px op, de buren tillen mee en leunen een paar graden weg, met afnemende kracht.
   Losse eigenschappen translate en rotate, zodat ze niet botsen met de reveal (transform).
   Variabelen --tk-wave-f (kracht 0 tot 1) en --tk-wave-s (richting -1, 0, 1) komen uit takumi.js. */
@media (hover: hover) and (pointer: fine) {
  .tk-wave > *:not(.tk-tile) {
    translate: 0 calc(var(--tk-wave-lift, -8px) * var(--tk-wave-f, 0)); rotate: calc(var(--tk-wave-rot, 3deg) * var(--tk-wave-f, 0) * var(--tk-wave-s, 0)); transform-origin: 50% 100%;
    transition: transform .38s var(--tk-spring), translate .38s var(--tk-spring), rotate .38s var(--tk-spring), box-shadow .3s, background-color .2s, opacity .56s var(--tk-ease);
  }
  .tk-js .tk-wave > [data-reveal]:not(.tk-tile) {
    transition: opacity .56s var(--tk-ease), transform .56s var(--tk-ease), translate .38s var(--tk-spring), rotate .38s var(--tk-spring), box-shadow .3s, background-color .2s;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .tk-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 999px) {
  .tk-hero__grid, .tk-subhero .tk-hero__grid { grid-template-columns: 1fr; }
  .tk-hero__stage { max-width: 600px; margin-left: 0; margin-bottom: var(--sp-6); }   /* ruimte voor de cirkel en de sticker die over de rand hangen */
  .tk-hero__stage .tk-circle--a { --d: 66%; top: 8%; right: -20%; }
  .tk-pdp { grid-template-columns: 1fr; }
  .tk-faq, .tk-split, .tk-layout-form, .tk-empty, .tk-band__grid, .tk-over { grid-template-columns: 1fr; }
  .tk-layout-form > .tk-form, .tk-layout-form > .tk-status, .tk-layout-form > .tk-aside, .tk-layout-form > .tk-order { grid-column: auto; grid-row: auto; }
  .tk-faq__intro { position: static; }
  .tk-band__art { min-height: 200px; }
  .tk-compare { grid-template-columns: 1fr; }
  .tk-tiles--3 { grid-template-columns: 1fr; }
  .tk-tiles--3 .tk-tile__media { aspect-ratio: 2.2; }
  .tk-over--rev { grid-template-columns: 1fr; }
  .tk-over--rev .tk-over__art { order: 0; }
  .tk-podia { max-width: 540px; }
  .tk-spec__head { position: static; }
  .tk-cols { grid-template-columns: 1fr; max-width: 640px; }
  .tk-cols--wave > .tk-numcard:nth-child(n) { margin-top: 0; }
  .tk-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .tk-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-quicknav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-steps, .tk-steps--3 { grid-template-columns: 1fr; gap: var(--sp-3); }
  .tk-steps::before, .tk-steps::after { left: 35px; right: auto; width: 10px; top: 36px; bottom: 36px; height: auto; transform-origin: top; }
  .tk-steps::after { transform: scaleY(1); }
  .tk-js .tk-steps:not(.is-in)::after { transform: scaleY(0); }   /* verticaal spoor vult van boven naar beneden */
  .tk-step { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0 var(--sp-3); align-items: start; }
  .tk-step .tk-num { margin: var(--sp-1) 0 0 var(--sp-1); }
  .tk-steps--lg .tk-step { grid-template-columns: 104px minmax(0, 1fr); }
  .tk-steps--lg::before, .tk-steps--lg::after { left: 47px; }   /* midden van het bolletje: 4px marge + halve breedte, min de halve breedte van het spoor */
  .tk-numcard--accent { top: 0; }
}
@media (min-width: 640px) and (max-width: 999px) {
  /* tablet: twee keuzetegels naast elkaar, de derde breed eronder; de drie genummerde kaarten idem */
  .tk-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-tiles--3 .tk-tile__media { aspect-ratio: 1.45; }
  .tk-tiles--3 .tk-tile:last-child { grid-column: 1 / -1; }
  .tk-tiles--3 .tk-tile:last-child .tk-tile__media { aspect-ratio: 2.4; }
  .tk-cols:not(.tk-cols--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .tk-cols:not(.tk-cols--4) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .tk-statement { grid-template-columns: 1fr; }
  .tk-statement__side { flex-direction: row; align-items: center; justify-content: space-between; }
  .tk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-stat, .tk-stat--lg, .tk-stat--md { grid-column: span 1; }
  .tk-stat--lg { grid-column: 1 / -1; }
  .tk-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tk-spec__head { min-height: 0; }
  .tk-vals dd { flex-direction: column; align-items: stretch; }
  .tk-vals__p { justify-content: space-between; white-space: nowrap; }
}
@media (max-width: 719px) {
  .tk-tiles { grid-template-columns: 1fr; }
  .tk-tile { height: auto; grid-template-rows: auto auto; }
  .tk-tile__media { aspect-ratio: 1.7; }
  .tk-facts { grid-template-columns: 1fr; }
  .tk-vals > div { grid-template-columns: 1fr; }
  .tk-form, .tk-form [data-grp]:not([hidden]):not(label) { grid-template-columns: 1fr; }
  .tk-ghosts { grid-template-columns: 1fr; }
  .tk-ghost:nth-child(n+2) { display: none; }   /* één spookkaart als vorm: drie kaarten onder elkaar werden 660px (375) tot 1360px (719) hoog */
  .tk-footer__legal { border-radius: var(--tk-r-4); flex-direction: column; align-items: flex-start; }
}
@media (max-width: 559px) {
  .tk-hero { padding-top: calc(var(--tk-header-h) + 36px); }
  .tk-hero .tk-actions .tk-btn { width: 100%; justify-content: space-between; }
  .tk-hero .tk-actions .tk-btn--ghost { justify-content: center; }
  .tk-hero__stage > .tk-sticker { --s: 104px; left: -10px; bottom: -28px; }
  .tk-hero__bg .tk-pattern { display: block; --w: 360px; --o: .16; right: -120px; top: 8%; }   /* het doospatroon blijft ook op mobiel, kleiner */
  .tk-hero__stage > .tk-circle--b { --d: 80px; right: -14px; }
  .tk-cols--4, .tk-props, .tk-quicknav { grid-template-columns: 1fr; }
  /* snelkeuze: compacte rij (icoon links, label en note rechts). Zes tegels van 206px werden samen 1316px (1,6 scherm), langer dan de secties waarnaar ze springen */
  .tk-quicknav { gap: var(--sp-2); }
  .tk-quick { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "icon label" "icon note"; align-items: center; column-gap: var(--sp-3); row-gap: 2px; padding: var(--sp-3); }
  .tk-quick .tk-icon { grid-area: icon; --is: 52px; }
  .tk-quick__label { grid-area: label; align-self: end; padding-bottom: var(--sp-3); font-size: var(--fs-m); }
  .tk-quick__label::after { width: 32px; height: 6px; }
  .tk-quick .tk-note { grid-area: note; align-self: start; }
  .tk-podium img { width: 116%; }   /* de rollen staan op 128% buiten de plaat: de rolpunt zat 6px van de plaatrand */
  .tk-prop--wide { grid-column: auto; }
  .tk-stats { grid-template-columns: 1fr; }
  .tk-stat, .tk-stat--lg, .tk-stat--md { grid-column: 1 / -1; }
  .tk-order__art { display: none; }
  .tk-order { grid-template-columns: 1fr; padding-right: var(--sp-4); }
  .tk-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-3); }
  .tk-footer__col:last-child { grid-column: 1 / -1; }
  .tk-specs { grid-template-columns: 1fr; }
  .tk-faq__item > summary { padding-left: var(--sp-3); }
  .tk-faq__a { padding: 0 var(--sp-3) var(--sp-3); }
  .tk-spec__head { grid-template-columns: auto 1fr; }
  .tk-spec__head .tk-badge { display: none; }
  .tk-actions .tk-btn { width: 100%; justify-content: space-between; }
  .tk-actions .tk-btn--ghost { justify-content: center; }
  .tk-step, .tk-steps--lg .tk-step { grid-template-columns: 72px minmax(0, 1fr); }
  .tk-step .tk-num, .tk-steps--lg .tk-step .tk-num { width: 56px; height: 56px; font-size: var(--fs-l); box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--accent); }
  .tk-steps::before, .tk-steps::after, .tk-steps--lg::before, .tk-steps--lg::after { left: 27px; }
  .tk-tile__media, .tk-tiles--3 .tk-tile__media { aspect-ratio: 1.45; }
}

/* ---------- ademruimte (v16): rustiger, meer lucht, premiumer ----------
   Feedback van de eigenaar: de site voelt druk aan, alles staat te dicht op elkaar en geeft visuele overweldiging; meer ademruimte voor een
   premium gevoel. De kleuren blijven. Er verandert geen tekst en geen markup: alleen ruimte (tokens, afstanden tussen en in kaarten), een
   rustiger koptype (meer regelafstand, iets kleiner) en minder decor tegelijk. Op 1000 tot 1100px, waar de eigenaar kijkt, blijft de
   inhoudsbreedte vrijwel gelijk: de lucht komt uit hoogte en tussenruimtes, niet uit smallere kolommen. De compacte mobiele paddings
   (onder 560px) blijven zoals ze zijn. Terugzetten: haal dit blok weg. */
:root {
  --tk-gutter: clamp(20px, 4vw, 56px);
  --tk-inset: clamp(10px, 2vw, 28px);
  --tk-seam: clamp(14px, 1.6vw, 22px);
  --tk-pad-y: clamp(72px, 9.5vw, 136px);
  --tk-max: 1140px;
  --tk-fs-h2: clamp(28px, 3.9vw, 48px);
  --tk-fs-h3: clamp(19px, 2vw, 24px);
  --tk-fs-lead: clamp(18px, 1.6vw, 20px);
  --tk-card-pad: clamp(28px, 3.4vw, 44px);       /* ruime kaart: tekstkaarten, zorgkaarten, kooppaneel */
  --tk-card-pad-s: clamp(24px, 2.8vw, 36px);     /* kaart in een rij van drie of vier: smaller, de breedte blijft leesbaar */
  --tk-gap: clamp(16px, 2.2vw, 28px);            /* tussen kaarten */
  --tk-gap-lg: var(--sp-7);                      /* tussen twee kolommen met tekst en beeld */
}
body { line-height: var(--lh-b); }
.tk-h1 { line-height: var(--lh-d); font-size: var(--fs-h1); font-size: var(--fs-h1); }
.tk-h1--xl { font-size: var(--fs-h1); font-size: var(--fs-num); }
.tk-h2 { line-height: var(--lh-d); }
.tk-lead { line-height: var(--lh-b); }
.tk-text > * + * { margin-top: 1.2em; }
.tk-label + .tk-h1, .tk-label + .tk-h2 { margin-top: var(--sp-4); }
.tk-hero__copy .tk-h1, .tk-subhero .tk-hero__copy .tk-h1 { margin: var(--sp-4) 0 var(--sp-5); }
.tk-hero__copy .tk-lead { max-width: 44ch; }
.tk-hero { padding-top: calc(var(--tk-header-h) + 12px + clamp(40px, 5.2vw, 72px)); padding-bottom: calc(var(--tk-overlap) + clamp(40px, 5vw, 72px)); }
.tk-hero--flat { padding-bottom: var(--tk-pad-y); }
.tk-hero__grid { gap: var(--sp-8); }
.tk-facts { gap: var(--sp-3); margin-top: var(--sp-7); }
.tk-facts > div { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.tk-head { gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-8); }
.tk-split, .tk-over, .tk-faq { gap: var(--tk-gap-lg); }
.tk-statement { gap: var(--sp-7); padding: var(--sp-7); }
.tk-statement-wrap { padding-bottom: var(--sp-7); }
.tk-statement__text { line-height: var(--lh-b); }
.tk-tiles { gap: var(--sp-4); }
.tk-cols, .tk-stats, .tk-props, .tk-steps, .tk-steps--3, .tk-ghosts, .tk-compare, .tk-compare--duo { gap: var(--tk-gap); }
.tk-faq__list { gap: var(--sp-3); }
.tk-prop .tk-h3 { font-size: var(--fs-l); }
/* decor: een rustiger beeld. De rode stip op de stage en een deel van het patroon vallen weg; de sticker, de rol-cirkel en de naad-stempel blijven. */
.tk-hero__stage > .tk-dot { display: none; }
.tk-hero__bg .tk-pattern { --o: .1; }
.tk-hero__bg .tk-watermark { --o: .05; }
@media (max-width: 559px) { .tk-hero__bg .tk-pattern { --o: .08; } }
@media (min-width: 560px) {
  .tk-quicknav { gap: var(--tk-gap); }
  .tk-card:where(:not(.tk-spec, .tk-ref, .tk-duo, .tk-confirm)) { padding: var(--tk-card-pad); }   /* kaarten met een eigen opbouw (kop tot de rand, spook- en bevestigingskaart) houden hun eigen padding */
  .tk-numcard { padding: var(--tk-card-pad); gap: var(--sp-3); }
  .tk-stat { padding: var(--tk-card-pad-s); gap: var(--sp-3); }
  .tk-prop { padding: var(--tk-card-pad-s); gap: var(--sp-3); }
  .tk-quick { padding: var(--tk-card-pad-s); gap: var(--sp-3); }
  .tk-step__card { padding: var(--tk-card-pad-s); gap: var(--sp-3); }
  .tk-care { padding: var(--tk-card-pad); gap: var(--sp-4); }
  .tk-care__head { margin: calc(var(--tk-card-pad) * -1) calc(var(--tk-card-pad) * -1) 0; padding: var(--sp-3) var(--sp-4); }
  .tk-care__list { gap: var(--sp-3); }
  .tk-buy { padding: var(--tk-card-pad); }
  .tk-form { padding: var(--sp-7); }
  .tk-order { padding: var(--tk-card-pad); }
  .tk-duo { padding: var(--sp-7); }
  .tk-faq__item > summary { padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); }
  .tk-faq__a { padding: 0 var(--sp-5) var(--sp-5); }
}

/* ademruimte per pagina */
/* Fijnslijpen na de globale laag (v16): per pagina wat nog krap, druk of onrustig was. Alleen ruimte, maat en zachtere decor-intensiteit; geen
   tekst, geen markup, geen kleuren. Elke regel heeft een smalle selector (een pagina-id, een sectie of een componentvariant). Terugzetten: haal dit
   blok weg. Het blok groeit per groep paginas; elke groep zet haar eigen kop eronder. */

/* --- gedeeld, door meerdere pagina's bevestigd (Home, Sportwagen): FAQ-rijen, feitenrij in de hero --- */
/* FAQ: 14px tussen rijen is voor een kaartrij te krap (de eis is 20px) en de kop stond 18px van de rand van de kaart (de eis is 24px). */
.tk-faq__list { gap: var(--sp-4); }
.tk-faq__item > summary { padding-block: var(--sp-4); }
.tk-faq__a { padding-bottom: var(--sp-5); }
@media (min-width: 560px) {
  .tk-faq__item > summary { padding-block: var(--sp-4); }
  .tk-faq__a { padding-bottom: var(--sp-5); }
}
/* feitenrij onder de hero: 17,6px tussen de drie kaartjes op 1100px, nu 22px (16px op mobiel). */
.tk-facts { gap: var(--sp-4); }

/* --- Home (index.html) --- */
/* Hero: de ring-sticker en de rol-cirkel hingen op 132 en 120px aan de rand van het beeld, samen met de grote achtergrondcirkel en (op 800px hoog) de
   10-jaar-stempel eronder vier ronde dingen in het eerste scherm. De twee stickers worden iets kleiner en de achtergrondcirkel zakt weg achter het beeld. */
@media (min-width: 560px) {
  #top .tk-hero__stage > .tk-sticker { --s: 112px; }
  #top .tk-hero__stage > .tk-circle--b { --d: 100px; }
}
@media (min-width: 1000px) {
  #top .tk-hero__stage .tk-circle--a { --d: 76%; right: -18%; top: -18%; }
}
/* Producten (past in 100vh): de kop kreeg 3svh (24px op 800px hoog), de eis voor desktop is 40px. De extra ruimte komt uit de hoogte van de tegel
   (52svh wordt 50svh): de sectie wordt niet hoger. De cirkel achter de doos was een ellips (290 bij 259px, de breedte en de maximale hoogte
   botsten): nu rond en op 84% van de hoogte, zodat de rode balk eronder 10px of meer lucht krijgt. */
@media (min-width: 720px) {
  .tk-products .tk-head { margin-bottom: clamp(24px, 5svh, 40px); }
  .tk-products .tk-tile { height: clamp(318px, 50svh, 440px); }
  .tk-products .tk-tile__info { padding-bottom: var(--sp-5); }
}
.tk-products .tk-tile__media::before { width: auto; height: 84%; max-height: none; }
/* Over Takumi: het watermerk lag achter het label en de eerste regels van de grote tekst (decor dat tekst raakt): zachter. Op mobiel zijn de
   ring-sticker en de lege ruimte eromheen te groot voor een versiering. */
#over .tk-plate__deco .tk-watermark { opacity: .05; }
@media (max-width: 559px) {
  #over .tk-over__art { min-height: 0; }
  #over .tk-over__art .tk-sticker { width: 164px; height: 164px; }
}

/* --- Sportwagen (sportwagen-supercar-beschermen.html) --- */
/* Kop met inleiding: de lead stond op 79 tekens per regel (de eis is hoogstens 75). */
.tk-head > .tk-lead { max-width: 46ch; }
/* Onderdelen (4-koloms bento): op 1000 tot 1199px is een kaart 150 tot 190px breed. De padding wordt 24px (was 28 tot 34): de kolommen blijven, de tekst
   krijgt 8 tot 10px breedte erbij. Hetzelfde voor de vier stappen. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .tk-props .tk-prop { padding: var(--sp-4); }
  .tk-steps:not(.tk-steps--lg) .tk-step__card { padding: var(--sp-4); }
}
@media (max-width: 559px) {
  .tk-props .tk-prop, .tk-steps .tk-step__card { padding: var(--sp-4); }
}
/* Drie keuzetegels: de cirkel achter de rol was een ellips (234 bij 195px) en de rode balk zat 9px onder de ring. Nu rond (82% van de hoogte), met een
   dunnere ring; de lead krijgt een leesbare regellengte (op 768px stond hij op 84 tekens) en 20px lucht boven de knop (was 14px). */
.tk-tiles--3 .tk-tile__media::before { width: auto; height: 82%; max-height: none; box-shadow: 0 0 0 8px var(--tile-ring); }
.tk-tiles--3 .tk-tile__lead { max-width: 52ch; margin-bottom: var(--sp-3); }
.tk-tiles--3 .tk-tile__cta { margin-bottom: var(--sp-5); }
@media (max-width: 559px) {
  .tk-tiles--3 .tk-tile__info { padding-inline: var(--sp-4); }
  .tk-tiles--3 .tk-tile__lead { padding-inline: var(--sp-4); }
  .tk-tiles--3 .tk-tile__cta { margin-inline: var(--sp-4); }
}

/* ---------- verbonden (v17): blokken die aansluiten, strakke hoeken ----------
   Feedback van de eigenaar: "geen fan van de div's die niet met elkaar verbonden zijn en allemaal afgeronde hoeken hebben". Daarom: platen lopen van
   rand tot rand en sluiten op elkaar aan (geen marge, naad, overlap of lap), kaarten in een rij vormen een mozaiek met een haarlijn ertussen (2px),
   alle blokken hebben rechte hoeken, de kop is een doorlopende balk en de lopende band een rechte strook. Rond blijven alleen de merkcirkels
   (stickers, 匠-ring, badges, rol op cirkel) als bewust tegenwicht; knoppen, velden en labels krijgen een bijna rechte hoek (4px). Dit blok vervangt
   de tussenruimtes uit de ademruimte-laag (v16): de lucht zit in de padding, niet in losse vakjes. Terugzetten: haal dit blok weg. */
:root {
  --tk-r-1: 4px; --tk-r-2: 6px; --tk-r-3: 8px; --tk-r-4: 10px; --tk-r-5: 12px; --tk-r-6: 0px;   /* inner blokken en de vergelijking: kleine radius; platen (secties): recht */
  --tk-r-ctl: 4px;
  --tk-inset: 0px; --tk-seam: 0px; --tk-lap: 0px; --tk-overlap: 0px;
  --tk-cell: var(--sp-2); --tk-gap: var(--sp-2);   /* ruimte tussen blokken in een rij: 8px */
  --tk-max: 1800px; --tk-gutter: clamp(20px, 5vw, 120px);   /* minimaal 5vw zijpadding, de site is maximaal 1800px breed */
  --tk-lift: none; --tk-lift-lg: none;
  --tk-nav-shadow: 0 1px 0 rgba(7, 24, 60, .16);
}
/* platen: rand tot rand, rechte hoeken */
.tk-plate, .tk-plate--inset { margin-inline: 0; border-radius: 0; }
main > .tk-plate:first-child { margin-top: 0; }
.tk-footer { margin-bottom: 0; }
.tk-band--tape { padding-bottom: var(--sp-8); }
.tk-footer--tape { padding-top: var(--sp-8); }
/* de kop: een doorlopende balk bovenaan in plaats van een zwevende pil */
.tk-header { inset: 0 0 auto 0; }
.tk-header__bar { width: 100%; border-radius: 0; padding-inline: calc(var(--tk-gutter) + max(0px, (100vw - var(--tk-max)) / 2)); }
.tk-header.is-floating .tk-header__bar, .tk-header.is-open .tk-header__bar { border-radius: 0; }
.tk-panel { top: var(--tk-header-h); border-radius: 0; }
.tk-mobile { top: var(--tk-header-h); left: 0; width: 100%; max-width: none; border-radius: 0; transform: translateY(-8px); }
.tk-mobile.is-open { transform: none; }
/* knoppen, velden, labels en schakelaars: bijna recht */
.tk-skip, .tk-label--chip, .tk-btn, .tk-feature__meta span, .tk-sticker--pill, .tk-crumbs a, .tk-crumbs [aria-current="page"], .tk-chip, .tk-pill,
.tk-tile__cta, .tk-prop__val b, .tk-toggle, .tk-toggle a, .tk-toggle span, .tk-segment, .tk-segment > label > span, .tk-footer__col a, .tk-vals__p,
.tk-step__card .tk-pill, .tk-input, .tk-select, .tk-textarea, .tk-ph, .tk-nav__link, .tk-panel__col a, .tk-mobile a:not(.tk-btn), .tk-burger, .tk-logo,
.tk-btn::after, .tk-link::after, .tk-tape__btn, .tk-stage__pause, .tk-tile__go, .tk-icon, .tk-dl__pdf, .tk-dl__go, .tk-faq__item > summary::after { border-radius: var(--tk-r-ctl); }
.tk-mark, .tk-text strong.tk-mark, .tk-statement__text strong { border-radius: 2px; }
.tk-check input { border-radius: var(--tk-r-ctl); }
.tk-table--cmp thead th:nth-child(3) { border-radius: var(--tk-r-5) var(--tk-r-5) 0 0; }
.tk-table--cmp tbody tr:last-child > td:nth-child(3) { border-radius: 0 0 var(--tk-r-5) var(--tk-r-5); }
.tk-tape, .tk-footer__legal, .tk-dl__row, .tk-contact__row, .tk-empty__steps li, .tk-ghost::after { border-radius: 0; }
/* kaarten in een rij: een mozaiek met een haarlijn ertussen, zonder lift of golf */
.tk-tiles, .tk-facts, .tk-faq__list, .tk-cols, .tk-stats, .tk-props, .tk-steps, .tk-steps--3, .tk-ghosts, .tk-compare, .tk-compare--duo, .tk-values, .tk-quicknav { gap: var(--tk-cell); }
.tk-wave { --tk-wave-lift: 0px; --tk-wave-rot: 0deg; }
.tk-numcard--accent { top: 0; }
.tk-cols--wave > .tk-numcard:nth-child(n) { margin-top: 0; }
.tk-tile:hover, .tk-tile:focus-visible { transform: none; box-shadow: none; }
.tk-quicknav:not(.tk-wave) .tk-quick:hover { transform: none; }
/* geen rode balkjes en streepjes meer: het label, de paneelkop, de footerkop, de tegel en de actieve navigatie blijven zonder lijn */
.tk-bar, .tk-label::before, .tk-panel__t::before, .tk-footer__t::before, .tk-quick__label::after, .tk-tile__info::after, .tk-tile__dl::after,
.tk-nav__link[aria-current="page"]::after, .tk-nav__link.is-on::after, .tk-mobile a[aria-current="page"]::after, .tk-facts dt::before { display: none; }
/* hero zonder animatie: een kleine placeholder (de hero-animatie is weg; een echte foto volgt) */
.tk-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); width: 100%; max-width: 440px; aspect-ratio: 4 / 3; margin-inline: auto 0;
  border: 2px dashed rgba(229, 229, 230, .5); border-radius: var(--tk-r-4); color: rgba(229, 229, 230, .82); background: rgba(229, 229, 230, .06);
  font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: var(--ls-l); text-transform: uppercase;
}
.tk-placeholder::before {
  content: ""; width: 44px; height: 36px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='40' height='32' rx='3'/%3E%3Ccircle cx='14' cy='12' r='4'/%3E%3Cpath d='M2 28l12-10 9 8 7-6 12 10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='40' height='32' rx='3'/%3E%3Ccircle cx='14' cy='12' r='4'/%3E%3Cpath d='M2 28l12-10 9 8 7-6 12 10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tk-plate--white .tk-placeholder { border-color: rgba(60, 65, 66, .4); color: rgba(60, 65, 66, .8); background: rgba(60, 65, 66, .05); }
.tk-hero__stage > .tk-circle, .tk-hero__stage > .tk-dot, .tk-hero__stage > .tk-sticker { display: none; }
/* Kort gezegd: een doorlopende strook onder de hero, geen zwevende kaart */
.tk-statement-wrap { margin: 0; padding: 0; background: #fff; }
.tk-statement-wrap > .tk-container { padding-inline: var(--tk-gutter); }
.tk-statement { position: static; padding: var(--tk-pad-y) 0; background: transparent; }
/* Kort gezegd: geen label met vierkantjes en geen 10-jaar-stempel meer; de tekst staat als blok in het midden. De kop blijft in de pagina (visueel verborgen)
   voor schermlezers en aria-labelledby. De usp-strook eronder blijft over de volle breedte. */
.tk-statement { grid-template-columns: minmax(0, 1fr); }
.tk-statement__side {
  position: absolute; width: 1px; height: 1px; max-width: 1px; max-height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tk-statement__body { max-width: 920px; margin-inline: auto; }   /* 34em van de tekst op 27px */
/* lopende band: een rechte strook tussen twee platen */
.tk-tape { margin: 0; transform: none; }

/* verbonden per pagina */
/* Controle na v17, per groep paginas: alleen wat na de nieuwe opzet (rechte platen, mozaiek, 5vw tot 1800px) nog afweek. Restanten van de oude opzet, lege
   plekken door de weggehaalde hero-animatie en balkjes, regels die op de bredere pagina te lang worden. Geen tekst, geen markup. Het blok groeit per groep. */

/* --- Home en Sportwagen (dezelfde fout op beide, daarom gedeeld) --- */
/* Hero-placeholder: 440px vast in een kolom van 605 (1440) tot 766px (1800) liet een gat van 230 tot 400px tussen tekst en beeld. Hij groeit mee tot 580px (op 1100px blijft
   hij 440px, de kolom). Gestapeld (onder 1000px) stond hij rechts in een kolom van 600px terwijl de tekst links staat en bleef er 40px lucht onder voor de cirkel
   en sticker die niet meer bestaan: nu links uitgelijnd, breed en laag (16:9), zonder die ruimte. */
.tk-hero__stage > .tk-placeholder { max-width: min(100%, max(440px, 33vw), 580px); }
@media (max-width: 999px) {
  .tk-hero__stage { margin-bottom: 0; }
  .tk-hero__stage > .tk-placeholder { max-width: none; margin-inline: 0; aspect-ratio: 16 / 9; }
}
/* Feitenrij onder de hero: 20px kaartpadding is op desktop te weinig (de eis is 28px). */
.tk-facts > div { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
@media (min-width: 1000px) { .tk-facts > div { padding: var(--sp-5) var(--sp-5) var(--sp-5); } }
/* FAQ: de open rij draaide het 44px-vlak 45 graden. Met een rechte hoek werd dat een ruit die buiten de kaart stak. Open toont nu een min (sluiten) in rood, zonder
   draaiing. De kolom met antwoorden werd 85 tekens breed (60ch is in dit lettertype 85 tekens): 52ch is er 73. Padding links en rechts gelijk (30px, rechts was 18px). */
.tk-faq__item[open] > summary::after { transform: none; background: linear-gradient(#fff, #fff) center / 16px 3px no-repeat, var(--tk-red); }
.tk-faq__a p { max-width: 52ch; }
@media (min-width: 560px) {
  .tk-faq__item > summary { padding-inline: var(--sp-5); }
  .tk-faq__a { padding-inline: var(--sp-5); }
}
@media (min-width: 1000px) { .tk-faq__item > summary { padding-block: var(--sp-5); } }   /* een rij is een kaart: op desktop minstens 28px boven en onder het 44px-vlak */

/* Knoppen en links zweven niet meer bij hover (de lift van 3 tot 4px bleef over van de oude opzet, nu zonder schaduw een los sprongetje); kleur en pijl blijven. */
.tk-btn:hover, .tk-feature:hover { transform: none; }
/* Raakvlak van minstens 44px zonder dat het beeld verandert: navigatielinks stonden op 40px, footerlinks op 42px, de juridische links op 28px, het logo op 28px en de
   kruimel-Home op 32px. De uitbreiding zit in minimale hoogte of een onzichtbaar vlak (::after), de lay-out verschuift niet. */
.tk-nav__link { min-height: 44px; }
.tk-footer__col a { min-height: 44px; }
.tk-footer__legal a { min-height: 44px; line-height: 44px; margin-block: -8px; }
.tk-logo, .tk-crumbs a { position: relative; }
.tk-logo::after, .tk-crumbs a::after { content: ""; position: absolute; inset: -8px 0; }

/* --- Home --- */
/* Producten: twee schijven achter de dozen zijn al twee ronde vormen in het scherm; de 10-jaar-stempel op de naad eronder was de derde (de eis is hooguit twee).
   De stempel staat al op de heronaad; onder 720px (de tegels onder elkaar) blijft hij staan. */
@media (min-width: 720px) { #producten + .tk-seam .tk-sticker { display: none; } }
/* Producten: de kop stond op 5svh van de sectiekop (32px op 650px hoog, 24px op mobiel), de eis is minstens 40px. De sectie past nog met 40 tot 55px marge in 100vh (gemeten op 1050x650). */
.tk-products .tk-head { margin-bottom: var(--sp-6); }
/* Over Takumi: de alinea onder de grote tekst liep op 95 tekens. */
#over .tk-over__copy > .tk-text { max-width: 52ch; }

/* --- Sportwagen --- */
/* Onderdelen en stappen op 1000 tot 1199px: de kaarten hadden 24px padding (de eis is 28px). Met de nieuwe zijpadding zijn de kaarten breder, de tekst houdt 160 tot 190px. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .tk-props .tk-prop { padding: var(--sp-5); }
  .tk-steps:not(.tk-steps--lg) .tk-step__card { padding: var(--sp-5); }
}

/* --- Producten en Waarom Takumi --- */
/* Producten, vergelijkingstabel: onder 900px is de kolom van een folie 240 tot 270px breed. De knop 'Bekijk Satin Protect' met pijl-chip brak daar op twee regels en
   was hoger dan 'Bekijk Defend+' (ongelijke knoppen in een rij). De pijl-chip valt hier weg, zoals het onder 720px al deed; beide knoppen blijven één regel van 44px. */
@media (max-width: 899px) {
  .tk-table--vs tfoot .tk-btn::after { display: none; }
}
/* Waarom Takumi, vergelijking: de auto-indeling gaf de Takumi-kolom alles wat er over was (745px op 1800, met één regel van 79 tekens en veel lucht rechts) en de andere
   drie kolommen bleven smal. Vaste verhoudingen vanaf 900px: de Takumi-kolom blijft de breedste (benadrukt), de tekst breekt op twee regels en de kolommen staan in evenwicht.
   Het zijn percentages in een tabel met auto-indeling: de minimumbreedte van een kolom (bv. 'Kwaliteitscontrole') blijft gerespecteerd, dus niets loopt over. */
@media (min-width: 900px) {
  #vergelijking .tk-table--cmp thead th:nth-child(1) { width: 19%; }
  #vergelijking .tk-table--cmp thead th:nth-child(2) { width: 25%; }
  #vergelijking .tk-table--cmp thead th:nth-child(3) { width: 32%; }
  #vergelijking .tk-table--cmp thead th:nth-child(4) { width: 24%; }
}
/* Regellengte (de eis is hoogstens ongeveer 75 tekens; gemeten per regel op 1440 en 1800): de toelichting onder de tabel liep op 119 tekens (80ch is bij 14,5px te breed),
   het verhaal op 88 (58ch bij 17px), de korte tekst bij de twee folies op 101 en de FAQ-antwoorden op 83 (52ch bij 16,5px). Alleen max-width, geen andere wijziging.
   De toelichting (.tk-tablenote) en de FAQ-antwoorden (.tk-faq__a p) zijn gedeelde regels: dezelfde te lange regel stond ook op Defend+ en Satin Protect. */
.tk-tablenote { max-width: 50ch; }
.tk-over--rev .tk-over__copy .tk-text { max-width: 49ch; }
.tk-tiles--info .tk-tile__lead { max-width: 52ch; }
.tk-faq__a p { max-width: 47ch; }   /* gedeeld: op Waarom Takumi, Defend+ en Satin Protect liep het op 78 tot 83 tekens */
/* Waarom Takumi, de twee folies: de binnenpadding van een tegel volgt 2,6vw (26px op 1000px, pas 28px vanaf 1077px). Op desktop is de eis minstens 28px. */
@media (min-width: 1000px) {
  .tk-tiles--info .tk-tile__info, .tk-tiles--info .tk-tile__lead, .tk-tiles--info .tk-tile__dl { padding-inline: var(--sp-5); }
}
/* Verhaal: met de smallere kolom brak het label 'twintig jaar' midden in de markering over twee regels. Twee woorden blijven bij elkaar. */
#verhaal .tk-text strong.tk-mark { white-space: nowrap; }

/* ---------- vergelijkingstabel producten (#naast-elkaar): label | Defend+ | Satin Protect ----------
   Eén tabel in plaats van twee losse lijsten: de rijen lopen gelijk, de kolomkoppen zijn de twee folies, de waarden die verschillen staan vet en
   donker en de kolommen hebben een lichte tint (blauw bij Defend+, grijs bij Satin Protect). Op smalle schermen blijft het één tabel: de kop
   verliest rol en badge, de labelkolom wordt smaller. */
.tk-vs.tk-tablecard { padding: 0; overflow: hidden; overflow: clip; border-radius: var(--tk-r-5); }
.tk-vs .tk-tablecard__scroll { border-radius: 0; }
.tk-vs.tk-tablecard::after { top: 0; right: 0; bottom: 0; border-radius: 0; }
.tk-table--vs { min-width: 0; table-layout: fixed; font-size: var(--fs-s); }
.tk-table.tk-table--vs thead th:first-child { width: 27%; padding: 0; background: #fff; }
.tk-table.tk-table--vs thead th.tk-vs__head { padding: 0; vertical-align: middle; white-space: normal; text-transform: none; letter-spacing: 0; background: var(--tk-blue); color: var(--tk-white); }
.tk-table.tk-table--vs thead th.tk-vs__head--mat { background: var(--tk-graphite); }
.tk-vs__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 124px; padding: var(--sp-3) var(--sp-5); }
.tk-vs__in .tk-spec__img { display: none; }
.tk-vs__in .tk-spec__name { font-size: var(--fs-xl); }
.tk-vs__in .tk-badge { width: 56px; height: 56px; box-shadow: 0 0 0 3px rgba(229, 229, 230, .25); }
.tk-vs__in .tk-badge b { font-size: var(--fs-l); }
.tk-vs__in .tk-badge span { font-size: var(--fs-xs); margin-top: 2px; }
.tk-vs__head--mat .tk-spec__name small { color: var(--tk-silver); }
.tk-table.tk-table--vs tbody tr:nth-child(n) > * { padding: var(--sp-3) var(--sp-5); background: #fff; border-top: 1px solid var(--tk-gray-100); border-radius: 0; }
.tk-table.tk-table--vs tbody tr:first-child > * { border-top: 0; }
.tk-table.tk-table--vs tbody th { white-space: normal; font-weight: var(--fw-b); color: var(--tk-gray-900); overflow-wrap: anywhere; hyphens: auto; }
.tk-table.tk-table--vs tbody td { font-weight: var(--fw-r); color: var(--tk-gray-600); }
.tk-table.tk-table--vs tbody tr:nth-child(n) > td:nth-child(2) { background: var(--tk-blue-50); }
.tk-table.tk-table--vs tbody tr:nth-child(n) > td:nth-child(3) { background: var(--tk-gray-50); }
.tk-table.tk-table--vs tbody td.diff { font-weight: var(--fw-h); color: var(--tk-gray-900); }
.tk-table.tk-table--vs tbody td.diff:nth-child(2) { color: var(--tk-blue-700); }
.tk-table--vs tfoot td { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--tk-gray-100); background: #fff; vertical-align: middle; }
.tk-table--vs tfoot td:nth-child(2) { background: var(--tk-blue-50); }
.tk-table--vs tfoot td:nth-child(3) { background: var(--tk-gray-50); }
.tk-table--vs tfoot .tk-btn { white-space: normal; text-align: left; }
@media (min-width: 1280px) {
  .tk-vs__in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tk-vs__in .tk-spec__img { display: grid; }
}
@media (max-width: 719px) {
  .tk-table--vs { font-size: var(--fs-s); }
  .tk-table.tk-table--vs thead th:first-child { width: 28%; }
  .tk-vs__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: var(--sp-3) var(--sp-2); }
  .tk-vs__in .tk-badge { display: none; }
  .tk-vs__in .tk-spec__name { font-size: var(--fs-m); }
  .tk-vs__in .tk-spec__name small { font-size: var(--fs-xs); letter-spacing: var(--ls-l); }
  .tk-table.tk-table--vs tbody tr:nth-child(n) > * { padding: var(--sp-3) var(--sp-2); }
  .tk-table--vs tfoot td { padding: var(--sp-3) var(--sp-2); }
  .tk-table--vs tfoot .tk-btn { width: 100%; min-width: 0; max-width: 100%; justify-content: flex-start; padding: var(--sp-2) var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-h); }
  .tk-table--vs tfoot .tk-btn::after { display: none; }   /* de pijl-chip is breder dan de kolom van 120px */
}
@media (max-width: 359px) { .tk-table--vs { min-width: 320px; } }

/* ---------- ondersteuning en footer (v17c) ----------
   Snelkeuze: een lichte rand, zodat de zes vakken niet zweven. Eigenschappen bij het plaatsen: een simpele tabel (kop met de twee folies, daaronder
   rijen met hooguit een label en twee waarden). Footer: het kleine logo staat bij de Japanse tekens, de grote contourtekst en het grote woordmerk zijn weg
   (ook uit de markup), de onderste balk is een gewone strook met een haarlijn en geen donkerblauw vlak. */
.tk-quicknav .tk-quick { border: 1px solid var(--tk-gray-200); }
.tk-quicknav .tk-quick:hover { border-color: var(--tk-blue-300); }
.tk-table.tk-table--simple { min-width: 0; font-size: var(--fs-m); }
.tk-table.tk-table--simple thead th { padding: 0 0 var(--sp-3); font-size: var(--fs-xs); letter-spacing: var(--ls-l); color: var(--tk-gray-600); background: transparent; vertical-align: bottom; white-space: normal; }
.tk-table.tk-table--simple tbody tr:nth-child(n) > * { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; background: transparent; border-top: 1px solid var(--tk-gray-100); border-radius: 0; }
.tk-table.tk-table--simple tbody th { width: 44%; font-weight: var(--fw-b); color: var(--tk-gray-700); white-space: normal; }
.tk-table.tk-table--simple tbody td { font-weight: var(--fw-h); color: var(--tk-gray-900); font-variant-numeric: tabular-nums; }
.tk-footer { padding-bottom: var(--sp-6); }
.tk-footer__brand { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.tk-footer__logo { flex: none; width: 132px; height: auto; }
.tk-footer .tk-tagline { margin: 0; padding-left: var(--sp-4); border-left: 1px solid rgba(229, 229, 230, .3); }
@media (max-width: 479px) { .tk-footer .tk-tagline { padding-left: 0; border-left: 0; } }
@media (min-width: 1100px) { .tk-footer__top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); } }   /* de linkkolommen krijgen meer ruimte: 'Sportwagen beschermen' past op een regel */
@media (min-width: 1440px) { .tk-footer__col a { white-space: nowrap; } }
.tk-footer__legal { margin-top: var(--sp-7); padding: var(--sp-4) 0 0; border-top: 1px solid rgba(229, 229, 230, .22); border-radius: 0; background: transparent; gap: var(--sp-2) var(--sp-5); color: rgba(229, 229, 230, .85); }

/* Referenties en Waarom Takumi (v17d): de melding van de lege staat staat op de blauwe plaat zelf, zonder eigen kaart; de spookkaarten krijgen daar een
   diepblauwe tint. */
.tk-plate--blue .tk-ghost { background: var(--tk-blue-700); }
.tk-plate--blue .tk-ghost::before { opacity: .22; }

/* ---------- systeem (v18): vaste schalen en vaste klassen ----------
   Feedback van de eigenaar: het ontwerp voelt nog druk aan (cognitieve overload) doordat spacing en lettertypes per sectie verschillen. Daarom:
   een vaste ruimteschaal (4, 8, 16, 24, 32, 48, 64, 96), een vaste typeschaal (13, 14, 16, 20, 24, 40, 60 en een cijfermaat), drie lettergewichten
   (400, 700, 800), vier regelhoogtes en twee letterafstanden. Alle ruimtes en lettergroottes in dit bestand verwijzen naar deze tokens
   (var(--sp-n), var(--fs-x), var(--fw-x), var(--lh-x), var(--ls-x)); ontwerp je iets nieuws, kies dan uit deze schaal. Op kleinere schermen
   verkleinen de grote ruimtes (24 tot 96) en de grote koppen vanzelf. Eén sectie-ritme: elke sectie heeft dezelfde padding (96, op tablet en mobiel 64)
   en de kop staat 48 (32) boven de inhoud. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;
  --fs-xs: 13px; --fs-s: 14px; --fs-m: 16px;
  --fs-l: clamp(18px, 1.4vw, 20px);
  --fs-xl: clamp(20px, 1.8vw, 24px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h1: clamp(34px, 4.4vw, 60px);
  --fs-num: clamp(52px, 6vw, 80px);
  --fw-r: 400; --fw-b: 700; --fw-h: 800;
  --lh-d: 1.05; --lh-h: 1.15; --lh-s: 1.3; --lh-b: 1.6;
  --ls-h: -.01em; --ls-l: .08em;
  --tk-pad-y: var(--sp-8); --tk-card-pad: var(--sp-5); --tk-card-pad-s: var(--sp-5);
  --tk-fs-text: var(--fs-m); --tk-fs-lead: var(--fs-l); --tk-fs-h2: var(--fs-h2); --tk-fs-h3: var(--fs-l);
}
@media (max-width: 999px) { :root { --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; } }
body { font-size: var(--fs-m); line-height: var(--lh-b); font-weight: var(--fw-r); }
/* typografie: vaste klassen */
.tk-h1, .tk-h1--xl { font-size: var(--fs-h1); font-size: min(var(--fs-h1), 9.6cqi); font-weight: var(--fw-h); line-height: var(--lh-d); letter-spacing: var(--ls-h); }
.tk-h1--panel { font-size: var(--fs-h2); font-size: min(var(--fs-h2), 11cqi); }
.tk-h2 { font-size: var(--fs-h2); font-weight: var(--fw-h); line-height: var(--lh-h); letter-spacing: var(--ls-h); }
.tk-h3 { font-size: var(--fs-l); font-weight: var(--fw-h); line-height: var(--lh-s); letter-spacing: 0; }
.tk-lead { font-size: var(--fs-l); font-weight: var(--fw-r); line-height: var(--lh-b); }
.tk-label { font-size: var(--fs-xs); font-weight: var(--fw-b); line-height: var(--lh-s); letter-spacing: var(--ls-l); text-transform: uppercase; }
.tk-note, .tk-tablenote { font-size: var(--fs-s); line-height: var(--lh-b); }
.tk-light, .tk-h2 em, .tk-h2 .tk-light, .tk-h1 .tk-light { font-weight: inherit; }
/* geen contourtekst meer (de lopende band en de grote claim): rechtlijnig, alleen gevulde letters */
.tk-outline, .tk-tape__t--o { display: none; }
/* sectie-ritme: overal dezelfde padding, dezelfde afstand van kop naar inhoud */
.tk-plate { padding-block: var(--sp-8); }
.tk-plate--tight { padding-block: var(--sp-7); }
.tk-hero { padding-top: calc(var(--tk-header-h) + var(--sp-6)); padding-bottom: var(--sp-8); }
.tk-band, .tk-band--tape { padding-block: var(--sp-8); }
.tk-footer { padding-block: var(--sp-8) var(--sp-5); }
.tk-footer--tape { padding-top: var(--sp-8); }
.tk-head { margin-bottom: var(--sp-6); }
.tk-statement { padding-block: var(--sp-8); }
/* kaarten: dezelfde padding en dezelfde ruimte tussen de onderdelen in een kaart */
.tk-numcard, .tk-stat, .tk-prop, .tk-quick, .tk-step__card, .tk-care, .tk-duo, .tk-buy { gap: var(--sp-3); }
/* stickers op een naad horen bij grote schermen: op tablet en mobiel raken ze de kop van de sectie eronder */
@media (max-width: 999px) { .tk-seam .tk-sticker { display: none; } }

/* ---------- foto's van echte realisaties (v18) ----------
   Eén vaste fotocomponent: een raster van drie foto's (tk-photos) met per foto een placeholder en een bijschrift tussen haakjes dat de klant invult
   ([Merk model], [onderdeel]). Een losse foto (tk-photo) kan naast tekst staan. Echte foto's vervangen de placeholder (<img> in plaats van
   <div class="tk-placeholder">), met dezelfde verhouding (4:3, of 4:5 staand). */
.tk-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tk-gap); }
.tk-photo { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tk-photo .tk-placeholder, .tk-photo > img { width: 100%; max-width: none; margin-inline: 0; aspect-ratio: 4 / 3; border-radius: var(--tk-r-4); object-fit: cover; }
.tk-photo .tk-placeholder--portrait { aspect-ratio: 4 / 5; }
.tk-photo__cap { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink-2, var(--tk-gray-600)); }
.tk-over__art > .tk-photo { width: 100%; }
@media (max-width: 719px) { .tk-photos { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* productnamen (tegel, vergelijkingskop, kooppaneel) zijn één niveau: 24 */
.tk-tile__name, .tk-tile__name--sm { font-size: var(--fs-xl); }

/* ---------- recht en rustig (v18c): geen scheve labels, geen draaiende hover ----------
   Feedback: de scheve labels in de hoek van de listings zijn niet proper; de site mag dynamisch zijn maar niet speels. Alle stickers (pill, stempel,
   ring) staan recht via --tk-sticker-tilt: 0deg (--tk-tilt blijft voor de snede). De pijl en het beeld van een tegel draaien niet meer bij hover. */
.tk-tile:hover .tk-tile__go, .tk-tile:focus-visible .tk-tile__go { transform: translateX(var(--sp-1)); }
.tk-tile:hover .tk-tile__a:only-of-type, .tk-tile:focus-visible .tk-tile__a:only-of-type { transform: none; }

/* ---------- statement met vaste kop (v18c): kop links blijft staan, de waarden schuiven er rechts langs ----------
   Vervangt de drie cirkels (tk-orbs). Vanaf 1000px staat de kop sticky onder de kopbalk; de waarden zijn hoge kaarten in een mozaiek van 8px.
   Onder 1000px staat alles onder elkaar en is niets sticky. Geen overflow op de ouders (tk-plate gebruikt overflow: clip), anders werkt sticky niet. */
.tk-sticky { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); align-items: start; }
.tk-sticky__head { position: sticky; top: calc(var(--tk-header-h) + var(--sp-6)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.tk-sticky__head .tk-actions { margin-top: var(--sp-3); }
.tk-values { display: grid; gap: var(--tk-cell); }
.tk-value { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); min-height: min(52svh, 440px); }
.tk-value__num { font-size: var(--fs-num); font-weight: var(--fw-h); letter-spacing: var(--ls-h); line-height: var(--lh-d); color: var(--head); font-variant-numeric: tabular-nums lining-nums; }
.tk-value__title { font-size: var(--fs-xl); font-weight: var(--fw-h); line-height: var(--lh-s); letter-spacing: 0; color: var(--head); max-width: 28ch; text-wrap: balance; }
.tk-value__sub { margin-top: var(--sp-2); max-width: 52ch; font-size: var(--fs-m); line-height: var(--lh-b); color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 999px) {
  .tk-sticky { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .tk-sticky__head { position: static; }
  .tk-value { min-height: 0; }
}

/* ---------- geen lichtgrijs vlak (v18d) ----------
   De eigenaar: gebroken wit (Mist) en lichtgrijs (Silver) mogen geen vlak zijn. Platen zijn blue, graphite, white of red; kaarten en tegels op een
   donkere plaat zijn wit; op een witte plaat zijn ze wit met een haarlijn (outline binnen de rand, ook zichtbaar boven afbeeldingen). */
.tk-plate--white :is(.tk-card, .tk-tile--gloss, .tk-tile--white, .tk-step__card):not(.tk-card--blue, .tk-card--graphite, .tk-card--red) {
  outline: 1px solid var(--tk-gray-100); outline-offset: -1px;
}

/* ---------- carrousel (v18e): één foto tegelijk, swipe of pijlen ----------
   Voor de productgalerij (Defend+ en Satin Protect) in plaats van drie gestapelde foto's. Zonder JavaScript blijft de baan swipe- en toetsenbordbaar
   (scroll-snap); de pijlen en bolletjes verschijnen pas met .tk-js. Vanaf 1000px vult de baan de hoogte van het kooppaneel, eronder is ze 4:3. */
.tk-carousel { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tk-carousel__track {
  flex: 1 1 auto; display: flex; gap: var(--tk-gap); min-height: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--tk-r-4);
}
.tk-carousel__track::-webkit-scrollbar { display: none; }
.tk-carousel__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tk-carousel__slide { flex: 0 0 100%; min-width: 0; display: grid; scroll-snap-align: start; scroll-snap-stop: always; border-radius: var(--tk-r-4); overflow: hidden; }
.tk-carousel__slide > .tk-placeholder, .tk-carousel__slide > .tk-stage { width: 100%; height: 100%; min-height: 0; max-width: none; margin: 0; aspect-ratio: auto; border-radius: 0; }
/* pijlen links en rechts midden op de foto, bolletjes onderaan in een witte pil: zichtbaar op elke achtergrond */
.tk-carousel__ui { display: none; position: absolute; inset: 0; pointer-events: none; }
.tk-js .tk-carousel__ui { display: block; }
.tk-carousel__btn {
  position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: var(--tk-white); color: var(--tk-blue); box-shadow: 0 6px 16px -6px rgba(7, 24, 60, .45); transition: background-color .2s, opacity .2s;
}
.tk-carousel__btn[data-carousel-prev] { left: var(--sp-3); }
.tk-carousel__btn[data-carousel-next] { right: var(--sp-3); }
.tk-carousel__btn:hover:not(:disabled) { background: var(--tk-blue-50); }
.tk-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.tk-carousel__btn:focus-visible { outline: 3px solid var(--tk-blue); outline-offset: 3px; }
.tk-carousel__btn svg { width: 22px; height: 22px; }
.tk-carousel__dots { position: absolute; left: 50%; bottom: var(--sp-3); translate: -50% 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 999px; background: var(--tk-white); pointer-events: auto; }
.tk-carousel__dots button { position: relative; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--tk-blue); opacity: .3; transition: opacity .2s; }
.tk-carousel__dots button::after { content: ""; position: absolute; inset: -16px -8px; }   /* raakvlak van 44px hoog */
.tk-carousel__dots button[aria-current="true"] { opacity: 1; }
.tk-carousel__dots button:focus-visible { outline: 3px solid var(--tk-blue); outline-offset: 4px; }
@media (min-width: 1000px) { .tk-carousel__track { min-height: 520px; } }
@media (max-width: 999px) { .tk-carousel__track { flex: none; aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: no-preference) { .tk-carousel__track { scroll-behavior: smooth; } }

/* ---------- footer (v18f): merkregel kleiner, de installateur-oproep als eigen kaart ----------
   De Japanse tekens en de slogan waren even groot als een paginakop en dwongen de oproep eronder naar de achtergrond. Nu zijn ze klein en staat
   "Installateur worden" als een kaart met een echte kop (blauw-700 op het blauw, zonder rode streep). */
.tk-footer .tk-tagline { gap: var(--sp-1); }
.tk-footer .tk-tagline__jp { font-size: var(--fs-xl); }
.tk-footer .tk-tagline__en { font-size: var(--fs-xs); }
.tk-footer__cta { max-width: 46ch; margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--tk-r-4); background: var(--tk-blue-700); }
.tk-footer__cta-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-h); line-height: var(--lh-s); letter-spacing: var(--ls-h); color: var(--tk-white); }

/* ---------- kruimelpad (v18g): zacht ----------
   De actieve pil was wit met vette blauwe tekst en trok meer aandacht dan de kop eronder. Nu is het een gewone regel: de vorige stappen in lichtblauw,
   de huidige pagina in wit, allemaal in normaal gewicht en zonder vlak. */
.tk-crumbs { font-weight: var(--fw-r); }
.tk-crumbs a, .tk-crumbs [aria-current="page"] { padding: 0 var(--sp-2); }
.tk-crumbs a { background: transparent; color: var(--ink-2); }
.tk-crumbs a:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tk-crumbs [aria-current="page"] { background: transparent; color: var(--ink); }
.tk-crumbs li:first-child a { padding-left: 0; }   /* zonder vlak sluit de eerste stap aan op de kop eronder */

/* ---------- Kort gezegd: één stijl voor kernwoorden en links (v18h) ----------
   Eerder kregen alleen de eerste twee kernwoorden het zachte blauwe kader en werd de rest gewoon vet: onrustig en inconsistent. Nu hebben alle
   kernwoorden en alle links in de tekst hetzelfde zachte blauwe kader. Sinds v18k geldt dat kader voor alle links in lopende tekst (zie
   ".tk-text a" bovenaan); hier blijft alleen het zwaardere gewicht over, gelijk aan de kernwoorden in deze grote tekst. */
.tk-statement__text a { font-weight: var(--fw-h); }

/* ---------- uitklappaneel (v18i): compact, hangt onder de knop "Producten" ----------
   Het paneel stond gecentreerd in het scherm en begon halverwege de kop. Een volledig brede versie was te groot. Nu hangt het compact (880px) onder
   de knop: takumi.js zet de linkerrand van de knop in --tk-panel-left als het paneel opent. Meer lucht tussen de items (44px hoog, 8px ertussen). */
.tk-panel {
  left: var(--tk-panel-left, var(--tk-gutter)); width: min(880px, calc(100vw - var(--tk-panel-left, 0px) - var(--tk-gutter))); max-width: none;
  transform: translateY(-8px); transform-origin: 0 0; padding: var(--sp-5); gap: var(--sp-4);
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); border-radius: 0 0 var(--tk-r-4) var(--tk-r-4);
}
.tk-panel.is-open { transform: none; }
.tk-panel__col { gap: var(--sp-2); padding-top: 0; }
.tk-panel__t { margin: 0 0 var(--sp-3) var(--sp-3); }
.tk-panel__col a { min-height: 44px; }

/* ---------- feiten in twee kolommen op mobiel (v18j) ---------- */
@media (max-width: 719px) {
  .tk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-facts > div { padding: var(--sp-3); }
  .tk-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 559px) { .tk-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 339px) { .tk-facts, .tk-specs { grid-template-columns: 1fr; } }

/* ---------- cijferblok: voetregel en knop links uitgelijnd (v18j) ---------- */
.tk-stats__foot { justify-content: flex-start; }

/* ---------- pagina-specifiek ---------- */
/* Alleen regels die bij één pagina of paginatype horen en geen eigen component zijn. Elke selector is zo smal mogelijk (zoals :has(.tk-pdp) of een
   direct-siblingcombinator), zodat kit.html en andere pagina's er niet door veranderen. Componentfixes staan bij hun component. */



/* Contact: hero en formulier delen één plaat. Tussen het hero-raster en tk-layout-form is anders geen ruimte: op 1000px en breder raken stage, rol-cirkel
   (hangt 34px onder de stage) en de formulierkaart elkaar (-29px op 1440), eronder bleef 6px over na de 40px marge van de stage. */
.tk-hero__grid + .tk-layout-form { margin-top: var(--sp-8); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; scroll-behavior: auto !important; }
  .tk-js [data-reveal] { opacity: 1; transform: none; }
  .tk-js .tk-label::before { transform: none; }
  .tk-js .tk-steps::after { transform: none; }
  .tk-sticker__ring { animation: none; }
  .tk-btn:hover, .tk-tile:hover, .tk-quick:hover, .tk-dl__row:hover { transform: none; }
  .tk-wave > * { translate: none !important; rotate: none !important; }
  .tk-stage__pause { display: none; }
}

/* Windows high-contrast (forced-colors): achtergronden en box-shadows verdwijnen, dus selectie en velden krijgen echte randen en outlines */
@media (forced-colors: active) {
  .tk-btn { border: 2px solid ButtonText; }
  .tk-input, .tk-select, .tk-textarea { border: 2px solid FieldText; box-shadow: none; }
  .tk-input:user-invalid, .tk-select:user-invalid, .tk-textarea:user-invalid, .tk-input[aria-invalid="true"] { border-color: Mark; }
  .tk-check input { border-color: FieldText; }
  .tk-check input:checked { background-color: Highlight; border-color: Highlight; }
  .tk-segment input:checked + span, .tk-toggle .is-on, .tk-toggle [aria-current="page"], .tk-nav__link[aria-current="page"], .tk-nav__link.is-on { outline: 2px solid CanvasText; outline-offset: -2px; }
  .tk-segment input:focus-visible + span { outline: 3px solid Highlight; outline-offset: 2px; }
  .tk-faq__item[open] > summary::after { outline: 2px solid CanvasText; }
}