/* ============================================================
Motivadiensten.nl — Premium Design System v2
Brand:
terracotta #D4793A
diep groen #2C5F4A
warm wit #FAF7F2
soft peach #F5DDD0
Typography:
Cormorant Garamond (serif headings) + Inter (body)
============================================================ */
/* ---------- Design tokens ---------- */
:root{
/* Brand */
--terracotta:#D4793A;
--terracotta-dark:#B6632A;
--terracotta-soft:#F3D9BF;
--peach:#F5DDD0;
--green:#2C5F4A;
--green-dark:#1F4435;
--green-darker:#153025;
--green-soft:#D6E4DC;
/* Neutrals */
--warm-white:#FAF7F2;
--warm-white-2:#F3EDE3;
--ink:#3D3229;
--ink-soft:#6B5A4C;
--line:#E7DED0;
/* Surfaces */
--surface:#ffffff;
--surface-muted:#F3EDE3;
--surface-alt:var(--warm-white);
/* Effects */
--shadow:0 18px 60px rgba(61,50,41,.10);
--shadow-sm:0 6px 24px rgba(61,50,41,.07);
--shadow-lift:0 24px 70px rgba(61,50,41,.18);
--shadow-terracotta:0 12px 36px rgba(212,121,58,.28);
--ring-terracotta:0 0 0 4px rgba(212,121,58,.18);
/* Radius */
--radius:18px;
--radius-lg:28px;
--radius-pill:999px;
/* Transitions */
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur:.35s;
--dur-slow:.6s;
/* Layout */
--maxw:1180px;
--topbar-h:116px; /* topbar + main nav combined on desktop */
/* Fonts */
--serif:'Cormorant Garamond','Fraunces','Playfair Display',Georgia,serif;
--sans:'Inter','Helvetica Neue',system-ui,-apple-system,'Segoe UI',sans-serif;
/* Z-index scale */
--z-nav:60;
--z-progress:70;
--z-overlay:80;
--z-toast:90;
color-scheme: light;
}
/* ---------- Dark mode tokens ---------- */
html[data-theme="dark"]{
--warm-white:#13181A;
--warm-white-2:#1A2023;
--ink:#F2ECE2;
--ink-soft:#B9B0A0;
--line:#2A3134;
--surface:#1A2023;
--surface-muted:#131A1C;
--surface-alt:#0F1416;
--green-soft:#1E3B30;
--terracotta-soft:#3B2A1F;
--peach:#2A1F17;
--shadow:0 18px 60px rgba(0,0,0,.55);
--shadow-sm:0 8px 24px rgba(0,0,0,.45);
--shadow-lift:0 28px 80px rgba(0,0,0,.6);
color-scheme: dark;
}
/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
*:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:6px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 16px)}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
font-family:var(--sans);
font-size:clamp(16px,1.02vw + .6rem,17.5px);
line-height:1.7;
color:var(--ink);
background:var(--warm-white);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
transition:background-color .4s var(--ease), color .4s var(--ease);
overflow-x:hidden;
}
/* Page fade-in on load */
body{animation:pageFade .7s var(--ease-out) both}
@keyframes pageFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
img,svg{max-width:100%;display:block}
::selection{background:var(--terracotta);color:#fff}
/* ---------- Typography ---------- */
h1,h2,h3,h4{
font-family:var(--serif);
color:var(--ink);
font-weight:500;
line-height:1.12;
letter-spacing:-.012em;
}
h1{font-size:clamp(2.35rem,1.2rem + 4.1vw,4.6rem);font-weight:500}
h2{font-size:clamp(1.85rem,1rem + 2.4vw,2.95rem);margin-bottom:.55em}
h3{font-size:clamp(1.2rem,.95rem + .5vw,1.5rem);margin-bottom:.4em}
h4{font-size:clamp(1rem,.9rem + .3vw,1.18rem);margin-bottom:.3em}
p{margin-bottom:1em;color:var(--ink-soft);max-width:72ch}
p strong{color:var(--ink)}
a{color:var(--green);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--terracotta)}
.italic-serif{font-family:var(--serif);font-style:italic}
/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:clamp(64px,7vw,104px) 0}
section.tight{padding:clamp(44px,5vw,64px) 0}
.eyebrow{
display:inline-block;
font-size:.78rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--terracotta);
font-weight:600;
margin-bottom:18px;
}
.lead{font-size:clamp(1.05rem,.9rem + .5vw,1.22rem);color:var(--ink-soft);max-width:62ch;line-height:1.7}
/* ---------- Buttons ---------- */
.btn{
--btn-bg:var(--terracotta);
--btn-fg:#fff;
position:relative;overflow:hidden;isolation:isolate;
display:inline-flex;align-items:center;gap:10px;
padding:15px 30px;border-radius:var(--radius-pill);
font-family:var(--sans);font-weight:600;font-size:.98rem;
transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease);
cursor:pointer;border:none;text-decoration:none;
will-change:transform;
}
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
transform:translateX(-120%);transition:transform .6s var(--ease-out);
}
.btn:hover::before{transform:translateX(120%)}
.btn-primary{
background:var(--terracotta);color:#fff !important;
box-shadow:var(--shadow-terracotta);
}
.btn-primary:hover{background:var(--terracotta-dark);transform:translateY(-2px);box-shadow:0 16px 40px rgba(212,121,58,.45)}
.btn-ghost{
background:transparent;color:var(--green);
border:1.5px solid var(--green);
}
.btn-ghost:hover{background:var(--green);color:#fff !important;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--ink) !important;box-shadow:var(--shadow-sm)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* ---------- Scroll progress bar ---------- */
.scroll-progress{
position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--z-progress);
background:transparent;pointer-events:none;
}
.scroll-progress__bar{
height:100%;width:0;
background:linear-gradient(90deg,var(--terracotta) 0%,var(--terracotta-dark) 100%);
box-shadow:0 0 12px rgba(212,121,58,.5);
transition:width .08s linear;
}
/* ---------- Info topbar (above main nav) ---------- */
.info-bar{
background:var(--green-dark);color:#EBE1D2;
font-size:.82rem;letter-spacing:.02em;
border-bottom:1px solid rgba(255,255,255,.06);
}
.info-bar .wrap{
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:10px 24px;flex-wrap:wrap;
}
.info-bar__left{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.info-bar__left a,.info-bar__left span{color:#EBE1D2;display:inline-flex;align-items:center;gap:7px}
.info-bar__left a:hover{color:var(--terracotta)}
.info-bar__left svg{width:14px;height:14px;opacity:.8}
.info-bar__right{display:flex;align-items:center;gap:14px}
.theme-toggle{
width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.04);color:#EBE1D2;cursor:pointer;
display:inline-grid;place-items:center;transition:all .25s var(--ease);
}
.theme-toggle:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:block}
html[data-theme="dark"] .theme-toggle .moon{display:none}
/* ---------- Main topbar (nav) ---------- */
.topbar{
position:sticky;top:0;z-index:var(--z-nav);
background:rgba(250,247,242,.78);
backdrop-filter:saturate(160%) blur(14px);
-webkit-backdrop-filter:saturate(160%) blur(14px);
border-bottom:1px solid transparent;
transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
html[data-theme="dark"] .topbar{background:rgba(19,24,26,.75)}
.topbar.is-scrolled{
background:rgba(250,247,242,.92);
border-bottom-color:var(--line);
box-shadow:0 8px 30px rgba(61,50,41,.08);
}
html[data-theme="dark"] .topbar.is-scrolled{background:rgba(19,24,26,.92);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;transition:padding .3s var(--ease)}
.topbar.is-scrolled .wrap{padding:12px 24px}
/* Logo with gradient mark */
.logo{
font-family:var(--serif);
font-size:1.58rem;font-weight:600;
color:var(--ink);letter-spacing:-.01em;
display:inline-flex;align-items:center;gap:12px;
}
.logo-dot{
width:26px;height:26px;border-radius:50%;
background:
radial-gradient(circle at 30% 30%,#F4B07B 0%,var(--terracotta) 55%,var(--terracotta-dark) 100%);
box-shadow:
inset 0 2px 4px rgba(255,255,255,.4),
0 6px 16px rgba(212,121,58,.35);
display:inline-block;
position:relative;flex-shrink:0;
animation:logoBreathe 4.5s ease-in-out infinite;
}
.logo-dot::after{
content:"";position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.55),transparent 50%);
}
@keyframes logoBreathe{
0%,100%{transform:scale(1);box-shadow:inset 0 2px 4px rgba(255,255,255,.4),0 6px 16px rgba(212,121,58,.35)}
50%{transform:scale(1.06);box-shadow:inset 0 2px 4px rgba(255,255,255,.4),0 10px 22px rgba(212,121,58,.45)}
}
/* Primary nav */
nav.primary{display:flex;gap:30px;align-items:center}
nav.primary a{
color:var(--ink);font-weight:500;font-size:.96rem;
position:relative;padding:8px 0;
transition:color .25s var(--ease);
}
nav.primary a:not(.nav-cta)::after{
content:"";position:absolute;left:0;bottom:2px;height:2px;width:100%;
background:var(--terracotta);border-radius:2px;
transform:scaleX(0);transform-origin:left center;
transition:transform .35s var(--ease-out);
}
nav.primary a:not(.nav-cta):hover{color:var(--terracotta)}
nav.primary a:not(.nav-cta):hover::after{transform:scaleX(1)}
nav.primary a.active{color:var(--terracotta)}
nav.primary a.active::after{transform:scaleX(0)}
nav.primary a.active::before{
content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
width:6px;height:6px;border-radius:50%;
background:var(--terracotta);
box-shadow:0 0 0 4px rgba(212,121,58,.18);
}
.nav-cta{
background:var(--green);color:#fff !important;padding:11px 22px;border-radius:var(--radius-pill);
transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
box-shadow:0 6px 20px rgba(44,95,74,.22);
}
.nav-cta:hover{background:var(--green-dark);color:#fff !important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(44,95,74,.32)}
/* ---------- Hamburger + mobile overlay ---------- */
.menu-toggle{
display:none;background:none;border:none;cursor:pointer;
width:44px;height:44px;border-radius:12px;color:var(--ink);
align-items:center;justify-content:center;
transition:background .2s var(--ease);
}
.menu-toggle:hover{background:var(--surface-muted)}
.menu-toggle__bars{position:relative;width:22px;height:14px}
.menu-toggle__bars span{
position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
transition:transform .35s var(--ease), opacity .2s var(--ease), top .35s var(--ease);
}
.menu-toggle__bars span:nth-child(1){top:0}
.menu-toggle__bars span:nth-child(2){top:6px}
.menu-toggle__bars span:nth-child(3){top:12px}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3){top:6px;transform:rotate(-45deg)}
/* ---------- Hero ---------- */
.hero{
padding:clamp(60px,6vw,110px) 0 clamp(70px,7vw,120px);
background:
radial-gradient(1200px 600px at 110% -10%,rgba(212,121,58,.12),transparent 60%),
radial-gradient(1000px 500px at -10% 110%,rgba(44,95,74,.10),transparent 60%),
linear-gradient(180deg,var(--warm-white) 0%,var(--warm-white-2) 100%);
position:relative;overflow:hidden;
}
.hero::before{
content:"";position:absolute;top:-120px;right:-120px;
width:540px;height:540px;border-radius:50%;
background:radial-gradient(circle,rgba(212,121,58,.22),transparent 70%);
pointer-events:none;
will-change:transform;
}
.hero::after{
content:"";position:absolute;bottom:-180px;left:-180px;
width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(44,95,74,.16),transparent 70%);
pointer-events:none;
will-change:transform;
}
.hero .wrap{
display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;
position:relative;z-index:2;
}
.hero h1 em{font-style:italic;color:var(--terracotta)}
.hero .lead{margin:22px 0 34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{
margin-top:36px;display:flex;gap:28px;flex-wrap:wrap;
font-size:.92rem;color:var(--ink-soft);
}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.hero-portrait{
position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);
background:linear-gradient(160deg,var(--terracotta-soft) 0%,#E8C9A4 45%,var(--green-soft) 100%);
box-shadow:var(--shadow);overflow:hidden;
display:flex;align-items:flex-end;justify-content:center;
}
.hero-portrait::before{
content:"";position:absolute;inset:22px;border-radius:22px;
background:
radial-gradient(circle at 50% 38%,rgba(255,255,255,.45) 0,transparent 55%),
linear-gradient(180deg,#E8B98A 0%,#C28455 60%,#8B5A35 100%);
}
.hero-portrait::after{
content:"";position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);
width:110px;height:110px;border-radius:50%;
background:radial-gradient(circle,#F4D4B3 0%,#D9A87B 100%);
box-shadow:0 0 0 8px rgba(255,255,255,.15);
}
.portrait-tag{
position:absolute;left:18px;bottom:18px;right:18px;z-index:3;
background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
border-radius:14px;padding:14px 18px;
display:flex;align-items:center;gap:14px;
box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .portrait-tag{background:rgba(26,32,35,.9);color:var(--ink)}
.portrait-tag .avatar{
width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,var(--terracotta),var(--green));
color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.15rem;font-weight:600;
}
.portrait-tag strong{display:block;font-size:.98rem;color:var(--ink)}
.portrait-tag small{color:var(--ink-soft);font-size:.82rem}
/* ---------- USP strip ---------- */
.usps{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usps .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:44px 24px}
.usp{display:flex;gap:16px;align-items:flex-start;transition:transform .3s var(--ease)}
.usp:hover{transform:translateY(-3px)}
.usp .icon{
width:46px;height:46px;border-radius:12px;flex-shrink:0;
background:var(--terracotta-soft);color:var(--terracotta);
display:grid;place-items:center;font-size:1.3rem;font-family:var(--serif);font-weight:700;
transition:background .3s var(--ease), transform .3s var(--ease);
}
.usp:hover .icon{background:var(--terracotta);color:#fff;transform:rotate(-6deg) scale(1.05)}
.usp strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:4px}
.usp p{font-size:.92rem;margin:0;line-height:1.55}
/* ---------- Section heading ---------- */
.section-head{text-align:center;max-width:640px;margin:0 auto 56px}
.section-head p{margin:14px auto 0;font-size:1.08rem}
/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.card{
background:var(--surface);border-radius:var(--radius);
padding:36px 32px;border:1px solid var(--line);
box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
position:relative;overflow:hidden;
}
.card::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(135deg,rgba(212,121,58,.08),transparent 60%);
opacity:0;transition:opacity .35s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--terracotta-soft)}
.card:hover::before{opacity:1}
.card .card-icon{
width:54px;height:54px;border-radius:14px;
background:var(--green-soft);color:var(--green);
display:grid;place-items:center;margin-bottom:20px;
font-family:var(--serif);font-size:1.6rem;font-weight:600;
transition:transform .35s var(--ease);
}
.card:hover .card-icon{transform:rotate(-8deg) scale(1.08)}
.card h3{margin-bottom:10px}
.card .link{
display:inline-flex;align-items:center;gap:6px;margin-top:14px;
color:var(--terracotta);font-weight:600;font-size:.94rem;
}
.card .link::after{content:"→";transition:transform .25s var(--ease)}
.card .link:hover::after{transform:translateX(5px)}
/* ---------- Quote block ---------- */
.quote-block{
background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
color:#fff;padding:clamp(60px,7vw,100px) 24px;text-align:center;
position:relative;overflow:hidden;
}
.quote-block::before{
content:"\201C";font-family:var(--serif);font-size:18rem;
position:absolute;top:-60px;left:40px;opacity:.08;line-height:1;
}
.quote-block::after{
content:"";position:absolute;right:-100px;bottom:-100px;width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle,rgba(212,121,58,.25),transparent 70%);
}
.quote-block blockquote{
font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);
font-style:italic;max-width:820px;margin:0 auto;line-height:1.35;
position:relative;z-index:2;color:#fff;
}
.quote-block cite{
display:block;margin-top:24px;font-family:var(--sans);font-style:normal;
font-size:.92rem;letter-spacing:.15em;text-transform:uppercase;opacity:.8;
}
/* ---------- Split / about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split .media{
aspect-ratio:1/1.1;border-radius:var(--radius-lg);
background:linear-gradient(160deg,var(--green-soft),var(--terracotta-soft));
box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.split .media::before{
content:"";position:absolute;inset:30px;border-radius:22px;
background:
radial-gradient(circle at 50% 38%,rgba(255,255,255,.4) 0,transparent 55%),
linear-gradient(180deg,#DAB28A,#A67046 70%);
}
.split .media::after{
content:"";position:absolute;left:50%;top:33%;transform:translate(-50%,-50%);
width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle,#EFCFAA,#C68A5A);
}
.signature-tag{
position:absolute;right:-18px;bottom:40px;z-index:3;
background:var(--surface);padding:18px 24px;border-radius:16px;
box-shadow:var(--shadow);max-width:220px;
}
.signature-tag span{
font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--terracotta);
display:block;margin-bottom:4px;
}
.signature-tag small{color:var(--ink-soft);font-size:.82rem}
/* ---------- Trajecten ---------- */
.traject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.traject{
background:var(--surface);border-radius:var(--radius);
padding:40px 34px;border:1px solid var(--line);
display:flex;flex-direction:column;position:relative;
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.traject:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.traject.highlight{
background:linear-gradient(160deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;border-color:var(--green);
transform:scale(1.03);box-shadow:var(--shadow);
}
.traject.highlight:hover{transform:scale(1.03) translateY(-5px)}
.traject.highlight h3,.traject.highlight .price{color:#fff}
.traject.highlight p{color:rgba(255,255,255,.85)}
.traject.highlight ul li{color:rgba(255,255,255,.92)}
.traject.highlight ul li::before{background:var(--terracotta)}
.traject .badge{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:var(--terracotta);color:#fff;padding:5px 14px;border-radius:var(--radius-pill);
font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
box-shadow:0 8px 20px rgba(212,121,58,.4);
}
.traject h3{margin-bottom:6px}
.traject .subtitle{font-size:.88rem;color:var(--ink-soft);margin-bottom:22px}
.traject.highlight .subtitle{color:rgba(255,255,255,.7)}
.traject .price{
font-family:var(--serif);font-size:clamp(2.2rem,1.6rem + 1.5vw,2.95rem);font-weight:500;color:var(--ink);line-height:1;
}
.traject .price small{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);font-weight:500;margin-left:4px}
.traject.highlight .price small{color:rgba(255,255,255,.7)}
.traject ul{list-style:none;margin:24px 0 28px;flex:1}
.traject ul li{
padding:9px 0 9px 28px;position:relative;font-size:.96rem;
border-bottom:1px dashed rgba(61,50,41,.08);
}
.traject.highlight ul li{border-bottom-color:rgba(255,255,255,.12)}
.traject ul li::before{
content:"";position:absolute;left:0;top:16px;
width:14px;height:14px;border-radius:50%;background:var(--green);
}
.traject ul li::after{
content:"";position:absolute;left:4px;top:20px;
width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(-45deg);
}
/* ---------- Testimonials ---------- */
.testimonial{
background:var(--surface);border-radius:var(--radius);padding:36px 34px;
border:1px solid var(--line);box-shadow:var(--shadow-sm);
display:flex;flex-direction:column;
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.testimonial:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.testimonial .stars{color:var(--terracotta);letter-spacing:3px;margin-bottom:14px}
.testimonial blockquote{
font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.5;
color:var(--ink);flex:1;
}
.testimonial .who{
margin-top:22px;display:flex;align-items:center;gap:14px;
padding-top:20px;border-top:1px solid var(--line);
}
.testimonial .avatar{
width:48px;height:48px;border-radius:50%;
background:linear-gradient(135deg,var(--terracotta),var(--green));
color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:600;
}
.testimonial .who strong{display:block;color:var(--ink)}
.testimonial .who small{color:var(--ink-soft);font-size:.85rem}
/* ---------- CTA banner ---------- */
.cta-banner{
background:linear-gradient(135deg,var(--terracotta) 0%,var(--terracotta-dark) 100%);
color:#fff;border-radius:var(--radius-lg);
padding:clamp(44px,5vw,64px) clamp(32px,4vw,56px);
display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;
box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.cta-banner::before{
content:"";position:absolute;right:-80px;top:-80px;
width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08);
}
.cta-banner::after{
content:"";position:absolute;left:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;
background:rgba(255,255,255,.06);
}
.cta-banner h2{color:#fff;margin-bottom:10px}
.cta-banner p{color:rgba(255,255,255,.9);margin:0}
.cta-banner .btn-white{justify-self:end}
/* ---------- Form ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
form.contact{
background:var(--surface);border-radius:var(--radius);padding:40px;
border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;margin-bottom:16px;font-size:.92rem;font-weight:500;color:var(--ink)}
label span{display:block;margin-bottom:6px}
input,textarea,select{
width:100%;padding:13px 16px;border:1px solid var(--line);
border-radius:10px;font-family:var(--sans);font-size:.98rem;
background:var(--warm-white);color:var(--ink);
transition:all .2s var(--ease);
}
input:focus,textarea:focus,select:focus{
outline:none;border-color:var(--terracotta);background:var(--surface);
box-shadow:var(--ring-terracotta);
}
textarea{resize:vertical;min-height:120px}
.radio-group{display:flex;gap:10px;flex-wrap:wrap}
.radio-group label{
flex:1;min-width:130px;padding:12px 14px;border:1px solid var(--line);
border-radius:10px;cursor:pointer;margin:0;background:var(--warm-white);
font-size:.92rem;text-align:center;transition:all .2s var(--ease);
}
.radio-group input{display:none}
.radio-group input:checked + span{color:var(--terracotta);font-weight:600}
.radio-group label:has(input:checked){background:var(--terracotta-soft);border-color:var(--terracotta)}
.contact-info{padding:8px 0}
.contact-info h3{margin-bottom:8px}
.contact-info .info-item{
display:flex;gap:14px;align-items:flex-start;
padding:18px 0;border-bottom:1px solid var(--line);
}
.contact-info .info-item:last-child{border-bottom:none}
.contact-info .info-icon{
width:42px;height:42px;border-radius:10px;
background:var(--green-soft);color:var(--green);
display:grid;place-items:center;flex-shrink:0;font-family:var(--serif);font-weight:600;
}
.contact-info strong{display:block;color:var(--ink);margin-bottom:2px}
.contact-info a{color:var(--ink-soft)}
.contact-info a:hover{color:var(--terracotta)}
/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.article-card{
background:var(--surface);border-radius:var(--radius);overflow:hidden;
border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
display:flex;flex-direction:column;
}
.article-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.article-card .thumb{
aspect-ratio:16/10;
background:linear-gradient(135deg,var(--terracotta-soft),var(--green-soft));
position:relative;overflow:hidden;
}
.article-card .thumb::after{
content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.1) 100%);
opacity:0;transition:opacity .35s var(--ease);
}
.article-card:hover .thumb::after{opacity:1}
.article-card .thumb.g2{background:linear-gradient(135deg,#F3D9BF,#E8B98A)}
.article-card .thumb.g3{background:linear-gradient(135deg,var(--green-soft),#9FC0B0)}
.article-card .body{padding:28px 28px 30px;flex:1;display:flex;flex-direction:column}
.article-card .meta{
font-size:.8rem;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;
margin-bottom:10px;
}
.article-card h3{font-size:1.3rem;margin-bottom:10px}
.article-card p{flex:1}
.article-card .link{margin-top:14px;color:var(--terracotta);font-weight:600;font-size:.94rem}
/* ---------- Page head ---------- */
.page-head{
padding:clamp(64px,8vw,120px) 0 clamp(48px,5vw,68px);
background:
radial-gradient(800px 400px at 110% -10%,rgba(212,121,58,.15),transparent 60%),
linear-gradient(180deg,var(--warm-white) 0%,var(--warm-white-2) 100%);
text-align:center;position:relative;overflow:hidden;
}
.page-head::before{
content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;
border-radius:50%;background:radial-gradient(circle,rgba(212,121,58,.18),transparent 70%);
}
.page-head h1{max-width:14ch;margin:0 auto;position:relative;z-index:2}
.page-head .lead{margin:22px auto 0;text-align:center;position:relative;z-index:2}
/* ---------- Feature list ---------- */
.feature-list{display:grid;gap:22px;max-width:640px}
.feature-list li{
list-style:none;padding:22px 24px 22px 66px;
background:var(--surface);border:1px solid var(--line);border-radius:14px;
position:relative;box-shadow:var(--shadow-sm);
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature-list li:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.feature-list li::before{
content:"";position:absolute;left:22px;top:26px;
width:28px;height:28px;border-radius:50%;background:var(--terracotta-soft);
}
.feature-list li::after{
content:"";position:absolute;left:30px;top:34px;
width:10px;height:5px;border-left:2px solid var(--terracotta);
border-bottom:2px solid var(--terracotta);transform:rotate(-45deg);
}
.feature-list li strong{display:block;color:var(--ink);margin-bottom:3px}
.feature-list li span{color:var(--ink-soft);font-size:.95rem}
/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step{
position:relative;padding:28px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--terracotta-soft)}
.step::before{
counter-increment:s;content:"0" counter(s);
font-family:var(--serif);font-size:2.6rem;color:var(--terracotta);
display:block;margin-bottom:8px;line-height:1;
}
.step h4{margin-bottom:6px}
.step p{font-size:.93rem;margin:0}
/* ==========================================================
FOOTER (premium)
========================================================== */
footer{
position:relative;
background:var(--ink);color:#C9BDB0;
padding:84px 0 28px;margin-top:0;
}
html[data-theme="dark"] footer{background:#0C1012}
footer::before{
content:"";position:absolute;inset:0 0 auto 0;height:3px;
background:linear-gradient(90deg,var(--terracotta) 0%,var(--green) 100%);
}
footer::after{
content:"";position:absolute;right:-120px;top:40px;width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle,rgba(212,121,58,.08),transparent 70%);
pointer-events:none;
}
footer .wrap{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;
gap:44px;position:relative;z-index:2;
}
footer h4{color:#fff;font-size:1rem;margin-bottom:18px;font-family:var(--sans);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
footer .logo{color:#fff}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:#C9BDB0;font-size:.94rem;transition:color .2s var(--ease), padding-left .2s var(--ease)}
footer a:hover{color:var(--terracotta);padding-left:4px}
footer .tagline{max-width:32ch;margin:14px 0 20px;font-size:.94rem;line-height:1.6;color:#A89A8A}
footer .kvk{font-size:.86rem;color:#8C7E6F;line-height:1.7}
/* Social icons */
.footer-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.footer-social a{
width:38px;height:38px;border-radius:50%;
display:inline-grid;place-items:center;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
color:#C9BDB0;transition:all .25s var(--ease);
}
.footer-social a:hover{
background:var(--terracotta);color:#fff;border-color:var(--terracotta);
transform:translateY(-3px);box-shadow:0 10px 24px rgba(212,121,58,.35);padding-left:0;
}
.footer-social svg{width:16px;height:16px}
/* Newsletter signup */
.footer-newsletter{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
border-radius:var(--radius);padding:22px;
}
.footer-newsletter h4{margin-bottom:8px}
.footer-newsletter p{color:#A89A8A;font-size:.9rem;margin-bottom:14px;line-height:1.55}
.footer-newsletter form{display:flex;gap:8px}
.footer-newsletter input{
flex:1;min-width:0;padding:12px 14px;border-radius:10px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
color:#fff;font-size:.92rem;
}
.footer-newsletter input:focus{border-color:var(--terracotta);box-shadow:var(--ring-terracotta);background:rgba(255,255,255,.08)}
.footer-newsletter input::placeholder{color:#8C7E6F}
.footer-newsletter button{
padding:12px 18px;border:none;border-radius:10px;cursor:pointer;
background:var(--terracotta);color:#fff;font-weight:600;font-size:.92rem;font-family:var(--sans);
transition:all .25s var(--ease);
}
.footer-newsletter button:hover{background:var(--terracotta-dark);transform:translateY(-2px)}
/* Bottom bar */
footer .bottom{
margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
grid-column:1/-1;
display:flex;justify-content:space-between;align-items:center;
font-size:.86rem;color:#8C7E6F;flex-wrap:wrap;gap:14px;
}
footer .bottom-links{display:flex;gap:18px;flex-wrap:wrap}
footer .bottom-links a{font-size:.86rem;color:#8C7E6F}
footer .bottom-links a:hover{color:var(--terracotta);padding-left:0}
/* ---------- Back to top button ---------- */
.back-to-top{
position:fixed;right:22px;bottom:22px;z-index:var(--z-nav);
width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
background:var(--terracotta);color:#fff;
display:grid;place-items:center;
box-shadow:var(--shadow-terracotta);
opacity:0;visibility:hidden;transform:translateY(12px);
transition:all .3s var(--ease);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--terracotta-dark);transform:translateY(-4px);box-shadow:0 16px 38px rgba(212,121,58,.5)}
.back-to-top svg{width:18px;height:18px}
/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal-stagger.is-visible > *{opacity:1;transform:none}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:0s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.1s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.2s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.3s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.4s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.5s}
/* ---------- Mobile menu overlay ---------- */
@media (max-width:960px){
.menu-toggle{display:inline-flex}
nav.primary{
position:fixed;top:0;left:0;right:0;
height:100vh;height:100dvh;
z-index:9999;
background:var(--warm-white);
flex-direction:column;justify-content:flex-start;align-items:stretch;
gap:0;padding:96px 28px 40px;
transform:translateY(-100%);
transition:transform .4s var(--ease-out);
overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
html[data-theme="dark"] nav.primary{background:var(--warm-white)}
nav.primary.open{transform:translateY(0)}
nav.primary a{
padding:18px 4px;width:100%;
border-bottom:1px solid var(--line);
font-size:1.15rem;font-family:var(--serif);
opacity:0;transform:translateX(-16px);
transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), color .2s var(--ease);
}
nav.primary.open a{opacity:1;transform:translateX(0)}
nav.primary.open a:nth-child(1){transition-delay:.08s}
nav.primary.open a:nth-child(2){transition-delay:.14s}
nav.primary.open a:nth-child(3){transition-delay:.2s}
nav.primary.open a:nth-child(4){transition-delay:.26s}
nav.primary.open a:nth-child(5){transition-delay:.32s}
nav.primary.open a:nth-child(6){transition-delay:.38s}
nav.primary.open a:nth-child(7){transition-delay:.44s}
nav.primary.open a:nth-child(8){transition-delay:.5s}
nav.primary a.nav-cta{
margin-top:24px;border-bottom:none;text-align:center;
background:var(--terracotta);color:#fff !important;
border-radius:var(--radius-pill);padding:16px 22px;
}
nav.primary a.active::before{display:none}
nav.primary a.active::after{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleX(1);
width:3px;height:60%;background:var(--terracotta);border-radius:2px;bottom:auto;
}
body.menu-open{overflow:hidden}
}
/* ---------- Responsive breakpoints ---------- */
@media (max-width:1200px){
:root{--maxw:1080px}
}
@media (max-width:960px){
section{padding:clamp(50px,6vw,72px) 0}
.hero{padding:60px 0 80px}
.hero .wrap{grid-template-columns:1fr;gap:48px}
.hero-portrait{max-width:420px;margin:0 auto}
.usps .wrap{grid-template-columns:repeat(2,1fr);gap:28px}
.split{grid-template-columns:1fr;gap:48px}
.signature-tag{right:20px}
.traject-grid{grid-template-columns:1fr;gap:20px}
.traject.highlight{transform:none}
.traject.highlight:hover{transform:translateY(-5px)}
.cta-banner{grid-template-columns:1fr;padding:44px 32px;text-align:center}
.cta-banner .btn-white{justify-self:center}
.contact-grid{grid-template-columns:1fr;gap:36px}
.steps{grid-template-columns:repeat(2,1fr)}
footer .wrap{grid-template-columns:1fr 1fr;gap:32px}
.footer-newsletter{grid-column:1/-1}
.row{grid-template-columns:1fr}
.info-bar .wrap{font-size:.76rem;gap:10px}
.info-bar__left{gap:14px}
.info-bar__left .hide-sm{display:none}
}
@media (max-width:720px){
.info-bar__left span.hide-md{display:none}
footer .wrap{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
.usps .wrap{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.hero-ctas{flex-direction:column;align-items:stretch}
.btn{justify-content:center}
.back-to-top{right:14px;bottom:14px;width:44px;height:44px}
}
@media (max-width:480px){
:root{--radius:14px;--radius-lg:20px}
.topbar .wrap{padding:14px 18px}
form.contact{padding:28px 22px}
}
/* ---------- Photo support for person-based imagery ---------- */
.hero-portrait.has-photo,
.split .media.has-photo{
background:var(--warm-white-2);
}
.hero-portrait.has-photo::before,
.hero-portrait.has-photo::after,
.split .media.has-photo::before,
.split .media.has-photo::after{
display:none;
}
.hero-portrait .portrait-img,
.split .media .media-img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
border-radius:inherit;display:block;
}
.section-bg-img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;z-index:0;
opacity:.18;pointer-events:none;
}
.section-with-bg{position:relative;overflow:hidden}
.section-with-bg > .wrap{position:relative;z-index:1}
.inline-img{
display:block;width:100%;height:auto;border-radius:var(--radius);
box-shadow:var(--shadow-sm);margin:24px 0;
}
.quote-block{position:relative;overflow:hidden}
.quote-block .quote-bg-img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:.16;z-index:0;pointer-events:none;
}
.quote-block > *{position:relative;z-index:1}
/* ---------- Oriëntaals geïnspireerde geometrische divider ---------- */
.arabesque-divider{
position:relative;
height:72px;margin:0;padding:0;
background:
repeating-linear-gradient(45deg,
rgba(212,121,58,.08) 0 12px,
transparent 12px 24px),
repeating-linear-gradient(-45deg,
rgba(44,95,74,.06) 0 12px,
transparent 12px 24px);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.arabesque-divider::before,
.arabesque-divider::after{
content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.arabesque-divider::before{
width:44px;height:44px;
background:
radial-gradient(circle at 50% 50%, var(--terracotta) 0 5px, transparent 6px),
conic-gradient(from 0deg,
var(--terracotta) 0 12.5%, transparent 12.5% 25%,
var(--terracotta) 25% 37.5%, transparent 37.5% 50%,
var(--terracotta) 50% 62.5%, transparent 62.5% 75%,
var(--terracotta) 75% 87.5%, transparent 87.5% 100%);
opacity:.45;
mask:radial-gradient(circle, #000 18px, transparent 19px);
-webkit-mask:radial-gradient(circle, #000 18px, transparent 19px);
}
.arabesque-divider::after{
width:18px;height:18px;border-radius:50%;
background:var(--surface);
border:2px solid var(--terracotta);
}
html[data-theme="dark"] .arabesque-divider{
background:
repeating-linear-gradient(45deg,
rgba(212,121,58,.14) 0 12px,
transparent 12px 24px),
repeating-linear-gradient(-45deg,
rgba(44,95,74,.12) 0 12px,
transparent 12px 24px);
}
/* Logo image override — alleen SVG logo, geen tekst */
.logo-img { height: 48px; width: auto; display: block; }
.topbar .logo { padding: 4px 0; }
.topbar .logo-img { height: 44px; }
@media (max-width: 640px) {
.topbar .logo-img { height: 38px; }
}
/* Footer logo groter */
footer .logo-img { height: 64px; margin-bottom: 16px; }
/* Logo-only header (geen naam-tekst) */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 52px; width: 52px; transition: transform 0.3s ease; }
.logo:hover img { transform: rotate(-8deg) scale(1.05); }
@media (max-width: 720px) {
.logo img { height: 42px; width: 42px; }
}
/* Mobile header verbetering */
@media (max-width: 720px) {
.topbar { padding: 10px 16px; }
.info-bar { font-size: 11px; padding: 6px 12px; }
.info-bar-items { gap: 10px; flex-wrap: wrap; }
.menu-toggle { width: 44px; height: 44px; }
}
/* Media-image ratio fix */
.media-img, .portrait-img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow); object-fit: cover; }
.hero-photo { width: 100%; max-width: 520px; height: auto; border-radius: 18px; box-shadow: var(--shadow-lg); }
/* Mobile header — meer verticale ruimte + zichtbaar logo */
.topbar {
min-height: 72px !important;
padding: 14px 20px !important;
}
.logo picture, .logo picture img, .logo picture source { display: block; }
.logo picture img { height: 48px !important; width: auto !important; max-width: 220px; }
.menu-toggle {
min-width: 52px !important;
min-height: 52px !important;
padding: 14px !important;
border-radius: 12px !important;
background: rgba(44,95,74,.06) !important;
border: 1px solid rgba(44,95,74,.15) !important;
}
.menu-toggle:hover, .menu-toggle:focus-visible {
background: rgba(44,95,74,.12) !important;
border-color: rgba(44,95,74,.35) !important;
}
.menu-toggle__bars span { width: 22px; height: 2px; background: var(--ink); display: block; margin: 4px auto; }
@media (min-width: 721px) {
.logo picture img { height: 68px !important; max-width: 320px; }
.topbar { min-height: 96px !important; padding: 18px 32px !important; }
}
@media (max-width: 480px) {
.logo picture img { height: 42px !important; max-width: 180px; }
.menu-toggle { min-width: 48px !important; min-height: 48px !important; }
}
/* ===== HEADER + FOOTER BREEDER + CTA-KNOP PADDING ===== */
/* Header + footer krijgen eigen wrap met grotere breedte */
.topbar .wrap,
.site-footer .wrap {
max-width: 1440px !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* Nav-items meer ademruimte */
nav.primary ul { gap: 28px; }
nav.primary a { padding: 8px 4px; font-size: 15px; }
/* CTA knop in header - groter + meer padding */
.topbar .btn-cta,
.topbar a.btn-primary,
.topbar a.btn {
padding: 14px 28px !important;
font-size: 15px !important;
border-radius: 999px !important;
white-space: nowrap;
min-height: 48px;
display: inline-flex;
align-items: center;
line-height: 1;
}
/* Logo iets groter op desktop voor balans */
@media (min-width: 961px) {
.logo img { height: 58px !important; width: 58px !important; }
}
/* Footer wrap ook breder + betere padding */
.site-footer { padding-top: 64px; padding-bottom: 32px; }
.site-footer .footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
gap: 48px;
margin-bottom: 40px;
}
@media (max-width: 1080px) {
.site-footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
.topbar .wrap, .site-footer .wrap { padding-left: 18px !important; padding-right: 18px !important; }
}
/* Tab-pill CTA meer visueel gewicht */
.topbar .btn-cta:hover,
.topbar a.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(44, 95, 74, 0.35);
}
/* ===== PREMIUM WIDGET UPGRADES ===== */
/* Testimonial slider met scroll-snap */
.testimonial-slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 24px;
padding: 8px 4px 24px;
scrollbar-width: none;
}
.testimonial-slider::-webkit-scrollbar { display: none; }
.testimonial-slider .testimonial-card {
flex: 0 0 min(420px, 85vw);
scroll-snap-align: start;
}
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.slider-dot {
width: 10px; height: 10px; border-radius: 50%; border: 0;
background: rgba(44, 95, 74, 0.2); cursor: pointer; transition: all .3s;
}
.slider-dot.active { background: var(--terracotta, #D4793A); transform: scale(1.4); }
/* FAQ smooth accordion met + → × morph */
details.faq-item { border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 0; overflow: hidden; transition: all .3s; background: #fff; margin-bottom: 12px; }
details.faq-item[open] { box-shadow: var(--shadow); border-color: rgba(212, 121, 58, 0.3); }
details.faq-item summary { padding: 20px 24px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: '+'; font-size: 1.8rem; font-weight: 300; color: var(--terracotta, #D4793A); transition: transform .35s cubic-bezier(.22,1,.36,1); line-height: 1; }
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item > *:not(summary) { padding: 0 24px 24px; animation: faqFade .4s ease both; }
@keyframes faqFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Image hover zoom op cards */
.card img, .blog-card img, .article-card img {
transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.card:hover img, .blog-card:hover img, .article-card:hover img {
transform: scale(1.06);
}
.card, .blog-card, .article-card {
overflow: hidden;
}
/* Stats count-up - groter visueel */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin: 40px 0; }
.stat-item { text-align: center; padding: 24px 16px; border-radius: 14px; background: rgba(212, 121, 58, 0.04); }
.stat-num { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 900; color: var(--terracotta, #D4793A); font-family: 'Cormorant Garamond', serif; line-height: 1; display: block; }
.stat-label { font-size: 0.92rem; color: var(--ink-soft, #5b5b5b); margin-top: 8px; display: block; font-weight: 600; }
/* Link hover met pijl-slide */
.link { color: var(--terracotta, #D4793A); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.link::after { content: '→'; transition: transform .3s; }
.link:hover::after { transform: translateX(4px); }
/* Blog card thumb zoom + overlay */
.blog-card .thumb { overflow: hidden; aspect-ratio: 16/10; position: relative; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(44, 95, 74, 0.3)); opacity: 0; transition: opacity .4s; }
.blog-card:hover .thumb::after { opacity: 1; }
/* ═══ Footer polish — lichter, leesbaarder ═══ */
.site-footer, footer { background: #2C5F4A !important; }
.site-footer *, footer > *, footer p, footer a, footer li, footer h3, footer h4 {
color: #F5EFE4 !important;
}
.site-footer a:hover, footer a:hover { color: #F5DDD0 !important; }
.site-footer .logo, footer .logo { background: #FAF7F2; border-radius: 50%; padding: 8px; display: inline-block; width: 72px; height: 72px; margin-bottom: 16px; }
.site-footer .logo-img, footer .logo-img { height: 56px !important; width: auto; }
footer h3, footer h4, footer .footer-col h4 { color: #FFE9D4 !important; font-family: var(--serif); letter-spacing: 0.5px; }
/* Newsletter "Blijf op de hoogte" box */
footer .newsletter, footer .newsletter-box, footer form.newsletter {
background: rgba(245,221,208,.10) !important;
border: 1px solid rgba(245,221,208,.25) !important;
padding: 24px !important;
border-radius: 16px !important;
}
footer .newsletter h3, footer .newsletter h4 { color: #FFE9D4 !important; margin-bottom: 8px; }
footer .newsletter p { color: #E8DED0 !important; font-size: 0.92rem; }
footer .newsletter input[type=email], footer .newsletter input[type=text] {
background: #FAF7F2 !important; color: #3D3229 !important;
border: 1px solid rgba(245,221,208,.4) !important;
padding: 10px 14px !important; border-radius: 10px !important;
width: 100%; margin-bottom: 10px;
}
footer .newsletter input::placeholder { color: rgba(61,50,41,.55) !important; }
footer .newsletter button, footer .newsletter .btn {
background: var(--terracotta) !important; color: #fff !important;
border: 0 !important; padding: 11px 24px !important; width: 100%;
border-radius: 10px !important; font-weight: 600 !important; cursor: pointer;
}
footer .newsletter button:hover { background: var(--terracotta-dark) !important; transform: translateY(-1px); }
/* Social icons lichter */
.social-icons a, footer .social a { background: rgba(245,221,208,.12); color: #FAF7F2 !important; border-radius: 50%; width: 40px; height: 40px; display: inline-grid !important; place-items: center; margin-right: 8px; transition: all .25s; }
.social-icons a:hover, footer .social a:hover { background: var(--terracotta); color: #fff !important; transform: translateY(-2px); }
/* Back-to-top knop */
.back-to-top, #back-to-top { background: var(--terracotta) !important; color: #fff !important; box-shadow: 0 10px 30px rgba(212,121,58,.4) !important; }
/* ═══ Premium widgets v3 — galleries, quote-cards, trusted-by ═══ */
/* "Vertrouwd door" logo-strip — text-based elegant */
.trusted-by { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trusted-by h4 { text-align: center; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 28px; }
.trusted-logos { display: flex; justify-content: center; gap: clamp(24px, 5vw, 56px); flex-wrap: wrap; align-items: center; opacity: 0.65; }
.trusted-logo { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.01em; transition: opacity .3s; font-style: italic; }
.trusted-logo:nth-child(even) { font-family: var(--sans); font-style: normal; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; }
.trusted-logos:hover .trusted-logo { opacity: 0.5; }
.trusted-logo:hover { opacity: 1 !important; color: var(--terracotta); }
/* Image-gallery grid */
.image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 32px 0; }
.image-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; transition: transform .35s var(--ease-out), box-shadow .35s; box-shadow: var(--shadow-sm); }
.image-gallery img:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow); }
/* Quote-card met round foto */
.quote-with-photo { display: flex; gap: 24px; align-items: center; background: var(--surface); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--terracotta); margin: 40px 0; flex-wrap: wrap; }
.quote-with-photo .q-photo { flex: 0 0 160px; }
.quote-with-photo .q-photo img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.quote-with-photo .q-content { flex: 1; min-width: 260px; }
.quote-with-photo blockquote { font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--ink); margin: 0 0 12px; line-height: 1.4; }
.quote-with-photo .q-author { color: var(--terracotta); font-weight: 600; letter-spacing: 0.02em; }
.quote-with-photo .q-author small { display: block; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }
/* Hero split-image — portret rechts op desktop */
.hero-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hero-split .hero-photo { width: 100%; max-width: 560px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); margin-left: auto; }
@media (max-width: 820px) { .hero-split { grid-template-columns: 1fr; } .hero-split .hero-photo { max-width: 420px; margin: 24px auto 0; } }
/* ═══ Sticky mobile CTA bar — conversion optimizer ═══ */
.mobile-cta-bar {
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 95;
background: linear-gradient(135deg, var(--terracotta), var(--terracotta-dark));
padding: 12px 16px 16px;
box-shadow: 0 -8px 24px rgba(61,50,41,.18);
display: none;
transform: translateY(100%);
transition: transform .3s var(--ease-out);
}
.mobile-cta-bar.show { transform: translateY(0); }
.mobile-cta-bar a {
display: block;
background: #fff; color: var(--terracotta-dark) !important;
text-align: center; padding: 14px; border-radius: 12px;
font-weight: 700; font-size: 1rem;
box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.mobile-cta-bar a:hover { background: #fffaf5; transform: translateY(-1px); }
@media (max-width: 720px) {
.mobile-cta-bar { display: block; }
body { padding-bottom: 76px; } /* Ruimte voor sticky bar */
.back-to-top { bottom: 86px !important; }
}
/* ═══ Gallery captions on hover ═══ */
.image-gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: 14px; }
.image-gallery figcaption {
position: absolute; inset: auto 0 0 0;
background: linear-gradient(to top, rgba(15,14,13,.82), transparent);
color: #fff; padding: 20px 16px 14px; font-size: .88rem; font-weight: 500;
opacity: 0; transform: translateY(10px); transition: all .3s var(--ease-out);
}
.image-gallery figure:hover figcaption { opacity: 1; transform: translateY(0); }
/* ═══ Better focus rings ═══ */
a:focus-visible, button:focus-visible {
outline: 3px solid var(--terracotta) !important;
outline-offset: 3px;
border-radius: 8px;
}
/* ═══ Form improvements ═══ */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
width: 100%; padding: 13px 16px; border-radius: 10px;
border: 1px solid var(--line); background: var(--surface);
font-family: var(--sans); font-size: 1rem; color: var(--ink);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, textarea:focus, select:focus {
outline: none !important; border-color: var(--terracotta);
box-shadow: 0 0 0 4px rgba(212,121,58,.15);
}
/* ============================================================
PREMIUM HOMEPAGE V3 — motivadiensten.nl
Prefix: .mc- (scoped to new sections only)
Author: homepage-premium agent — 2026-04-21
============================================================ */
:root{
--mc-ease: cubic-bezier(.22,.61,.36,1);
--mc-ease-out: cubic-bezier(.16,1,.3,1);
--mc-script: 'Caveat', 'Brush Script MT', cursive;
}
.mc-eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--sans); font-size: .78rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--terracotta);
margin-bottom: 20px;
}
.mc-eyebrow::before{
content:""; width: 28px; height: 1px; background: var(--terracotta); opacity:.7;
}
.mc-eyebrow--light{ color: #F5DDD0; }
.mc-eyebrow--light::before{ background:#F5DDD0; opacity:.7; }
.mc-head{
max-width: 720px; margin: 0 auto 56px;
text-align: center;
}
.mc-head h2{
font-family: var(--serif); font-weight: 500;
font-size: clamp(2rem, 4.2vw, 3.2rem);
line-height: 1.1; color: var(--green-dark);
margin: 0 0 18px;
letter-spacing: -.01em;
}
.mc-head h2 em{
font-style: italic; color: var(--terracotta); font-weight: 400;
}
.mc-head p{
color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65;
margin: 0;
}
.mc-head--center{ margin-top: 48px; text-align: center; }
/* ---------- BUTTONS ---------- */
.mc-btn{
display: inline-flex; align-items: center; gap: 10px;
padding: 15px 28px;
font-family: var(--sans); font-size: .96rem; font-weight: 600;
letter-spacing: .01em;
border-radius: var(--radius-pill);
text-decoration: none;
transition: transform .3s var(--mc-ease), box-shadow .3s var(--mc-ease),
background .3s var(--mc-ease), color .3s var(--mc-ease);
border: 1.5px solid transparent;
cursor: pointer; white-space: nowrap;
}
.mc-btn svg{ width: 18px; height: 18px; transition: transform .3s var(--mc-ease); }
.mc-btn:hover svg{ transform: translateX(3px); }
.mc-btn--primary{
background: var(--terracotta);
color: #fff !important;
box-shadow: 0 10px 24px rgba(212,121,58,.32);
}
.mc-btn--primary:hover{
background: var(--terracotta-dark);
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(212,121,58,.42);
}
.mc-btn--ghost{
background: transparent; color: var(--green-dark);
border-color: var(--green-dark);
}
.mc-btn--ghost:hover{
background: var(--green-dark); color: #fff !important;
transform: translateY(-2px);
}
.mc-btn--outline{
background: transparent; color: var(--green-dark);
border-color: var(--line);
}
.mc-btn--outline:hover{
border-color: var(--terracotta); color: var(--terracotta);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(212,121,58,.14);
}
.mc-btn--text{
padding: 15px 6px; background: transparent; color: var(--terracotta);
font-weight: 700; border: none;
}
.mc-btn--text:hover{ color: var(--terracotta-dark); }
.mc-btn--light-ghost{
background: rgba(255,255,255,.1);
color:#fff !important;
border-color: rgba(255,255,255,.3);
backdrop-filter: blur(6px);
}
.mc-btn--light-ghost:hover{
background: rgba(255,255,255,.2); transform: translateY(-2px);
border-color: rgba(255,255,255,.5);
}
.mc-btn--lg{ padding: 18px 36px; font-size: 1rem; }
/* ============================================================
1. HERO
============================================================ */
.mc-hero{
position: relative; overflow: hidden;
padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 120px);
background: var(--warm-white);
isolation: isolate;
}
.mc-hero__mesh{
position: absolute; inset: -10% -10% -10% -10%;
background:
radial-gradient(closest-side at 18% 25%, rgba(245,221,208,.95), transparent 62%),
radial-gradient(closest-side at 85% 65%, rgba(214,228,220,.75), transparent 65%),
radial-gradient(closest-side at 70% 10%, rgba(243,217,191,.8), transparent 60%),
linear-gradient(180deg, #FAF7F2 0%, #F3EDE3 100%);
filter: blur(2px);
z-index:-2;
animation: mc-mesh-drift 22s ease-in-out infinite alternate;
}
@keyframes mc-mesh-drift{
0% { transform: translate3d(0,0,0) scale(1); }
100%{ transform: translate3d(-2%, 1%, 0) scale(1.04); }
}
.mc-hero__grain{
position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
.mc-hero__wrap{
display: grid; grid-template-columns: 1.05fr .95fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
@media (max-width: 900px){
.mc-hero__wrap{ grid-template-columns: 1fr; }
}
.mc-hero__title{
font-family: var(--serif); font-weight: 500;
font-size: clamp(2.4rem, 5.4vw, 4.4rem);
line-height: 1.03;
color: var(--green-darker);
letter-spacing: -.015em;
margin: 0 0 24px;
}
.mc-hero__title > span{
display: inline-block; opacity: 0;
transform: translateY(28px);
transition: opacity .7s var(--mc-ease-out), transform .7s var(--mc-ease-out);
margin-right: .18em;
}
.mc-hero__title.is-visible > span{ opacity: 1; transform: none; }
.mc-hero__title.is-visible > span:nth-child(1){ transition-delay: .05s; }
.mc-hero__title.is-visible > span:nth-child(2){ transition-delay: .12s; }
.mc-hero__title.is-visible > span:nth-child(3){ transition-delay: .19s; }
.mc-hero__title.is-visible > span:nth-child(4){ transition-delay: .26s; }
.mc-hero__title.is-visible > span:nth-child(5){ transition-delay: .33s; }
.mc-hero__title.is-visible > span:nth-child(6){ transition-delay: .4s; }
.mc-hero__title.is-visible > span:nth-child(7){ transition-delay: .47s; }
.mc-hero__title.is-visible > span:nth-child(8){ transition-delay: .54s; }
.mc-hero__accent em{
color: var(--terracotta); font-style: italic; font-weight: 500;
position: relative; white-space: nowrap;
}
.mc-hero__accent em::after{
content:""; position: absolute;
left: 0; right: 0; bottom: -4px;
height: 10px;
background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
}
.mc-hero__lead{
font-size: 1.14rem; line-height: 1.65; color: var(--ink);
max-width: 540px; margin: 0 0 32px;
opacity: 0; transform: translateY(20px);
animation: mc-fade-in .8s .8s var(--mc-ease-out) both;
}
.mc-hero__ctas{
display: flex; flex-wrap: wrap; gap: 14px;
margin-bottom: 44px;
opacity: 0;
animation: mc-fade-in .8s 1s var(--mc-ease-out) both;
}
@keyframes mc-fade-in{
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.mc-hero__stats{
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
gap: 16px;
padding-top: 28px; border-top: 1px solid rgba(61,50,41,.1);
opacity: 0;
animation: mc-fade-in 1s 1.2s var(--mc-ease-out) both;
}
.mc-hero__stats li{
display: flex; flex-direction: column; gap: 4px;
}
.mc-hero__stats strong{
font-family: var(--serif); font-weight: 500;
font-size: clamp(1.4rem, 2vw, 1.8rem);
color: var(--terracotta); line-height: 1;
}
.mc-hero__stats span{
font-size: .76rem; color: var(--ink-soft);
letter-spacing: .04em; line-height: 1.3;
}
@media (max-width: 640px){
.mc-hero__stats{ grid-template-columns: repeat(2,1fr); gap: 20px 14px; }
}
/* hero visual */
.mc-hero__visual{
position: relative;
opacity: 0;
animation: mc-fade-in 1s .5s var(--mc-ease-out) both;
}
.mc-hero__frame{
position: relative;
aspect-ratio: 4 / 5;
max-width: 520px; margin: 0 auto;
border-radius: 200px 200px 28px 28px;
overflow: hidden;
box-shadow: 0 40px 90px rgba(61,50,41,.22), 0 4px 20px rgba(61,50,41,.08);
transform: translateX(20px);
animation: mc-hero-slide-in 1s .4s var(--mc-ease-out) both;
}
@keyframes mc-hero-slide-in{
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: none; }
}
.mc-hero__photo{
width: 100%; height: 100%; object-fit: cover; object-position: center top;
display: block;
filter: saturate(1.02) contrast(1.02);
transition: transform .8s var(--mc-ease);
}
.mc-hero__frame:hover .mc-hero__photo{ transform: scale(1.04); }
.mc-hero__glow{
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(closest-side at 30% 90%, rgba(212,121,58,.18), transparent 60%);
mix-blend-mode: soft-light;
}
.mc-hero__badge{
position: absolute;
left: -12px; bottom: 64px;
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,.94);
backdrop-filter: blur(10px);
padding: 12px 18px 12px 14px;
border-radius: var(--radius-pill);
box-shadow: 0 18px 40px rgba(61,50,41,.18);
border: 1px solid rgba(255,255,255,.6);
max-width: 260px;
animation: mc-badge-pop 1s 1.4s var(--mc-ease-out) both;
}
@keyframes mc-badge-pop{
from { opacity: 0; transform: translateY(16px) scale(.9); }
to { opacity: 1; transform: none; }
}
.mc-hero__badge svg{ width: 30px; height: 30px; color: var(--terracotta); flex-shrink: 0; }
.mc-hero__badge strong{
display: block; font-family: var(--serif); font-style: italic;
font-size: 1.02rem; color: var(--green-dark); font-weight: 500;
line-height: 1.1;
}
.mc-hero__badge small{
font-size: .75rem; color: var(--ink-soft); line-height: 1.35;
}
.mc-hero__rating{
position: absolute; top: 28px; right: -8px;
background: #fff;
padding: 10px 16px; border-radius: var(--radius-pill);
box-shadow: 0 14px 30px rgba(61,50,41,.15);
text-align: center;
animation: mc-badge-pop 1s 1.6s var(--mc-ease-out) both;
}
.mc-stars{ color: var(--terracotta); font-size: 1rem; letter-spacing: 2px; line-height: 1; }
.mc-hero__rating small{ display:block; font-size: .72rem; color: var(--ink-soft); margin-top: 3px; font-weight: 600; }
/* ============================================================
2. MARQUEE
============================================================ */
.mc-marquee{
padding: 32px 0;
background: linear-gradient(90deg, transparent, rgba(214,228,220,.3), transparent);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.mc-marquee__wrap{
display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px;
}
@media(max-width:640px){ .mc-marquee__wrap{ grid-template-columns: 1fr; gap: 14px; } }
.mc-marquee__label{
font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink-soft); font-weight: 600;
white-space: nowrap;
}
.mc-marquee__track{
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mc-marquee__row{
display: inline-flex; align-items: center; gap: 36px;
white-space: nowrap;
animation: mc-marquee 34s linear infinite;
padding-left: 36px;
}
.mc-marquee__row > span{
font-family: var(--serif); font-style: italic; font-weight: 500;
font-size: 1.3rem; color: var(--green-dark); opacity: .72;
}
.mc-marquee__row > span[aria-hidden="true"]{
color: var(--terracotta); opacity: .8; font-size: 1.5rem;
}
@keyframes mc-marquee{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================================
3. USPs
============================================================ */
.mc-usps{
padding: clamp(64px, 8vw, 104px) 0;
background: var(--surface);
}
.mc-usps__grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
@media(max-width:900px){ .mc-usps__grid{ grid-template-columns: repeat(2, 1fr); } }
@media(max-width:520px){ .mc-usps__grid{ grid-template-columns: 1fr; } }
.mc-usp{
position: relative;
padding: 32px 26px;
background: var(--warm-white);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: transform .4s var(--mc-ease), box-shadow .4s var(--mc-ease),
border-color .4s var(--mc-ease);
}
.mc-usp:hover{
transform: translateY(-6px);
box-shadow: 0 22px 50px rgba(61,50,41,.1);
border-color: var(--terracotta-soft);
}
.mc-usp__icon{
width: 54px; height: 54px;
display: grid; place-items: center;
background: var(--terracotta-soft);
color: var(--terracotta);
border-radius: 16px;
margin-bottom: 20px;
transition: transform .5s var(--mc-ease), background .3s var(--mc-ease);
}
.mc-usp__icon svg{ width: 26px; height: 26px; }
.mc-usp:hover .mc-usp__icon{
transform: rotate(-6deg) scale(1.06);
background: var(--terracotta); color: #fff;
}
.mc-usp h3{
font-family: var(--serif); font-weight: 500;
font-size: 1.4rem; color: var(--green-dark);
margin: 0 0 8px;
}
.mc-usp p{
font-size: .94rem; color: var(--ink-soft); line-height: 1.55; margin: 0;
}
/* ============================================================
4. THEME CARDS
============================================================ */
.mc-themes{
padding: clamp(72px, 10vw, 120px) 0;
background: linear-gradient(180deg, var(--warm-white-2) 0%, var(--warm-white) 100%);
}
.mc-theme-grid{
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media(max-width:900px){ .mc-theme-grid{ grid-template-columns: 1fr; } }
.mc-theme{
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: #fff;
text-decoration: none; color: inherit;
box-shadow: 0 14px 40px rgba(61,50,41,.07);
transition: transform .5s var(--mc-ease), box-shadow .5s var(--mc-ease);
display: flex; flex-direction: column;
}
.mc-theme:hover{
transform: translateY(-8px);
box-shadow: 0 28px 64px rgba(61,50,41,.16);
}
.mc-theme__photo{
aspect-ratio: 4/3; overflow: hidden; position: relative;
}
.mc-theme__photo::after{
content:""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(44,95,74,.5) 100%);
}
.mc-theme__photo img{
width: 100%; height: 100%; object-fit: cover;
transition: transform .8s var(--mc-ease);
}
.mc-theme:hover .mc-theme__photo img{ transform: scale(1.08); }
.mc-theme__body{
padding: 28px 28px 32px;
position: relative;
}
.mc-theme__num{
position: absolute;
top: -34px; right: 24px;
width: 60px; height: 60px;
display: grid; place-items: center;
background: var(--terracotta); color: #fff;
font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
border-radius: 50%;
box-shadow: 0 12px 28px rgba(212,121,58,.42);
transition: transform .4s var(--mc-ease);
}
.mc-theme:hover .mc-theme__num{ transform: rotate(10deg) scale(1.08); }
.mc-theme__body h3{
font-family: var(--serif); font-weight: 500;
font-size: 1.75rem; color: var(--green-dark);
margin: 0 0 12px;
}
.mc-theme__body p{
color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px;
font-size: .98rem;
}
.mc-theme__cta{
display: inline-flex; align-items: center; gap: 8px;
color: var(--terracotta); font-weight: 600; font-size: .9rem;
}
.mc-theme__cta svg{ width: 16px; height: 16px; transition: transform .3s var(--mc-ease); }
.mc-theme:hover .mc-theme__cta svg{ transform: translateX(5px); }
/* ============================================================
5. ABOUT SPLIT
============================================================ */
.mc-about{
padding: clamp(80px, 10vw, 128px) 0;
background: var(--surface);
position: relative;
}
.mc-about__wrap{
display: grid; grid-template-columns: .95fr 1.05fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
@media(max-width:900px){ .mc-about__wrap{ grid-template-columns: 1fr; } }
.mc-about__media{
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 32px 72px rgba(61,50,41,.18);
}
.mc-about__media::before{
content:""; position: absolute;
top: -24px; left: -24px; right: 18%; bottom: 18%;
background: var(--terracotta-soft); border-radius: var(--radius-lg);
z-index: -1;
}
.mc-about__media img{
width: 100%; height: 100%; object-fit: cover;
}
.mc-about__tag{
position: absolute; left: 24px; bottom: 24px;
display: inline-flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.95);
padding: 10px 18px; border-radius: var(--radius-pill);
font-size: .82rem; font-weight: 600; color: var(--green-dark);
letter-spacing: .04em;
backdrop-filter: blur(8px);
box-shadow: 0 10px 24px rgba(0,0,0,.1);
}
.mc-about__tag-dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--terracotta);
box-shadow: 0 0 0 4px rgba(212,121,58,.25);
animation: mc-pulse 2.5s ease-out infinite;
}
@keyframes mc-pulse{
0%, 100% { box-shadow: 0 0 0 4px rgba(212,121,58,.25); }
50% { box-shadow: 0 0 0 9px rgba(212,121,58,0); }
}
.mc-about__text h2{
font-family: var(--serif); font-weight: 500;
font-size: clamp(2rem, 4.6vw, 3.5rem);
line-height: 1.05;
color: var(--green-darker);
margin: 0 0 28px;
letter-spacing: -.015em;
}
.mc-about__text h2 em{
color: var(--terracotta); font-style: italic; font-weight: 500;
}
.mc-about__text p{
font-size: 1.02rem; line-height: 1.7; color: var(--ink);
margin: 0 0 18px;
}
.mc-signature{
display: block; font-family: var(--mc-script);
font-size: 2.6rem; color: var(--terracotta);
margin: 12px 0 28px; line-height: 1;
transform: rotate(-3deg); transform-origin: left center;
}
.mc-about__ctas{
display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
}
/* ============================================================
6. STEPPER
============================================================ */
.mc-steps{
padding: clamp(72px, 10vw, 120px) 0;
background: linear-gradient(180deg, var(--warm-white) 0%, var(--warm-white-2) 100%);
}
.mc-stepper{
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
counter-reset: step;
}
.mc-stepper::before{
content:""; position: absolute;
top: 36px; left: 6%; right: 6%;
height: 2px;
background: repeating-linear-gradient(to right, var(--terracotta-soft) 0 8px, transparent 8px 16px);
z-index: 0;
}
@media(max-width:900px){
.mc-stepper{ grid-template-columns: repeat(2, 1fr); }
.mc-stepper::before{ display: none; }
}
@media(max-width:520px){
.mc-stepper{ grid-template-columns: 1fr; }
}
.mc-step{
position: relative; z-index: 1;
background: #fff;
padding: 32px 24px 28px;
border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(61,50,41,.06);
transition: transform .4s var(--mc-ease), box-shadow .4s var(--mc-ease);
text-align: center;
}
.mc-step:hover{
transform: translateY(-8px) scale(1.02);
box-shadow: 0 24px 52px rgba(61,50,41,.14);
}
.mc-step__num{
width: 72px; height: 72px;
margin: 0 auto 20px;
background: #fff;
color: var(--terracotta);
border: 2px solid var(--terracotta);
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--serif); font-size: 1.4rem; font-weight: 500;
transition: background .3s var(--mc-ease), color .3s var(--mc-ease), transform .3s var(--mc-ease);
}
.mc-step:hover .mc-step__num{
background: var(--terracotta); color: #fff;
transform: rotate(-8deg);
}
.mc-step h3{
font-family: var(--serif); font-weight: 500;
font-size: 1.35rem; color: var(--green-dark);
margin: 0 0 10px;
}
.mc-step p{
font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin: 0;
}
/* ============================================================
7. COUNTERS
============================================================ */
.mc-counters{
padding: clamp(64px, 9vw, 112px) 0;
background: var(--green-dark);
color: #fff;
position: relative;
overflow: hidden;
}
.mc-counters::before{
content:""; position: absolute;
inset: 0;
background:
radial-gradient(closest-side at 20% 30%, rgba(212,121,58,.28), transparent 60%),
radial-gradient(closest-side at 85% 70%, rgba(245,221,208,.12), transparent 60%);
pointer-events: none;
}
.mc-counters .mc-eyebrow{ color: #F5DDD0; }
.mc-counters .mc-eyebrow::before{ background: #F5DDD0; }
.mc-counters .mc-head h2{ color: #fff; }
.mc-counter-grid{
display: grid; grid-template-columns: repeat(4,1fr);
gap: 28px;
position: relative;
}
@media(max-width:900px){ .mc-counter-grid{ grid-template-columns: repeat(2,1fr); gap: 40px 24px; } }
@media(max-width:520px){ .mc-counter-grid{ grid-template-columns: 1fr; } }
.mc-counter{
text-align: center;
padding: 16px;
position: relative;
}
.mc-counter + .mc-counter::before{
content:""; position: absolute;
left: -14px; top: 12%; bottom: 12%;
width: 1px;
background: rgba(255,255,255,.15);
}
@media(max-width:900px){ .mc-counter + .mc-counter::before{ display: none; } }
.mc-counter__num{
display: block;
font-family: var(--serif); font-weight: 500;
font-size: clamp(3rem, 6vw, 4.4rem);
line-height: 1;
color: #F5DDD0;
letter-spacing: -.02em;
}
.mc-counter__label{
display: block;
font-family: var(--sans); font-weight: 600;
font-size: .88rem; letter-spacing: .12em; text-transform: uppercase;
color: #fff;
margin-top: 14px;
}
.mc-counter small{
display: block;
font-size: .78rem; color: rgba(255,255,255,.6);
margin-top: 6px;
}
/* ============================================================
8. TESTIMONIAL CAROUSEL
============================================================ */
.mc-carousel-section{
padding: clamp(72px, 10vw, 120px) 0;
background: var(--warm-white);
}
.mc-carousel{
position: relative;
}
.mc-carousel__track{
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(min(100%, 400px), 1fr);
gap: 24px;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 8px 4px 40px;
scroll-padding-inline: 4px;
}
.mc-carousel__track::-webkit-scrollbar{ display: none; }
@media(min-width: 720px){
.mc-carousel__track{
grid-auto-columns: calc((100% - 48px) / 3);
}
}
@media(min-width: 1024px){
.mc-carousel__track{
grid-auto-columns: calc((100% - 48px) / 3);
}
}
.mc-tc{
scroll-snap-align: start;
background: #fff;
padding: 32px 28px 26px;
border-radius: var(--radius-lg);
box-shadow: 0 14px 40px rgba(61,50,41,.08);
display: flex; flex-direction: column;
border: 1px solid var(--line);
transition: transform .4s var(--mc-ease), box-shadow .4s var(--mc-ease);
position: relative;
}
.mc-tc::before{
content: "\201C"; /* left double quote */
position: absolute;
top: 4px; right: 22px;
font-family: var(--serif);
font-size: 6rem; line-height: 1;
color: var(--terracotta-soft);
pointer-events: none;
}
.mc-tc:hover{
transform: translateY(-4px);
box-shadow: 0 24px 56px rgba(61,50,41,.14);
}
.mc-tc__stars{
color: var(--terracotta); letter-spacing: 3px;
margin-bottom: 16px; font-size: .95rem;
}
.mc-tc blockquote{
margin: 0 0 22px;
font-family: var(--serif); font-weight: 400;
font-size: 1.08rem; line-height: 1.55;
color: var(--ink); font-style: italic;
flex: 1;
}
.mc-tc footer{
display: flex; align-items: center; gap: 12px;
padding-top: 16px; border-top: 1px solid var(--line);
}
.mc-tc__avatar{
width: 42px; height: 42px;
display: grid; place-items: center;
background: var(--green-dark); color: #fff;
border-radius: 50%;
font-family: var(--serif); font-weight: 500; font-size: 1.2rem;
flex-shrink: 0;
}
.mc-tc footer strong{
display: block; color: var(--ink); font-size: .98rem; font-weight: 600;
}
.mc-tc footer small{
display: block; color: var(--ink-soft); font-size: .78rem;
margin-top: 2px;
}
.mc-carousel__nav{
display: flex; align-items: center; justify-content: center;
gap: 24px;
margin-top: 8px;
}
.mc-carousel__btn{
width: 44px; height: 44px;
display: grid; place-items: center;
background: #fff; color: var(--green-dark);
border: 1.5px solid var(--line);
border-radius: 50%;
cursor: pointer;
transition: background .25s var(--mc-ease), color .25s var(--mc-ease), border-color .25s var(--mc-ease), transform .25s var(--mc-ease);
}
.mc-carousel__btn:hover{
background: var(--terracotta); color: #fff; border-color: var(--terracotta);
transform: scale(1.06);
}
.mc-carousel__btn svg{ width: 18px; height: 18px; }
.mc-carousel__dots{
display: flex; gap: 10px; align-items: center;
}
.mc-carousel__dot{
width: 9px; height: 9px;
border-radius: 50%;
background: var(--line);
border: none; padding: 0; cursor: pointer;
transition: all .3s var(--mc-ease);
}
.mc-carousel__dot:hover{ background: var(--terracotta-soft); }
.mc-carousel__dot.is-active{
width: 26px; border-radius: 6px; background: var(--terracotta);
}
/* ============================================================
9. MOSAIC
============================================================ */
.mc-mosaic{
padding: clamp(72px, 10vw, 120px) 0;
background: var(--warm-white-2);
}
.mc-mosaic__grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
gap: 14px;
}
@media(max-width:900px){
.mc-mosaic__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
}
@media(max-width:520px){
.mc-mosaic__grid{ grid-template-columns: 1fr; grid-auto-rows: 260px; }
}
.mc-mosaic__item{
position: relative;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 10px 26px rgba(61,50,41,.08);
cursor: pointer;
transition: transform .5s var(--mc-ease), box-shadow .5s var(--mc-ease);
}
.mc-mosaic__item--tall{ grid-row: span 2; }
.mc-mosaic__item--wide{ grid-column: span 2; }
@media(max-width:520px){
.mc-mosaic__item--tall, .mc-mosaic__item--wide{ grid-row: auto; grid-column: auto; }
}
.mc-mosaic__item img{
width: 100%; height: 100%; object-fit: cover;
transition: transform .8s var(--mc-ease), filter .5s var(--mc-ease);
}
.mc-mosaic__item:hover img{ transform: scale(1.08); filter: brightness(.8); }
.mc-mosaic__item:hover{
transform: translateY(-4px);
box-shadow: 0 22px 44px rgba(61,50,41,.18);
}
.mc-mosaic__item figcaption{
position: absolute;
left: 16px; bottom: -28px;
color: #fff;
font-family: var(--serif); font-style: italic;
font-size: 1rem;
font-weight: 500;
opacity: 0;
transition: bottom .4s var(--mc-ease), opacity .4s var(--mc-ease);
text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.mc-mosaic__item:hover figcaption{
bottom: 16px; opacity: 1;
}
/* ============================================================
10. BLOG
============================================================ */
.mc-blog{
padding: clamp(72px, 10vw, 120px) 0;
background: var(--surface);
}
.mc-blog__grid{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media(max-width:900px){ .mc-blog__grid{ grid-template-columns: 1fr; } }
.mc-blog__card{
display: flex; flex-direction: column;
background: var(--warm-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 10px 28px rgba(61,50,41,.06);
transition: transform .4s var(--mc-ease), box-shadow .4s var(--mc-ease);
}
.mc-blog__card:hover{
transform: translateY(-6px);
box-shadow: 0 22px 48px rgba(61,50,41,.14);
}
.mc-blog__thumb{
display: block; aspect-ratio: 16/10; overflow: hidden;
}
.mc-blog__thumb img{
width: 100%; height: 100%; object-fit: cover;
transition: transform .8s var(--mc-ease);
}
.mc-blog__card:hover .mc-blog__thumb img{ transform: scale(1.06); }
.mc-blog__body{
padding: 26px 26px 30px;
}
.mc-blog__meta{
font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--terracotta); font-weight: 600;
margin-bottom: 10px; display: block;
}
.mc-blog__body h3{
font-family: var(--serif); font-weight: 500;
font-size: 1.45rem; line-height: 1.2;
margin: 0 0 12px;
}
.mc-blog__body h3 a{
color: var(--green-dark); text-decoration: none;
transition: color .25s var(--mc-ease);
}
.mc-blog__body h3 a:hover{ color: var(--terracotta); }
.mc-blog__body p{
color: var(--ink-soft); line-height: 1.6; margin: 0 0 18px;
font-size: .95rem;
}
.mc-blog__link{
color: var(--terracotta); font-weight: 600; font-size: .92rem;
text-decoration: none;
transition: color .25s var(--mc-ease);
}
.mc-blog__link:hover{ color: var(--terracotta-dark); }
/* ============================================================
11. CTA BANNER
============================================================ */
.mc-cta{
position: relative;
padding: clamp(72px, 9vw, 128px) 0;
overflow: hidden;
isolation: isolate;
color: #fff;
}
.mc-cta__bg{
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
z-index: -2;
transform: scale(1.04);
}
.mc-cta__veil{
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(135deg, rgba(31,68,53,.94) 0%, rgba(44,95,74,.78) 100%);
}
.mc-cta__wrap{
display: grid; grid-template-columns: 1.3fr 1fr;
gap: 48px; align-items: center;
}
@media(max-width:900px){ .mc-cta__wrap{ grid-template-columns: 1fr; } }
.mc-cta__text h2{
font-family: var(--serif); font-weight: 500;
font-size: clamp(2rem, 4.8vw, 3.6rem);
line-height: 1.1;
color: #fff;
margin: 0 0 18px;
letter-spacing: -.015em;
}
.mc-cta__text h2 em{
color: #F5DDD0; font-style: italic; font-weight: 500;
}
.mc-cta__text p{
font-size: 1.08rem; line-height: 1.65; color: rgba(255,255,255,.88);
max-width: 540px; margin: 0;
}
.mc-cta__actions{
display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end;
}
@media(max-width:900px){ .mc-cta__actions{ justify-content: flex-start; } }
/* ============================================================
REVEAL ANIMATIONS
============================================================ */
[data-reveal]{
opacity: 0;
transform: translateY(30px);
transition: opacity .9s var(--mc-ease-out), transform .9s var(--mc-ease-out);
}
[data-reveal].is-revealed{
opacity: 1;
transform: none;
}
/* stagger grid children */
[data-reveal].is-revealed .mc-usp,
[data-reveal].is-revealed .mc-theme,
[data-reveal].is-revealed .mc-step,
[data-reveal].is-revealed .mc-counter,
[data-reveal].is-revealed .mc-blog__card,
[data-reveal].is-revealed .mc-mosaic__item{
animation: mc-child-rise .7s var(--mc-ease-out) both;
}
[data-reveal].is-revealed .mc-usp:nth-child(1),
[data-reveal].is-revealed .mc-theme:nth-child(1),
[data-reveal].is-revealed .mc-step:nth-child(1),
[data-reveal].is-revealed .mc-counter:nth-child(1),
[data-reveal].is-revealed .mc-blog__card:nth-child(1),
[data-reveal].is-revealed .mc-mosaic__item:nth-child(1){ animation-delay: .05s; }
[data-reveal].is-revealed .mc-usp:nth-child(2),
[data-reveal].is-revealed .mc-theme:nth-child(2),
[data-reveal].is-revealed .mc-step:nth-child(2),
[data-reveal].is-revealed .mc-counter:nth-child(2),
[data-reveal].is-revealed .mc-blog__card:nth-child(2),
[data-reveal].is-revealed .mc-mosaic__item:nth-child(2){ animation-delay: .15s; }
[data-reveal].is-revealed .mc-usp:nth-child(3),
[data-reveal].is-revealed .mc-theme:nth-child(3),
[data-reveal].is-revealed .mc-step:nth-child(3),
[data-reveal].is-revealed .mc-counter:nth-child(3),
[data-reveal].is-revealed .mc-blog__card:nth-child(3),
[data-reveal].is-revealed .mc-mosaic__item:nth-child(3){ animation-delay: .25s; }
[data-reveal].is-revealed .mc-usp:nth-child(4),
[data-reveal].is-revealed .mc-step:nth-child(4),
[data-reveal].is-revealed .mc-counter:nth-child(4),
[data-reveal].is-revealed .mc-mosaic__item:nth-child(4){ animation-delay: .35s; }
[data-reveal].is-revealed .mc-mosaic__item:nth-child(5){ animation-delay: .45s; }
[data-reveal].is-revealed .mc-mosaic__item:nth-child(6){ animation-delay: .55s; }
[data-reveal].is-revealed .mc-mosaic__item:nth-child(7){ animation-delay: .65s; }
[data-reveal].is-revealed .mc-mosaic__item:nth-child(8){ animation-delay: .75s; }
@keyframes mc-child-rise{
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce){
.mc-hero__mesh,
.mc-marquee__row,
.mc-about__tag-dot{ animation: none !important; }
.mc-hero__title > span,
.mc-hero__lead,
.mc-hero__ctas,
.mc-hero__stats,
.mc-hero__visual,
.mc-hero__frame,
.mc-hero__badge,
.mc-hero__rating{
opacity: 1 !important; transform: none !important; animation: none !important;
}
[data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
[data-reveal].is-revealed *{ animation: none !important; }
.mc-btn:hover,
.mc-usp:hover,
.mc-theme:hover,
.mc-step:hover,
.mc-tc:hover,
.mc-mosaic__item:hover,
.mc-blog__card:hover{ transform: none !important; }
.mc-usp:hover .mc-usp__icon,
.mc-step:hover .mc-step__num,
.mc-theme:hover .mc-theme__num,
.mc-theme:hover .mc-theme__photo img,
.mc-blog__card:hover .mc-blog__thumb img,
.mc-mosaic__item:hover img,
.mc-hero__frame:hover .mc-hero__photo{ transform: none !important; }
}
/* ============================================================
DARK MODE ADJUSTMENTS (respect existing data-theme)
============================================================ */
[data-theme="dark"] .mc-hero{ background: #1B2620; }
[data-theme="dark"] .mc-hero__mesh{
background:
radial-gradient(closest-side at 18% 25%, rgba(212,121,58,.22), transparent 62%),
radial-gradient(closest-side at 85% 65%, rgba(44,95,74,.55), transparent 65%),
linear-gradient(180deg, #1B2620 0%, #121A15 100%);
}
[data-theme="dark"] .mc-hero__title,
[data-theme="dark"] .mc-head h2,
[data-theme="dark"] .mc-about__text h2,
[data-theme="dark"] .mc-step h3,
[data-theme="dark"] .mc-usp h3,
[data-theme="dark"] .mc-theme__body h3,
[data-theme="dark"] .mc-blog__body h3 a{ color: #F5EEE2; }
[data-theme="dark"] .mc-hero__lead,
[data-theme="dark"] .mc-head p,
[data-theme="dark"] .mc-about__text p,
[data-theme="dark"] .mc-usp p,
[data-theme="dark"] .mc-step p,
[data-theme="dark"] .mc-theme__body p,
[data-theme="dark"] .mc-blog__body p{ color: rgba(245,238,226,.78); }
[data-theme="dark"] .mc-usps,
[data-theme="dark"] .mc-about,
[data-theme="dark"] .mc-blog,
[data-theme="dark"] .mc-carousel-section{ background: #1B2620; }
[data-theme="dark"] .mc-themes,
[data-theme="dark"] .mc-steps,
[data-theme="dark"] .mc-mosaic{
background: linear-gradient(180deg, #152019 0%, #1B2620 100%);
}
[data-theme="dark"] .mc-usp,
[data-theme="dark"] .mc-theme,
[data-theme="dark"] .mc-step,
[data-theme="dark"] .mc-tc,
[data-theme="dark"] .mc-blog__card{
background: #22302A;
border-color: rgba(245,238,226,.08);
}
/* ═══ Booking widget - premium appointment picker ═══ */
.booking-widget { background:linear-gradient(135deg,var(--surface),var(--peach)); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow); margin:40px 0; border:1px solid var(--line); }
.booking-widget h3 { font-family:var(--serif); font-size:1.8rem; margin-bottom:8px; }
.booking-widget .subtitle { color:var(--ink-soft); margin-bottom:28px; font-size:1rem; }
.booking-step { display:none; }
.booking-step.active { display:block; animation:fadeSlide .35s var(--ease-out); }
@keyframes fadeSlide { from{opacity:0;transform:translateX(12px);} to{opacity:1;transform:none;} }
.booking-step h4 { font-family:var(--serif); font-size:1.25rem; margin-bottom:16px; color:var(--green); }
.booking-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.booking-option { padding:16px 12px; border:2px solid var(--line); border-radius:12px; text-align:center; cursor:pointer; transition:all .25s var(--ease); background:#fff; font-weight:600; }
.booking-option:hover { border-color:var(--terracotta); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.booking-option.selected { border-color:var(--terracotta); background:var(--terracotta); color:#fff; box-shadow:var(--shadow-terracotta); }
.booking-progress { display:flex; gap:8px; margin-bottom:28px; }
.booking-progress span { flex:1; height:6px; border-radius:6px; background:var(--line); transition:background .3s; }
.booking-progress span.done { background:var(--terracotta); }
.booking-nav { display:flex; justify-content:space-between; margin-top:24px; gap:12px; }
.booking-nav .btn-ghost { padding:12px 20px; font-size:.92rem; }
.booking-summary { background:var(--green); color:#fff; border-radius:14px; padding:24px; margin-top:20px; }
.booking-summary h4 { color:#fff; margin-bottom:12px; }
.booking-summary dl { display:grid; grid-template-columns:auto 1fr; gap:8px 20px; }
.booking-summary dt { font-weight:600; opacity:.85; }
/* Live chat floating toggle */
.chat-toggle { position:fixed; bottom:100px; right:24px; z-index:90; background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; border:none; width:64px; height:64px; border-radius:50%; box-shadow:0 12px 36px rgba(44,95,74,.35); cursor:pointer; display:grid; place-items:center; transition:all .3s var(--ease); }
.chat-toggle:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 16px 40px rgba(44,95,74,.5); }
.chat-toggle svg { width:28px; height:28px; }
.chat-toggle .pulse { position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--green); opacity:0; animation:chatPulse 2.2s infinite; }
@keyframes chatPulse { 0%{opacity:.6;transform:scale(1);} 100%{opacity:0;transform:scale(1.4);} }
@media (max-width:720px) { .chat-toggle { bottom:104px; width:56px; height:56px; } }
/* ═══ Lightbox modal voor image-gallery ═══ */
.lightbox { position:fixed; inset:0; background:rgba(15,14,13,.93); z-index:9998; display:none; align-items:center; justify-content:center; padding:40px; cursor:zoom-out; opacity:0; transition:opacity .25s var(--ease); }
.lightbox.open { display:flex; opacity:1; }
.lightbox img { max-width:95vw; max-height:92vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:lightboxIn .35s var(--ease-out); }
@keyframes lightboxIn { from{transform:scale(.92);opacity:0;} to{transform:scale(1);opacity:1;} }
.lightbox-close { position:absolute; top:24px; right:28px; background:rgba(255,255,255,.12); color:#fff; border:0; width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.4rem; display:grid; place-items:center; transition:background .2s; }
.lightbox-close:hover { background:rgba(255,255,255,.24); }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:0; width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.6rem; transition:background .2s; display:grid; place-items:center; }
.lightbox-prev { left:28px; } .lightbox-next { right:28px; }
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,255,255,.24); }
.lightbox-caption { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:#fff; background:rgba(15,14,13,.7); backdrop-filter:blur(10px); padding:10px 20px; border-radius:10px; font-size:.9rem; }
.image-gallery img { cursor:zoom-in; }
/* ═══ Share buttons blog ═══ */
.share-buttons { display:flex; gap:10px; margin:28px 0; padding:20px; background:var(--surface-muted); border-radius:12px; align-items:center; flex-wrap:wrap; }
.share-buttons h5 { font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 12px 0 0; }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:#fff; color:var(--green); border:1px solid var(--line); font-size:.88rem; font-weight:600; text-decoration:none; transition:all .2s; cursor:pointer; }
.share-btn:hover { border-color:var(--terracotta); color:var(--terracotta); transform:translateY(-1px); }
.share-btn svg { width:16px; height:16px; }
/* Reading progress bar op blog-artikelen */
.reading-progress { position:fixed; top:0; left:0; right:0; height:3px; background:transparent; z-index:9997; pointer-events:none; }
.reading-progress__bar { height:100%; width:0; background:linear-gradient(90deg,var(--terracotta),var(--terracotta-dark)); transition:width .05s linear; }
/* ===== CONTRAST SAFETY NET ===== */
/* Alle knoppen: verplicht witte tekst op donkere achtergrond */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:visited,
a.btn-primary,
button.btn-primary {
background: var(--terracotta) !important;
color: #fff !important;
border: 2px solid var(--terracotta) !important;
text-shadow: none;
}
.btn-primary:hover { background: var(--terracotta-dark) !important; border-color: var(--terracotta-dark) !important; }
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
background: transparent !important;
color: var(--green) !important;
border: 2px solid var(--green) !important;
}
.btn-secondary:hover {
background: var(--green) !important;
color: #fff !important;
}
.btn-ghost,
a.btn-ghost {
background: transparent !important;
color: var(--green) !important;
border: 2px solid var(--green) !important;
}
.btn-ghost:hover { background: var(--green) !important; color: #fff !important; }
.btn-white, .btn-light {
background: #fff !important;
color: var(--green) !important; /* donker op wit */
border: 2px solid rgba(44,95,74,0.15) !important;
}
.btn-white:hover, .btn-light:hover {
background: var(--cream, #FAF7F2) !important;
color: var(--green) !important;
border-color: var(--green) !important;
}
/* Dark sections / hero: wit-op-wit voorkomen */
.hero .btn-secondary,
.hero .btn-ghost,
.section-blue .btn-secondary,
.section-blue .btn-ghost,
.cta-banner .btn-secondary,
.cta-banner .btn-ghost,
[class*="section-dark"] .btn-secondary,
[class*="section-dark"] .btn-ghost {
color: #fff !important;
border-color: #fff !important;
background: transparent !important;
}
.hero .btn-secondary:hover,
.hero .btn-ghost:hover,
.section-blue .btn-secondary:hover,
.section-blue .btn-ghost:hover,
.cta-banner .btn-secondary:hover,
.cta-banner .btn-ghost:hover {
background: #fff !important;
color: var(--green) !important;
}
/* Nav-CTA — geen lichte tekst op licht */
.nav-cta, a.nav-cta {
background: var(--green) !important;
color: #fff !important;
border: 0 !important;
}
.nav-cta:hover { background: var(--green-dark) !important; color: #fff !important; }
/* Topbar buttons (deploy/test etc) — zorg dat ze leesbaar zijn */
.btn-save { background: var(--green) !important; color: #fff !important; border: 0 !important; }
.btn-test { background: #fff !important; color: var(--green) !important; border: 1px solid var(--green) !important; }
/* Widget FAB krijgt text-shadow tegen licht op licht */
.itlcw-fab, .itlcw-submit { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
/* Safety: alle