/* MichaelOnline v3 - mobile-first base; styles are available before HTML paint. */
:root { color-scheme: light; --green:var(--ui-brand); --ink:var(--ui-text); --muted:var(--ui-muted); --page:var(--ui-surface); --soft:var(--ui-surface-soft); --nav-height:var(--ui-nav-height); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.65; }
.container { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:absolute; left:-999px; z-index:100; background:white; padding:10px; }
.skip-link:focus { left:10px; top:10px; }
a { color:inherit; }
.site-header { position:absolute; inset:0 0 auto; z-index:20; color:white; }
.header-inner { min-height:var(--nav-height); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img { width:180px; height:auto; display:block; }
.menu-toggle { border:1px solid #ffffff80; color:white; background:#09251ba8; border-radius:9px; font-size:25px; padding:2px 12px; cursor:pointer; }
.navigation { display:none; position:absolute; top:var(--nav-height); left:0; right:0; padding:20px; background:#142d26; flex-direction:column; gap:12px; }
.navigation.open { display:flex; }
.navigation a { text-decoration:none; font-weight:600; }
.navigation a:hover, .navigation a:focus-visible { color:#8bdfb6; }
.hero { min-height:75vh; min-height:75svh; position:relative; display:flex; align-items:center; color:white; background:#153d30 url('/assets/images/fiets-werkplaats.webp') center/cover no-repeat; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,28,22,.85),rgba(8,28,22,.37) 70%,rgba(8,28,22,.2)); }
.hero-content { position:relative; padding-top:140px; padding-bottom:75px; }
.eyebrow { color:#a7e8c6; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
h1 { font-size:clamp(2.8rem,7vw,5.5rem); line-height:1.09; letter-spacing:-.045em; margin:20px 0; }
h1 span { color:#78d8a4; }
.hero p { max-width:520px; font-size:1.08rem; margin-bottom:30px; }
.button { display:inline-flex; gap:14px; align-items:center; background:var(--green); color:white; border-radius:8px; padding:12px 22px; text-decoration:none; font-weight:700; }
.button:hover { background:#167b54; }
.section { padding:80px 0; }
.section h2 { font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.03em; margin:0 0 25px; line-height:1.2; }
.section-kicker { color:var(--green); text-transform:uppercase; font-size:12px; letter-spacing:.12em; font-weight:800; }
.cards { display:grid; grid-template-columns:1fr; gap:20px; }
.card { border:1px solid #e3ebe6; border-radius:16px; padding:30px; box-shadow:0 9px 30px #17352b08; }
.card h3 { margin:10px 0; }
.card p { color:var(--muted); margin-bottom:0; }
.card-icon { font-size:30px; }
.muted { background:var(--soft); }
.narrow { max-width:850px; }
.development-note { color:var(--muted); font-size:.85rem; margin-top:28px; }
.footer { background:#102b22; color:#cde2d5; padding:30px 0; }
@media (min-width:750px) { .cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Existing v2 navigation breakpoint is preserved in the v3 public shell. */
@media (min-width:1134px) { .menu-toggle { display:none; } .navigation { display:flex; position:static; background:none; padding:0; flex-direction:row; gap:30px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }