/*
 * Wheelness: de vormgeving van de site.
 *
 * Deel 1 zijn de lettertypen, zelf gehost (public/fonts) in plaats van de
 * import van Google Fonts uit het ontwerp: dan mag next.config.ts ze een jaar
 * cachen en is er geen verzoek naar een derde partij.
 *
 * Deel 2 is ontwerp/styles.bundle.css, letterlijk. Pas daar niets aan; komt er
 * een nieuwe export, vervang dit deel dan in zijn geheel.
 *
 * Deel 3 staat in elke pagina van het ontwerp in een style-tag, plus wat het
 * ontwerp met een eigen attribuut deed (style-hover) en nu een klasse is.
 */

/* ===== 1. Lettertypen ===== */
@font-face { font-family: 'Mulish'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(/fonts/mulish-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Mulish'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(/fonts/mulish-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/mulish-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/mulish-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tektur'; font-style: normal; font-weight: 400 900; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/tektur-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tektur'; font-style: normal; font-weight: 400 900; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/tektur-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== 2. ontwerp/styles.bundle.css ===== */
/* Wheelness: alle styles in één bestand (tokens + componenten). Gegenereerd uit styles.css */

/* ===== tokens/fonts.css ===== */
/* Display: Tektur (closest Google match to the Carsy squared/chamfered display face — see readme)
   Body: Mulish (matches Carsy body copy) */

/* ===== tokens/colors.css ===== */
:root {
  /* Base */
  --wn-orange: #ff4d23;
  --wn-orange-glow: rgba(255, 77, 35, 0.55);
  --wn-orange-tint: rgba(255, 77, 35, 0.18);
  --wn-black: #000000;
  --wn-gray-950: #111111;
  --wn-gray-925: #141414;
  --wn-gray-900: #191919;
  --wn-gray-875: #1a1a1a;
  --wn-gray-850: #292929;
  --wn-gray-700: #3a3a3a;
  --wn-gray-400: #a5a5a5;
  --wn-white: #ffffff;

  /* Semantic */
  --bg-page: var(--wn-black);
  --surface-1: var(--wn-gray-950);      /* cards, header bars, alt sections */
  --surface-2: var(--wn-gray-900);      /* icon circles */
  --surface-nav-pill: var(--wn-gray-950);
  --border-1: var(--wn-gray-875);       /* default 1px hairline */
  --border-2: var(--wn-gray-850);       /* tags, FAQ rows */
  --border-strong: var(--wn-gray-700);  /* nav pills, phone icon — clearly visible outline */
  --track: var(--wn-gray-700);          /* progress track */
  --ghost-number: var(--wn-gray-925);   /* giant background numerals (fill) */
  --ghost-stroke: rgba(255,255,255,.12); /* giant numerals outline */
  --text-1: var(--wn-white);
  --text-2: var(--wn-gray-400);         /* body copy */
  --text-on-accent: var(--wn-white);
  --accent: var(--wn-orange);
  --status-open: #2fd27a;    /* phone CTA: nu bereikbaar */
  --status-closed: #6b6b6b;  /* phone CTA: gesloten */
}

/* ===== tokens/typography.css ===== */
:root {
  --font-display: "Tektur", "Arial Narrow", sans-serif;
  --font-body: "Mulish", Arial, sans-serif;

  --fs-h1: 88px;   --lh-h1: 1.2;
  --fs-h2: 56px;   --lh-h2: 1.25;
  --fs-h3: 48px;   --lh-h3: 1.2;
  --fs-h4: 32px;   --lh-h4: 1.3;
  --fs-h5: 26px;   --lh-h5: 1.3;
  --fs-h6: 18px;   --lh-h6: 1.4;
  --fs-eyebrow: 22px;
  --fs-label: 15px;          /* nav, buttons-lg, tiles */
  --fs-button: 15px;
  --fs-body: 16px;  --lh-body: 1.6;
  --fs-body-lg: 18px; --lh-body-lg: 1.7;
  --fs-price: 64px;
  --fs-ghost: 210px;

  --fw-display: 600;
  --fw-display-heavy: 700;
  --fw-label: 500;
  --fw-eyebrow: 400;
  --fw-body: 400;
  --fw-body-strong: 700;

  --ls-label: 2.5px;
  --ls-button: 2px;
  --ls-h6: 3px;
  --ls-heading: 0px;
  --stretch-eyebrow: 85%;
}

/* ===== tokens/spacing.css ===== */
:root {
  --container: 1400px;
  --gutter: 24px;
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px;
  --sp-80: 80px; --sp-120: 120px; --sp-160: 160px;
  --section-y: 120px;
  --nav-h: 70px;
  --btn-h: 56px; --btn-px: 32px;   /* ALL buttons: 56px high, 32px side padding (= nav CTA) */
  --radius: 0px;          /* Everything is square */
  --bw-hair: 1px;
  --bw-outline: 1px;
  --bar-w: 3px;           /* orange accent bar before eyebrows/titles */
  --corner-dot: 8px;      /* orange corner squares on framed sections */
}

/* ===== tokens/effects.css ===== */
:root {
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-base: 0.4s;
  --dur-slow: 0.6s;
  --dur-reveal: 1s;
  --dur-progress: 1.6s;
  --shadow: none;           /* no drop shadows anywhere */
  --glow-blur: 90px;
  --glow-rest: 0.12;        /* glows/tints dim when far from viewport centre; scroll-proximity script lights them to 1 */
  --img-overlay: linear-gradient(200deg, rgba(255,77,35,0.55) 0%, rgba(255,77,35,0) 45%);
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 70%, #000 100%);
}
@keyframes wn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wn-fade-up { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes wn-dropdown { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wn-glow-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,-30px); } }

/* ===== components/components.css ===== */
/* Wheelness component classes — hover states & motion live here */
.wn-page { background: var(--bg-page); color: var(--text-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; -webkit-font-smoothing: antialiased; }
.wn-page a { color: inherit; text-decoration: none; }
.wn-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }

/* Headings */
.wn-h1, .wn-h2, .wn-h3, .wn-h4, .wn-h5, .wn-h6 { overflow-wrap: break-word; hyphens: auto; font-family: var(--font-display); text-transform: uppercase; margin: 0; color: var(--text-1); }
.wn-h1 { font-size: clamp(42px, 7vw, var(--fs-h1)); line-height: var(--lh-h1); font-weight: var(--fw-display); }
.wn-h2 { font-size: clamp(32px, 4.6vw, var(--fs-h2)); line-height: var(--lh-h2); font-weight: var(--fw-display); }
.wn-h3 { font-size: clamp(30px, 3.4vw, var(--fs-h3)); line-height: var(--lh-h3); font-weight: var(--fw-display); }
.wn-h4 { font-size: clamp(22px, 2.2vw, var(--fs-h4)); line-height: var(--lh-h4); font-weight: var(--fw-display); }
.wn-h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-display); letter-spacing: 1px; }
.wn-h5--wide { font-size: 36px; letter-spacing: 3px; }
.wn-h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: var(--fw-label); letter-spacing: var(--ls-h6); }
.wn-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); margin: 0; }
.wn-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.wn-body strong, .wn-body b { color: var(--text-1); font-weight: var(--fw-body-strong); }

