:root{
  --blue-900:#0B2544;
  --blue-800:#123764;
  --blue-600:#244f86;
  --blue-050:#f3f6fa;
  --orange:#F39A23;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --radius:14px;
  --shadow:0 10px 30px rgba(17,24,39,.12);
  --maxw:1200px;
  --step--1: clamp(.9rem, .8rem + .3vw, 1rem);
  --step-0: clamp(1rem, .9rem + .6vw, 1.2rem);
  --step-1: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --space-1: .4rem; --space-2:.8rem; --space-3:1.2rem;
  --space-4:1.8rem; --space-5:2.6rem; --space-6:4rem;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 400 var(--step-0)/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in oklab, var(--orange) 18%, transparent), transparent 70%),
    radial-gradient(900px 500px at -10% 10%, color-mix(in oklab, var(--blue-800) 12%, transparent), transparent 70%),
    #fff;
}
a{color:var(--blue-800);text-decoration:none}
a:hover{color:var(--blue-600);text-decoration:underline}
img{max-width:100%;display:block}
.container{width:min(100% - 2rem, var(--maxw));margin-inline:auto}

/* Header */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in oklab, var(--panel) 92%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #e5e7eb;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--blue-800)}
.logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.nav a.active{font-weight:800}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;border:1px solid #e5e7eb;background:linear-gradient(180deg,#fff,#f7f7f7);color:var(--blue-800);font-weight:700}
.btn--primary{background:linear-gradient(180deg,color-mix(in oklab, var(--orange) 60%, #fff),color-mix(in oklab, var(--orange) 35%, #fff));border-color:color-mix(in oklab, var(--orange) 55%, transparent);color:#3a2802;text-shadow:0 1px 0 rgba(255,255,255,.4)}
footer .brand {
    color: #ffffff !important; 
}
/* Hero & secties */
.hero{padding-block:var(--space-6)}
.hero h1{font-size:clamp(2rem, 1.2rem + 3vw, 3.2rem);color:var(--blue-800);margin:0 0 var(--space-3)}
.hero p{color:var(--muted);font-size:var(--step-1);margin:0 0 var(--space-4)}
.hero-inner{display:grid;gap:var(--space-5);grid-template-columns:1fr}
@media (min-width:1150px){.hero-inner{grid-template-columns:.95fr 1.05fr}}
.hero-visual{aspect-ratio:16/10;border-radius:var(--radius);background:linear-gradient(160deg,#fff,var(--blue-050));box-shadow:var(--shadow);display:grid;place-items:center;color:#94a3b8;border:2px dashed #cbd5e1}

.section{padding-block:var(--space-5)}
h2{color:var(--blue-800);font-size:var(--step-2);margin:0 0 var(--space-3)}
.features{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4)}
.card h3{margin:.2rem 0 .6rem;color:var(--blue-800)}
.icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--blue-800);color:#fff;box-shadow:var(--shadow)}

/* Footer */
footer{margin-top:var(--space-6);background:linear-gradient(180deg, var(--blue-800), var(--blue-900));color:#dbe7f5;padding-block:var(--space-5) var(--space-6)}
footer a{color:#fff}
.cols{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tiny{font-size:var(--step--1)}
/* ===== Over (responsief stapelen: tekst boven beeld) ===== */
.about{
  display:grid;
  gap: var(--space-3);
  /* Op mobiel standaard 1 kolom (tekst boven) */
  grid-template-columns: 1fr;
}

/* Forceer volgorde op smal: tekst eerst, beeld eronder */
.about-text{ order: 1; }
.about-media{ order: 2; }

/* Beeld netjes schalen en nooit uit beeld lopen */
.about-media{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(160deg, #fff, var(--blue-050));
}
.about-media img{
  display:block;
  width:100%;
  height:auto;           /* natuurlijke hoogte */
  aspect-ratio: 4 / 5;   /* consistente kaartvorm */
  object-fit: cover;     /* snijd bij zonder uitrekken */
}

/* Tekstpaneel netjes en breek woorden indien nodig */
.about-text{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-wrap: anywhere; /* voorkom horizontale scroll bij lange woorden/links */
}

/* Vanaf breedte X weer twee kolommen naast elkaar */
@media (min-width: 980px){
  .about{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* In desktop-volgorde: tekst links, beeld rechts */
  .about-text{ order: 1; }
  .about-media{ order: 2; }
}

/* Als je juist op groter scherm beeld links wilt en tekst rechts, verwissel de orders hierboven of gebruik: */
/*
@media (min-width: 980px){
  .about-text{ order: 2; }
  .about-media{ order: 1; }
}
*/
/* ==== Responsive dropdown menu (onder 600px) ==== */

/* standaard menu zichtbaar */
.nav-links nav,
.nav-links ul {
  margin:0; padding:0; list-style:none;
  display:flex; gap:1rem; align-items:center;
}

/* hide hamburger standaard */
.menu-btn { display:none; cursor:pointer; padding:.4rem; }

/* mobiel (onder 600px): toon hamburger, verberg menu */
@media (max-width: 600px){
  .menu-btn { display:block; }
  .nav-links { display:none; position:absolute; top:100%; right:1rem; left:1rem; background:var(--panel); border:1px solid #e5e7eb; border-radius:var(--radius); box-shadow:var(--shadow); z-index:99; }
  .nav-links ul { flex-direction:column; align-items:stretch; gap:.5rem; padding:.8rem; }
  .nav-links a { display:block; padding:.6rem .9rem; border-radius:10px; font-weight:600; color:var(--blue-800); }
  .nav-links a:hover { background:var(--blue-050); text-decoration:none; }
  .nav-links .btn { margin-top:.25rem; justify-content:center; }

  /* wanneer checkbox aangevinkt is → toon menu */
  #menu-toggle:checked ~ .nav-links { display:block; }
}
/* Laat de recensie-kaart de volledige rij innemen onder 970px */
@media (max-width: 970px){
  #recensie{
    grid-column: 1 / -1;   /* span alle kolommen */
  }
}
.brand-bold {
  font-weight: 800;
  color: var(--orange); /* oranje accent voor 'WES' */
}

footer .brand strong {
  font-weight: 400; /* rest van 'SPORTS' gewoon normaal */
}

/* Footer responsief onder 970px */
@media (max-width: 970px){
  footer .cols{
    grid-template-columns: 1fr; /* alles onder elkaar */
    text-align: center;
  }
  footer .cols > div:first-child .brand{
    justify-content: center;
  }
}
/* Alleen de eerste 3 letters (WES) vet */
header .brand { font-weight: 400; }      /* basis niet vet */
header .brand__text { font-weight: 400; }/* expliciet normaal */
header .brand__em { font-weight: 800; }  /* WES vet */
.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%; /* maakt hem volledig rond */
}