@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Nothing You Could Do"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nothing-you-could-do-latin-400-normal.woff2") format("woff2"); }
/* Layout: papieren planner. Dunne grijze lijnen, rode kalenderkoppen, handgetekende rode cirkels. Eén bewust licht ontwerp. */
:root {
  --paper: #F3F0E9;
  --paper-tex: url("paper.jpg");
  --paper-deep: #F3F1EA;
  --ink: #2E1418;
  --muted: #5A4C4C;
  --rule: #8A8A8A;
  --rule-soft: #CFCCC4;
  --red: #A80A0A;
  --red-deep: #6E0004;
  --red-ink: #FAF9F5;
  --font: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", sans-serif;
  --step--2: 0.72rem;
  --step--1: 0.84rem;
  --step-0: 1.0rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(2rem, 4.6vw, 3.1rem);
  --step-4: clamp(2.8rem, 8.2vw, 5.6rem);
  --wrap: 1140px;
  --circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44' preserveAspectRatio='none'%3E%3Cpath d='M9 22C7 10 26 3 42 5c15 2 21 13 15 24-6 10-27 14-41 9C5 34 3 23 11 14c6-6 15-8 25-8' fill='none' stroke='%23A80A0A' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; color: var(--ink); font-family: var(--font); font-size: var(--step-0); line-height: 1.6;
  background-color: var(--paper);
  background-image: var(--paper-tex);
  background-image: image-set(url("paper.webp") type("image/webp"), url("paper.jpg") type("image/jpeg"));
  background-size: 800px 800px;
}
img { max-width: 100%; display: block; }
a { color: var(--red); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}
h1, h2, h3 { font-family: var(--font); margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; color: var(--red); }
h2 { font-size: var(--step-3); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; max-width: 62ch; }

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.section { padding-block: clamp(56px, 9vw, 104px); }
.section + .section, .band + .section, .section + .band { border-top: 1px solid var(--rule); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }
.stack { display: grid; gap: 20px; }
.eyebrow { font-size: var(--step--1); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.5; }
.mark { color: var(--red); }

/* Handgetekende cirkel rond één woord of getal */
.circle { position: relative; display: inline-block; white-space: nowrap; }
.circle::after {
  content: ""; position: absolute; inset: -0.12em -0.28em -0.08em -0.22em;
  background: var(--circle) center / 100% 100% no-repeat; pointer-events: none;
}

.circle.wide::after { inset: -0.16em -0.5em -0.1em -0.42em; }
@media (max-width: 600px) { .circle.wide { white-space: normal; } }

/* Header als kalenderkop */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--paper) var(--paper-tex) 0 0 / 800px 800px; border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 82px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; }
.logo svg { width: 30px; height: 10px; flex: none; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--ink); text-decoration: none; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; }
.nav a[aria-current="page"] { position: relative; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; inset: -6px -10px -5px -10px; background: var(--circle) center / 100% 100% no-repeat; }
.menu-btn { display: none; background: none; border: 1px solid var(--ink); color: var(--ink); padding: 8px 14px; font: 400 var(--step--1) var(--font); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
@media (max-width: 1180px) {
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper) var(--paper-tex) 0 0 / 800px 800px; border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--red); }
  .nav .btn { margin-top: 16px; text-align: center; border-bottom: 0; }
}

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red); color: var(--red-ink) !important; text-decoration: none;
  font: 400 var(--step--1) var(--font); text-transform: uppercase; letter-spacing: 0.07em;
  padding: 15px 24px; border: 1px solid var(--red); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink) !important; border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper) !important; }
