/*==================================================
  LB-Productions 2026
  Webdesign & Grafisch Ontwerp
==================================================*/


/*==================================================
  1. ROOT
==================================================*/

:root{

    --primary:#eb2f8c;
    --primary-light:#ff5ba9;
    --primary-dark:#c91f72;

    --dark:#1b1b1f;
    --dark-light:#2a2a31;
    --dark-soft:#373740;

    --white:#ffffff;
    --light:#f7f8fa;
    --light-soft:#f0f1f4;

    --text:#2d2d33;
    --gray:#73737d;
    --gray-light:#a7a7b0;

    --border:#e7e7ec;

    --success:#2f9e68;
    --warning:#d99524;
    --danger:#c94646;

    --font-heading:'Bebas Neue',sans-serif;
    --font-body:'Inter',sans-serif;

    --container:1280px;
    --container-small:920px;

    --radius-small:10px;
    --radius:18px;
    --radius-large:30px;
    --radius-round:999px;

    --shadow-small:0 8px 24px rgba(0,0,0,.06);
    --shadow:0 16px 50px rgba(0,0,0,.10);
    --shadow-large:0 24px 80px rgba(0,0,0,.16);

    --transition-fast:.2s ease;
    --transition:.35s ease;

    --header-height:88px;

}


/*==================================================
  2. RESET
==================================================*/

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:110px;
}