/* Accent bar (eyebrows, card titles, stat labels) */
.wn-bar { display: inline-flex; align-items: center; gap: 12px; }
.wn-bar::before { content: ""; width: var(--bar-w); align-self: stretch; min-height: 1em; background: var(--accent); flex: none; }
.wn-eyebrow { font-family: var(--font-display); font-stretch: var(--stretch-eyebrow); font-weight: var(--fw-eyebrow); font-size: var(--fs-eyebrow); line-height: 1.3; text-transform: uppercase; color: var(--text-1); margin: 0; }

/* Text roll (two stacked copies; hover slides up) */
.wn-roll { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: top; }
.wn-roll > span { display: block; transition: transform var(--dur-base) var(--ease-out); }
.wn-roll-trigger:hover .wn-roll > span, .wn-btn:hover .wn-roll > span, .wn-door:hover .wn-btn .wn-roll > span { transform: translateY(-100%); }

/* Buttons */
.wn-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; height: var(--btn-h); padding: 0 var(--btn-px); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-button); line-height: 1; letter-spacing: var(--ls-button); text-transform: uppercase; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.wn-btn.wn-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.wn-btn.wn-btn--primary:hover { background: var(--wn-white); color: var(--wn-black); }
.wn-btn.wn-btn--outline { background: transparent; color: var(--text-1); box-shadow: inset 0 0 0 var(--bw-outline) var(--wn-white); }
.wn-btn.wn-btn--outline:hover { background: var(--wn-white); color: var(--wn-black); }
.wn-btn.wn-btn--white { background: var(--wn-white); color: var(--wn-black); }
.wn-btn.wn-btn--white:hover { background: var(--accent); color: var(--wn-white); }
.wn-btn--block { display: flex; width: 100%; }
.wn-btn:disabled, .wn-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.wn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wn-arrow { position: relative; width: var(--btn-h); height: var(--btn-h); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-page); border: 1px solid var(--border-1); color: var(--text-1); cursor: pointer; padding: 0; font-size: 16px; }
.wn-arrow img { width: 16px; height: 16px; }