.nav .btn { padding: 11px 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.hero { padding-block: clamp(48px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.hero-grid > * { min-width: 0; }
.hero h1 .soft { color: var(--ink); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* Contentkalender in plannerstijl */
.planner { min-width: 0; }
.planner-top { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.planner-top span:first-child { display: grid; }
.planner-notes { display: grid; gap: 8px; padding: 14px 0 14px 50%; border-bottom: 1px solid var(--rule); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; }
.planner-month { font-size: clamp(2.6rem, 6vw, 3.9rem); font-weight: 700; color: var(--red); letter-spacing: -0.045em; line-height: 1; margin: 22px 0 14px; }
.planner-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.planner-grid .dow { font-size: 1.15rem; color: var(--ink); padding-bottom: 8px; }
.planner-grid .d { position: relative; font-size: 0.86rem; color: var(--muted); min-height: 52px; padding-top: 10px; }
.planner-grid .d.out { color: var(--rule-soft); }
.planner-grid .d.on span { position: relative; display: inline-block; color: var(--ink); }
.planner-grid .d.on span::after { content: ""; position: absolute; inset: -9px -14px; background: var(--circle) center / 100% 100% no-repeat; }
.planner-grid .d small { display: block; margin-top: 10px; font-size: 0.56rem; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: var(--red); margin-inline: -18%; }
@media (max-width: 420px) { .planner-grid .d small { font-size: 0.5rem; margin-inline: -24%; } .planner-notes { padding-left: 0; } }

/* Pijnpunten als plannernotities */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.grid-3 > *, .grid-2 > * { min-width: 0; }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.pain { display: grid; gap: 12px; align-content: start; padding: 24px 24px 24px 0; }
.grid-3 > .pain + .pain { border-left: 1px solid var(--rule-soft); padding-left: 24px; }
@media (max-width: 860px) { .grid-3 > .pain + .pain { border-left: 0; border-top: 1px solid var(--rule-soft); padding-left: 0; } }
.pain q { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; quotes: "“" "”"; }
.pain:nth-child(2) q { color: var(--red); }
.pain p { color: var(--muted); }

/* Estafette als datumreeks */
.relay { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.relay li { display: grid; gap: 8px; align-content: start; padding: 22px 22px 0 0; }
.relay li + li { border-left: 1px solid var(--rule-soft); padding-left: 22px; }
.relay .who { font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--red); }
.relay .when { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; justify-self: start; }
.relay p { color: var(--muted); }
@media (max-width: 860px) {
  .relay { grid-template-columns: 1fr; }
  .relay li { padding: 18px 0; }
  .relay li + li { border-left: 0; border-top: 1px solid var(--rule-soft); padding-left: 0; }
}

/* Kaders */
.panel { border: 1px solid var(--ink); padding: clamp(24px, 5vw, 52px); }
.sun { background: transparent; }
.band { background: var(--red-deep); color: var(--red-ink); }
.band h2, .band .eyebrow, .band .lead { color: var(--red-ink); }
.band .lead { font-weight: 400; }
.band a.btn { background: var(--paper); color: var(--red-deep) !important; border-color: var(--paper); }
.band a.btn:hover { background: var(--ink); color: var(--paper) !important; border-color: var(--ink); }
.band .mark { color: var(--red-ink); }

/* Lijstjes met schuine streep, zoals in een planner */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.checks li { display: grid; grid-template-columns: 22px 1fr; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.checks li::before { content: "/"; color: var(--red); font-weight: 700; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { border: 1px solid var(--ink); padding: 5px 12px; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.07em; }

.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--red); display: block; }
.dots i:first-child { background: var(--red); }

/* Beelden */
.photo { aspect-ratio: 4 / 5; max-width: 100%; border: 1px solid var(--ink); display: flex; align-items: flex-end; justify-content: center; padding: 28px 24px 0; overflow: hidden; position: relative; }
.photo::before { content: "Beau, 2026"; position: absolute; top: 12px; left: 14px; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .07em; }
.photo picture { display: contents; }
.photo img { height: 100%; width: auto; max-width: 100%; min-height: 0; object-fit: contain; object-position: bottom; image-rendering: pixelated; }
.photo-real { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border: 1px solid var(--ink); padding: 10px; }
.photo-real picture { display: block; height: 100%; }
.photo-real img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }

/* Calculator */
.calc { display: grid; grid-template-columns: 1.1fr 0.9fr; border: 1px solid var(--ink); }
.calc > * { min-width: 0; }
.calc-controls { padding: clamp(22px, 4vw, 36px); display: grid; gap: 28px; }
.calc-out { background: var(--red-deep); color: var(--red-ink); padding: clamp(22px, 4vw, 36px); display: grid; align-content: space-between; gap: 24px; }
.calc-out .eyebrow { color: var(--red-ink); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.field-label { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.field-label output { font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--red); }
.ticks { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--red); }
.price { font-weight: 700; font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price-sub { font-size: var(--step--1); }
.breakdown { display: grid; gap: 6px; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.breakdown div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(250, 249, 245, .4); padding-bottom: 6px; }
.calc-out .btn { background: var(--paper); color: var(--red-deep) !important; border-color: var(--paper); }
.calc-out .btn:hover { background: var(--ink); color: var(--paper) !important; border-color: var(--ink); }

/* Tabel */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--rule); }
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
th, td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th { font-size: var(--step--2); font-weight: 400; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--red); }

/* Aanbod */
.offer { border: 1px solid var(--ink); padding: clamp(22px, 4vw, 36px); display: grid; gap: 18px; }
.offer .price { color: var(--red); }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; color: var(--muted); }

/* Formulieren */
form.form { display: grid; gap: 20px; }
.form label { display: grid; gap: 6px; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; }
.form input, .form textarea, .form select {
  font: 400 1rem var(--font); color: var(--ink); background: rgba(255, 255, 255, .55); border: 0; border-bottom: 1px solid var(--ink);
  padding: 10px 2px; width: 100%; text-transform: none; letter-spacing: 0;
}
.form textarea { min-height: 120px; resize: vertical; border: 1px solid var(--ink); padding: 10px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.form legend { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.form .opts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.form .opts label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.form .opts input { width: 18px; height: 18px; accent-color: var(--red); }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: var(--step--1); color: var(--muted); }
.form-msg { padding: 12px 0; border-top: 1px solid var(--red); border-bottom: 1px solid var(--red); color: var(--red); }

.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact-line code { font-family: var(--font); font-weight: 700; user-select: all; }
.copy-btn { background: none; border: 1px solid var(--ink); padding: 4px 10px; font: 400 var(--step--2) var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); cursor: pointer; }

/* Footer: gestapelde mappen, afwisselend rood en papier, handgeschreven tabbladen */
.site-footer { margin-top: clamp(40px, 7vw, 90px); overflow: hidden; }
.folders { display: flex; flex-direction: column; padding-top: 48px; }
.folder {
  --c: #EFEDE6; --t: #A80A0A; position: relative; display: block; height: 56px;
  background-color: var(--c); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  text-decoration: none; color: var(--t);
  box-shadow: 0 -2px 12px -5px rgba(40, 0, 2, .45);
}
.folder::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: rgba(0, 0, 0, .12); box-shadow: 0 1px 0 rgba(255, 255, 255, .12); }
.folder .tab {
  position: absolute; bottom: calc(100% - 1px); left: var(--x, 6%); height: 44px;
  display: inline-flex; align-items: center; gap: .3em; padding: 4px clamp(12px, 1.6vw, 20px) 0;
  background-color: var(--c); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); border-radius: 22px 22px 0 0;
  font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  white-space: nowrap; color: var(--t); text-decoration: none; z-index: 1;
}
.folder .tab::before, .folder .tab::after {
  content: ""; position: absolute; bottom: 0; width: 24px; height: 24px;
  background-color: var(--c); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.folder .tab::before { right: 100%; -webkit-mask: radial-gradient(circle at 0 0, transparent 23.5px, #000 24px); mask: radial-gradient(circle at 0 0, transparent 23.5px, #000 24px); }
.folder .tab::after { left: 100%; -webkit-mask: radial-gradient(circle at 100% 0, transparent 23.5px, #000 24px); mask: radial-gradient(circle at 100% 0, transparent 23.5px, #000 24px); }
.folder .tab { transition: height .22s ease, padding-bottom .22s ease; }
a.folder:hover .tab, a.folder:focus-visible .tab, .f5 .tab:hover, .f5 .tab:focus-visible { height: 56px; padding-bottom: 12px; }
.f1 { --c: #6E0004; --t: #F2DCD3; --x: max(150px, 13%); }
.f2 { --x: 63%; }
.f3 { --c: #6E0004; --t: #F2DCD3; --x: 36%; }
.f4 { --x: 81%; }
.f5 { --c: #6E0004; --t: #F2DCD3; --x: max(66px, 5%); height: auto; color: #FAF9F5; }
.f5 .tab b { font-weight: 400; }
.f5 .tab:hover { color: #FAF9F5; }
.folder-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding-block: 44px 44px; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; color: #F2DCD3; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: #F2DCD3; text-decoration: none; }
.foot-links a:hover { color: #FAF9F5; text-decoration: underline; }
@media (min-width: 641px) and (max-width: 900px) { .f2 { --x: 55%; } .f4 { --x: 68%; } .f5 { --x: 66px; } }
@media (max-width: 640px) {
  .folder { height: 48px; }
  .folder .tab { height: 38px; }
  a.folder:hover .tab, a.folder:focus-visible .tab, .f5 .tab:hover { height: 46px; padding-bottom: 8px; }
  .f1 { --x: 72px; }
  .f2 .tab, .f4 .tab { left: auto; right: 9%; }
  .f3 { --x: 64px; } .f5 { --x: 64px; }
  .folder.f5 { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .folder .tab { transition: none; } }

/* Warboel tegenover de rechte lijn */
.maze-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); margin-top: 12px; }
.maze-grid > * { min-width: 0; }
.maze-fig { margin: 0; padding: 22px 24px 0 0; display: grid; gap: 8px; }
.maze-fig + .maze-fig { border-left: 1px solid var(--rule-soft); padding-left: 24px; }
.maze-fig figcaption { color: var(--red); }
.maze { width: 100%; height: auto; max-width: 560px; justify-self: center; }
.maze .lab { font-family: var(--font); font-size: 15px; letter-spacing: .06em; fill: var(--ink); }
.maze .hw { font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-size: 21px; fill: #A80A0A; paint-order: stroke; stroke: #FAF9F5; stroke-width: 7px; stroke-linejoin: round; }
.maze .big { font-family: var(--font); font-weight: 700; font-size: 44px; letter-spacing: -0.04em; fill: #A80A0A; }
@media (max-width: 860px) {
  .maze-grid { grid-template-columns: 1fr; }
  .maze-fig + .maze-fig { border-left: 0; border-top: 1px solid var(--rule-soft); padding-left: 0; }
}

/* Gescheurde overgang naar donkerrood papier (Startmaand-pagina) */
.torn-red { clip-path: polygon(0.00% 38.8px, 0.56% 42.7px, 1.11% 42.9px, 1.67% 42.3px, 2.22% 41.0px, 2.78% 45.0px, 3.33% 45.4px, 3.89% 43.6px, 4.44% 43.7px, 5.00% 42.0px, 5.56% 40.5px, 6.11% 42.8px, 6.67% 44.0px, 7.22% 40.5px, 7.78% 44.9px, 8.33% 41.0px, 8.89% 40.6px, 9.44% 39.1px, 10.00% 44.8px, 10.56% 42.8px, 11.11% 43.2px, 11.67% 41.2px, 12.22% 37.1px, 12.78% 38.6px, 13.33% 39.4px, 13.89% 36.6px, 14.44% 41.7px, 15.00% 37.8px, 15.56% 36.2px, 16.11% 40.3px, 16.67% 35.8px, 17.22% 40.9px, 17.78% 37.9px, 18.33% 38.6px, 18.89% 37.4px, 19.44% 38.4px, 20.00% 36.7px, 20.56% 36.0px, 21.11% 41.5px, 21.67% 37.7px, 22.22% 41.5px, 22.78% 38.1px, 23.33% 43.2px, 23.89% 43.0px, 24.44% 42.4px, 25.00% 42.7px, 25.56% 41.7px, 26.11% 42.8px, 26.67% 39.0px, 27.22% 41.3px, 27.78% 43.5px, 28.33% 39.5px, 28.89% 44.0px, 29.44% 43.5px, 30.00% 40.2px, 30.56% 39.6px, 31.11% 39.8px, 31.67% 38.9px, 32.22% 42.3px, 32.78% 37.9px, 33.33% 35.0px, 33.89% 34.7px, 34.44% 38.1px, 35.00% 39.1px, 35.56% 35.2px, 36.11% 34.4px, 36.67% 34.1px, 37.22% 34.6px, 37.78% 30.5px, 38.33% 32.3px, 38.89% 31.3px, 39.44% 31.1px, 40.00% 27.7px, 40.56% 27.1px, 41.11% 27.8px, 41.67% 31.1px, 42.22% 27.1px, 42.78% 28.4px, 43.33% 26.4px, 43.89% 24.9px, 44.44% 24.7px, 45.00% 29.5px, 45.56% 29.3px, 46.11% 26.9px, 46.67% 29.1px, 47.22% 29.3px, 47.78% 31.1px, 48.33% 31.8px, 48.89% 28.7px, 49.44% 32.8px, 50.00% 33.1px, 50.56% 31.2px, 51.11% 33.5px, 51.67% 31.5px, 52.22% 31.2px, 52.78% 30.8px, 53.33% 35.2px, 53.89% 31.0px, 54.44% 30.7px, 55.00% 35.7px, 55.56% 35.7px, 56.11% 34.1px, 56.67% 36.5px, 57.22% 31.5px, 57.78% 32.9px, 58.33% 33.1px, 58.89% 33.8px, 59.44% 32.2px, 60.00% 31.4px, 60.56% 32.9px, 61.11% 36.3px, 61.67% 36.7px, 62.22% 34.9px, 62.78% 33.0px, 63.33% 31.3px, 63.89% 35.6px, 64.44% 32.6px, 65.00% 33.7px, 65.56% 29.1px, 66.11% 30.2px, 66.67% 34.1px, 67.22% 33.8px, 67.78% 34.4px, 68.33% 32.7px, 68.89% 31.7px, 69.44% 32.9px, 70.00% 34.9px, 70.56% 31.8px, 71.11% 33.6px, 71.67% 32.4px, 72.22% 36.1px, 72.78% 31.8px, 73.33% 36.7px, 73.89% 39.1px, 74.44% 33.8px, 75.00% 38.1px, 75.56% 39.1px, 76.11% 41.2px, 76.67% 40.2px, 77.22% 38.8px, 77.78% 40.4px, 78.33% 44.6px, 78.89% 44.8px, 79.44% 40.5px, 80.00% 40.8px, 80.56% 41.2px, 81.11% 41.2px, 81.67% 44.2px, 82.22% 42.5px, 82.78% 47.4px, 83.33% 46.1px, 83.89% 42.8px, 84.44% 45.4px, 85.00% 43.9px, 85.56% 44.9px, 86.11% 42.9px, 86.67% 42.2px, 87.22% 42.0px, 87.78% 42.8px, 88.33% 44.5px, 88.89% 43.0px, 89.44% 39.3px, 90.00% 43.1px, 90.56% 43.6px, 91.11% 42.4px, 91.67% 42.0px, 92.22% 36.5px, 92.78% 38.9px, 93.33% 35.9px, 93.89% 40.0px, 94.44% 35.8px, 95.00% 38.9px, 95.56% 35.7px, 96.11% 38.3px, 96.67% 35.7px, 97.22% 33.8px, 97.78% 35.9px, 98.33% 35.4px, 98.89% 39.2px, 99.44% 35.4px, 100.00% 36.8px, 100.00% calc(100% - 38.8px), 99.44% calc(100% - 42.7px), 98.89% calc(100% - 42.9px), 98.33% calc(100% - 42.3px), 97.78% calc(100% - 41.0px), 97.22% calc(100% - 45.0px), 96.67% calc(100% - 45.4px), 96.11% calc(100% - 43.6px), 95.56% calc(100% - 43.7px), 95.00% calc(100% - 42.0px), 94.44% calc(100% - 40.5px), 93.89% calc(100% - 42.8px), 93.33% calc(100% - 44.0px), 92.78% calc(100% - 40.5px), 92.22% calc(100% - 44.9px), 91.67% calc(100% - 41.0px), 91.11% calc(100% - 40.6px), 90.56% calc(100% - 39.1px), 90.00% calc(100% - 44.8px), 89.44% calc(100% - 42.8px), 88.89% calc(100% - 43.2px), 88.33% calc(100% - 41.2px), 87.78% calc(100% - 37.1px), 87.22% calc(100% - 38.6px), 86.67% calc(100% - 39.4px), 86.11% calc(100% - 36.6px), 85.56% calc(100% - 41.7px), 85.00% calc(100% - 37.8px), 84.44% calc(100% - 36.2px), 83.89% calc(100% - 40.3px), 83.33% calc(100% - 35.8px), 82.78% calc(100% - 40.9px), 82.22% calc(100% - 37.9px), 81.67% calc(100% - 38.6px), 81.11% calc(100% - 37.4px), 80.56% calc(100% - 38.4px), 80.00% calc(100% - 36.7px), 79.44% calc(100% - 36.0px), 78.89% calc(100% - 41.5px), 78.33% calc(100% - 37.7px), 77.78% calc(100% - 41.5px), 77.22% calc(100% - 38.1px), 76.67% calc(100% - 43.2px), 76.11% calc(100% - 43.0px), 75.56% calc(100% - 42.4px), 75.00% calc(100% - 42.7px), 74.44% calc(100% - 41.7px), 73.89% calc(100% - 42.8px), 73.33% calc(100% - 39.0px), 72.78% calc(100% - 41.3px), 72.22% calc(100% - 43.5px), 71.67% calc(100% - 39.5px), 71.11% calc(100% - 44.0px), 70.56% calc(100% - 43.5px), 70.00% calc(100% - 40.2px), 69.44% calc(100% - 39.6px), 68.89% calc(100% - 39.8px), 68.33% calc(100% - 38.9px), 67.78% calc(100% - 42.3px), 67.22% calc(100% - 37.9px), 66.67% calc(100% - 35.0px), 66.11% calc(100% - 34.7px), 65.56% calc(100% - 38.1px), 65.00% calc(100% - 39.1px), 64.44% calc(100% - 35.2px), 63.89% calc(100% - 34.4px), 63.33% calc(100% - 34.1px), 62.78% calc(100% - 34.6px), 62.22% calc(100% - 30.5px), 61.67% calc(100% - 32.3px), 61.11% calc(100% - 31.3px), 60.56% calc(100% - 31.1px), 60.00% calc(100% - 27.7px), 59.44% calc(100% - 27.1px), 58.89% calc(100% - 27.8px), 58.33% calc(100% - 31.1px), 57.78% calc(100% - 27.1px), 57.22% calc(100% - 28.4px), 56.67% calc(100% - 26.4px), 56.11% calc(100% - 24.9px), 55.56% calc(100% - 24.7px), 55.00% calc(100% - 29.5px), 54.44% calc(100% - 29.3px), 53.89% calc(100% - 26.9px), 53.33% calc(100% - 29.1px), 52.78% calc(100% - 29.3px), 52.22% calc(100% - 31.1px), 51.67% calc(100% - 31.8px), 51.11% calc(100% - 28.7px), 50.56% calc(100% - 32.8px), 50.00% calc(100% - 33.1px), 49.44% calc(100% - 31.2px), 48.89% calc(100% - 33.5px), 48.33% calc(100% - 31.5px), 47.78% calc(100% - 31.2px), 47.22% calc(100% - 30.8px), 46.67% calc(100% - 35.2px), 46.11% calc(100% - 31.0px), 45.56% calc(100% - 30.7px), 45.00% calc(100% - 35.7px), 44.44% calc(100% - 35.7px), 43.89% calc(100% - 34.1px), 43.33% calc(100% - 36.5px), 42.78% calc(100% - 31.5px), 42.22% calc(100% - 32.9px), 41.67% calc(100% - 33.1px), 41.11% calc(100% - 33.8px), 40.56% calc(100% - 32.2px), 40.00% calc(100% - 31.4px), 39.44% calc(100% - 32.9px), 38.89% calc(100% - 36.3px), 38.33% calc(100% - 36.7px), 37.78% calc(100% - 34.9px), 37.22% calc(100% - 33.0px), 36.67% calc(100% - 31.3px), 36.11% calc(100% - 35.6px), 35.56% calc(100% - 32.6px), 35.00% calc(100% - 33.7px), 34.44% calc(100% - 29.1px), 33.89% calc(100% - 30.2px), 33.33% calc(100% - 34.1px), 32.78% calc(100% - 33.8px), 32.22% calc(100% - 34.4px), 31.67% calc(100% - 32.7px), 31.11% calc(100% - 31.7px), 30.56% calc(100% - 32.9px), 30.00% calc(100% - 34.9px), 29.44% calc(100% - 31.8px), 28.89% calc(100% - 33.6px), 28.33% calc(100% - 32.4px), 27.78% calc(100% - 36.1px), 27.22% calc(100% - 31.8px), 26.67% calc(100% - 36.7px), 26.11% calc(100% - 39.1px), 25.56% calc(100% - 33.8px), 25.00% calc(100% - 38.1px), 24.44% calc(100% - 39.1px), 23.89% calc(100% - 41.2px), 23.33% calc(100% - 40.2px), 22.78% calc(100% - 38.8px), 22.22% calc(100% - 40.4px), 21.67% calc(100% - 44.6px), 21.11% calc(100% - 44.8px), 20.56% calc(100% - 40.5px), 20.00% calc(100% - 40.8px), 19.44% calc(100% - 41.2px), 18.89% calc(100% - 41.2px), 18.33% calc(100% - 44.2px), 17.78% calc(100% - 42.5px), 17.22% calc(100% - 47.4px), 16.67% calc(100% - 46.1px), 16.11% calc(100% - 42.8px), 15.56% calc(100% - 45.4px), 15.00% calc(100% - 43.9px), 14.44% calc(100% - 44.9px), 13.89% calc(100% - 42.9px), 13.33% calc(100% - 42.2px), 12.78% calc(100% - 42.0px), 12.22% calc(100% - 42.8px), 11.67% calc(100% - 44.5px), 11.11% calc(100% - 43.0px), 10.56% calc(100% - 39.3px), 10.00% calc(100% - 43.1px), 9.44% calc(100% - 43.6px), 8.89% calc(100% - 42.4px), 8.33% calc(100% - 42.0px), 7.78% calc(100% - 36.5px), 7.22% calc(100% - 38.9px), 6.67% calc(100% - 35.9px), 6.11% calc(100% - 40.0px), 5.56% calc(100% - 35.8px), 5.00% calc(100% - 38.9px), 4.44% calc(100% - 35.7px), 3.89% calc(100% - 38.3px), 3.33% calc(100% - 35.7px), 2.78% calc(100% - 33.8px), 2.22% calc(100% - 35.9px), 1.67% calc(100% - 35.4px), 1.11% calc(100% - 39.2px), 0.56% calc(100% - 35.4px), 0.00% calc(100% - 36.8px)); }
.torn-red { position: relative; background-color: var(--red-deep); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--paper); padding-block: clamp(96px, 12vw, 150px) clamp(110px, 13vw, 160px); margin-top: clamp(24px, 4vw, 48px); }
.torn-red .tear { position: absolute; top: 0; left: 0; width: 100%; height: 70px; display: block; overflow: visible; }
.torn-red::before { content: none; }
.torn-red > .red-fill { position: absolute; inset: 0; z-index: -1; }
.torn-red .tear-bottom { top: auto; bottom: 0; transform: scale(-1, -1); }
.torn-red h2, .torn-red .eyebrow, .torn-red p, .torn-red .form-note { color: var(--paper); }
.torn-red .form label, .torn-red .form legend { color: #F2DCD3; }
.torn-red .form input, .torn-red .form select { background: rgba(250, 249, 245, .08); color: var(--paper); border-bottom-color: #F2DCD3; }
.torn-red .form textarea { background: rgba(250, 249, 245, .08); color: var(--paper); border-color: #F2DCD3; }
.torn-red .form select option { color: #2E1418; }
.torn-red .form ::placeholder { color: rgba(242, 220, 211, .6); }
.torn-red .form .opts input { accent-color: #F2DCD3; }
.torn-red .btn { background: var(--paper); color: var(--red-deep) !important; border-color: var(--paper); }
.torn-red .btn:hover { background: #F2DCD3; border-color: #F2DCD3; }
.torn-red .form-msg { color: var(--paper); border-color: var(--paper); }
.torn-red a { color: #F2DCD3; }
main:has(.torn-red:last-child) + .site-footer { margin-top: clamp(64px, 9vw, 110px); }

/* Agendablad op de contactpagina */
.contact-grid { align-items: center; }
.datebook { width: 100%; height: auto; max-width: 520px; justify-self: center; display: block; }
.datebook .dn { font-family: var(--font); font-weight: 300; font-size: 50px; letter-spacing: -0.02em; fill: #5A4C4C; font-variant-numeric: tabular-nums; }
.datebook .sd { font-family: var(--font); font-weight: 700; font-size: 30px; letter-spacing: .02em; fill: #A80A0A; }
.datebook .hn { font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-size: 25px; fill: #3E3434; }

/* To do pagina op de over-pagina */
.todo-grid { align-items: center; }
.todo-page { width: 100%; height: auto; max-width: 520px; justify-self: center; display: block; }
.todo-page .sr { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-size: 54px; fill: #2E1418; }
.todo-page .hn { font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-size: 27px; }
.todo-page .hn.sm { font-size: 22px; }
.todo-page .ink { fill: #2E1418; } .todo-page .red { fill: #A80A0A; } .todo-page .grey { fill: #6B6464; }
.todo-page .tm { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; fill: #5A4C4C; }

/* Stressmeter: klikbare schaal zoals in een notitieboek */
.scale-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.scale-grid > * { min-width: 0; }
@media (max-width: 860px) { .scale-grid { grid-template-columns: 1fr; } }
.scale-card { background: #FCFBF7; padding: clamp(28px, 5vw, 56px); box-shadow: 0 1px 0 #E4E0D6, 0 22px 40px -28px rgba(46, 20, 24, .45); transform: rotate(-3deg); display: grid; gap: 22px; color: var(--red); }
@media (max-width: 600px) { .scale-card { transform: none; } }
.scale-q { margin: 0; font-size: clamp(1rem, 1.9vw, 1.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.3; max-width: 34ch; }
.scale-row { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 2px; max-width: 30rem; }
@media (max-width: 420px) { .scale-row { flex-wrap: wrap; justify-content: flex-start; } }
.scale-n { position: relative; width: 2.1em; height: 2.1em; flex: none; border: 0; background: none; color: var(--red); font: 700 1.15rem var(--font); cursor: pointer; border-radius: 50%; }
.scale-n:hover { background: rgba(168, 10, 10, .06); }
.scale-n[aria-pressed="true"]::after { content: ""; position: absolute; inset: -2px -6px; background: var(--circle) center / 100% 100% no-repeat; animation: draw .35s ease-out; }
@keyframes draw { from { opacity: 0; transform: scale(.7) rotate(-20deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scale-n[aria-pressed="true"]::after { animation: none; } }
.scale-date { display: flex; align-items: flex-end; gap: 10px; margin: 0; font-weight: 700; }
.scale-line { flex: 1; border-bottom: 1px solid var(--red); min-height: 1.6em; position: relative; }
.scale-hand { font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-weight: 400; color: #2E1418; font-size: 1.3rem; position: absolute; left: 12px; bottom: 2px; }
.scale-answer { margin: 0; font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: #2E1418; line-height: 1.35; }
.scale-cta { justify-self: start; }

/* Pakketten als kaarten met tabblad */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); padding-top: 56px; align-items: start; }
.packages > * { min-width: 0; }
.pkg { --c: #FCFBF7; --t: var(--ink); position: relative; display: grid; gap: 20px; padding: clamp(24px, 3vw, 34px); background-color: var(--c); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--t); border-radius: 0 10px 10px 10px; box-shadow: 0 1px 0 #E4E0D6, 0 22px 40px -30px rgba(46, 20, 24, .5); }
.pkg-tab { position: absolute; bottom: calc(100% - 1px); left: 0; height: 40px; display: inline-flex; align-items: center; padding: 4px 26px 0; background-color: var(--c); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); border-radius: 16px 16px 0 0; font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-size: 1.35rem; color: var(--red); }
.pkg-tab::after { content: ""; position: absolute; bottom: 0; left: 100%; width: 18px; height: 18px; background-color: var(--c); -webkit-mask: radial-gradient(circle at 100% 0, transparent 17.5px, #000 18px); mask: radial-gradient(circle at 100% 0, transparent 17.5px, #000 18px); }
.pkg .price { color: var(--red); }
.pkg-price { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft); }
.pkg .price-sub { color: var(--muted); }
.pkg .btn { justify-self: start; }
.pkg .checks { border-top: 0; }
.pkg .checks li:last-child { border-bottom: 0; }
.pkg-hot { --c: #6E0004; --t: #FAF9F5; transform: translateY(-14px); }
.pkg-hot .pkg-tab { color: #F2DCD3; }
.pkg-hot .price { color: #FAF9F5; }
.pkg-hot .price-sub { color: #F2DCD3; }
.pkg-hot .pkg-price { border-bottom-color: rgba(242, 220, 211, .3); }
.pkg-hot .checks { border-top-color: rgba(242, 220, 211, .3); }
.pkg-hot .checks li { border-bottom-color: rgba(242, 220, 211, .3); }
.pkg-hot .checks li::before { color: #F2DCD3; }
.pkg-hot .btn { background: #FAF9F5; color: #6E0004 !important; border-color: #FAF9F5; }
.pkg-hot .btn:hover { background: #F2DCD3; border-color: #F2DCD3; }
.pkg-note { position: absolute; right: 18px; top: -46px; transform: rotate(6deg); font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; font-size: 1.3rem; color: var(--red); white-space: nowrap; }
.pkg-note::after { content: ""; position: absolute; left: 30%; top: 100%; width: 28px; height: 22px; border-left: 1.6px solid var(--red); border-bottom: 1.6px solid var(--red); border-radius: 0 0 0 18px; transform: rotate(-12deg); }
.pkg-extra { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; color: var(--muted); max-width: 70ch; }
.pkg-extra b { color: var(--ink); font-weight: 700; }
@media (max-width: 900px) {
  .packages { grid-template-columns: 1fr; gap: 64px; max-width: 460px; }
  .pkg-hot { transform: none; }
}

/* Cases en planner */
.grid-3.cases { gap: 28px 32px; border-top: 0; }
.planner-strip { border-top: 0 !important; }
.strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; border: 1px solid var(--ink); padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px) !important; }
.strip-row p { max-width: 64ch; }
.strip-row strong { color: var(--red); }
.sheet-mock { margin: 0; background: #FFFFFF; border: 1px solid #D6D1C6; box-shadow: 0 24px 50px -30px rgba(46, 20, 24, .5); transform: rotate(1.5deg); min-width: 0; }
@media (max-width: 600px) { .sheet-mock { transform: none; } }
.sheet-top { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #F3F1EA; border-bottom: 1px solid #E4E0D6; }
.sheet-dot { width: 9px; height: 9px; border-radius: 50%; background: #D6D1C6; }
.sheet-title { margin-left: 8px; font-size: .8rem; color: var(--muted); }
.sheet-scroll { overflow-x: auto; }
.sheet-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sheet-table th { background: #6E0004; color: #FAF9F5; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 8px 10px; border: 1px solid #8A2A2E; white-space: nowrap; }
.sheet-table td { padding: 8px 10px; border: 1px solid #E4E0D6; background: #FAF9F5; white-space: nowrap; color: var(--ink); }
.sheet-table td:nth-child(4) { white-space: normal; min-width: 150px; background: #FFFFFF; }
.st { display: inline-block; padding: 2px 8px; font-size: .74rem; font-weight: 700; background: #F3F1EA; color: var(--muted); }
.st-ok { background: #DCEBDC; color: #2F5E3F; } .st-plan { background: #DCE7F3; color: #1F3F66; } .st-wip { background: #F6E3B4; color: #6B4A12; }
.sheet-tabs { display: flex; gap: 2px; padding: 0 8px; background: #F3F1EA; border-top: 1px solid #E4E0D6; overflow-x: auto; }
.sheet-tabs span { padding: 7px 10px; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.sheet-tabs span.on { background: #FFFFFF; color: var(--red); font-weight: 700; box-shadow: inset 0 2px 0 var(--red); }

/* Rood blok met afgescheurd notitieblaadje */
.note-band { background: var(--red-deep); color: var(--red-ink); }
.note-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; padding-block: clamp(64px, 10vw, 120px); }
.note-band .wrap > * { min-width: 0; }
.note-band .wrap > .stack { padding-left: clamp(0px, 6vw, 88px); }
.band .wrap.grid-2 > .stack:first-child { padding-left: clamp(0px, 6vw, 88px); }
@media (min-width: 861px) { .band .wrap.grid-2 { grid-template-columns: 0.95fr 1.05fr; gap: clamp(24px, 3vw, 40px); } }
@media (max-width: 860px) { .band .wrap.grid-2 > .stack:first-child { padding-left: 0; } }
@media (max-width: 860px) { .note-band .wrap > .stack { padding-left: 0; } }
.note-band h2, .note-band .eyebrow, .note-band .lead { color: var(--red-ink); }
.note-band .btn { background: var(--paper); color: var(--red-deep) !important; border-color: var(--paper); }
.note-band .btn:hover { background: var(--ink); color: var(--paper) !important; border-color: var(--ink); }
@media (max-width: 860px) { .note-band .wrap { grid-template-columns: 1fr; } }
.note {
  position: relative; justify-self: center; width: min(100%, 380px); aspect-ratio: 722 / 904;
  background-image: url("note.png");
  background-image: image-set(url("note.webp") type("image/webp"), url("note.png") type("image/png"));
  background-size: 100% 100%; background-repeat: no-repeat;
  transform: rotate(-1.5deg); filter: drop-shadow(0 12px 16px rgba(20, 0, 0, .4));
  padding: 24% 12% 10%; display: grid; align-content: start; gap: .35em;
  font-family: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive; color: #262222; font-size: clamp(1.15rem, 2.4vw, 1.42rem); line-height: 1.5;
}
.note .small { font-size: .78em; opacity: .85; }
.note .ring { position: relative; display: inline-block; white-space: nowrap; }
.note .ring::after { content: ""; position: absolute; inset: -.3em -.5em -.25em -.45em; background: var(--circle) center / 100% 100% no-repeat; }
.note .under { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* Ringband: dunne paginarand met zilveren ringen; menubalk en footer liggen eroverheen */
body { position: relative; padding-left: 150px; }
body::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 104px; z-index: 5; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='320' viewBox='0 0 104 320'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.35' stop-color='%23bdbcb8'/%3E%3Cstop offset='.6' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%237d7c78'/%3E%3C/linearGradient%3E%3CradialGradient id='h' cx='.45' cy='.45' r='.6'%3E%3Cstop offset='0' stop-color='%23121212'/%3E%3Cstop offset='1' stop-color='%233a3836'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='52' cy='52' rx='41' ry='6.5' fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='3.4' transform='translate%281.5 3.5%29'/%3E%3Cellipse cx='11' cy='51' rx='6.2' ry='7' fill='url%28%23h%29'/%3E%3Cellipse cx='93' cy='51' rx='6.2' ry='7' fill='url%28%23h%29'/%3E%3Cellipse cx='11.6' cy='51.4' rx='6.6' ry='7.4' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='.8'/%3E%3Cellipse cx='93.6' cy='51.4' rx='6.6' ry='7.4' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='.8'/%3E%3Cpath d='M12 49.5C24 44 80 44 92 49.5' fill='none' stroke='url%28%23m%29' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M12 49.5C24 44 80 44 92 49.5' fill='none' stroke='%236f6e6a' stroke-width='.6' stroke-opacity='.6' transform='translate%280 1.9%29'/%3E%3Cpath d='M16 47.6C30 44.4 74 44.4 88 47.6' fill='none' stroke='%23fff' stroke-width='.9' stroke-opacity='.9' stroke-linecap='round'/%3E%3C/svg%3E") 0 92px / 104px 320px repeat-y,
    linear-gradient(90deg, transparent 51px, #4c4b48 51px, #4c4b48 52.4px, #e2e1dc 52.4px, #e2e1dc 53.6px, transparent 53.6px) 0 0 / 104px 100% no-repeat;
}
.site-header { margin-left: -150px; padding-left: 150px; }
.site-header { z-index: 50; }
.site-footer { margin-left: -150px; position: relative; z-index: 20; }
.folder-body { padding-left: calc(150px + max(16px, env(safe-area-inset-left, 0px))); }
@media (max-width: 600px) {
  body { padding-left: 74px; }
  body::after { width: 60px; background-size: 60px 185px, 60px 100%; background-position: 0 108px, 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='320' viewBox='0 0 104 320'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.35' stop-color='%23bdbcb8'/%3E%3Cstop offset='.6' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%237d7c78'/%3E%3C/linearGradient%3E%3CradialGradient id='h' cx='.45' cy='.45' r='.6'%3E%3Cstop offset='0' stop-color='%23121212'/%3E%3Cstop offset='1' stop-color='%233a3836'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='52' cy='52' rx='41' ry='6.5' fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='3.4' transform='translate%281.5 3.5%29'/%3E%3Cellipse cx='11' cy='51' rx='6.2' ry='7' fill='url%28%23h%29'/%3E%3Cellipse cx='93' cy='51' rx='6.2' ry='7' fill='url%28%23h%29'/%3E%3Cellipse cx='11.6' cy='51.4' rx='6.6' ry='7.4' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='.8'/%3E%3Cellipse cx='93.6' cy='51.4' rx='6.6' ry='7.4' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='.8'/%3E%3Cpath d='M12 49.5C24 44 80 44 92 49.5' fill='none' stroke='url%28%23m%29' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M12 49.5C24 44 80 44 92 49.5' fill='none' stroke='%236f6e6a' stroke-width='.6' stroke-opacity='.6' transform='translate%280 1.9%29'/%3E%3Cpath d='M16 47.6C30 44.4 74 44.4 88 47.6' fill='none' stroke='%23fff' stroke-width='.9' stroke-opacity='.9' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(90deg, transparent 29.4px, #4c4b48 29.4px, #4c4b48 30.6px, #e2e1dc 30.6px, #e2e1dc 31.4px, transparent 31.4px); }
  .site-header { margin-left: -74px; padding-left: 74px; }
  .site-footer { margin-left: -74px; }
  .folder-body { padding-left: calc(74px + max(16px, env(safe-area-inset-left, 0px))); }
}
.torn-red { margin-left: -150px; padding-left: 150px; }
@media (max-width: 600px) { .torn-red { margin-left: -74px; padding-left: 74px; } }
.hero-grid h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); overflow-wrap: break-word; }

/* Papier uit de referentie: zelfde vel overal, lichte kaarten iets witter, lichte mappen iets dieper */
/* Menubalk: effen donderrood, zonder papier */
body::before { background: var(--red-deep); }
.site-header { background: var(--red-deep); border-bottom-color: var(--red-deep); }
.site-header .logo, .site-header .nav a { color: #FAF9F5; }
.site-header .nav a:hover { color: #F2DCD3; }
.site-header .logo svg circle:first-child { fill: #FAF9F5 !important; }
.site-header .logo svg circle:not(:first-child) { stroke: #FAF9F5 !important; }
.site-header .nav a[aria-current="page"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44' preserveAspectRatio='none'%3E%3Cpath d='M9 22C7 10 26 3 42 5c15 2 21 13 15 24-6 10-27 14-41 9C5 34 3 23 11 14c6-6 15-8 25-8' fill='none' stroke='%23F2DCD3' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.site-header .nav .btn { background: #FAF9F5; color: var(--red-deep) !important; border-color: #FAF9F5; }
.site-header .nav .btn:hover { background: var(--ink); color: #FAF9F5 !important; border-color: var(--ink); }
.site-header .menu-btn { color: #FAF9F5; border-color: #FAF9F5; }
@media (max-width: 1180px) {
  .site-header .nav { background: var(--red-deep); border-bottom-color: var(--red-deep); }
  .site-header .nav a { border-bottom-color: rgba(242, 220, 211, .25); }
  .site-header .nav a[aria-current="page"] { color: #F2DCD3; text-decoration: underline; text-underline-offset: 5px; }
}
.f2, .f4 { background-image: linear-gradient(rgba(120, 96, 70, .05), rgba(120, 96, 70, .05)), var(--paper-tex); background-size: auto, 800px 800px; }
.pkg:not(.pkg-hot), .scale-card { background-image: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)), var(--paper-tex); background-size: auto, 800px 800px; }
.paid-note { background: rgba(250, 249, 245, .12); border-left: 3px solid #F2DCD3; padding: 12px 16px; margin: 0; }
.calc-incl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--step--1); color: #F2DCD3; }
.calc-incl li::before { content: "✓"; margin-right: 10px; color: #FAF9F5; }
/* Nalooprondes: lange woorden in koppen op mobiel, privacytekst, maandtabel op mobiel */
h1 { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 600px) {
  h1 { font-size: clamp(2.1rem, 10.5vw, 2.8rem); }
  .hero-grid h1 { font-size: clamp(2.1rem, 10.5vw, 2.8rem); }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { position: absolute; left: -9999px; }
  .table-wrap tr { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .table-wrap td { border: 0; padding: 0; }
  .table-wrap td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .table-wrap td:nth-child(3) { grid-row: 1; grid-column: 2; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
}
.prose p, .prose h2 { max-width: 68ch; }
.prose h1 { margin-bottom: 10px; }
.prose h2 { font-size: var(--step-2); margin-top: 1.8em; }
.prose p { margin: .6em 0 0; }
.prose-list { max-width: 68ch; margin: .6em 0 0; padding-left: 1.2em; }
.prose-list li { margin: .2em 0; }
/* Controle desktop en mobiel: kleine letters groter, niets meer in de breedte scrollen */
:root { --step--2: 0.76rem; }
.foot-links { flex-wrap: wrap; gap: 10px 20px; }
.planner-grid .d small { font-size: .62rem; }
@media (max-width: 600px) { .planner-grid .d small { display: none; } .planner-grid .d { min-height: 40px; } }
.sheet-scroll, .sheet-tabs { overflow: hidden; }
.sheet-table td, .sheet-table th { white-space: normal; }
.sheet-table td:nth-child(4) { min-width: 0; }
.sheet-table .st { white-space: nowrap; }
@media (max-width: 1200px) { .sheet-table th:nth-child(2), .sheet-table td:nth-child(2) { display: none; } }
@media (max-width: 1100px) and (min-width: 861px), (max-width: 520px) { .sheet-table th:nth-child(3), .sheet-table td:nth-child(3) { display: none; } }
@media (max-width: 1100px) { .sheet-mock { transform: none; } }
.copy-btn { font-size: .78rem; }
@media (max-width: 600px) {
  .maze { overflow: visible; }
  .maze .lab { font-size: 19px; }
  .maze .hw { font-size: 24px; stroke-width: 8px; }
  .maze-fig { padding-right: 0; }
}
@media (max-width: 600px) { .circle.wide::after { inset: -0.02em -0.32em -0.1em -0.3em; } }
/* Meer lucht aan de rechterkant op desktop en tablet */
.wrap { padding-right: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px)); }
.site-header .wrap { padding-right: max(clamp(16px, 3vw, 40px), env(safe-area-inset-right, 0px)); }
@media (min-width: 861px) { .contact-grid h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); } }
.dl-box [data-for] { display: none; }
.dl-box[data-state="laden"] [data-for="laden"], .dl-box[data-state="fout"] [data-for="fout"], .dl-box[data-state="voorbeeld"] [data-for="voorbeeld"] { display: block; }
.dl-box[data-state="ok"] [data-for="ok"] { display: flex; }
.dl-box[data-state="ok"] p[data-for="ok"] { display: block; }
.dl-box { display: grid; gap: 14px; }
.dl-msg { margin: 0; padding: 14px 18px; border-left: 3px solid var(--red); background: rgba(255, 255, 255, .45); max-width: 60ch; }
/* Minder witruimte in de hero */
.hero { padding-block: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px); }
.hero-grid { align-items: center; }
/* Hoeken: ronding van 10px op alle blokken, kaders en knoppen */
.panel, .offer, .calc, .strip-row, .photo, .photo-real, .scale-card, .sheet-mock, .dl-msg,
.tags span, .btn, .menu-btn, .copy-btn, .form textarea, .datebook-wrap { border-radius: 10px; }
.calc { overflow: hidden; }
.photo-real img { border-radius: 6px; }
.strip-row strong.strip-price { color: var(--ink); display: inline-block; margin: 20px 0 8px .9em; line-height: 1.2; }
.strip-row strong.strip-price::after { inset: -.75em -.9em -.75em -1em; }
.strip-eyebrow { display: block; margin-bottom: 1.1em; }
/* Footer: lagere mappen, tabs mogen over de map erboven vallen */
.folder { height: 30px; }
.f5 { height: auto; }
.folder::before { top: 8px; }
@media (max-width: 640px) { .folder { height: 26px; } .f5 { height: auto; } }
/* Mappen: dezelfde diepe schaduw voor rood en licht */
.folder { box-shadow: 0 -4px 18px -4px rgba(30, 0, 2, .7), 0 -1px 0 rgba(255, 255, 255, .06); }
.folder .tab { filter: drop-shadow(0 -3px 6px rgba(30, 0, 2, .55)); }
/* Meer papierruimte achter de bovenste tab */
.folders { padding-top: 84px; }
@media (max-width: 640px) { .folders { padding-top: 64px; } }
/* Iets minder ruimte tussen secties */
.section { padding-block: clamp(40px, 6.5vw, 76px); }
.maze-grid { margin-top: 4px; }
.maze-fig { padding-top: 14px; }
.hero + .section { padding-top: clamp(12px, 2vw, 24px); }
td.num { white-space: normal; min-width: 9em; }
.cc-steps { list-style: none; counter-reset: cc; margin: 0; padding: 0; display: grid; gap: 22px; }
.cc-steps li { counter-increment: cc; position: relative; padding-left: 56px; color: var(--paper); }
.cc-steps li::before { content: counter(cc); position: absolute; left: 0; top: -4px; width: 38px; height: 38px; border: 1.5px solid #F2DCD3; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #FAF9F5; }
.cc-steps b { display: block; color: #FAF9F5; }
/* Branding: teaser op homepage en portfoliopagina */
.brand-tease { align-items: center; }
.swatch-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: clamp(18px, 3vw, 28px); background: #FCFBF7; border-radius: 10px; box-shadow: 0 1px 0 #E4E0D6, 0 22px 40px -28px rgba(46, 20, 24, .45); transform: rotate(1.2deg); }
.swatch-card .sw { aspect-ratio: 1; border-radius: 50%; background: var(--s); border: 1px solid rgba(46, 20, 24, .12); }
.swatch-card .sw-type { grid-column: 1 / 3; font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); align-self: end; }
.swatch-card .sw-note { grid-column: 3 / 5; align-self: end; font-family: "Nothing You Could Do", cursive; color: var(--red); font-size: 1.05rem; line-height: 1.3; }
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); margin-top: 12px; }
.brand-grid > * { min-width: 0; }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-case { display: grid; gap: 6px; align-content: start; }
.brand-case h3 { font-size: var(--step-1); }
.brand-case p { margin: 0; color: var(--muted); font-size: var(--step--1); }
.brand-img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--rule-soft); background: #FCFBF7; }
.brand-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-img.placeholder { display: grid; place-items: center; color: var(--muted); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; background: repeating-linear-gradient(135deg, rgba(46, 20, 24, .03) 0 10px, transparent 10px 20px), #FCFBF7; }
.brand-hint { margin: -14px 0 0 30px; padding: 10px 14px; border-left: 2px solid var(--red); background: rgba(255, 255, 255, .45); border-radius: 0 10px 10px 0; font-size: var(--step--1); }
@media (max-width: 600px) { .brand-hint { margin-left: 0; } }
.panel.brand-tease { border: 0; padding-inline: 0; }
.brand-img picture { display: block; width: 100%; height: 100%; }
.brand-case p a { color: var(--accent, #6E0004); text-decoration: underline; text-underline-offset: 2px; }
.band { margin-right: clamp(16px, 4vw, 48px); border-radius: 0 10px 10px 0; }
.scale-close { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(40px, 6vw, 72px); }
.scale-close h3 { font-size: var(--step-2, 1.5rem); margin: 0; }
[hidden] { display: none !important; }
.strip-row.strip-big { background: #FCFBF7; border: 0; border-radius: 10px; box-shadow: 0 1px 0 #E4E0D6, 0 26px 46px -30px rgba(46, 20, 24, .5); padding: clamp(28px, 4.5vw, 52px) clamp(24px, 4.5vw, 56px) !important; gap: 28px 48px; transform: rotate(-.6deg); }
.strip-big .strip-text { display: grid; gap: 10px; max-width: 58ch; flex: 1 1 380px; }
.strip-big h2 { font-size: var(--step-3); margin: 0; }
.strip-big .strip-text p { margin: 0; font-size: var(--step-1); line-height: 1.5; }
.strip-big .strip-side { display: grid; justify-items: start; gap: 22px; }
.strip-row.strip-big strong.strip-price { margin: 0 0 0 .9em; font-size: var(--step-1); }
/* Mobiel: nooit zijwaarts schuiven, rechts altijd lucht, meer ruimte tussen blokken */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 600px) {
  .scale-row { display: grid; grid-template-columns: repeat(5, 2.4em); justify-content: start; gap: 6px 8px; max-width: 100%; }
}
@media (max-width: 860px) {
  .grid-2, .scale-grid, .note-band .wrap { row-gap: clamp(44px, 11vw, 64px); }
  .stack { gap: 24px; }
}
@media (max-width: 600px) {
  .wrap { padding-right: max(28px, env(safe-area-inset-right, 0px)); }
  .site-header .wrap { padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .maze-fig { padding-right: 12px; }
  .maze { overflow: hidden; }
}
.strip-big .strip-text { flex: 1 1 260px; min-width: 0; }
h1, h2, h3, p, li { overflow-wrap: break-word; }
@media (max-width: 420px) {
  h1, h2, h3, .scale-q { hyphens: auto; }
  .strip-big h2 { font-size: clamp(1.6rem, 8vw, 2rem); }
  .strip-row.strip-big { padding: 24px 20px !important; }
  .scale-card { padding: 24px 20px; }
}
@media (max-width: 600px) { .scale-row { grid-template-columns: repeat(5, minmax(0, 2.4em)); } .scale-date { flex-wrap: wrap; } .scale-n { width: 100%; max-width: 2.1em; } }
@media (max-width: 360px) { .wrap { padding-right: max(20px, env(safe-area-inset-right, 0px)); } .scale-card { padding: 20px 16px; } }
@media (max-width: 860px) {
  .note-band, .torn-red { margin-right: 16px; }
  .note-band { border-radius: 0 10px 10px 0; }
  .band { margin-right: 16px; }
}
/* Niets afknippen: tabbladen in de plannervoorbeeld lopen door op een tweede regel */
.sheet-tabs { flex-wrap: wrap; overflow: visible !important; }
.sheet-scroll { overflow: visible !important; }
@media (max-width: 380px) {
  .sheet-table { font-size: .74rem; }
  .sheet-table th, .sheet-table td { padding: 6px 6px; }
  .sheet-table .st { white-space: normal; }
}
.planner-top { flex-wrap: wrap; gap: 4px 12px; }
@media (max-width: 1100px) {
  .scale-row { display: grid; grid-template-columns: repeat(5, minmax(0, 2.4em)); justify-content: start; gap: 6px 8px; max-width: 100%; }
}