:root{--paper:#F7F3EA;--paper2:#F2EFE9;--ink:#0B1220;--ink2:#0B1F2A;--brand:#C9A467;--accent:#F59E0B;--text:#334155;--footer:#0B1F2A}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:radial-gradient(1200px 800px at 12% 6%, rgba(245,158,11,.12), rgba(245,158,11,0) 58%),
linear-gradient(180deg,var(--paper),var(--paper2));color:var(--text);
font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
font-weight:400;letter-spacing:.1px;line-height:1.65;position:relative;overflow-x:hidden;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
padding-top:72px}
a{text-decoration:none;color:#1d4ed8}.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{position:fixed;left:0;right:0;top:0;z-index:1000;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(15,23,42,.10)}
.header .inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px;min-width:0}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:60px;width:auto;max-width:180px;object-fit:contain;filter:none;transform:none}

/* modern glass nav */
.nav{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;color:var(--ink);
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);
  font-weight:800;letter-spacing:.2px;white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease}
.nav a::after{content:"";position:absolute;left:50%;bottom:-6px;width:60%;height:2px;background:var(--brand);transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .22s ease;border-radius:2px;opacity:.9}
.nav a:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.10);border-color:rgba(245,158,11,.22)}
.nav a:hover::after,.nav a.active::after{transform:translateX(-50%) scaleX(1)}
.nav a.active{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.30)}
.burger{display:none;position:relative;width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(10px);
  cursor:pointer}
.burger .bar,.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
.burger .bar{top:21px}.burger::before{top:14px}.burger::after{top:28px}.burger.active .bar{opacity:0}.burger.active::before{transform:translateY(7px) rotate(45deg)}.burger.active::after{transform:translateY(-7px) rotate(-45deg)}
.nav-panel{display:none;position:fixed;inset:72px 12px 12px 12px;z-index:1200;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.12);
  border-radius:22px;
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 60px rgba(15,23,42,.22);
  overflow:auto}
.nav-panel.open{display:block;animation:panelIn .22s ease both}@keyframes panelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.panel-links{display:grid;gap:10px;padding:18px}
.panel-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-radius:16px;color:var(--ink);
  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10)}
.hero{isolation:isolate;min-height:82vh;position:relative;color:#fff;text-align:center;padding-top:64px;overflow:hidden}
.slides,.slide{position:absolute;inset:0}.slide{background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;filter:saturate(115%) contrast(1.05) brightness(.80)}.slide.active{opacity:1}
.hero .scrim{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(110% 80% at 50% 40%, rgba(18,22,26,.68), rgba(18,22,26,.88)),linear-gradient(180deg, rgba(18,22,26,.18) 0%, rgba(18,22,26,.62) 90%)}
.hero .content{position:relative;z-index:2;display:grid;place-items:center;min-height:clamp(240px,38vh,380px)}
.hero .glass{margin:0 auto;width:clamp(420px,61.8vw,980px);padding:34px 40px 40px;border-radius:26px;background:rgba(18,22,26,.38);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 60px rgba(0,0,0,.35)}
.hero h1{color:#F2E6CF;text-shadow:0 6px 28px rgba(0,0,0,.55);font-weight:820;letter-spacing:-.6px;margin:0 0 10px}
.hero p{color:#F6F7F8;text-shadow:0 3px 20px rgba(0,0,0,.55);margin:0 0 18px;letter-spacing:.1px}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:650;letter-spacing:.2px;line-height:1}
.btn.primary{background:var(--brand);color:#0d0d0d}.btn.ghost{border:2px solid rgba(201,164,103,.75);color:#ecd7b1;background:rgba(255,255,255,.12)}
.ribbon{position:relative;height:22vh;min-height:160px;max-height:280px;margin-top:48px;overflow:hidden}
.ribbon .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;filter:brightness(.88) saturate(1.05)}.ribbon .slide.active{opacity:1}
.ribbon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,24,27,.32), rgba(20,24,27,.45))}
section{padding:72px 0;border-top:1px solid rgba(0,0,0,.06)}h2,h3{color:var(--ink);margin:0 0 12px;font-weight:750;letter-spacing:-.2px}p{color:var(--text)}
.text-panel{background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.10);border-radius:22px;padding:26px 26px 18px;
box-shadow:0 20px 60px rgba(15,23,42,.10);backdrop-filter:blur(14px) saturate(140%)}
.text-panel p{margin:.55rem 0}
.grid{display:grid;gap:24px}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}

