@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(/fonts/manrope-latin-800-normal.woff2) format("woff2")}

:root{
  --ink:#141414;--orange:#FF5A1F;--orange-ink:#C93D0A;--paper:#fff;--mist:#F1F1EF;--line:#DEDEDA;--muted:#5C5C58;--on-ink:#C9C9C4;
  --g:clamp(16px,2vw,28px);          /* the one page margin */
  --bar:76px;
  --r:14px;--rb:10px;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-move:cubic-bezier(.77,0,.175,1);
  --display:clamp(2.6rem,7vw,7rem);  /* large section statement */
  --h:clamp(2rem,4.4vw,4.4rem);      /* section heading */
  --sub:clamp(1.35rem,2.2vw,2rem);   /* sub heading */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--bar) + 16px);caret-color:var(--orange)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:1.125rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
h1,h2,h3,p,ul,ol,figure,dl,dd,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0}
h1,h2,h3{font-weight:800;text-wrap:balance}
address{font-style:normal}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px #fff} /* taste-skill-ignore: interface fragment or floating layer */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--g);top:-80px;z-index:90;padding:12px 18px;background:var(--ink);color:#fff;font-weight:700}
.skip:focus{top:8px}
a,button,summary,label{touch-action:manipulation}
button,summary,.btn,.seg span{-webkit-user-select:none;user-select:none}

/* Logo cursor and confetti (mouse only, kept from version one) */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='31' viewBox='0 0 40 52'%3E%3Cpath d='M3 3v38l10-9 8 17 7-3-8-16h15z' fill='%23FF5A1F' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,auto}
  a,button,summary,.gm-kick,.seg label{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36' viewBox='0 0 40 52'%3E%3Cpath d='M3 3v38l10-9 8 17 7-3-8-16h15z' fill='%23FF5A1F' stroke='%23141414' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,pointer}
  input[type=text],textarea{cursor:text}
}
.gm-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:60}
.gm-bit{position:absolute;clip-path:polygon(6% 4%,6% 80%,32% 62%,52% 100%,70% 92%,50% 58%,92% 58%)}

/* Buttons: one shape */
.btn{border-radius:var(--rb);display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:800;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;padding:16px 22px;border:0;background:none;color:inherit;transition:transform .14s var(--ease),background-color .14s,color .14s}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:#fff}
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:14px 20px}
.btn-full{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn-ink:hover{background:#000}
  .btn-orange:hover{background:#ff7240}
  .btn-line:hover{background:#fff}
  .btn-white:hover{background:var(--mist)}
}
.actions{display:flex;flex-wrap:wrap;gap:8px}

/* Header: a plain bar */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;height:var(--bar);padding:0 var(--g);padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right));background:#fff;border-bottom:1px solid var(--line)} /* taste-skill-ignore: brand, from version one */
.logo{flex:none;margin-right:auto}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:26px;font-weight:700;font-size:1rem}
.nav>a,.nav summary{text-decoration:none;padding:8px 0;white-space:nowrap}
.nav a[aria-current=page]{color:var(--orange-ink);text-decoration:underline}
.nav-group{position:relative}
.nav-group.is-current>summary{color:var(--orange-ink)}
.nav-group summary{list-style:none;display:flex;align-items:center;gap:7px}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s var(--ease)}
.nav-group[open] summary::after{transform:translateY(4px) rotate(225deg)}
.nav-group ul{border-radius:var(--r);position:absolute;left:-16px;top:100%;min-width:280px;padding:8px;background:#fff;box-shadow:0 18px 44px -14px rgba(20,20,20,.35);transform-origin:16px 0} /* taste-skill-ignore: interface fragment or floating layer */
@media (prefers-reduced-motion:no-preference){.nav-group[open] ul{animation:pop .16s var(--ease)}}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(-4px)}}
.nav-group li a{border-radius:8px;display:block;padding:10px 12px;text-decoration:none}
.bar .btn{min-height:44px;padding:12px 16px;font-size:.95rem;white-space:nowrap}
.bar-call,.menu-btn{display:none}
.menu-btn{border-radius:var(--rb);font:inherit;font-weight:800;padding:12px 14px;border:0;background:var(--mist);color:var(--ink)}
.menu-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .nav>a:hover,.nav summary:hover{color:var(--orange-ink)}
  .nav-group li a:hover{background:var(--mist)}
}

