/* T1 · Verdieping: /formules/ (src/pagina/formules.mjs). stroming.css is loaded first and carries the tokens, the worlds, the header,
   the buttons, the promises, the questions, the form panel, the callback sheet and the footer; this file holds only what this page has of
   its own. No WebGL off the home page (011 §1 rule 3): the light sections paint their own ground, the dark ones stand on the graphite. */

/* the two still planes of the ground's fallback, so the world under the header is the home page's (grond.css) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 64%, color-mix(in srgb, var(--w2) 22%, transparent) 64.15%, transparent 96%),
    linear-gradient(116deg, transparent 38%, color-mix(in srgb, var(--w3) 14%, transparent) 38.15%, transparent 78%);
}
main, .voet { position: relative; z-index: 1; }

/* ======================= the page head ======================= */
.f-kop { padding: var(--pagina-top) 0 var(--sec-y); }
.f-kop-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--kolom-gap); align-items: end; }
.f-h1 { margin: 0; font-size: var(--t-pagina); font-weight: 650; line-height: .96; letter-spacing: -.032em; }
.f-h1 span { display: block; }
.f-h1 span + span { color: rgba(255, 255, 255, .5); }
.f-h1 em { font-style: normal; color: var(--rood); }
.f-kop .sub { max-width: 30em; }
/* /formules/ and /werkwijze/ (Alex, 22-09): the facts stand centred on the H1 (label above, lead below, both in the left column), and the second line is set smaller so the H1 holds on two lines */
.f-kop-boven { align-items: start; row-gap: 0; }
.f-kop-boven > .sec-label { grid-column: 1 / -1; }
.f-kop-boven > .f-h1 { grid-column: 1; grid-row: 2; align-self: center; }
.f-kop-boven > .sub { grid-column: 1; grid-row: 3; }
.f-kop-boven > .f-feiten { grid-column: 2; grid-row: 2; align-self: center; }
.f-h1 .f-h1-klein { font-size: .76em; }
/* the four facts of the price, the promises' red disc before each */
.f-feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.f-feiten li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: center; font-size: var(--t-zin); font-weight: 560; line-height: 1.25; letter-spacing: -.01em; }

