/* =========================================================
   Admerco — stylesheet
   Kleuren: rood #9C1C1F · antraciet #26292B · grijs #515659
   achtergrond licht #F4F4F4 · tint rood #F7EDED
   Lettertype: Source Sans 3 (Google Fonts)
   ========================================================= */

:root {
  --red: #9C1C1F;
  --red-dark: #7A1518;
  --red-tint: #F7EDED;
  --ink: #26292B;
  --text: #1F2325;
  --muted: #515659;
  --muted-2: #5E6366;
  --bg-light: #F4F4F4;
  --line: #E6E7E8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; font-family: 'Source Sans 3', 'Myriad Pro', system-ui, sans-serif; color: var(--text); font-size: 18px; line-height: 1.65; }
img { max-width: 100%; }
a { color: var(--red); }
a:hover { color: var(--red-dark); }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.sec { padding: 120px 0; }
.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px; align-items: center; }
.split-asym { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: start; }
.flip > :first-child { order: 2; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }

/* ---------- Typografie ---------- */
.h1 { font-size: 64px; }
.h2 { font-size: 46px; }
.quote { font-size: 40px; }

/* ---------- Navigatie ---------- */
.nav-links { display: flex; }
.nav-links a:hover { color: var(--red); }
.menu-btn { display: none; }

/* ---------- Formulier ---------- */
.field { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid #D5D7D8; background: #FFFFFF; font: inherit; font-size: 17px; color: var(--text); border-radius: 6px; }
.field:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }

/* ---------- Kaarten ---------- */
.card { transition: transform .3s ease, box-shadow .3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(38, 41, 43, .35); }

/* ---------- FAQ (details/summary) ---------- */
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 24px; font-size: 19px; font-weight: 700; color: var(--ink); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 10px; }
.faq-icon { position: relative; width: 32px; height: 32px; border-radius: 999px; background: var(--red-tint); flex-shrink: 0; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--red); transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s ease; }
.faq[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq p { margin: 0; padding: 0 24px 22px; color: var(--muted); }
.faq-alt .faq-icon { background: #FFFFFF; }

/* =========================================================
   Animaties
   ========================================================= */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes starPop { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(1.35); } }
@keyframes ringSeq { 0% { transform: scale(1); opacity: .7; } 30% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes boxSeq { 0%, 30%, 100% { transform: scale(1); } 10% { transform: scale(1.08); } }
@keyframes dotBounce { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-2.5px); opacity: 1; } }
@keyframes draw { 0% { stroke-dashoffset: 24; } 35%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 64%, 72% { transform: rotate(-14deg); } 68%, 76% { transform: rotate(14deg); } 80% { transform: rotate(0); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pinDrop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Intro bij laden */
.a-up { animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .32s; } .d4 { animation-delay: .45s; }

/* Foto's & zwevende labels */
.kb { animation: kenburns 16s ease-in-out infinite alternate; }
.float { animation: floatY 5s ease-in-out infinite; }
.float-b { animation: floatY 6s ease-in-out -3s infinite; }

/* Sterren */
.stars svg { animation: starPop 3.2s ease-in-out infinite; }
.stars svg:nth-child(2) { animation-delay: .12s; } .stars svg:nth-child(3) { animation-delay: .24s; }
.stars svg:nth-child(4) { animation-delay: .36s; } .stars svg:nth-child(5) { animation-delay: .48s; }

/* Iconen die om de beurt knipperen */
.pulse { position: relative; animation: boxSeq 3.6s ease-in-out infinite; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; opacity: 0; animation: ringSeq 3.6s ease-out infinite; }
.pulse-2, .pulse-2::after { animation-delay: 1.2s; }
.pulse-3, .pulse-3::after { animation-delay: 2.4s; }

/* Typ-puntjes, tekenend vinkje, telefoon, locatie */
.dot { animation: dotBounce 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dot:nth-child(3) { animation-delay: .18s; } .dot:nth-child(4) { animation-delay: .36s; }
.draw { stroke-dasharray: 24; animation: draw 3s ease-in-out infinite; }
.wiggle { animation: wiggle 3.5s ease-in-out infinite; transform-origin: 50% 50%; }
.pin { animation: pinDrop 1.8s ease-in-out infinite; }

/* Hover */
.btn-arrow svg, .nudge { display: inline-block; transition: transform .25s ease; }
.btn-arrow:hover svg { transform: translateX(5px); }
.card:hover .nudge { transform: translateX(5px); }
.svc-icon { transition: transform .35s ease; }
.card:hover .svc-icon { transform: rotate(-8deg) scale(1.06); }
.card:hover .svc-icon svg { animation: bob .6s ease-in-out 2; }

/* Scroll-reveal (moderne browsers; elders direct zichtbaar) */
@supports (animation-timeline: view()) {
  .reveal { animation: fadeUp linear backwards; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  .grid-3 > .reveal:nth-child(2) { animation-range: entry 8% cover 28%; }
  .grid-3 > .reveal:nth-child(3) { animation-range: entry 16% cover 34%; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 981px) { #mobile-menu { display: none !important; } }

@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .nav-links, .nav-cta { display: none !important; }
  .menu-btn { display: inline-flex; }
  .hero-grid, .split, .split-asym, .contact-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .flip > :first-child { order: 0; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .h1 { font-size: 52px; }
  .h2 { font-size: 38px; }
  .quote { font-size: 32px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .sec { padding: 80px 0; }
  .form-row, .check-list { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hide-sm { display: none; }
  .form-pad { padding: 28px 22px !important; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 32px; }
  .quote { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}