@media (max-width: 1024px) {

  #site-nav.is-open .nav-blur {
    height: var(--menu-ground-h, 62svh);
    visibility: visible;
  }
  #site-nav.is-open::before  { height: var(--menu-ground-h, 62svh); }

  #site-nav.is-open.is-scrolled .nav-blur { height: 100lvh; }

  #site-nav.is-open .nav-blur__layer--1 { -webkit-backdrop-filter: blur(0.321rem); backdrop-filter: blur(0.321rem); }
  #site-nav.is-open .nav-blur__layer--2 { -webkit-backdrop-filter: blur(1.218rem); backdrop-filter: blur(1.218rem); }
  #site-nav.is-open .nav-blur__layer--3 { -webkit-backdrop-filter: blur(2.5rem);   backdrop-filter: blur(2.5rem); }

  #site-nav.is-open .nav-blur::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0) 5%, rgb(0 0 0) 100%);
    mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0) 5%, rgb(0 0 0) 100%);
    pointer-events: none;
  }

  #site-nav.is-open.is-scrolled .nav-blur::after {
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    -webkit-mask-image: none;
    mask-image: none;
  }

  #site-nav.is-open.is-scrolled::after {
    height: 100lvh;
    -webkit-mask-image: none;
    mask-image: none;
    background: color-mix(in srgb, var(--bg-studio) 72%, transparent);
  }

  #site-nav.is-open.is-scrolled.is-over-dark::after {
    background: color-mix(in srgb, var(--ink) 46%, transparent);
  }

  #site-nav.is-open:not(.is-scrolled)::after { background: transparent; }

  #site-nav.is-open .nav-blur,
  #site-nav.is-open::before,
  #site-nav.is-open::after {
    transition: height 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease, background 300ms ease;
  }

  #site-nav .nav-blur,
  #site-nav::before,
  #site-nav::after {
    transition: height 240ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms ease, background 300ms ease;
  }

  .nav-sheet {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--sp-32);
    min-height: calc(100lvh - var(--nav-bar-h));
    padding: var(--sp-24) var(--sp-24) var(--sp-24);
    background: transparent;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-sheet[hidden] { display: none; }

  .nav-sheet__links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

  .nav-sheet__links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font: 400 18px/16px var(--font-ui);
    letter-spacing: var(--type-label-sm-tracking);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
  }

  #site-nav.is-open.is-scrolled .nav-sheet__links a { color: var(--ink); }
  #site-nav.is-open.is-over-dark.is-scrolled .nav-sheet__links a { color: var(--white); }

  .nav-sheet__actions { display: flex; flex-direction: column; gap: var(--sp-12); }
  .nav-sheet__actions .btn { width: 100%; }

  .nav-sheet__links a,
  .nav-sheet__actions .btn {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
      color 300ms ease;
  }

  #site-nav.is-open .nav-sheet__links a,
  #site-nav.is-open .nav-sheet__actions .btn { opacity: 1; transform: none; }

  #site-nav.is-open .nav-sheet__links li:nth-child(1) a { transition-delay: 560ms; }
  #site-nav.is-open .nav-sheet__links li:nth-child(2) a { transition-delay: 650ms; }
  #site-nav.is-open .nav-sheet__links li:nth-child(3) a { transition-delay: 740ms; }
  #site-nav.is-open .nav-sheet__links li:nth-child(4) a { transition-delay: 830ms; }
  #site-nav.is-open .nav-sheet__actions .btn:nth-child(1) { transition-delay: 920ms; }
  #site-nav.is-open .nav-sheet__actions .btn:nth-child(2) { transition-delay: 1010ms; }

  #site-nav:not(.is-open) .nav-sheet__links a,
  #site-nav:not(.is-open) .nav-sheet__actions .btn { transition-duration: 180ms; transition-delay: 0ms; }

  @media (prefers-reduced-motion: reduce) {
    #site-nav .nav-blur,
    #site-nav::before,
    .nav-sheet__links a,
    .nav-sheet__actions .btn { transition: none; }
    #site-nav.is-open .nav-sheet__links a,
    #site-nav.is-open .nav-sheet__actions .btn { transition-delay: 0ms; }
  }

  a, button, .btn, [role="button"], summary, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
  }

  .nav-toggle:active .nav-toggle__bar { opacity: 0.55; }
  .nav-sheet__links a:active { opacity: 0.6; }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-40) var(--sp-48);
  }
}