/* ======================= the table, on chalk ======================= */
.ft { position: relative; padding: var(--sec-y) 0; background: var(--kalk); }
.ft-anker { position: absolute; top: 0; left: 0; }
.ft-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--kop-y) var(--kolom-gap); align-items: end; margin-bottom: var(--kop-y); }
.ft-kop .kop2 { max-width: 12em; }
/* the toggle, the home page's year strip in shape */
.f-schakel { position: relative; display: inline-flex; margin: 0; padding: 5px; border-radius: var(--r-knop); background: rgba(20, 20, 20, .07); font-size: var(--t-meta); }
.f-schakel button { position: relative; z-index: 1; min-width: 118px; padding: 13px 22px; border: 0; border-radius: var(--r-knop); background: transparent; color: inherit; font: inherit; letter-spacing: .02em; cursor: pointer; transition: color .5s; }
.f-schakel button[aria-checked=true] { color: #fff; }
.f-glijder { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: var(--r-knop); background: var(--inkt); transition: transform .8s var(--uit), width .8s var(--uit); }
.no-js .f-schakel { display: none; }
/* the phone's tabs: on the desktop they do not exist */
.f-tabs { display: none; }

.f-tabel { width: 100%; border-collapse: separate; border-spacing: 0; }
.f-tabel th, .f-tabel td { padding: 18px 22px; vertical-align: middle; text-align: left; }
/* a value stands under its formula's name, so a column reads top to bottom */
.f-tabel td { font-size: var(--t-sub); line-height: 1.35; }
.f-tabel tbody th { width: 34%; font-weight: 500; font-size: var(--t-sub); line-height: 1.35; }
.f-tabel tbody tr + tr :is(th, td) { border-top: 1px solid var(--lijn); }
.f-tabel tbody tr.f-groep :is(th, td) { border-top: 0; padding: var(--kop-y) 22px 10px; }
.f-tabel tbody tr.f-groep + tr :is(th, td) { border-top: 0; }
.f-groep th { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.f-label { display: block; }
.f-uitleg { display: block; margin-top: 4px; font-size: var(--t-meta); line-height: 1.4; color: var(--fg2); }
/* the head row: name, kind, the big price, the one-liner. It stays in view on the desktop while the reader goes down the rows */
.f-tabel thead th, .f-hoek { position: sticky; top: var(--kop-h, 84px); z-index: 2; padding: 28px 22px 22px; vertical-align: bottom; background: var(--kalk); transition: padding .6s var(--uit); }
.f-tabel thead th p { margin: 0; }
/* once the head row sticks it closes to name and price (t1.js sets .is-vast): the kind and the one-liner fold away, the price shrinks.
   The price scales rather than changing size, because the odometer's columns are measured in pixels */
.f-soort, .f-zin { max-height: 8em; overflow: hidden; transition: max-height .6s var(--uit), opacity .35s, margin .6s var(--uit), padding .6s var(--uit), border-width .6s; }
/* no scroll anchoring in the table: when the head folds, Chrome would scroll up by the same amount to hold the rows still, which
   unsticks the head, which unfolds it, which scrolls back: the price flickered between big and small */
.ft { overflow-anchor: none; }
.f-prijs { transform-origin: 0 100%; transition: transform .6s var(--uit), margin .6s var(--uit); }
@media (min-width: 1101px) {
  .f-tabel.is-vast thead th, .f-tabel.is-vast .f-hoek { padding-block: 14px 12px; }
  .f-tabel.is-vast thead [data-f=groei] { border-radius: 0; }
  .f-tabel.is-vast :is(.f-soort, .f-zin) { max-height: 0; opacity: 0; margin: 0 !important; padding-block: 0; border-width: 0; }
  .f-tabel.is-vast .f-prijs { margin-top: calc(-.4 * clamp(40px, 3.8vw, 64px) + 6px) !important; transform: scale(.6); }
}
.f-soort { display: block; width: max-content; margin-bottom: 14px !important; padding: 6px 10px; border: 1px solid var(--lijn); border-radius: var(--r-knop); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.f-hi .f-soort { border-color: var(--rood-knop); background: var(--rood-knop); color: #fff; }
.f-naam { font-size: var(--t-kaart); font-weight: 640; line-height: 1.05; letter-spacing: -.02em; }
/* the section's figure: the price in jaar 1, at a size the three columns hold at 1440 */
.f-prijs { display: flex; align-items: flex-start; gap: 4px; margin-top: 12px !important; line-height: 1; }
.f-eur { margin-top: .1em; font-size: clamp(20px, 1.6vw, 28px); font-weight: 500; }
.f-prijs .fo { font-size: clamp(40px, 3.8vw, 64px); font-weight: 640; letter-spacing: -.03em; }
.f-pm { align-self: flex-end; margin: 0 0 .25em 6px; font-size: var(--t-label); line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); text-align: left; }
.f-zin { margin-top: 14px !important; max-width: 17em; font-size: var(--t-meta); line-height: 1.4; font-weight: 400; color: var(--fg2); }
/* Groei on a graphite plate: the column's cells carry it, the head cell rounds the top and the last row the foot */
.f-tabel [data-f=groei] { --fg: #fff; --fg2: rgba(255, 255, 255, .78); --lijn: rgba(255, 255, 255, .22); background: var(--grafiet); color: #fff; }
.f-tabel thead [data-f=groei] { border-radius: var(--r-plaat) var(--r-plaat) 0 0; }
.f-tabel tbody tr:last-child [data-f=groei] { border-radius: 0 0 var(--r-plaat) var(--r-plaat); }
/* the price rows: a rolling figure in every cell; "vanaf jaar 3" carries the red, the text token on chalk, the brand red on graphite */
.f-p { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 600; }
.f-eur-klein { font-size: .8em; font-weight: 500; }
.f-rij-j3 td { color: var(--rood-tekst); }
.f-rij-j3 [data-f=groei] { color: var(--rood); }
/* the rolling figure (06-formules.js's odometer, at this page's sizes): each digit is a column as wide as the widest digit, centred (D-119) */
.fo { display: inline-flex; height: 1em; overflow: hidden; line-height: 1; }
.fo-klein { font-size: 19px; }
.fo-kol { display: inline-block; height: 1em; overflow: hidden; text-align: center; transition: width .8s var(--uit); }
.fo-band { display: block; transition: transform 1.1s var(--uit); }
.fo-band span { display: block; height: 1em; }
/* the checks: a red disc with the promises' mark, or a short dash */
.f-ja { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--rood); vertical-align: middle; }
.f-ja svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.f-nee { display: inline-block; width: 14px; height: 1.5px; background: currentColor; opacity: .3; vertical-align: middle; }
/* a line that turns: both on the same spot, the one not chosen faded and a half line away; the toggle on the section picks (t1.js) */
.wissel { display: grid; }
.wissel > span { grid-area: 1 / 1; transition: opacity .45s, transform .7s var(--uit); }
.wissel .w-shop { opacity: 0; transform: translateY(.55em); }
[data-variant=shop] .wissel .w-web { opacity: 0; transform: translateY(-.55em); }
[data-variant=shop] .wissel .w-shop { opacity: 1; transform: none; }
/* without the script every price is readable (criterion 10): the webshop line and price stand under the website ones */
.fo-ws { display: none; }
.no-js .fo-ws { display: block; margin-top: 4px; font-size: var(--t-meta); font-weight: 400; letter-spacing: 0; color: var(--fg2); white-space: nowrap; }
.no-js .f-prijs { flex-wrap: wrap; }
.no-js .f-prijs .fo-ws { flex-basis: 100%; }
.no-js .wissel { display: block; }
.no-js .wissel .w-shop { display: block; margin-top: 4px; font-size: var(--t-meta); color: var(--fg2); opacity: 1; transform: none; }
.no-js .wissel .w-shop::before { content: 'Als webshop: '; }
/* the foot: the locked sentence, the footnote, the hand-off to the calculator */
.ft-voet { margin-top: var(--kop-y); }
.ft-ladder { margin: 0; max-width: 34em; font-size: var(--t-zin); line-height: 1.35; letter-spacing: -.01em; color: var(--fg2); }
.ft-ladder b { font-weight: 620; color: var(--fg); }
.ft .voetnoot { margin-top: 16px; max-width: 72ch; }
.ft-acties { margin-top: var(--kop-y); }

/* ======================= the rules, on graphite ======================= */
.fr { position: relative; padding: var(--sec-y) 0; }
.fr-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--kop-y) var(--kolom-gap); align-items: start; }
.fr-titel { max-width: 12em; margin-bottom: var(--kop-y); }
.fr-regels { margin: 0; border-top: 1px solid var(--lijn); }
.fr-regels > div { padding: 22px 0; border-bottom: 1px solid var(--lijn); }
.fr-regels dt { font-size: var(--t-kaart); font-weight: 640; line-height: 1.1; letter-spacing: -.02em; }
.fr-regels dd { margin: 8px 0 0; max-width: 30em; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
/* the right column's label stands level with the left column's first rule */
.fr-h3 { margin: 0 0 16px; font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.fr-niet { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.fr-niet li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
.fr-niet b { display: block; font-weight: 600; color: var(--fg); }
.fr .nul { margin: var(--kop-y) 0 0; }
/* the closer: "Wij zijn er morgen nog", --kop-y under the body, and the hand-off to Over ons */
.fr-slot { margin-top: var(--kop-y); padding-top: var(--kop-y); border-top: 1px solid var(--lijn); }
.fr-slot .kop-mega { max-width: 12em; }
.fr-slot .sub a { color: var(--fg); text-underline-offset: 3px; }
.fr-uit { margin: 24px 0 0; }

/* ======================= beloftes and vragen: the home page's own (stroming.css), on chalk ======================= */
.beloftes { background: var(--kalk); }
.fv { background: var(--kalk); padding-top: 0; }
.fv .vragen-grid { padding-top: var(--sec-y); border-top: 1px solid var(--lijn); }
.fv .vragen-kop { top: 120px; }

/* ======================= slot: the home page's own (stroming.css) ======================= */
.js .terugbel-voet .terugbel { display: none; }
/* the head sits on its panel: layout.md §3's head-to-body step, 72 px on the desktop and 40 on the phone (Alex, 2026-09-22) */
.slot-kop { margin-bottom: var(--kop-y); }

/* over the table the header is a solid chalk bar (t1.js sets .is-effen): Groei's graphite column runs under it, so a see-through
   header would be half dark on dark. The sticky head row stands right under it */
.kop.is-effen::before { opacity: 1; background: var(--kalk) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-mask: none !important; mask: none !important; inset: 0 !important; box-shadow: 0 1px 0 rgba(20, 20, 20, .1); }

/* the phone bar, as /rekenmachine/, /contact/ and the sector pages have it */
.s-balk { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(24, 26, 29, .86); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .22); color: #fff; transform: translateY(110%); transition: transform var(--t-deel) var(--e-uit); }
.s-balk.is-op { transform: none; }
.s-balk-tel { font-weight: 600; font-size: 16px; color: #fff; text-decoration: none; }
.no-js .s-balk { display: none !important; }

/* ======================= narrower screens ======================= */
@media (max-width: 1100px) {
  .f-kop-grid, .fr-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .f-kop-boven > :is(.f-h1, .sub, .f-feiten) { grid-column: auto; grid-row: auto; }
  .f-kop-boven > .f-feiten { padding-top: var(--kolom-gap); }
  .fr-rechts { padding-top: 0; }
  .f-tabel th, .f-tabel td { padding-inline: 14px; }
  .f-tabel thead :is(th, td) { position: static; }
}
@media (max-width: 760px) {
  .f-h1 { font-size: 13.5vw; }
  .ft-kop { grid-template-columns: 1fr; }
  .f-schakel { justify-self: start; }
  .f-schakel button { min-height: 44px; min-width: 0; flex: 1; padding: 11px 18px; }
  /* the tabs stand under the header while the reader goes down one formula; the other two columns are off screen */
  .js .f-tabs { position: sticky; top: 62px; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 16px; background: var(--kalk); border-bottom: 1px solid var(--lijn); }
  .f-tabs button { min-height: 48px; padding: 0 4px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--fg2); font: inherit; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .4s, border-color .4s; }
  .f-tabs button[aria-selected=true] { color: var(--fg); border-bottom-color: var(--rood); }
  .js .f-tabel [data-f]:not(.is-aan) { display: none; }
  /* the chosen formula's head stands as a plate over the full width; the table under it is label and value */
  .js .f-tabel { display: block; }
  .js .f-tabel tbody { display: table; width: 100%; border-collapse: separate; border-spacing: 0; }
  .js .f-tabel thead, .js .f-tabel thead tr, .js .f-tabel thead th { display: block; width: auto; }
  .js .f-hoek { display: none; }
  .js .f-tabel thead [data-f=groei] { border-radius: var(--r-plaat); }
  /* Groei's plate is its head on the phone; the rows under it read like the other two formulas' */
  .js .f-tabel tbody [data-f=groei] { --fg: var(--inkt); --fg2: #4f4b46; --lijn: rgba(20, 20, 20, .15); background: transparent; color: var(--inkt); border-radius: 0; }
  .js .f-tabel tbody .f-rij-j3 [data-f=groei] { color: var(--rood-tekst); }
  .f-pm { flex: none; }
  .f-tabel th, .f-tabel td { padding: 14px 12px; }
  .f-tabel tbody th { width: 56%; }
  .f-tabel thead th { padding: 22px 16px 18px; }
  .f-tabel tbody tr.f-groep :is(th, td) { padding: var(--kop-y) 12px 8px; }
  .f-prijs .fo { font-size: 44px; }
  .f-zin { max-width: none; }
  /* without the script the whole table stands, and scrolls sideways under the thumb, its first column held */
  .no-js .f-rol { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .no-js .f-tabel { min-width: 640px; }
  .no-js .f-tabel :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--kalk); }
  .ft-acties, .fr-uit { flex-direction: column; align-items: stretch; }
  .ft-acties .knop { height: auto; min-height: 56px; padding-block: 9px; white-space: normal; }
  .fr-slot .kop-mega { max-width: none; }
  .s-balk { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .fo-band, .fo-kol, .f-glijder, .wissel > span, .s-balk { transition: none; }
}
[data-tier=stil] :is(.fo-band, .fo-kol, .f-glijder, .wissel > span) { transition: none; }

/* ======================= /werkwijze/ (src/pagina/werkwijze.mjs): the twelve weeks as two lanes ======================= */
/* the loud moment stands on its own night ground (layout.md §10: a loud moment may break the world); --inkt is the deepest token */
.tw { position: relative; padding: var(--sec-y) 0; background: var(--inkt); }
.tw-kop { margin-bottom: var(--kop-y); }
.tw-kop .kop2 { max-width: 14em; }
.tw-grid { display: grid; grid-template-columns: minmax(320px, .46fr) minmax(0, .54fr); gap: 0 var(--kolom-gap); align-items: start; }
/* the track's column stays in view while the steps go by; the header's height is --kop-h (t1.js) */
.tw-vast { position: sticky; top: calc(var(--kop-h, 84px) + 16px); }
/* the section's figure: the week the playhead is in, the home page's week-groot at this column's size */
.tw-week { margin: 0 0 20px; display: flex; align-items: baseline; gap: 14px; line-height: .86; }
.tw-week span { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.wk-nr { display: block; font-size: clamp(56px, 5.2vw, 84px); font-weight: 640; letter-spacing: -.035em; }
/* the track: a grid of twelve week rows under one row of lane names, the ruler in the first column, our two lanes and his one */
.tw-spoor { --wk-h: 46px; --kop-r: 36px; position: relative; display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); grid-template-rows: var(--kop-r) repeat(12, var(--wk-h)); }
.tw-lijnen { position: absolute; left: 44px; right: 0; top: var(--kop-r); bottom: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, var(--lijn) 0 1px, transparent 1px var(--wk-h)); }
.tw-scheiding { position: absolute; top: 0; bottom: 0; left: calc(44px + (100% - 44px) * 2 / 3); pointer-events: none; border-left: 1px dashed var(--lijn); }
.tw-naam { grid-row: 1; align-self: center; margin: 0; padding-left: 6px; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.tw-naam-wij { grid-column: 2 / 4; }
.tw-naam-u { grid-column: 4; }
.tw-lineaal { display: contents; }
.tw-lineaal span { grid-column: 1; grid-row: var(--r); padding-top: 7px; border-top: 1px solid var(--lijn); font-size: var(--t-meta); color: var(--fg2); transition: color .3s, border-color .3s; }
.tw-lineaal span.is-nu { color: #fff; border-top-color: var(--rood); }
/* one block, two stacked labels: the filled one is the fill, clipped from the top by --vul (the home page's tl-blok, upright) */
.tw-blok { position: relative; grid-column: var(--k); grid-row: calc(var(--a) + 1) / calc(var(--b) + 2); margin: 3px 4px; display: flex; align-items: flex-start; padding: 10px 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-veld); background: rgba(255, 255, 255, .05); color: #fff; font-size: var(--t-meta); font-weight: 560; line-height: 1.2; letter-spacing: -.01em; }
.tw-t { position: relative; z-index: 1; }
.tw-vul { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; padding: 10px 12px; background: #fff; color: var(--inkt); clip-path: inset(0 0 calc(100% - var(--vul, 0) * 100%) 0); }
.tw-uw .tw-vul, .tw-online .tw-vul { background: var(--rood-knop); color: #fff; }
/* "Niets" reads: plain text at full contrast, a dashed edge (the home page's rule) */
.tw-niets { border-style: dashed; }
.tw-niets .tw-vul { background: rgba(255, 255, 255, .13); color: #fff; }
.tw-online.is-aan { box-shadow: 0 0 24px rgba(237, 29, 36, .3); }
/* the playhead: a red line that comes down the track, --w weeks in (t1.js sets --w on the section) */
.tw-nu { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--kop-r) - 1px); height: 2px; pointer-events: none; background: var(--rood); box-shadow: 0 0 14px 1px rgba(237, 29, 36, .35); transform: translateY(calc(var(--w, 0) * var(--wk-h))); }
.tw-nu b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 99px; background: var(--rood); color: #fff; font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
/* without the script, and without motion: the track fully drawn, no playhead, nothing lit */
html:not(.beweeg) .tw-vul { clip-path: none; }
html:not(.beweeg) .tw-nu, html:not(.beweeg) .tw-week { display: none; }
/* the phone's strip: on the desktop it does not exist */
.tw-strip { display: none; }

/* the steps: a list he reads at his own pace; the step under the reading line carries the red week */
.tw-stappen { list-style: none; margin: 0; padding: 0; }
.tw-stap { padding: var(--kop-y) 0; border-top: 1px solid var(--lijn); }
.tw-stap:first-child { padding-top: 0; border-top: 0; }
.tw-stap:last-child { padding-bottom: 0; }
.tw-wk { margin: 0 0 12px; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); transition: color .4s; }
.tw-stap.is-nu .tw-wk { color: var(--rood); }
.tw-h3 { margin: 0; font-size: var(--t-kop3); font-weight: 640; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.tw-h3 em { font-style: normal; color: var(--rood); }
/* what we do beside what he does: his column stands apart behind a dashed rule, as his lane does on the track */
.tw-twee { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px 32px; margin-top: 24px; }
.tw-lab { margin: 0 0 8px; font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.tw-tekst { margin: 0; max-width: 30em; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
.tw-u { padding-left: 32px; border-left: 1px dashed var(--lijn); }
.tw-u-zin { margin: 0; font-size: var(--t-zin); font-weight: 560; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.tw-u-meer { margin: 6px 0 0; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
/* the film session: the one place film plays on this page. The readout never lies (kit 10): REC only while the clip really plays */
.tw-film { margin: 24px 0 0; }
.tw-raam { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-plaat); border: 1px solid rgba(255, 255, 255, .14); background: #1c1f24; }
.tw-raam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tw-rec, .tw-film-info { position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(10, 10, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: var(--t-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.tw-rec { left: 14px; padding-left: 10px; }
.tw-film-info { right: 14px; }
.tw-rec i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.tw-film.is-rec .tw-rec i { background: var(--rood); animation: tw-knip 1.2s steps(1) infinite; }
@keyframes tw-knip { 50% { opacity: .25; } }
.tw-film figcaption { margin-top: 12px; font-size: var(--t-meta); line-height: 1.4; color: var(--fg2); }
/* week 3 to 10: his website as its list of pages on a white plate in the customer's card's language; a slot is dashed until its page is
   written, then solid with a red check. The tiles never wrap: a name that will not fit is cut, not broken over the row */
.tw-bouw { margin: 24px 0 0; }
.tb-raam { --lijn: rgba(20, 20, 20, .12); position: relative; overflow: hidden; border-radius: var(--r-plaat); border: 1px solid rgba(255, 255, 255, .14); background: #fff; color: var(--inkt); }
.tb-balk { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--lijn); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #5a554f; }
.tb-stand { display: inline-flex; align-items: baseline; gap: 6px; }
.tb-nr { min-width: 2ch; text-align: center; font-weight: 600; color: var(--inkt); }
.tb-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 16px 20px 20px; }
.tb-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tb-kop span { font-weight: 500; color: #5a554f; }
.tb-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tb-p { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 10px 0 12px; border: 1px dashed var(--lijn); border-radius: var(--r-veld); font-size: var(--t-meta); font-weight: 560; letter-spacing: -.01em; white-space: nowrap; transition: background-color .35s, border-color .35s; }
.tb-p.is-klaar { border-style: solid; background: #f4f2ee; }
.tb-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-p.is-bezig .tb-naam::after { content: ''; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.12em; background: var(--rood); animation: tb-knip .8s steps(1) infinite; }
@keyframes tb-knip { 50% { opacity: 0; } }
.tb-vink { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rood); transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.tb-p.is-klaar .tb-vink { transform: scale(1); }
.tb-vink svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tw-bouw figcaption { margin-top: 12px; font-size: var(--t-meta); line-height: 1.4; color: var(--fg2); }
/* the closer: --kop-y under the steps, the hand-off to the formules */
.tw-slot { margin-top: var(--kop-y); padding-top: var(--kop-y); border-top: 1px solid var(--lijn); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.tw-slot-zin { margin: 0; max-width: 28em; font-size: var(--t-zin); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }

/* ======================= after week 12, on chalk ======================= */
.tn { position: relative; padding: var(--sec-y) 0; background: var(--kalk); }
.tn-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--kop-y) var(--kolom-gap); align-items: start; }
.tn-kop .kop2 { max-width: 12em; }
.tn-een { margin: var(--kop-y) 0 0; max-width: 26em; font-size: var(--t-zin); font-weight: 560; line-height: 1.3; letter-spacing: -.01em; }
.tn-regel { margin: 12px 0 0; max-width: 30em; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
.tn-acties { margin-top: var(--kop-y); }
.tn-lijst { margin: 0; border-top: 1px solid var(--lijn); }
.tn-rij { display: grid; grid-template-columns: minmax(150px, .3fr) minmax(0, .7fr); gap: 12px 24px; padding: 24px 0; border-bottom: 1px solid var(--lijn); }
/* the rhythm's figure: how often, at the card step */
.tn-vaak { margin: 0; line-height: 1; }
.tn-vaak b { display: block; font-size: var(--t-kaart); font-weight: 640; letter-spacing: -.02em; }
.tn-vaak small { display: block; margin-top: 6px; font-size: var(--t-meta); color: var(--fg2); }
.tn-rij dd { margin: 0; }
.tn-rij h3 { margin: 0 0 6px; font-size: var(--t-zin); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.tn-rij p { margin: 0; max-width: 30em; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }

/* the home page's formules section stands on chalk here, as on the sector pages (t3.css) */
.werkwijze-pagina .formules { background: var(--kalk); }

/* ======================= narrower screens ======================= */
@media (min-width: 761px) and (max-height: 820px) {
  .tw-spoor { --wk-h: 38px; }
  .wk-nr { font-size: clamp(44px, 4.4vw, 64px); }
  .tw-blok { padding: 7px 10px; }
  .tw-vul { padding: 7px 10px; }
}
@media (max-width: 1100px) {
  .tw-twee, .tn-grid { grid-template-columns: minmax(0, 1fr); }
  .tw-u { padding: 16px 0 0; border-left: 0; border-top: 1px dashed var(--lijn); }
  .tw-blok, .tw-vul { padding-inline: 8px; }
}
@media (max-width: 760px) {
  .tw-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--kop-y); }
  /* the phone (011 §3): the track stands fully drawn above the list, no playhead, and the week is pinned under the header */
  .tw-vast { position: static; }
  .tw-week, .tw-nu { display: none; }
  .tw-spoor { --wk-h: 40px; }
  .tw-vul { clip-path: none; }
  .tw-online { box-shadow: none; }
  .js .tw-strip { position: sticky; top: 62px; z-index: 5; display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 0; background: var(--inkt); border-bottom: 1px solid var(--lijn); }
  .tw-strip-week { flex: none; min-width: 7.5em; font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
  .tw-strip-baan { flex: 1; position: relative; height: 12px; overflow: hidden; border: 1px solid var(--lijn); border-radius: 99px; }
  .tw-strip-baan i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .5), var(--rood)); transform-origin: left; transform: scaleX(calc(var(--w, 0) / 12)); }
  .tw-stap { scroll-margin-top: 130px; }
  /* the page list: a narrower plate, and each column's head stacked so "7 pagina's erbij" never wraps beside its name */
  .tb-balk { padding: 12px 16px; }
  .tb-lijst { gap: 14px 12px; padding: 14px 16px 16px; }
  .tb-kop { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tn-rij { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* the list is the section's last edge on the phone: no padding and no rule under its last row (layout.md §3) */
  .tn-rij:last-child { padding-bottom: 0; border-bottom: 0; }
  .tw-acties, .tn-acties { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-rec i { animation: none; }
  .tw-lineaal span, .tw-wk, .tb-p, .tb-vink { transition: none; }
}

/* ======================= /online-marketing/ (src/pagina/marketing.mjs): one take, five uses ======================= */
/* the loud moment stands on its own night ground (layout.md §10: a loud moment may break the world); --inkt is the deepest token */
.om { position: relative; padding: var(--sec-y) 0; background: var(--inkt); }
.om-kop { margin-bottom: var(--kop-y); }
.om-kop .kop2 { max-width: 13em; }
.om-grid { display: grid; grid-template-columns: minmax(360px, .48fr) minmax(0, .52fr); gap: 0 var(--kolom-gap); align-items: start; }
/* the stage's column stays in view while the steps go by; the header's height is --kop-h (t1.js) */
.om-vast { position: sticky; top: calc(var(--kop-h, 84px) + 16px); }
/* the dial, laid flat: five names in one row, the current one white with a red mark under it; each is a link to its step */
.om-index { display: flex; gap: 4px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.om-index::-webkit-scrollbar { display: none; }
.om-index a { position: relative; flex: none; display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 12px 12px 0; margin-right: 8px; color: var(--fg2); text-decoration: none; font-size: var(--t-meta); font-weight: 560; letter-spacing: -.01em; white-space: nowrap; transition: color .3s; }
.om-index a b { font-size: var(--t-label); font-weight: 500; letter-spacing: .06em; }
.om-index a::after { content: ''; position: absolute; left: 0; right: 8px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--rood); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--e-uit); }
.om-index a:hover { color: #fff; }
.om-index a[aria-current] { color: #fff; }
.om-index a[aria-current] b { color: var(--rood); }
.om-index a[aria-current]::after { transform: scaleX(1); }
/* the stage: one plate, the five uses laid over each other; only the current one is opaque (t1.js crossfades them) */
.om-podium { position: relative; height: min(56vh, 540px); overflow: hidden; border-radius: var(--r-plaat); }
.om-toep { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-plaat); border: 1px solid rgba(255, 255, 255, .12); background: #1c1f24; opacity: 0; }
.om-toep.is-nu { opacity: 1; }
/* the frame: one and the same in every use, cropped by its box (62 % keeps the roofer in the tall crop) */
.om-beeld { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* the frame that travels (t1.js sets its box); the box changes while it flies, so the crop changes with it */
.om-reis { position: absolute; z-index: 6; visibility: hidden; object-fit: cover; object-position: 62% 50%; pointer-events: none; }
/* 01 the take: full bleed, the poster over the clip until it plays; the readout as on /werkwijze/ */
.om-film video, .om-film .om-beeld { position: absolute; inset: 0; width: 100%; height: 100%; }
.om-film video { object-fit: cover; object-position: 62% 50%; }
.om-film .om-beeld { z-index: 1; }
.om-rec, .om-info { position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(10, 10, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: var(--t-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.om-rec { left: 14px; padding-left: 10px; }
.om-info { right: 14px; }
.om-rec i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.om-film.is-rec .om-rec i { background: var(--rood); animation: om-knip 1.2s steps(1) infinite; }
@keyframes om-knip { 50% { opacity: .25; } }
/* 02 the website, in the home page's browser (04-wij.css), the frame as its header */
.om-web { background: var(--leisteen); }
.om-browser { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px 14px 0 0; background: #fff; color: var(--inkt); font-size: 12px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55); }
.om-br-balk { margin: 0; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #efeeec; }
.om-br-balk i { width: 9px; height: 9px; border-radius: 50%; background: #d2d0cc; }
.om-br-balk span { flex: 1; margin-left: 10px; padding: 5px 12px; border-radius: 99px; background: #fff; font-size: 10px; color: #777; }
.om-br-nav { margin: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; font-size: 11px; color: #555; }
.om-br-nav b { margin-right: auto; font-size: 14px; color: var(--inkt); letter-spacing: -.02em; }
.om-br-knop { padding: 6px 11px; border-radius: 99px; background: var(--rood); color: #fff; }
.om-br-held { position: relative; flex: none; height: 54%; margin: 0 14px; overflow: hidden; border-radius: 10px; }
.om-br-held .om-beeld { position: absolute; inset: 0; }
/* the fade under the header's line, so the white stands off the roof (Alex, 2026-09-22); it comes in once the frame has landed (t1.js
   holds .is-vlucht on the use while the frame flies to it) */
.om-br-held::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12, 12, 12, .78) 0%, rgba(12, 12, 12, .42) 34%, rgba(12, 12, 12, 0) 68%), linear-gradient(to right, rgba(12, 12, 12, .32), rgba(12, 12, 12, 0) 60%); pointer-events: none; transition: opacity .6s var(--e-uit); }
.om-br-held p { position: absolute; z-index: 2; left: 18px; bottom: 16px; margin: 0; color: #fff; font-size: clamp(20px, 2vw, 32px); font-weight: 650; line-height: 1; letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); transition: opacity .5s var(--e-uit) .12s, transform .6s var(--e-uit) .12s; }
.om-web.is-vlucht .om-br-held::after, .om-web.is-vlucht .om-br-held p { opacity: 0; transition: none; }
.om-web.is-vlucht .om-br-held p { transform: translateY(10px); }
.om-br-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 14px; }
.om-br-rij i { aspect-ratio: 4 / 3; border-radius: 8px; background: #ece9e4; }
/* 03 the post, on his customer's phone: the frame cropped tall */
.om-post { background: #1c1b1a; }
.om-tel { position: absolute; left: 50%; top: 50%; height: 88%; aspect-ratio: 9 / 18; display: flex; flex-direction: column; padding: 10px; border-radius: 30px; background: #fff; color: var(--inkt); font-size: 12px; transform: translate(-50%, -50%); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8); }
.om-tf-account { margin: 4px 4px 10px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.om-tf-account i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--rood), #ff9a3c, var(--rood)); }
.om-tf-beeld { position: relative; flex: 1; overflow: hidden; border-radius: 12px; background: #ddd; }
.om-tf-beeld .om-beeld { position: absolute; inset: 0; }
.om-tf-acties { margin: 10px 4px 6px; display: flex; align-items: center; gap: 12px; }
.om-tf-acties svg { width: 20px; height: 20px; fill: none; stroke: var(--inkt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.om-tf-acties svg:first-child { fill: var(--rood); stroke: var(--rood); }
.om-tf-stippen { margin-left: auto; display: flex; gap: 4px; }
.om-tf-stippen i { width: 5px; height: 5px; border-radius: 50%; background: #ccc; }
.om-tf-stippen i.aan { background: var(--inkt); }
.om-tf-tekst { margin: 0 4px 4px; line-height: 1.35; }
/* 04 the advertisement in his region, the frame as its picture, the region under it */
.om-ad { background: #e3ddd3; }
.om-advert { position: absolute; z-index: 2; left: 8%; right: 8%; top: 8%; padding: 18px; border-radius: 16px; background: #fff; color: var(--inkt); font-size: 14px; line-height: 1.35; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .35); }
.om-ad-spons { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.om-ad-spons svg { width: 14px; height: 14px; }
.om-ad-naam { margin: 0; font-size: 20px; font-weight: 660; letter-spacing: -.02em; }
.om-ad-kop { margin: 4px 0 6px; font-weight: 600; color: var(--rood-tekst); }
.om-ad-tekst { margin: 0 0 12px; color: #555; }
.om-ad-beeld { position: relative; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 10px; }
.om-ad-beeld .om-beeld { position: absolute; inset: 0; }
.om-kaart { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; overflow: hidden; background-color: #d8d1c5; background-image: linear-gradient(rgba(20, 20, 20, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 20, .07) 1px, transparent 1px); background-size: 32px 32px; }
.om-kaart b { position: absolute; right: 16px; top: 14px; font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #5a554e; }
.om-cirkel { position: absolute; left: 50%; top: 58%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 1.5px solid var(--rood); background: rgba(237, 29, 36, .1); animation: om-puls 3s var(--uit) infinite; animation-play-state: paused; }
.om-ad.is-nu .om-cirkel { animation-play-state: running; }
@keyframes om-puls { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.om-stip { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--rood); box-shadow: 0 0 0 4px rgba(237, 29, 36, .2); }
.om-stip.s1 { left: 50%; top: 58%; } .om-stip.s2 { left: 38%; top: 72%; } .om-stip.s3 { left: 62%; top: 46%; }
/* 05 the report: the frame beside what we did */
.om-rap { background: var(--houtskool); }
.om-rapport { position: absolute; left: 9%; right: 9%; top: 7%; bottom: 7%; display: flex; flex-direction: column; padding: 20px; border-radius: 16px; background: #fff; color: var(--inkt); font-size: 13px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45); }
.om-rp-strook { margin: 0 0 10px; display: flex; justify-content: space-between; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: #888; }
.om-rp-strook span:first-child { color: var(--rood-tekst); }
.om-rp-kop { margin: 0 0 14px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 660; letter-spacing: -.02em; }
.om-rp-maand { margin: 0 0 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.om-rp-maand div { padding: 12px; border-radius: 10px; background: #f4f2ef; }
.om-rp-maand dt { font-size: 11px; color: #5c5c5c; }
.om-rp-maand dd { margin: 6px 0 0; font-size: clamp(20px, 1.8vw, 28px); font-weight: 660; letter-spacing: -.025em; }
.om-rp-deden { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 14px; align-items: start; margin-top: auto; }
.om-rp-beeld { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; }
.om-rp-beeld .om-beeld { position: absolute; inset: 0; }
.om-rp-kopje { margin: 0 0 8px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; }
.om-rp-deden ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.om-rp-deden li { padding: 5px 10px; border-radius: 99px; background: #f4f2ef; font-size: 12px; }
.om-bij { margin: 14px 0 0; font-size: var(--t-meta); line-height: 1.4; color: var(--fg2); }

/* the steps: a list he reads at his own pace; the step under the reading line carries the red number */
.om-stappen { list-style: none; margin: 0; padding: 0; }
.om-stap { padding: var(--kop-y) 0; border-top: 1px solid var(--lijn); }
.om-stap:first-child { padding-top: 0; border-top: 0; }
.om-stap:last-child { padding-bottom: 0; }
.om-wk { margin: 0 0 12px; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); transition: color .4s; }
.om-stap.is-nu .om-wk { color: var(--rood); }
.om-h3 { margin: 0; font-size: var(--t-kop3); font-weight: 640; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.om-h3 em { font-style: normal; color: var(--rood); }
.om-tekst { margin: 20px 0 0; max-width: 30em; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
/* what each formula gives of it: one chip per formula, the formula's name in white */
.om-formules { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.om-formules li { display: inline-flex; align-items: baseline; gap: 8px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--lijn); border-radius: 99px; font-size: var(--t-meta); line-height: 1.3; color: var(--fg2); }
.om-formules li b { font-weight: 600; color: #fff; }
.om-formules .om-vanaf { padding-left: 0; border: 0; color: var(--fg2); }
/* the closer: --kop-y under the steps, the hand-off to the twelve weeks */
.om-slot { margin-top: var(--kop-y); padding-top: var(--kop-y); border-top: 1px solid var(--lijn); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.om-slot-zin { margin: 0; max-width: 28em; font-size: var(--t-zin); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }

/* the reel: the phone, reduced motion and no script. The five uses stand side by side, swiped, each with its own copy of the frame */
html:not(.beweeg) .om-podium, .om-reel .om-podium { display: flex; gap: 12px; height: auto; overflow: visible; overflow-x: auto; border-radius: 0; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
html:not(.beweeg) .om-podium::-webkit-scrollbar, .om-reel .om-podium::-webkit-scrollbar { display: none; }
html:not(.beweeg) .om-toep, .om-reel .om-toep { position: relative; inset: auto; flex: 0 0 min(84%, 400px); aspect-ratio: 1 / 1.05; opacity: 1; scroll-snap-align: start; }
/* a reel card is narrow: the client's pill moves to the foot, clear of the readout */
html:not(.beweeg) .om-info, .om-reel .om-info { top: auto; right: auto; left: 14px; bottom: 14px; }
html:not(.beweeg) .om-reis, .om-reel .om-reis { display: none; }
html:not(.beweeg) .om-cirkel, .om-reel .om-cirkel { animation-play-state: running; }

/* ======================= the department, on chalk ======================= */
.ma { position: relative; padding: var(--sec-y) 0; background: var(--kalk); }
.ma-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: var(--kop-y) var(--kolom-gap); align-items: start; }
.ma-kop .kop2 { max-width: 14em; }
.ma-feiten { margin: var(--kop-y) 0 0; display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.ma-feit { display: grid; grid-template-columns: minmax(150px, .32fr) minmax(0, .68fr); gap: 12px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--lijn); }
.ma-feit dt { margin: 0; display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.ma-feit dt b { font-size: var(--t-kaart); font-weight: 640; letter-spacing: -.02em; }
.ma-feit dt small { font-size: var(--t-meta); color: var(--fg2); }
.ma-g { align-items: center; }
.ma-g svg { width: 28px; height: 28px; }
.ma-feit dd { margin: 0; max-width: 30em; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
.ma-acties { margin-top: var(--kop-y); }
/* the team photo in the Orionix mount, as the home page's "Wat wij doen" has it (04-wij.css): white, a hairline and a soft pool */
.ma-foto { margin: 0; }
.ma-raam { display: block; padding: 5px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04), 0 40px 40px -24px rgba(0, 0, 0, .08); }
.ma-venster { position: relative; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 5; }
.ma-venster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ma-bij { margin: 14px 0 0; font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; color: var(--fg2); }

/* the home page's formules section stands on chalk here, as on /werkwijze/ */
.marketing-pagina .formules { background: var(--kalk); }

/* ======================= narrower screens ======================= */
@media (min-width: 761px) and (max-height: 820px) {
  .om-podium { height: min(52vh, 460px); }
}
@media (max-width: 1100px) {
  .om-grid { grid-template-columns: minmax(320px, .46fr) minmax(0, .54fr); }
  .ma-grid { grid-template-columns: minmax(0, 1fr); }
  .ma-foto { max-width: 440px; }
}
@media (max-width: 760px) {
  .om-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--kop-y); }
  /* the phone (011 §3): the reel above the list, no sticky column */
  .om-vast { position: static; }
  .om-index a { padding: 12px 12px 14px 0; }
  .om-browser { left: 6%; right: 6%; }
  .om-rp-deden { grid-template-columns: 34% minmax(0, 1fr); }
  .ma-feit { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* the list is the block's last edge before the actions: no rule under its last row (layout.md §3) */
  .om-acties, .ma-acties { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .om-rec i, .om-cirkel { animation: none; }
  .om-index a, .om-index a::after, .om-wk { transition: none; }
}