@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html,
 body {
     height: auto;
 }

 body {
     font-family: Inter, Arial, Helvetica, sans-serif;
     min-height: 200vh;
     color: darkslategrey;
     background-color: #F5F5F5;
     background-size: 400% 400%;
 }

 /* HEADER */


 /* Scope to body > header so the article's <header class="article-top">
    isn't swept into these layout rules. */
 body > header {
     position: sticky;
     top: 0;
     z-index: 10;
     display: flex;
     justify-content: space-between;
     /* even spacing across full width */
     align-items: center;
     height: 60px;
     letter-spacing: -0.04em;
     /* fixed header height */
     padding: 0 32px;
     margin-bottom: 0;
     background: #f5f5f5;
     z-index: 9999;
 }

 .logo {
     font-weight: 700;
     font-size: 16px;
     letter-spacing: -0.05em;
     color: #0a0a0a;
     text-decoration: none;
     line-height: 1;
 }

 .logo .reg {
     font-size: 0.7em;
     vertical-align: super;
     font-weight: 400;
     margin-left: 0.05em;
 }

 body > header a {
     text-decoration: none;
     color: black;
     font-weight: 600;
     font-size: 16px;
 }

 nav a {
     text-decoration: none;
     color: black;
     font-size: 16px;
 }

 .nav {
    display: flex;
     justify-content: space-around;
     /* even spacing across full width */
     align-items: center;
     height: 60px;
     padding: 0 60px;
     letter-spacing: -0.04em;
     /* fixed header height */
     margin-bottom: 0;
     flex: 1;
 }

 /* HAMBURGER */

 .hamburger {
     width: 60px;
     height: 30px;
     padding-top: 10px;
     padding-bottom: 10px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     user-select: none;
     -webkit-user-select: none;
     cursor: pointer;
 }

 .hamburger span {
     display: block;
     height: 2px;
     background: black;
     border-radius: 2px;
     transition:
     transform 1s cubic-bezier(0.22, 1, 0.36, 1);
     user-select: none;
 }

 /* HAMBURGER → X (minimal variant) */