.wn-social { position: relative; width: 80px; height: 80px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-page); border: 1px solid var(--border-1); color: var(--text-1); font-size: 22px; transition: color var(--dur-fast); }
.wn-social:hover { color: var(--accent); }

/* Nav */
.wn-nav { position: sticky; top: 12px; z-index: 50; max-width: var(--container); margin: 12px auto 0; height: var(--nav-h); background: var(--bg-page); border: 1px solid var(--border-1); display: flex; align-items: center; padding: 0 7px 0 22px; box-sizing: border-box; }
.wn-nav__logo { display: flex; align-items: center; height: 100%; }
.wn-nav__logo img { width: 210px; height: auto; display: block; }
@media (max-width: 600px) { .wn-nav__logo img { width: 170px; } }
.wn-nav__links { gap: 0; flex: 1; justify-content: center; display: flex; align-items: stretch; height: 56px; margin: 0; }
.wn-nav__link { white-space: nowrap; position: relative; display: flex; align-items: center; gap: 6px; padding: 0 20px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-1); cursor: pointer; border: 1px solid transparent; transition: color var(--dur-fast); background: none; }
.wn-nav__link--pill { background: var(--surface-nav-pill); border-color: var(--border-strong); }
.wn-nav__link:hover, .wn-nav__link.is-open { color: var(--accent); }
/* Het plusje van Tektur staat lager in zijn regel dan de hoofdletters van het
   label: gemeten 2,5px onder het midden van "DIENSTEN". `top` en niet een
   transform, zodat de overgang op transform vrij blijft. */
.wn-nav__plus { position: relative; top: -0.14em; color: var(--accent); font-size: 18px; line-height: 1; font-weight: 500; transition: transform var(--dur-fast) var(--ease-out); }
.wn-nav__cart { white-space: nowrap; font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; padding: 0 28px; }
.wn-nav__cart b { color: var(--accent); font-weight: inherit; }

.wn-dropdown { position: absolute; top: calc(100% + 8px); left: -1px; min-width: 100%; width: max-content; background: var(--bg-page); border: 1px solid var(--border-1); padding: 22px 0; display: none; animation: wn-dropdown var(--dur-fast) var(--ease-out); }
.wn-nav__link.is-open .wn-dropdown { display: block; }
.wn-dropdown::before { content: ""; position: absolute; left: -1px; right: -1px; top: -12px; height: 12px; }
.wn-dropdown a { white-space: nowrap; display: block; padding: 10px 32px 10px 32px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-1); transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.wn-dropdown a:hover { color: var(--accent); transform: translateX(6px); }

/* Tag */
.wn-tag { display: inline-block; padding: 6px 16px; background: var(--surface-1); border: 1px solid var(--border-2); font-family: var(--font-display); font-weight: var(--fw-label); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-1); }

/* Service card */
.wn-service { background: var(--surface-1); border: 1px solid var(--border-1); display: flex; flex-direction: column; color: var(--text-1); }
.wn-service__top { height: 76px; display: flex; justify-content: flex-end; align-items: center; padding: 0 20px; position: relative; }
.wn-service__icon { width: 90px; height: 105px; background: var(--accent); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin-top: -1px; }
.wn-service__icon img { width: 50px; height: 50px; }

.wn-service__media { height: 300px; overflow: hidden; position: relative; }
.wn-service__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.wn-service__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(330deg, rgba(255,77,35,.45), rgba(255,77,35,0) 40%); pointer-events: none; }
.wn-service:hover .wn-service__media img { transform: scale(1.08); }
.wn-service__body { padding: 26px 20px 30px; display: flex; flex-direction: column; gap: 14px; }
.wn-service__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h5); line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; transition: color var(--dur-fast); }
.wn-service:hover .wn-service__title { color: var(--accent); }

/* Stat */
.wn-stat { position: relative; padding: 120px 40px 10px 0; overflow: hidden; }
.wn-stat__ghost { position: absolute; left: 50px; top: 0; font-family: var(--font-display); font-weight: 500; font-stretch: 75%; font-size: var(--fs-ghost); line-height: 0.8; letter-spacing: -2px; white-space: nowrap; color: rgba(28,28,28,.6); -webkit-text-stroke: 1px var(--ghost-stroke); z-index: 0; pointer-events: none; user-select: none; }
.wn-stat > *:not(.wn-stat__ghost) { position: relative; z-index: 1; }
.wn-stat .wn-h6 { margin-bottom: 64px; }

