Dit is mijn css, kan je het aanpassen sturen naar mij? 

:root{
  --bg:#f4f1eb;
  --bg-2:#fcfaf7;
  --panel:#fffdf9;
  --panel-2:#f8f3eb;
  --text:#1f1912;
  --muted:#5f564a;
  --gold:#cfab67;
  --gold-deep:#a77b33;
  --line:rgba(129,101,51,.10);
  --shadow:0 18px 54px rgba(56,38,12,.08);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 14% 11%, rgba(224,198,145,.12), transparent 26%),
    radial-gradient(circle at 84% 10%, rgba(201,163,90,.07), transparent 22%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
body.nav-open{overflow:hidden}

#intro{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:linear-gradient(180deg,#faf7f2,#f1e8db);
  transition:opacity .42s ease, visibility .42s ease;
}
#intro.hide{opacity:0;visibility:hidden;pointer-events:none}
.intro-grid,.intro-beam{position:absolute;inset:0}
.intro-grid{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;opacity:.28;animation:gridDrift 10s linear infinite;
}
.intro-beam{
  background:linear-gradient(115deg,transparent 18%, rgba(255,255,255,.0) 38%, rgba(232,208,160,.48) 50%, rgba(255,255,255,.0) 62%, transparent 82%);
  transform:translateX(-120%);animation:introSweep 1.65s ease .18s forwards;
}
.intro-mark{
  position:relative;display:grid;gap:14px;place-items:center;padding:28px 34px;
}
.intro-outline{position:absolute;inset:-12px;border:1px solid rgba(170,131,68,.18);border-radius:26px;opacity:.65}
.intro-outline span{position:absolute;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.intro-outline span:nth-child(1),.intro-outline span:nth-child(3){height:1px;width:0}
.intro-outline span:nth-child(2),.intro-outline span:nth-child(4){width:1px;height:0}
.intro-outline span:nth-child(1){top:0;left:0;animation:lineGrowX .28s ease .12s forwards}
.intro-outline span:nth-child(2){top:0;right:0;animation:lineGrowY .22s ease .34s forwards}
.intro-outline span:nth-child(3){bottom:0;right:0;animation:lineGrowX .28s ease .52s forwards reverse}
.intro-outline span:nth-child(4){bottom:0;left:0;animation:lineGrowY .22s ease .74s forwards reverse}
.intro-logo{width:min(420px,72vw);filter:drop-shadow(0 8px 18px rgba(123,89,33,.08));animation:introLogo .92s cubic-bezier(.2,.85,.2,1) .18s both}
.intro-mark p{margin:0;color:#8a6b36;font-size:11px;letter-spacing:.28em;font-weight:800;animation:fadeRise .85s ease .62s both;text-align:center}

.material-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-base,.bg-concrete,.bg-glow,.bg-noise,.bg-steel,.bg-wood,.bg-monogram-wrap{position:absolute;inset:0}
.bg-base{background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,250,244,.42))}
.bg-concrete{background-image:radial-gradient(rgba(79,58,24,.03) .9px, transparent 1px);background-size:22px 22px;opacity:.16}
.bg-glow{background:radial-gradient(circle at 20% 22%, rgba(224,194,135,.14), transparent 22%),radial-gradient(circle at 76% 18%, rgba(255,255,255,.65), transparent 18%),radial-gradient(circle at 80% 76%, rgba(201,163,90,.08), transparent 18%);animation:ambient 12s ease-in-out infinite}
.bg-noise{opacity:.02;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.bg-steel{background:linear-gradient(105deg, transparent 0 44%, rgba(168,144,104,.05) 50%, transparent 56%);transform:translateX(calc(var(--scroll-progress,0) * 64px));opacity:.42}
.bg-wood{background:repeating-linear-gradient(90deg, transparent 0 58px, rgba(165,124,60,.018) 58px 60px, transparent 60px 118px);opacity:.18}
.bg-monogram-wrap{overflow:hidden}
.bg-monogram{position:absolute;opacity:.16;filter:none;mix-blend-mode:multiply;animation:monoFloat 14s ease-in-out infinite}
.mono-a{width:260px;left:-16px;top:14%;opacity:.20;animation-delay:0s}
.mono-b{width:168px;right:2%;top:52%;opacity:.17;animation-delay:-5s}
.mono-c{width:92px;left:8%;top:60%;opacity:.21;animation-duration:12s;animation-delay:-2s}
.mono-d{width:108px;right:10%;top:22%;opacity:.18;animation-duration:13s;animation-delay:-7s}
.mono-e{width:74px;left:56%;top:10%;opacity:.15;animation-duration:10s;animation-delay:-4s}
.mono-f{width:128px;left:72%;top:70%;opacity:.13;animation-duration:16s;animation-delay:-6s}
.mono-g{width:86px;left:34%;top:38%;opacity:.14;animation-duration:11s;animation-delay:-3s}
.mono-h{width:62px;left:20%;top:82%;opacity:.12;animation-duration:9s;animation-delay:-1s}
.bg-monogram-wrap::after{content:"";position:absolute;width:260px;height:260px;right:18%;top:22%;background:radial-gradient(circle, rgba(201,163,90,.08), transparent 68%);animation:orbFloat 14s ease-in-out infinite}

.site-header{
  position:fixed;top:6px;left:50%;transform:translateX(-50%);z-index:30;
  width:min(1160px,calc(100% - 26px));
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:3px 7px;border-radius:15px;
  background:rgba(255,252,247,.96);border:1px solid rgba(157,123,58,.10);
  box-shadow:0 10px 24px rgba(76,56,20,.06);
}
.brand img{width:164px;max-width:34vw}
.desktop-nav{display:flex;gap:4px;align-items:center;padding:3px 5px;border-radius:999px;background:rgba(255,252,247,.72);border:1px solid rgba(157,123,58,.08)}
.desktop-nav a,.mobile-nav a{
  font-weight:700;font-size:13px;padding:9px 12px;border-radius:13px;color:#3a2d1b;
}
.desktop-nav a:hover,.mobile-nav a:hover{background:rgba(201,163,90,.10)}
.nav-cta{background:linear-gradient(135deg,#f3ddb1,#cfab67);box-shadow:0 8px 20px rgba(201,163,90,.18)}
.menu-toggle{
  display:none;align-items:center;justify-content:center;width:38px;height:38px;border:none;cursor:pointer;
  border-radius:22px;background:#fffaf3;box-shadow:0 10px 24px rgba(53,38,16,.10);padding:0;position:relative
}
.menu-toggle span{position:absolute;width:24px;height:3px;border-radius:999px;background:#463424;transition:transform .12s ease,opacity .1s ease,top .12s ease}
.menu-toggle span:nth-child(1){top:12px}.menu-toggle span:nth-child(2){top:19px}.menu-toggle span:nth-child(3){top:26px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}
.mobile-nav{
  position:fixed;top:46px;left:12px;right:12px;z-index:29;display:grid;gap:8px;
  grid-template-columns:1fr 1fr;
  padding:10px;border-radius:20px;background:rgba(255,251,245,.985);border:1px solid rgba(156,125,72,.10);
  box-shadow:0 10px 22px rgba(66,48,19,.06);opacity:0;pointer-events:none;transform:translateY(-8px) scale(.985);
  transition:opacity .08s ease, transform .08s ease;
}
.mobile-nav.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.mobile-nav a:last-child{grid-column:1/-1}

.section{width:min(1240px,calc(100% - 32px));margin:0 auto;position:relative}
.hero{min-height:100svh;display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:center;padding:104px 0 72px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold-deep);letter-spacing:.22em;font-size:12px;font-weight:800;margin-bottom:16px}
.hero h1,.section-head h2,.about h2,.contact-cta h2{font-family:Manrope,Inter,sans-serif;line-height:.92;margin:0 0 18px;letter-spacing:-.04em}
.hero h1{font-size:clamp(58px,9.8vw,108px)}
.hero h1 span{display:block;animation:fadeRise .7s ease both}
.hero h1 span:nth-child(2){animation-delay:.08s}.hero h1 span:nth-child(3){animation-delay:.16s}
.hero p,.section-head p,.about p,.process-card p,.footer-brand p,.footer-col a,.footer-col span,.contact-list,.contact-panel p{color:var(--muted);line-height:1.72}
.hero p{font-size:clamp(17px,1.8vw,21px);max-width:670px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 26px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:999px;font-weight:800;overflow:hidden;border:1px solid rgba(167,123,51,.12)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-42%;width:36%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent)}
.btn:hover::after{animation:sweep .8s ease}
.btn-gold{color:#241a11;background:linear-gradient(135deg,#f4e0b6 0%,#d3af71 48%,#b4863b 100%);box-shadow:0 14px 28px rgba(201,163,90,.24)}
.btn-ghost{background:rgba(255,255,255,.68);color:var(--text)}
.hero-points{display:flex;gap:10px;flex-wrap:wrap}
.hero-points span,.stats div,.process-card,.contact-panel,.contact-form,.about-panel,.contact-cta{
  background:rgba(255,251,245,.82);border:1px solid rgba(157,124,62,.12);box-shadow:var(--shadow)
}
.hero-points span{padding:11px 15px;border-radius:999px;color:#3d2f1f;font-weight:700}
.hero-visual{display:grid;gap:18px;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0),var(--ty,0));transition:transform .18s ease-out}
.visual-card,.service,.project{position:relative;overflow:hidden;border-radius:32px;background:var(--panel);border:1px solid rgba(153,117,49,.12);box-shadow:var(--shadow)}
.visual-main{min-height:540px}.visual-main img,.service-image img,.project img,.visual-stack img{width:100%;height:100%;object-fit:cover}
.visual-badge{position:absolute;left:22px;bottom:22px;padding:14px 18px;border-radius:999px;background:rgba(255,248,238,.92);font-weight:700;box-shadow:0 8px 20px rgba(87,66,29,.06)}
.visual-stack{display:grid;grid-template-columns:1fr 1fr;gap:18px}.visual-stack .visual-card{min-height:200px}.visual-stack strong{position:absolute;left:18px;bottom:18px;font-size:18px}
.section-head{max-width:850px;margin-bottom:28px}.section-head h2,.about h2{font-size:clamp(34px,6vw,62px)}
.services{padding:62px 0 20px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service{min-height:420px;transition:transform .24s ease,box-shadow .24s ease}
.service:hover,.project:hover,.visual-card:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(62,40,10,.14)}
.service::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.00) 0%,rgba(34,22,11,.04) 56%,rgba(34,22,11,.16) 100%);z-index:1}
.service-body{position:absolute;left:22px;right:22px;bottom:22px;z-index:2}.service-body h3{font-size:29px;margin:0 0 8px}.service-body p{margin:0;color:#fffaf1;text-shadow:0 2px 10px rgba(42,28,10,.18)}
.projects{padding:86px 0 20px}.project-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:18px;grid-auto-rows:260px}.project{border-radius:28px}.project.tall{grid-row:span 2}.project.wide{grid-column:span 2}.project img{transition:transform .6s ease}.project:hover img{transform:scale(1.04)}
.project-overlay{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(180deg,transparent,rgba(27,18,10,.10) 58%,rgba(27,18,10,.28));color:#fffaf1}
.project-overlay span{display:inline-block;color:#f0d9a8;font-weight:800;margin-bottom:8px;letter-spacing:.14em;font-size:12px;text-shadow:0 2px 8px rgba(42,28,10,.18)}.project-overlay strong{display:block;font-size:24px;line-height:1.1;text-shadow:0 2px 12px rgba(42,28,10,.18)}
.process{padding:90px 0 10px}.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.process-card{padding:26px;border-radius:28px}.process-card span{display:inline-flex;margin-bottom:18px;font-size:14px;font-weight:900;color:var(--gold-deep);letter-spacing:.2em}.process-card h3{margin:0 0 10px;font-size:24px}
.about{padding:90px 0 12px;display:grid;grid-template-columns:1fr .9fr;gap:22px;align-items:start}.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.stats div{min-width:170px;padding:18px;border-radius:22px}.stats strong{display:block;font-size:36px}.about-panel{padding:28px;border-radius:30px}.about-panel ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}.about-panel li{padding:15px 16px;border-radius:18px;background:rgba(255,255,255,.46);border:1px solid rgba(153,117,49,.1)}
.contact-cta{margin-top:28px;padding:22px 24px;border-radius:28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.contact-cta h2{font-size:clamp(28px,4vw,48px)}
.contact{padding:90px 0 92px}.contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px}.contact-panel,.contact-form{padding:26px;border-radius:30px}.contact-panel h3{margin:0 0 10px;font-size:32px}.contact-list{display:grid;gap:10px}.contact-form{display:grid;gap:16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form label{display:grid;gap:8px;font-weight:700;color:#34281b}.contact-form input,.contact-form textarea,.contact-form select{width:100%;border-radius:16px;border:1px solid rgba(155,118,56,.16);background:#fffdf8;padding:14px 16px;font:inherit;color:var(--text);outline:none;transition:border-color .2s ease, transform .2s ease}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:rgba(167,123,51,.45);transform:translateY(-1px)}
.mobile-call{position:fixed;right:18px;bottom:18px;z-index:24;display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:0 28px;border-radius:999px;background:linear-gradient(135deg,#f4e0b6,#cfab67);font-weight:900;color:#23160e;box-shadow:0 20px 34px rgba(201,163,90,.20)}
.site-footer{position:relative;padding:26px 0 10px;background:linear-gradient(180deg,rgba(245,238,227,.72),rgba(238,230,216,.92));border-top:1px solid rgba(153,117,49,.10)}
.footer-inner{display:grid;grid-template-columns:1.3fr .7fr .7fr .85fr;gap:22px;align-items:start;padding-top:22px;padding-bottom:18px}.footer-brand{position:relative}.footer-brand img{width:280px;max-width:86%;animation:footerLogoFloat 6s ease-in-out infinite}.footer-brand p{max-width:520px;margin:14px 0 0}.footer-col h4{margin:0 0 14px;color:#6d5224;font-size:15px;letter-spacing:.14em;text-transform:uppercase}.footer-col,.footer-col a,.footer-col span{display:grid;gap:10px}.footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px 18px;border-top:1px solid rgba(153,117,49,.10);width:min(1240px,calc(100% - 32px));margin:0 auto;color:var(--muted)}

.reveal{opacity:0;transform:translateY(32px) scale(.985);transition:opacity .65s ease, transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0) scale(1)}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}

@keyframes introSweep{to{transform:translateX(120%)}}
@keyframes lineGrowX{to{width:100%}}
@keyframes lineGrowY{to{height:100%}}
@keyframes introLogo{0%{opacity:0;transform:translateY(18px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeRise{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes sweep{to{left:120%}}
@keyframes ambient{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes monoFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(12px,-18px,0) rotate(2deg)}}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,18px,0)}}
@keyframes footerLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gridDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-46px,-46px,0)}}

@media (max-width:1080px){
  .desktop-nav{display:none}.menu-toggle{display:flex}
  .hero,.about,.contact-wrap{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr 1fr}
  .project-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .process-row,.footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .site-header{top:4px;width:calc(100% - 20px);padding:2px 5px}
  .brand img{width:132px;max-width:36vw}
  .hero{padding:78px 0 40px;gap:22px;min-height:auto}
  .hero h1{font-size:clamp(46px,16vw,82px)}
  .visual-main{min-height:380px}
  .service-grid,.project-grid,.process-row,.footer-inner,.field-row{grid-template-columns:1fr}
  .project.tall,.project.wide{grid-row:auto;grid-column:auto}
  .section{width:calc(100% - 20px)}
  .section-head h2,.about h2{line-height:1.02}
  .service{min-height:360px}.service-body h3{font-size:24px}
  .contact{padding-bottom:84px}.mobile-call{bottom:16px;right:14px;min-height:58px;padding:0 24px}
  .footer-bottom{padding-bottom:84px}
  .mono-a{width:138px;top:13%;left:-10px;opacity:.18}.mono-b{width:92px;right:-2px;top:60%;opacity:.16}.mono-c{width:58px;left:7%;top:72%;opacity:.20}.mono-d{width:68px;right:7%;top:24%;opacity:.17}.mono-e{width:48px;left:54%;top:11%;opacity:.14}.mono-f{width:76px;left:74%;top:78%;opacity:.12}.mono-g{width:52px;left:30%;top:42%;opacity:.13}.mono-h{width:40px;left:18%;top:84%;opacity:.11}
}

@media (max-width:460px){.mobile-nav{grid-template-columns:1fr}.mobile-nav a:last-child{grid-column:auto}}
.real-gallery{padding:82px 0 12px}.real-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.real-shot{overflow:hidden;border-radius:26px;background:rgba(255,255,255,.62);border:1px solid rgba(153,117,49,.12);box-shadow:var(--card-shadow)}.real-shot img{aspect-ratio:1/1;object-fit:cover}.real-shot figcaption{padding:14px 16px;font-weight:700;color:#4d3a26}.service-image img[src*=service-stuc]{object-position:center 42%}.service-image img[src*=service-tile]{object-position:center 48%}.service-image img[src*=service-wood]{object-position:center center}.service-image img[src*=service-bath]{object-position:center 38%}.service-image img[src*=service-renovation]{object-position:center 42%}.service-image img[src*=service-interior]{object-position:center center}.visual-main img{object-position:center 48%}.steel-card img{object-position:center 56%}.wood-card img{object-position:center 42%}@media (max-width:1080px){.real-grid{grid-template-columns:1fr 1fr}}@media (max-width:720px){.real-grid{grid-template-columns:1fr}.real-shot img{aspect-ratio:4/3}}


/* v30 targeted fixes */
body.nav-open{overflow:hidden;}
.site-header{z-index:40;}
.mobile-nav{z-index:39;top:86px;left:16px;right:16px;padding:16px 18px;border-radius:28px;background:rgba(255,251,245,.998);box-shadow:0 18px 40px rgba(66,48,19,.10);}
.mobile-nav a{padding:14px 16px;border-radius:16px;font-size:16px;background:rgba(255,255,255,.7);}
.mobile-nav a:last-child{background:linear-gradient(135deg,#f3ddb1,#cfab67);color:#2a1c0d;}
.service{overflow:hidden;}
.service-image{position:absolute;inset:0;}
.service-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,16,9,.06),rgba(23,16,9,.08) 42%,rgba(23,16,9,.54) 100%);z-index:1;}
.service-body{background:none;border:none;box-shadow:none;padding:0;left:26px;right:26px;bottom:24px;}
.service-body h3{color:#19110b;text-shadow:0 2px 16px rgba(255,249,239,.35);background:rgba(255,248,238,.88);display:inline-block;padding:12px 18px;border-radius:999px;margin-bottom:12px;}
.service-body p{color:#fffefb;max-width:84%;} 
.real-shot{position:relative;background:transparent;border:none;box-shadow:none;}
.real-shot figcaption{position:absolute;left:18px;right:18px;bottom:18px;padding:0;font-size:19px;line-height:1.15;font-weight:800;color:#fffef9;text-shadow:0 4px 18px rgba(0,0,0,.45);z-index:2;}
.real-shot::after{content:"";position:absolute;inset:0;border-radius:26px;background:linear-gradient(180deg,transparent 36%,rgba(18,12,7,.58) 100%);pointer-events:none;z-index:1;}
.real-shot img{display:block;border-radius:26px;}
.mobile-whatsapp{position:fixed;left:18px;bottom:18px;z-index:24;display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:0 26px;border-radius:999px;background:#ffffff;color:#1d1a16;border:1px solid rgba(7,94,84,.12);box-shadow:0 20px 34px rgba(7,94,84,.12);font-weight:900;}
.mobile-whatsapp::before{content:"";width:14px;height:14px;border-radius:50%;background:#25D366;display:inline-block;margin-right:12px;box-shadow:0 0 0 6px rgba(37,211,102,.12);}
@media (max-width:720px){
  .site-header{top:6px;width:calc(100% - 24px);padding:4px 7px;border-radius:20px;}
  .mobile-nav{top:98px;}
  .service-body h3{font-size:22px;padding:10px 16px;}
  .service-body p{max-width:92%;font-size:15px;}
  .mobile-call{right:14px;bottom:16px;min-height:58px;padding:0 24px;}
  .mobile-whatsapp{left:14px;bottom:16px;min-height:58px;padding:0 22px;}
  .footer-bottom{padding-bottom:96px;}
}

/* force 4 images in about section */
.about .real-grid{grid-template-columns:repeat(4,1fr)!important;}
@media (max-width: 600px){

  body{
    padding:16px;
    overflow:auto; /* belangrijk */
  }

  .card{
    padding:24px 20px;
    border-radius:20px;
  }

  h1{
    font-size:1.9rem;
    line-height:1.1;
  }

  p{
    font-size:0.95rem;
    line-height:1.6;
  }

  .status{
    font-size:12px;
    padding:10px 14px;
  }

  .actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .brandline{
    font-size:0.8rem;
    gap:8px;
  }

}