.hamburger.active span:nth-child(1) {
    transform: rotate(10deg) translateY(4px);
    transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
.hamburger.active span:nth-child(2) {
    transform: rotate(-10deg) translateY(-4px);
    transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }


/* FULLSCREEN MENU */
.menu-overlay {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    transition: top 0.5s ease;
    z-index: 999;
  }
  
  /* MENU LINKS (groot maar clean) */
  .menu-overlay a {

    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 120%;
    font-size: 60px;
    text-decoration: none;
    color: black;
  }
  
  /* ACTIVE */
  .menu-overlay.active {
    top: 0;
  }

  .no-scroll {
    overflow: hidden;
  }

 /* content */

 .content {
     font-size: 20px;
     line-height: 1.6;
 }
 .wrapbackground {
    background-color: #F5F5F5;
    position: relative;
    z-index: 2;
 }

 /* Detail / article pages: the .wrapbackground above already covers the
    fixed dark footer. The inspirational-quote below the article needs the
    same treatment so it doesn't show the dark footer through it. */
 .inspirational-quote {
    background-color: #F5F5F5;
    position: relative;
    z-index: 2;
 }

 /* Make <main> transparent to clicks so the visible footer area
    (revealed through the transparent .footer-spacer) is interactive.
    Page content (direct children of main) re-enables clicks. */
 main {
    pointer-events: none;
 }
 main > * {
    pointer-events: auto;
 }

 /* GRID */

 .grid {
     max-width: 1520px;
     margin: auto;
     display: grid;
     grid-template-columns: repeat(auto-fit,
             minmax(min(370px, 100%), 1fr));
     gap: 4px;
     padding: 10px;
 }

 /* HERO */

 .hero {
     min-height: 60vh;
     display: flex;
     justify-content: center;
     cursor: default;
     padding: 24px 20px 120px;
 }

 .hero-inner {
     width: 100%;
     max-width: 1520px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .hero-main {
     flex: 1;
     display: flex;
     align-items: center;
 }

 .hero-title {
     font-size: 148px;
     font-weight: 600;
     letter-spacing: -0.09em;
     color: #101010;
     line-height: 1;
 }

 .hero-hook {
     max-width: 620px;
     font-size: 36px;
     font-weight: 400;
     letter-spacing: -0.09em;
     color: #101010;
     text-align: center;
     margin: 0 auto;
 }

 .hero-aside {
     max-width: 155px;
     font-size: 15px;
     font-weight: 400;
     letter-spacing: -0.09em;
     color: rgba(16, 16, 16, 0.6);
 }

 .hero-bottom {
     display: flex;
     align-items: flex-start;
     justify-content: space-evenly;
     gap: 40px;
     margin-top: 32px;
 }

 .page-label {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .hero-plus.plus {
     position: static;
     width: 20px;
     height: 20px;
     border-radius: 999px;
     border: 1px solid rgba(0, 0, 0, 0.12);
     background: rgba(0, 0, 0, 0.9);
     display: grid;
     place-items: center;
     font-size: 14px;
     font-weight: 800;
     line-height: 1;
     color: #fff;
 }

 .hero-plus.plus::before,
 .card>.plus::before {
     content: "+";
     padding-bottom: 2px;
 }

 .hero-page-label {
     font-size: 16px;
     font-weight: 400;
     letter-spacing: -0.07em;
     color: #101010;
 }

 .content,
 .card,
 .article-top,
 .article-body {
     opacity: 0;
     transform: translateY(80px);
 }

 /* Hero block — title, supporting copy, label and image all rise from
    further below for a deeper, more cinematic entrance. */
 .article-hero,
 .hero-title,
 .hero-hook,
 .hero-aside,
 .page-label {
     opacity: 0;
     transform: translateY(200px);
 }

 .reveal {
     opacity: 1;
     transform: translateY(0);
     transition:
         opacity 1s ease,
         transform 1s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* Initial-load delays — text first, hero ~0.2s later. */
 .page-label.reveal      { transition-delay: 0.00s; }
 .hero-title.reveal      { transition-delay: 0.05s; }
 .hero-hook.reveal       { transition-delay: 0.12s; }
 .hero-aside.reveal      { transition-delay: 0.18s; }
 .content.reveal         { transition-delay: 0.08s; }

 /* Article / detail pages — text first, hero image ~0.2s later. */
 .article-top.reveal  { transition-delay: 0.00s; }
 .article-body.reveal { transition-delay: 0.05s; }
 .article-hero.reveal { transition-delay: 0.20s; }

 /* Cards in the grid: cascade in just after the hero. */
 .grid .card:nth-child(1).reveal { transition-delay: 0.18s; }
 .grid .card:nth-child(2).reveal { transition-delay: 0.22s; }
 .grid .card:nth-child(3).reveal { transition-delay: 0.26s; }
 .grid .card:nth-child(4).reveal { transition-delay: 0.30s; }
 .grid .card:nth-child(5).reveal { transition-delay: 0.34s; }
 .grid .card:nth-child(6).reveal { transition-delay: 0.38s; }
 .grid .card:nth-child(n+7).reveal { transition-delay: 0.42s; }

 /* AFTER A PAGE SWAP — wait until the dark curtain has fully exited
    (curtain phase 2 takes 0.7s) before starting reveals, then play them
    a touch slower for a graceful arrival. The hero element comes last. */
 body.is-entering .reveal {
     transition:
         opacity 1.2s ease,
         transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 /* Page label, hook and aside use the same upward lift as the title
    but glide in slower so they trail behind it. */
 body.is-entering .page-label.reveal,
 body.is-entering .hero-hook.reveal,
 body.is-entering .hero-aside.reveal {
     transition:
         opacity 1.7s ease,
         transform 1.7s cubic-bezier(0.22, 1, 0.36, 1);
 }
 body.is-entering .page-label.reveal      { transition-delay: 0.30s; }
 body.is-entering .hero-title.reveal      { transition-delay: 0.20s; }
 body.is-entering .hero-hook.reveal       { transition-delay: 0.34s; }
 body.is-entering .hero-aside.reveal      { transition-delay: 0.38s; }
 body.is-entering .content.reveal         { transition-delay: 0.08s; }
 /* Article detail pages: hero image first, then the text trails in. */
 body.is-entering .article-hero.reveal    { transition-delay: 0.20s; }
 body.is-entering .article-top.reveal     { transition-delay: 0.55s; }
 body.is-entering .article-body.reveal    { transition-delay: 0.65s; }
 body.is-entering .grid .card:nth-child(1).reveal { transition-delay: 0.12s; }
 body.is-entering .grid .card:nth-child(2).reveal { transition-delay: 0.18s; }
 body.is-entering .grid .card:nth-child(3).reveal { transition-delay: 0.24s; }
 body.is-entering .grid .card:nth-child(4).reveal { transition-delay: 0.30s; }
 body.is-entering .grid .card:nth-child(5).reveal { transition-delay: 0.36s; }
 body.is-entering .grid .card:nth-child(6).reveal { transition-delay: 0.42s; }
 body.is-entering .grid .card:nth-child(n+7).reveal { transition-delay: 0.48s; }


 /* HALF-HEIGHT INSPIRATIONAL QUOTE SECTION */

 .inspirational-quote {
     height: 50vh;
     display: flex;
     justify-content: center;
     padding: 0 40px;
 }

 .inspirational-quote-inner {
     width: 100%;
     max-width: 1520px;
     display: flex;
     align-items: flex-end;
     padding: 0 30px 30px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 }

 .inspirational-quote-text {
     font-size: 30px;
     font-weight: 500;
     letter-spacing: -0.06em;
     line-height: 33px;
     color: #101010;
     max-width: 800px;
 }

 /* CARDS */

 .card {
     position: relative;
     display: flex;
     flex-direction: column;
     height: 520px;
     border-radius: 18px;
     background: #fff;
     padding: 21px;
     text-decoration: none;
     color: inherit;
     overflow: hidden;
 }

 a.card {
     cursor: pointer;
 }

 .card>* {
     position: relative;
     z-index: 1;
 }

 .card>.image {
     width: 120px;
     height: 120px;
     border-radius: 12px;
     object-fit: cover;
     display: block;
     transition:
         width .6s cubic-bezier(0.77, 0, 0.175, 1),
         height .6s cubic-bezier(0.77, 0, 0.175, 1);
     /* easeInOutQuart */
 }

 .card:hover .image {
     width: 160px;
     height: 160px;
 }

 .card>.card-text {
     margin-top: auto;
     display: flex;
     flex-direction: column;
     gap: 21px;
     margin-left: 21px;
     margin-right: 21px;
     margin-bottom: 21px;
 }

 .card>.card-text>.date {
     font-size: 12px;
     font-weight: 600;
     letter-spacing: -0.09em;
     color: rgba(9, 9, 9, 0.6);
 }

 .card>.card-text>.title {
     font-size: 20px;
     font-weight: 600;
     line-height: 1.2;
     letter-spacing: -0.06em;
     color: #101010;
 }

 .card>.card-text>.subtext {
     font-size: 15px;
     font-weight: 400;
     letter-spacing: -0.06em;
     color: rgba(0, 0, 0, 0.6);
 }

 .card .date,
 .card .title,
 .card .subtext {
     transition: transform .6s cubic-bezier(0.77, 0, 0.175, 1);
 }

 .card:hover .date {
     transform: translateY(12px);
 }

 .card:hover .title {
     transform: translateY(6px);
 }

 /* 
    .card:hover .subtext {
        transform: translateY(14px);
        } */

 /* LARGE CARD TEXT */
 .card.large .card-text {
     margin-left: 32px;
     margin-right: 32px;
     margin-bottom: 32px;
     gap: 10px;
 }

 .card.large .card-text .title {
     font-size: 38px;
     font-weight: 600;
     letter-spacing: -0.09em;
     color: #ffffff;
 }

 .card.large .card-text .subtext {
     font-size: 15px;
     font-weight: 400;
     letter-spacing: -0.06em;
     color: rgba(255, 255, 255, 0.6);
 }

 .card>.plus {
     position: absolute;
     top: 16px;
     right: 16px;
     z-index: 2;
     width: 18px;
     height: 18px;
     border-radius: 999px;
     border: 1px solid rgba(0, 0, 0, 0.12);
     background: rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     display: grid;
     place-items: center;
     font-size: 14px;
     font-weight: 800;
     line-height: 1;
     color: #fff;
     user-select: none;
 }

 .plus {
     transition: transform .6s cubic-bezier(0.77, 0, 0.175, 1);
 }

 .card:hover .plus {
     transform: rotate(90deg);
 }

 /* LARGE CARD BASE */
 .card.large {
     position: relative;
     grid-column: span 2;
     overflow: hidden;
     border-radius: 18px;
 }

 /* BACKGROUND IMAGE (animated) */
 .card.large::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 0;

     background-image: url("https://picsum.photos/800/520");
     background-size: cover;
     background-position: center;

     transition:
         transform .6s cubic-bezier(0.77, 0, 0.175, 1),
         filter .6s cubic-bezier(0.77, 0, 0.175, 1);
 }

 /* DARK OVERLAY */
 .card.large::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;

     background: rgba(0, 0, 0, 0.75);
     transition: background .6s cubic-bezier(0.77, 0, 0.175, 1);

     pointer-events: none;
 }

 /* TEXT ABOVE EVERYTHING */
 .card.large .card-text {
     position: relative;
     z-index: 2;
 }

 /* HOVER EFFECT */
 .card.large:hover::after {
     transform: scale(1.15);
     filter: blur(5px);
 }

 .card.large:hover::before {
     background: rgba(0, 0, 0, 0.65);
 }


 /* black transparent overlay */
 @media (max-width:760px) {
     .grid {
         grid-template-columns: 1fr;
     }

     .card.large {
         grid-column: span 1;
     }
 }

 @media (max-width:700px) {
     .hero {
         padding: 16px 16px 80px;
     }

     .hero-title {
         font-size: 72px;
         line-height: 0.95;
     }

     .hero-bottom {
         flex-direction: column;
         align-items: center;
         gap: 20px;
     }

     .hero-hook {
         max-width: 100%;
         font-size: 28px;
         margin: 0 auto;
         text-align: center;
     }

     .hero-aside {
         max-width: 100%;
         text-align: center;
     }
 }

 

 /* RESPONSIVE: afbeelding boven tekst */
 @media (max-width: 900px) {
     .blog-item-inner {
         display: flex;
         flex-direction: column;
         gap: 40px;
     }

     .nav {
        display: none;
      }

      .hamburger {
        display: flex;
      }

     .blog-media {
         position: relative;
         /* niet sticky op mobiel */
         height: auto;
     }
 }

 /* ARTICLE / PROJECT DETAIL — Fabrica-style: sticky image left, content right */

.article {
    max-width: none;
    margin: 0;
    padding: 20px 20px 160px 20px;
    display: flex;
    flex-direction: row;
    gap: 140px;
    align-items: flex-start;
}

/* Right column. The article-top below uses a tall top padding so the title
   lands near the BOTTOM of the first viewport, next to the bottom of the
   sticky hero image — reading naturally starts at the title. */
.article-content {
    flex: 1 1 50%;
    min-width: 0;
    padding: 0 6vw 0 0;
}

.article-top {
    padding: 60vh 0 14vh;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 40px;
}

.article-meta .article-tag {
    color: #0a0a0a;
}

.article-meta .article-meta-sep {
    opacity: 0.5;
}

.article-title-large {
    font-size: clamp(38px, 4vw, 64px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1.02;
    color: #0a0a0a;
    margin: 0 0 32px;
}

.article-subtitle {
    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.55);
    margin: 0 0 56px;
    max-width: 36em;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-circle {
    width: 42px;
    height: 42px;
    background-image: url("https://picsum.photos/42/42");
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    background-color: #ccc;
    flex-shrink: 0;
}

.author-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: #0a0a0a;
}

/* Hero figure — sticky on the left, fills the viewport below the fixed header. */
.article-hero {
    flex: 1 1 50%;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: auto;
    background: #e6e6e6;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    height: calc(100vh - 100px);
    width: 50%;
}

.article-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Subtle grain overlay (same gif used in the dark footer) sits on top of
   the hero image for a touch of analog texture. We pan the texture with
   a CSS animation so it always feels alive even if the GIF itself is slow. */
.article-hero::after {
    content: "";
    position: absolute;
    inset: -40px;
    pointer-events: none;
    background-image: url("https://framerusercontent.com/images/kelEr6s1qyt801dQcO45jKcaNkk.gif");
    background-size: 320px 320px;
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    opacity: 0.12;
    border-radius: inherit;
    animation: grain-shift 6s steps(4) infinite;
}

@keyframes grain-shift {
    0%   { background-position:   0px   0px; }
    25%  { background-position: -40px  30px; }
    50%  { background-position:  30px -40px; }
    75%  { background-position: -30px -20px; }
    100% { background-position:   0px   0px; }
}

/* Body — fills the right column. Generous breathing room between blocks
   so paragraphs read like a magazine column. */
.article-body {
    margin: 0;
    max-width: 38em;
}

.article-body h2 {
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 500;
    letter-spacing: -0.04em;
    color: #0a0a0a;
    margin: 96px 0 28px;
    line-height: 1.18;
}

.article-body h2:first-child {
    margin-top: 0;
}

.article-body p {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.7;
    color: #1a1a1a;
    margin: 0 0 32px;
}

.article-body p.greytext {
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.5;
    color: rgba(10, 10, 10, 0.5);
    margin-bottom: 56px;
    letter-spacing: -0.025em;
    font-weight: 400;
}

.article-body img {
    border-radius: 22px;
    width: 100%;
    margin: 64px 0;
    display: block;
}

/* Per-element scroll reveal inside the article body. Each block fades and
   lifts (same feel as the hero text) as it enters the viewport. */
.article-body > h2,
.article-body > p,
.article-body > img,
.article-body > ul,
.article-body > ol,
.article-body > blockquote {
    opacity: 0;
    transform: translateY(140px);
    transition:
        opacity 1.4s ease,
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.25s;
    will-change: opacity, transform;
}

.article-body > img {
    transform: translateY(180px);
}

.article-body > .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* "Previous / Next" cards — stacked inside the text column, image-with-overlay
   style (matches Fabrica's framer-1yibn68 block: full-bleed image, label +
   title overlaid in the lower-left corner, small 4px gap between cards). */
.article-continue {
    width: 100%;
    max-width: 600px;
    margin: 120px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.continue-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 140px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: #1a1a1a;
    opacity: 0;
    transform: translateY(140px);
    transition:
        opacity 1.4s ease,
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.25s;
}
.continue-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

.continue-card-img {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
}
.continue-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.continue-card:hover .continue-card-img img { transform: scale(1.04); }

/* Dark gradient covers the whole card so overlaid text stays readable on any
   image — the card is short, so the bottom-only gradient no longer makes sense. */
.continue-card-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.continue-card-text {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.continue-card-kicker {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-transform: uppercase;
}
.continue-card-title {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    max-width: 460px;
}

@media (max-width: 1024px) {
    .article-continue {
        margin-top: 80px;
        max-width: 100%;
    }
    .continue-card {
        aspect-ratio: 5 / 1;
        min-height: 110px;
    }
    .continue-card-text {
        left: 18px;
        right: 18px;
    }
}

@media (max-width: 1024px) {
    .article {
        flex-direction: column;
        gap: 0;
        padding: 0 0 80px;
        /* Force children to span the full viewport width. Without this, the
           desktop `align-items: flex-start` carries over and column-flex
           children would otherwise size to their content's intrinsic width,
           inheriting the desktop body's `max-width: 38em` and pushing the
           page wider than the viewport. `align-items: stretch` is the actual
           fix; we deliberately do NOT set `overflow-x: hidden` here because
           `overflow-x: hidden` with default `overflow-y: visible` computes
           to `overflow-y: auto`, which would add a second scrollbar. */
        align-items: stretch;
        width: 100%;
        max-width: 100%;
    }
    .article-hero {
        position: static;
        aspect-ratio: 16 / 9;
        height: auto;
        flex: none;
        width: 100%;
        border-radius: 0;
    }
    .article-content {
        width: 100%;
        min-width: 0;
        padding: 48px 24px 0;
    }
    .article-top {
        padding: 0 0 48px;
    }
    .article-body {
        max-width: none;
    }
    .article-body p {
        font-size: 16px;
    }
    .article-body h2 {
        margin-top: 64px;
    }
    .article-body img {
        margin: 40px 0;
        border-radius: 16px;
    }
}

  /* grain */
  .grain {
    position: relative;
    background: #181818;
    overflow: hidden;
  }
  
  .grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("https://framerusercontent.com/images/kelEr6s1qyt801dQcO45jKcaNkk.gif");
    background-size: auto;
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    /* mix-blend-mode: lighten; */
    opacity: 0.05;
  }

 /* ===== KANSO-STYLE FOOTER (FIXED BEHIND EVERYTHING) ====================== */

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Leave room for the 60px sticky header that overlays the top of the
       viewport with a #f5f5f5 background. */
    height: calc(100vh - 60px);
    color: #fff;
    background: #0f0f0f;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 120px 32px 28px;
    overflow: hidden;
}

.footer-spacer {
    height: 100vh;
    background: transparent;
    pointer-events: none;
}

.footer-shell {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-cta {
    font-size: clamp(40px, 6vw, 92px);
    font-weight: 500;
    letter-spacing: -0.07em;
    line-height: 0.95;
    color: #fff;
    max-width: 14ch;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
    font-size: 15px;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.65);
}

.footer-contact a {
    color: #fff;
    text-decoration: none;
}

.footer-contact a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 36px 0;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col h4 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 6px;
}

.footer-col a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.04em;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: rgba(255, 255, 255, 0.55);
}

