:root{--cream:#f8f2e7;--yellow:#f6aa00;--blue:#174b68;--brown:#2b190f;--ink:#15130f;--muted:#77756e}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif}a{color:inherit}
.topbar{height:82px;background:#fbf6ec;position:relative;z-index:20}
.nav-shell{height:82px;width:min(1340px,88%);margin:auto;display:grid;grid-template-columns:180px 1fr 230px;align-items:center}
.logo{width:168px;height:118px;position:relative;top:13px;z-index:30;display:block;overflow:hidden;border-radius:50%;filter:drop-shadow(0 2px 1px rgba(0,0,0,.12))}
.logo img{width:100%;height:100%;object-fit:cover;object-position:center}
.navlinks{display:flex;justify-content:center;gap:45px;height:100%;align-items:center}.navlinks a{text-decoration:none;font:17px Georgia,serif;position:relative}
.navlinks .active:after{content:"";position:absolute;left:-6px;right:-6px;bottom:-13px;height:6px;background:var(--yellow);border-radius:50%;transform:rotate(-2deg)}
.top-cta,.button{background:var(--yellow);text-decoration:none;border-radius:22px;font:16px Georgia,serif}.top-cta{justify-self:end;padding:12px 26px;position:relative}.top-cta:before,.top-cta:after{content:"";position:absolute;width:11px;height:2px;background:#111;top:50%}.top-cta:before{left:-22px;box-shadow:4px -12px 0 #111,4px 12px 0 #111;transform:rotate(12deg)}.top-cta:after{right:-22px;box-shadow:-4px -12px 0 #111,-4px 12px 0 #111;transform:rotate(-12deg)}
.hero{height:458px;position:relative;overflow:hidden;background:#222}.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,25,13,.98) 0%,rgba(43,25,13,.94) 18%,rgba(43,25,13,.76) 27%,rgba(43,25,13,.35) 37%,rgba(43,25,13,.05) 51%,transparent 63%)}
.hero-content{position:relative;height:100%;width:min(1320px,86%);margin:auto}.hero-copy{height:100%;width:390px;display:flex;flex-direction:column;justify-content:center;color:white;padding-top:8px}
.eyebrow{font:700 12px Arial,sans-serif;letter-spacing:.18em;display:flex;align-items:center;gap:14px}.eyebrow span{width:55px;height:5px;background:var(--yellow);border-radius:50%;transform:rotate(-4deg)}
.hero h1{font:400 67px/.96 Georgia,serif;letter-spacing:-.045em;margin:15px 0 0}.paintline{width:132px;height:8px;background:var(--yellow);border-radius:50%;margin:14px 0 20px;transform:rotate(-2deg)}
.hero p{font:18px/1.48 Georgia,serif;margin:0 0 18px}.button{align-self:flex-start;padding:10px 23px;color:#15120c}
.handnote{position:absolute;right:0;top:78px;color:white;text-align:center;font:27px/1.08 "Segoe Print","Bradley Hand",cursive;transform:rotate(-6deg);text-shadow:0 2px 3px #333}.handnote i{display:block;width:130px;height:8px;background:var(--yellow);border-radius:50%;margin:9px auto;transform:rotate(-4deg)}.handnote span{display:block;font-size:61px;margin:4px 0 0 -85px;transform:rotate(10deg)}
.rough-edge{position:absolute;z-index:8;bottom:-1px;left:-1%;width:102%;height:22px;background:var(--cream);clip-path:polygon(0 70%,3% 37%,7% 66%,11% 43%,15% 72%,20% 39%,25% 67%,30% 45%,35% 71%,40% 39%,45% 68%,50% 45%,55% 72%,60% 40%,65% 69%,70% 43%,75% 72%,80% 39%,85% 68%,90% 45%,95% 70%,100% 42%,100% 100%,0 100%)}
.services{min-height:484px;padding:22px 0 42px;background:radial-gradient(circle at 40% 0,rgba(255,255,255,.8),transparent 35%),var(--cream)}
.services-shell{width:min(1360px,89%);margin:auto}.services-title{margin-left:22px;margin-bottom:18px}.services-title>div{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.17em}.services-title h2{font:400 44px/1.06 Georgia,serif;margin:4px 0 0}.services-title i{display:block;width:66px;height:6px;background:var(--yellow);border-radius:50%;margin-top:5px;transform:rotate(-3deg)}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px;align-items:stretch}.card{background:#fbf7ef;min-width:0;position:relative;box-shadow:2px 4px 12px rgba(58,40,22,.06)}.card>img{width:100%;height:145px;object-fit:cover}.card-copy{padding:0 15px 14px}.card-head{display:flex;gap:10px;align-items:flex-start;margin-top:-13px}.card-head span{flex:0 0 49px;width:49px;height:49px;display:flex;align-items:center;justify-content:center;background:var(--yellow);border-radius:50% 45% 52% 47%;font:italic 18px Georgia,serif;transform:rotate(-5deg)}.card h3{font:400 18px/1.1 Georgia,serif;margin:18px 0 0}.card p{font:13px/1.46 Arial,sans-serif;color:var(--muted);margin:13px 0 7px}.card-copy>a:not(.qbutton){font-size:27px;text-decoration:none}
.question{background:var(--blue);color:white;padding-top:106px}.question .card-head{margin-top:0}.question h3,.question p{color:white}.cup{position:absolute;top:30px;left:0;right:0;text-align:center;font-size:46px}.qbutton{display:block;background:var(--yellow);color:#17130c;text-decoration:none;text-align:center;border-radius:19px;padding:9px 10px;margin-top:12px;font:14px Georgia,serif}.scribble{position:absolute;top:-82px;right:-3px;color:var(--blue);font:20px/1.15 "Segoe Print","Bradley Hand",cursive;transform:rotate(-5deg);white-space:nowrap}.scribble em{display:block;font-style:normal;font-size:42px;margin-left:-28px;line-height:.7}
.placeholder{padding:90px 8%;background:#fbf7ef}.placeholder h2{font:42px Georgia,serif;margin:0 0 10px}
@media(max-width:1050px){.navlinks{gap:18px}.cards{grid-template-columns:repeat(2,1fr)}.scribble{display:none}}
@media(max-width:760px){.nav-shell{width:90%;grid-template-columns:110px 1fr}.navlinks{display:none}.logo{width:112px;height:82px;top:7px}.top-cta{font-size:13px;padding:10px 14px}.hero{height:680px}.hero-img{object-position:62% center}.hero-shade{background:linear-gradient(0deg,rgba(43,25,13,.98),rgba(43,25,13,.88) 43%,rgba(43,25,13,.08) 78%)}.hero-copy{width:100%;justify-content:flex-end;padding-bottom:62px}.hero h1{font-size:54px}.handnote{display:none}.services-title{margin-left:0}.services-title h2{font-size:36px}.cards{grid-template-columns:1fr}.card>img{height:220px}}

/* HERO FIX — volledige Patrick + volledige auto zichtbaar */
.hero{
    height:458px;
    background:#302014;
}

.hero-img{
    object-fit:contain !important;
    object-position:center center !important;
    background:#302014;
}

/* HERO FIX — volledige Patrick + volledige auto zichtbaar */
.hero{
    height:458px;
    background:#302014;
}

.hero-img{
    object-fit:contain !important;
    object-position:center center !important;
    background:#302014;
}


/* DEFINITIEVE HERO IMAGE GEOMETRY */
.hero {
    position: relative !important;
    height: 458px !important;
    overflow: hidden !important;
    background: #302014 !important;
}

.hero-img {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 31% !important;
    width: 69% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-shade {
    z-index: 1 !important;
}

.hero-content {
    z-index: 2 !important;
}

/* ===== DIENSTEN — definitieve verfijning ===== */

.services {
    padding-top: 27px !important;
    padding-bottom: 70px !important;
}

.services-head {
    margin-bottom: 20px !important;
}

.services h2 {
    margin-top: 3px !important;
    margin-bottom: 8px !important;
    line-height: 1.02 !important;
}

.services-grid {
    gap: 16px !important;
    align-items: stretch !important;
}

.service-card {
    min-width: 0;
    overflow: visible;
}

.service-card img {
    width: 100% !important;
    height: 175px !important;
    object-fit: cover !important;
    display: block;
}

.service-body {
    padding: 0 15px 20px 15px !important;
}

.service-number {
    margin-top: -15px !important;
    margin-bottom: 6px !important;
    position: relative;
    z-index: 2;
}

.service-card h3 {
    font-size: 21px !important;
    line-height: 1.02 !important;
    margin: 0 0 11px !important;
}

.service-card p {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.service-card.question-card {
    min-height: 100% !important;
}

.question-card .service-body {
    padding: 24px 20px 25px !important;
}

.services-note {
    top: 20px !important;
}

/* ===== DIENSTEN — definitieve verfijning ===== */

.services {
    padding-top: 27px !important;
    padding-bottom: 70px !important;
}

.services-head {
    margin-bottom: 20px !important;
}

.services h2 {
    margin-top: 3px !important;
    margin-bottom: 8px !important;
    line-height: 1.02 !important;
}

.services-grid {
    gap: 16px !important;
    align-items: stretch !important;
}

.service-card {
    min-width: 0;
    overflow: visible;
}

.service-card img {
    width: 100% !important;
    height: 175px !important;
    object-fit: cover !important;
    display: block;
}

.service-body {
    padding: 0 15px 20px 15px !important;
}

.service-number {
    margin-top: -15px !important;
    margin-bottom: 6px !important;
    position: relative;
    z-index: 2;
}

.service-card h3 {
    font-size: 21px !important;
    line-height: 1.02 !important;
    margin: 0 0 11px !important;
}

.service-card p {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.service-card.question-card {
    min-height: 100% !important;
}

.question-card .service-body {
    padding: 24px 20px 25px !important;
}

.services-note {
    top: 20px !important;
}

/* ===== DIENSTEN — definitieve verfijning ===== */

.services {
    padding-top: 27px !important;
    padding-bottom: 70px !important;
}

.services-head {
    margin-bottom: 20px !important;
}

.services h2 {
    margin-top: 3px !important;
    margin-bottom: 8px !important;
    line-height: 1.02 !important;
}

.services-grid {
    gap: 16px !important;
    align-items: stretch !important;
}

.service-card {
    min-width: 0;
    overflow: visible;
}

.service-card img {
    width: 100% !important;
    height: 175px !important;
    object-fit: cover !important;
    display: block;
}

.service-body {
    padding: 0 15px 20px 15px !important;
}

.service-number {
    margin-top: -15px !important;
    margin-bottom: 6px !important;
    position: relative;
    z-index: 2;
}

.service-card h3 {
    font-size: 21px !important;
    line-height: 1.02 !important;
    margin: 0 0 11px !important;
}

.service-card p {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.service-card.question-card {
    min-height: 100% !important;
}

.question-card .service-body {
    padding: 24px 20px 25px !important;
}

.services-note {
    top: 20px !important;
}

/* =====================================================
   ATELIER TOL — COMPLETE ONDERKANT
   ===================================================== */

.section-inner {
    width: min(1260px, calc(100% - 80px));
    margin: 0 auto;
}

.section-kicker {
    color: #145a79;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.light-kicker {
    color: #f5ad00;
}

.yellow-stroke {
    width: 72px;
    height: 7px;
    background: #f5ad00;
    border-radius: 70% 35% 65% 40%;
    transform: rotate(-2deg);
    margin: 14px 0 24px;
}


/* ---------- WERK ---------- */

.work-section {
    background: #f6f0e5;
    padding: 80px 0 95px;
}

.work-section h2,
.about-section h2,
.craft-section h2,
.contact-section h2,
.reviews-section h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(42px, 4.2vw, 64px);
    line-height: .98;
    margin: 0;
}

.work-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 38px;
}

.work-intro p {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.55;
    margin: 0;
}

.text-link {
    color: #111;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 3px solid #f5ad00;
    padding-bottom: 4px;
    white-space: nowrap;
}

.work-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: 290px 290px;
    gap: 16px;
}

.work-card {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #ddd;
}

.work-large {
    grid-row: 1 / 3;
}

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

.work-card:hover img {
    transform: scale(1.025);
}

.work-card::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent, rgba(20,12,6,.82));
}

.work-card figcaption {
    position: absolute;
    left: 22px;
    right: 20px;
    bottom: 20px;
    color: white;
    z-index: 2;
}

.work-card figcaption span {
    color: #ffb400;
    font: 700 10px Arial, sans-serif;
    letter-spacing: .16em;
}

.work-card figcaption strong {
    display: block;
    margin-top: 5px;
    font: 400 25px/1.04 Georgia, serif;
}


/* ---------- REVIEWS ---------- */

.reviews-section {
    position: relative;
    background: #1d5671;
    color: white;
    padding: 85px 0 90px;
}

.reviews-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 20px;
    background: #1d5671;
    clip-path: polygon(
      0 45%, 6% 15%, 13% 52%, 21% 25%, 30% 58%,
      39% 20%, 48% 50%, 58% 23%, 67% 60%, 77% 18%,
      87% 52%, 94% 20%, 100% 48%, 100% 100%, 0 100%
    );
}

.reviews-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 34px;
}

.reviews-widget {
    background: white;
    border-radius: 2px;
    padding: 18px;
    color: #111;
    min-height: 220px;
}


/* ---------- OVER MIJ ---------- */

.about-section {
    background: #f6f0e5;
    padding: 100px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}

.about-photo-wrap {
    position: relative;
    height: 600px;
    overflow: hidden;
}

.about-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
}

.about-stamp {
    position: absolute;
    right: -4px;
    bottom: 32px;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: #f5ad00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font: 700 19px Georgia, serif;
    transform: rotate(-7deg);
}

.about-stamp small {
    font: 700 9px Arial, sans-serif;
    letter-spacing: .12em;
    margin-top: 5px;
}

.about-copy {
    max-width: 610px;
}

.about-copy p {
    font-size: 17px;
    line-height: 1.65;
}

.about-lead {
    font-family: Georgia, serif;
    font-size: 22px !important;
    line-height: 1.45 !important;
}

.hand-note {
    font-family: "Segoe Print", "Bradley Hand", cursive;
    color: #145a79;
    font-size: 18px;
    line-height: 1.25;
    transform: rotate(-3deg);
}

.about-note {
    margin: 30px 0 0 55%;
}


/* ---------- AMBACHT ---------- */

.craft-section {
    background: #342012;
    color: #f8f1e6;
    padding: 100px 0;
}

.craft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.craft-copy p {
    max-width: 570px;
    font-size: 17px;
    line-height: 1.65;
}

.craft-copy blockquote {
    margin: 35px 0;
    padding-left: 24px;
    border-left: 6px solid #f5ad00;
    font: italic 26px/1.35 Georgia, serif;
}

.craft-tools {
    position: relative;
    height: 540px;
}

.tool-card {
    position: absolute;
    width: 58%;
    height: 390px;
    background: #eee;
    transform: rotate(-3deg);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

.tool-card img {
    width: 100%;
    height: 340px;
    object-fit: cover;
}

.tool-card span {
    display: block;
    color: #1b1b1b;
    padding: 10px 15px;
    font: 800 11px Arial, sans-serif;
    letter-spacing: .15em;
}

.tool-card-lower {
    right: 0;
    bottom: 0;
    transform: rotate(4deg);
}


/* ---------- CONTACT ---------- */

.contact-section {
    position: relative;
    background: #f5ad00;
    padding: 95px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 100px;
    align-items: center;
}

.contact-section .section-kicker {
    color: #342012;
}

.contact-section .yellow-stroke {
    background: #1d5671;
}

.contact-lead {
    max-width: 620px;
    font: 400 21px/1.5 Georgia, serif;
    margin-bottom: 35px;
}

.big-yellow-button {
    display: inline-block;
    background: #342012;
    color: white;
    text-decoration: none;
    border-radius: 999px;
    padding: 16px 26px;
    font-weight: 700;
}

.contact-card {
    background: #f8f3e9;
    padding: 38px 42px;
    box-shadow: 9px 9px 0 #1d5671;
    transform: rotate(1deg);
}

.contact-card-title {
    font: 400 35px Georgia, serif;
    margin-bottom: 27px;
}

.contact-item {
    border-top: 1px solid rgba(0,0,0,.18);
    padding: 17px 0;
}

.contact-item span {
    display: block;
    font: 800 10px Arial, sans-serif;
    letter-spacing: .15em;
    color: #1d5671;
    margin-bottom: 5px;
}

.contact-item strong,
.contact-item a {
    color: #111;
    font: 400 17px/1.4 Georgia, serif;
    text-decoration: none;
}

.small-contact {
    opacity: .72;
}


/* ---------- FOOTER ---------- */

.site-footer {
    background: #17120e;
    color: #f8f1e6;
    padding: 55px max(40px, calc((100% - 1260px)/2)) 20px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 70px;
    align-items: start;
}

.footer-brand img {
    width: 135px;
    height: auto;
}

.footer-brand p {
    font: 400 16px Georgia, serif;
}

.footer-nav,
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav a,
.footer-contact a,
.footer-contact span {
    color: #f8f1e6;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.16);
    margin-top: 42px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: .65;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {

    .section-inner {
        width: min(100% - 34px, 700px);
    }

    .work-intro {
        display: block;
    }

    .work-intro .text-link {
        display: inline-block;
        margin-top: 18px;
    }

    .work-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .work-card,
    .work-large {
        height: 320px;
        grid-row: auto;
    }

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

    .about-photo-wrap {
        height: 500px;
    }

    .craft-tools {
        height: 480px;
    }

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

    .footer-bottom {
        display: block;
    }

    .footer-bottom span {
        display: block;
        margin-top: 6px;
    }
}

/* ===== NAV + REVIEW FIX ===== */

#diensten,
#werk,
#reviews,
#over-mij,
#contact {
    scroll-margin-top: 105px;
}

.reviews-dutch-title {
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1.1;
    color: #fff;
    margin: 30px 0 16px;
}

/* ===== NAV + REVIEW FIX ===== */

#diensten,
#werk,
#reviews,
#over-mij,
#contact {
    scroll-margin-top: 105px;
}

.reviews-dutch-title {
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1.1;
    color: #fff;
    margin: 30px 0 16px;
}

/* REVIEW HEADING */
.reviews-dutch-title {
    font-family: Georgia, serif !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    color: #fff !important;
    margin: 28px 0 18px !important;
}

#patrick {
    scroll-margin-top: 105px;
}

#patrick {
    scroll-margin-top: 105px;
}