body{
    min-height:100vh;
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;
    color:var(--text);
    background:var(--white);
    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

img,
picture,
video,
canvas,
svg{
    display:block;
    max-width:100%;
}

img{
    height:auto;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    border:0;
    cursor:pointer;
}

ul,
ol{
    padding-left:1.2rem;
}

a{
    color:inherit;
    text-decoration:none;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

table{
    width:100%;
    border-collapse:collapse;
}

::selection{
    color:var(--white);
    background:var(--primary);
}


/*==================================================
  3. ACCESSIBILITY
==================================================*/

:focus-visible{
    outline:3px solid rgba(235,47,140,.35);
    outline-offset:4px;
}

.skip-link{
    position:fixed;
    top:12px;
    left:12px;
    z-index:9999;
    padding:12px 18px;
    color:var(--white);
    background:var(--dark);
    border-radius:var(--radius-small);
    transform:translateY(-150%);
}

.skip-link:focus{
    transform:translateY(0);
}


/*==================================================
  4. LAYOUT
==================================================*/

.container{
    width:min(100% - 40px,var(--container));
    margin-inline:auto;
}

.container-small{
    width:min(100% - 40px,var(--container-small));
    margin-inline:auto;
}

.section{
    position:relative;
    padding:110px 0;
}

.section-small{
    padding:70px 0;
}

.section-light{
    background:var(--light);
}

.section-dark{
    color:var(--white);
    background:var(--dark);
}

.section-primary{
    color:var(--white);
    background:var(--primary);
}

.section-header{
    max-width:760px;
    margin-bottom:52px;
}

.section-header.center{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
}

.grid{
    display:grid;
    gap:28px;
}

.grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.align-center{
    align-items:center;
}

.text-center{
    text-align:center;
}

.stack{
    display:flex;
    flex-direction:column;
    gap:20px;
}


/*==================================================
  5. TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--dark);
    font-family:var(--font-heading);
    font-weight:400;
    line-height:.98;
    letter-spacing:.02em;
    text-wrap:balance;
}

h1{
    font-size:clamp(4rem,9vw,8.5rem);
}

h2{
    font-size:clamp(3rem,6vw,5.5rem);
}

h3{
    font-size:clamp(2rem,3vw,3rem);
}

h4{
    font-size:1.9rem;
}

h5{
    font-size:1.55rem;
}

h6{
    font-size:1.25rem;
}

p{
    margin-bottom:1.2em;
}

p:last-child{
    margin-bottom:0;
}

.lead{
    max-width:760px;
    font-size:clamp(1.1rem,2vw,1.35rem);
    line-height:1.8;
    color:var(--gray);
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    color:var(--primary);
    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.eyebrow::before{
    width:34px;
    height:2px;
    content:'';
    background:currentColor;
}

.text-primary{
    color:var(--primary);
}

.text-muted{
    color:var(--gray);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6{
    color:var(--white);
}

.section-dark .lead,
.section-dark .text-muted{
    color:rgba(255,255,255,.68);
}


/*==================================================
  6. BUTTONS
==================================================*/

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:14px 24px;
    color:var(--white);
    font-size:.9rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:var(--primary);
    border:2px solid var(--primary);
    border-radius:var(--radius-round);
    box-shadow:0 12px 30px rgba(235,47,140,.24);
}

.button:hover{
    color:var(--white);
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(235,47,140,.32);
}

.button-secondary{
    color:var(--dark);
    background:var(--white);
    border-color:var(--white);
    box-shadow:none;
}

.button-secondary:hover{
    color:var(--white);
    background:var(--primary);
    border-color:var(--primary);
}

.button-outline{
    color:var(--dark);
    background:transparent;
    border-color:var(--dark);
    box-shadow:none;
}

.button-outline:hover{
    color:var(--white);
    background:var(--dark);
    border-color:var(--dark);
}

.button-light-outline{
    color:var(--white);
    background:transparent;
    border-color:rgba(255,255,255,.45);
    box-shadow:none;
}

.button-light-outline:hover{
    color:var(--dark);
    background:var(--white);
    border-color:var(--white);
}

.button-small{
    min-height:44px;
    padding:11px 20px;
    font-size:.78rem;
}

.button-large{
    min-height:60px;
    padding:18px 30px;
}

.button-group{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}


/*==================================================
  7. CARDS
==================================================*/

.card{
    position:relative;
    overflow:hidden;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-small);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.card:hover{
    border-color:rgba(235,47,140,.25);
    transform:translateY(-7px);
    box-shadow:var(--shadow);
}

.card-content{
    padding:30px;
}

.card-image{
    position:relative;
    overflow:hidden;
    aspect-ratio:4/3;
    background:var(--light-soft);
}

.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.card:hover .card-image img{
    transform:scale(1.045);
}

.card-label{
    display:inline-block;
    margin-bottom:12px;
    color:var(--primary);
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.card-title{
    margin-bottom:12px;
}

.card-text{
    color:var(--gray);
}

.card-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:22px;
    color:var(--primary);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.card-link::after{
    content:'→';
    transition:transform var(--transition-fast);
}

.card-link:hover::after{
    transform:translateX(5px);
}


/*==================================================
  8. HEADER
==================================================*/

.site-header{
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:100%;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid transparent;
    backdrop-filter:blur(16px);
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.site-header.scrolled{
    border-color:var(--border);
    box-shadow:0 8px 28px rgba(0,0,0,.06);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:94px;
    gap:30px;
}

.site-logo{
    position:relative;
    z-index:1002;
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.site-logo img{
    width:auto;
    max-width:220px;
    max-height:72px;
}

.main-nav{
    display:flex;
    align-items:center;
    margin-left:auto;
}

.main-nav ul{
    display:flex;
    align-items:center;
    gap:30px;
    margin:0;
    padding:0;
    list-style:none;
}

.main-nav a{
    position:relative;
    display:block;
    padding:8px 0;
    color:var(--dark);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.main-nav a::after{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:2px;
    content:'';
    background:var(--primary);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform var(--transition);
}

.main-nav a:hover,
.main-nav a.active{
    color:var(--primary);
}

.main-nav a:hover::after,
.main-nav a.active::after{
    transform:scaleX(1);
    transform-origin:left;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-toggle{
    position:relative;
    z-index:1001;
    display:none;
    width:46px;
    height:46px;
    align-items:center;
    justify-content:center;
    background:var(--dark);
    border-radius:50%;
}

.menu-toggle span{
    position:absolute;
    width:20px;
    height:2px;
    background:var(--white);
    transition:var(--transition);
}

.menu-toggle span:nth-child(1){
    transform:translateY(-6px);
}

.menu-toggle span:nth-child(3){
    transform:translateY(6px);
}

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg);
}


/*==================================================
  9. HERO
==================================================*/

.hero{
    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:100svh;
    padding:calc(var(--header-height) + 70px) 0 90px;
    overflow:hidden;
    color:var(--white);
    background:var(--dark);
}

.hero-background{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-background img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.hero-background::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(18,18,22,.78) 0%,
            rgba(18,18,22,.58) 22%,
            rgba(18,18,22,.28) 48%,
            rgba(18,18,22,.08) 72%,
            rgba(18,18,22,0) 100%
        );
}
.hero-content{
    position:relative;
    z-index:2;
    max-width:850px;
}

.hero h1{
    color:var(--white);
    margin-bottom:24px;
}

.hero .lead{
    max-width:680px;
    color:rgba(255,255,255,.78);
}

.hero .button-group{
    margin-top:34px;
}

.hero-scroll{
    position:absolute;
    right:40px;
    bottom:36px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(255,255,255,.7);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    transform:rotate(90deg);
    transform-origin:right center;
}

.hero-scroll::after{
    width:52px;
    height:1px;
    content:'';
    background:rgba(255,255,255,.5);
}


/*==================================================
  10. INTRO
==================================================*/

.intro-grid{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:80px;
    align-items:start;
}

.intro-large{
    font-size:clamp(1.65rem,3vw,2.6rem);
    line-height:1.35;
    color:var(--dark);
    font-weight:500;
}


/*==================================================
  11. SERVICES
==================================================*/

.service-card{
    height:100%;
}

.service-number{
    display:block;
    margin-bottom:24px;
    color:var(--primary);
    font-family:var(--font-heading);
    font-size:2rem;
    line-height:1;
}

.service-card h3{
    margin-bottom:16px;
}

.service-card p{
    color:var(--gray);
}


/*==================================================
  12. PORTFOLIO
==================================================*/

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:26px;
}
.portfolio-preview-footer{
    display:flex;
    justify-content:center;
    margin-top:60px;
}

.portfolio-item{
    position:relative;
    grid-column:span 4;
    min-height:430px;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--dark);

    color:inherit;
    text-decoration:none;
}

.portfolio-item:visited{
    color:inherit;
}

.portfolio-item.large{
    grid-column:span 8;
}

.portfolio-item.tall{
    min-height:600px;
}

.portfolio-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.portfolio-item::after{
    position:absolute;
    inset:0;
    content:'';
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 28%,
            rgba(0,0,0,.78) 100%
        );
}

