@font-face {
  font-family: 'Mundial';

  src: url('../assets/fonts/mundial-regular.otf') format('opentype');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Mundial';

  src: url('../assets/fonts/mundial-demibold.otf') format('opentype');

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Mundial';

  src: url('../assets/fonts/mundial-bold.otf') format('opentype');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

/**
 * Logo slider block — auto-scrolling partner-logo marquee.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both. Motion
 * is a compositor-driven CSS animation; src/js/logo-slider.js only sizes it
 * (--hrs-logo-shift / --hrs-marquee-duration) and pauses it off-screen.
 */

@keyframes hrs-logo-marquee {
  from {
    transform: translateX( 0 );
  }

  to {
    transform: translateX( calc( -1 * var( --hrs-logo-shift, 50% ) ) );
  }
}

/**
 * Foto/Title Scroller block — scroll-driven step list with cross-fading photos.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both. Three
 * visual modes share this file:
 *
 *   - base (mobile / no-JS / reduced motion): steps stack, image shown inline.
 *   - .is-scroll (desktop front end, toggled by src/js/foto-title-scroller.js):
 *     the section is pinned (CSS position: sticky) and the active step is driven
 *     by scroll progress; image + description cross-fade on the right.
 *   - .hrs-scroller--preview (block editor): the resting two-column state.
 */

/**
 * Card Scroller block — Figma 154:2257 ("herstel typen").
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (editor
 * canvas) so the server-rendered block looks identical in both.
 *
 * Desktop: a normal-scrolling section — the left list rotates on a timer and
 * every row is a clickable button, while ONE fixed card stays on the right
 * (src/js/card-scroller.js). Mobile / no-JS / reduced motion: every type is
 * shown open.
 */

/**
 * CTA card block — two-column call-to-action (photo + red panel).
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both. No JS;
 * the hover affordances are pure CSS. Stacks to a single column below lg.
 */

/**
 * Ervaring (experience) block — contained intro with stats + a full-bleed photo band.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both. No JS;
 * the photo band is a plain flex row that becomes a horizontal scroller below lg.
 * Keep all rules (incl. @media) inside @layer components so the cascade holds.
 */

/**
 * Logo animatie blok — hero with an assembling brand monogram.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both. Layout:
 * a heading + intro/CTA text band on top, then a full-bleed photo with the
 * blueprint grid lines and the white brand monogram over its left side. The
 * monogram assembles bar-by-bar: every bar wipes in via clip-path along its own
 * long axis, staggered bottom-left → top-right (à la the vanaalst.com logo
 * overlay). src/js/logo-animatie.js adds --js (initial hidden state) and plays
 * the GSAP intro when scrolled into view. Without JS / in the editor / under
 * reduced-motion the monogram is shown fully assembled and static.
 *
 * Grid-line positions mirror the logo slider / menu / footer chrome columns so
 * everything stays aligned across the site.
 */

/**
 * Hover foto's block — featured photo card + grey card, then staggered text CTAs
 * whose photo follows the cursor on hover (src/js/hover-fotos.js).
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview). Keep every rule (incl. @media) inside @layer components so the
 * cascade holds and the editor canvas matches the front end. Variant modifier
 * classes are emitted as full literals in render.php so Tailwind keeps them.
 */

/**
 * Project overzicht blok — asymmetric project masonry.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both. Cards
 * live in a 4-column grid; a "Groot" project spans 2 columns and gets a wider
 * photo, and items-start lets shorter cards sit high so the rows stagger like the
 * Figma design. Each card is a featured photo with white category pills overlaid
 * top-left, a title and a meta list joined by small red square dots.
 */

/**
 * Parallax glider block — testimonial cards gliding across a vertical grid.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (editor
 * preview) so the server-rendered block looks identical in both. The cards rest
 * in a 4-column grid aligned to the chrome blueprint lines; src/js/parallax-
 * glider.js then drifts them vertically (up/down) on scroll (desktop only).
 * Motion is pure JS — without it the cards stay in these static positions.
 */

/**
 * Titel + tekst blok — two-column intro.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both. A large
 * heading on the left and a paragraph on the right, justified to the container
 * edges on desktop; stacked on mobile. Fonts/colours from the theme tokens.
 */

/**
 * FAQ blok — two-column accordion (Figma node 136:10615).
 *
 * Title in chrome column 1 (336), accordion spans columns 3–4 (720). Vertical
 * lines use the canonical site columns — same as UPS, title-text, footer.
 *
 * Spacing follows the design exactly: the first row hugs the heading top, open
 * rows keep a 16px gap between question and answer, the plus icon morphs into a
 * minus, and each separator rule draws in left→right on scroll (GSAP, faq.js).
 */

/**
 * Breadcrumbs (SEOPress kruimelpad).
 *
 * Output globally after the header (header.php → hrs_breadcrumbs(), see
 * inc/breadcrumbs.php) on every view except the front page. Styled to the Figma
 * (node 129:5795): 14px Mundial, "Home | Diensten", links + separator at 50%
 * opacity and the current page at 75%, aligned to the site container.
 *
 * SEOPress renders <nav><ol class="breadcrumb"><li>…</li></ol></nav> and injects
 * its own separator via a \3c style> rule on `.breadcrumb li::after`; the rules
 * below override it (higher specificity) with the design's "|".
 */

/**
 * UPS blok — heading + intro, then a grid of numbered signals.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview). Desktop layout matches Figma node 109:5165: 4 chrome columns
 * (336 / 360 / 360 / 360), two rows of signals, red CTA in the last cell.
 */

/**
 * Reparatie blok — grey section with intro + heading, then a photo + repair steps.
 *
 * Desktop layout matches Figma node 112:5251 on the canonical chrome grid
 * (336 / 360 / 360 / 368): intro + photo col 1, empty col 2, heading + steps cols 3–4.
 */

/**
 * X Houtrot blok — herstel of vervangen (Figma node 118:1025).
 *
 * Grey full-bleed section on the canonical chrome grid. Header matches UPS;
 * compare row splits cols 1–2 vs 3–4 with an 80px gutter on line 3.
 */

/**
 * Banner block — full-bleed red CTA bar (Figma node 136:9532).
 *
 * Heading + intro on the chrome grid (cols 1–2 / 3), white button in col 4.
 */

/**
 * Vacatures overzicht blok — Figma 142:12148.
 *
 * Two vacancy cards (small left, large right) + open sollicitatie red panel.
 */

/**
 * Voor wie blok — doelgroep section (Figma 136:9681 foto rechts / 136:9682 foto links).
 *
 * One section, two mirrored layouts on the canonical chrome grid
 * (336 / 360 / 360 / 368). A single 4-column × 2-row grid places the header
 * (heading + ghost button) on row 1, the two body columns (challenge + checklist)
 * on row 2, and the tall photo on the opposite outer column spanning both rows.
 * The --media-right / --media-left modifier swaps which side the photo sits on.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (editor
 * preview). Background colour is driven by CSS vars so the grid lines, borders
 * and text adapt to the white / grey / black variants.
 */

/**
 * Contact blok — two-column contact section (Figma 134:8844).
 *
 * Imported by BOTH src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block matches in both. Left column
 * (chrome cols 1–2): heading + intro + an embedded WS Form, restyled here to
 * the house style. Right column (chrome col 4): contact details + a photo.
 * Keep every rule inside @layer components so the cascade holds.
 */

/**
 * Werken bij blok — two-column careers form section (Figma 147:12887).
 *
 * Imported by BOTH src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block matches in both. Left column
 * (chrome cols 1–2): heading + intro. Right column (chrome cols 3–4): an
 * embedded WS Form, restyled here to the house style (white fields, a red
 * submit with a circled arrow). Keep every rule inside @layer components so the
 * cascade holds.
 */

/**
 * Houtrot tekst blok — two-column content section (Figma 140:11914).
 *
 * A heading + multi-paragraph body on one side and a tall (portrait) photo on the
 * other, justified to the chrome grid on desktop and stacked on mobile. On desktop
 * the section sits on the canonical chrome grid (336 / 360 / 360 / 368): the text
 * spans the first two columns, the empty third column is the gutter, and the photo
 * fills the last column. The --media-left / --media-right modifier swaps the side
 * the photo sits on.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both.
 */

/**
 * Duurzaam hersteld blok — two-column content + results checklist (Figma 140:11915).
 *
 * A heading, multi-paragraph body and bordered checklist on one side and a tall
 * (portrait) photo on the other, on the canonical chrome grid (336 / 360 / 360 /
 * 368). Default layout: foto links (photo col 1, content cols 3-4). The
 * --media-left / --media-right modifier swaps the side the photo sits on.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (block
 * editor preview) so the server-rendered block looks identical in both.
 */

/**
 * Vacature blok — single vacancy section in three parts
 * (Figma 147:12805 / 172:3214 / 147:12811).
 *
 *   1. Pinned "lock & scroll" stepper: numbered titles light up one at a time
 *      while the matching checklist + photo cross-fade on the right. Pinning is
 *      CSS (position: sticky); src/js/vacature-blok.js drives the active step from
 *      scroll progress. Mobile / no-JS / reduced-motion stacks each step with its
 *      checklist + photo inline (base mode), so nothing is lost.
 *   2. Full-bleed proportional photo band (each tile's width follows its ratio).
 *   3. Image + heading + body text (photo left), on the canonical chrome grid.
 *
 * Imported by both src/css/main.css (front end) and src/css/editor.css (editor
 * preview) so the server-rendered block looks identical in both.
 */

/**
 * 404 (page not found) template — blueprint-style error page.
 *
 * A big red 404 + heading on the chrome grid, the theme's circled-arrow CTA back
 * home and quick links to the main sections. Left-aligned on the grid like the
 * blocks. Imported by src/css/main.css only (the 404 has no editor view).
 * Markup lives in 404.php (theme root).
 */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Mundial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* Reserve the scrollbar gutter so locking body scroll (menu open) does not
	 * shift the page horizontally. */

html {
  scrollbar-gutter: stable;
}

/* Canonical chrome grid insets — mirror .hrs-container padding at each
	 * breakpoint (px-4 / px-6 / px-12). Used by the mobile centre line system. */

:root {
  --hrs-chrome-inset: 1rem;
  --hrs-chrome-span: calc( 100% - 2rem );
}

@media (min-width: 640px) {
  :root {
    --hrs-chrome-inset: 1.5rem;
    --hrs-chrome-span: calc( 100% - 3rem );
  }
}

@media (min-width: 1024px) {
  :root {
    --hrs-chrome-inset: 3rem;
    --hrs-chrome-span: calc( 100% - 6rem );
  }
}

.hrs-body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: Mundial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-right: 3rem;
    padding-left: 3rem;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1480px) {
  .container {
    max-width: 1480px;
  }
}

.hrs-logo-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  .hrs-logo-slider {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.hrs-logo-slider__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Decorative vertical grid lines on the chrome blueprint columns (same grid
	 * as the menu/footer). Desktop only; the logos scroll over them. Figma
	 * 109:719 — columns at 48 / 384 / 744 / 1104 / 1472 within the 1520px chrome
	 * box, so the outer lines sit on the content insets and the inner ones land
	 * proportionally (they stay exact at the 1520px max width). */

.hrs-logo-slider__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-logo-slider__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-logo-slider__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-logo-slider__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-logo-slider__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-logo-slider__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-logo-slider__line--5 {
  right: var( --hrs-chrome-inset );
}

.hrs-logo-slider__eyebrow {
  margin: 0px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(22 22 21 / 0.5);
}

/* Clipped viewport with soft fade-outs at both edges. */

.hrs-logo-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent );
  mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent );
}

.hrs-logo-slider__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  gap: var( --hrs-logo-gap, 80px );
  will-change: transform;
}

/* One repeat unit. Item gap matches the track's group gap, so the spacing is
	 * uniform across the seam and a translate of exactly one group width loops
	 * seamlessly. */

.hrs-logo-slider__group {
  margin: 0px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0px;
  list-style: none;
  gap: var( --hrs-logo-gap, 80px );
}