/* Horizontal scroll row (projects) */
.scroll-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.scroll-row::-webkit-scrollbar{display:none}
.scroll-row > .card{flex:0 0 min(360px, 86vw);scroll-snap-align:start}
@media(min-width:980px){.scroll-row{display:grid;overflow:visible;scroll-snap-type:none;padding:0;gap:24px}.scroll-row.cols-3{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));border:1px solid rgba(15,23,42,.10);border-radius:20px;overflow:hidden;color:var(--text);box-shadow:0 16px 44px rgba(15,23,42,.10);transition:transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s}
.card:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 24px 60px rgba(0,0,0,.14)}
.card>img,.card img{display:block;width:100%;height:220px;object-fit:cover;object-position:center;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:center}
.card:hover>img,.card:hover img{transform:scale(1.03)}
/* Card default (paper) */
.card::before{display:none}
.card .title{color:var(--ink);text-shadow:none}
.card p{color:var(--text)}
.pad{padding:24px;position:relative;z-index:2}
.meta{color:rgba(245,158,11,.85)}

/* Media cards (Projects) keep dark overlay + white text */
#projects .card::before{display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg, rgba(243,237,226,0), rgba(20,24,27,.88));pointer-events:none}
#projects .card .title{color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.35)}
#projects .card p{color:#e7edf2}
#projects .meta{color:var(--brand)}

/* Group companies (paper, readable) */
#group{background:radial-gradient(1100px 620px at 12% 8%, rgba(245,158,11,.10), rgba(245,158,11,0) 60%),
              linear-gradient(180deg, rgba(247,243,234,.92), rgba(242,239,233,.92));
  border-top:1px solid rgba(15,23,42,.06)}
