:root {
     --bg: #fbfafb;
     --surface: #ffffff;
     --ink: #1b1b1f;
     --muted: #5b5b66;
     --line: rgba(20, 20, 30, .10);

     /* Kleuren geïnspireerd op de oude branding (aubergine + turquoise) */
     --brand: #6b1b53;
     /* aubergine */
     --brand2: #1aa6a4;
     /* turquoise */
     --brandSoft: rgba(107, 27, 83, .10);
     --brand2Soft: rgba(26, 166, 164, .12);

     --shadow: 0 18px 55px rgba(0, 0, 0, .12);
     --radius: 18px;
     --max: 1100px;
 }

 * {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     margin: 0;
     font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
     color: var(--ink);
     background:
         radial-gradient(1100px 700px at 10% 0%, var(--brand2Soft), transparent 60%),
         radial-gradient(1000px 700px at 95% 15%, var(--brandSoft), transparent 55%),
         var(--bg);
     line-height: 1.6;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 a:hover {
     text-decoration: underline;
     text-decoration-color: rgba(107, 27, 83, .55);
 }

 .wrap {
     max-width: var(--max);
     margin: 0 auto;
     padding: 0 22px;
 }

 /* Header / nav */
 header {
     position: sticky;
     top: 0;
     z-index: 10;
     backdrop-filter: blur(10px);
     background: rgba(251, 250, 251, .72);
     border-bottom: 1px solid var(--line);
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 12px 0;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 240px;
 }

.brand img {
    height: 34px;
    width: auto;
    display: block;
}

.brandName {
    font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1;
    color: var(--brand);
    letter-spacing: .01em;
    white-space: nowrap;
}

 .brand .sub {
     font-size: 12px;
     color: var(--muted);
     margin-top: 2px;
     display: block;
 }

 .links {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: flex-end;
 }

 .links a {
     font-size: 13px;
     padding: 8px 10px;
     border-radius: 10px;
     color: rgba(27, 27, 31, .92);
 }

 .links a:hover {
     background: rgba(0, 0, 0, .04);
     text-decoration: none;
 }

 .cta {
     background: rgba(107, 27, 83, .10);
     border: 1px solid rgba(107, 27, 83, .18);
 }

 /* Hero */
 .hero {
     padding: 34px 0 12px;
 }

 .heroGrid {
     display: grid;
     grid-template-columns: 1.2fr .8fr;
     gap: 16px;
     align-items: stretch;
 }

 .card {
     background: var(--surface);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
 }

 .heroText {
     padding: 22px 22px 18px;
 }

 h1 {
     margin: 0 0 10px;
     font-size: clamp(26px, 3.6vw, 40px);
     letter-spacing: -0.02em;
     line-height: 1.1;
 }

 .lead {
     margin: 0 0 16px;
     color: var(--muted);
     font-size: 15px;
     max-width: 68ch;
 }

 .pillRow {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 10px;
 }

 .pill {
     font-size: 12px;
     padding: 7px 10px;
     border-radius: 999px;
     border: 1px solid rgba(0, 0, 0, .10);
     background: rgba(0, 0, 0, .02);
 }

 .pill b {
     color: var(--brand);
 }

 .actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 14px;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 12px;
     border-radius: 12px;
     border: 1px solid rgba(0, 0, 0, .12);
     background: rgba(0, 0, 0, .02);
     font-size: 13px;
 }

 .btn:hover {
     background: rgba(0, 0, 0, .04);
     text-decoration: none;
 }

 .btn.primary {
     border-color: rgba(107, 27, 83, .26);
     background: rgba(107, 27, 83, .10);
 }

 .btn.primary:hover {
     background: rgba(107, 27, 83, .14);
 }

 .heroMedia {
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 .heroPhoto {
     aspect-ratio: 4 / 3;
     width: 100%;
     object-fit: cover;
     display: block;
 }

 .heroMediaFooter {
     padding: 14px 16px;
     border-top: 1px solid var(--line);
     display: flex;
     gap: 10px;
     align-items: flex-start;
     justify-content: space-between;
 }

 .heroMediaFooter .miniTitle {
     font-size: 13px;
     color: rgba(27, 27, 31, .92);
     margin: 0;
 }

 .heroMediaFooter .miniText {
     font-size: 12px;
     color: var(--muted);
     margin: 2px 0 0;
 }

 .badge {
     font-size: 12px;
     padding: 7px 10px;
     border-radius: 999px;
     border: 1px solid rgba(26, 166, 164, .30);
     background: rgba(26, 166, 164, .10);
     color: rgba(0, 0, 0, .78);
     white-space: nowrap;
 }

 /* Sections */
 section {
     padding: 22px 0;
 }

 .sectionTitle {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 18px;
     margin: 8px 0 12px;
 }

 .sectionTitle h2, .railCard h2 {
     margin: 0;
     font-size: 18px;
     letter-spacing: .2px;
 }

 .sectionTitle p {
     margin: 0;
     color: var(--muted);
     font-size: 13px;
     max-width: 78ch;
 }

 .contentCard {
     padding: 18px;
 }

 .contentCard h3 {
     margin: 14px 0 8px;
     font-size: 15px;
 }

 .contentCard p {
     margin: 0 0 10px;
     color: rgba(27, 27, 31, .92);
 }

 .list {
     margin: 10px 0 14px;
     padding-left: 18px;
     color: rgba(27, 27, 31, .92);
 }

 .list li {
     margin: 4px 0;
 }

 /* Contact grid */
 .contactGrid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     align-items: stretch;
 }

 .kv {
     display: grid;
     grid-template-columns: 110px 1fr;
     gap: 8px 14px;
     font-size: 13px;
     color: rgba(27, 27, 31, .92);
     margin-top: 4px;
 }

 .kv .k {
     color: var(--muted);
 }

 .note {
     margin-top: 12px;
     font-size: 12px;
     color: var(--muted);
 }

 footer {
     border-top: 1px solid var(--line);
     padding: 18px 0 28px;
     color: var(--muted);
     font-size: 12px;
 }

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

 /* Diensten rail / timeline */
 .rail {
     padding: 6px 0 2px;
 }

 .railInner {
     position: relative;
     padding: 10px 0 6px;
 }

 .railLine {
     position: absolute;
     top: 18px;
     bottom: 18px;
     left: 50%;
     width: 2px;
     transform: translateX(-50%);
     background: linear-gradient(180deg,
             rgba(107, 27, 83, .16),
             rgba(26, 166, 164, .16));
     border-radius: 99px;
 }

 .railItem {
     position: relative;
     display: grid;
     grid-template-columns: 1fr 40px 1fr;
     align-items: start;
     margin: 12px 0;
 }

 .railItem.left .railCard {
     grid-column: 1;
     justify-self: end;
 }

 .railItem.right .railCard {
     grid-column: 3;
     justify-self: start;
 }

 .railDot {
     grid-column: 2;
     justify-self: center;
     width: 10px;
     height: 10px;
     border-radius: 99px;
     margin-top: 16px;
     background: rgba(107, 27, 83, .75);
     box-shadow: 0 0 0 5px rgba(107, 27, 83, .10);
     border: 1px solid rgba(0, 0, 0, .06);
 }

 .railCard {
     width: min(460px, 100%);
     background: rgba(255, 255, 255, .86);
     border: 1px solid rgba(20, 20, 30, .10);
     border-radius: 16px;
     /* net iets kleiner dan main cards */
     padding: 14px 14px 12px;
     box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
 }

 .railCard h3 {
     margin: 0 0 8px;
     font-size: 14px;
     color: rgba(27, 27, 31, .92);
 }

 .railCard ul {
     margin: 0;
     padding-left: 18px;
     color: rgba(27, 27, 31, .90);
     font-size: 16px;
 }

 .railCard li {
     margin: 4px 0;
 }

 .railEnd {
     display: flex;
     justify-content: center;
     margin-top: 18px;
 }

 /* Mobile: alles onder elkaar, lijn links */
 @media (max-width: 920px) {
     .railLine {
         left: 18px;
         transform: none;
     }

     .railItem {
         grid-template-columns: 34px 1fr;
         gap: 10px;
     }

     .railDot {
         grid-column: 1;
         justify-self: center;
     }

     .railItem.left .railCard,
     .railItem.right .railCard {
         grid-column: 2;
         justify-self: stretch;
     }
 }

@media (max-width: 920px) {
    .nav {
        flex-wrap: wrap;
        align-items: flex-start;
    }

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

    .brand {
        min-width: auto;
        width: 100%;
    }

    .brandName {
        font-size: clamp(17px, 5.2vw, 28px);
        white-space: nowrap;
        line-height: 1;
    }

    .links {
        width: 100%;
        justify-content: flex-start;
    }

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

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