/* Dutch / Flanders preview (agency agent, 2026-10-21). Overrides only; the base design is his live site. */

/* Contact: text on top, the booking calendar full width underneath (Platten: calendar embed, not a form) */
#contact .contact-grid { grid-template-columns: 1fr; gap: 28px; }
#contact .section__head { text-align: center; margin-left: auto; margin-right: auto; }
#contact .section__head .eyebrow--mono { justify-content: center; }
#contact .contact-aside { display: flex; flex-direction: column; align-items: center; text-align: center; }
#contact .form-card--calendar { background: #FFFFFF !important; border-radius: 22px; padding: 8px; overflow: hidden; max-width: 980px; margin: 0 auto; width: 100%; box-sizing: border-box; }
#contact .form-card--calendar .booking-embed { display: block; width: 100%; height: 720px; border: 0; border-radius: 16px; background: #fff; }
@media (max-width: 640px) { #contact .form-card--calendar .booking-embed { height: 820px; } }

/* The included section had a dashboard picture beside the list; it's gone (made-up numbers), so the list spans the width */
#included .included { grid-template-columns: 1fr; max-width: 820px; margin-left: auto; margin-right: auto; }

/* Cal.com inline embed (22 Oct): full width, no inner frame (Nina); the iframe sizes itself */
#contact .form-card--calendar { padding: 0; }
#contact .booking-embed--cal { width: 100%; min-height: 560px; height: auto; overflow: visible; }
#contact .booking-embed--cal iframe { width: 100% !important; border: 0; }

/* "Eerst een vraag stellen" (22 Oct): a quiet second path under "Liever even bellen" (Nina); the calendar stays the main CTA */
#contact .ask-first { margin-top: 1.1rem; width: 100%; max-width: 420px; text-align: left; }
#contact .ask-first > summary { cursor: pointer; list-style: none; text-align: center; color: #E0A877; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
#contact .ask-first > summary::-webkit-details-marker { display: none; }
#contact .ask-first[open] > summary { margin-bottom: .8rem; }
#contact .ask-first__intro { color: rgba(246,244,239,0.75); margin: 0 0 .8rem; text-align: center; font-size: .98rem; }
#contact .ask-first__form { display: grid; gap: .65rem; }
#contact .ask-first__form label { display: grid; gap: .3rem; font-size: .92rem; color: rgba(246,244,239,0.82); }
#contact .ask-first__form input, #contact .ask-first__form textarea { width: 100%; box-sizing: border-box; padding: .7rem .85rem; border-radius: 10px; border: 1px solid rgba(246,244,239,0.20); background: #211D17; color: #F6F4EF; font: inherit; }
#contact .ask-first__form input:focus, #contact .ask-first__form textarea:focus { outline: 2px solid #B26A38; outline-offset: 1px; border-color: transparent; }
#contact .ask-first__form .btn { justify-self: start; }
#contact .ask-first__note { font-size: .86rem; color: rgba(246,244,239,0.62); margin: 0; }
#problem .problem__turn { margin-top: .6rem; }

/* Illustrative scenes (22 Oct, his ChatGPT images; Nina's placement): never a client, a real job, the team or Karim */
.scene { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.scene img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; }
@media (min-width: 900px) { .scene img { aspect-ratio: 21 / 9; } }
.scene figcaption { margin-top: .45rem; font-size: .78rem; color: rgba(27,26,23,0.55); }
.section--dark .scene figcaption { color: rgba(246,244,239,0.55); }
/* The dashboard (22 Oct, his ask): below the list */
#included .included { max-width: 1080px; }
#included .included__body { max-width: 820px; width: 100%; margin-inline: auto; }
#included .included__media { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* The evening photo: keep his head in frame when cropped to 21:9 */
.scene img[src*="avond"] { object-position: 50% 25%; }