.portfolio-item:hover img{
    transform:scale(1.055);
}

.portfolio-content{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:2;
    padding:30px;
    color:var(--white);
}

.portfolio-content h3{
    margin-bottom:8px;
    color:var(--white);
	color:var(--white);
    font-size:clamp(2rem,3.2vw,4.4rem);
    line-height:.95;
    overflow-wrap:anywhere;
}

.portfolio-content p{
    margin:6px 0 0;
    color:rgba(255,255,255,.85);
    font-size:.82rem;
    line-height:1.3;
}

.portfolio-category{
    display:inline-block;
    margin-bottom:10px;
    color:var(--primary-light);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
/* Gefilterde portfolio: twee nette kolommen */
.portfolio-grid.is-filtered{
    grid-auto-flow:row dense;
}

.portfolio-grid.is-filtered .portfolio-item,
.portfolio-grid.is-filtered .portfolio-item.large,
.portfolio-grid.is-filtered .portfolio-text-card,
.portfolio-grid.is-filtered .portfolio-text-card.large{
    grid-column:span 6;
    min-height:460px;
}

/*==================================================
  13. PORTFOLIO PAGE
==================================================*/

.page-hero{
    padding:150px 0 90px;
    background:var(--light);
}

.page-hero-content{
    max-width:820px;
}

.page-hero h1{
    margin-bottom:20px;
    font-size:clamp(4rem,9vw,8rem);
    line-height:.88;
}

.page-hero p{
    max-width:720px;
    margin:0;
    font-size:clamp(1.1rem,2vw,1.4rem);
    color:var(--text-light);
}

.portfolio-page{
    padding-top:70px;
}

.portfolio-filter{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:52px;
}

.portfolio-filter-button{
    padding:12px 20px;
    border:1px solid var(--dark);
    border-radius:999px;
    background:transparent;
    color:var(--dark);
    font-family:inherit;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}
.page-hero-portfolio{
    padding:150px 0 85px;
    background:var(--light);
}

.page-hero-grid{
    display:grid;
    grid-template-columns:
        minmax(0,.9fr)
        minmax(420px,1.1fr);

    gap:72px;
    align-items:end;
}

.page-hero-portfolio .eyebrow{
    margin:0 0 20px -20px;
}

.page-hero-portfolio h1{
    margin:0 0 0 -20px;

    font-size:clamp(3.1rem,6vw,5.5rem);
    line-height:.95;
    letter-spacing:-.035em;
}

.page-hero-portfolio .page-intro{
    max-width:650px;
    margin:0;

    align-self:end;
    padding-bottom:7px;

    color:var(--text-light);

    font-size:clamp(1.05rem,1.6vw,1.22rem);
    line-height:1.75;
}

.portfolio-filter-button:hover,
.portfolio-filter-button.is-active{
    border-color:var(--primary);
    background:var(--primary);
    color:var(--white);
}

.portfolio-grid-full .portfolio-item{
    min-height:460px;
}

.portfolio-grid-full .portfolio-item.large{
    min-height:520px;
}

.portfolio-grid-full .portfolio-item.tall{
    min-height:680px;
}

.portfolio-grid-full .portfolio-content h2{
    margin-bottom:8px;
    color:var(--white);
	    font-size:clamp(2rem,3.2vw,4.4rem);
    line-height:.95;
    overflow-wrap:anywhere;
}

.filter-item.is-hidden{
    display:none !important;
}

.portfolio-contact{
    padding-top:40px;
}

.portfolio-contact-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:70px;
    border-radius:var(--radius);
    background:var(--dark);
    color:var(--white);
}