.footer-news p {
    font-size: 16px;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    max-width: 28ch;
}

.footer-news-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px;
    max-width: 320px;
}

.footer-news-form input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: -0.03em;
    padding: 8px 14px;
    min-width: 0;
}

.footer-news-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer-news-form button {
    background: #fff;
    color: #0f0f0f;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.footer-news-form button:hover {
    background: rgba(255, 255, 255, 0.85);
}

.footer-brand {
    font-size: clamp(80px, 18vw, 240px);
    font-weight: 600;
    letter-spacing: -0.07em;
    line-height: 0.85;
    color: #fff;
    user-select: none;
    margin-top: auto;
}

.footer-brand .reg {
    font-size: 0.42em;
    vertical-align: top;
    margin-left: 0.05em;
    font-weight: 400;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.4);
    padding-top: 18px;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

@media (max-width: 980px) {
    .site-footer {
        padding: 100px 24px 20px;
    }
    .footer-shell {
        gap: 24px;
    }
    .footer-cta {
        font-size: clamp(34px, 5.4vw, 56px);
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 24px 0;
    }
    .footer-news {
        grid-column: span 2;
    }
    .footer-brand {
        font-size: clamp(64px, 16vw, 140px);
    }
}

@media (max-width: 640px) {
    .site-footer {
        padding: 72px 18px 16px;
    }
    .footer-shell {
        gap: 18px;
    }
    .footer-top {
        flex-direction: column;
        gap: 18px;
    }
    .footer-cta {
        font-size: clamp(28px, 8vw, 40px);
        max-width: none;
    }
    .footer-contact {
        text-align: left;
        font-size: 13px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        padding: 18px 0;
    }
    .footer-news {
        grid-column: span 2;
    }
    .footer-news p {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .footer-news-form input {
        font-size: 13px;
        padding: 6px 12px;
    }
    .footer-news-form button {
        font-size: 12px;
        padding: 6px 12px;
    }
    .footer-col h4 {
        font-size: 11px;
    }
    .footer-col a {
        font-size: 14px;
    }
    .footer-brand {
        font-size: clamp(48px, 18vw, 96px);
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        font-size: 11px;
        padding-top: 12px;
        gap: 6px;
    }
}

@media (max-height: 720px) {
    .site-footer {
        padding-top: 64px;
    }
    .footer-shell {
        gap: 14px;
    }
    .footer-brand {
        font-size: clamp(48px, 12vw, 110px);
    }
}

 /* blur container */



 .framer-blur {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 220px;
     pointer-events: none;
     z-index: 997;
     transition: opacity 0.35s ease;
 }
 .framer-blur.is-over-footer {
     opacity: 0;
 }

 .blur-wrap {
     position: absolute;
     inset: 0;
     overflow: hidden;
 }

 .blur-layer {
     position: absolute;
     inset: 0;
     opacity: 1;
     border-radius: 0;
     pointer-events: none;
     will-change: auto;
     background: rgba(255, 255, 255, 0.01);
 }

 /* layers */

 .l1 {
     z-index: 1;
     backdrop-filter: blur(0.0546875px);
     -webkit-backdrop-filter: blur(0.0546875px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
 }

 .l2 {
     z-index: 2;
     backdrop-filter: blur(0.109375px);
     -webkit-backdrop-filter: blur(0.109375px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
 }

 .l3 {
     z-index: 3;
     backdrop-filter: blur(0.21875px);
     -webkit-backdrop-filter: blur(0.21875px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
 }

 .l4 {
     z-index: 4;
     backdrop-filter: blur(0.4375px);
     -webkit-backdrop-filter: blur(0.4375px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
 }

 .l5 {
     z-index: 5;
     backdrop-filter: blur(0.875px);
     -webkit-backdrop-filter: blur(0.875px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
 }

 .l6 {
     z-index: 6;
     backdrop-filter: blur(1.75px);
     -webkit-backdrop-filter: blur(1.75px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
 }

 .l7 {
     z-index: 7;
     backdrop-filter: blur(3.5px);
     -webkit-backdrop-filter: blur(3.5px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
 }

 .l8 {
     z-index: 8;
     backdrop-filter: blur(7px);
     -webkit-backdrop-filter: blur(7px);
     mask-image: linear-gradient(rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
     -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
 }