#group h2{color:var(--ink)}
#group .card{background:rgba(255,255,255,.82);border-color:rgba(15,23,42,.10);box-shadow:0 16px 44px rgba(15,23,42,.10)}
.company-card{display:flex;gap:16px;align-items:flex-start}.company-logo{width:148px;height:148px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.footer{background:linear-gradient(180deg, var(--footer), #0d1216);color:#f0f4f8;padding:64px 0}.footer a{color:#9cd0ff}
.foot-grid{display:grid;grid-template-columns:1.1fr .9fr .8fr;gap:26px;align-items:start}
.foot-item h4{margin:0 0 10px;color:#F2E6CF;letter-spacing:-.2px}.foot-item p{margin:.25rem 0;color:#d9e3ea}
.footer .contact-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.icon{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin-right:8px;opacity:.9}.copyright{color:#9aa6af;font-size:12px;margin-top:8px;text-align:right}
.contact-card{background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.10);border-radius:22px;padding:20px;
box-shadow:0 18px 54px rgba(15,23,42,.10);backdrop-filter:blur(14px) saturate(140%)}
.field{display:grid;gap:7px;margin-bottom:12px}
.field label{font-weight:650;color:var(--ink)}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(15,23,42,.12);
background:rgba(255,255,255,.82);color:var(--ink);outline:none;transition:border-color .18s ease, box-shadow .18s ease}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(245,158,11,.40);box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.field textarea{min-height:120px;resize:vertical}
.btn.send{background:var(--brand);color:#0d0d0d;border:none}
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#000;transition:opacity .5s ease}
#preloader .logo{display:grid;place-items:center;gap:12px;opacity:0;animation:preIn .6s ease forwards}#preloader img{height:86px;filter:invert(1)}
#preloader .msg{color:#fff;font-weight:700;letter-spacing:.3px}@keyframes preIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.preloader-hide{opacity:0;pointer-events:none}
@media(max-width:900px){.grid.cols-3{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}
@media(max-width:768px){
  .nav{display:none}.burger{display:block;flex:0 0 auto}
  .header .inner{height:72px}
  .logo img{height:54px;max-width:150px}

  /* prevent header overflow: move language flags into burger panel */
  .header .lang{display:none}
  .nav-panel .lang{display:flex !important;justify-content:center;padding:10px 10px 2px;margin:2px auto 8px}
  .lang .flagbtn{width:34px;height:34px}
  .flag{width:20px;height:14px}

  .hero{min-height:76vh}
  .hero .glass{width:92vw;padding:22px 18px 20px;border-radius:22px}
  .hero h1{letter-spacing:-.4px}
  .cta{gap:10px}
  .cta .btn{width:100%;max-width:360px}

  /* company cards look clean */
  .company-card{align-items:center}
  .company-logo{width:88px;height:88px}
  .pad{padding:18px}

  /* section spacing for flow */
  section{padding:56px 0}
  .foot-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .lang .flagbtn{width:32px;height:32px}
  .company-logo{width:78px;height:78px}
}
/* --- Language flags --- */
.lang .flagbtn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(15,23,42,.14);background:rgba(255,255,255,.70);display:grid;place-items:center;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.lang .flagbtn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.12);border-color:rgba(245,158,11,.28)}
.lang .flagbtn.active{border-color:rgba(245,158,11,.40);box-shadow:0 10px 22px rgba(245,158,11,.12)}
.flag{width:22px;height:16px;border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(15,23,42,.18)}
/* SVG flags (no external fetch) */
.flag-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='32' viewBox='0 0 44 32'%3E%3Crect width='44' height='32' fill='%23012169'/%3E%3Cpath d='M0 0 L44 32 M44 0 L0 32' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0 L44 32 M44 0 L0 32' stroke='%23C8102E' stroke-width='3'/%3E%3Crect x='18' width='8' height='32' fill='%23fff'/%3E%3Crect y='12' width='44' height='8' fill='%23fff'/%3E%3Crect x='19.5' width='5' height='32' fill='%23C8102E'/%3E%3Crect y='13.5' width='44' height='5' fill='%23C8102E'/%3E%3C/svg%3E");background-size:cover;background-position:center}
.flag-nl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='32'%3E%3Crect width='44' height='32' fill='%23fff'/%3E%3Crect width='44' height='10.67' y='0' fill='%23AE1C28'/%3E%3Crect width='44' height='10.67' y='21.33' fill='%2321468B'/%3E%3C/svg%3E");background-size:cover;background-position:center}
.flag-tr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='32'%3E%3Crect width='44' height='32' fill='%23E30A17'/%3E%3Ccircle cx='18' cy='16' r='8' fill='%23fff'/%3E%3Ccircle cx='20.5' cy='16' r='6.5' fill='%23E30A17'/%3E%3Cpath d='M28 16l6 2.2-3.8-5.2 0-6.4-2.2 6.1-6.1 1.3 6.1 1.3z' fill='%23fff'/%3E%3C/svg%3E");background-size:cover;background-position:center}
.flag-de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='32'%3E%3Crect width='44' height='32' fill='%23FFCE00'/%3E%3Crect width='44' height='10.67' y='0' fill='%23000'/%3E%3Crect width='44' height='10.67' y='10.67' fill='%23DD0000'/%3E%3C/svg%3E");background-size:cover;background-position:center}
.flag-bg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='32'%3E%3Crect width='44' height='32' fill='%23D62612'/%3E%3Crect width='44' height='10.67' y='0' fill='%23fff'/%3E%3Crect width='44' height='10.67' y='10.67' fill='%23009B74'/%3E%3C/svg%3E");background-size:cover;background-position:center}

/* --- Page enter animations --- */
html.page-enter body{opacity:0;transform:translateY(8px);filter:saturate(.98)}
html.page-enter-active body{opacity:1;transform:none;filter:none;transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease}

[data-animate]{opacity:0;transform:translateY(10px);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
html.anim-ready [data-animate]{opacity:1;transform:none}
html.anim-ready [data-animate][data-delay="1"]{transition-delay:80ms}
html.anim-ready [data-animate][data-delay="2"]{transition-delay:160ms}
html.anim-ready [data-animate][data-delay="3"]{transition-delay:240ms}

@media(prefers-reduced-motion:reduce){
  html.page-enter body,html.page-enter-active body,[data-animate],.nav a::after,.slide,.card,.card>img,body,.lang .flagbtn{transition:none!important;transform:none!important;opacity:1!important;filter:none!important}
}


/* --- CEO (paper premium, no repetition / more prominent) --- */
#ceo{background:radial-gradient(900px 520px at 18% 18%, rgba(245,158,11,.10), rgba(245,158,11,0) 60%),
            linear-gradient(180deg, rgba(247,243,234,.88), rgba(242,239,233,.88));
  border-top:1px solid rgba(15,23,42,.06)}
#ceo .ceo-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
#ceo .text{background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.10);border-radius:26px;
  padding:28px 28px 22px;box-shadow:0 20px 60px rgba(15,23,42,.10);backdrop-filter:blur(14px) saturate(140%)}
#ceo h2,#ceo h3{margin:0 0 10px;color:var(--ink);font-weight:820;letter-spacing:-.4px}
#ceo h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:999px;background:rgba(245,158,11,.75);margin-right:10px;vertical-align:middle}
#ceo p{margin:.55rem 0;color:var(--text)}
#ceo .ceo-sign{margin-top:14px;text-align:right}
#ceo .ceo-sign strong{display:inline-block;color:var(--ink);font-weight:800}
@media(max-width:900px){#ceo .ceo-wrap{grid-template-columns:1fr;gap:18px}}