.hrs-logo-slider__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.hrs-logo-slider__link {
  display: inline-flex;
  align-items: center;
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-logo-slider__link:hover {
  opacity: 0.7;
}

.hrs-logo-slider__img {
  display: block;
  width: auto;
  max-width: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -o-object-fit: contain;
     object-fit: contain;
  height: var( --hrs-logo-height, 56px );
}

/* Motion — disabled on the static variant (editor preview / autoplay off). */

.hrs-logo-slider:not( .hrs-logo-slider--static ) .hrs-logo-slider__track {
  animation: hrs-logo-marquee var( --hrs-marquee-duration, 30s ) linear infinite;
}

.hrs-logo-slider--reverse .hrs-logo-slider__track {
  animation-direction: reverse;
}

.hrs-logo-slider--pause-hover:hover .hrs-logo-slider__track {
  animation-play-state: paused;
}

/* Greyscale logos that regain colour on hover. */

.hrs-logo-slider--grayscale .hrs-logo-slider__img {
  opacity: 0.7;
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.hrs-logo-slider--grayscale .hrs-logo-slider__item:hover .hrs-logo-slider__img {
  opacity: 1;
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* Static variant: no motion, no fade mask, logos wrap and centre. */

.hrs-logo-slider--static .hrs-logo-slider__viewport {
  -webkit-mask-image: none;
  mask-image: none;
}

.hrs-logo-slider--static .hrs-logo-slider__track,
	.hrs-logo-slider--static .hrs-logo-slider__group {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  row-gap: 2rem;
}

.hrs-logo-slider__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(22 22 21 / 0.5);
}

/* Respect reduced-motion: freeze the marquee, drop the duplicate group and
	 * show a single wrapped, centred row. Kept inside @layer components so it
	 * orders after the base rules above — the partial is @imported before
	 * @tailwind, so only @layer content is relocated into the components layer
	 * (a top-level @media would land before the base rules and lose the cascade). */

@media ( prefers-reduced-motion: reduce ) {
  .hrs-logo-slider__track,
		.hrs-logo-slider__group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    row-gap: 2rem;
  }

  .hrs-logo-slider__track {
    animation: none !important;
    transform: none !important;
  }

  .hrs-logo-slider__group[aria-hidden="true"] {
    display: none;
  }
}

.hrs-scroller {
  --hrs-bg: #ffffff;
  --hrs-fg: #161615;
  --hrs-border: rgba( 22, 22, 21, 0.1 );
  position: relative;
  background-color: var( --hrs-bg );
  color: var( --hrs-fg );
}

.hrs-scroller--bg-grey {
  --hrs-bg: #efefee;
}

.hrs-scroller--bg-black {
  --hrs-bg: #161615;
  --hrs-fg: #ffffff;
  --hrs-border: rgba( 255, 255, 255, 0.16 );
}

/* Tall enough (steps set --hrs-steps via JS) to give the pin its scroll budget. */

.hrs-scroller.is-scroll {
  min-height: calc( 100vh + ( var( --hrs-steps, 3 ) * 60vh ) );
}

.hrs-scroller__pin {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-scroller__pin {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.hrs-scroller.is-scroll .hrs-scroller__pin {
  position: sticky;
  top: 0px;
  display: flex;
  height: 100vh;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Keep the pinned content clear of the WordPress admin bar when logged in. */

.admin-bar .hrs-scroller.is-scroll .hrs-scroller__pin {
  top: 32px;
  height: calc( 100vh - 32px );
}

/* Vertical chrome grid lines — same columns as the other blocks. The colour
	 * follows --hrs-border, so it adapts to the white / grey / black background.
	 * Sits in the pinned stage (full height) behind the content. Desktop only. */

.hrs-scroller__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-scroller__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: var( --hrs-border );
}

.hrs-scroller__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-scroller__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-scroller__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-scroller__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-scroller__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-scroller__content {
  position: relative;
  z-index: 1;
}

/* Optional heading block. */

.hrs-scroller__head {
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .hrs-scroller__head {
    margin-bottom: 3.5rem;
  }
}

.hrs-scroller__eyebrow {
  margin: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.hrs-scroller__heading {
  margin: 0px;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .hrs-scroller__heading {
    font-size: 3rem;
    line-height: 1;
  }
}

/* Layout: stacked by default, two columns in scroll/preview mode. */

.hrs-scroller__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .hrs-scroller.is-scroll .hrs-scroller__inner,
	.hrs-scroller--preview .hrs-scroller__inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 4rem;
  }
}

@media (min-width: 1280px) {
  .hrs-scroller.is-scroll .hrs-scroller__inner,
	.hrs-scroller--preview .hrs-scroller__inner {
    gap: 6rem;
  }
}

.hrs-scroller__list {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0px;
}

@media (min-width: 1024px) {
  .hrs-scroller.is-scroll .hrs-scroller__list,
	.hrs-scroller--preview .hrs-scroller__list {
    max-width: 696px;
    flex: 1 1 0%;
  }
}

.hrs-scroller__item {
  border-bottom-width: 1px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .hrs-scroller__item {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.hrs-scroller__item {
  border-color: var( --hrs-border );
}

.hrs-scroller__item:last-child {
  border-bottom-width: 0px;
}

/* Dim inactive steps only when the scroll interaction (or its preview) is on. */

.hrs-scroller.is-scroll .hrs-scroller__item,
	.hrs-scroller--preview .hrs-scroller__item {
  border-bottom-width: 0px;
  opacity: 0.3;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.hrs-scroller.is-scroll .hrs-scroller__item.is-active,
	.hrs-scroller--preview .hrs-scroller__item.is-active {
  opacity: 1;
}

.hrs-scroller__row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.hrs-scroller__num {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .hrs-scroller__num {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.hrs-scroller__title {
  margin: 0px;
  font-size: 28px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hrs-scroller__title {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .hrs-scroller__title {
    font-size: 40px;
  }
}

/* Scroll/preview mode: the active title grows large and crisp while the others
	 * shrink and recede into the background — a clean focus on the current step.
	 * font-size (not transform) so the list reflows naturally; exactly one title is
	 * large at a time, so the total height — and the vertical centring — stays put. */

.hrs-scroller.is-scroll .hrs-scroller__title,
	.hrs-scroller--preview .hrs-scroller__title {
  transition: font-size 0.5s ease-out, opacity 0.5s ease-out;
}

@media (min-width: 1024px) {
  .hrs-scroller.is-scroll .hrs-scroller__title,
		.hrs-scroller--preview .hrs-scroller__title {
    font-size: clamp( 1.25rem, 1.7vw, 1.625rem );
    white-space: nowrap;
  }

  .hrs-scroller.is-scroll .hrs-scroller__item.is-active .hrs-scroller__title,
		.hrs-scroller--preview .hrs-scroller__item.is-active .hrs-scroller__title {
    font-size: clamp( 2rem, 3.3vw, 3rem );
  }
}

/* Inline media — shown in the stacked (base) mode only. */

.hrs-scroller__item-media {
  margin-top: 1.5rem;
  display: flex;
  max-width: 420px;
  flex-direction: column;
  gap: 1.5rem;
}

.hrs-scroller.is-scroll .hrs-scroller__item-media,
	.hrs-scroller--preview .hrs-scroller__item-media {
  display: none;
}

/* Right-hand media panel — shown in scroll/preview mode only. */

.hrs-scroller__media {
  display: none;
}

.hrs-scroller.is-scroll .hrs-scroller__media,
	.hrs-scroller--preview .hrs-scroller__media {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .hrs-scroller.is-scroll .hrs-scroller__media,
	.hrs-scroller--preview .hrs-scroller__media {
    width: 367px;
    flex-shrink: 0;
  }
}

.hrs-scroller__figures {
  display: grid;
}

/* Image box — shared by inline figures and panel figures. */

.hrs-scroller__figure,
	.hrs-scroller__figure-box {
  position: relative;
  aspect-ratio: 360/513;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

/* Panel figures stack in one grid cell and cross-fade. */

.hrs-scroller__figures .hrs-scroller__figure {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  grid-area: 1 / 1;
}

.hrs-scroller__figures .hrs-scroller__figure.is-active {
  opacity: 1;
}

.hrs-scroller__img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-scroller__img--placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

/* Descriptions. */

.hrs-scroller__text {
  margin: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
}

.hrs-scroller__item-media .hrs-scroller__text {
  opacity: 0.75;
}

.hrs-scroller__texts {
  display: grid;
}

.hrs-scroller__texts .hrs-scroller__text {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  grid-area: 1 / 1;
}

.hrs-scroller__texts .hrs-scroller__text.is-active {
  opacity: 0.75;
}

/* =======================================================================
	 * Mobile (< lg) pinned frame — Figma 74:3083.
	 *
	 * The same scroll-spy as desktop, stacked vertically into ONE pinned frame
	 * instead of two columns: the compact step list on top, the cross-fading
	 * photo + description filling the space below. Everything is sized to fit a
	 * single visible viewport (100dvh) so nothing is cropped while pinned — the
	 * rows stay compact and the photo takes whatever height is left over (flex),
	 * so on short phones it scales down rather than pushing content off-screen.
	 *
	 * These rules sit after every base / desktop is-scroll rule and are wrapped
	 * in a max-width query, so they win below lg and leave the desktop two-column
	 * stage (and the editor --preview state) untouched.
	 * ==================================================================== */

@media ( max-width: 1023px ) {
  /* A slightly snappier scroll budget per step than desktop's 60vh. */

  .hrs-scroller.is-scroll {
    min-height: calc( 100vh + ( var( --hrs-steps, 3 ) * 50vh ) );
  }

  /* The chrome grid lines frame the desktop two columns; the mobile frame
		 * is a single stack (the design shows none), so drop them here. */

  .hrs-scroller.is-scroll .hrs-scroller__lines {
    display: none;
  }

  /* Pin to the VISIBLE viewport (dvh dodges the mobile URL-bar 100vh trap)
		 * and stack vertically — overrides the shared is-scroll pin above, which
		 * is a centred row sized to h-screen. */

  .hrs-scroller.is-scroll .hrs-scroller__pin {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100dvh;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  /* The front-end admin bar is 46px tall on small screens. */

  .admin-bar .hrs-scroller.is-scroll .hrs-scroller__pin {
    top: 46px;
    height: calc( 100dvh - 46px );
  }

  /* Fill the pin and lay everything out as one flex column. */

  .hrs-scroller.is-scroll .hrs-scroller__content {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    flex-direction: column;
  }

  /* Optional heading stays compact so the frame keeps its room (the design
		 * has none — the default Werkwijze instance renders no head). */

  .hrs-scroller.is-scroll .hrs-scroller__head {
    flex: none;
    margin-bottom: 1rem;
  }

  .hrs-scroller.is-scroll .hrs-scroller__inner {
    flex: 1;
    min-height: 0;
    gap: 1.5rem;
  }

  /* Step list — compact, all steps visible at once, dividers like the
		 * design. Restores the row borders the desktop is-scroll rule drops. */

  .hrs-scroller.is-scroll .hrs-scroller__list {
    flex: none;
  }

  .hrs-scroller.is-scroll .hrs-scroller__item {
    border-bottom-width: 1px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .hrs-scroller.is-scroll .hrs-scroller__item:last-child {
    border-bottom-width: 0;
  }

  .hrs-scroller.is-scroll .hrs-scroller__row {
    gap: 0.75rem;
  }

  .hrs-scroller.is-scroll .hrs-scroller__num {
    font-size: 0.875rem;
  }

  .hrs-scroller.is-scroll .hrs-scroller__title {
    font-size: clamp( 1.125rem, 4.8vw, 1.5rem );
    line-height: 1.1;
    white-space: normal;
  }

  /* Media — the photo switcher fills the height left under the list. */

  .hrs-scroller.is-scroll .hrs-scroller__media {
    flex: 1;
    min-height: 0;
    gap: 1rem;
  }

  /* Photo stack absorbs all the leftover space. Drop the desktop
		 * aspect-ratio box and stack the figures absolutely so they fill it and
		 * cross-fade; the <img> stays object-cover (so the photo itself, not the
		 * layout, is the only thing ever cropped — exactly like the design). */

  .hrs-scroller.is-scroll .hrs-scroller__figures {
    position: relative;
    display: block;
    flex: 1;
    min-height: 0;
  }

  .hrs-scroller.is-scroll .hrs-scroller__figures .hrs-scroller__figure {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: auto;
  }

  /* Description sits under the photo at its natural height. */

  .hrs-scroller.is-scroll .hrs-scroller__texts {
    flex: none;
  }
}

/* Respect reduced-motion: no cross-fades. Kept inside @layer components so it
	 * orders after the rules above — the partial is @imported before @tailwind, so
	 * only @layer content is relocated into the components layer (a top-level
	 * @media would land before the base rules and lose the cascade). */

@media ( prefers-reduced-motion: reduce ) {
  .hrs-scroller__item,
		.hrs-scroller__figure,
		.hrs-scroller__text {
    transition: none;
  }
}

.hrs-card-scroller {
  --hrs-bg: #ffffff;
  --hrs-fg: #161615;
  --hrs-border: rgba( 22, 22, 21, 0.1 );
  position: relative;
  background-color: var( --hrs-bg );
  color: var( --hrs-fg );
}

.hrs-card-scroller--bg-grey {
  --hrs-bg: #efefee;
}

.hrs-card-scroller--bg-black {
  --hrs-bg: #161615;
  --hrs-fg: #ffffff;
  --hrs-border: rgba( 255, 255, 255, 0.16 );
}

/* Padded band — the section scrolls naturally; only the fixed card on the
	 * right sticks (see __media below). Padding matches voor-wie / ups. */

.hrs-card-scroller__pin {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__pin {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

/* Vertical chrome grid lines — full section height (sibling of __pin). */

.hrs-card-scroller__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-card-scroller__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: var( --hrs-border );
}

.hrs-card-scroller__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-card-scroller__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-card-scroller__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-card-scroller__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-card-scroller__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-card-scroller__content {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1520px;
  padding-inline: var( --hrs-chrome-inset );
}

/* ---- Header: heading cols 1–3, intro col 4 (Figma 154:2258) ---------------- */

.hrs-card-scroller__head {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__head {
    margin-bottom: 5rem;
    gap: 4rem;
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: end;
  }

  .hrs-card-scroller__heading {
    grid-column: 1 / 4;
    max-width: 725px;
  }

  .hrs-card-scroller__intro {
    grid-column: 4;
    width: 100%;
  }
}

.hrs-card-scroller__heading {
  margin: 0px;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hrs-card-scroller__heading {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .hrs-card-scroller__heading {
    font-size: 64px;
  }
}

.hrs-card-scroller__heading-accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-card-scroller__intro {
  margin: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  opacity: 0.75;
}

/* ---- List cols 1–3, fixed card col 4 (Figma 154:2261) -------------------- */

.hrs-card-scroller__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
    gap: 0;
  }

  .hrs-card-scroller__list {
    grid-column: 1 / 4;
    width: 100%;
    max-width: 696px;
  }

  .hrs-card-scroller__media {
    grid-column: 4;
    width: 100%;
  }
}

.hrs-card-scroller__list {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0px;
}

.hrs-card-scroller__item {
  border-bottom-width: 1px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__item {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.hrs-card-scroller__item {
  border-color: var( --hrs-border );
}

.hrs-card-scroller__item:last-child {
  border-bottom-width: 0px;
}

/* The row is a real <button> (click selects the step) — reset the UA button
	 * chrome so it reads as the plain numbered row from the design. */

.hrs-card-scroller__row {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 1rem;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  text-align: left;
  color: inherit;
  font: inherit;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__row {
    cursor: pointer;
  }
}

.hrs-card-scroller__num {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  opacity: 0.4;
}

.hrs-card-scroller__title {
  margin: 0px;
  font-size: 28px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hrs-card-scroller__title {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .hrs-card-scroller__title {
    font-size: 40px;
  }
}

/* Description under the title. Mobile: always shown. Desktop: dims every row
	 * except the active type and collapses the description (grid-rows 0fr → 1fr),
	 * so exactly one type is "open" and the list height stays steady as it swaps. */

.hrs-card-scroller__desc {
  max-width: 484px;
  padding-top: 1.5rem;
  padding-left: 2.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  opacity: 0.75;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__row {
    opacity: 0.3;
    transition: opacity 0.45s ease-out;
  }

  .hrs-card-scroller__item.is-active .hrs-card-scroller__row {
    opacity: 1;
  }

  .hrs-card-scroller__desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s ease-out, opacity 0.45s ease-out;
  }

  .hrs-card-scroller__item.is-active .hrs-card-scroller__desc-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .hrs-card-scroller__desc {
    min-height: 0;
    overflow: hidden;
  }
}

/* Fixed card — desktop: col 4; mobile: full width between grid lines. */

.hrs-card-scroller__media {
  width: 100%;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__media {
    position: sticky;
    top: 6rem;
    align-self: flex-start;
  }

  .admin-bar .hrs-card-scroller__media {
    top: calc( 6rem + 32px );
  }
}

/* Mobile (Figma): heading → list → intro → card, flush to chrome lines. */

@media ( max-width: 1023px ) {
  .hrs-card-scroller__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .hrs-card-scroller__head,
		.hrs-card-scroller__inner {
    display: contents;
  }

  .hrs-card-scroller__heading {
    order: 1;
  }

  .hrs-card-scroller__list {
    order: 2;
  }

  .hrs-card-scroller__intro {
    order: 3;
    width: 100%;
  }

  .hrs-card-scroller__media {
    order: 4;
  }

  .hrs-card-scroller__head {
    margin-bottom: 0;
  }

  .hrs-card-scroller__inner {
    gap: 0;
  }
}

/* ---- The card itself: photo on top, red panel below ----------------------- */

.hrs-card-scroller__card {
  display: flex;
  flex-direction: column;
}

.hrs-card-scroller__figure {
  position: relative;
  aspect-ratio: 360/335;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

.hrs-card-scroller__img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-card-scroller__img--placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

.hrs-card-scroller__panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-card-scroller__panel-title {
  margin: 0px;
  font-size: 28px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .hrs-card-scroller__panel-title {
    font-size: 40px;
  }
}

.hrs-card-scroller__panel-text {
  margin: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.9);
}

/* CTA — white-circle arrow, like the menu / rode-kader CTAs. */

.hrs-card-scroller__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-card-scroller__cta:hover {
  opacity: 0.9;
}

.hrs-card-scroller__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-card-scroller__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-card-scroller__cta:hover .hrs-card-scroller__cta-icon svg {
  transform: translateX( 2px );
}

/* Respect reduced motion: no fades / collapses. Kept inside @layer components. */

@media ( prefers-reduced-motion: reduce ) {
  .hrs-card-scroller__row,
		.hrs-card-scroller__desc-wrap,
		.hrs-card-scroller__card,
		.hrs-card-scroller__cta-icon svg {
    transition: none;
  }
}

.hrs-cta-card {
  position: relative;
}

.hrs-cta-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .hrs-cta-card__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    align-items: stretch;
  }
}

/* Media column — photo (or placeholder) cropped to fill its half. */

.hrs-cta-card__media {
  position: relative;
  min-height: 280px;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 640px) {
  .hrs-cta-card__media {
    min-height: 360px;
  }
}

@media (min-width: 1024px) {
  .hrs-cta-card__media {
    grid-column: span 2 / span 2;
    min-height: 0px;
  }

  .hrs-cta-card--media-left .hrs-cta-card__media {
    grid-column-start: 1;
  }

  .hrs-cta-card--media-right .hrs-cta-card__media {
    grid-column-start: 3;
  }
}

.hrs-cta-card__img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-cta-card__img--placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

/* Red panel. */

.hrs-cta-card__panel {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .hrs-cta-card__panel {
    grid-column: span 2 / span 2;
    gap: 2rem;
    padding: 4rem;
  }
}

@media (min-width: 1280px) {
  .hrs-cta-card__panel {
    padding: 5rem;
  }
}

@media (min-width: 1024px) {
  .hrs-cta-card--media-left .hrs-cta-card__panel {
    grid-column-start: 3;
  }

  .hrs-cta-card--media-right .hrs-cta-card__panel {
    grid-column-start: 1;
  }
}

/* No photo (front end): the panel spans the full width on its own. */

@media (min-width: 1024px) {
  .hrs-cta-card--no-media .hrs-cta-card__panel {
    grid-column: span 4 / span 4;
    grid-column-start: 1;
  }
}

/* Decorative vertical grid line — locked to the canonical chrome columns. */

.hrs-cta-card__line {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 0;
  display: none;
  width: 1px;
  background-color: rgb(255 255 255 / 0.1);
  left: 50%;
}

@media (min-width: 1024px) {
  /* Desktop: line 4 inside the right panel (cols 3–4), line 2 inside the left panel. */

  .hrs-cta-card--media-left .hrs-cta-card__line {
    left: calc( 360 / 728 * 100% );
  }

  .hrs-cta-card--media-right .hrs-cta-card__line {
    left: calc( 336 / 696 * 100% );
  }

  .hrs-cta-card--no-media .hrs-cta-card__line {
    left: calc( 100% * 0.488764 );
  }
}

/* Content sits above the decorative line. */

.hrs-cta-card__top,
	.hrs-cta-card__contact {
  position: relative;
  z-index: 1;
}

/* Top group: text + actions, divided from the contact row by a hairline. */

.hrs-cta-card__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .hrs-cta-card__top {
    gap: 2.5rem;
    padding-bottom: 2rem;
  }
}

.hrs-cta-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .hrs-cta-card__text {
    gap: 1.5rem;
  }
}

.hrs-cta-card__heading {
  margin: 0px;
  text-wrap: balance;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .hrs-cta-card__heading {
    font-size: 56px;
    line-height: 0.9;
  }
}

@media (min-width: 1280px) {
  .hrs-cta-card__heading {
    font-size: 64px;
  }
}

.hrs-cta-card__intro {
  margin: 0px;
  max-width: none;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.75);
}

@media (min-width: 1024px) {
  .hrs-cta-card__intro {
    max-width: 36rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* Buttons. */

.hrs-cta-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .hrs-cta-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.hrs-cta-card__btn {
  display: inline-flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  font-size: 15px;
  line-height: 1;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 1024px) {
  .hrs-cta-card__btn {
    width: auto;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.hrs-cta-card__btn--primary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-cta-card__btn--primary:hover {
  background-color: rgb(255 255 255 / 0.9);
}

.hrs-cta-card__btn--ghost {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-cta-card__btn--ghost:hover {
  border-color: rgb(255 255 255 / 0.5);
}

.hrs-cta-card__btn-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

@media (min-width: 1024px) {
  .hrs-cta-card__btn-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.hrs-cta-card__btn-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

@media (min-width: 1024px) {
  .hrs-cta-card__btn-icon svg {
    width: 1rem;
    height: 1rem;
  }
}

.hrs-cta-card__btn-icon svg {
  transition: transform 0.2s ease;
}

.hrs-cta-card__btn--primary .hrs-cta-card__btn-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-cta-card__btn--ghost .hrs-cta-card__btn-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-cta-card__btn:hover .hrs-cta-card__btn-icon svg {
  transform: translateX( 2px );
}

.hrs-cta-card__btn-label {
  white-space: nowrap;
}

/* Contact row: phone + email blocks. */

.hrs-cta-card__contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .hrs-cta-card__contact {
    flex-direction: row;
    gap: 4rem;
  }
}

.hrs-cta-card__contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hrs-cta-card__contact-strong {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-cta-card__contact-strong:hover {
  opacity: 0.75;
}

.hrs-cta-card__contact-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.75);
}

.hrs-cta-card__contact-note {
  font-size: 15px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.75);
}

/* Mobile (Figma 74:3003): photo hidden, centre line visible. */

@media ( max-width: 1023px ) {
  .hrs-cta-card__media {
    display: none;
  }

  .hrs-cta-card__line {
    display: block;
  }
}

.hrs-ervaring {
  position: relative;
}

/* Intro: lead paragraphs + stats. Mobile Figma 74:2831; desktop xl row. */

.hrs-ervaring__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1280px) {
  .hrs-ervaring__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 5rem;
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* Vertical chrome grid lines behind the intro — same columns as the other
	 * blocks. Dark, since the intro sits on white. */

.hrs-ervaring__lines {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: 0;
  display: block;
}

.hrs-ervaring__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-ervaring__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-ervaring__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-ervaring__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-ervaring__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-ervaring__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-ervaring__text {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: none;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 1280px) {
  .hrs-ervaring__text {
    max-width: 694px;
    --tw-translate-y: -15px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    gap: 2.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.hrs-ervaring__text p {
  margin: 0px;
}

/* Mobile (Figma 74:2833): two stats side by side, centred as a pair. */

.hrs-ervaring__stats {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 1280px) {
  .hrs-ervaring__stats {
    width: 360px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5rem;
  }
}

.hrs-ervaring__stat {
  display: flex;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

@media (min-width: 1280px) {
  .hrs-ervaring__stat {
    width: 100%;
    max-width: 216px;
    gap: 1rem;
  }
}

.hrs-ervaring__stat:first-child {
  width: 181px;
}

@media (min-width: 1280px) {
  .hrs-ervaring__stat:first-child {
    width: 100%;
  }
}

.hrs-ervaring__stat:nth-child( 2 ) {
  width: 157px;
}

@media (min-width: 1280px) {
  .hrs-ervaring__stat:nth-child( 2 ) {
    width: 100%;
  }
}

.hrs-ervaring__stat-figure {
  margin: 0px;
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  white-space: nowrap;
  line-height: 0.9;
}

@media (min-width: 1280px) {
  .hrs-ervaring__stat-figure {
    gap: 0.5rem;
  }
}

.hrs-ervaring__stat-value {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 1280px) {
  .hrs-ervaring__stat-value {
    font-size: 64px;
  }
}

.hrs-ervaring__stat-suffix {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

@media (min-width: 1280px) {
  .hrs-ervaring__stat-suffix {
    font-size: 40px;
  }
}

.hrs-ervaring__stat-label {
  margin: 0px;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.5);
}

@media (min-width: 1280px) {
  .hrs-ervaring__stat-label {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Full-bleed photo band. Below lg it scrolls horizontally with fixed-width
	 * tiles; from lg the images share the full viewport width by their --hrs-w
	 * weight (Figma 384 : 696 : 576), flush to both edges. */

.hrs-ervaring__images {
  display: flex;
  width: 100%;
  gap: 1.5rem;
  overflow-x: auto;
}

@media (min-width: 1024px) {
  .hrs-ervaring__images {
    overflow: hidden;
  }
}

.hrs-ervaring__image {
  position: relative;
  height: 300px;
  width: 280px;
  flex-shrink: 0;
  overflow: hidden;
}

.hrs-ervaring__image--placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

.hrs-ervaring__image img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 1024px) {
  .hrs-ervaring__image {
    height: 452px;
    width: auto;
    min-width: 0;
    flex-grow: var(--hrs-w, 1);
    flex-basis: 0;
  }
}

.hrs-logo-animatie {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* --- Text band ---------------------------------------------------------- */

.hrs-logo-animatie__text {
  position: relative;
  padding-bottom: 2.5rem;
  padding-top: 3rem;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__text {
    padding-bottom: 4rem;
    padding-top: 5rem;
  }
}

/* Toggle: drop the top padding (block sits flush at the top of the page).
	 * Higher specificity than the base rule above, so it wins at every breakpoint. */

.hrs-logo-animatie--flush-top .hrs-logo-animatie__text {
  padding-top: 0;
}

.hrs-logo-animatie__text-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__text-inner {
    gap: 3rem;
  }
}

/* Grid lines over the white text band — dark, since the photo-band lines are
	 * white. Mobile: 3-line chrome (Figma 73:2677); desktop: full 5-line grid. */

.hrs-logo-animatie__text-lines {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: 0;
  display: block;
}

.hrs-logo-animatie__text-line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-logo-animatie__text-line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-logo-animatie__text-line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-logo-animatie__text-line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-logo-animatie__text-line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-logo-animatie__text-line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-logo-animatie__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: 3rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__title {
    font-size: clamp( 2.25rem, 5.5vw, 4.875rem );
    line-height: 0.9;
  }
}

.hrs-logo-animatie__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-logo-animatie__intro-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__text-inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-logo-animatie__heading-col {
    grid-column: 1 / 4;
    max-width: 725px;
  }

  .hrs-logo-animatie__intro-col {
    grid-column: 4;
    width: 100%;
  }
}

.hrs-logo-animatie__intro {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__intro {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 1.5;
  }
}

/* CTA — filled red button with a white circled arrow (Figma 74:2806 mobile). */

.hrs-logo-animatie__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  font-family: Mundial, sans-serif;
  font-size: 15px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__cta {
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.hrs-logo-animatie__cta:hover {
  background-color: #b91519;
}

.hrs-logo-animatie__cta-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__cta-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.hrs-logo-animatie__cta-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__cta-icon svg {
    width: 1rem;
    height: 1rem;
  }
}

.hrs-logo-animatie__cta-icon svg {
  transition: transform 0.2s ease;
}

.hrs-logo-animatie__cta:hover .hrs-logo-animatie__cta-icon svg {
  transform: translateX( 2px );
}

.hrs-logo-animatie__cta-label {
  white-space: nowrap;
  font-family: Mundial, sans-serif;
}

.hrs-logo-animatie__cta--placeholder {
  pointer-events: none;
  opacity: 0.6;
}

/* Wrapper that GSAP fades + rises in for the title / intro reveal. */

.hrs-logo-animatie__reveal {
  display: block;
  will-change: transform, opacity;
}

/* SplitText line masks — padding/margin set in JS to fit descenders. */

.hrs-logo-animatie__title .hrs-la-line-mask {
  display: block;
}

/* --- Photo band (full-bleed) ------------------------------------------- */

.hrs-logo-animatie__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__media {
    aspect-ratio: 1512 / 690;
  }
}

/* GSAP settles the photo in (fade + slow de-zoom); __media's overflow-hidden
	 * crops the zoom. At rest (no JS / editor / reduced-motion) it's simply shown. */

.hrs-logo-animatie__photo {
  position: absolute;
  inset: 0px;
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.hrs-logo-animatie__overlay {
  position: absolute;
  inset: 0px;
  z-index: 1;
  background-color: rgb( 0 0 0 / var( --hrs-la-overlay, 0 ) );
}

/* Centred chrome box that carries the grid lines + monogram, so both align
	 * to the site's content columns regardless of the full-bleed photo width. */

.hrs-logo-animatie__chrome {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 2;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Decorative vertical grid lines — desktop only, drawn over the photo. */

.hrs-logo-animatie__lines {
  position: absolute;
  inset: 0px;
  display: block;
}

.hrs-logo-animatie__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(255 255 255 / 0.25);
}

.hrs-logo-animatie__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-logo-animatie__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-logo-animatie__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-logo-animatie__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-logo-animatie__line--5 {
  right: var( --hrs-chrome-inset );
}

/* White brand monogram, anchored to the bottom-left of the photo. */

.hrs-logo-animatie__mark {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 3;
  height: 58%;
  width: auto;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-logo-animatie__mark {
    height: 78%;
  }
}

@media (min-width: 1024px) {
  .hrs-logo-animatie__mark {
    height: 100%;
  }
}

.hrs-logo-animatie__mark {
  aspect-ratio: 763 / 1048;
}

.hrs-logo-animatie__mark-svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* JS adds --js (only when motion is allowed) to hide the moving parts up front
	 * so there is no flash of the assembled state before the GSAP intro. Without
	 * JS / in the editor / under reduced-motion the class is never added, so the
	 * mark and text stay fully visible and static. */

.hrs-logo-animatie--js .hrs-logo-animatie__cta,
	.hrs-logo-animatie--js .hrs-logo-animatie__reveal,
	.hrs-logo-animatie--js .hrs-logo-animatie__photo,
	.hrs-logo-animatie--js .hrs-logo-animatie__overlay {
  opacity: 0;
}

/* Blueprint lines start collapsed; GSAP draws them down from the top. */

.hrs-logo-animatie--js .hrs-logo-animatie__text-line,
	.hrs-logo-animatie--js .hrs-logo-animatie__line {
  transform: scaleY( 0 );
  transform-origin: top center;
}

/* Each monogram bar starts wiped away inside its own bounding box; GSAP wipes
	 * it back in along the bar's long axis (horizontals left→right, verticals
	 * bottom→top), staggered from the bottom-left corner up to the top-right. */

.hrs-logo-animatie--js .hrs-logo-animatie__mark-svg path {
  clip-path: inset( 0 100% 0 0 );
}

.hrs-logo-animatie__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(22 22 21 / 0.5);
}

.hrs-hover-fotos {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* Decorative vertical grid lines on the chrome blueprint columns (same grid
	 * as the menu / footer / logo slider). Desktop only; content sits above. */

.hrs-hover-fotos__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-hover-fotos__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-hover-fotos__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-hover-fotos__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-hover-fotos__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-hover-fotos__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-hover-fotos__line--5 {
  right: var( --hrs-chrome-inset );
}

.hrs-hover-fotos__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .hrs-hover-fotos__inner {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .hrs-hover-fotos__inner {
    gap: 5rem;
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* Directly after a title-text intro (the /diensten/ page) the two paddings
	 * stack up to ±216px — tighten the top so title and diensten read as one. */

@media (min-width: 1024px) {
  .hrs-title-text + .hrs-hover-fotos .hrs-hover-fotos__inner {
    padding-top: 2rem;
  }
}

/* Top row: featured photo card + grey card, pushed to opposite edges so the
	 * wide gap matches the Figma layout (≈ 57% / gap / 25%). */

.hrs-hover-fotos__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .hrs-hover-fotos__top {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
}

.hrs-hover-fotos__featured {
  position: relative;
  display: flex;
  min-height: 420px;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
  padding: 2rem;
  padding-top: 6rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-hover-fotos__featured {
    padding: 2.5rem;
    padding-top: 8rem;
  }
}

@media (min-width: 1024px) {
  .hrs-hover-fotos__featured {
    min-height: 435px;
    width: 57%;
    padding-top: 120px;
  }
}

.hrs-hover-fotos__featured-media {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: 0;
}

.hrs-hover-fotos__featured-media img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* Whole-card hover — same crop-zoom as the project cards. The JS adds
	 * .is-clickable once the card's link is wired for click-through. */

.hrs-hover-fotos__featured.is-clickable,
	.hrs-hover-fotos__card.is-clickable {
  cursor: pointer;
}

.hrs-hover-fotos__featured.is-clickable:hover .hrs-hover-fotos__featured-media img {
  transform: scale( 1.04 );
}

.hrs-hover-fotos__card.is-clickable:hover {
  background-color: #e4e4e2;
}

/* Brand gradient so the white text stays legible over the photo. */

.hrs-hover-fotos__featured-media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(
			62deg,
			rgba( 22, 22, 21, 0.7 ) 0%,
			rgba( 22, 22, 21, 0 ) 64%
		);
}

.hrs-hover-fotos__featured-head {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 336px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.hrs-hover-fotos__featured .hrs-hover-fotos__link {
  position: relative;
  z-index: 1;
}

/* Width tracks the last grid column so the card's left edge lands exactly on
	 * line 4 and its right edge on line 5. Derived from the line grid (line 4 at
	 * 72.63% of the chrome box) minus the container's 3rem padding:
	 * (1 - 0.7263) * box - 3rem, expressed against the padded content width. */

.hrs-hover-fotos__card {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
  padding: 2rem;
  padding-top: 6rem;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-hover-fotos__card {
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hrs-hover-fotos__card {
    min-height: 435px;
    width: calc(27.37% - 1.358rem);
    flex-shrink: 0;
    padding-top: 176px;
  }
}

.hrs-hover-fotos__card {
  transition: background-color 0.3s ease;
}

.hrs-hover-fotos__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-hover-fotos__heading-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The JS adds .is-hoverable to a service's text group once it wires that text
	 * (not the CTA below it) to reveal the cursor-following photo AND makes the
	 * text click through to the service link — so show a pointer, like any card. */

.hrs-hover-fotos__heading-group.is-hoverable {
  cursor: pointer;
}

.hrs-hover-fotos__heading-group.is-hoverable * {
  cursor: pointer;
}

.hrs-hover-fotos__title {
  margin: 0px;
  font-size: 40px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hrs-hover-fotos__title {
    font-size: 48px;
  }
}

.hrs-hover-fotos__text {
  margin: 0px;
  font-size: 16px;
  line-height: 1.5;
}

.hrs-hover-fotos__card .hrs-hover-fotos__text,
	.hrs-hover-fotos__service .hrs-hover-fotos__text {
  opacity: 0.75;
}

/* Staggered CTA rows: each pair is ~3/4 width, alternating to the left edge
	 * then the right edge from lg up; stacked below that. */

.hrs-hover-fotos__services {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .hrs-hover-fotos__services {
    gap: 5rem;
  }
}

.hrs-hover-fotos__row {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .hrs-hover-fotos__row {
    width: 74%;
    flex-direction: row;
    justify-content: space-between;
    gap: 4rem;
  }

  .hrs-hover-fotos__row--left {
    margin-right: auto;
  }

  .hrs-hover-fotos__row--right {
    margin-left: auto;
  }
}

.hrs-hover-fotos__service {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .hrs-hover-fotos__service {
    width: 336px;
    gap: 3rem;
  }
}

/* Links — "Bekijk dienst" + circular arrow, three colour variants. */

.hrs-hover-fotos__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  line-height: 1;
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-hover-fotos__link-label {
  white-space: nowrap;
}

.hrs-hover-fotos__link-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.hrs-hover-fotos__link-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-hover-fotos__link:hover .hrs-hover-fotos__link-icon svg {
  transform: translateX( 2px );
}

.hrs-hover-fotos__link--on-photo {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-hover-fotos__link--on-photo .hrs-hover-fotos__link-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-hover-fotos__link--accent {
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-hover-fotos__link--accent .hrs-hover-fotos__link-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-hover-fotos__link--plain {
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-hover-fotos__link--plain .hrs-hover-fotos__link-icon {
  border-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

/* Floating image that tracks the cursor (positioned by JS via transform).
	 * Grey backing while the photo loads + the same slow crop-zoom the project
	 * cards use while it is revealed. */

.hrs-hover-fotos__cursor {
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 20;
  height: 204px;
  width: 192px;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
  opacity: 0;
  will-change: transform;
  transition: opacity 0.3s ease;
}

.hrs-hover-fotos__cursor.is-visible {
  opacity: 1;
}

.hrs-hover-fotos__cursor img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hrs-hover-fotos__cursor.is-visible img {
  transform: scale( 1.06 );
}

@media (prefers-reduced-motion: reduce) {
  .hrs-hover-fotos__cursor {
    transition: none;
  }
}

/* ----------------------------------------------------------------------
	 * Mobile (< lg) — Figma 74:2846. The desktop hover layout collapses to a
	 * plain stacked list of every service: pill (featured only) + title + body
	 * + "Bekijk dienst" link, no photos and no hover. Desktop (lg+) keeps the
	 * featured photo card + grey card + staggered hover rows, untouched.
	 * -------------------------------------------------------------------- */

@media ( max-width: 1023px ) {
  /* One even 40px rhythm: every list container stacks at the same gap, so
		 * featured → card → each service all sit 40px apart. */

  .hrs-hover-fotos__inner {
    gap: 2.5rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hrs-hover-fotos__top,
		.hrs-hover-fotos__services,
		.hrs-hover-fotos__row {
    gap: 2.5rem;
  }

  /* Featured + card drop their photo / panel chrome and become plain text. */

  .hrs-hover-fotos__featured,
		.hrs-hover-fotos__card {
    min-height: 0px;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    background-color: transparent;
    padding: 0px;
    --tw-text-opacity: 1;
    color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  }

  /* No featured photo on mobile. */

  .hrs-hover-fotos__featured-media {
    display: none;
  }

  .hrs-hover-fotos__featured-head {
    width: 100%;
    max-width: 100%;
    gap: 1.5rem;
  }

  .hrs-hover-fotos__service {
    min-width: 0px;
    gap: 2rem;
  }

  /* Fill the column so long copy wraps within the gutter — the featured head
		 * is items-start, which would otherwise let its text block take its
		 * max-content width and run past the right edge. */

  .hrs-hover-fotos__heading-group {
    width: 100%;
    min-width: 0px;
    gap: 0.5rem;
  }

  /* Mobile type scale (H3 30 / Paragraaf S 15 / Pill 11). */

  .hrs-hover-fotos__title {
    font-size: 30px;
  }

  .hrs-hover-fotos__text {
    font-size: 15px;
    opacity: 0.75;
  }

  .hrs-hover-fotos__pill {
    font-size: 11px;
  }

  /* Arrow circle → 20px with a 12px icon. */

  .hrs-hover-fotos__link-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .hrs-hover-fotos__link-icon svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* The featured link was white-on-photo; on the plain list it becomes the
		 * same ghost (bordered) style as the plain services. */

  .hrs-hover-fotos__link--on-photo {
    --tw-text-opacity: 1;
    color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  }

  .hrs-hover-fotos__link--on-photo .hrs-hover-fotos__link-icon {
    border-width: 1px;
    border-color: rgb(22 22 21 / 0.1);
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  }

  /* Match the mock's alternating accent: the 4th service (2nd item of the
		 * first row) also gets the red arrow, like the accent card above it. */

  .hrs-hover-fotos__services .hrs-hover-fotos__row:first-child .hrs-hover-fotos__service:nth-child(2) .hrs-hover-fotos__link-icon {
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.hrs-project-overzicht {
  --hrs-bg: #ffffff;
  --hrs-fg: #161615;
  --hrs-border: rgba( 22, 22, 21, 0.1 );
  position: relative;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-project-overzicht {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.hrs-project-overzicht {
  background-color: var( --hrs-bg );
  color: var( --hrs-fg );
}

.hrs-project-overzicht--bg-grey {
  --hrs-bg: #efefee;
}

.hrs-project-overzicht--bg-black {
  --hrs-bg: #161615;
  --hrs-fg: #ffffff;
  --hrs-border: rgba( 255, 255, 255, 0.16 );
}

.hrs-project-overzicht--bg-black .hrs-project-overzicht__cta-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-project-overzicht__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Vertical chrome grid lines on the canonical site columns (3rem / 25.26% /
	 * 48.95% / 72.63% / 3rem of the centred 1520px box) — same as the footer and
	 * the other blocks. Full section height, desktop only; the content sits above. */

.hrs-project-overzicht__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-project-overzicht__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: var( --hrs-border );
}

.hrs-project-overzicht__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-project-overzicht__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-project-overzicht__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-project-overzicht__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-project-overzicht__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* --- Header (heading + ghost button, pushed right on desktop) ---------- */

/* Heading + ghost button: right half on desktop (cols 3-4), heading left and
	 * button right, like the design. */

.hrs-project-overzicht__header {
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .hrs-project-overzicht__header {
    margin-bottom: 4rem;
    margin-left: auto;
    width: 51%;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}

.hrs-project-overzicht__heading {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  color: var( --hrs-fg );
  font-size: clamp( 2rem, 4.5vw, 4rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-project-overzicht__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-project-overzicht__cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  border-width: 1px;
  padding: 1rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-color: var( --hrs-border );
  color: var( --hrs-fg );
}

.hrs-project-overzicht__cta:hover {
  border-color: color-mix( in srgb, var( --hrs-fg ) 25%, transparent );
}

.hrs-project-overzicht__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-project-overzicht__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-project-overzicht__cta:hover .hrs-project-overzicht__cta-icon svg {
  transform: translateX( 2px );
}

.hrs-project-overzicht__cta-label {
  white-space: nowrap;
}

/* --- Grid -------------------------------------------------------------- */

.hrs-project-overzicht__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: flex-start;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 3rem;
}

@media (min-width: 768px) {
  .hrs-project-overzicht__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hrs-project-overzicht__grid {
    row-gap: 4rem;
  }
}

@media (min-width: 768px) {
  .hrs-project-overzicht__card--featured {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  /* Columns match the chrome line spacing (336 / 360 / 360 / 368) so every
		 * card lands exactly on the vertical lines; the white space is the empty
		 * columns, so there is no column gap. */

  .hrs-project-overzicht__grid {
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
  }

  /* Explicit column + row (two cards per band) so the layout is deterministic:
		 * small-left + big-right on top, two small below — like the design. */

  .hrs-project-overzicht__card {
    grid-column: var( --po-col, auto ) / span var( --po-span, 1 );
    grid-row: var( --po-row, auto );
  }
}

/* --- Card -------------------------------------------------------------- */

.hrs-project-overzicht__card {
  min-width: 0px;
}

.hrs-project-overzicht__link {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: inherit;
  text-decoration-line: none;
}

.hrs-project-overzicht__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
  aspect-ratio: 8 / 9;
}

.hrs-project-overzicht__card--featured .hrs-project-overzicht__media {
  aspect-ratio: 6 / 5;
}

.hrs-project-overzicht__img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hrs-project-overzicht__link:hover .hrs-project-overzicht__img {
  transform: scale( 1.04 );
}

.hrs-project-overzicht__img--placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

/* Category pills, overlaid on the top-left of the photo. */

.hrs-project-overzicht__pills {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.hrs-project-overzicht__pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Mundial, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  letter-spacing: 0.02em;
}

/* --- Body (title + dotted meta list) ----------------------------------- */

.hrs-project-overzicht__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hrs-project-overzicht__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 1.375rem, 2vw, 1.75rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.hrs-project-overzicht__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.25rem;
  font-family: Mundial, sans-serif;
  color: rgb(22 22 21 / 0.75);
  font-size: 1.125rem;
  line-height: 1.5;
}

.hrs-project-overzicht__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Red square separator that precedes every meta item after the first. */

.hrs-project-overzicht__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
}

.hrs-project-overzicht__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  opacity: 0.5;
  color: var( --hrs-fg );
}

/* --- Mobile (Figma 75:3165) -------------------------------------------- */

@media ( max-width: 767px ) {
  .hrs-project-overzicht {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hrs-project-overzicht__inner {
    gap: 2rem;
  }

  .hrs-project-overzicht__header {
    margin-bottom: 0px;
    gap: 1rem;
  }

  .hrs-project-overzicht__heading {
    font-size: 2.125rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .hrs-project-overzicht__cta {
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 15px;
  }

  .hrs-project-overzicht__cta-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .hrs-project-overzicht__cta-icon svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .hrs-project-overzicht__grid {
    row-gap: 1.5rem;
  }

  .hrs-project-overzicht__link {
    gap: 1rem;
  }

  .hrs-project-overzicht__media,
		.hrs-project-overzicht__card--featured .hrs-project-overzicht__media {
    aspect-ratio: auto;
    height: 235px;
  }

  .hrs-project-overzicht__pills {
    left: 1rem;
    top: 1rem;
    gap: 0.5rem;
  }

  .hrs-project-overzicht__pill {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .hrs-project-overzicht__body {
    gap: 0.25rem;
  }

  .hrs-project-overzicht__title {
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .hrs-project-overzicht__meta {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
    row-gap: 0px;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.hrs-parallax-glider {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

.hrs-parallax-glider__inner {
  position: relative;
}

/* Vertical grid lines marking the chrome blueprint columns. They span the full
	 * section height and the cards glide against them. Desktop only. Positioned on
	 * the canonical site columns (3rem / 25.26% / 48.95% / 72.63% / 3rem of the
	 * centred 1520px box) — identical to the footer and the other blocks so the
	 * lines stay continuous where this section meets the footer. */

.hrs-parallax-glider__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 0;
  display: block;
}

.hrs-parallax-glider__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

/* Lines sit on the 4-column grid boundaries. The grid lives inside the
	 * container's 3rem desktop padding, so the content area is (100% - 6rem) and
	 * the inner boundaries fall at 25% / 50% / 75% of it — width-independent, so
	 * they always land exactly between the cards. */

.hrs-parallax-glider__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-parallax-glider__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-parallax-glider__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-parallax-glider__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-parallax-glider__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* Stacked on mobile; a 4-column grid stepping diagonally on desktop. Tighter
	 * gap between the (smaller) cards on mobile, matching the design. */

.hrs-parallax-glider__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .hrs-parallax-glider__grid {
    max-width: 28rem;
  }
}

@media (min-width: 1024px) {
  .hrs-parallax-glider__grid {
    max-width: none;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0px;
         column-gap: 0px;
    row-gap: 5rem;
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

/* The card itself — the white/red box. Smaller padding + gap on mobile (Figma
	 * 75:3225: px-16 py-24, gap-16); the desktop p-10/gap-6 returns at lg. */

.hrs-parallax-glider__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .hrs-parallax-glider__card {
    gap: 1.5rem;
    padding: 2.5rem;
  }
}

.hrs-parallax-glider__card--white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-parallax-glider__card--red {
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-parallax-glider__quote {
  margin: 0px;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .hrs-parallax-glider__quote {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.hrs-parallax-glider__divider {
  display: block;
  height: 1px;
  width: 100%;
  border-width: 0px;
  background-color: currentColor;
  opacity: 0.2;
}

.hrs-parallax-glider__card--white .hrs-parallax-glider__divider {
  opacity: 0.15;
}

.hrs-parallax-glider__card--red .hrs-parallax-glider__divider {
  opacity: 0.3;
}

.hrs-parallax-glider__author {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.hrs-parallax-glider__name {
  font-size: 15px;
}

@media (min-width: 1024px) {
  .hrs-parallax-glider__name {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.hrs-parallax-glider__role {
  font-size: 13px;
  opacity: 0.75;
}

@media (min-width: 1024px) {
  .hrs-parallax-glider__role {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Desktop: place each card in its grid cell (column from the field, one row
	 * per card) so they step diagonally down. The @media lives inside @layer so it
	 * keeps the components-layer cascade; var-based grid placement can't be done
	 * with utilities. will-change hints the scroll-driven transform. */

@media ( min-width: 1024px ) {
  .hrs-parallax-glider__card {
    grid-column: var( --pg-col, auto );
    grid-row: var( --pg-row, auto );
    will-change: transform;
  }
}

.hrs-title-text {
  position: relative;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-title-text {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.hrs-title-text__inner {
  position: relative;
  z-index: 1;
}

/* Vertical chrome grid lines on the canonical site columns (3rem / 25.26% /
	 * 48.95% / 72.63% / 3rem of the centred 1520px box) — same as the footer and
	 * the other blocks. Desktop only; the content sits above. */

.hrs-title-text__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-title-text__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-title-text__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-title-text__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-title-text__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-title-text__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-title-text__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-title-text__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .hrs-title-text__grid {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-title-text__title {
    grid-column: 1 / 4;
    max-width: 725px;
  }

  .hrs-title-text__body {
    grid-column: 4;
    width: 100%;
  }
}

.hrs-title-text__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2.25rem, 5.5vw, 4.875rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-title-text__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-title-text__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.hrs-title-text__text {
  margin: 0px;
  font-family: Mundial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Filled red CTA — Figma 144:12705 (same pattern as logo animatie). */

.hrs-title-text__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-title-text__cta:hover {
  background-color: #b91519;
}

.hrs-title-text__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-title-text__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-title-text__cta:hover .hrs-title-text__cta-icon svg {
  transform: translateX( 2px );
}

.hrs-title-text__cta-label {
  white-space: nowrap;
}

.hrs-title-text__cta--placeholder {
  pointer-events: none;
  opacity: 0.6;
}

.hrs-title-text__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(22 22 21 / 0.5);
}

.hrs-faq {
  position: relative;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-faq {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.hrs-faq__inner {
  position: relative;
  z-index: 1;
}

/* Canonical chrome / blueprint lines — must match header + footer + blocks. */

.hrs-faq__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-faq__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-faq__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-faq__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-faq__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-faq__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-faq__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* Layout — heading in column 1, list across columns 3–4. */

.hrs-faq__grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .hrs-faq__grid {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-faq__head {
    grid-column: 1;
    /* full 336px column — matches the Figma title width */
  }

  .hrs-faq__list {
    grid-column: 3 / -1;
    min-width: 0;
  }
}

.hrs-faq__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hrs-faq__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2rem, 4vw, 3rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  /* break only if a word truly overflows, not mid-word */
}

@media (min-width: 1024px) {
  .hrs-faq__title {
    font-size: 3rem;
    /* H3 — 48px */
  }
}

.hrs-faq__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-faq__intro {
  margin: 0px;
  max-width: 30ch;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.75);
}

/* List + items. */

.hrs-faq__list {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.hrs-faq__item {
  position: relative;
  opacity: 0.6;
  transition: opacity 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.hrs-faq__item.is-open {
  opacity: 1;
}

/* Closed rows lift a touch toward full opacity on hover for affordance. */

@media ( hover: hover ) {
  .hrs-faq__item:not( .is-open ):hover {
    opacity: 0.9;
  }
}

/* Separator drawn as its own element so GSAP can scale it in on reveal. */

.hrs-faq__rule {
  pointer-events: none;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  height: 1px;
  transform-origin: left;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-faq__item-heading {
  margin: 0px;
}

.hrs-faq__trigger {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* First row hugs the heading top (no top padding), matching the design. */

.hrs-faq__item:first-child .hrs-faq__trigger {
  padding-top: 0;
}

/* Open row: question sits above the answer with a 16px gap (panel handles it). */

.hrs-faq__item.is-open .hrs-faq__trigger {
  align-items: center;
  padding-bottom: 0;
}

.hrs-faq__question {
  font-family: Mundial, sans-serif;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 1.5rem, 5vw, 2.5rem );
}

@media (min-width: 1024px) {
  .hrs-faq__question {
    font-size: 2.5rem;
    /* H4 — 40px */
  }
}

/* Icon — plus (closed) morphs to minus (open) by rotating the vertical bar. */

.hrs-faq__icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-faq__icon-svg {
  width: 2rem;
  height: 2rem;
  overflow: visible;
}

.hrs-faq__icon-bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier( 0.65, 0, 0.35, 1 ),
			opacity 0.3s ease;
}

/* Vertical bar rotates onto the horizontal one → looks like a minus. */

.hrs-faq__item.is-open .hrs-faq__icon-bar--v {
  transform: rotate( 90deg );
}

/* Panel — height animated by GSAP; overflow hidden keeps the answer clipped. */

.hrs-faq__panel {
  overflow: hidden;
}

.hrs-faq__panel-inner {
  padding-top: 1rem;
  /* 16px gap below the question */
  padding-bottom: 2.5rem;
  /* 40px below the answer, before the rule */
}

.hrs-faq__answer {
  max-width: 484px;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.75);
}

.hrs-faq__answer p {
  margin: 0px;
}

.hrs-faq__answer p + p {
  margin-top: 1rem;
}

/* Respect reduced-motion: kill the morph/dim transitions (JS skips reveal). */

@media ( prefers-reduced-motion: reduce ) {
  .hrs-faq__item,
		.hrs-faq__icon-bar,
		.hrs-faq__panel {
    transition: none;
  }
}

.hrs-breadcrumbs {
  position: relative;
  width: 100%;
  padding-bottom: 1.5rem;
  padding-top: 3rem;
}

@media (min-width: 1024px) {
  .hrs-breadcrumbs {
    padding-top: 6rem;
  }
}

.hrs-breadcrumbs__inner {
  position: relative;
  z-index: 10;
}

/* Continue the vertical chrome lines through the breadcrumb band so they run
	 * unbroken from the header into the page content — no gap at the kruimelpad.
	 * Same canonical columns + colour as the header; spans the full band height
	 * (incl. padding) so it meets the header above and the first block below.
	 * Desktop only, like every other block. */

.hrs-breadcrumbs__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-breadcrumbs__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-breadcrumbs__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-breadcrumbs__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-breadcrumbs__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-breadcrumbs__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-breadcrumbs__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* Pull the first content block up so the gap below the breadcrumb is the
	 * design's 24px (pb-6), not the breadcrumb spacing + the block's own padding. */

.hrs-breadcrumbs + .hrs-main > .hrs-block:first-child {
  padding-top: 0;
}

.hrs-breadcrumbs .breadcrumb {
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0px;
  font-family: Mundial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.5;
  list-style: none;
}

.hrs-breadcrumbs .breadcrumb li {
  margin: 0px;
  display: inline-flex;
  align-items: center;
}

/* Current page. */

.hrs-breadcrumbs .breadcrumb li:last-child {
  opacity: 0.75;
}

/* Parent links. */

.hrs-breadcrumbs .breadcrumb a {
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  opacity: 0.5;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-breadcrumbs .breadcrumb a:hover {
  opacity: 1;
}

/* "|" separator between items (overrides SEOPress's injected ::after). */

.hrs-breadcrumbs .breadcrumb li::after {
  content: "|";
  opacity: 0.5;
  margin-left: 8px;
  margin-right: 8px;
}

.hrs-breadcrumbs .breadcrumb li:last-child::after {
  display: none;
}

/* Extra royale marge boven/onder (klantfeedback: 120px voelde te krap). */

.hrs-ups {
  position: relative;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-ups {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

.hrs-ups__inner {
  position: relative;
  z-index: 1;
}

/* Vertical chrome grid lines — same columns as the other blocks. Desktop only. */

.hrs-ups__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-ups__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-ups__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-ups__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-ups__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-ups__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-ups__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* --- Header (heading cols 1–3, intro col 4 — locked to chrome grid) ------------ */

.hrs-ups__header {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hrs-ups__heading {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2rem, 4.5vw, 4rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-ups__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-ups__intro {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

/* Shared 4-column chrome grid (336 / 360 / 360 / 368 — last col matches line 5). */

@media (min-width: 1024px) {
  .hrs-ups__header {
    margin-bottom: 5rem;
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-ups__heading {
    grid-column: 1 / 4;
    max-width: 725px;
    font-size: 4rem;
  }

  .hrs-ups__intro {
    grid-column: 4;
  }
}

/* --- Grid of signals (Figma checklist) ----------------------------------- */

.hrs-ups__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 3rem;
}

@media (min-width: 1024px) {
  .hrs-ups__grid {
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    row-gap: 3rem;
  }

  .hrs-ups__item {
    min-width: 0;
    padding-right: 2.5rem;
  }

  .hrs-ups__item:nth-child( n + 5 ):not( .hrs-ups__item--cta ) {
    padding-top: 2.5rem;
  }
}

.hrs-ups__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-ups__num {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  opacity: 0.25;
}

.hrs-ups__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-size: clamp( 1.75rem, 2.5vw, 2.5rem );
}

@media (min-width: 1024px) {
  .hrs-ups__title {
    font-size: 2.5rem;
  }
}

.hrs-ups__text {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  opacity: 0.75;
}

/* --- Red CTA card (last cell — full col 4 width, flush to chrome lines) --- */

.hrs-ups__item--cta {
  box-sizing: border-box;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-ups__item--cta .hrs-ups__num,
	.hrs-ups__item--cta .hrs-ups__title {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 1;
}

.hrs-ups__item--cta .hrs-ups__text {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

.hrs-ups__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.hrs-ups__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-ups__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-ups__cta-link:hover .hrs-ups__cta-icon svg {
  transform: translateX( 2px );
}

.hrs-ups__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(22 22 21 / 0.5);
}

.hrs-reparatie {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

.hrs-reparatie__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-reparatie__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-reparatie__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-reparatie__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-reparatie__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-reparatie__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-reparatie__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-reparatie__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-reparatie__inner {
    gap: 5rem;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.hrs-reparatie__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hrs-reparatie__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hrs-reparatie__heading {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2rem, 4.6vw, 4rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-reparatie__heading-accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-reparatie__intro {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

.hrs-reparatie__media {
  position: relative;
  width: 100%;
  max-width: 336px;
  overflow: hidden;
  background-color: rgb(22 22 21 / 0.05);
}

@media (min-width: 1024px) {
  .hrs-reparatie__media {
    max-width: none;
  }
}

.hrs-reparatie__media {
  aspect-ratio: 336 / 479;
}

.hrs-reparatie__img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-reparatie__img--placeholder {
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-reparatie__steps {
  display: flex;
  flex-direction: column;
}

.hrs-reparatie__step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-bottom-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.hrs-reparatie__step:last-child {
  border-bottom-width: 0px;
  padding-bottom: 0px;
  padding-top: 2.5rem;
}

.hrs-reparatie__step-head {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.hrs-reparatie__step-num {
  flex-shrink: 0;
  font-family: Mundial, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-reparatie__step-title {
  margin: 0px;
  min-width: 0px;
  font-family: Mundial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-reparatie__step-title {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .hrs-reparatie__step-title {
    font-size: 40px;
  }
}

.hrs-reparatie__step-desc {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

/* Canonical 4-column chrome grid — must follow base flex rules above. */

@media (min-width: 1024px) {
  .hrs-reparatie__header,
		.hrs-reparatie__body {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: end;
  }

  .hrs-reparatie__intro,
		.hrs-reparatie__media {
    grid-column: 1;
    width: 100%;
  }

  .hrs-reparatie__heading {
    grid-column: 3 / -1;
    width: 100%;
    max-width: none;
    font-size: 4rem;
  }

  .hrs-reparatie__steps {
    grid-column: 3 / -1;
    width: 100%;
  }
}

.hrs-x-houtrot {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-x-houtrot {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.hrs-x-houtrot__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .hrs-x-houtrot__inner {
    gap: 5rem;
  }
}

.hrs-x-houtrot__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-x-houtrot__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-x-houtrot__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-x-houtrot__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-x-houtrot__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-x-houtrot__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-x-houtrot__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* --- Header -------------------------------------------------------------- */

.hrs-x-houtrot__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .hrs-x-houtrot__header {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-x-houtrot__heading {
    grid-column: 1 / 4;
    max-width: 725px;
    font-size: 4rem;
  }

  .hrs-x-houtrot__intro {
    grid-column: 4;
    width: 100%;
  }
}

.hrs-x-houtrot__heading {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2rem, 4.5vw, 4rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-x-houtrot__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-x-houtrot__intro {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

/* --- Compare (two columns on chrome grid) -------------------------------- */

.hrs-x-houtrot__compare {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  border-top-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-top: 3rem;
}

@media (min-width: 1024px) {
  .hrs-x-houtrot__compare {
    gap: 0px;
    padding-top: 5rem;
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-x-houtrot__column--a {
    grid-column: 1 / 3;
    padding-right: 5rem;
  }

  .hrs-x-houtrot__column--b {
    grid-column: 3 / -1;
    padding-left: 5rem;
  }
}

.hrs-x-houtrot__column {
  min-width: 0px;
}

.hrs-x-houtrot__column-head {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .hrs-x-houtrot__column-head {
    margin-bottom: 3rem;
  }
}

.hrs-x-houtrot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.hrs-x-houtrot__pill {
  display: inline-flex;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Mundial, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-x-houtrot__pill--red {
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
}

.hrs-x-houtrot__pill--black {
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
}

.hrs-x-houtrot__option-label {
  font-family: Mundial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

.hrs-x-houtrot__column-title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-x-houtrot__column-intro {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

.hrs-x-houtrot__list {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}

.hrs-x-houtrot__list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.hrs-x-houtrot__list-item:first-child {
  border-top-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
}

.hrs-x-houtrot__check {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-x-houtrot__check svg {
  width: 1.5rem;
  height: 1.5rem;
}

.hrs-x-houtrot__list-text {
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

/* --- CTA (Figma: icon left, red button centred) -------------------------- */

.hrs-x-houtrot__footer {
  display: flex;
  justify-content: center;
}

.hrs-x-houtrot__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-x-houtrot__cta:hover {
  opacity: 0.9;
}

.hrs-x-houtrot__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-x-houtrot__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-x-houtrot__cta:hover .hrs-x-houtrot__cta-icon svg {
  transform: translateX( 2px );
}

@media ( prefers-reduced-motion: reduce ) {
  .hrs-x-houtrot[data-reveal='true'] * {
    animation: none;
    transition: none;
  }
}

/* Red bar is capped to the content grid (Figma 136:9532), NOT full-bleed:
	 * the section centres at the site max-width and bg-clip-content keeps the red
	 * inside the page gutter, so the chrome lines land exactly on its left/right
	 * edges and the bar matches the width of every other block. */

.hrs-banner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1520px;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  background-clip: content-box;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-banner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hrs-banner {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.hrs-banner__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-banner__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(255 255 255 / 0.1);
}

.hrs-banner__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-banner__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-banner__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-banner__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-banner__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* Inner = the section's content box (the page gutter lives on the section now),
	 * so on desktop the grid spans exactly between the outer chrome lines. The
	 * mobile px keeps the stacked content off the red edges; on lg the grid's own
	 * insets (heading padding-left, button margin-right) take over. */

.hrs-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  .hrs-banner__inner {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.hrs-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hrs-banner__heading {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-banner__heading {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  .hrs-banner__heading {
    font-size: 48px;
  }
}

.hrs-banner__heading {
  word-break: break-word;
}

.hrs-banner__intro {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

.hrs-banner__cta {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-banner__cta:hover {
  opacity: 0.9;
}

.hrs-banner__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-banner__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-banner__cta:hover .hrs-banner__cta-icon svg {
  transform: translateX( 2px );
}

.hrs-banner__cta-label {
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .hrs-banner__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    row-gap: 0;
    align-items: center;
    min-height: 220px;
  }

  /* Unwrap the copy so the heading and intro each land on their own chrome
		 * column (Figma 136:9532): heading across cols 1–2, intro locked to col 3
		 * (lines 3–4), button in col 4. */

  .hrs-banner__copy {
    display: contents;
  }

  .hrs-banner__heading {
    grid-column: 1 / 3;
    max-width: 584px;
    padding-left: 5rem;
    /* title inset 80px from the left line. */
  }

  .hrs-banner__intro {
    grid-column: 3 / 4;
    max-width: 360px;
  }

  .hrs-banner__cta {
    grid-column: 4;
    justify-self: end;
    margin-right: 5rem;
    /* button inset 80px from the right line. */
  }
}

.hrs-vacatures-overzicht {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 6rem;
}

@media (min-width: 1024px) {
  .hrs-vacatures-overzicht {
    padding-top: 5rem;
    padding-bottom: 7.5rem;
  }
}

.hrs-vacatures-overzicht__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4.25rem;
}

.hrs-vacatures-overzicht__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-vacatures-overzicht__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-vacatures-overzicht__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-vacatures-overzicht__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-vacatures-overzicht__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-vacatures-overzicht__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-vacatures-overzicht__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-vacatures-overzicht__top {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hrs-vacatures-overzicht__card {
  min-width: 0px;
}

.hrs-vacatures-overzicht__link {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: inherit;
  text-decoration-line: none;
}

.hrs-vacatures-overzicht__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
  aspect-ratio: 336 / 377;
}

.hrs-vacatures-overzicht__card--large .hrs-vacatures-overzicht__media {
  aspect-ratio: 720 / 598;
}

.hrs-vacatures-overzicht__img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hrs-vacatures-overzicht__link:hover .hrs-vacatures-overzicht__img {
  transform: scale( 1.04 );
}

.hrs-vacatures-overzicht__img--placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

.hrs-vacatures-overzicht__pills {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.hrs-vacatures-overzicht__pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Mundial, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  letter-spacing: 0.02em;
}

.hrs-vacatures-overzicht__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hrs-vacatures-overzicht__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-vacatures-overzicht__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.25rem;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

.hrs-vacatures-overzicht__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.hrs-vacatures-overzicht__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
}

.hrs-vacatures-overzicht__cta-wrap {
  width: 100%;
}

/* items-start so the pill (and link) hug their content instead of stretching
	 * the full panel width; the heading + text get w-full back explicitly. */

.hrs-vacatures-overzicht__cta-box {
  display: flex;
  width: 100%;
  max-width: 360px;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-vacatures-overzicht__cta-heading {
  margin: 0px;
  width: 100%;
  font-family: Mundial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-vacatures-overzicht__cta-heading {
    font-size: 40px;
  }
}

.hrs-vacatures-overzicht__cta-text {
  margin: 0px;
  width: 100%;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

.hrs-vacatures-overzicht__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-vacatures-overzicht__cta-link:hover {
  opacity: 0.9;
}

.hrs-vacatures-overzicht__cta-link-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-vacatures-overzicht__cta-link-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-vacatures-overzicht__cta-link:hover .hrs-vacatures-overzicht__cta-link-icon svg {
  transform: translateX( 2px );
}

.hrs-vacatures-overzicht__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(22 22 21 / 0.5);
}

@media (min-width: 1024px) {
  .hrs-vacatures-overzicht__top {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
    row-gap: 0;
  }

  .hrs-vacatures-overzicht__card--small {
    grid-column: 1;
  }

  .hrs-vacatures-overzicht__card--large {
    grid-column: 3 / -1;
  }

  .hrs-vacatures-overzicht__cta-wrap {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
  }

  .hrs-vacatures-overzicht__cta-box {
    grid-column: 2;
    max-width: none;
    width: 100%;
  }
}

.hrs-voor-wie {
  --hrs-bg: #ffffff;
  --hrs-fg: #161615;
  --hrs-border: rgba( 22, 22, 21, 0.1 );
  position: relative;
  width: 100%;
  background-color: var( --hrs-bg );
  color: var( --hrs-fg );
}

.hrs-voor-wie--bg-grey {
  --hrs-bg: #efefee;
}

.hrs-voor-wie--bg-black {
  --hrs-bg: #161615;
  --hrs-fg: #ffffff;
  --hrs-border: rgba( 255, 255, 255, 0.16 );
}

/* --- Chrome grid lines --------------------------------------------------- */

.hrs-voor-wie__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-voor-wie__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: var( --hrs-border );
}

.hrs-voor-wie__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-voor-wie__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-voor-wie__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-voor-wie__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-voor-wie__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* --- Layout ------------------------------------------------------------- */

.hrs-voor-wie__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-voor-wie__inner {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

/* --- Header (heading + ghost button) ------------------------------------ */

.hrs-voor-wie__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.hrs-voor-wie__heading {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  color: var( --hrs-fg );
  font-size: clamp( 2rem, 3.6vw, 3rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-voor-wie__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

/* Ghost button: white pill, thin dark border, black circle + white arrow. */

.hrs-voor-wie__cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  border-width: 1px;
  border-color: rgb(22 22 21 / 0.25);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-voor-wie__cta:hover {
  border-color: rgb(22 22 21 / 0.5);
}

.hrs-voor-wie__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-voor-wie__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-voor-wie__cta:hover .hrs-voor-wie__cta-icon svg {
  transform: translateX( 2px );
}

.hrs-voor-wie__cta-label {
  white-space: nowrap;
}

/* --- Media -------------------------------------------------------------- */

.hrs-voor-wie__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: rgb(22 22 21 / 0.05);
  aspect-ratio: 360 / 513;
}

.hrs-voor-wie__img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-voor-wie__img--placeholder {
  background-color: rgb(22 22 21 / 0.1);
}

/* --- Body columns ------------------------------------------------------- */

.hrs-voor-wie__col-label {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
  line-height: 1.5;
  color: var( --hrs-fg );
}

.hrs-voor-wie__challenge,
	.hrs-voor-wie__solution {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.hrs-voor-wie__challenge-text {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  opacity: 0.75;
  color: var( --hrs-fg );
}

.hrs-voor-wie__list {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}

.hrs-voor-wie__list-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var( --hrs-border );
}

.hrs-voor-wie__list-item:first-child {
  padding-top: 0px;
}

.hrs-voor-wie__list-item:last-child {
  border-width: 0px;
  padding-bottom: 0px;
}

.hrs-voor-wie__check {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-voor-wie__check svg {
  width: 1.5rem;
  height: 1.5rem;
}

.hrs-voor-wie__list-text {
  min-width: 0px;
  flex: 1 1 0%;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  opacity: 0.75;
  color: var( --hrs-fg );
}

/* --- Desktop grid (cascade after the base flex rules) ------------------- */

@media (min-width: 1024px) {
  .hrs-voor-wie__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    grid-template-rows: auto auto;
    -moz-column-gap: 0;
         column-gap: 0;
    row-gap: 4rem;
    align-items: start;
  }

  .hrs-voor-wie__header {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    grid-row: 1;
  }

  .hrs-voor-wie__heading {
    flex: 1 1 0%;
    min-width: 0;
  }

  .hrs-voor-wie__challenge,
		.hrs-voor-wie__solution {
    grid-row: 2;
    padding-right: 1.5rem;
  }

  .hrs-voor-wie__media {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    grid-row: 1 / 3;
  }

  /* Foto rechts (default): heading + body on cols 1-2, photo on col 4. */

  .hrs-voor-wie--media-right .hrs-voor-wie__header {
    grid-column: 1 / 3;
  }

  .hrs-voor-wie--media-right .hrs-voor-wie__challenge {
    grid-column: 1;
  }

  .hrs-voor-wie--media-right .hrs-voor-wie__solution {
    grid-column: 2;
  }

  .hrs-voor-wie--media-right .hrs-voor-wie__media {
    grid-column: 4;
  }

  /* Foto links: photo on col 1, heading + body on cols 3-4. */

  .hrs-voor-wie--media-left .hrs-voor-wie__media {
    grid-column: 1;
  }

  .hrs-voor-wie--media-left .hrs-voor-wie__header {
    grid-column: 3 / 5;
  }

  .hrs-voor-wie--media-left .hrs-voor-wie__challenge {
    grid-column: 3;
  }

  .hrs-voor-wie--media-left .hrs-voor-wie__solution {
    grid-column: 4;
  }
}

.hrs-contact {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-contact {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* Vertical chrome grid lines — same canonical columns as every block. The
	 * left content sits in cols 1–2 and the aside in col 4, so the lines frame
	 * the two columns. Desktop only; the content sits above them. */

.hrs-contact__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-contact__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-contact__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-contact__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-contact__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-contact__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-contact__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-contact__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Desktop: the chrome grid — left content spans cols 1–2, the aside sits in
	 * col 4, and col 3 is the open gap, exactly like the design. */

@media (min-width: 1024px) {
  .hrs-contact__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-contact__main {
    grid-column: 1 / 3;
  }

  .hrs-contact__aside {
    grid-column: 4;
  }
}

/* --- Left column --------------------------------------------------------- */

.hrs-contact__main {
  display: flex;
  flex-direction: column;
}

.hrs-contact__head {
  display: flex;
  flex-direction: column;
}

.hrs-contact__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2.25rem, 5vw, 4rem );
  line-height: 1.05;
}

.hrs-contact__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-contact__intro {
  margin: 0px;
  margin-top: 2rem;
  max-width: 576px;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.7);
}

.hrs-contact__form {
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .hrs-contact__form {
    margin-top: 4rem;
  }
}

.hrs-contact__form-hint {
  margin: 0px;
  border-width: 1px;
  border-style: dashed;
  border-color: rgb(22 22 21 / 0.2);
  padding: 1.5rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(22 22 21 / 0.5);
}

/* --- Right column (aside) ----------------------------------------------- */

.hrs-contact__aside {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hrs-contact__group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hrs-contact__aside-title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-contact__aside-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.hrs-contact__aside-strong {
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-contact__aside-strong:hover {
  opacity: 0.7;
}

.hrs-contact__aside-meta {
  display: flex;
  gap: 1.5rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.5);
}

.hrs-contact__aside-meta--stack {
  display: block;
}

.hrs-contact__aside-text {
  margin: 0px;
  max-width: 220px;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.7);
}

.hrs-contact__photo {
  position: relative;
  margin-top: 0.5rem;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 360 / 371;
}

.hrs-contact__photo img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =======================================================================
	 * WS Form — restyle the embedded form to the design (Figma 134:8754).
	 *
	 * WS Form renders fields client-side and ships its OWN *unlayered* CSS,
	 * which outranks anything in @layer components no matter the specificity —
	 * so these overrides use the real WS Form classes (.wsf-field / .wsf-label /
	 * .wsf-button) with !important, scoped to the block so other forms stay
	 * untouched. The 2-column layout (name | e-mail) comes from the form's own
	 * column setup (.wsf-grid) in the WS Form builder.
	 * ==================================================================== */

.hrs-contact__form .wsf-form {
  font-family: "Mundial", sans-serif !important;
}

/* Labels — 16px black; the required asterisk in red. */

.hrs-contact__form .wsf-label {
  margin-bottom: 8px !important;
  font-family: "Mundial", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #161615 !important;
}

.hrs-contact__form .wsf-required-wrapper,
	.hrs-contact__form .wsf-required {
  color: #dd1a1e !important;
  border: 0 !important;
  text-decoration: none !important;
}

/* Fields (input / select / textarea all carry .wsf-field) — 1px black/10
	 * border, 12/24 padding, 18px text, square corners, white fill. */

.hrs-contact__form .wsf-field {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border: 1px solid rgba( 22, 22, 21, 0.1 ) !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  padding: 12px 24px !important;
  font-family: "Mundial", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #161615 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.hrs-contact__form textarea.wsf-field {
  min-height: 150px !important;
  resize: vertical !important;
}

.hrs-contact__form .wsf-field::-moz-placeholder {
  color: #161615 !important;
  opacity: 0.5 !important;
}

.hrs-contact__form .wsf-field::placeholder {
  color: #161615 !important;
  opacity: 0.5 !important;
}

.hrs-contact__form .wsf-field:focus {
  border-color: rgba( 22, 22, 21, 0.3 ) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Select caret — matches the design's caret-down. */

.hrs-contact__form select.wsf-field {
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23161615' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
  background-repeat: no-repeat !important;
  background-position: right 24px center !important;
  background-size: 16px !important;
  padding-right: 56px !important;
}

/* Submit button — red with a white circled arrow. WS Form's submit carries
	 * .wsf-button and renders a <button>, so the ::before icon works. */

.hrs-contact__form .wsf-button {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #dd1a1e !important;
  padding: 16px 24px 16px 16px !important;
  font-family: "Mundial", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.hrs-contact__form .wsf-button:hover {
  background-color: #b91519 !important;
}

.hrs-contact__form .wsf-button::before {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h15m0 0-6-6m6 6-6 6' stroke='%23DD1A1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px !important;
}

.hrs-werken-bij {
  --wb-bg: #efefee;
  position: relative;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-werken-bij {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

.hrs-werken-bij {
  background-color: var( --wb-bg );
}

.hrs-werken-bij--bg-grey {
  --wb-bg: #efefee;
}

.hrs-werken-bij--bg-white {
  --wb-bg: #ffffff;
}

/* Reach the footer. The page's <main> is min-h-screen, so on a short careers
	 * page the slack below the last block shows as a gap before the footer. When
	 * this block is that last section, let it grow into the slack so its grey
	 * background meets the footer. Scoped via :has so no other page is touched;
	 * inert in the editor (no .hrs-main there). */

.hrs-main:has( > .hrs-werken-bij:last-child ) {
  display: flex;
  flex-direction: column;
}

.hrs-main > .hrs-werken-bij:last-child {
  flex: 1 0 auto;
}

/* Vertical chrome grid lines — the same canonical columns as every block. The
	 * heading sits in cols 1–2 and the form in cols 3–4, so the lines frame the
	 * two columns. Desktop only; the content sits above them. */

.hrs-werken-bij__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-werken-bij__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-werken-bij__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-werken-bij__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-werken-bij__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-werken-bij__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-werken-bij__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-werken-bij__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Desktop: the chrome grid — heading spans cols 1–2, the form sits in cols
	 * 3–4, exactly like the design (heading left, form right). */

@media (min-width: 1024px) {
  .hrs-werken-bij__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-werken-bij__head {
    grid-column: 1 / 3;
  }

  .hrs-werken-bij__form {
    grid-column: 3 / 5;
  }
}

/* --- Left column --------------------------------------------------------- */

.hrs-werken-bij__head {
  display: flex;
  max-width: 576px;
  flex-direction: column;
  gap: 1rem;
}

.hrs-werken-bij__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2.25rem, 5vw, 4rem );
  line-height: 0.9;
}

.hrs-werken-bij__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-werken-bij__intro {
  margin: 0px;
  max-width: 576px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.75);
}

/* --- Right column (form) ------------------------------------------------- */

.hrs-werken-bij__form-hint {
  margin: 0px;
  border-width: 1px;
  border-style: dashed;
  border-color: rgb(22 22 21 / 0.2);
  padding: 1.5rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(22 22 21 / 0.5);
}

/* =======================================================================
	 * WS Form — restyle the embedded form to the design.
	 *
	 * WS Form renders fields client-side and ships its OWN *unlayered* CSS, which
	 * outranks anything in @layer components no matter the specificity — so these
	 * overrides use the real WS Form classes (.wsf-field / .wsf-label /
	 * .wsf-button) with !important, scoped to the block so other forms stay
	 * untouched. The 2-column layout (naam | e-mail) comes from the form's own
	 * column setup (.wsf-grid) in the WS Form builder; the textarea (motivatie)
	 * spans full width on its own row.
	 * ==================================================================== */

.hrs-werken-bij__form .wsf-form {
  font-family: "Mundial", sans-serif !important;
}

/* Labels — 16px black; the required asterisk in red. */

.hrs-werken-bij__form .wsf-label {
  margin-bottom: 8px !important;
  font-family: "Mundial", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #161615 !important;
}

.hrs-werken-bij__form .wsf-required-wrapper,
	.hrs-werken-bij__form .wsf-required {
  color: #dd1a1e !important;
  border: 0 !important;
  text-decoration: none !important;
}

/* Fields (input / select / textarea all carry .wsf-field) — 1px black/10
	 * border, 12/24 padding, 18px text, square corners, white fill. */

.hrs-werken-bij__form .wsf-field {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border: 1px solid rgba( 22, 22, 21, 0.1 ) !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  padding: 12px 24px !important;
  font-family: "Mundial", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #161615 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.hrs-werken-bij__form textarea.wsf-field {
  min-height: 150px !important;
  resize: vertical !important;
}

.hrs-werken-bij__form .wsf-field::-moz-placeholder {
  color: #161615 !important;
  opacity: 0.5 !important;
}

.hrs-werken-bij__form .wsf-field::placeholder {
  color: #161615 !important;
  opacity: 0.5 !important;
}

.hrs-werken-bij__form .wsf-field:focus {
  border-color: rgba( 22, 22, 21, 0.3 ) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Select caret — matches the design's caret-down. */

.hrs-werken-bij__form select.wsf-field {
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23161615' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
  background-repeat: no-repeat !important;
  background-position: right 24px center !important;
  background-size: 16px !important;
  padding-right: 56px !important;
}

/* Submit button — red with a white circled arrow on the left, then the label.
	 * WS Form's submit carries .wsf-button and renders a <button>, so ::before
	 * works for the icon. */

.hrs-werken-bij__form .wsf-button {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #dd1a1e !important;
  padding: 16px !important;
  font-family: "Mundial", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.hrs-werken-bij__form .wsf-button:hover {
  background-color: #b91519 !important;
}

.hrs-werken-bij__form .wsf-button::before {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h15m0 0-6-6m6 6-6 6' stroke='%23DD1A1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px !important;
}

.hrs-houtrot-text {
  position: relative;
  width: 100%;
}

/* --- Chrome grid lines --------------------------------------------------- */

.hrs-houtrot-text__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-houtrot-text__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-houtrot-text__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-houtrot-text__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-houtrot-text__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-houtrot-text__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-houtrot-text__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* --- Layout ------------------------------------------------------------- */

.hrs-houtrot-text__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-houtrot-text__inner {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.hrs-houtrot-text__content {
  display: flex;
  flex-direction: column;
  gap: 46px;
  min-width: 0;
}

.hrs-houtrot-text__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .hrs-houtrot-text__title {
    max-width: 480px;
  }
}

.hrs-houtrot-text__title {
  font-size: clamp( 2rem, 3.6vw, 3rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-houtrot-text__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-houtrot-text__body {
  font-family: Mundial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-houtrot-text__paragraph {
  margin: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  opacity: 0.75;
}

.hrs-houtrot-text__paragraph + .hrs-houtrot-text__paragraph {
  margin-top: 1.5rem;
}

/* --- Media -------------------------------------------------------------- */

.hrs-houtrot-text__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: rgb(22 22 21 / 0.05);
  aspect-ratio: 360 / 513;
}

.hrs-houtrot-text__img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-houtrot-text__img--placeholder {
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-houtrot-text__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(22 22 21 / 0.5);
}

/* --- Desktop grid (cascade after the base flex rules) ------------------- */

@media (min-width: 1024px) {
  .hrs-houtrot-text__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-houtrot-text__media {
    align-self: start;
    justify-self: stretch;
    width: 100%;
  }

  /* Foto rechts (default): text on cols 1-2, empty col 3, photo on col 4. */

  .hrs-houtrot-text--media-right .hrs-houtrot-text__content {
    grid-column: 1 / 3;
  }

  .hrs-houtrot-text--media-right .hrs-houtrot-text__media {
    grid-column: 4;
  }

  /* Foto links: photo on col 1, empty col 2, text on cols 3-4. */

  .hrs-houtrot-text--media-left .hrs-houtrot-text__media {
    grid-column: 1;
  }

  .hrs-houtrot-text--media-left .hrs-houtrot-text__content {
    grid-column: 3 / 5;
  }
}

.hrs-duurzaam-hersteld {
  position: relative;
  width: 100%;
}

/* --- Chrome grid lines --------------------------------------------------- */

.hrs-duurzaam-hersteld__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-duurzaam-hersteld__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-duurzaam-hersteld__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-duurzaam-hersteld__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-duurzaam-hersteld__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-duurzaam-hersteld__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-duurzaam-hersteld__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

/* --- Layout ------------------------------------------------------------- */

.hrs-duurzaam-hersteld__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-duurzaam-hersteld__inner {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.hrs-duurzaam-hersteld__content {
  display: flex;
  flex-direction: column;
  gap: 46px;
  min-width: 0;
}

.hrs-duurzaam-hersteld__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .hrs-duurzaam-hersteld__title {
    max-width: 480px;
  }
}

.hrs-duurzaam-hersteld__title {
  font-size: clamp( 2rem, 3.6vw, 3rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-duurzaam-hersteld__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-duurzaam-hersteld__body {
  font-family: Mundial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-duurzaam-hersteld__paragraph {
  margin: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  opacity: 0.75;
}

.hrs-duurzaam-hersteld__paragraph + .hrs-duurzaam-hersteld__paragraph {
  margin-top: 1.5rem;
}

/* --- Checklist ---------------------------------------------------------- */

.hrs-duurzaam-hersteld__list {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}

.hrs-duurzaam-hersteld__list-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.hrs-duurzaam-hersteld__list-item:first-child {
  padding-top: 0px;
}

.hrs-duurzaam-hersteld__list-item:last-child {
  border-width: 0px;
  padding-bottom: 0px;
}

.hrs-duurzaam-hersteld__check {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-duurzaam-hersteld__check svg {
  width: 1.5rem;
  height: 1.5rem;
}

.hrs-duurzaam-hersteld__list-text {
  min-width: 0px;
  flex: 1 1 0%;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

/* --- Media -------------------------------------------------------------- */

.hrs-duurzaam-hersteld__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: rgb(22 22 21 / 0.05);
  aspect-ratio: 334 / 513;
}

.hrs-duurzaam-hersteld__img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-duurzaam-hersteld__img--placeholder {
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-duurzaam-hersteld__empty {
  margin: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(22 22 21 / 0.5);
}

/* --- Desktop grid (cascade after the base flex rules) ------------------- */

@media (min-width: 1024px) {
  .hrs-duurzaam-hersteld__inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-duurzaam-hersteld__media {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    aspect-ratio: 360 / 513;
  }

  /* Foto links (default): photo col 1, content cols 3-4. */

  .hrs-duurzaam-hersteld--media-left .hrs-duurzaam-hersteld__media {
    grid-column: 1;
  }

  .hrs-duurzaam-hersteld--media-left .hrs-duurzaam-hersteld__content {
    grid-column: 3 / 5;
  }

  /* Foto rechts: content cols 1-2, empty col 3, photo col 4. */

  .hrs-duurzaam-hersteld--media-right .hrs-duurzaam-hersteld__content {
    grid-column: 1 / 3;
  }

  .hrs-duurzaam-hersteld--media-right .hrs-duurzaam-hersteld__media {
    grid-column: 4;
  }
}

.hrs-vacature-blok {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

/* ======================================================================
	 * Part 1 — pinned stepper
	 * ==================================================================== */

.hrs-vacature-blok__scroller {
  position: relative;
}

/* Tall enough (JS sets --hrs-steps) to give the pin its scroll budget. */

.hrs-vacature-blok__scroller.is-scroll {
  min-height: calc( 100vh + ( var( --hrs-steps, 3 ) * 60vh ) );
}

.hrs-vacature-blok__pin {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__pin {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__pin {
  position: sticky;
  top: 0px;
  display: flex;
  height: 100vh;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Keep the pinned content clear of the WordPress admin bar when logged in. */

.admin-bar .hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__pin {
  top: 32px;
  height: calc( 100vh - 32px );
}

/* --- Chrome grid lines --------------------------------------------------- */

.hrs-vacature-blok__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-vacature-blok__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-vacature-blok__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-vacature-blok__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-vacature-blok__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-vacature-blok__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-vacature-blok__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-vacature-blok__content {
  position: relative;
  z-index: 1;
}

/* Layout: stacked by default, two columns in scroll/preview mode. */

.hrs-vacature-blok__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* In scroll/preview-modus liggen de kolommen exact op de canonieke
	 * chrome-gridlijnen (Figma 147:12805): de checklist begint op lijn 3, de
	 * foto loopt van lijn 4 tot lijn 5. De tracks zijn dezelfde fracties als de
	 * lijnposities (696 / 360 / 368 van 1424); de tussenruimtes zitten als
	 * padding ín de cellen zodat elke linkerrand op zijn lijn blijft.
	 * items-start: kolommen lijnen aan de bovenzijde uit (klantfeedback). */

@media (min-width: 1024px) {
  .hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__inner,
		.hrs-vacature-blok--preview .hrs-vacature-blok__inner {
    display: grid;
    grid-template-columns: 696fr 360fr 368fr;
    gap: 0;
    align-items: start;
  }
}

/* Numbered title list (left column). */

.hrs-vacature-blok__list {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0px;
}

.hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__list,
	.hrs-vacature-blok--preview .hrs-vacature-blok__list {
  min-width: 0;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__list,
		.hrs-vacature-blok--preview .hrs-vacature-blok__list {
    grid-column: 1;
    /* Titels + hun lijnen zijn 576 van de 696 kolombreedte (Figma). */
    padding-right: 17.2414%;
  }
}

.hrs-vacature-blok__item {
  border-bottom-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__item {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.hrs-vacature-blok__item:last-child {
  border-bottom-width: 0px;
}

/* In de twee-koloms modus begint de eerste vraag op de bovenlijn van de
	 * rechterkolom — zonder eigen top-padding. */

@media (min-width: 1024px) {
  .hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__item:first-child,
	.hrs-vacature-blok--preview .hrs-vacature-blok__item:first-child {
    padding-top: 0px;
  }
}

/* Dim inactive steps only when the scroll interaction (or its preview) is on. */

.hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__item,
	.hrs-vacature-blok--preview .hrs-vacature-blok__item {
  opacity: 0.4;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__item.is-active,
	.hrs-vacature-blok--preview .hrs-vacature-blok__item.is-active {
  opacity: 1;
}

/* De stap direct ná de actieve is iets minder gedimd (Figma: 60/40%). */

.hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__item.is-active + .hrs-vacature-blok__item,
	.hrs-vacature-blok--preview .hrs-vacature-blok__item.is-active + .hrs-vacature-blok__item {
  opacity: 0.6;
}

.hrs-vacature-blok__row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.hrs-vacature-blok__num {
  flex-shrink: 0;
  font-family: Mundial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__num {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.hrs-vacature-blok__title {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hrs-vacature-blok__title {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__title {
    font-size: 40px;
  }
}

/* Inline media — shown in the stacked (base) mode only. */

.hrs-vacature-blok__item-media {
  margin-top: 1.5rem;
  display: flex;
  max-width: 420px;
  flex-direction: column;
  gap: 1.5rem;
}

.hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__item-media,
	.hrs-vacature-blok--preview .hrs-vacature-blok__item-media {
  display: none;
}

/* Right-hand panel (checklist + photo) — shown in scroll/preview mode only. */

.hrs-vacature-blok__panel {
  display: none;
}

/* display: contents — de checklists en figures worden zelf grid-items van
	 * __inner en vallen zo op de chrome-lijnen (kolom 2 en 3). */

@media (min-width: 1024px) {
  .hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__panel,
		.hrs-vacature-blok--preview .hrs-vacature-blok__panel {
    display: contents;
  }
}

/* Checklists stack in one grid cell and cross-fade per step. */

.hrs-vacature-blok__checklists {
  display: grid;
  min-width: 0;
}

.hrs-vacature-blok__figures {
  display: grid;
  min-width: 0;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__checklists,
		.hrs-vacature-blok--preview .hrs-vacature-blok__checklists {
    grid-column: 2;
    /* 24px afstand tot de foto: 24 van de 360 kolombreedte (Figma). */
    padding-right: 6.6667%;
  }

  .hrs-vacature-blok__scroller.is-scroll .hrs-vacature-blok__figures,
		.hrs-vacature-blok--preview .hrs-vacature-blok__figures {
    grid-column: 3;
  }
}

.hrs-vacature-blok__checklist {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}

.hrs-vacature-blok__checklist--panel {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  grid-area: 1 / 1;
}

.hrs-vacature-blok__checklist--panel.is-active {
  opacity: 1;
}

.hrs-vacature-blok__check-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.hrs-vacature-blok__check-item:first-child {
  padding-top: 0px;
}

.hrs-vacature-blok__check-item:last-child {
  border-width: 0px;
  padding-bottom: 0px;
}

.hrs-vacature-blok__check {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-vacature-blok__check svg {
  width: 1.5rem;
  height: 1.5rem;
}

.hrs-vacature-blok__check-text {
  min-width: 0px;
  flex: 1 1 0%;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  opacity: 0.75;
}

/* Photo box — shared by the inline figures and the panel figures. */

.hrs-vacature-blok__figure,
	.hrs-vacature-blok__figure-box {
  position: relative;
  aspect-ratio: 360/513;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

/* Panel figures stack in one grid cell and cross-fade. */

.hrs-vacature-blok__figures .hrs-vacature-blok__figure {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  grid-area: 1 / 1;
}

.hrs-vacature-blok__figures .hrs-vacature-blok__figure.is-active {
  opacity: 1;
}

.hrs-vacature-blok__img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ======================================================================
	 * Part 2 — full-bleed proportional photo band
	 * ==================================================================== */

.hrs-vacature-blok__band {
  display: flex;
  width: 100%;
  gap: 1.5rem;
  overflow-x: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__band {
    margin-top: 6rem;
    margin-bottom: 6rem;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

.hrs-vacature-blok__band-item {
  position: relative;
  height: 300px;
  width: 280px;
  flex-shrink: 0;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

.hrs-vacature-blok__band-img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-vacature-blok__band-img--placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 238 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__band-item {
    height: 452px;
    width: auto;
    min-width: 0;
    flex-grow: var( --hrs-w, 1 );
    flex-basis: 0;
  }
}

/* ======================================================================
	 * Part 3 — image + heading + body (photo left)
	 * ==================================================================== */

.hrs-vacature-blok__text {
  position: relative;
  width: 100%;
}

.hrs-vacature-blok__text-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__text-inner {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.hrs-vacature-blok__text-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: rgb(22 22 21 / 0.05);
  aspect-ratio: 334 / 513;
}

.hrs-vacature-blok__text-img {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hrs-vacature-blok__text-content {
  display: flex;
  flex-direction: column;
  gap: 46px;
  min-width: 0;
}

.hrs-vacature-blok__text-heading {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__text-heading {
    max-width: 480px;
  }
}

.hrs-vacature-blok__text-heading {
  font-size: clamp( 2rem, 3.6vw, 3rem );
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.hrs-vacature-blok__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-vacature-blok__text-body {
  font-family: Mundial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-vacature-blok__paragraph {
  margin: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  opacity: 0.75;
}

.hrs-vacature-blok__paragraph + .hrs-vacature-blok__paragraph {
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .hrs-vacature-blok__text-inner {
    display: grid;
    grid-template-columns: 336fr 360fr 360fr 368fr;
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: start;
  }

  .hrs-vacature-blok__text-media {
    grid-column: 1;
    width: 100%;
    align-self: start;
  }

  .hrs-vacature-blok__text-content {
    grid-column: 3 / 5;
  }
}

/* Respect reduced-motion: no cross-fades on the stepper. Kept inside
	 * @layer components so it orders after the rules above. */

@media ( prefers-reduced-motion: reduce ) {
  .hrs-vacature-blok__item,
		.hrs-vacature-blok__figure,
		.hrs-vacature-blok__checklist--panel {
    transition: none;
  }
}

.hrs-404 {
  position: relative;
  display: flex;
  min-height: 68vh;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .hrs-404 {
    min-height: 76vh;
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* Vertical chrome grid lines — same canonical columns as every block. Desktop only. */

.hrs-404__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-404__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-404__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-404__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-404__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-404__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-404__line--5 {
  left: auto;
  right: var( --hrs-chrome-inset );
}

.hrs-404__inner {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 640px;
  flex-direction: column;
  align-items: flex-start;
}

/* The big 404 — the brand-red hero number. */

.hrs-404__code {
  margin: 0px;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.03em;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
  font-size: clamp( 6rem, 20vw, 14rem );
}

.hrs-404__title {
  margin: 0px;
  margin-top: 1rem;
  font-family: Mundial, sans-serif;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  font-size: clamp( 2rem, 5vw, 3.5rem );
}

.hrs-404__accent {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-404__text {
  margin: 0px;
  margin-top: 1.5rem;
  max-width: 480px;
  font-family: Mundial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.5;
  color: rgb(22 22 21 / 0.7);
}

.hrs-404__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Primary CTA — filled red with a white circled arrow (theme pattern). */

.hrs-404__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-404__cta:hover {
  background-color: #b91519;
}

.hrs-404__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-404__cta-icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.hrs-404__cta:hover .hrs-404__cta-icon svg {
  transform: translateX( 2px );
}

.hrs-404__cta-label {
  white-space: nowrap;
}

/* Quick links to the main sections. */

.hrs-404__links {
  margin-top: 3rem;
  display: flex;
  width: 100%;
  max-width: 480px;
  flex-wrap: wrap;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 1rem;
  border-top-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-top: 2rem;
}

.hrs-404__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Mundial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-404__link:hover {
  opacity: 0.6;
}

.hrs-404__link-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-404__link-icon svg {
  width: 1rem;
  height: 1rem;
}

.hrs-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1520px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .hrs-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hrs-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.hrs-container-chrome {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1520px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .hrs-container-chrome {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hrs-container-chrome {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Anchor-link landing: keep the sticky header from covering a block you jump
	 * to (e.g. /voor-wie/#schilderbedrijven). Same-page links already scroll with
	 * the exact header offset via Lenis (src/js/smooth-scroll.js); this covers
	 * direct loads, cross-page menu links and reduced-motion / no-JS native jumps. */

.hrs-block {
  scroll-margin-top: 6rem;
}

.hrs-header__inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1520px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .hrs-header__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hrs-header__inner {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.hrs-header__inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Decorative vertical grid lines on the same canonical chrome columns as the
	 * blocks + footer (3rem / 0.235955 / 0.488764 / 0.741573 / 3rem within the
	 * centred 1520px box) so the header bar lines up with the content below it.
	 * Mobile: centre line only — see project-wide chrome rules at end of layer. */

.hrs-header__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-header__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

.hrs-header__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-header__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-header__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-header__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-header__line--5 {
  right: var( --hrs-chrome-inset );
}

.hrs-header__logo {
  display: inline-block;
  width: 161px;
  text-decoration-line: none;
}

.hrs-header__logo img {
  display: block;
  height: auto;
  width: 100%;
}

/* Mobile site header (Figma 73:2709) — synced with .hrs-menu__bar below lg. */

@media ( max-width: 1023px ) {
  .hrs-header__inner {
    min-height: 72px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-inline: var( --hrs-chrome-inset );
  }

  .hrs-header__logo {
    display: block;
    height: 2.5rem;
    width: 121px;
  }

  .hrs-header__logo img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: left;
       object-position: left;
  }
}

.hrs-menu__toggle {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-menu__toggle-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hrs-menu__toggle-icon svg {
  width: 1rem;
  height: 1rem;
}

.hrs-footer {
  position: relative;
  border-top-width: 1px;
  border-color: rgb(239 239 238 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 21 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(239 239 238 / var(--tw-text-opacity, 1));
}

/* Decorative vertical grid lines, aligned to the chrome content area, full footer height. */

.hrs-footer__lines {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  display: block;
  width: 100%;
  max-width: 1520px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hrs-footer__line {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;
  background-color: rgb(255 255 255 / 0.15);
}

.hrs-footer__line--1 {
  left: var( --hrs-chrome-inset );
}

.hrs-footer__line--2 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.235955 );
}

.hrs-footer__line--3 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.488764 );
}

.hrs-footer__line--4 {
  left: calc( var( --hrs-chrome-inset ) + var( --hrs-chrome-span ) * 0.741573 );
}

.hrs-footer__line--5 {
  right: var( --hrs-chrome-inset );
}

.hrs-footer__container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1520px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .hrs-footer__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hrs-footer__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.hrs-footer__container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-bottom: 0px;
  padding-top: 3.5rem;
}

@media (min-width: 640px) {
  .hrs-footer__container {
    gap: 3.5rem;
  }
}

.hrs-footer__main {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1280px) {
  .hrs-footer__main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.hrs-footer__brand {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1280px) {
  .hrs-footer__brand {
    width: 576px;
  }
}

.hrs-footer__logo {
  display: inline-block;
  width: 121px;
}

@media (min-width: 640px) {
  .hrs-footer__logo {
    width: 161px;
  }
}

.hrs-footer__logo img {
  display: block;
  height: auto;
  width: 100%;
}

.hrs-footer__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hrs-footer__heading {
  margin: 0px;
  display: flex;
  flex-direction: column;
  text-wrap: balance;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(239 239 238 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-footer__heading {
    font-size: 34px;
  }
}

@media (min-width: 1024px) {
  .hrs-footer__heading {
    font-size: 40px;
  }
}

.hrs-footer__heading span {
  display: block;
}

/* Contact block: stacked on mobile (Figma 75:3455), 2-column grid from sm. */

.hrs-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(239 239 238 / 0.75);
}

@media (min-width: 640px) {
  .hrs-footer__contact {
    display: grid;
    grid-template-columns: max-content max-content;
    -moz-column-gap: 93px;
         column-gap: 93px;
    row-gap: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .hrs-footer__address {
    grid-column: 1 / -1;
  }
}

.hrs-footer__contact-item {
  margin: 0px;
  color: rgb(239 239 238 / 0.75);
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-footer__contact-item:hover {
  opacity: 1;
}

.hrs-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 0px;
       column-gap: 0px;
  row-gap: 2rem;
}

@media (min-width: 640px) {
  .hrs-footer__nav {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    row-gap: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .hrs-footer__nav {
    display: flex;
    align-items: stretch;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}

.hrs-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1280px) {
  .hrs-footer__nav-col {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.hrs-footer__nav-col:nth-child( 2 ),
	.hrs-footer__nav-col:nth-child( 4 ) {
  white-space: nowrap;
}

@media (min-width: 640px) {
  .hrs-footer__nav-col:nth-child( 2 ),
	.hrs-footer__nav-col:nth-child( 4 ) {
    white-space: normal;
  }
}

.hrs-footer__nav-col--diensten {
  width: 181px;
  white-space: normal;
}

@media (min-width: 640px) {
  .hrs-footer__nav-col--diensten {
    width: auto;
  }
}

@media (min-width: 1280px) {
  .hrs-footer__nav-col--diensten {
    width: 157px;
    white-space: normal;
  }
}

.hrs-footer__nav-col:nth-child( 3 ) {
  width: 180px;
}

@media (min-width: 640px) {
  .hrs-footer__nav-col:nth-child( 3 ) {
    width: auto;
  }
}

.hrs-footer__nav-title {
  margin: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  --tw-text-opacity: 1;
  color: rgb(239 239 238 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .hrs-footer__nav-title {
    font-size: 22px;
    line-height: 1.2;
  }
}

.hrs-footer__nav-list {
  margin: 0px;
  list-style-type: none;
}

.hrs-footer__nav-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.hrs-footer__nav-list {
  padding: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.9;
  color: rgb(239 239 238 / 0.75);
}

@media (min-width: 640px) {
  .hrs-footer__nav-list {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 2.5;
  }
}

.hrs-footer__nav-list a,
	.hrs-footer__nav-list span {
  color: rgb(239 239 238 / 0.75);
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-footer__nav-list a:hover,
	.hrs-footer__nav-list span:hover {
  opacity: 1;
}

/* VCA badge — hidden on mobile (Figma 75:3455), visible from sm up. */

.hrs-footer__badge {
  margin-top: 2rem;
  display: none;
  width: 100px;
  mix-blend-mode: screen;
}

@media (min-width: 640px) {
  .hrs-footer__badge {
    display: block;
  }
}

@media (min-width: 1280px) {
  .hrs-footer__badge {
    margin-top: auto;
  }
}

.hrs-footer__badge img {
  display: block;
  height: auto;
  width: 100%;
}

.hrs-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top-width: 1px;
  border-color: rgb(239 239 238 / 0.1);
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 13px;
  line-height: 1.5;
  color: rgb(239 239 238 / 0.75);
}

@media (min-width: 640px) {
  .hrs-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.hrs-footer__copyright {
  margin: 0px;
}

.hrs-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.hrs-footer__legal a {
  color: rgb(239 239 238 / 0.75);
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-footer__legal a:hover {
  opacity: 1;
}

/* Mega menu overlay — visibility/opacity controlled by GSAP (src/js/menu.js).
	 * Uses the layout viewport (inset-0 → clientWidth, excludes the page
	 * scrollbar) and hides its own scrollbar, so its centred content always lines
	 * up with the header and no scrollbar bar pops in on open (no jump). */

.hrs-menu {
  position: fixed;
  inset: 0px;
  z-index: 100;
  overflow-y: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hrs-menu::-webkit-scrollbar {
  display: none;
}

/* Offset the fixed overlay below the WordPress admin bar when logged in. */

.admin-bar .hrs-menu {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .hrs-menu {
    top: 46px;
  }
}

.hrs-menu__lines {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: 0;
  display: block;
}

.hrs-menu__line {
  position: absolute;
  bottom: 0px;
  top: 0px;
  width: 1px;
  background-color: rgb(22 22 21 / 0.1);
}

/* Figma 134:6624 — chrome lines + image column dividers at fixed viewport positions. */

.hrs-menu__line--1 {
  left: calc((100vw - min(100vw, 1520px)) / 2 + 1.5rem);
}

.hrs-menu__line--2 {
  left: calc((100vw - min(100vw, 1520px)) / 2 + 384px);
}

.hrs-menu__line--3 {
  left: calc((100vw - min(100vw, 1520px)) / 2 + 1.5rem + 696px);
}

.hrs-menu__line--4 {
  left: calc((100vw - min(100vw, 1520px)) / 2 + 1104px);
}

.hrs-menu__line--5 {
  right: calc((100vw - min(100vw, 1520px)) / 2 + 1.5rem);
}

@media (min-width: 1024px) {
  .hrs-menu__line--1 {
    left: calc((100vw - min(100vw, 1520px)) / 2 + 3rem);
  }

  .hrs-menu__line--3 {
    left: calc((100vw - min(100vw, 1520px)) / 2 + 3rem + 696px);
  }

  .hrs-menu__line--5 {
    right: calc((100vw - min(100vw, 1520px)) / 2 + 3rem);
  }
}

.hrs-menu__inner {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.hrs-menu__content {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
}

.hrs-menu__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.hrs-menu__logo {
  display: inline-block;
  width: 161px;
  text-decoration-line: none;
}

.hrs-menu__logo img {
  display: block;
  height: auto;
  width: 100%;
}

.hrs-menu__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 4rem;
  padding-bottom: 5rem;
  padding-top: 5rem;
}

@media (min-width: 1280px) {
  .hrs-menu__body {
    flex-direction: row;
    gap: 240px;
    padding-top: 5rem;
  }
}

.hrs-menu__main {
  display: flex;
  width: 100%;
  max-width: 456px;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .hrs-menu__main {
    gap: 2.5rem;
  }
}

.hrs-menu__main-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-menu__main-item:hover,
	.hrs-menu__main-item.is-active {
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-menu__main-text {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  line-height: 0.9;
}

.hrs-menu__main-num {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hrs-menu__main-label {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hrs-menu__main-label {
    font-size: 48px;
  }
}

.hrs-menu__main-arrow {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-menu__main-item:hover .hrs-menu__main-arrow,
	.hrs-menu__main-item.is-active .hrs-menu__main-arrow {
  opacity: 1;
}

.hrs-menu__main-arrow svg {
  width: 1.75rem;
  height: 1.75rem;
}

.hrs-menu__panels {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 640px) {
  .hrs-menu__panels {
    flex-direction: row;
    gap: 120px;
  }
}

.hrs-menu__panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Submenu panels stack in one grid cell; only the active one is visible. */

.hrs-menu__submenus {
  position: relative;
  display: grid;
}

.hrs-menu__submenu {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.hrs-menu__submenu.is-active {
  visibility: visible;
  opacity: 1;
}

.hrs-menu__panel-title {
  margin: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-menu__sublist {
  margin: 0px;
  display: flex;
  width: 100%;
  max-width: 240px;
  list-style-type: none;
  flex-direction: column;
  gap: 1rem;
  padding: 0px;
}

.hrs-menu__sublist li {
  border-bottom-width: 1px;
  border-color: rgb(22 22 21 / 0.1);
  padding-bottom: 0.75rem;
}

.hrs-menu__sublist li:last-child {
  border-bottom-width: 0px;
}

.hrs-menu__sublist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-menu__sublist a:hover {
  opacity: 0.7;
}

.hrs-menu__sublist-arrow {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
}

.hrs-menu__sublist-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.hrs-menu__panel--contact {
  width: 100%;
  max-width: 250px;
}

.hrs-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hrs-menu__contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
}

.hrs-menu__contact-strong {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(22 22 21 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.hrs-menu__contact-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(22 22 21 / 0.75);
}

.hrs-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(221 26 30 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-menu__cta:hover {
  opacity: 0.9;
}

.hrs-menu__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 26 30 / var(--tw-text-opacity, 1));
}

.hrs-menu__cta-icon svg {
  width: 1rem;
  height: 1rem;
}

/* Standalone full-bleed photo band: spans the full viewport width, flush to
	 * both screen edges and decoupled from the menu's content grid. On desktop
	 * the three images share the width proportionally (≈ the Figma 384 : 696 :
	 * 392 ratio) so the band stays full-width and balanced at any viewport size.
	 * Below lg it falls back to a horizontal scroll of fixed-width images. */

.hrs-menu__slider {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  .hrs-menu__slider {
    overflow: hidden;
  }
}

.hrs-menu__slide {
  height: 300px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .hrs-menu__slide {
    height: 452px;
    min-width: 0px;
  }
}

.hrs-menu__slide:nth-child(1) {
  width: 260px;
}

@media (min-width: 1024px) {
  .hrs-menu__slide:nth-child(1) {
    width: auto;
    flex: 384 1 0;
  }
}

.hrs-menu__slide:nth-child(2) {
  width: 460px;
}

@media (min-width: 1024px) {
  .hrs-menu__slide:nth-child(2) {
    width: auto;
    flex: 696 1 0;
  }
}

.hrs-menu__slide:nth-child(3) {
  width: 380px;
}

@media (min-width: 1024px) {
  .hrs-menu__slide:nth-child(3) {
    width: auto;
    flex: 392 1 0;
  }
}

.hrs-menu__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* -----------------------------------------------------------------------
	 * Mobile menu (Figma 161:9347). Below lg the overlay is one stacked column:
	 * numbered main nav with always-visible arrows, a single "Onze diensten"
	 * list (the active submenu) full-width with row dividers, and a full-width
	 * red CTA pinned to the bottom. Phone/email details + the photo slider are
	 * desktop-only. Chrome: 3-line grid on mobile (Figma 73:2677).
	 * --------------------------------------------------------------------- */

@media ( max-width: 1023px ) {
  .hrs-menu__bar {
    min-height: 72px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-inline: var( --hrs-chrome-inset );
  }

  .hrs-menu__logo {
    display: block;
    height: 2.5rem;
    width: 121px;
  }

  .hrs-menu__logo img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: left;
       object-position: left;
  }

  .hrs-menu__toggle {
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .hrs-menu__toggle-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .hrs-menu__toggle-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .hrs-menu__body {
    gap: 3rem;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    padding-inline: var( --hrs-chrome-inset );
  }

  .hrs-menu__panels {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0px;
  }

  .hrs-menu__main {
    max-width: none;
    gap: 2rem;
  }

  .hrs-menu__main-item {
    height: 1.5rem;
    align-items: center;
  }

  /* Figma 161:9460 — 20px text band inside a 24px row; label cap at top, num at bottom. */

  .hrs-menu__main-text {
    height: 1.25rem;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .hrs-menu__main-num,
		.hrs-menu__main-label {
    margin: 0px;
    display: block;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
  }

  .hrs-menu__main-num {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .hrs-menu__main-label {
    font-size: 30px;
  }

  .hrs-menu__main-arrow {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    opacity: 1;
  }

  .hrs-menu__main-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hrs-menu__submenus {
    width: 100%;
  }

  .hrs-menu__panel {
    gap: 1rem;
  }

  .hrs-menu__panel-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .hrs-menu__sublist {
    max-width: none;
    gap: 0.5rem;
  }

  .hrs-menu__sublist li {
    padding-bottom: 0.375rem;
  }

  .hrs-menu__sublist a {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .hrs-menu__sublist-arrow {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

  .hrs-menu__sublist-arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .hrs-menu__panel--contact {
    margin-top: auto;
    width: 100%;
    max-width: none;
    padding-top: 2rem;
  }

  .hrs-menu__panel--contact .hrs-menu__panel-title,
		.hrs-menu__contact {
    display: none;
  }

  .hrs-menu__cta {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 15px;
    line-height: 1;
  }

  .hrs-menu__cta-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  .hrs-menu__cta-icon svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .hrs-menu__slider {
    display: none;
  }

  .hrs-block {
    scroll-margin-top: 4.5rem;
  }
}

/* -----------------------------------------------------------------------
	 * Mobile chrome grid — project-wide (Figma 73:2677).
	 * Below lg: 3 lines — left edge, centre, right edge (16px / 50% / 16px
	 * at the default mobile gutter). Hide inner desktop columns (2 & 4).
	 * --------------------------------------------------------------------- */

@media ( max-width: 1023px ) {
  [class*='__lines'],
		[class*='__text-lines'] {
    display: block;
  }

  [class*='__line--2'],
		[class*='__line--4'],
		[class*='__text-line--2'],
		[class*='__text-line--4'] {
    display: none;
  }

  [class*='__line--1'],
		[class*='__text-line--1'] {
    display: block;
    left: var( --hrs-chrome-inset );
    right: auto;
  }

  [class*='__line--3'],
		[class*='__text-line--3'] {
    display: block;
    left: 50%;
    right: auto;
  }

  [class*='__line--5'],
		[class*='__text-line--5'] {
    display: block;
    left: auto;
    right: var( --hrs-chrome-inset );
  }
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.min-h-screen {
  min-height: 100vh;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-none {
  max-width: none;
}

.grow {
  flex-grow: 1;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.items-start {
  align-items: flex-start;
}

.overflow-hidden {
  overflow: hidden;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(45 80 22 / var(--tw-bg-opacity, 1));
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.text-center {
  text-align: center;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(45 80 22 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hrs-menu-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Lenis smooth scroll — required base styles.
 * Classes are toggled on <html> by the Lenis instance (see src/js/smooth-scroll.js).
 * ------------------------------------------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Header entrance — the logo and menu button fade + slide down on load.
 * CSS-only on purpose: the script bundle loads in the footer, so a JS entrance
 * would flash the header visible first. A CSS animation applies from first
 * paint (no flash), runs without JS, and is disabled under reduced motion.
 * ------------------------------------------------------------------------- */

@keyframes hrs-header-in {
  from {
    opacity: 0;
    transform: translateY( -14px );
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hrs-header__logo,
.hrs-menu__toggle--open {
  animation: hrs-header-in 0.8s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.hrs-header__logo {
  animation-delay: 0.1s;
}

.hrs-menu__toggle--open {
  animation-delay: 0.25s;
}

@media ( prefers-reduced-motion: reduce ) {
  .hrs-header__logo,
	.hrs-menu__toggle--open {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
 * Sticky header — sticks to the top, slides away on scroll-down and returns on
 * scroll-up. The --hidden / --scrolled states are toggled by src/js/header.js.
 * position: sticky keeps it in flow (no layout shift, no content offset needed).
 * ------------------------------------------------------------------------- */

.hrs-header {
  position: sticky;
  top: 0px;
  z-index: 50;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.3s ease;
  will-change: transform;
}

.hrs-header--hidden {
  transform: translateY( -100% );
}

.hrs-header--scrolled {
  box-shadow: 0 10px 30px -18px rgba( 22, 22, 21, 0.35 );
}

/* Sit below the WordPress admin bar when logged in (matches the menu overlay). */

.admin-bar .hrs-header {
  top: 32px;
}

@media screen and ( max-width: 782px ) {
  .admin-bar .hrs-header {
    top: 46px;
  }
}

@media ( prefers-reduced-motion: reduce ) {
  .hrs-header {
    transition: none;
  }
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}