.portfolio-contact-box h2{
    max-width:760px;
    margin:0;
    color:var(--white);
}
.portfolio-text-card{
    grid-column:span 4;
    min-height:430px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:42px;
    border-radius:var(--radius);
    background:var(--light);
}

.portfolio-text-card.large{
    grid-column:span 8;
}

.portfolio-text-card h2{
    max-width:760px;
    margin-bottom:18px;
    font-size:clamp(2rem,4vw,4.8rem);
    line-height:.95;
}

.portfolio-text-card p{
    max-width:620px;
    margin:0;
    color:var(--text-light);
}
.portfolio-text-card:not(.large) h2{
    font-size:clamp(2rem,2.4vw,3.6rem);
    line-height:.95;
}

/* ----------------------------- */
/* Portfolio Slider              */
/* ----------------------------- */

.portfolio-slider{
    position:relative;
    overflow:hidden;
}

.portfolio-slides{
    position:absolute;
    inset:0;
}

.portfolio-slide{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity .5s ease;
}

.portfolio-slide.active{
    opacity:1;
}

.portfolio-prev,
.portfolio-next{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:46px;
    height:46px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,.35);

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:.25s;

    z-index:10;

    opacity:0;
}

.portfolio-slider:hover .portfolio-prev,
.portfolio-slider:hover .portfolio-next{

    opacity:1;

}

.portfolio-prev{

    left:18px;

}

.portfolio-next{

    right:18px;

}

.portfolio-prev:hover,
.portfolio-next:hover{

    background:var(--accent);

}

/*==================================================
  PORTFOLIO IMAGE SLIDER
==================================================*/

.portfolio-slider{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.portfolio-slides{
    position:absolute;
    inset:0;
}

.portfolio-slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    opacity:0;
    transform:scale(1.03);

    transition:
        opacity 1s ease,
        transform 6s ease;
}

.portfolio-slide.active{
    opacity:1;
    transform:scale(1);
}

.portfolio-slider .portfolio-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
}

.portfolio-slider .portfolio-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(18,18,22,0) 35%,
            rgba(18,18,22,.35) 60%,
            rgba(18,18,22,.92) 100%
        );
}