/* Progress */
.wn-progress { display: flex; flex-direction: column; gap: 14px; }
.wn-progress__head { position: relative; height: 26px; }
.wn-progress__label { font-family: var(--font-display); font-weight: var(--fw-label); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
.wn-progress__value { position: absolute; top: 4px; transform: translateX(-100%); font-family: var(--font-body); font-weight: 600; font-size: 20px; transition: left var(--dur-progress) var(--ease-expo); }
.wn-progress__track { height: 3px; background: var(--track); position: relative; }
.wn-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: width var(--dur-progress) var(--ease-expo); }

/* FAQ */
.wn-faq { border: 1px solid var(--border-2); background: transparent; }
.wn-faq__q { display: flex; align-items: stretch; justify-content: space-between; width: 100%; gap: 20px; padding: 0 0 0 24px; min-height: 70px; background: none; border: 0; cursor: pointer; color: var(--text-1); text-align: left; font-family: var(--font-display); font-weight: var(--fw-label); font-size: 15px; letter-spacing: 3px; text-transform: uppercase; }
.wn-faq__q > :not(.wn-faq__toggle), .wn-faq__q { line-height: 1.4; }
.wn-faq__q { align-items: center; }
.wn-faq__toggle { position: relative; width: 70px; height: 70px; flex: none; align-self: stretch; background: var(--accent); font-size: 0; color: transparent; }
.wn-faq__toggle::before, .wn-faq__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--wn-white); transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out); }
.wn-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.wn-faq.is-open .wn-faq__toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.wn-faq.is-open .wn-faq__toggle::after { transform: translate(-50%, -50%) rotate(135deg); }
.wn-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.wn-faq.is-open .wn-faq__a { grid-template-rows: 1fr; }
.wn-faq__a > div { overflow: hidden; }
.wn-faq__a p { padding: 4px 24px 26px; }

/* Process step */
.wn-step { border: 1px solid var(--border-1); background: var(--bg-page); padding: 31px 0 48px 37px; display: flex; flex-direction: column; transition: background-color var(--dur-base); }
.wn-step:hover { background: var(--surface-1); }
.wn-step__num { display: flex; align-items: center; margin-bottom: 66px; }
.wn-step__num span { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-1); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; flex: none; transition: background-color var(--dur-base), border-color var(--dur-base); }
.wn-step:hover .wn-step__num span { background: var(--accent); border-color: var(--accent); }
.wn-step__num::after { content: ""; height: 1px; flex: 1; background: var(--border-1); }
.wn-step .wn-h4 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: var(--fw-display-heavy); margin-bottom: 20px; padding-right: 37px; }
.wn-step .wn-body { padding-right: 37px; }

/* Pricing */
.wn-price { border: 1px solid var(--border-1); background: var(--bg-page); }
.wn-price__head { background: var(--surface-1); padding: 22px 30px; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
.wn-price__head i { width: 6px; height: 6px; background: var(--accent); display: inline-block; }
.wn-price__row { display: flex; align-items: center; justify-content: space-between; padding: 26px 30px; border-top: 1px solid var(--border-1); }
.wn-price__amount { font-family: var(--font-display); font-weight: var(--fw-display-heavy); font-size: var(--fs-price); line-height: 1; }
.wn-price__feat { display: grid; grid-template-columns: 100px 1fr; border-top: 1px solid var(--border-1); }
.wn-price__feat > div:first-child { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border-1); }
.wn-price__feat .wn-iconcircle { width: 50px; height: 50px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.wn-price__feat .wn-iconcircle img { width: 26px; height: 26px; }
.wn-price__feat p { padding: 24px 24px; max-width: 380px; }

/* Contact tile */
.wn-tile { display: inline-flex; align-items: stretch; height: 62px; border: 1px solid var(--border-1); border-left: 3px solid var(--accent); background: var(--bg-page); color: var(--text-1); }
.wn-tile__icon { width: 62px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border-1); flex: none; transition: background-color var(--dur-fast); }
.wn-tile__icon img { width: 40px; height: 40px; }
.wn-tile__label { display: flex; align-items: center; justify-content: flex-start; flex: 1; padding: 0 24px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.wn-tile:hover .wn-tile__label { color: var(--accent); }
.wn-tile--block { display: flex; width: 100%; }

/* Newsletter */
.wn-news { display: flex; align-items: center; height: 60px; background: var(--bg-page); border: 1px solid var(--border-1); padding: 0 4px 0 0; }
.wn-news input { flex: 1; height: 100%; background: transparent; border: 0; outline: 0; padding: 0 20px; color: var(--text-1); font-family: var(--font-display); font-size: 15px; letter-spacing: 3px; text-transform: uppercase; }
.wn-news input::placeholder { color: var(--text-2); }
.wn-news button { width: 50px; height: 50px; background: var(--accent); border: 0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background-color var(--dur-fast), color var(--dur-fast); }
.wn-news button:hover { background: #fff; color: var(--accent); }

/* Atmosphere */
.wn-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--wn-orange-glow) 0%, rgba(255,77,35,0) 70%); filter: blur(var(--glow-blur)); pointer-events: none; opacity: var(--glow-rest); transition: opacity 0.9s var(--ease-out); animation: wn-glow-drift 14s ease-in-out infinite; }
[data-glow] { opacity: var(--glow-rest); transition: opacity 0.9s var(--ease-out); will-change: opacity; }
.wn-frame { position: relative; border: 1px solid var(--border-1); }
.wn-frame > i { position: absolute; width: var(--corner-dot); height: var(--corner-dot); background: var(--accent); }
.wn-frame > i:nth-of-type(1) { top: -5px; left: -5px; } .wn-frame > i:nth-of-type(2) { top: -5px; right: -5px; }
.wn-frame > i:nth-of-type(3) { bottom: -5px; left: -5px; } .wn-frame > i:nth-of-type(4) { bottom: -5px; right: -5px; }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(50px); transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .wn-glow { animation: none; } }

