/* ark-base.css - Ark Deco WordPress-thema. Samengevoegd uit het prototype (index.html, ark-base.css, ark-shop.css, ark-touch.css). */

    @font-face {
      font-family: 'Stack Sans Text'; font-style: normal; font-display: swap; font-weight: 200 700;
      src: url(https://cdn.jsdelivr.net/fontsource/fonts/stack-sans-text:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
    }
    :root {
      --font: 'Stack Sans Text', system-ui, sans-serif;
      --display: 'Poppins', 'Stack Sans Text', system-ui, sans-serif;
      --cream: #FFFFFF;
      --cream-2: #F3F2EF;
      --paper: #FFFFFF;
      --ink: #16140F;
      --ink-soft: #767064;
      --forest: #1B1A16;
      --forest-deep: #100F0C;
      --mustard: #EDE9E0;
      --accent: #1B1A16;
      --accent-2: #000000;
      --accent-tint: color-mix(in srgb, var(--ink) 8%, #fff);
      --accent-shadow: rgba(20,18,14,.4);
      --sage: #8C887F;
      --blue: #8C887F;
      --clay: #B4AEA4;
      --hair: color-mix(in srgb, var(--ink) 13%, transparent);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0; background: var(--cream); color: var(--ink);
      font-family: var(--font); font-size: 16px; line-height: 1.55;
      font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden;
    }
    /* subtle grain */
    body::before {
      content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .015;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .display { font-family: var(--display); font-weight: 500; letter-spacing: -.022em; line-height: 1.04; }
    .display.xl { font-weight: 600; letter-spacing: -.03em; }
    .eyebrow-line { font-family: var(--display); }
    .wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
    h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
    p { text-wrap: pretty; }
    a { color: inherit; }
    ::selection { background: var(--accent); color: #fff; }

    /* reveal */
    .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1), filter .75s ease; }
    .reveal.in { opacity: 1; transform: none; filter: none; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } }

    /* nav link underline */
    .navlink { position: relative; transition: color .18s; }
    .navlink::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--mustard); transition: width .25s; border-radius: 2px; }
    .navlink:hover { color: #fff; }
    .navlink:hover::after { width: 100%; }
    .navlink.active::after { width: 100%; background: currentColor; }
    .footlink { transition: color .18s, padding-left .18s; }
    .footlink:hover { color: #fff; padding-left: 4px; }

    /* marquee */
    .marquee-track { display: flex; gap: 0; width: max-content; animation: marq 34s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marq { to { transform: translateX(-50%); } }

    /* inputs */
    .ark-input { width: 100%; padding: 15px 17px; border-radius: 14px; border: 2px solid #e6dcc8; background: #fff; font-family: var(--font); font-size: 15.5px; color: var(--ink); outline: none; transition: border-color .18s, box-shadow .18s; }
    .ark-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
    .ark-input::placeholder { color: #a89c8b; }

    /* range slider */
    .ark-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; background: var(--cream-2); outline: none; cursor: pointer; }
    .ark-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 4px 14px -2px var(--accent-shadow); cursor: grab; transition: transform .12s; }
    .ark-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
    .ark-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 4px 14px -2px var(--accent-shadow); cursor: grab; }

    @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
    @keyframes popin { from { opacity: 0; transform: translateY(24px) scale(.95); } to { opacity: 1; transform: none; } }
    @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes ripple { 0% { transform: scale(.2); opacity: var(--rip, .7); } 100% { transform: scale(1); opacity: 0; } }

    /* ===== benefits - lively colour mosaic ===== */
    .benefit-card { position: relative; overflow: hidden; border-radius: 26px; padding: 38px 34px; height: 100%; border: 1px solid var(--hair); transition: transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s; will-change: transform; }
    .benefit-card:hover { transform: translateY(-10px); box-shadow: 0 32px 62px -26px var(--tone-shadow); }
    .benefit-badge-wrap { position: relative; z-index: 1; width: 70px; height: 70px; margin-bottom: 26px; animation: badgeBob 4.6s ease-in-out infinite; animation-delay: var(--bob, 0s); }
    .benefit-badge { width: 70px; height: 70px; border-radius: 50% 50% 20px 20px; display: flex; align-items: center; justify-content: center; background: var(--tone-solid); box-shadow: 0 14px 26px -10px var(--tone-shadow); transition: transform .35s cubic-bezier(.34,1.7,.5,1); }
    .benefit-card:hover .benefit-badge { transform: rotate(-7deg) scale(1.09); }
    .benefit-badge::after { content: ""; position: absolute; inset: -7px; border-radius: 50% 50% 24px 24px; border: 2px solid var(--tone-solid); opacity: 0; transform: scale(.9); transition: opacity .3s, transform .4s; }
    .benefit-card:hover .benefit-badge::after { opacity: .4; transform: scale(1.06); }
    .benefit-arch { position: absolute; right: -36px; bottom: -48px; pointer-events: none; transition: transform .5s cubic-bezier(.34,1.2,.5,1); }
    .benefit-card:hover .benefit-arch { transform: translateY(-14px) rotate(6deg); }
    .benefit-eq { display: flex; align-items: flex-end; gap: 5px; height: 30px; margin-top: 20px; position: relative; }
    .benefit-eq span { width: 6px; border-radius: 6px; background: var(--tone-solid); animation: benefitEq 1.05s ease-in-out infinite; }
    .benefit-swatches { display: flex; gap: 9px; margin-top: 20px; position: relative; }
    .benefit-swatches span { width: 24px; height: 24px; border-radius: 8px; box-shadow: 0 3px 8px -3px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.34,1.6,.5,1); }
    .benefit-card:hover .benefit-swatches span { transform: translateY(-5px); }
    @keyframes badgeBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes benefitEq { 0%,100% { height: 28%; } 50% { height: 100%; } }
    @media (prefers-reduced-motion: reduce) { .benefit-badge-wrap, .benefit-eq span { animation: none !important; } }

    /* ===== how it works - vertical timeline ===== */
    .proc-timeline { position: relative; max-width: 940px; }
    .proc-rail-track { position: absolute; left: 35px; top: 38px; bottom: 38px; width: 4px; border-radius: 4px; background: rgba(20,18,14,.13); }
    .proc-rail-fill { position: absolute; left: 35px; top: 38px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--ink), #4A463F 50%, #8C887F); box-shadow: 0 0 18px -2px var(--accent-shadow); transition: height .35s cubic-bezier(.3,.7,.2,1); }
    .proc-rail-fill::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 4px var(--prog-dot, var(--forest)), 0 4px 12px -2px rgba(0,0,0,.3); transition: background .3s, box-shadow .3s; }
    .proc-row { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 30px; padding: 16px 0; align-items: center; }
    .proc-node-col { display: flex; justify-content: center; }
    .proc-node { position: relative; width: 64px; height: 64px; border-radius: 50% 50% 20px 20px; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--tone-solid); box-shadow: 0 6px 18px -10px rgba(20,18,14,.45), inset 0 0 0 2px color-mix(in srgb, var(--tone-solid) 22%, transparent); transition: transform .45s cubic-bezier(.34,1.6,.5,1), background .4s, color .4s, box-shadow .4s; z-index: 2; }
    .proc-node::after { content: ""; position: absolute; inset: -8px; border-radius: 50% 50% 24px 24px; border: 2px solid var(--tone-solid); opacity: 0; transform: scale(.86); transition: opacity .4s, transform .5s; }
    .proc-row.is-active .proc-node { background: var(--tone-solid); color: #fff; transform: scale(1.09); box-shadow: 0 18px 34px -12px var(--tone-shadow); }
    .proc-row.is-active .proc-node::after { opacity: .35; transform: scale(1.05); animation: nodePulse 2.4s ease-in-out infinite; }
    .proc-num { position: absolute; top: -7px; right: -7px; width: 25px; height: 25px; border-radius: 50%; background: var(--cream); color: var(--ink); font-family: var(--font); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px -2px rgba(0,0,0,.25); transition: background .4s, color .4s; }
    .proc-row.is-active .proc-num { background: #fff; color: var(--tone-solid); }
    .proc-card { display: grid; grid-template-columns: 1fr 290px; background: var(--paper); border-radius: 28px; overflow: hidden; box-shadow: 0 2px 0 rgba(20,18,14,.05); transition: transform .45s cubic-bezier(.34,1.3,.5,1), box-shadow .45s; }
    .proc-row.is-active .proc-card { transform: translateY(-3px); box-shadow: 0 26px 50px -28px var(--tone-shadow); }
    .proc-card-text { padding: 32px 34px; }
    .proc-scene { position: relative; background: var(--tone-tint); overflow: hidden; min-height: 196px; display: flex; align-items: center; justify-content: center; }
    .proc-step-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tone-solid); margin-bottom: 12px; }
    .proc-step-label span.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-solid); }
    @keyframes nodePulse { 0%,100% { opacity: .12; transform: scale(1.05); } 50% { opacity: .4; transform: scale(1.16); } }

    /* scene 1 - measure */
    .ms-scan { animation: msScan 3.4s cubic-bezier(.6,0,.4,1) infinite; transform-box: fill-box; }
    @keyframes msScan { 0% { transform: translateX(0); } 50% { transform: translateX(118px); } 100% { transform: translateX(0); } }
    .ms-dash { stroke-dasharray: 5 5; animation: msMarch 1s linear infinite; }
    @keyframes msMarch { to { stroke-dashoffset: -20; } }
    /* scene 2 - colour pick */
    .cs-ring { position: absolute; top: 50%; width: 76px; height: 100px; border-radius: 34px 34px 11px 11px; border: 3px solid var(--ink); transform: translateY(-50%); animation: csMove 4.6s cubic-bezier(.5,0,.2,1) infinite; box-shadow: 0 8px 18px -6px rgba(0,0,0,.32); }
    @keyframes csMove { 0%,12% { left: -8px; } 25%,37% { left: 68px; } 50%,62% { left: 144px; } 75%,87% { left: 220px; } 100% { left: -8px; } }
    .cs-sw { transition: transform .4s; }
    /* scene 3 - cut */
    .ct-scissors { animation: ctCut 3.6s cubic-bezier(.45,0,.55,1) infinite; transform-box: fill-box; }
    @keyframes ctCut { 0% { transform: translateX(-6px); } 100% { transform: translateX(178px); } }
    .ct-line { stroke-dasharray: 7 6; animation: ctMarch 1.1s linear infinite; }
    @keyframes ctMarch { to { stroke-dashoffset: -26; } }
    .ct-top { animation: ctLift 3.6s cubic-bezier(.45,0,.55,1) infinite; transform-box: fill-box; }
    @keyframes ctLift { 0%,46% { transform: translateY(0); } 70%,100% { transform: translateY(-9px); } }
    /* scene 4 - arches / calm waves */
    .aw-arch { transform-box: fill-box; transform-origin: bottom center; animation: awWave 3s ease-in-out infinite; }
    @keyframes awWave { 0%,100% { opacity: .5; transform: scaleY(.97); } 50% { opacity: 1; transform: scaleY(1); } }
    .proc-scene .anim { animation-play-state: paused; }
    .proc-row.is-active .proc-scene .anim { animation-play-state: running; }
    @media (prefers-reduced-motion: reduce) { .proc-scene .anim { animation: none !important; } .aw-arch { stroke-dashoffset: 0 !important; } }
    @media (max-width: 820px) {
      .proc-card { grid-template-columns: 1fr; }
      .proc-scene { min-height: 150px; order: -1; }
      .proc-row { grid-template-columns: 58px 1fr; gap: 18px; }
      .proc-rail-track, .proc-rail-fill { left: 27px; }
    }

    /* ===== how it works v2 - full-screen pinned scrollytelling ===== */
    .proc-pin { position: relative; }
    .proc-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
    .proc-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,5vw,84px); align-items: center; width: 100%; }
    .proc-steps { position: relative; margin-top: 38px; padding-left: 0; }
    .proc-vtrack { position: absolute; left: 25px; width: 4px; border-radius: 4px; background: rgba(20,18,14,.14); }
    .proc-vfill { position: absolute; left: 25px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--ink), #4A463F 50%, #8C887F); box-shadow: 0 0 16px -2px var(--accent-shadow); transition: top .35s cubic-bezier(.3,.7,.2,1), height .35s cubic-bezier(.3,.7,.2,1); }
    .proc-step2 { position: relative; display: flex; gap: 20px; align-items: flex-start; padding: 14px 0; cursor: pointer; transition: opacity .4s; }
    .proc-step2.dim { opacity: .5; }
    .proc-snode { position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50% 50% 17px 17px; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--tone-solid); margin-left: 0; box-shadow: 0 5px 14px -8px rgba(20,18,14,.4), inset 0 0 0 2px color-mix(in srgb, var(--tone-solid) 20%, transparent); transition: transform .45s cubic-bezier(.34,1.5,.5,1), background .4s, color .4s, box-shadow .4s; z-index: 2; }
    .proc-step2.on .proc-snode { background: var(--tone-solid); color: #fff; transform: scale(1.1); box-shadow: 0 14px 28px -10px var(--tone-shadow); }
    .proc-snum { position: absolute; top: -6px; right: -6px; width: 23px; height: 23px; border-radius: 50%; background: var(--cream); color: var(--ink); font-family: var(--font); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px -2px rgba(0,0,0,.25); transition: background .4s, color .4s; }
    .proc-step2.on .proc-snum { background: #fff; color: var(--tone-solid); }
    .proc-sbody { padding-top: 4px; }
    .proc-slabel { font-family: var(--font); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(20,18,14,.5); margin-bottom: 4px; transition: color .35s; }
    .proc-step2.on .proc-slabel { color: var(--tone-solid); }
    .proc-stitle { font-family: var(--font); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.15; transition: font-size .35s, color .35s; }
    .proc-step2.on .proc-stitle { font-size: 27px; }
    .proc-sdesc { font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.3,.7,.2,1), opacity .4s, margin .4s; }
    .proc-step2.on .proc-sdesc { max-height: 130px; opacity: 1; margin-top: 9px; }
    .proc-stage { position: relative; height: min(72vh, 600px); border-radius: 42px; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: background .6s ease; box-shadow: 0 50px 90px -55px rgba(20,18,14,.7); }
    .proc-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 72% 12%, rgba(255,255,255,.5), transparent 58%); pointer-events: none; }
    .proc-scene2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .proc-art { width: min(66%, 440px); display: flex; align-items: center; justify-content: center; animation: stageIn .55s cubic-bezier(.2,.7,.2,1); }
    .proc-art svg { width: 100%; height: auto; }
    @keyframes stageIn { from { transform: translateY(20px) scale(.95); } to { transform: none; } }
    .proc-bignum { position: absolute; right: 6%; bottom: -2%; font-family: var(--font); font-weight: 800; font-size: clamp(150px,20vw, 54px); line-height: 1; color: #fff; opacity: .18; pointer-events: none; user-select: none; }
    .proc-stage .anim { animation-play-state: running !important; }
    @media (prefers-reduced-motion: reduce) { .proc-stage .anim { animation: none !important; } }
    /* layout switch is pure CSS (no JS race): both layouts always in DOM */
    .proc-section { position: relative; background: var(--cream-2); }
    .proc-desktop { display: none; }
    .proc-mobile { display: block; padding: 92px 0; }
    @media (min-width: 860px) and (min-height: 700px) {
      .proc-section { height: 400vh; }
      .proc-desktop { display: block; height: 100%; }
      .proc-mobile { display: none; }
    }

    /* ===== wall planner / configurator (green) ===== */
    .wall-stage::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 32px 32px; mask-image: radial-gradient(130% 100% at 50% 40%, #000 55%, transparent 100%); }
    @media (max-width: 860px) {
    }

    /* ===== 3D room configurator ===== */
    /* cull back faces of wall layers so the front wall never intrudes in first-person view */
    /* configurator sliders: mustard progress fill + tidy thumb */
    /* dense wool fibres - fine, vertically-drawn speckle (overlay = light & dark fibres) */
    .r3d-color::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncG type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncB type='linear' slope='2.1' intercept='-0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
      background-size: 34px 60px; mix-blend-mode: overlay; opacity: .72; }
    /* broad two-tone heather mottle + sheen + cut-felt edge */
    .r3d-felt { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
      background-image:
        linear-gradient(155deg, rgba(255,255,255,.15), transparent 38%),
        radial-gradient(130% 130% at 50% 14%, transparent 48%, rgba(0,0,0,.3)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.5' intercept='-0.25'/%3E%3CfeFuncG type='linear' slope='1.5' intercept='-0.25'/%3E%3CfeFuncB type='linear' slope='1.5' intercept='-0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E");
      background-size: 100% 100%, 100% 100%, 120px 120px;
      background-blend-mode: normal, normal, soft-light;
      mix-blend-mode: soft-light; opacity: .9; }
    /* neat settings-style toggle row */

    /* 3D config - immersive additions */

    /* numbered steps */

    /* prominent result + price */
    /* hero total */

    /* full-width immersive layout */

    /* fullscreen immersive POV */
    /* dissolve the inner cards so the glass reads as one clean surface */

    /* ===== sample popup - lively redesign ===== */
    @keyframes ppRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    @keyframes ppFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
    @keyframes ppArch { 0%, 100% { opacity: .3; transform: translateX(-50%) scale(.96); } 50% { opacity: .6; transform: translateX(-50%) scale(1.02); } }
    @keyframes ppTwinkle { 0%, 100% { opacity: .35; transform: scale(.75) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(22deg); } }
    @keyframes ppBadge { 0%, 100% { transform: rotate(-13deg) translateY(0); } 50% { transform: rotate(-13deg) translateY(-6px); } }
    @keyframes ppShine { to { background-position: 200% 0; } }
    .pp-rise { opacity: 0; animation: ppRise .55s cubic-bezier(.2,.7,.2,1) forwards; }
    .pp-input { position: relative; }
    .pp-submit span { background-image: linear-gradient(110deg, var(--accent) 0%, var(--accent) 40%, color-mix(in srgb, var(--accent) 60%, #fff) 50%, var(--accent) 60%, var(--accent) 100%); background-size: 200% 100%; transition: transform .2s, box-shadow .2s; }
    .pp-submit:hover span { transform: translateY(-2px); box-shadow: 0 16px 30px -10px var(--accent-shadow); animation: ppShine 1.1s linear; }
    @media (prefers-reduced-motion: reduce) { .pp-sample, .pp-arch, .pp-sparkle, .pp-badge { animation: none !important; } .pp-rise { animation: none !important; opacity: 1 !important; } }

    /* responsive */
    /* ===== global polish ===== */
    .scroll-prog { position: fixed; top: 0; left: 0; height: 3px; z-index: 60; width: 0%; background: linear-gradient(90deg, var(--ink), #6F6A60); box-shadow: 0 1px 10px -1px var(--accent-shadow); transition: width .1s linear; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

    /* ===== restyle additions ===== */
    section[id] { scroll-margin-top: 84px; }
    .hero-cue-line { width: 44px; height: 1px; background: rgba(255,255,255,.45); position: relative; overflow: hidden; }
    .hero-cue-line::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--mustard); animation: cueSlide 1.9s cubic-bezier(.5,0,.2,1) infinite; }
    @keyframes cueSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
    @media (hover: hover) { .hero-gal-item:hover { transform: translateY(-12px); } }
    @media (max-width: 760px) { .hero-scrollcue { display: none; } }

    /* hero background slider */
    .hero-slider { position: absolute; inset: 0; overflow: hidden; }
    .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s cubic-bezier(.4,0,.2,1); }
    .hero-slide.on { opacity: 1; }
    .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
    .hero-slide.on img { animation: heroKen 7.2s ease-out forwards; }
    @keyframes heroKen { from { transform: scale(1.02); } to { transform: scale(1.09); } }
    .hero-dots { display: flex; gap: 9px; align-items: center; }
    .hero-dot { position: relative; height: 3px; width: 46px; border-radius: 3px; background: rgba(255,255,255,.3); border: none; padding: 0; cursor: pointer; overflow: hidden; transition: background .3s; }
    .hero-dot:hover { background: rgba(255,255,255,.55); }
    .hero-dot-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
    .hero-dot.on .hero-dot-fill { animation: heroFill var(--hero-dur, 5600ms) linear forwards; }
    @keyframes heroFill { from { width: 0; } to { width: 100%; } }
    @media (max-width: 600px) { .hero-dot { width: 30px; } }
    @media (prefers-reduced-motion: reduce) { .hero-slide { transition: opacity .01s; } .hero-slide.on img { animation: none; transform: scale(1.04); } .hero-dot.on .hero-dot-fill { animation: none; width: 100%; } }

    /* collection editorial grid */
    .coll-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
    .panel-card { position: relative; border-radius: 22px; overflow: hidden; cursor: pointer; display: block; background: var(--cream-2); box-shadow: 0 2px 0 rgba(33,30,24,.04); }
    .panel-card img { transition: transform .65s cubic-bezier(.2,.7,.2,1); }
    .panel-card:hover img { transform: scale(1.055); }
    .panel-card .pc-go { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
    .panel-card:hover .pc-go { opacity: 1; transform: none; }
    @media (max-width: 900px) { .coll-grid { grid-template-columns: 1fr 1fr; } .coll-grid > * { grid-column: span 1 !important; } }
    @media (max-width: 560px) { .coll-grid { grid-template-columns: 1fr; } }
    @media (prefers-reduced-motion: reduce) { .hero-cue-line::after { animation: none !important; } }

    /* big statement (light) */
    .stmt-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 30px; }
    .stmt-label::before { content: ""; width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--ink); }
    .stmt { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.5vw, 54px); line-height: 1.16; letter-spacing: -.02em; color: var(--ink); margin: 0; max-width: 1120px; text-wrap: balance; }
    .stmt .soft { color: var(--ink-soft); }

    /* dark numbered services accordion */
    .svc-section { position: relative; background: var(--forest); color: #fff; overflow: hidden; }
    .svc-grain { position: absolute; inset: 0; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
    .svc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
    .svc-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); box-shadow: inset 0 0 0 2.5px var(--forest), inset 0 0 0 4px rgba(255,255,255,.7); }
    .svc-title { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 6vw, 54px); letter-spacing: -.04em; line-height: .92; text-align: center; margin: 18px 0 0; }
    .svc-row { position: relative; border-top: 1px solid rgba(255,255,255,.14); cursor: pointer; }
    .svc-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
    .svc-head { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 24px; padding: 26px 0; }
    .svc-idx { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.42); }
    .svc-name { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 3.4vw, 46px); letter-spacing: -.02em; transition: opacity .3s; }
    .svc-row.dim .svc-name { opacity: .6; }
    .svc-row:hover .svc-name { opacity: 1; }
    .svc-mark { justify-self: end; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .35s, border-color .35s, color .35s, transform .45s cubic-bezier(.34,1.4,.5,1); }
    .svc-row.on .svc-mark { background: #fff; border-color: #fff; color: var(--ink); transform: rotate(180deg); }
    .svc-target { width: 14px; height: 14px; border-radius: 999px; border: 1.6px solid currentColor; position: relative; }
    .svc-target::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: currentColor; }
    .svc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.3,.7,.2,1); }
    .svc-row.on .svc-body { grid-template-rows: 1fr; }
    .svc-body-inner { overflow: hidden; min-height: 0; }
    .svc-bgrid { display: grid; grid-template-columns: 92px 1.1fr .9fr; gap: 24px; padding: 4px 0 36px; align-items: start; }
    .svc-desc { grid-column: 2; color: rgba(255,255,255,.66); font-size: 16.5px; line-height: 1.62; max-width: 560px; margin: 0; }
    .svc-keys { grid-column: 3; }
    .svc-keys-label { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.5); margin-bottom: 13px; }
    .svc-pills { display: flex; flex-wrap: wrap; gap: 9px; }
    .svc-pill { padding: 9px 15px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; font-size: 14px; line-height: 1; }
    .svc-pill.more { background: rgba(255,255,255,.15); color: #fff; }
    @media (max-width: 780px) {
      .svc-head { grid-template-columns: 50px 1fr 38px; gap: 14px; }
      .svc-bgrid { grid-template-columns: 1fr; gap: 16px; }
      .svc-desc, .svc-keys { grid-column: 1; }
      .svc-mark { width: 38px; height: 38px; }
    }
    /* cursor-following photo preview */
    .svc-preview { position: fixed; top: 0; left: 0; z-index: 40; width: 264px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; box-shadow: 0 34px 70px -26px rgba(0,0,0,.65); transition: opacity .38s ease; will-change: transform, opacity; }
    .svc-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .svc-prev-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; color: #fff; font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; background: linear-gradient(to top, rgba(18,15,11,.7), transparent); }
    @media (hover: none) { .svc-preview { display: none; } }
    button, a, input { -webkit-tap-highlight-color: transparent; }
    .navlink::after { background: linear-gradient(90deg, var(--ink), var(--ink-soft)); }
    .nav-mobile { animation: navDrop .34s cubic-bezier(.2,.8,.2,1); transform-origin: top; }
    @keyframes navDrop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
    .nav-mobile a { opacity: 0; animation: navItem .42s cubic-bezier(.2,.7,.2,1) forwards; }
    @keyframes navItem { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
    @media (hover: hover) {
      .lift { transition: transform .3s cubic-bezier(.34,1.3,.5,1), box-shadow .3s; }
      .lift:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -30px rgba(20,18,14,.5); }
    }
    @media (max-width: 700px) {
      section:not(#proces):not(.hero-boog) { padding-top: 64px !important; padding-bottom: 64px !important; }
      .hero-boog-grid { padding-top: 32px !important; padding-bottom: 52px !important; gap: 30px !important; }
      .proc-mobile { padding: 60px 0 !important; }
    }
    .nav-wrap { max-width: none !important; padding: 0 48px !important; }
    .nav-wrap > a:first-child, .nav-right { flex: 0 0 auto; }
    @media (max-width: 1440px) {
      .nav-links { gap: 20px !important; margin: 0 20px !important; }
      .nav-links .navlink { font-size: 14px !important; }
    }
    @media (max-width: 1280px) {
      .nav-links, .nav-cta { display: none !important; }
      .nav-burger { display: flex !important; }
    }
    @media (max-width: 980px) {
      .hero-boog-grid, .hero-full-grid, .about-grid, .faq-grid, .cta-inner, .apps-head, .demo-grid, .apps-tab-body { grid-template-columns: 1fr !important; gap: 28px 40px !important; }
      .benefits-grid, .steps-grid, .revs-grid { grid-template-columns: 1fr 1fr !important; }
      .footer-grid { grid-template-columns: 1fr 1fr !important; }
      .popup-card { grid-template-columns: 1fr !important; }
      .popup-visual { display: none !important; }
    }
    @media (max-width: 640px) {
      .wrap { padding: 0 20px; }
      .benefits-grid, .steps-grid, .revs-grid, .projects-grid, .hero-split-panels, .footer-grid { grid-template-columns: 1fr !important; }
      .hero-split-panels > div { transform: none !important; }
      .float-card { display: none !important; }
    }

    /* ===== configurator - mobile chrome ===== */
    @media (max-width: 600px) {
      /* a bit taller so the room fills the screen between the chrome */

      /* view switch stays top-left, compact */

      /* zoom · reset · fullscreen move to a centred bottom bar so nothing overlaps */
      .r3d-zoom input { display: none; }            /* pinch / +- instead of the slider */
      .r3d-fs .r3d-toolbar { bottom: 74px; }        /* sit above the fullscreen action bar */

      /* the drag hint would sit under the bottom bar */

      /* fullscreen settings: dock as a bottom sheet instead of a side drawer */

      /* control cards a touch tighter for narrow screens */
    }
    /* ===== homepage revision additions ===== */
    .mt-drop { transform-box: fill-box; animation: mtDrop 3.2s cubic-bezier(.3,.8,.3,1) infinite; }
    @keyframes mtDrop { 0% { transform: translateY(-40px); opacity: 0; } 45%, 100% { transform: none; opacity: 1; } }
    .teaser-grid > * { min-width: 0; }
    @media (max-width: 980px) { .teaser-grid { grid-template-columns: 1fr 1fr !important; } }
    @media (max-width: 520px) { .teaser-grid { grid-template-columns: 1fr !important; } }
    @media (max-width: 1040px) { .projects-grid { grid-template-columns: 1fr 1fr !important; } }
    .svc-desc-col { grid-column: 2; }
    .svc-desc { grid-column: auto; }
    .svc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font); font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; opacity: .8; transition: opacity .2s, gap .2s; }
    .svc-more:hover { opacity: 1; gap: 12px; }
    @media (max-width: 780px) { .svc-desc-col { grid-column: 1; } }
    .quiet-link { transition: gap .2s; }
    .quiet-link:hover { gap: 13px !important; }
    a:hover { color: var(--ink-soft); }
    .footer-legal a:hover, .footlink:hover { color: #fff; }
  

/* ===== ark-base.css (subpagina's) ===== */
/* subpage layout helpers */
.sp-grid2{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}
.sp-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.toep-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px);align-items:center}
.toep-row.flip .toep-img{order:2}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nav-wrap{max-width:none!important;padding:0 48px!important}.nav-wrap>a:first-child,.nav-right{flex:0 0 auto}
@media (max-width:1440px){.nav-links{gap:20px!important;margin:0 20px!important}.nav-links .navlink{font-size:14px!important}}
@media (max-width:1280px){.nav-links,.nav-cta{display:none!important}.nav-burger{display:flex!important}}
@media (max-width:980px){.sp-grid2,.faq-grid,.cta-inner,.toep-row{grid-template-columns:1fr!important;gap:28px 40px!important}.toep-row.flip .toep-img{order:0}.sp-cards3,.facts-grid,.footer-grid{grid-template-columns:1fr 1fr!important}.projects-grid{grid-template-columns:1fr 1fr}.projects-grid>*{grid-column:span 1!important}.popup-card{grid-template-columns:1fr!important}.popup-visual{display:none!important}}
@media (max-width:700px){section:not(.sp-head){padding-top:64px!important;padding-bottom:64px!important}}
@media (max-width:640px){.wrap{padding:0 20px}.sp-cards3,.facts-grid,.projects-grid,.footer-grid{grid-template-columns:1fr!important}.float-card{display:none!important}}
/* ===== Wandpanelen page ===== */
.marquee{overflow:hidden}
.marquee-track{display:flex;align-items:center;gap:0;width:max-content;animation:marq 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.wpx-pattabs{display:flex;align-items:flex-end;gap:clamp(20px,3.2vw,44px);overflow-x:auto;scrollbar-width:none;padding:4px 2px 2px}
.wpx-pattabs::-webkit-scrollbar{display:none}
.wpx-pattab{flex:0 0 auto;background:none;border:none;cursor:pointer;text-align:left;padding:4px 0 0;font-family:var(--font)}
.wpx-pattab .n{display:block;font-weight:700;font-size:11px;letter-spacing:.16em;color:color-mix(in srgb,var(--ink) 38%,transparent);margin-bottom:2px;transition:color .25s}
.wpx-pattab .t{display:inline-block;position:relative;font-family:var(--display);font-weight:500;font-size:clamp(21px,2.4vw,30px);letter-spacing:-.02em;color:var(--ink-soft);transition:color .25s;padding-bottom:8px}
.wpx-pattab .t::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--ink);border-radius:3px;transition:width .32s cubic-bezier(.2,.7,.2,1)}
.wpx-pattab:hover .t,.wpx-pattab.on .t,.wpx-pattab.on .n{color:var(--ink)}
.wpx-pattab.on .t::after{width:100%}
.wpx-swatches{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.wpx-sw{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;padding:0;position:relative;box-shadow:inset 0 2px 3px rgba(255,255,255,.3),inset 0 -3px 5px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.18);transition:transform .2s cubic-bezier(.34,1.4,.5,1),box-shadow .2s}
.wpx-sw:hover{transform:translateY(-3px) scale(1.08)}
.wpx-sw.on{transform:scale(1.06);box-shadow:inset 0 2px 3px rgba(255,255,255,.3),inset 0 -3px 5px rgba(0,0,0,.28),0 0 0 3px var(--cream),0 0 0 5px var(--ink)}
.wpx-sw-label{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
.wp-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:34px 0 24px}
.wp-count{font-size:15px;color:var(--ink-soft)}
.wp-count b{color:var(--ink);font-weight:700}
.wp-reset{border:none;background:none;cursor:pointer;font-family:var(--font);font-weight:600;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:0}
/* echt masonry: kolommen, kaarten houden hun eigen hoogte */
.wp-grid{columns:3;column-gap:clamp(18px,2.2vw,28px)}
.wp-card{break-inside:avoid;margin:0 0 clamp(18px,2.2vw,28px);display:block;width:100%}
@media (max-width:980px){.wp-grid{columns:2}}
@media (max-width:640px){.wp-grid{columns:1}}
.wp-card{position:relative;display:block;border-radius:26px;overflow:hidden;cursor:pointer;background:var(--cream-2);box-shadow:0 2px 0 rgba(33,30,24,.05);text-decoration:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .45s;animation:wpIn .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes wpIn{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
.wp-card:hover{transform:translateY(-7px);box-shadow:0 40px 70px -36px rgba(20,18,14,.55)}
.wp-imgwrap{position:relative;overflow:hidden}
.wp-card .ps-dots,.wp-card .ps-count{display:none}.wp-card .ps-nav{top:42%}
.wp-shade{pointer-events:none}.wp-body{pointer-events:none}
.wp-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,14,.86) 0%,rgba(20,18,14,.12) 46%,transparent 68%)}
.wp-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,2.6vw,34px);color:#fff}
.wp-finish{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(5px);font-weight:600;font-size:12.5px;margin-bottom:12px}
.wp-swatch{width:13px;height:13px;border-radius:4px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.wp-cname{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.015em;line-height:1.02}
.wp-cdesc{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:7px}
.wp-cgo{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;font-size:15px;color:var(--mustard);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.wp-card:hover .wp-cgo{opacity:1;transform:none}
.wp-db{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:rgba(20,18,14,.5);backdrop-filter:blur(6px);color:#fff;font-weight:700;font-size:12.5px;opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
.wp-card:hover .wp-db{opacity:1;transform:none}
.wp-serial{position:absolute;top:18px;left:20px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.wp-tag{position:absolute;top:44px;left:20px;padding:6px 12px;border-radius:999px;background:var(--cream);color:var(--ink);font-weight:700;font-size:11.5px;letter-spacing:.03em}
@media (hover:none){.wp-cgo{opacity:1;transform:none}.wp-db{opacity:1;transform:none}}
@media (max-width:560px){.wp-hero-specs{display:grid!important;grid-template-columns:1fr 1fr;gap:16px 20px}.wp-hero-specs>div{border-right:none!important;padding-left:0!important;padding-right:0!important}.wpx-sw{width:40px;height:40px}}

/* ===== Photo slider (hele foto zichtbaar, blur-vulling) ===== */
.ps{position:relative;overflow:hidden;background:#e9e6e0;touch-action:pan-y}
.ps-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.8,.24,1)}
.ps-track>figure{flex:0 0 100%;height:100%;margin:0;position:relative;overflow:hidden}
.ps-blur{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(26px) saturate(1.05);opacity:.9}
.ps-img{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.ps-count{position:absolute;right:16px;top:16px;z-index:2;padding:6px 11px;border-radius:999px;background:rgba(20,18,14,.5);backdrop-filter:blur(6px);color:#fff;font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}
.ps-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border:none;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);color:var(--ink);opacity:0;transition:opacity .25s,background .2s}
.ps:hover .ps-nav{opacity:1}.ps-nav.prev{left:14px}.ps-nav.next{right:14px}.ps-nav:hover{background:#fff}
.ps-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:3;pointer-events:none}
.ps-dot{width:6px;height:6px;border-radius:999px;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.55);transition:all .25s;pointer-events:auto}.ps-dot.on{width:18px;background:#fff}
@media (hover:none){.ps-nav{opacity:1}}
/* ===== Projecten galerij ===== */
.gal{columns:3;column-gap:22px}
@media (max-width:980px){.gal{columns:2}}
@media (max-width:640px){.gal{columns:1}}
.gal-item{display:block;position:relative;break-inside:avoid;margin:0 0 22px;border-radius:22px;overflow:hidden;background:var(--cream-2);border:none;padding:0;cursor:zoom-in;width:100%;text-align:left;font-family:var(--font)}
.gal-item img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gal-item:hover img{transform:scale(1.04)}
.gal-cap{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:999px;background:rgba(20,18,14,.55);backdrop-filter:blur(6px);color:#fff;font-weight:600;font-size:12.5px}
.gal-cap i{width:16px;height:16px;border-radius:5px;background-size:cover;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.gal-lb{position:fixed;inset:0;z-index:200;background:rgba(14,12,10,.92);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);animation:wpIn .25s ease both}
.gal-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.gal-lb-btn{position:absolute;width:46px;height:46px;border-radius:999px;border:none;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.gal-lb-btn:hover{background:rgba(255,255,255,.24)}.gal-lb-btn.close{top:18px;right:18px}.gal-lb-btn.prev{left:18px;top:50%;transform:translateY(-50%)}.gal-lb-btn.next{right:18px;top:50%;transform:translateY(-50%)}
.gal-lb-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:rgba(255,255,255,.8);font-weight:600;font-size:14px}

/* productkaarten: beeld vult het kader, titel gecentreerd onderaan */
.ps.fill .ps-img{object-fit:cover}
.ps.fill .ps-blur{display:none}
.wp-body{text-align:left;align-items:flex-start}
.wp-cname{text-align:left}
.wp-cdesc{display:inline-flex;align-items:center;gap:9px;text-transform:none;letter-spacing:.01em;font-size:15px;font-weight:600}
.wp-dot{width:15px;height:15px;border-radius:999px;background-size:cover;background-position:center;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.wp-card .ps-blur{display:none}
.wp-stmt-deco{pointer-events:none}
@media (max-width:1100px){.wp-stmt-deco{display:none}}
.wp-body{padding-top:0}.wp-card .wp-body{bottom:0;padding-bottom:clamp(20px,2.4vw,30px)}

/* atelierblok: volle breedte, horizontaal, onder het raster */
.wp-stmt{margin-top:clamp(10px,1.6vw,22px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px)}
.wp-stmt p.display{font-size:clamp(24px,2.9vw,38px)!important;text-wrap:balance}
.wp-cdesc{margin-top:9px}
.wp-body{display:flex;flex-direction:column;align-items:flex-start}
.wp-cdesc,.wp-cgo{width:fit-content}

/* ===== art page ===== */
@media (max-width: 900px) {
.art-series-row { grid-template-columns: 1fr !important; gap: 26px !important; }
.art-series-row .art-series-img { order: 1 !important; }
}
/* ===== contact page ===== */
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 620px) { .contact-row { grid-template-columns: 1fr !important; } }

/* ===== ark-shop.css ===== */
/* ark-shop.css - webshop product cards, colour picker, image slider */
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
@media (max-width:820px){.shop-grid{grid-template-columns:1fr}}
.shop-card{display:flex;flex-direction:column;background:var(--cream-2);border-radius:28px;overflow:hidden}
.shop-slider{position:relative;aspect-ratio:1/1;overflow:hidden;background:#e9e6e0;touch-action:pan-y}
.shop-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.8,.24,1)}
.shop-track>figure{flex:0 0 100%;height:100%;margin:0;position:relative;overflow:hidden}
.shop-track img{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.shop-track img.shop-blur{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(26px) saturate(1.05);opacity:.9}
.shop-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#fff;background:linear-gradient(to top,rgba(20,18,14,.62),transparent)}
.shop-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(6px);color:var(--ink);opacity:0;transition:opacity .25s,background .2s}
.shop-nav.prev{left:14px}.shop-nav.next{right:14px}
.shop-nav:hover{background:var(--paper)}
.shop-slider:hover .shop-nav,.shop-nav:focus-visible{opacity:1}
@media (hover:none){.shop-nav{opacity:1}}
.shop-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.shop-dot{width:7px;height:7px;padding:0;border:none;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(20,18,14,.14);transition:width .25s,background .25s}
.shop-dot.on{width:20px;background:#fff}
.shop-tag{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.shop-body{display:flex;flex-direction:column;gap:18px;padding:26px clamp(22px,2vw,30px) 30px;flex:1 1 auto}
.shop-lbl{font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px;display:flex;gap:8px;align-items:baseline}
.shop-lbl b{font-weight:600;letter-spacing:0;text-transform:none;font-size:13.5px;color:var(--ink)}
.shop-colors{display:flex;gap:9px;flex-wrap:wrap}
.shop-sw{position:relative;width:34px;height:34px;padding:0;border:none;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(20,18,14,.14);transition:transform .2s cubic-bezier(.34,1.4,.5,1),box-shadow .2s}
.shop-sw:hover{transform:scale(1.08)}
.shop-sw.on{box-shadow:inset 0 0 0 1.5px rgba(20,18,14,.14),0 0 0 2px var(--cream-2),0 0 0 4px var(--ink)}
.shop-sizes{display:flex;gap:8px;flex-wrap:wrap}
.shop-size{border:none;cursor:pointer;font-family:var(--font);font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:12px;background:var(--paper);color:var(--ink-soft);box-shadow:inset 0 0 0 1.5px var(--hair);transition:background .18s,color .18s,box-shadow .18s}
.shop-size:hover{color:var(--ink)}
.shop-size.on{background:var(--ink);color:var(--paper);box-shadow:none}
.shop-buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid var(--hair)}
.shop-eur{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;color:var(--ink)}
.shop-vat{font-weight:600;font-size:13px;color:var(--ink-soft);margin-left:8px}
.shop-alt{font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.shop-alt:hover{color:var(--ink)}
.shop-usp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:820px){.shop-usp{grid-template-columns:1fr}}
.shop-usp>div{display:flex;gap:14px;align-items:flex-start;background:var(--cream-2);border-radius:20px;padding:22px 24px}
/* phones: bigger swatches, full-width order button, always-visible slider controls */
@media (max-width:820px){
.shop-slider{aspect-ratio:1/1}
.art-series-img.shop-slider{aspect-ratio:4/3}
.shop-nav{opacity:1;width:44px;height:44px}
.shop-dot{position:relative}
.shop-dot::after{content:"";position:absolute;inset:-15px}
.shop-sw{width:44px;height:44px}
.shop-size{min-height:44px;padding:12px 16px;font-size:14.5px}
.shop-body{gap:20px;padding:24px 20px 28px}
.shop-buy{flex-direction:column;align-items:stretch;gap:14px}
.shop-buy>div{display:flex;align-items:baseline}
.shop-buy>a{width:100%;justify-content:center}
.shop-alt{display:inline-flex;align-items:center;min-height:40px}
}

/* ===== productpagina ===== */
.pd-crumb{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-soft);margin-bottom:22px}
.pd-crumb a{color:var(--ink-soft);text-decoration:none}.pd-crumb a:hover{color:var(--ink)}.pd-crumb b{color:var(--ink)}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,3.4vw,52px);align-items:start}
.pd-grid .shop-slider{border-radius:26px}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-thumb{width:68px;height:68px;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:var(--cream-2);padding:0;cursor:pointer;transition:border-color .2s,transform .2s}
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pd-thumb:hover{transform:translateY(-2px)}.pd-thumb.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.pd-side{background:var(--paper);border:1px solid var(--hair);border-radius:28px;padding:clamp(22px,2.6vw,34px)}
.pd-block{margin-top:24px}
.pd-buy{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.pd-buy .shop-eur{font-size:32px}
.pd-usp{list-style:none;margin:22px 0 18px;padding:0;display:grid;gap:9px}
.pd-usp li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink)}
.pd-side .shop-sizes{display:flex;gap:10px;flex-wrap:nowrap}
.pd-side .shop-size{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:13px 8px;line-height:1.15;white-space:nowrap;text-align:center}
.pd-side .shop-size>span{font-size:15px;font-weight:600}
.pd-side .shop-size i{font-style:normal;font-size:13px;font-weight:600;opacity:.62;letter-spacing:0}
.pd-side .shop-size.on i{opacity:.8}
.pd-detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,3.4vw,52px);align-items:start;margin-top:clamp(40px,5vw,72px);padding-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--hair)}
.pd-specs{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:15.5px}
.pd-specs dt{font-weight:600;color:var(--ink)}
.pd-specs dd{margin:0;color:var(--ink-soft)}
.pd-next{margin-top:clamp(40px,5vw,64px);background:var(--cream-2);border-radius:26px;padding:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
@media (max-width:900px){.pd-grid,.pd-detail{grid-template-columns:1fr}}
@media (max-width:600px){.pd-specs{grid-template-columns:1fr;gap:4px 0}.pd-specs dd{margin-bottom:10px}.pd-buy{gap:12px}.pd-buy>div:last-child,.pd-buy a{width:100%;justify-content:center}}
.shop-track>figure.fill img{object-fit:cover}.shop-track>figure.fill .shop-blur{display:none}

/* ===== ark-touch.css ===== */
/* ark-touch.css - phone ergonomics: comfortable tap targets, no cramped controls.
   Loaded last on every page so it wins over page CSS. */
@media (max-width:820px){
  /* language toggle */
  [role="group"][aria-label="Taal"] button,[role="group"][aria-label="Language"] button{min-height:40px;min-width:48px;padding:11px 15px!important;font-size:14px!important}
  /* burger */
  .nav-burger{min-width:46px;min-height:46px;align-items:center;justify-content:center;margin-right:-8px}
  /* mobile dropdown menu items */
  .nav-mobile a{min-height:48px;display:flex!important;align-items:center}
  /* footer links */
  .footlink{display:inline-flex;align-items:center;min-height:40px}
  /* hero slideshow progress dots */
  .hero-dots{gap:13px}
  .hero-dot{height:9px!important;border-radius:9px}
  /* configurator: switches, steppers, sliders */
  .r3d-switch{min-height:44px;padding:9px 15px 9px 11px}
  .ark-range{height:14px!important}
  .ark-range::-webkit-slider-thumb{width:30px;height:30px}
  .ark-range::-moz-range-thumb{width:30px;height:30px}
  .wp-reset{min-height:40px}
}
@media (max-width:820px){
  /* felt swatch grid: fewer columns so each swatch is thumb-sized */
  .r3d-colors{grid-template-columns:repeat(6,1fr)!important;gap:9px}
  .artw .r3d-colors{grid-template-columns:repeat(5,1fr)!important}
  /* settings toggle: invisible padding around the 46x26 pill */
  .r3d-toggle{position:relative}
  .r3d-toggle::after{content:"";position:absolute;inset:-12px}
  .r3d-walltab{min-height:46px}
  /* inline text links */
  .svc-more,.shop-alt,.wp-reset{display:inline-flex;align-items:center;min-height:40px}
}
@media (max-width:820px){
  .wp-seg button{min-height:44px}
  .art-qty button{min-width:40px;min-height:40px}
}
@media (min-width:981px) and (max-width:1200px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr!important}}