.portfolio-dots{
    position:absolute;
    right:28px;
    bottom:28px;
    z-index:4;

    display:flex;
    gap:7px;
}

.portfolio-dots button{
    width:8px;
    height:8px;
    padding:0;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.45);
    cursor:pointer;

    transition:
        width .25s ease,
        background .25s ease;
}

.portfolio-dots button.active{
    width:22px;
    border-radius:999px;
    background:var(--accent);
}
/*==================================================
  13. ABOUT / PERSONAL
==================================================*/

.about-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:70px;
    align-items:center;
}

.about-image{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-large);
    box-shadow:var(--shadow-large);
}

.about-image img{
    width:100%;
    min-height:600px;
    object-fit:cover;
}

.about-image::before{
    position:absolute;
    top:28px;
    right:28px;
    bottom:28px;
    left:28px;
    z-index:2;
    content:'';
    border:1px solid rgba(255,255,255,.45);
    border-radius:calc(var(--radius-large) - 12px);
    pointer-events:none;
}

.check-list{
    display:grid;
    gap:14px;
    margin:28px 0 0;
    padding:0;
    list-style:none;
}


.check-list li{
    position:relative;
    padding-left:30px;
}

.check-list li::before{
    position:absolute;
    top:0;
    left:0;
    color:var(--primary);
    font-weight:800;
    content:'✓';
}


/*==================================================
  14. PROCESS
==================================================*/

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    counter-reset:process;
}

.process-item{
    position:relative;
    padding:34px 28px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    counter-increment:process;
}

.process-item::before{
    display:block;
    margin-bottom:26px;
    color:var(--primary);
    font-family:var(--font-heading);
    font-size:3.2rem;
    line-height:1;
    content:'0' counter(process);
}

.process-item h3{
    margin-bottom:12px;
}

.process-item p{
    color:var(--gray);
}


/*==================================================
  15. CALL TO ACTION
==================================================*/

.cta{
    position:relative;
    overflow:hidden;
    padding:80px;
    color:var(--white);
    background:
        linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius:var(--radius-large);
    box-shadow:var(--shadow-large);
}

.cta::after{
    position:absolute;
    top:-130px;
    right:-100px;
    width:360px;
    height:360px;
    content:'';
    border:70px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.cta-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.cta h2{
    max-width:720px;
    color:var(--white);
}

.cta p{
    max-width:680px;
    color:rgba(255,255,255,.82);
}


/*==================================================
  16. FORMS
==================================================*/

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.form-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-field.full{
    grid-column:1/-1;
}

label{
    color:var(--dark);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

input,
textarea,
select{
    width:100%;
    color:var(--text);
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-small);
    outline:none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

input,
select{
    min-height:54px;
    padding:0 16px;
}

textarea{
    min-height:180px;
    padding:16px;
    resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(235,47,140,.10);
}

.form-note{
    color:var(--gray);
    font-size:.84rem;
}


/*==================================================
  17. CONTACT
==================================================*/

.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:70px;
}

.contact-list{
    display:grid;
    gap:18px;
    margin-top:34px;
    padding:0;
    list-style:none;
}

.contact-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.contact-list strong{
    display:block;
    color:var(--dark);
}

.contact-list span,
.contact-list a{
    color:var(--gray);
}

.contact-list a:hover{
    color:var(--primary);
}


/*==================================================
  18. FOOTER
==================================================*/

/*==================================================
  FOOTER
==================================================*/

.site-footer{
    margin-top:90px;
    padding:70px 0 28px;

    background:#f4f4f6;
    color:#252329;
}

.site-footer .container{
    width:min(calc(100% - 48px),1240px);
    margin:0 auto;
}

.footer-main{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) .7fr .8fr;

    gap:70px;
    align-items:start;

    padding-bottom:55px;
}

.footer-brand{
    max-width:420px;
}

.footer-logo{
    display:inline-block;
    margin-bottom:6px;
}

.footer-logo img{
    display:block;
    width:190px;
    height:auto;
}