/* Responsive + page helpers */
.wn-burger { display: none; width: 56px; height: 56px; margin-left: auto; align-items: center; justify-content: center; background: var(--surface-1); border: 1px solid var(--border-1); color: var(--text-1); font-size: 20px; cursor: pointer; }
.wn-mobile { position: fixed; top: 94px; left: 24px; right: 24px; z-index: 49; background: var(--bg-page); border: 1px solid var(--border-1); padding: 16px 0; max-height: calc(100vh - 120px); overflow: auto; animation: wn-dropdown var(--dur-fast) var(--ease-out); }
.wn-mobile a { display: block; padding: 12px 28px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-1); }
.wn-mobile a.is-sub { font-size: 13px; color: var(--text-2); padding-left: 44px; }
.wn-mobile a:hover { color: var(--accent); }
.wn-g2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.wn-g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.wn-field { width: 100%; box-sizing: border-box; height: 60px; padding: 0 20px; background: var(--bg-page); border: 1px solid var(--border-1); color: var(--text-1); font-family: var(--font-body); font-size: 16px; outline: 0; border-radius: 0; transition: border-color var(--dur-fast); }
.wn-field:focus { border-color: var(--accent); }
.wn-field::placeholder { color: var(--text-2); }
textarea.wn-field { height: 140px; padding: 18px 20px; resize: vertical; }
select.wn-field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ff4d23 50%), linear-gradient(135deg, #ff4d23 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.wn-label { display: block; margin-bottom: 10px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-1); }
@media (max-width: 1100px) { .wn-nav__links, .wn-nav__cta-desk { display: none !important; } .wn-burger { display: flex; } }
@media (max-width: 900px) {
  .wn-g2, .wn-g3 { grid-template-columns: minmax(0,1fr) !important; }
  .wn-stat__ghost { font-size: 175px; } .wn-stat { padding-top: 100px; } .wn-eyebrow { font-size: 17px; }
  .wn-hide-m { display: none !important; } .wn-static-m { position: static !important; }
  .wn-g3 > .wn-stat { border-left: 0 !important; padding-left: 0 !important; }
}

/* Phone CTA with live availability */
.wn-call { display: flex; align-items: center; gap: 16px; height: var(--btn-h); padding: 0; margin: 0 24px 0 0; box-sizing: border-box; color: var(--text-1); text-decoration: none; }
.wn-call__icon { font-size: 18px; position: relative; width: var(--btn-h); height: var(--btn-h); box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--accent); font-size: 16px; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.wn-call__icon::before, .wn-call__icon::after { content: ""; position: absolute; width: 0; height: 0; box-sizing: border-box; border: 1px solid transparent; pointer-events: none; }
.wn-call__icon::before { top: -1px; left: -1px; }
.wn-call__icon::after { bottom: -1px; right: -1px; }
.wn-call:hover .wn-call__icon::before { width: calc(100% + 2px); height: calc(100% + 2px); border-top-color: var(--accent); border-right-color: var(--accent); transition: width .15s linear, height .15s linear .15s; }
.wn-call:hover .wn-call__icon::after { width: calc(100% + 2px); height: calc(100% + 2px); border-bottom-color: var(--accent); border-left-color: var(--accent); transition: border-color 0s linear .3s, width .15s linear .3s, height .15s linear .45s; }
.wn-call__text { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.wn-call__num { font-family: var(--font-display); font-weight: var(--fw-label); font-size: 15px; letter-spacing: 2px; white-space: nowrap; transition: color var(--dur-fast); }
.wn-call:hover .wn-call__num { color: var(--accent); }
.wn-call__status { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.wn-call__dot { width: 8px; height: 8px; border-radius: 50%; background: #6b6b6b; flex: none; }
.wn-call.is-open .wn-call__dot { background: #2fd27a; box-shadow: 0 0 0 0 rgba(47,210,122,.6); animation: wn-pulse 2s ease-out infinite; }
.wn-call.is-open .wn-call__status { color: #2fd27a; }
@keyframes wn-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,210,122,.55); } 70% { box-shadow: 0 0 0 7px rgba(47,210,122,0); } 100% { box-shadow: 0 0 0 0 rgba(47,210,122,0); } }
@media (max-width: 1100px) { .wn-call { margin-left: auto; } .wn-burger { margin-left: 8px; } }
@media (max-width: 600px) { .wn-call__text { display: none; } .wn-call { padding: 0; } }

@media (max-width: 1280px) { .wn-g2 .wn-g2 { grid-template-columns: minmax(0,1fr) !important; } }
@media (max-width: 1100px) { .wn-g3 { grid-template-columns: minmax(0,1fr) !important; } .wn-g3 > .wn-stat { border-left: 0 !important; padding-left: 0 !important; } .wn-g3 > .wn-hide-m { display: none !important; } }

/* Clockwise outline draw (Carsy hover): top → right → bottom → left */
.wn-draw { position: relative; }
.wn-arrow::before, .wn-arrow::after, .wn-draw::before, .wn-draw::after { content: ""; position: absolute; width: 0; height: 0; box-sizing: border-box; border: 1px solid transparent; pointer-events: none; }
.wn-arrow::before, .wn-draw::before { top: -1px; left: -1px; }
.wn-arrow::after, .wn-draw::after { bottom: -1px; right: -1px; }
.wn-arrow:hover::before, .wn-draw:hover::before { width: calc(100% + 2px); height: calc(100% + 2px); border-top-color: var(--accent); border-right-color: var(--accent); transition: width .15s linear, height .15s linear .15s; }
.wn-arrow:hover::after, .wn-draw:hover::after { width: calc(100% + 2px); height: calc(100% + 2px); border-bottom-color: var(--accent); border-left-color: var(--accent); transition: border-color 0s linear .3s, width .15s linear .3s, height .15s linear .45s; }
.wn-arrow:hover i, .wn-arrow:hover img { color: var(--accent); }
.wn-arrow i { transition: color var(--dur-fast); }

/* Flipping image cube (Carsy "Speed stories" centre block): square, rotates on X axis through 4 faces */
.wn-cube { --s: min(520px, 80vw); width: var(--s); height: var(--s); perspective: 1800px; flex: none; }
.wn-cube__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: translateZ(calc(var(--s) / -2)); animation: wn-cube 14s cubic-bezier(.77,0,.18,1) infinite; }
.wn-cube__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: #000; }
.wn-cube__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wn-cube__face::after { content: ""; position: absolute; inset: 0; background: var(--img-overlay); }
.wn-cube__face:nth-child(1) { transform: rotateX(0deg) translateZ(calc(var(--s) / 2)); }
.wn-cube__face:nth-child(2) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.wn-cube__face:nth-child(3) { transform: rotateX(-180deg) translateZ(calc(var(--s) / 2)); }
.wn-cube__face:nth-child(4) { transform: rotateX(-270deg) translateZ(calc(var(--s) / 2)); }
@keyframes wn-cube {
  0%, 18% { transform: translateZ(calc(var(--s) / -2)) rotateX(0deg); }
  25%, 43% { transform: translateZ(calc(var(--s) / -2)) rotateX(90deg); }
  50%, 68% { transform: translateZ(calc(var(--s) / -2)) rotateX(180deg); }
  75%, 93% { transform: translateZ(calc(var(--s) / -2)) rotateX(270deg); }
  100% { transform: translateZ(calc(var(--s) / -2)) rotateX(360deg); }
}
@media (prefers-reduced-motion: reduce) { .wn-cube__inner { animation: none; } }

/* Reviews marquee */
@keyframes wn-marquee { to { transform: translateX(-50%); } }
.wn-marquee { animation: wn-marquee 60s linear infinite; }
.wn-marquee-wrap:hover .wn-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wn-marquee { animation: none; } }

/* CTA door panels */
.wn-door { display: flex; align-items: flex-end; min-height: 620px; overflow: hidden; color: var(--text-1); text-decoration: none; background: #000; }
.wn-door > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out), filter .6s; filter: grayscale(.2) brightness(.95); }
.wn-door__shade { position: absolute; inset: 0; background: linear-gradient(20deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,.1) 70%, rgba(0,0,0,0) 100%); }
.wn-door__shade::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); transition: width .6s var(--ease-out); }
.wn-door__body { position: relative; z-index: 1; padding: 56px; }
.wn-door:hover > img { transform: scale(1.08); filter: grayscale(0) brightness(.9); }
.wn-door:hover .wn-door__shade::after { width: 100%; }
@media (max-width: 767px) { .wn-door { min-height: 480px; } .wn-door__body { padding: 32px 24px; } }

