/* ====== deschmidt.nl LEGO theme ====== */
:root{
  --bg: #f3f5f7;
  --ink: #0b1320;
  --muted: #55627a;
  --primary: #e41d24; /* classic brick red */
  --yellow: #ffd400;
  --blue: #1f6feb;
  --green: #22a86a;
  --orange: #ff7a18;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink); background:var(--bg);
  line-height:1.5;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
header{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background: radial-gradient(1200px 600px at 120% -10%, #ffb0b2 0%, transparent 60%),
              radial-gradient(1000px 600px at -10% -20%, #ffd794 0%, transparent 60%),
              linear-gradient(135deg, #ff484c, #ff3136 60%, #e41d24 100%);
}
.container{max-width:1100px; margin:0 auto; padding: clamp(16px, 2.5vw, 28px)}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px;}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.brand .logo{width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18) inset}
.brand .logo svg{width:28px;height:28px}
.menu{display:flex; gap:18px; flex-wrap:wrap}
.menu a{color:#fff; font-weight:600; opacity:.95}

.hero{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:28px; padding: clamp(24px, 5vw, 64px) 0 48px}
@media (max-width:900px){ .hero{grid-template-columns:1fr; text-align:center} .hero-illus{order:-1} }
h1{font-size: clamp(28px, 5.6vw, 56px); margin:0 0 8px}
.subhead{font-size:.72em; font-weight:600}
.lead{font-size: clamp(16px, 2.1vw, 20px); margin:0 0 22px; color:#f5f7fb}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:700; border:2px solid rgba(255,255,255,.2); background:#fff; color:#e41d24}
.btn.secondary{background:transparent; color:#fff}
.w-fit{width:fit-content}

.stud-strip{position:relative; background:#f8fafc; border-bottom:1px solid #e5e8ef}
.stud-grid{--size:22px; background:
  radial-gradient(circle at 50% 50%, rgba(0,0,0,.06) 30%, transparent 31%) var(--size) var(--size)/ var(--size) var(--size),
  radial-gradient(circle at 50% 50%, rgba(0,0,0,.05) 30%, transparent 31%) 0 0/ var(--size) var(--size);
  opacity:.45; -webkit-mask: linear-gradient(#000, transparent 90%); mask: linear-gradient(#000, transparent 90%);
  height: 76px;
}

main{padding-block: 32px}
.grid{display:grid; gap:24px}
.cols-3{grid-template-columns: repeat(3, 1fr)}
@media (max-width:980px){ .cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cols-3{grid-template-columns:1fr} }

.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.card h3{margin:0 0 6px}
.muted{color:var(--muted)}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px}
.thumb{background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:14px; display:grid; place-items:center}
.thumb figure{margin:0}

/* Footer */
footer{margin-top:48px; border-top:1px dashed #e5e8ef; padding-block:24px; color:var(--muted)}

/* Utilities */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.mt24{margin-top:24px}
.px0{padding-inline:0}

/* Form */
.contact-form{display:grid; gap:12px; margin-top:8px}
.input,.textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #d9e0ea; font: inherit}
.hint{font-size:.9em}