.footer-tagline{
    margin-top:12px;
    margin-bottom:0;

    color:#66616a;

    font-size:1.05rem;
    line-height:1.45;
}

.footer-tagline span{
    display:block;

    margin-bottom:2px;

    color:var(--dark);

    font-weight:700;
}
.footer-navigation{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}

/* Navigatie */

.footer-navigation a{
    color:#252329;

    text-decoration:none;

    font-size:.88rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;

    transition:color .2s ease;
}

/* Contact */

.footer-contact a{
    color:#252329;

    text-decoration:none;

    font-size:.88rem;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;

    transition:color .2s ease;
}

.footer-navigation a:hover,
.footer-contact a:hover,
.footer-bottom-links a:hover{
    color:#ef2b8f;
}

.footer-contact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}

.footer-label{
    margin-bottom:4px;

    color:#ef2b8f;

    font-size:.76rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    padding-top:24px;

    border-top:1px solid #dedce1;
}

.footer-bottom p{
    margin:0;

    color:#77727a;

    font-size:.78rem;
}

.footer-bottom-links{
    display:flex;
    gap:22px;
}

.footer-bottom-links a{
    color:#77727a;

    text-decoration:none;

    font-size:.78rem;

    transition:color .2s ease;
}
.footer-privacy{
    color:#77727a;
    text-decoration:none;
    font-size:.78rem;
    transition:color .2s ease;
}

.footer-privacy:hover{
    color:#ef2b8f;
}

}


/*==================================================
  19. UTILITIES
==================================================*/

.hidden{
    display:none !important;
}

.visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.spacer-top{
    margin-top:40px;
}

.spacer-bottom{
    margin-bottom:40px;
}

.rounded{
    border-radius:var(--radius);
}

.shadow{
    box-shadow:var(--shadow);
}


/*==================================================
  20. SIMPLE ANIMATIONS
==================================================*/

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.reveal.visible{
    opacity:1;
    transform:none;
}

