/* T3 · Sector: the sector pages (src/pagina/sector.mjs). stroming.css is loaded first and carries the tokens, the worlds, the header,
   the buttons, the customer's card, the "Zo rekenen we" drawer, the questions, the form panel, the callback sheet and the footer; this
   file holds only what a sector 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 body's 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 hero: his trade's film, full bleed ======================= */
/* the hold's height stands here, not in the script, so the page is its final height at the first paint (CLS) */
.sh { position: relative; z-index: 1; --houd: .7; }
[data-tier=lite] .sh { --houd: .5; }
.sh > .houd-podium { min-height: 640px; }
.sh-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #111; will-change: transform; transform-origin: 50% 40%; }
.sh-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the scrim is measured on every line as on the home page: darker at the foot, where the title and the lead stand */
.sh-waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .14) 38%, rgba(0, 0, 0, .74) 100%); }
/* the scroll's own darkening, a layer of the next world's night, so the card's section arrives over a frame that has already gone quiet */
.sh-donker { position: absolute; inset: 0; background: #0E0F11; opacity: 0; }
.sh-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sh-rec { position: absolute; left: var(--rand); top: clamp(92px, 13vh, 132px); margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.sh-rec i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.sh-ui.is-rec .sh-rec i { background: var(--rood); animation: sh-knip 1.1s steps(1, end) infinite; }
@keyframes sh-knip { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.sh-krediet { position: absolute; right: var(--rand); top: clamp(92px, 13vh, 132px); margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.sh-binnen { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 120px; padding-bottom: clamp(26px, 5vh, 56px); }
.sh-kicker { position: absolute; left: var(--rand); right: var(--rand); top: clamp(132px, 19vh, 176px); margin: 0; display: flex; gap: 12px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.sh-kicker span:first-child { color: var(--rood); }
.sh-titel { margin: 0 0 32px; font-size: var(--t-film); font-weight: 650; line-height: .96; letter-spacing: -.028em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.sh-titel > span { display: block; white-space: nowrap; }
.sh-titel .sh-vak { padding-left: .9em; }
.sh-onder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.sh-kern { margin: 0; max-width: 22em; font-size: var(--t-zin); font-weight: 500; line-height: 1.32; letter-spacing: -.012em; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.sh-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 540px; }
.sh-klein { margin: 0; max-width: 360px; font-size: var(--t-meta); line-height: 1.4; color: rgba(255, 255, 255, .78); }
.sh-scroll { position: absolute; right: var(--rand); top: 50%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl; color: rgba(255, 255, 255, .8); }
.sh-scroll i { width: 1px; height: 56px; background: currentColor; transform-origin: top; animation: sh-lijn 2.2s var(--inuit) infinite; }
@keyframes sh-lijn { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* without the script, on the quiet tier and with ?rust=1: no hold, the poster under the title, one screen high */
html:not(.beweeg) .sh-binnen { min-height: 100svh; }
/* the fallback head for a trade without footage: no film, the graphite ground, the title at the foot of one screen */
.sh-kaal .sh-binnen { min-height: 78svh; padding-bottom: var(--sec-y); }
.sh-kaal .sh-titel, .sh-kaal .sh-kern { text-shadow: none; }
/* the head has no frame to hang the kicker high in: it stands in flow above the title, so a three-line title never climbs over it */
.sh-kaal .sh-kicker { position: static; margin-bottom: clamp(24px, 4vh, 44px); }
.sh-kaal .sh-krediet { text-shadow: none; }
/* a long trade name ("keuken- en badkamerbouwers") wraps inside the H1 instead of running off the screen */
.sh-titel.is-lang { font-size: clamp(48px, 7.6vw, 122px); }
.sh-titel.is-lang .sh-vak { white-space: normal; }
/* the card's thumbnail for a trade without a film: an empty field, no roofer on the HVAC page */
.gk-beeld.is-leeg { background: #2A2D31 linear-gradient(104deg, transparent 60%, rgba(255, 255, 255, .07) 60.2%, transparent 96%); }
.gk-beeld.is-leeg .speel { display: none; }

/* ======================= his customer: the card and the four gaps, on the night ground ======================= */
.sk { position: relative; padding: var(--sec-y) 0; background: #0E0F11; }
.sk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 620px); gap: var(--kolom-gap); align-items: center; max-width: 1380px; }
/* the text keeps its 33em measure (in the body size), but the title may take the whole column and is sized to it, so it breaks after
   "klant" and holds two lines for every trade but the long keuken- of badkamerbouwer (Alex, 23-09: three lines, one word on the last) */
.sk-tekst { container-type: inline-size; }
.sk-tekst > :not(.kop2) { max-width: calc(33 * clamp(17px, .2vw + 14.5px, 19px)); }
.sk-titel { font-size: min(var(--t-kop2), 100cqi / var(--sk-em, 8.3)); }
.sk-gaten { list-style: none; margin: var(--kop-y) 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.sk-gaten li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); transition: color .5s; }
.sk-gaten b { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; color: var(--rood); }
.sk-gaten strong { font-weight: 640; color: var(--fg); }
/* once the card has flipped, the gaps step back and the payoff carries the weight */
.sk.is-na .sk-gaten li { color: rgba(255, 255, 255, .5); }
.sk.is-na .sk-gaten strong { color: rgba(255, 255, 255, .62); }
.sk-na { margin: 24px 0 0; max-width: 24em; font-size: var(--t-zin); font-weight: 640; line-height: 1.12; letter-spacing: -.02em; color: rgba(255, 255, 255, .5); transition: color .5s; }
.sk-na em { color: rgba(255, 255, 255, .5); transition: color .5s; }
.sk.is-na .sk-na { color: var(--fg); }
.sk.is-na .sk-na em { color: var(--rood); }
.sk-cta { margin: var(--kop-y) 0 0; }
/* the card is the home page's (stroming.css); its own tilt and player bar stay on the home page */
.sk-rechts { justify-self: end; width: 100%; }
/* the home page's shadow falls 80 px below the card, over the line under it (Alex, 22-09): here it is tighter and the line clears it */
.sk .gkaart { width: 100%; box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08); }
.sk-rechts .sk-na { margin-top: var(--kop-y); }

/* ======================= the findings, on chalk ======================= */
.sb { position: relative; padding: var(--sec-y) 0; background: var(--kalk); }
.sb-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--kolom-gap); align-items: start; }
.sb-kop { position: sticky; top: 120px; }
.sb-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.sb-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--lijn); }
.sb-n { display: inline-block; justify-self: start; align-self: start; margin-top: .55em; padding: 5px 9px; border: 1px solid var(--rood); border-radius: var(--r-knop); font-size: var(--t-label); line-height: 1; color: var(--fg); }
.sb-item h3 { margin: 0 0 14px; font-size: var(--t-kaart); font-weight: 640; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.sb-item p { margin: 0 0 8px; max-width: 30em; font-size: var(--t-sub); line-height: 1.5; color: var(--fg2); }
.sb-gevolg { font-weight: 620; color: var(--rood-tekst) !important; }

/* ======================= the break-even line, on graphite ======================= */
.rk { position: relative; padding: var(--sec-y) 0; }
.rk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kolom-gap); align-items: end; }
.rk-links .kop2 { max-width: 13em; }
.rk .zo { margin: var(--kop-y) 0 32px; max-width: 34em; }
.rk-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* the count, the section's largest number, with its unit beside it; it counts up once when it comes into view */
.rk-groot { margin: 0; display: flex; align-items: flex-end; gap: .1em; font-size: clamp(120px, 17vw, 300px); font-weight: 650; line-height: .82; letter-spacing: -.05em; }
.rk-groot b { font-weight: inherit; }
.rk-groot span { padding-bottom: .06em; font-size: .13em; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--fg2); }
/* the year: twelve months, and the months a roof lands in are red. It reads the count as a rhythm, one every so many months */
.rk-jaar { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.rk-jaar li { display: grid; gap: 10px; justify-items: center; }
.rk-jaar li i { display: block; width: 100%; height: clamp(44px, 6vh, 72px); border-radius: 8px; background: rgba(255, 255, 255, .1); }
.rk-jaar .is-dak i { background: var(--rood); transform-origin: 50% 100%; }
.rk-jaar span { font-size: var(--t-label); letter-spacing: .08em; color: var(--fg2); }
.rk-jaar .is-dak span { color: var(--fg); }
.beweeg .rk-jaar .is-dak i { transform: scaleY(0); transition: transform .7s var(--e-uit); transition-delay: calc(.25s + var(--i, 0) * .16s); }
.beweeg .rk.is-in .rk-jaar .is-dak i { transform: none; }
.rk-om { margin: 24px 0 0; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }
.rk-om b { color: var(--fg); font-weight: 640; }
.rk .eerlijk { margin-top: var(--kop-y); }

/* ======================= one client, on the day ground ======================= */
.sw { position: relative; padding: var(--sec-y) 0; background: #E9ECEF; }
.sw-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto; column-gap: var(--kolom-gap); }
/* the mount spans both rows on a subgrid (window, caption), so the text centres on the window and the caption hangs below it (Alex, 22-09) */
.sw-mount { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
.sw-tekst { grid-row: 1; align-self: center; }
/* the mount, as "Ons werk" has it (Orionix, D-131): 5 px of white, radius 24 outside and 20 inside, a hairline ring and the four-layer
   shadow, so the take reads as a print laid on the ground, not a hole cut in it */
.sw-mount { text-decoration: none; color: inherit; }
.sw-raam { --sw-h: clamp(360px, 56vh, 640px); position: relative; display: block; height: var(--sw-h); padding: 5px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04), 0 44px 48px -26px rgba(30, 40, 50, .26); }
.sw-film { position: absolute; inset: 5px; display: block; overflow: hidden; border-radius: 20px; clip-path: inset(0 round 20px); background: #c4ced4; isolation: isolate; }
/* the take is taller than its window, so the drift (core/t3.js) never shows the window's own ground */
.sw-film video { position: absolute; left: 0; right: 0; top: -9%; height: 118%; width: 100%; object-fit: cover; will-change: transform; transition: scale .7s var(--e-uit); }
.sw-mount:hover .sw-film video, .sw-mount:focus-visible .sw-film video { scale: 1.05; }
.sw-film::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, .5) 45%, rgba(11, 11, 11, .86) 100%) 0 100% / 100% 64% no-repeat; transition: background-size .7s var(--e-uit); }
.sw-mount:hover .sw-film::after { background-size: 100% 96%; }
/* a client without a take yet: the window in STBY, the two still planes on graphite, his name in the caption as on the others */
.sw-leeg { background: #1E2125 linear-gradient(104deg, transparent 60%, rgba(255, 255, 255, .05) 60.15%, transparent 96%); }
.sw-stby { position: absolute; left: 18px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.sw-stby i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.sw-volgt { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.sw-titel { position: absolute; z-index: 2; left: 23px; right: 23px; bottom: 21px; display: flex; flex-direction: column; gap: 3px; padding-right: 120px; color: #fff; }
.sw-titel b { font-size: var(--t-zin); font-weight: 640; line-height: 1.15; letter-spacing: -.015em; }
.sw-titel > span { font-size: var(--t-meta); color: rgba(255, 255, 255, .82); }
.sw-bekijk { position: absolute; right: 19px; bottom: 19px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 5px 0 15px; border-radius: 99px; background: #fff; color: var(--inkt); font-size: var(--t-label); font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); transition: background-color .4s, color .4s; }
.sw-bekijk .pijl { --kb: #fff; --kf: var(--inkt); width: 30px; height: 30px; }
.sw-bekijk .pijl::before, .sw-bekijk .pijl::after { -webkit-mask-size: 14px; mask-size: 14px; }
.sw-mount:hover .sw-bekijk, .sw-mount:focus-visible .sw-bekijk { background: var(--rood); color: #fff; }
.sw-mount:hover .sw-bekijk .pijl, .sw-mount:focus-visible .sw-bekijk .pijl { --kb: var(--rood); --kf: #fff; }
.sw-onder { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: var(--t-sub); line-height: 1.4; color: var(--fg); }
.sw-uitkomst { flex: 1 1 14em; font-weight: 560; }
.sw-onder .ptag { flex-basis: 100%; margin: 0; }
.sw-tekst .kop2 { max-width: 12em; }
.sw-quote { margin: var(--sub-y) 0 var(--kop-y); max-width: 22em; font-size: var(--t-zin); font-weight: 500; line-height: 1.35; letter-spacing: -.012em; color: var(--fg2); }

/* ======================= formules: the home page's own (stroming.css), on the chalk the ground paints there ======================= */
.formules { background: var(--kalk); }

/* ======================= vragen: the home page's list (stroming.css), this trade's questions ======================= */
.sv { background: var(--kalk); padding-top: 0; }
.sv .vragen-grid { padding-top: var(--sec-y); border-top: 1px solid var(--lijn); }
.sv .vragen-kop { top: 120px; }

/* ======================= slot: the home page's own (stroming.css) ======================= */
/* with JavaScript the callback's fields live in the sheet; until gesprek.js has lifted them they must not push the page */
.js .terugbel-voet .terugbel { display: none; }
/* the head sits on its panel, as on the T1 pages: layout.md §3's head-to-body step, 72 px on the desktop and 40 on the phone
   (Alex, 2026-09-22). The Q-23 tag keeps no room of its own, and none at all while the tags are off */
.slot-kop { margin-bottom: var(--kop-y); }
.slot-kop .slot-tbc { margin: 12px 0 0; }
[data-tags=uit] .slot-kop .slot-tbc { display: none; }

/* the phone bar, as /rekenmachine/ and /contact/ 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) {
  .sh-onder { grid-template-columns: 1fr; gap: 28px; }
  .sk-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
  .sb-grid, .rk-grid, .sw-grid { grid-template-columns: minmax(0, 1fr); }
  .sw-grid { grid-template-rows: none; row-gap: var(--kop-y); }
  .sw-mount { grid-row: auto; display: block; }
  .sw-tekst { grid-row: auto; }
  .sb-kop { position: static; }
  .rk-grid { align-items: start; }
  .rk-rechts { order: -1; }
  .rk-groot { font-size: clamp(96px, 22vw, 200px); }
}
@media (max-width: 760px) {
  .sh-kicker { top: 120px; }
  .sh-titel { font-size: 15vw; margin-bottom: 24px; }
  .sh-titel.is-lang { font-size: 10vw; }
  .sh-titel .sh-vak { padding-left: 0; }
  .sh-onder { grid-template-columns: 1fr; gap: 22px; }
  .sh-cta { max-width: none; }
  .sh-scroll, .sh-krediet .ptag { display: none; }
  .sh-rec, .sh-krediet { top: auto; bottom: auto; }
  .sh-rec { top: 84px; }
  .sh-krediet { top: 84px; max-width: 55vw; text-align: right; white-space: normal; }
  .sk-grid { grid-template-columns: 1fr; gap: 28px; }
  /* the phone reads label, heading, the card with its line, then the four gaps: the text column opens up around the card */
  .sk-grid { gap: 0; }
  .sk-tekst { display: contents; }
  .sk-tekst > .sec-label, .sk-tekst > .kop2, .sk-tekst > .sub { order: -2; }
  .sk-rechts { order: -1; margin: 28px 0 8px; }
  .sk-gaten li { padding: 12px 0; }
  .sb-item { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .sb-n { margin-top: 0; }
  .rk-groot { font-size: 36vw; }
  .rk-jaar { gap: 3px; }
  .rk-jaar li i { height: 40px; border-radius: 5px; }
  .rk-jaar span { font-size: var(--t-meta); letter-spacing: 0; }
  .rk-acties .knop { height: auto; min-height: 56px; padding-block: 9px; white-space: normal; }
  .sw-raam { --sw-h: min(52svh, 105vw); }
  .sw-titel { left: 19px; right: 19px; bottom: 17px; padding-right: 100px; }
  .s-balk { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-scroll i, .sh-ui.is-rec .sh-rec i { animation: none !important; }
  .rk-jaar .is-dak i, .s-balk, .sw-film video, .sw-film::after { transition: none; }
}
[data-tier=stil] .sh-scroll i { animation: none; }

/* ======================= the hub /bouwsector/ (src/pagina/bouwsector.mjs): eight lines of giant type over the film of the line under the pointer ======================= */
.hub { position: relative; z-index: 1; }
.hub-podium { position: relative; min-height: 100vh; min-height: 100svh; display: flex; }
.hub-films { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #111; }
.hub-beeld { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s var(--e-uit); }
.hub-beeld.is-aan { opacity: 1; }
.hub-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a trade without its film yet: a neutral field, the ground's two still planes on graphite (D-014: no other trade's footage, no stock) */
.hub-leeg { background: linear-gradient(104deg, transparent 64%, rgba(255, 255, 255, .05) 64.15%, transparent 96%), linear-gradient(116deg, transparent 38%, rgba(255, 255, 255, .035) 38.15%, transparent 78%) #15171A; }
/* the scrim is heavier than a sector page's, because the whole list stands over the frame */
.hub-films .sh-waas { background: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .42) 40%, rgba(0, 0, 0, .74) 100%); }
.hub-ui { z-index: 2; }
.hub-binnen { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 120px; padding-bottom: clamp(22px, 4vh, 48px); }
.hub-titel { margin: 0 0 clamp(12px, 2.2vh, 24px); font-size: var(--t-zin); font-weight: 650; line-height: 1.1; letter-spacing: -.02em; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.hub-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .26); }
.hub-lijst a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 36px; align-items: center; column-gap: 18px; padding: clamp(3px, .6vh, 9px) 0; border-bottom: 1px solid rgba(255, 255, 255, .26); text-decoration: none; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 14px rgba(0, 0, 0, .5); transition: color .45s; }
.hub-lijst b { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; }
.hub-vak { font-size: clamp(34px, 6.1vh, 84px); font-weight: 650; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.hub-vak em { font-style: normal; color: var(--rood); opacity: 0; transition: opacity .35s; }
.hub-meta { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; }
.hub-lijst .pijl { --kf: var(--rood); --kb: #fff; width: 36px; height: 36px; opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .45s var(--e-uit); }
.hub-lijst .pijl::before, .hub-lijst .pijl::after { -webkit-mask-size: 16px; mask-size: 16px; }
.hub-lijst a.is-aan, .hub-lijst a:hover, .hub-lijst a:focus-visible { color: #fff; }
.hub-lijst a.is-aan .hub-vak em { opacity: 1; }
.hub-lijst a.is-aan .pijl { opacity: 1; transform: none; }
.hub-lijst a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

/* ======================= "Kies uw vak.": the eight trades on still paper, vignette and text in zig-zag (D-250; core/vignet.css) ======================= */
.vk { position: relative; padding: var(--sec-y) 0; background: var(--kalk); }
.vk-lijst { margin-top: var(--kop-y); }
.vk-rij { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--kolom-gap); align-items: center; }
.vk-rij + .vk-rij { margin-top: clamp(64px, 8vw, 128px); }
.vk-rij:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.vk-rij:nth-child(even) .vg { order: 2; }
.vk-tekst { max-width: 26em; }
.vk-rij:nth-child(even) .vk-tekst { justify-self: end; }
.vk-kicker { margin: 0 0 12px; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); }
.vk-naam { margin: 0; font-size: var(--t-kop2); font-weight: 650; line-height: 1; letter-spacing: -.028em; }
.vk-naam em { font-style: normal; color: var(--rood); }
.vk-kern { margin: 16px 0 22px; font-size: var(--t-sub); line-height: 1.45; color: var(--fg2); }

/* ======================= one approach, on chalk: the findings' own layout (sb), plus the line for a trade outside the eight ======================= */
.hb-anders { margin: var(--kop-y) 0 0; max-width: 32em; font-size: var(--t-sub); line-height: 1.5; color: var(--fg2); }

@media (max-width: 1100px) {
  .hub-vak { font-size: clamp(30px, 5.4vh, 64px); }
}
@media (max-width: 760px) {
  .vk-rij, .vk-rij:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vk-rij:nth-child(even) .vg { order: 0; }
  .vk-rij:nth-child(even) .vk-tekst { justify-self: start; }
  .vk-rij + .vk-rij { margin-top: 64px; }
  .hub-lijst a { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 8px 0; }
  .hub-meta, .hub-lijst .pijl { display: none; }
  .hub-vak { font-size: clamp(26px, 8.6vw, 40px); white-space: normal; }
  .hub-ui .sh-krediet .ptag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-beeld, .hub-lijst a, .hub-vak em { transition: none; }
}