/* Home hero: text left, laptop right, as in version one */
.hero{background:#fff;overflow:clip}
.hero-sticky{padding:clamp(40px,6vw,64px) var(--g) 8px}
.hero-h{font-size:clamp(2.2rem,10.5vw,5rem);font-weight:800;line-height:1.02;letter-spacing:-.04em;white-space:nowrap}
.hero-copy .lead{margin-top:24px;max-width:32em}
.hero-copy .actions{margin-top:32px}
.hero-note{margin-top:20px;font-size:1rem;color:var(--muted)}
.hero-note a{color:var(--ink);font-weight:700}
.ml{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .04em .16em 0;margin-bottom:-.12em}
.ml>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .ml>span{animation:rise .9s var(--ease) both}
  br+.ml>span{animation-delay:.11s}
  .hero-copy .lead,.hero-copy .actions,.hero-note{animation:lift .6s var(--ease) .5s both}
}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes lift{from{opacity:0;transform:translateY(16px)}}

/* Search demo */
.demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(80px,12vw,180px) var(--g)}
.sec-h{font-size:var(--h);line-height:1.02;letter-spacing:-.03em;font-weight:800}
.lead{font-size:clamp(1.0625rem,1.5vw,1.3rem);line-height:1.45}
.demo .lead{margin-top:20px;max-width:30em}
.serp{border-radius:22px;position:relative;min-width:0;background:var(--mist);padding:22px 22px 28px}
.serp-bar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:13px 20px;font-weight:700} /* taste-skill-ignore: interface fragment or floating layer */
.serp-bar svg{flex:none}
.serp-meta{font-size:.875rem;color:var(--muted);margin:14px 6px 10px}
.serp-list{position:relative;height:calc(4 * 96px)}
.result{position:absolute;left:0;right:0;height:84px;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--line)} /* taste-skill-ignore: interface fragment or floating layer */
.result .url{font-size:.875rem;color:var(--muted)}
.result .t{font-weight:700;font-size:1.02rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:40px}
.result .bar{position:static;display:block;height:8px;padding:0;border-radius:4px;background:var(--line);margin-top:8px}
.result.r2{top:96px}.result.r3{top:192px}.result.r4{top:288px}
.result.you{top:0;border:2px solid var(--ink);z-index:2;box-shadow:0 10px 28px -14px rgba(20,20,20,.45)} /* taste-skill-ignore: interface fragment or floating layer */
.result.you .pos{position:absolute;right:14px;top:14px;font-size:.875rem;font-weight:800;background:var(--orange);color:var(--ink);border-radius:6px;padding:1px 8px}
.cursor{position:absolute;z-index:3;width:40px;left:64%;top:186px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))} /* taste-skill-ignore: interface fragment or floating layer */
.serp-caption{margin:16px 6px 0;font-size:.9375rem;color:var(--muted)}
.gm-query{white-space:nowrap}
.gm-query.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--orange)}
.serp-try{margin:18px 6px 0;padding-top:16px;border-top:1px solid var(--line)} /* taste-skill-ignore: interface fragment or floating layer */
.serp-try label{display:block;font-weight:800;margin-bottom:8px}
.serp-try .row{display:flex;gap:8px}
.serp-try input{border-radius:var(--rb);flex:1;width:100%;min-width:0;font:inherit;font-size:1rem;padding:11px 14px;border:2px solid var(--ink);background:#fff;color:var(--ink)}
.serp-try .btn{min-height:44px;padding:11px 16px;white-space:nowrap}
.serp-try .status{margin-top:10px;font-size:.9375rem;font-weight:700}
.serp-try .status:empty{display:none}

/* Problem band */
.band{background:var(--ink);color:#fff;padding:clamp(80px,11vw,170px) var(--g)}
.band-h{max-width:15em;font-size:clamp(2rem,4.6vw,5rem);line-height:1.05;letter-spacing:-.03em}
.band-h span{color:var(--orange)}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(48px,6vw,96px)}
.reasons h3{font-size:var(--sub);line-height:1.1;letter-spacing:-.02em}
.reasons p{margin-top:12px;color:var(--on-ink)}
.race{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;margin-top:clamp(56px,7vw,110px)}
.race h3{font-size:var(--h);line-height:1.02;letter-spacing:-.03em}
.race-copy p{margin-top:14px;color:var(--on-ink);max-width:30em}
.race-copy small{display:block;margin-top:12px;color:var(--on-ink);font-size:.9375rem}
.race-copy .btn{margin-top:22px}
.phones{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:480px;width:100%;justify-self:end}
.phone-label{margin-bottom:8px;font-weight:700;font-size:.9375rem}
.ph{position:relative;height:270px;overflow:hidden;border:5px solid #3a3a38;border-radius:26px;background:#fff;color:var(--ink)}
.ph-bar{position:absolute;left:0;top:0;height:5px;width:100%;transform:scaleX(0);transform-origin:0 0;background:var(--orange)}
.ph-spin{position:absolute;left:50%;top:44%;width:30px;height:30px;margin:-15px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);opacity:0}
.ph-page{position:absolute;inset:22px 14px 14px;opacity:0}
.ph-page i{display:block;height:9px;margin-bottom:8px;border-radius:4px;background:var(--line)}
.ph-page i:first-child{height:15px;width:80%;background:var(--ink)}
.ph-page i:nth-child(3){width:70%}
.ph-page span{display:block;margin-top:16px;padding:8px 4px;border-radius:8px;background:var(--orange);font-size:.875rem;font-weight:800;text-align:center}
.ph-note{position:absolute;left:10px;right:10px;bottom:12px;padding:8px;border-radius:10px;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:700;line-height:1.25;text-align:center;opacity:0;transform:translateY(12px)}
.race.run .fast .ph-bar{animation:gm-bar .45s ease-out both}
.race.run .fast .ph-page{animation:gm-in .2s .4s both}
.race.run .fast .ph-note{animation:gm-note .3s 1.1s both}
.race.run .slow .ph-bar{animation:gm-crawl 4.6s linear both}
.race.run .slow .ph-spin{opacity:1;animation:gm-spin .9s linear 6 both}
.race.run .slow .ph-note{animation:gm-note .3s 4.7s both}
@keyframes gm-bar{to{transform:scaleX(1)}}
@keyframes gm-crawl{to{transform:scaleX(.82)}}
@keyframes gm-in{from{opacity:0}to{opacity:1}}
@keyframes gm-note{to{opacity:1;transform:none}}
@keyframes gm-spin{to{transform:rotate(360deg)}}

/* Eerst zien, dan betalen */
.seen{display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(32px,6vw,96px);align-items:end;padding:clamp(72px,9vw,130px) var(--g);background:var(--mist)}
.seen-copy{display:grid;gap:14px;max-width:32em}
.poster-h{font-size:var(--display);line-height:1;letter-spacing:-.035em;font-weight:800}
.lap-scene{position:relative;width:calc(100% - 16px);max-width:620px;margin:48px auto 19%;perspective:1100px}
.lap{position:relative;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-14deg)}
.lap-lid{position:relative;padding:1.5%;background:var(--ink);border-radius:14px 14px 3px 3px;transform-origin:50% 100%;transform:rotateX(7deg)}
.lap-screen{display:flex;flex-direction:column;aspect-ratio:16/10;overflow:hidden;background:#fff;border-radius:5px;container-type:inline-size}
.lap-chrome{flex:none;display:flex;align-items:center;gap:.8cqw;padding:1cqw 1.4cqw;background:var(--mist);border-bottom:1px solid var(--line)} /* taste-skill-ignore: interface fragment or floating layer */
.lap-chrome i{width:1cqw;height:1cqw;border-radius:50%;background:#C9C9C4}
.lap-chrome span{margin-left:1.2cqw;padding:.3cqw 1.6cqw;border-radius:99px;background:#fff;font-size:1.3cqw;color:var(--muted)}
.lap-view{position:relative;flex:1;min-height:0;overflow:hidden}
.lap-cursor{position:absolute;z-index:3;left:91%;bottom:12.5%;width:5cqw;opacity:0;transform:translate(3cqw,5cqw);transition:opacity .25s,transform .35s var(--ease);filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.3))} /* taste-skill-ignore: interface fragment or floating layer */
.lap-cursor.on{opacity:1;transform:none}
.lap-base{position:absolute;left:-1.5%;right:-1.5%;top:100%;height:64%;padding:3.5% 7% 0;background:#DADAD5;border-radius:3px 3px 18px 18px;transform-origin:50% 0;transform:rotateX(83deg);box-shadow:0 26px 34px rgba(20,20,20,.2)} /* taste-skill-ignore: interface fragment or floating layer */
.lap-keys{height:58%;border-radius:6px;background-color:#BEBEB9;background-image:repeating-linear-gradient(90deg,transparent 0 5.8%,#E6E6E2 5.8% 6.6%),repeating-linear-gradient(0deg,transparent 0 17%,#E6E6E2 17% 20%)} /* taste-skill-ignore: interface fragment or floating layer */
.lap-pad{width:34%;height:29%;margin:3% auto 0;border-radius:8px;background:#E6E6E2;box-shadow:inset 0 0 0 1px #C4C4BF} /* taste-skill-ignore: interface fragment or floating layer */
.lap-site{padding-top:3.4em;font-size:1.5cqw;line-height:1.45;color:var(--ink);will-change:transform}
.lap-site p{margin:.3em 0 0}
.m-nav{position:absolute;z-index:2;inset:0 0 auto;display:flex;align-items:center;gap:1.7em;height:3.4em;padding:0 2.2em;background:#fff;font-size:1.5cqw;font-weight:700}
.m-nav img{height:1.5em;width:auto;margin-right:auto}
.m-btn{display:inline-block;padding:.6em 1em;border-radius:.5em;font-style:normal;font-weight:800}
.m-orange{background:var(--orange);color:var(--ink)}
.m-ink{background:var(--ink);color:#fff}
.m-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5em;align-items:center;padding:3em 2.2em}
.m-hero p{margin:1em 0 1.4em;color:var(--muted)}
.m-h1{font-size:3.1em;font-weight:800;line-height:1;letter-spacing:-.04em}
.m-laptop{padding:.6em .6em 1em;background:var(--ink);border-radius:.6em .6em .2em .2em;aspect-ratio:16/10;transform:perspective(40em) rotateY(-14deg)}
.m-laptop i{display:block;height:1em;margin-bottom:.5em;border-radius:.2em;background:#fff}
.m-laptop i:nth-child(2){width:70%;background:var(--orange)}
.m-laptop i:nth-child(3){width:45%;background:#BDBDB8}
.m-band{padding:3em 2.2em;background:var(--ink);color:#fff}
.m-h2{margin-bottom:1em;font-size:2.4em;font-weight:800;line-height:1.05;letter-spacing:-.03em}
.m-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em}
.m-block{padding:3em 2.2em}
.m-mist{background:var(--mist)}
.m-t{height:8em;padding:.8em;border-radius:.6em;background:#fff;font-weight:800}
.m-serp{padding:1em;background:var(--mist)}
.m-res{position:relative;padding:.6em 1em;margin-bottom:.6em;background:#fff;border:1px solid var(--line);border-radius:.6em} /* taste-skill-ignore: interface fragment or floating layer */
.m-res small{display:block;font-size:.8em;color:var(--muted)}
.m-res i{display:block;height:.6em;width:60%;margin-top:.3em;background:var(--line)}
.m-you{border:.13em solid var(--ink)}
.m-you u{position:absolute;right:1em;top:.6em;padding:0 .5em;background:var(--orange);font-weight:800;text-decoration:none}
.m-plan{display:grid;grid-template-columns:1fr 1fr;gap:2em;padding:2em;border-radius:.8em;background:var(--ink);color:#fff}
.m-plan b{font-size:1.5em;font-weight:800}
.m-plan p{color:var(--on-ink)}
.m-plan li{padding:.15em 0}
.m-plan li::before{content:"";display:inline-block;width:.75em;height:.4em;margin:0 .6em .2em 0;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.m-cta{display:flex;justify-content:space-between;align-items:center;gap:2em;padding:3em 2.2em;background:var(--orange)}
.m-cta .m-h2{margin:0}
.m-foot{padding:1.6em 2.2em;background:var(--ink)}
.m-foot img{height:1.5em;width:auto}
@media (min-width:981px) and (min-height:620px){
  @media (prefers-reduced-motion:no-preference){.hero-track{height:calc(100vh + 1000px)}}
  .hero-sticky{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));min-height:544px;display:flex;align-items:center;overflow:hidden;padding-block:0}
  .hero-copy{position:relative;z-index:1;max-width:47%}
  .hero-h{font-size:clamp(2.8rem,min(5.4vw,10.5vh),5.6rem)}
  .lap-scene{position:absolute;left:calc(47% + max(0px,(100vw - 1280px)/8));top:42%;width:min(54vw,920px,100vh);max-width:none;margin:0;transform:translateY(-50%);perspective:1700px}
  .lap{transform:rotateX(5deg) rotateY(-20deg)}
}

/* Engravings: ink on whatever field they sit on */
.ets{mix-blend-mode:multiply}
.sheet-ink .ets{filter:invert(1);mix-blend-mode:screen}

/* Who we build for: tiles */
.board{padding:clamp(80px,11vw,170px) var(--g) 0}
.board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.board-grid-solo{grid-template-columns:repeat(3,1fr)}
.tile-head{border-radius:var(--r);grid-column:span 2;padding:24px;background:var(--orange);min-height:220px}
.tile-head h2{font-size:var(--h);line-height:1.02;letter-spacing:-.03em}
.tile{border-radius:var(--r);position:relative;display:block;overflow:hidden;min-height:clamp(240px,26vw,400px);background:var(--mist);text-decoration:none;isolation:isolate;transition:background-color .18s}
.tile:active{background:#e8e8e5}
.tile-name{border-radius:8px;position:absolute;left:16px;top:14px;z-index:1;padding:2px 8px 3px;background:#fff;font-size:clamp(1.0625rem,1.7vw,1.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.tile .ets{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform .5s var(--ease)}
.tile-ink{background:var(--ink);color:#fff}
.tile-ink:active{background:#000}
.tile-ink .tile-name{background:none;color:#fff;left:8px}
.tile-text{position:absolute;left:16px;right:16px;bottom:16px;color:var(--on-ink)}
@media (hover:hover) and (pointer:fine){
  .tile:hover{background:var(--orange)}
  .tile:hover .ets{transform:scale(1.04)}
  .tile-ink:hover{background:#000}
}
.board-note{margin-top:24px;max-width:46em;font-size:1rem}

/* What's in it: stacking colour sheets */
.stack{padding:clamp(80px,11vw,170px) 0 0}
.stack-h{padding:0 var(--g) 48px}
.sheet{border-radius:22px 22px 0 0;position:sticky;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:72px 1fr;min-height:calc(100svh - var(--bar) - 72px*var(--o));background:#fff;overflow:hidden}
.sheet:nth-of-type(1){--o:0;top:var(--bar)}
.sheet:nth-of-type(2){--o:1;top:calc(var(--bar) + 72px)}
.sheet:nth-of-type(3){--o:2;top:calc(var(--bar) + 144px)}
.sheet:nth-of-type(4){--o:3;top:calc(var(--bar) + 216px)}
.sheet h3{grid-column:1/-1;align-self:center;padding:0 var(--g);font-size:clamp(1.25rem,2.4vw,2.25rem);letter-spacing:-.025em;line-height:1.1}
.sheet-text{grid-column:1;align-self:end;display:grid;justify-items:start;gap:20px;padding:24px var(--g) clamp(24px,4svh,48px)}
.sheet-text p{max-width:32em;font-size:clamp(1.0625rem,1.4vw,1.25rem)}
.sheet-pic{grid-column:2;grid-row:2;min-height:0;position:relative}
.sheet-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.sheet-orange{background:var(--orange)}
.sheet-mist{background:var(--mist)}
.sheet-ink{background:var(--ink);color:#fff}
.sheet-white{background:#fff}

/* Staircase of lines */
.stairs{padding:clamp(80px,11vw,170px) var(--g)}
.stair-list{display:grid;grid-template-columns:repeat(12,1fr);row-gap:clamp(36px,4vw,56px);position:relative}
.stair-list li{grid-column:var(--c,1)/-1;position:relative}
.stair-list li:nth-child(2){--c:2}.stair-list li:nth-child(3){--c:3}.stair-list li:nth-child(4){--c:4}
.stair-line{font-size:clamp(1.75rem,4.6vw,4.75rem);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.stair-last{color:var(--orange-ink)}
.stair-list li>p:last-child{margin-top:10px;max-width:34em}
.step-cursor{position:absolute;left:0;top:0;z-index:2;width:30px;pointer-events:none;opacity:0}

/* The one plan */
.plan-sec{padding:clamp(80px,11vw,170px) var(--g);background:var(--mist)}
.plan{border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(32px,4vw,56px);background:var(--ink);color:#fff}
.plan-main{padding:clamp(24px,4vw,56px)}
.plan-main h3{font-size:var(--display);line-height:1;letter-spacing:-.035em}
.plan-main p{margin-top:20px;max-width:26em;color:var(--on-ink)}
.ticks{display:grid;gap:12px;padding:clamp(24px,4vw,56px);align-content:center;font-size:clamp(1.0625rem,1.6vw,1.4rem);font-weight:700}
.ticks li{position:relative;padding-left:34px}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:17px;height:9px;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg)}
.plan-strip{grid-column:1/-1;display:block;padding:22px clamp(24px,4vw,56px);background:var(--orange);color:var(--ink);font-size:var(--sub);font-weight:800;letter-spacing:-.02em;text-decoration:none;transition:background-color .14s}
.plan-strip:active{background:#ff7240}
@media (hover:hover) and (pointer:fine){.plan-strip:hover{background:#ff7240}}

/* FAQ: index cards in a drawer */
.faq{padding:clamp(80px,11vw,170px) var(--g)}
.faq>.sec-h{margin-bottom:clamp(32px,4vw,48px)}
.cards{max-width:1000px;margin-inline:auto}
.card{--tabw:min(180px,28%);--step:13.5%;--tab:44px;position:relative;margin-top:-10px;padding-bottom:10px;clip-path:polygon(calc(var(--i)*var(--step)) 0,calc(var(--i)*var(--step) + var(--tabw)) 0,calc(var(--i)*var(--step) + var(--tabw)) var(--tab),100% var(--tab),100% 100%,0 100%,0 var(--tab),calc(var(--i)*var(--step)) var(--tab))}
.card:first-child{margin-top:0}
.card-0{background:var(--mist)}
.card-1{background:var(--orange)}
.card-2{background:var(--ink);color:#fff}
.card summary{list-style:none;display:block;padding:0 0 22px}
.card summary::-webkit-details-marker{display:none}
.card summary:focus-visible{outline-offset:-6px;box-shadow:none;outline-color:currentColor}
.tab{display:block;height:var(--tab);margin-left:calc(var(--i)*var(--step));width:var(--tabw);padding:10px 12px 0;margin-bottom:12px;font-size:1rem;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden}
.q{display:block;margin-inline:clamp(16px,3vw,32px);padding-right:28px;font-size:clamp(1.125rem,1.6vw,1.4rem);font-weight:700;line-height:1.25;position:relative}
.q::after{content:"";position:absolute;right:4px;top:.28em;width:11px;height:11px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);transition:transform .18s var(--ease)}
.card[open] .q::after{transform:translateY(5px) rotate(225deg)}
.card p{max-width:50em;padding:0 clamp(16px,3vw,32px) 28px}

/* CTA with the form already open */
.cta{display:grid;grid-template-columns:1.15fr minmax(320px,460px);gap:clamp(32px,6vw,96px);align-items:end;min-height:90svh;padding:clamp(56px,7vw,110px) var(--g);background:var(--orange)}
.cta p{margin-top:20px;max-width:30em;font-weight:700}
.cta .cta-alt{font-weight:400}
.dialog{border-radius:var(--r);display:grid;gap:14px;padding:clamp(20px,2.4vw,32px);background:#fff;color:var(--ink);box-shadow:0 24px 60px -24px rgba(20,20,20,.55)} /* taste-skill-ignore: interface fragment or floating layer */
.dialog-title{font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.field label,.seg legend{display:block;margin-bottom:6px;font-size:1rem;font-weight:700}
.field input,.field textarea{display:block;width:100%;font:inherit;font-size:1rem;padding:13px 14px;border:2px solid var(--ink);border-radius:var(--rb);background:#fff;color:var(--ink)}
.field textarea{resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline-offset:1px}
.field input[aria-invalid=true]{border-color:var(--orange-ink);background:#fff4ef}
.seg{display:block}
.seg>label{display:inline-block}
.seg{white-space:normal}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{border-radius:8px;display:inline-block;padding:11px 14px;background:var(--mist);font-size:1rem;font-weight:700;transition:background-color .14s,color .14s}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.form-status{border-radius:8px;padding:12px 14px;background:var(--mist);font-weight:700}
.form-status[data-state=ok]{background:var(--ink);color:#fff}
.form-status[data-state=error]{background:#fff4ef;color:#8a2a06}
.form-note{font-size:.9375rem;color:var(--muted)}
.dialog button[disabled]{opacity:.6}

/* Footer: the phone number is the headline */
.foot{background:var(--ink);color:var(--on-ink);padding:clamp(40px,5vw,64px) var(--g) max(24px,env(safe-area-inset-bottom));font-size:1rem}
.foot-notes{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-nap{display:grid;gap:12px;justify-items:start}
.foot img{height:28px;width:auto}
.foot address strong{color:#fff}
.foot h2{margin-bottom:12px;color:#fff;font-size:1rem}
.foot ul{display:grid;gap:7px}
.foot a{text-decoration:none}
.foot-phone{display:block;margin-top:clamp(48px,9vw,140px);color:#fff;font-size:clamp(3rem,12.4vw,14rem);font-weight:800;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:24px;padding-right:64px;font-size:.9375rem}
.foot-meta a{text-decoration:underline}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:#fff}.foot-phone:hover{color:var(--orange)}}

/* Back to top */
.gm-top{border-radius:50%;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:grid;place-items:center;width:48px;height:48px;padding:0;border:2px solid #fff;background:var(--ink);color:#fff;transition:opacity .2s,visibility .2s,transform .14s var(--ease)}
.gm-top:active{transform:scale(.95)}
.gm-top[data-hidden=true]{opacity:0;visibility:hidden}

/* Inner pages */
.poster{position:relative;padding:clamp(20px,3vw,40px) var(--g) clamp(32px,4vw,56px);background:var(--mist)}
.crumbs{font-size:.9375rem;margin-bottom:clamp(24px,4vw,56px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"/";margin-right:8px}
.poster-title{font-size:min(calc((100vw - 2*var(--g))/(var(--n)*.58)),clamp(2.5rem,6.6vw,6.5rem));line-height:1.02;letter-spacing:-.035em;font-weight:800;white-space:nowrap}
.poster-foot{display:grid;grid-template-columns:1fr minmax(0,38%);gap:clamp(24px,5vw,80px);margin-top:clamp(24px,3vw,44px)}
.poster-copy{display:grid;gap:24px;align-content:start;max-width:36em}
.poster .lead{color:var(--muted)}
.poster-fig{position:relative;margin-bottom:calc(clamp(32px,4vw,56px)*-1 - clamp(120px,16vw,240px));z-index:1;pointer-events:none}
.poster-fig img{width:100%;transform:rotate(3deg)}
.poster-fig figcaption{margin-top:18px;font-size:.9375rem;max-width:30em;pointer-events:auto}
.poster-noimg .poster-foot{grid-template-columns:1fr}
.article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);gap:clamp(24px,5vw,80px);padding:clamp(48px,6vw,96px) var(--g) 0}
.prose{max-width:42em}
.prose h2{font-size:var(--sub);line-height:1.1;letter-spacing:-.025em;margin-top:clamp(36px,4vw,56px)}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin-top:14px}
.prose ul{display:grid;gap:10px}
.prose li{position:relative;padding-left:24px}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--orange)}
.prose a{font-weight:700}
.side{border-radius:var(--r);align-self:start;position:sticky;top:calc(var(--bar) + 24px);display:grid;gap:14px;margin-top:clamp(240px,30vw,460px);padding:clamp(20px,2.4vw,32px);background:var(--mist)}
.side h2{font-size:var(--sub);letter-spacing:-.025em;line-height:1.1}
.facts{display:grid;gap:8px}
.facts li{position:relative;padding-left:26px;font-weight:700}
.facts li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:7px;border-left:3px solid var(--orange-ink);border-bottom:3px solid var(--orange-ink);transform:rotate(-45deg)}
.side-tel{font-size:var(--sub);font-weight:800;letter-spacing:-.02em;text-decoration:none}
.side-wa{font-size:1rem}
.more{padding:0 var(--g) clamp(80px,11vw,170px)}
.biglist{margin-top:clamp(20px,3vw,32px)}
.biglist a{display:block;padding:clamp(8px,1vw,14px) 0;font-size:clamp(1.6rem,4vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-decoration:none;transition:transform .18s var(--ease),color .14s}
@media (hover:hover) and (pointer:fine){.biglist a:hover{color:var(--orange-ink);transform:translateX(8px)}}
.biglist a:active{color:var(--orange-ink)}
.rows{padding:clamp(160px,20vw,300px) var(--g) clamp(64px,8vw,110px);display:grid;gap:8px}
.poster-noimg+.rows{padding-top:clamp(48px,6vw,96px)}
.row{border-radius:var(--r);display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;align-items:center;padding:clamp(20px,2.6vw,36px) clamp(16px,2vw,28px);background:var(--mist);text-decoration:none;transition:background-color .16s}
.row h2{font-size:clamp(1.5rem,3.2vw,3rem);letter-spacing:-.03em;line-height:1.05}
.row:active{background:var(--orange)}
@media (hover:hover) and (pointer:fine){.row:hover{background:var(--orange)}}
.plainsec{padding:clamp(56px,7vw,110px) var(--g)}
.poster:has(.poster-fig)+.plainsec{padding-right:calc(38% + var(--g))}
.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.scores div{border-radius:var(--rb);padding:14px;background:var(--mist)}
.scores dt{font-size:.9375rem}
.scores dd{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.credits{font-size:1rem}
.contact{display:grid;grid-template-columns:1fr minmax(320px,520px);gap:clamp(32px,6vw,96px);padding:clamp(48px,6vw,96px) var(--g) clamp(80px,9vw,140px)}
.contact-info{display:grid;gap:12px;justify-items:start;align-content:start}
.contact-big{font-size:clamp(1.75rem,4.4vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;text-decoration:none}
.contact-mail{font-size:clamp(1.2rem,2.6vw,2.6rem);overflow-wrap:anywhere}
.contact h3{margin-top:18px;font-size:1.125rem}
.contact .dialog{background:var(--mist);box-shadow:none}
.contact .seg span{background:#fff}
.contact .seg input:checked+span{background:var(--ink)}
.notfound{min-height:48svh}
.notfound+.more{padding-top:clamp(48px,6vw,96px)}

/* Vragen page: the layout of version one */
.vragen{padding:clamp(20px,3vw,40px) var(--g) clamp(72px,8vw,112px)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.faq-grid h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.faq-grid .lead{margin-top:20px;color:var(--muted);max-width:34em}
.faq-item{border-bottom:1px solid var(--line)} /* taste-skill-ignore: from version one */
.faq-item:first-child{border-top:2px solid var(--ink)}
.faq-item summary{list-style:none;position:relative;padding:22px 40px 22px 0;font-size:1.1rem;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item p{padding:0 0 24px;color:var(--muted);max-width:40em}
.cta-band{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:40px;padding:clamp(64px,7vw,96px) var(--g);background:var(--orange)}
.cta-band h2{max-width:13em;font-size:clamp(2rem,4vw,3.1rem);font-weight:800;line-height:1.08;letter-spacing:-.025em}
.cta-band p{margin-top:16px;max-width:30em;font-size:1.1rem}
.cta-band-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-band .phone{font-size:1.05rem;font-weight:700;text-decoration:none}

/* Reveal: only ever hidden when the script has confirmed it can show it again */
.js-reveal .reveal:not(.in){opacity:0;transform:translateY(24px)}
.js-reveal .reveal{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0)*70ms)}

/* Tablet and phone */
@media (max-width:1120px){
  :root{--bar:60px}
  .nav{gap:18px;font-size:.95rem}
}
@media (max-width:980px){
  .bar{gap:8px}
  .bar-cta{display:none}
  .bar-call,.menu-btn{display:inline-flex}
  .logo img{height:26px}
  .nav.open{display:grid}
  .nav{position:absolute;left:0;right:0;top:100%;display:none;gap:0;max-height:calc(100dvh - var(--bar));overflow-y:auto;overscroll-behavior:contain;padding:8px var(--g) 24px;background:#fff;box-shadow:0 24px 40px -20px rgba(20,20,20,.4);font-size:1.25rem} /* taste-skill-ignore: floating menu */
  .nav>a,.nav summary{padding:12px 0}
  .nav-group ul{position:static;min-width:0;padding:0 0 8px 12px;box-shadow:none;animation:none!important}
  .demo,.reasons,.race,.plan,.cta,.contact,.seen,.faq-grid{grid-template-columns:1fr}
  .faq-grid{gap:32px}
  .demo-copy{max-width:36em}
  .phones{justify-self:stretch;max-width:none}
  .board-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .tile-head{min-height:120px}
  .tile{min-height:clamp(200px,50vw,340px)}
  .sheet,.sheet:nth-of-type(n){--o:0;grid-template-columns:1fr;grid-template-rows:auto;min-height:70svh;top:var(--bar)}
  .sheet:nth-of-type(2){top:calc(var(--bar) + 52px)}
  .sheet:nth-of-type(3){top:calc(var(--bar) + 104px)}
  .sheet:nth-of-type(4){top:calc(var(--bar) + 156px)}
  .sheet h3{grid-column:1;min-height:52px;padding-block:10px}
  .sheet-pic{grid-column:1;grid-row:auto;aspect-ratio:4/3}
  .sheet-text{grid-column:1;padding-top:16px}
  .stack{padding-bottom:0}
  .cta{min-height:0}
  .article{grid-template-columns:1fr}
  .side{position:static;margin-top:0;order:2}
  .poster-foot{grid-template-columns:1fr}
  .poster-fig{max-width:min(420px,78vw);margin-left:auto;margin-bottom:calc(clamp(32px,4vw,56px)*-1 - 90px)}
  .poster:has(.poster-fig)+.article{padding-top:130px}
  .poster:has(.poster-fig)+.plainsec{padding-right:var(--g);padding-top:130px}
  .rows{padding-top:130px}
  .foot-notes{grid-template-columns:1fr 1fr}
  .foot-nap{grid-column:1/-1}
  .foot-meta{flex-direction:column}
  .step-cursor{display:none}
}
@media (max-width:560px){
  body{font-size:1.0625rem}
  .serp{padding:16px 14px 20px;margin-inline:calc(var(--g)*-1 + 6px)}
  .serp-list{height:calc(4 * 88px)}
  .result{height:78px;padding:12px 14px}
  .result.r2{top:88px}.result.r3{top:176px}.result.r4{top:264px}
  .cursor{width:34px;left:62%;top:168px}
  .ph{height:240px}
  .stair-list li:nth-child(2){--c:1;margin-left:6vw}.stair-list li:nth-child(3){--c:1;margin-left:12vw}.stair-list li:nth-child(4){--c:1;margin-left:18vw}
  .stair-line{font-size:8.2vw}
  .card{--tabw:min(116px,34%);--step:12.4%}
  .tab{font-size:.875rem;padding:12px 8px 0}
  .row{grid-template-columns:1fr}
  .tile-name{left:6px;top:6px;padding:2px 6px 3px;font-size:.9375rem;letter-spacing:-.01em}
  .tile-ink .tile-name{left:0}
  .tile-text{left:8px;right:8px;bottom:8px;font-size:.9375rem}
  .scores{grid-template-columns:1fr 1fr}
  .foot-phone{font-size:12.8vw}
  .foot-notes{grid-template-columns:1fr}
}

/* Werkgebied on the homepage */
.area{background:var(--paper)}
.area-copy{max-width:52em}
.area .lead{margin-top:20px}

/* Opening hours, one day per line */
.hours{display:grid;gap:4px;margin:0;font-variant-numeric:tabular-nums}
.hours div{display:grid;grid-template-columns:7.5em auto;gap:16px}
.hours dt,.hours dd{margin:0}
.foot-label{color:#fff;font-weight:700;margin-bottom:6px}
.foot .hours dd{color:var(--on-ink)}