/* Page fade-in once styles are loaded (prevents unstyled flash) */
.wn-page { opacity: 1 !important; }

/* Page transition: orange + black wipe */
.wn-transition { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.wn-transition span { position: absolute; inset: 0; transform-origin: top; transform: scaleY(1); will-change: transform; }
.wn-transition.is-ready span { animation: wn-tr-out .75s cubic-bezier(.77,0,.18,1) both; }
.wn-transition span:first-child { background: #000; }
.wn-transition.is-ready span:first-child { animation-delay: .12s; }
.wn-transition span:last-child { background: #000; }
.wn-transition.is-leaving { pointer-events: auto; }
.wn-transition.is-leaving span { transform-origin: bottom; animation: wn-tr-in .5s cubic-bezier(.77,0,.18,1) both; }
.wn-transition.is-leaving span:first-child, .wn-transition.is-ready.is-leaving span:first-child { animation-delay: 0s; }
.wn-transition.is-leaving span:last-child { animation-delay: .1s; }
@keyframes wn-tr-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes wn-tr-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .wn-transition span { animation: none !important; transform: scaleY(0) !important; } }

/* Responsive hardening */
@media (max-width: 600px) {
  .wn-tile__label { padding: 0 16px; font-size: 13px; letter-spacing: 1px; min-width: 0; }
  .wn-tile__label .wn-roll { max-width: 100%; text-overflow: ellipsis; }
  .wn-tile__label .wn-roll > span { overflow: hidden; text-overflow: ellipsis; }
  .wn-stat__ghost { font-size: clamp(96px, 30vw, 175px); }
  .wn-btn { max-width: 100%; }
}
@media (max-width: 400px) {
  .wn-tile__label { font-size: 12px; letter-spacing: .5px; }
}
img, video, iframe { max-width: 100%; }

/* ===== 3. Paginabasis uit het ontwerp ===== */
html, body { margin: 0; background: #000; }
* { box-sizing: border-box; }
a { color: #fff; text-decoration: none; }
a:hover { color: #ff4d23; }

/* style-hover="color:#ff4d23" uit het ontwerp. Met !important, want de kleur
   in rust staat inline op het element en die wint anders. */
.wn-hover-accent:hover { color: #ff4d23 !important; }
/* style-hover="border-color:#ff4d23;color:#fff" op het fotovak van de offerte. */
.wn-hover-upload:hover { border-color: #ff4d23 !important; color: #fff !important; }

/* Overslaan naar de inhoud, voor toetsenbord en schermlezer. Onzichtbaar tot
   hij focus krijgt; het ontwerp heeft hem niet, de toegankelijkheid wel. */
.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 24px; top: 8px; z-index: 1001; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: #ff4d23; color: #fff; font-family: var(--font-display); letter-spacing: 2px; text-transform: uppercase; }

/* Een honeypotveld in elk formulier, voor bots. */
.wn-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Een melding onder een formulier als het versturen mislukt. */
.wn-formfout { grid-column: 1 / -1; margin: 0; font-size: 14px; color: #ff4d23; }

/* Kopbalk op tablet en telefoon. Belknop en menuknop staan rechts tegen
   elkaar aan; in het ontwerp hield de belknop zijn 24px marge naar rechts en
   stonden ze los. Onder 600px mag het logo krimpen, zodat het op de smalste
   telefoons niet tegen de knoppen aan komt. (Verzoek Daan, 23-10-2026.) */
@media (max-width: 1100px) { .wn-call { margin-right: 0; } }
@media (max-width: 600px) {
  .wn-nav__logo { flex: 0 1 auto; min-width: 0; margin-right: 16px; }
  .wn-nav__logo img { max-width: 100%; }
}

/* Tikdoelen. Kleine tekstlinks (kruimelpad, telefoon, routebeschrijving,
   links in de voet) en de streepjes onder de carrousel krijgen een onzichtbaar
   klikvlak van 44px hoog, zodat ze op een telefoon goed te raken zijn. Er
   verandert niets aan wat je ziet. */
.wn-tik { position: relative; }
.wn-tik::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.wn-tik-streep::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.wn-tik-streep { position: relative; }
@media (max-width: 1100px) { .wn-burger { flex: none; } }

/* Tegels op een telefoon. Het ontwerp kapte een te lange naam af met "…"
   ("Poedercoaten andere on…"); hier breekt hij naar een tweede regel. De
   rollende tweede tekst doet op een aanraakscherm niets en valt dan weg. */
@media (max-width: 600px) {
  .wn-tile { height: auto; min-height: 62px; }
  .wn-tile__label { white-space: normal; padding-top: 12px; padding-bottom: 12px; line-height: 1.3; }
  .wn-tile__label .wn-roll { height: auto; overflow: visible; white-space: normal; }
  .wn-tile__label .wn-roll > span { overflow: visible; text-overflow: clip; white-space: normal; }
  .wn-tile__label .wn-roll > span[aria-hidden="true"] { display: none; }
}


/* De brede kopjes in de voet en op Contact ("Openingstijden") zijn 36px met
   3px spatiëring; op een telefoon past "Openingstijden" dan niet en breekt het
   met een afbreekstreepje. Onder 600px schaalt de maat mee met het scherm,
   nooit groter dan het ontwerp. */
@media (max-width: 600px) { .wn-h5--wide { font-size: clamp(22px, 7.4vw, 36px); } }

/* De oranje knop onderaan het mobiele menu. De regel voor gewone links in dat
   menu (blok, 12px 28px, gewicht 500) won hier van de knopstijl, waardoor
   "Offerte aanvragen" linksboven in het vlak stond en te dun was. Ook zo in het
   ontwerp; hier krijgt hij de maat en het gewicht van elke andere knop. */
.wn-mobile a.wn-btn { display: flex; padding: 0 var(--btn-px); font-weight: var(--fw-display); line-height: 1; }

/* De drie cijfers onderin de hero op een telefoon. Op desktop valt het grote
   cijfer achter het label (dat begint op ruim tweederde van het cijfer); op een
   telefoon stond het label eronder, met 64px tot de tekst, en werd elk blok
   bijna 300px hoog. Hier dezelfde verhouding als op desktop, compacter.
   (Verzoek Daan, 23-10-2026.) */
@media (max-width: 600px) {
  .wn-stat { padding-top: calc(clamp(96px, 30vw, 175px) * 0.5); padding-bottom: 28px; }
  .wn-stat .wn-h6 { margin-bottom: 16px; }
}
/* Onder elkaar valt de inspringing van het tweede en derde cijferblok weg
   (zie .wn-g3 > .wn-stat hierboven), maar hun grote cijfer stond nog 90px in in
   plaats van 50px. Nu staan alle drie gelijk. */
@media (max-width: 1100px) { .wn-g3 > .wn-stat .wn-stat__ghost { left: 50px !important; } }

/* Formulieren op een telefoon. Twee halve velden naast elkaar zijn daar te
   smal: de voorbeeldtekst werd afgekapt en "Aantal velgen" brak over twee
   regels, waardoor de keuzelijsten niet meer gelijk stonden. Onder 600px staat
   alles onder elkaar. De stapnummers (01, 02, 03) zijn even breed, zodat de
   stapnamen recht onder elkaar beginnen. (Verzoek Daan, 23-10-2026.) */
.wn-stapnummer { min-width: 22px; flex: none; }
@media (max-width: 600px) {
  .wn-formulier { grid-template-columns: minmax(0, 1fr) !important; }
  .wn-formulier > * { grid-column: 1 / -1 !important; }
}

/* De bereikbaarheid naast "Bel Koen" liep op een telefoon rechts het scherm
   uit; daar mag hij afbreken. */
@media (max-width: 600px) {
  .wn-status { white-space: normal !important; align-items: flex-start !important; }
  /* De stip op de hoogte van de eerste regel (13px tekst, regelhoogte 1.6). */
  .wn-status > span:first-child { margin-top: 7px; }
}