@keyframes float{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

.float-animation{
    animation:float 4s ease-in-out infinite;
}


/*==================================================
  21. RESPONSIVE
==================================================*/

@media (max-width:1100px){

    :root{
        --header-height:80px;
    }

    .grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .process-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .portfolio-item{
        grid-column:span 6;
    }

    .portfolio-item.large{
        grid-column:span 6;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .main-nav ul{
        gap:20px;
    }

    .header-actions .button{
        display:none;
    }

}


@media (max-width:900px){

    .section{
        padding:90px 0;
    }

    .grid-3{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .intro-grid,
    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-image img{
        min-height:480px;
    }

    .cta{
        padding:60px 44px;
    }

    .cta-inner{
        align-items:flex-start;
        flex-direction:column;
        gap:30px;
    }

    .menu-toggle{
        display:flex;
    }

    .main-nav{
        position:fixed;
        top:0;
        right:0;
        z-index:1001;
        display:flex;
        width:min(88vw,420px);
        height:100svh;
        padding:120px 40px 50px;
        align-items:flex-start;
        background:var(--white);
        box-shadow:-20px 0 60px rgba(0,0,0,.18);
        transform:translateX(110%);
        transition:transform var(--transition);
    }

    .main-nav.open{
        transform:translateX(0);
    }

    .main-nav ul{
        width:100%;
        align-items:stretch;
        flex-direction:column;
        gap:0;
    }

    .main-nav li{
        border-bottom:1px solid var(--border);
    }

    .main-nav a{
        padding:18px 0;
        font-size:1rem;
    }

    .main-nav a::after{
        display:none;
    }

    .header-actions{
        margin-left:auto;
    }

    .page-hero{
        padding:120px 0 70px;
    }

    .portfolio-grid-full .portfolio-item,
    .portfolio-grid-full .portfolio-item.large,
    .portfolio-grid-full .portfolio-item.tall{
        min-height:480px;
    }

    .portfolio-contact-box{
        align-items:flex-start;
        flex-direction:column;
        padding:50px;
    }
	
	 .portfolio-grid,
    .portfolio-grid-full{
        grid-template-columns:1fr;
        gap:22px;
    }

    .portfolio-item,
    .portfolio-item.large,
    .portfolio-item.tall,
    .portfolio-text-card,
    .portfolio-text-card.large{
        grid-column:1 / -1;
        width:100%;
        min-width:0;
    }

    .portfolio-item,
    .portfolio-item.large,
    .portfolio-item.tall,
    .portfolio-grid-full .portfolio-item,
    .portfolio-grid-full .portfolio-item.large,
    .portfolio-grid-full .portfolio-item.tall{
        min-height:420px;
    }

    .portfolio-text-card{
        min-height:auto;
        padding:42px 32px;
    }

    .portfolio-content h2,
    .portfolio-content h3,
    .portfolio-item:not(.large) .portfolio-content h2,
    .portfolio-item:not(.large) .portfolio-content h3{
        font-size:clamp(2.2rem,10vw,3.6rem);
        line-height:.95;
        overflow-wrap:normal;
        word-break:normal;
    }    
	.section{
        padding:72px 0;
    }

    .intro-grid,
    .about-grid,
    .contact-grid{
        gap:38px;
    }

    .page-hero{
        padding:95px 0 55px;
    }

    .portfolio-contact-box{
        padding:42px;
    }
	 .footer-main{
        grid-template-columns:1fr 1fr;
    }

    .footer-brand{
        grid-column:1 / -1;
    }
	.page-hero-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

}

@media (max-width:700px){

    :root{
        --header-height:72px;
        --radius:16px;
        --radius-large:22px;
    }

    body{
        font-size:15px;
    }

    .container,
    .container-small{
        width:min(100% - 30px,var(--container));
    }

    .section{
        padding:72px 0;
    }

    .section-small{
        padding:54px 0;
    }

    .section-header{
        margin-bottom:36px;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .form-grid,
    .process-grid{
        grid-template-columns:1fr;
    }

    .hero{
        min-height:850px;
        padding:
            calc(var(--header-height) + 60px)
            0
            60px;
    }

    .hero-background::after{
        background:
            linear-gradient(
                180deg,
                rgba(18,18,22,.38) 0%,
                rgba(18,18,22,.90) 72%,
                rgba(18,18,22,.96) 100%
            );
    }

    .hero-scroll{
        display:none;
    }

    .button-group{
        align-items:stretch;
        flex-direction:column;
    }

    .button-group .button{
        width:100%;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
    }

    .portfolio-item,
    .portfolio-item.large{
        grid-column:auto;
        min-height:420px;
    }

    .portfolio-item.tall{
        min-height:500px;
    }

    .about-image img{
        min-height:400px;
    }

    .cta{
        padding:42px 26px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .footer-bottom{
		align-items:flex-start;
        flex-direction:column;
        gap:22px;

        padding-top:24px;
    }
	.footer-bottom p{
    margin:0;
    text-align:center;
}
	.footer-grid{
        gap:28px;
    }
	    .site-footer{
        padding:28px 0 24px;
    }

    .site-logo img{
        max-width:175px;
        max-height:48px;
    }
	.footer-bottom-links{
    width:100%;
    display:flex;
    justify-content:center;
    gap:24px;
}

    .page-hero{
        padding:100px 0 55px;
    }

    .portfolio-page{
        padding-top:50px;
    }

    .portfolio-filter{
        gap:8px;
        margin-bottom:36px;
    }

    .portfolio-filter-button{
        padding:10px 15px;
        font-size:.7rem;
    }

    .portfolio-grid-full .portfolio-item,
    .portfolio-grid-full .portfolio-item.large,
    .portfolio-grid-full .portfolio-item.tall{
        min-height:390px;
    }

    .portfolio-contact-box{
        padding:36px 28px;
    }
	    .section{
        padding:52px 0;
    }

    .section-small{
        padding:40px 0;
    }

    .section-header{
        margin-bottom:28px;
    }

    /* Homepage hero minder hoog */
    .hero{
        min-height:700px;
        padding:
            calc(var(--header-height) + 38px)
            0
            38px;
    }

    /* Portfolio-pagina intro compacter */
    .page-hero{
        padding:72px 0 42px;
    }

    .portfolio-page{
        padding-top:32px;
    }

    .portfolio-filter{
        gap:8px;
        margin-bottom:28px;
    }

    /* Portfolio kaarten dichter bij elkaar */
    .portfolio-grid,
    .portfolio-grid-full{
        gap:16px;
    }

    .portfolio-item,
    .portfolio-item.large,
    .portfolio-grid-full .portfolio-item,
    .portfolio-grid-full .portfolio-item.large,
    .portfolio-grid-full .portfolio-item.tall{
        min-height:350px;
    }

    .portfolio-item.tall{
        min-height:430px;
    }

    .portfolio-content{
        padding:24px;
    }

    .portfolio-text-card{
        padding:30px 26px;
    }

    /* Blokken onder elkaar minder ver uit elkaar */
    .intro-grid,
    .about-grid,
    .contact-grid{
        gap:32px;
    }

    .cta{
        padding:36px 26px;
    }

    .cta-inner{
        gap:22px;
    }
	.portfolio-grid.is-filtered .portfolio-item,
    .portfolio-grid.is-filtered .portfolio-item.large,
    .portfolio-grid.is-filtered .portfolio-text-card,
    .portfolio-grid.is-filtered .portfolio-text-card.large{
        grid-column:1 / -1;
        min-height:auto;
    }

    .portfolio-grid.is-filtered .portfolio-item{
        min-height:430px;
    }
.page-hero-portfolio{
        padding:65px 0 50px;
    }

    .page-hero-portfolio .eyebrow,
    .page-hero-portfolio h1{
        margin-left:0;
    }

    .page-hero-portfolio .page-intro{
        max-width:none;
        padding-bottom:0;
        align-self:auto;
    }
}

@media (max-width:600px){

    .portfolio-grid,
    .portfolio-grid-full{
        gap:18px;
    }

    .portfolio-item,
    .portfolio-item.large,
    .portfolio-item.tall,
    .portfolio-grid-full .portfolio-item,
    .portfolio-grid-full .portfolio-item.large,
    .portfolio-grid-full .portfolio-item.tall{
        min-height:360px;
    }

    .portfolio-content{
        padding:26px;
    }

    .portfolio-text-card{
        padding:36px 26px;
    }

    .portfolio-text-card h2,
    .portfolio-text-card:not(.large) h2{
        font-size:clamp(2.25rem,11vw,3.4rem);
        line-height:.96;
    }    
	.portfolio-grid,
    .portfolio-grid-full{
        gap:14px;
    }

    .portfolio-item,
    .portfolio-item.large,
    .portfolio-item.tall,
    .portfolio-grid-full .portfolio-item,
    .portfolio-grid-full .portfolio-item.large,
    .portfolio-grid-full .portfolio-item.tall{
        min-height:330px;
    }

    .portfolio-content{
        padding:22px;
    }

    .portfolio-text-card{
        padding:28px 22px;
    }
	    .site-footer{
        margin-top:65px;
        padding:50px 0 24px;
    }

    .site-footer .container{
        width:min(calc(100% - 30px),1240px);
    }

    .footer-main{
        grid-template-columns:1fr;

        gap:38px;

        padding-bottom:42px;
    }

    .footer-brand{
        grid-column:auto;
    }

    .footer-logo img{
        width:190px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;

        gap:16px;
    }

}

@media (max-width:420px){

    .container,
    .container-small{
        width:min(100% - 24px,var(--container));
    }

    h1{
        font-size:3.7rem;
    }

    h2{
        font-size:3rem;
    }

    .card-content{
        padding:24px;
    }

    .portfolio-content{
        padding:24px;
    }

    .main-nav{
        width:100%;
    } 
	.hero{
        min-height:660px;
    }

    .section{
        padding:46px 0;
    }

    .section-small{
        padding:36px 0;
    }

    .page-hero{
        padding:64px 0 36px;
    }

    .portfolio-page{
        padding-top:26px;
    }
	.site-footer{
        padding:34px 0 22px;
    }


}


/*==================================================
  22. REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}