/* ==========================================================================
   MCC Group N.V. — Corporate site stylesheet
   Organised: tokens · base · layout · components · sections · responsive
   ========================================================================== */
:root {
      --navy:#071d33; --blue:#0e3a5b; --gold:#c59a3d; --green:#2d7a3e;
      --soft:#f5f7f7; --text:#1f2933; --muted:#667085; --white:#fff;
      --shadow:0 20px 45px rgba(7,29,51,.12); --radius:18px;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--text); line-height:1.55; background:#fff; }
    a { text-decoration:none; color:inherit; }
    header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid rgba(7,29,51,.08); }
    .nav { max-width:1220px; margin:auto; padding:12px 22px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
    .brand { display:flex; align-items:center; gap:12px; color:var(--navy); font-weight:900; letter-spacing:.06em; }
    .brand img { width:54px; height:54px; object-fit:contain; border-radius:10px; }
    .menu { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; font-weight:800; text-transform:uppercase; color:var(--blue); }
    .menu a:hover { color:var(--gold); }

    .hero { min-height:86vh; color:#fff; display:flex; align-items:center; position:relative; overflow:hidden;
      background:linear-gradient(110deg, rgba(7,29,51,.96), rgba(7,29,51,.80) 48%, rgba(45,122,62,.58)), url('assets/hero-background.png') center/cover no-repeat;
    }
    .hero::after { content:""; position:absolute; right:-180px; bottom:-180px; width:620px; height:620px; border:68px solid rgba(197,154,61,.16); border-radius:50%; }
    .hero-inner { max-width:1220px; margin:auto; padding:78px 22px; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; position:relative; z-index:2; }
    .eyebrow { display:inline-flex; padding:8px 12px; border:1px solid rgba(255,255,255,.26); border-radius:999px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; margin-bottom:20px; }
    h1 { font-size:clamp(42px,6vw,76px); line-height:.95; margin:0 0 22px; letter-spacing:-.045em; }
    .hero p { font-size:18px; color:#e7edf0; max-width:760px; margin:0 0 28px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 22px; border-radius:999px; font-weight:900; font-size:14px; border:1px solid transparent; }
    .btn.gold { background:var(--gold); color:#091a2b; }
    .btn.ghost { border-color:rgba(255,255,255,.35); color:#fff; }
    .hero-card { background:rgba(255,255,255,.95); color:var(--navy); border-radius:28px; padding:28px; box-shadow:var(--shadow); }
    .hero-card img { width:100%; display:block; border-radius:22px; margin-bottom:18px; }
    .quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    .quick { background:var(--soft); border:1px solid rgba(7,29,51,.08); border-radius:14px; padding:14px; font-size:13px; font-weight:900; }

    section { padding:84px 22px; }
    .wrap { max-width:1220px; margin:auto; }
    .section-title { display:grid; grid-template-columns:.62fr 1fr; gap:42px; align-items:start; margin-bottom:38px; }
    .section-title h2 { margin:0; color:var(--navy); font-size:clamp(30px,4vw,50px); line-height:1.05; letter-spacing:-.035em; }
    .section-title p { margin:0; color:var(--muted); font-size:17px; }

    .kpis { max-width:1220px; margin:-42px auto 0; padding:0 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; z-index:5; }
    .kpi { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); border:1px solid rgba(7,29,51,.08); }
    .kpi strong { display:block; color:var(--navy); font-size:32px; line-height:1; margin-bottom:8px; }
    .kpi span { color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }

    .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .card { background:#fff; border:1px solid rgba(7,29,51,.08); border-radius:var(--radius); padding:28px; box-shadow:0 10px 28px rgba(7,29,51,.07); }
    .card h3 { margin:0 0 12px; color:var(--navy); font-size:22px; }
    .card p { margin:0; color:var(--muted); }
    .card ul { margin:16px 0 0; padding-left:18px; color:var(--muted); }

    .image-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
    .image-card { border-radius:20px; overflow:hidden; background:#fff; border:1px solid rgba(7,29,51,.08); box-shadow:var(--shadow); }
    .image-card img { width:100%; height:250px; object-fit:cover; display:block; }
    .image-card div { padding:16px 18px; }
    .image-card b { color:var(--navy); }
    .image-card small { color:var(--muted); display:block; margin-top:4px; }

    .dark { background:linear-gradient(135deg,var(--navy),#092a45); color:#fff; }
    .dark .section-title h2,.dark .card h3 { color:#fff; }
    .dark .section-title p,.dark .card p,.dark .card ul { color:#d8e3e8; }
    .dark .card { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); box-shadow:none; }

    .project-map { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
    .country { padding:18px; border-radius:16px; background:var(--soft); border:1px solid rgba(7,29,51,.08); min-height:116px; }
    .country b { display:block; color:var(--navy); margin-bottom:6px; }
    .country span { color:var(--muted); font-size:14px; }

    .timeline { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
    .timeline-item { padding:24px; border-left:5px solid var(--gold); background:#fff; border-radius:0 16px 16px 0; box-shadow:0 10px 28px rgba(7,29,51,.07); }
    .timeline-item b { color:var(--navy); font-size:18px; }

    .affiliate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .affiliate { border-radius:24px; overflow:hidden; border:1px solid rgba(7,29,51,.08); box-shadow:var(--shadow); background:#fff; }
    .affiliate-top { padding:26px; color:#fff; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; }
    .affiliate:nth-child(1) .affiliate-top { background:linear-gradient(135deg,#071d33,#0e3a5b); }
    .affiliate:nth-child(2) .affiliate-top { background:linear-gradient(135deg,#0e3a5b,#2d7a3e); }
    .affiliate:nth-child(3) .affiliate-top { background:linear-gradient(135deg,#2d7a3e,#70a84e); }
    .affiliate-body { padding:26px; }
    .affiliate h3 { margin:0; font-size:24px; }
    .affiliate p { color:var(--muted); }
    .affiliate a { color:var(--blue); font-weight:900; }

    .split { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
    .split img { width:100%; border-radius:24px; box-shadow:var(--shadow); }
    .cta { background:linear-gradient(135deg,var(--gold),#f0d084); color:#091a2b; border-radius:30px; padding:46px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
    .cta h2 { margin:0 0 10px; font-size:34px; }

    footer { background:#050f1c; color:#d9e2e8; padding:42px 22px; }
    footer .wrap { display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
    .small { color:#9ba8b5; font-size:13px; }

    @media (max-width:900px) {
      .menu { display:none; }
      .hero-inner,.section-title,.split,.cta { grid-template-columns:1fr; }
      .kpis,.cards,.image-grid,.project-map,.timeline,.affiliate-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:640px) {
      .hero { min-height:auto; }
      .kpis,.cards,.image-grid,.project-map,.timeline,.affiliate-grid { grid-template-columns:1fr; }
      .quick-grid { grid-template-columns:1fr; }
    }

.profile-links{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0}
.profile-btn{display:inline-block;padding:12px 18px;border-radius:999px;background:#d6a23a;color:#101820!important;text-decoration:none;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.profile-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}

    .esg-hero-img { border-radius:24px; overflow:hidden; box-shadow:var(--shadow); background:#fff; }
    .esg-hero-img img { width:100%; height:430px; object-fit:cover; display:block; }
    .impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:30px 0; }
    .impact { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:22px; }
    .impact strong { display:block; color:#fff; font-size:30px; line-height:1.05; margin-bottom:8px; }
    .impact span { color:#d8e3e8; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
    .dark .image-card { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); box-shadow:none; }
    .dark .image-card b { color:#fff; }
    .dark .image-card small { color:#d8e3e8; }
    .esg-diagram-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px; }
    .esg-diagram-grid .image-card img { height:260px; object-fit:contain; background:#fff; padding:12px; }
    @media (max-width:900px) { .impact-grid,.esg-diagram-grid { grid-template-columns:1fr 1fr; } }
    @media (max-width:640px) { .impact-grid,.esg-diagram-grid { grid-template-columns:1fr; } }