/* ===== phone hardening (sept 2026) ===== */
html,body{overflow-x:clip}
img,video,svg{max-width:100%}
@media (max-width:820px){
  /* header: less side padding, compact logo row */
  .nav-wrap{padding:0 20px!important}
  /* photo sliders (.ps = catalogus, .shop = webshop/kunst): controls always visible, thumb-sized */
  .ps-nav,.shop-nav{opacity:1!important;width:44px;height:44px}
  .ps-dot,.shop-dot{position:relative}
  .ps-dot::after,.hero-dot::after{content:"";position:absolute;inset:-14px}
  .hero-dot{position:relative;overflow:visible!important}
  .ps-count,.shop-tag{font-size:12px}
  /* wandpanelen cards: text never hidden behind hover */
  .wp-cgo,.wp-db{opacity:1;transform:none}
  .wp-body{padding:18px!important}
  .wp-cname{font-size:24px}
  .wpx-pattab .t{font-size:20px}
  .wpx-sw{width:42px;height:42px}
  /* galerij */
  .gal{column-gap:14px}.gal-item{margin-bottom:14px;border-radius:16px}
  .gal-lb{padding:64px 12px 56px}
  .gal-lb-btn{width:44px;height:44px}.gal-lb-btn.prev{left:8px}.gal-lb-btn.next{right:8px}
  /* filter chips: scroll horizontally instead of wrapping into a tall block */
  .wp-meta{margin:22px 0 18px}
  /* long words in headings never overflow */
  h1,h2,h3{overflow-wrap:anywhere}
  /* forms */
  input,select,textarea{font-size:16px!important}
}
@media (max-width:640px){
  /* hero's: less dead space above the title on small screens */
  .sp-head .wrap,.hero-full .wrap:first-of-type,.art-hero .wrap{padding-top:120px!important}
  .hero-full{min-height:88svh!important}
  /* CTA-blokken: knoppen onder elkaar, volle breedte */
  .cta-inner>div:last-child,.cta-inner .btn-row{width:100%}
  .cta-inner a[class*="btn"]{flex:1 1 auto;justify-content:center}
  /* tabellen/grids die 3 kolommen hadden */
  .shop-usp,.facts-grid,.sp-cards3{grid-template-columns:1fr!important}
  /* footer */
  .footer-grid{gap:28px!important}
}
@media (max-width:420px){
  .wrap{padding:0 16px!important}
  .nav-wrap{padding:0 16px!important}
  .wpx-sw{width:38px;height:38px}
}