/* Manthle on the biite.nl design system: the components Biite's stylesheet (biite.css) doesn't have. */
@font-face{font-family:Manrope;src:url(../fonts/manrope.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--color-surface);color:var(--color-deep);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
:focus-visible{outline-color:var(--color-deep)}

/* Utilities biite.css doesn't define */
@media (min-width:768px){.md\:py-14{padding-block:3.5rem}}
.object-\[50\%_40\%\]{object-position:50% 40%}
.text-surface\/62{color:#fffef79e}

/* The Manthle wordmark: MANThLE with a coral full stop (the hero's heartbeat also pulses it). */
.wordmark{font-family:Manrope,var(--font-sans);font-weight:600;font-size:21px;letter-spacing:.02em;line-height:1;color:var(--color-deep);text-decoration:none}
.wordmark__h{text-transform:none}
.logo-dot{display:inline-block;width:.27em;height:.27em;margin-left:.08em;border-radius:50%;background:var(--color-vivid);align-self:flex-end;margin-bottom:.06em;transform-origin:center}
.wordmark--groot{font-size:28px}
@media (min-width:768px){.wordmark{font-size:24px}.wordmark--groot{font-size:32px}}

/* Menu: the sheet of cards drops from the top, as on biite.nl. */
.menu[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.menu__scrim{position:fixed;inset:0;z-index:55;background:#10173166;opacity:0;transition:opacity .35s var(--ease-out)}
.menu__sheet{position:fixed;inset-inline:0;top:0;z-index:60;max-height:100dvh;overflow-y:auto;transform:translateY(-102%);transition:transform .55s var(--ease-expo)}
.menu.is-open{visibility:visible;pointer-events:auto}
.menu.is-open .menu__scrim{opacity:1}
.menu.is-open .menu__sheet{transform:none}
.menu__card{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .6s var(--ease-expo)}
.menu.is-open .menu__card{opacity:1;transform:none}
.menu.is-open .menu__card:nth-child(2){transition-delay:.05s}
.menu.is-open .menu__card:nth-child(3){transition-delay:.1s}
.menu__link{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;padding-block:.125rem;color:var(--ink-78);text-decoration:none;transition:color .3s var(--ease-out)}
.menu__link:hover,.menu__link:focus-visible{color:var(--color-vivid)}
.menu-bar{transform-box:fill-box;transform-origin:center;transition:transform .4s var(--ease-expo),opacity .2s var(--ease-out)}
#menu-button[aria-expanded="true"] .menu-bar--top{transform:translateY(6px) rotate(45deg)}
#menu-button[aria-expanded="true"] .menu-bar--mid{opacity:0}
#menu-button[aria-expanded="true"] .menu-bar--bot{transform:translateY(-6px) rotate(-45deg)}
body.menu-open{overflow:hidden}

/* The bento collage tile: three still lifes in one rounded tile, like diensten-beeld-1. */
.collage{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage__a{grid-row:1/span 2}
.collage__b{grid-column:2;grid-row:1}
.collage__c{grid-column:2;grid-row:2}

/* Trusted by: one quiet row of client logos, drifting. */
.logos__rij{display:flex;align-items:center;gap:2rem;border-block:1px solid #1017311f;padding-block:1.6rem}
.logos__label{flex:none;max-width:9rem;line-height:1.35}
.logos__baan{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos__track{display:flex;align-items:center;gap:3.75rem;width:max-content;animation:logos-schuif 70s linear infinite}
.logos__track img{height:calc(var(--h,1.15) * 22px);width:auto;flex:none;filter:brightness(0);opacity:.5}
.logos__baan:hover .logos__track{animation-play-state:paused}
@keyframes logos-schuif{to{transform:translateX(-50%)}}
@media (max-width:767px){.logos__rij{flex-direction:column;align-items:flex-start;gap:1.1rem}.logos__label{max-width:none}.logos__baan{width:100%}.logos__track{gap:2.5rem}}
@media (prefers-reduced-motion:reduce){.logos__track{animation:none;flex-wrap:wrap;width:auto;row-gap:1.5rem}.logos__baan{-webkit-mask-image:none;mask-image:none}}

/* Handwritten notes (Schoolbell), as on Biite's photos. */
.notitie{font-family:Schoolbell,cursive;font-size:1.35rem;line-height:1.1;color:var(--color-deep);display:inline-block;transform:rotate(-4deg)}
.notitie--stapel{position:absolute;top:7%;right:7%;color:var(--color-deep);font-size:1.45rem}
.notitie__pijl{position:absolute;width:88px;height:58px;fill:none;stroke:var(--color-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notitie__pijl path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) .5s}
.notitie__pijl path+path{transition-delay:1.3s;transition-duration:.35s}
.is-in .notitie__pijl path{stroke-dashoffset:0}
.notitie__pijl--stapel{top:calc(7% + 2rem);right:calc(7% + 3.5rem);transform:scaleX(1)}
.notitie--bureau{position:absolute;left:8%;bottom:7%;color:#fffef7;font-size:1.6rem;text-shadow:0 1px 10px #10173140}
.notitie--licht{color:#ffacea;transform:rotate(-3deg)}
@media (max-width:767px){.notitie--stapel{font-size:1.2rem}.notitie__pijl--stapel{right:calc(7% + 2.5rem);width:70px}}

/* The benchmark on navy: six numbered rows. */
.maatstaf__lijst{border-top:1px solid #fffef726;counter-reset:none;list-style:none;margin:0;padding:0}
.maatstaf__rij{display:grid;grid-template-columns:3rem 15rem 1fr;gap:1.5rem;align-items:baseline;padding-block:1.6rem;border-bottom:1px solid #fffef726}
.maatstaf__nr{font-family:var(--font-display);font-weight:700;font-size:.875rem;opacity:.45}
.maatstaf__naam{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.maatstaf__tekst{color:#fffef7c7;line-height:1.65}
.maatstaf__rij:hover .maatstaf__naam{color:var(--color-vivid);transition:color .3s var(--ease-out)}
.maatstaf__slot{max-width:30ch}
@media (max-width:1023px){.maatstaf__rij{grid-template-columns:2.5rem 1fr;row-gap:.5rem}.maatstaf__tekst{grid-column:2}}

/* How we work: a numbered route with a line through it (from Biite's werkwijze page). */
.stappen{position:relative;list-style:none;margin:0;padding:0}
.stappen:before{content:"";position:absolute;left:1.25rem;top:1.25rem;bottom:2.75rem;width:1.5px;background:#10173126}
.stap{position:relative;display:grid;grid-template-columns:2.5rem 1fr;gap:1.5rem;padding-bottom:2.5rem}
.stap:last-child{padding-bottom:0}
.stap__nr{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:999px;background:var(--color-raised);font-family:var(--font-display);font-weight:700;font-size:.8rem;z-index:1;transition:background-color .5s var(--ease-out) .3s,color .5s var(--ease-out) .3s}
.stap.is-in .stap__nr{background:var(--color-vivid);color:var(--color-surface)}
.stap__naam{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;line-height:1.2;margin-top:.35rem}
.stap__tekst{margin-top:.6rem;max-width:52ch;color:var(--ink-78);line-height:1.7}

/* Questions: the accordion. */
.vraag__paneel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)}
.vraag.is-open .vraag__paneel{grid-template-rows:1fr}
.vraag.is-open .vraag__plus{transform:rotate(45deg)}
.vragen__nog{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem}
.vragen__nog .notitie{color:var(--color-vivid)}

/* The contact form inside the CTA card. */
.formulier__velden{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem}
.veld-in{display:flex;flex-direction:column;gap:.4rem;font-size:.875rem;color:#1017319e}
.veld-in--breed{grid-column:1/-1}
.veld-in input{font:inherit;font-size:1rem;color:var(--color-deep);background:var(--color-surface);border:1px solid #10173126;border-radius:.75rem;padding:.85rem 1rem;transition:border-color .3s var(--ease-out)}
.veld-in input:hover{border-color:#10173159}
.veld-in input:focus{outline:2px solid var(--color-deep);outline-offset:1px}
.veld-in input[aria-invalid="true"]{border-color:var(--color-vivid)}
.veld-in__fout{min-height:1em;color:#d63b3b;font-size:.8rem}
.formulier button[disabled]{opacity:.6;pointer-events:none}
.formulier__status.is-ok{color:var(--color-forest-teal,#03624c)}
@media (max-width:639px){.formulier__velden{grid-template-columns:1fr}}

/* Footer links */
.voet__link{display:inline-flex;align-items:baseline;column-gap:.5rem;color:var(--ink-78);text-decoration:none;transition:color .3s var(--ease-out)}
.voet__link:hover,.voet__link:focus-visible{color:var(--color-vivid)}

/* Reveals: site.js gives each element Biite's preset (start state, duration, stagger, ease .16,1,.3,1)
   and clears the start state once it is in view. The contact card and the photo are scroll-linked. */
.parallax,#contact>div>[data-reveal]{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-words] .inline-block{opacity:1!important;transform:none!important;transition:none!important}.notitie__pijl path{stroke-dashoffset:0}}