@media (max-width: 768px) {

  @media (prefers-reduced-motion: no-preference) {
    ul.trusted__marks[data-marquee="on"] { animation-duration: 40s; }
  }

  :root {
    --ink-hero-lede: #7A8CB3;
    --ink-hero-lead: #4A5C82;
    --bf-cta: blur(2px);
  }

  #hero .trusted { gap: var(--sp-12); margin-block: auto 0; }
  #hero .trusted__title { font-size: 13px; }

  #hero .trusted::before { inset: -20px calc(50% - 50vw); }

  #site-nav .nav-blur { visibility: visible; }

  #site-nav .nav-blur__layer--1 { -webkit-backdrop-filter: blur(0.321rem); backdrop-filter: blur(0.321rem); }
  #site-nav .nav-blur__layer--2 { -webkit-backdrop-filter: blur(1.218rem); backdrop-filter: blur(1.218rem); }
  #site-nav .nav-blur__layer--3 { -webkit-backdrop-filter: blur(2.5rem);   backdrop-filter: blur(2.5rem); }


  main > section, .stone-scene > section { scroll-margin-top: var(--sp-48); }

  main > section#aanpak { scroll-margin-top: var(--nav-bar-h); }

  .cta-block { margin: 0 var(--sp-8) var(--sp-16); }
  #cta { padding-block: var(--sp-64); scroll-margin-top: var(--cta-land); }

  .partner-cloud { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-32) var(--sp-48); }
  .partner__logo { max-height: 56px; }
  .partners-inner { flex-direction: column; gap: var(--sp-40); }
  .partners-head { font-size: 22px; }

  #hero h1        { font-size: clamp(2.5rem, 1.55rem + 3.9vw, 3.5rem); }
  h2,
  .section-intro h2 { font-size: clamp(1.625rem, 1.4rem + 1vw, 1.875rem); }
  .cta-title      { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.75rem); }
  #hero .lead     { font-family: var(--font-ui); font-size: 16px; line-height: 1.56; letter-spacing: 0.5px; text-transform: none; color: var(--ink-hero-lead); }
  #hero .lead .lead__lede { color: var(--ink-hero-lede); }
  .lead           { font-size: 1.0625rem; }
  .stat__value,
  .proces-step::before,
  .benefit::before { font-size: 2.5rem; }
  .stat__label    { font-size: 1rem; }

  #hero {
    padding-top: calc(var(--nav-bar-h) + 36px);
    padding-bottom: 12px;
    padding-inline: var(--sp-24);
    overflow-x: clip;
  }

  @media (scripting: none) {
    #hero { padding-top: 36px; }
  }

  .hero-lockup { padding-top: 0; gap: var(--sp-32); }
  .hero-copy { gap: var(--sp-12); }
  #hero .overline { margin-bottom: -6px; }
  #hero .lead { max-width: 620px; }

  #uitdaging { padding-top: var(--sp-96); }
  #uitdaging .container { gap: var(--sp-48); }

  .problem-blur {
    display: block;
    position: absolute;
    inset: 0 0 -135px 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(255, 252, 244, 0.01) 0px,
      rgba(255, 252, 244, 0.01) calc(100% - 135px),
      rgba(255, 252, 244, 0) 100%);
  }

  .problem-blur__layer {
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }

  .problem-blur__layer--1 {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 37px, rgb(0, 0, 0) calc(100% - 45px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 37px, rgb(0, 0, 0) calc(100% - 45px), rgba(0, 0, 0, 0) 100%);
  }

  .problem-blur__layer--2 {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 74px, rgb(0, 0, 0) calc(100% - 90px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 74px, rgb(0, 0, 0) calc(100% - 90px), rgba(0, 0, 0, 0) 100%);
  }

  .problem-blur__layer--3 {
    -webkit-backdrop-filter: blur(31px);
    backdrop-filter: blur(31px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 111px, rgb(0, 0, 0) calc(100% - 135px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 111px, rgb(0, 0, 0) calc(100% - 135px), rgba(0, 0, 0, 0) 100%);
  }

  #probleem { padding-bottom: 0; }


  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-top: 0;
  }

  #hero .hero__actions .btn--ghost { display: none; }

  #wat-we-doen::after,
  #voor-wie::after { content: none; }

  .trusted            { margin-top: var(--sp-64); }
  .trusted__marks     { gap: var(--sp-24) var(--sp-32); --mark-scale: 0.75; --mark-gap: var(--sp-48); }

  .section-split      { gap: var(--sp-32); }
  .usp-cards,
  .proces-steps       { grid-template-columns: minmax(0, 1fr); }
  .qualify-cards      { flex-direction: column; }
  .usp-cards,
  .qualify-cards      { gap: var(--sp-24); }
  .usp-card           { min-height: 0; }
  #voor-wie .usp-card { flex: none; }

  .probleem-row       { width: 100%; }

  .proces-steps {
    margin-top: var(--sp-32);
    margin-right: calc(50% - 50vw);
    row-gap: 22px;
  }

  .proces-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0;
    row-gap: 16px;
  }

  .proces-step::before {
    grid-column: 1;
    align-self: end;
    padding-bottom: 8px;
    font-family: var(--font-ui);
    font-size: 33px;
    line-height: 34px;
  }

  .proces-step h3 {
    grid-column: 2;
    align-self: end;
    padding: 0 0 8px 8px;
    border-bottom: 2px solid var(--accent);
  }

  .proces-step p {
    grid-column: 1 / -1;
    max-width: 254px;
  }

  .benefit-grid       { grid-template-columns: minmax(0, 1fr); }
  .benefit:nth-child(2n)  { border-left: 0; }
  .benefit:nth-child(n+2) { border-top: 1px solid var(--accent); }
  .benefit            { padding-inline: 0; }
  .benefit::before    { font-size: 40px; margin-bottom: -10px; }
  .benefit h3         { font-size: 22px; }

  .stats              { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-16); }


  .section-actions    { margin-top: var(--sp-40); }

  .stone-scene__media,
  .stone-scene::before,
  #probleem::after { display: none; }

  .stone-scene::after { content: none; }

  .proces-frame { display: flex; flex-direction: column; }
  .proces-frame > .picture-band {
    position: absolute;
    top: calc(var(--sp-64) + 14.7vw);
    right: 0;
    z-index: 1;
    width: 55.1vw;
    height: 197vw;
    margin: 0;
    overflow: hidden;
  }

  .proces-frame > .picture-band > img {
    position: absolute;
    top: 0;
    left: -3.6vw;
    width: 197vw;
    height: auto;
    max-width: none;
    margin-inline: 0;
    transform-origin: 0 0;
    transform: rotate(-90deg) translateX(-100%);
  }

  .proces-steps { z-index: auto; }
  .proces-step p { position: relative; z-index: 2; }

  #hero { display: flex; flex-direction: column; }
  .hero-lockup   { order: 0; }
  #hero .trusted { order: 2; }

  .hero-media {
    position: fixed;
    inset: auto 0 0 0;
    z-index: -2;
    width: auto;
    height: calc(100vw * 508 / 394);
    margin-inline: 0;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-media > video { object-fit: cover; object-position: 50% 50%; }

  #hero::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: -1;
    height: 65.41svh;
    background: linear-gradient(to bottom,
      #FFFFFF 0%,
      #D4D9E1 88.4065%,
      rgba(212, 217, 225, 0) 100%);
    pointer-events: none;
  }

  #aanpak {
    background-color: transparent;
    padding-top: 143px;
    padding-bottom: 0;
  }

  #aanpak > .container { position: relative; }

  html.ground-off .hero-media,
  html.ground-off #hero::before { visibility: hidden; }

  #aanpak::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgba(255, 252, 244, 0) 0px,
      rgba(255, 252, 244, 0.55) 57px,
      rgb(255, 252, 244) 135px);
    pointer-events: none;
  }
  #aanpak {
    display: flex;
    flex-direction: column;
    gap: var(--sp-32);
  }

  #aanpak > .container { order: 0; }

  .section-ground--bleed {
    order: 1;
    position: static;
    inset: auto;
    z-index: auto;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: 82.74vw;
    clip-path: inset(0);
  }

  .section-ground--bleed::after { content: none; }

  .section-ground--bleed > img {
    position: relative;
    top: -16.92vw;
    width: 158.53vw;
    height: auto;
    max-width: none;
    object-fit: fill;
  }

  #ai { padding-top: var(--sp-32); }

  #proces { padding-bottom: var(--sp-64); }

  .team-strip {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: auto;
  }
  .team-strip > img:not(.team-strip__badge) { aspect-ratio: 450 / 559; }
  .team-strip > img:nth-child(2) {
    grid-column: 1 / -1;
    order: -1;
    aspect-ratio: 641 / 559;
  }
  .team-strip__badge {
    width: 40%;
    right: 4%;
    bottom: 3%;
  }

  #over-ons { padding-bottom: 0; }
  #stats    { padding-top: var(--sp-48); }

  .case-overlay__panel {
    -webkit-backdrop-filter: blur(24px) saturate(0.35);
    backdrop-filter: blur(24px) saturate(0.35);
  }

  .footer-inner { justify-content: flex-start; gap: var(--sp-80); padding: 56px var(--sp-24); }
  .footer-cols  { display: flex; flex-direction: column; gap: var(--sp-40); }
  .footer-col   { gap: var(--sp-12); }
  .footer-col ul { gap: 0; }
  .footer-col li { font-size: 16px; }
  .footer-col__head { font-size: 22px; }

  .footer-lockup { flex-direction: column; gap: var(--sp-32); }
  .footer-sign { gap: 56px; }
  .footer-poweredby { letter-spacing: 1.91px; }
}