/* Layout V25: consistent horizontal rhythm and responsive content columns.
   Approved imagery, wording, colors and page order remain unchanged. */
:root { --site-content-width: 1180px; --site-gutter: 44px; }
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
/* All main content sections, hero captions, navigation and footer use one grid. */
body .shell,
body main .shell,
body main section.shell,
body main div.shell,
body .header .shell,
body .footer .shell,
#page-grip .subhero.has-image > .shell {
  box-sizing: border-box !important;
  width: min(var(--site-content-width), calc(100% - var(--site-gutter) * 2)) !important;
  max-width: var(--site-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Uniform left edges even for reading-focused legal pages. */
#page-privacy > .legal-copy.shell,
#page-voorwaarden > .legal-wrap.shell {
  width: min(var(--site-content-width), calc(100% - var(--site-gutter) * 2)) !important;
  max-width: var(--site-content-width) !important;
  margin-inline: auto !important;
}
#page-privacy > .legal-copy.shell > *,
#page-voorwaarden > .legal-wrap.shell > * {
  max-width: 900px;
}
/* Images and grids must not impose an unintended minimum on text columns. */
main [class*="grid"], main [class*="layout"],
main .v24-lm-row, main .v24-tiles,
main .review-card, main .feature,
main .v24-lm-copy, main .v24-new-page,
main .v46-about-copy {min-width: 0;}
main p,main blockquote,main h1,main h2,main h3,
main .review-person {overflow-wrap: break-word;}
main img, main video {max-width: 100%;}
/* Maintain the GRIP full-width photographic header with the exact same text grid. */
#page-grip .subhero.has-image > .shell {position:relative!important;z-index:2!important;}
#page-grip .subhero.has-image > img.page-hero-photo {
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 45% !important;
}
/* The LastMinute imagery remains contained within its section, never protruding. */
#page-lastminute-productie .v24-lm-row {max-width:100%;}
#page-lastminute-productie .v24-lm-photo {min-width:0;max-width:100%;}
#page-lastminute-productie .v24-lm-photo img {max-width:100%;}
/* Keep form controls and card buttons inside their columns. */
#page-contact input,#page-contact textarea,#page-contact select,
#page-contact .contact-form {max-width: 100%;min-width: 0;}
/* Tablet and small laptop: consistent page gutters and less cramped multi-column content. */
@media (max-width:1199px) {
 :root {--site-gutter:26px;}
 body .header-shell {gap:12px;}
 #page-reviews .reviews-page-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
/* Phone layouts: one content column, predictable edges, readable text and buttons. */
@media (max-width:700px) {
 :root {--site-gutter:18px;}
 body .shell,
 body main .shell,
 body main section.shell,
 body main div.shell,
 body .header .shell,
 body .footer .shell,
 #page-grip .subhero.has-image > .shell,
 #page-privacy > .legal-copy.shell,
 #page-voorwaarden > .legal-wrap.shell {
   width: calc(100% - 36px) !important;
   margin-inline:auto!important;
 }
 #page-reviews .reviews-page-grid,
 #page-home .v46-review-grid {grid-template-columns:minmax(0,1fr)!important;}
 #page-lastminute-productie .v24-lm-row,
 #page-over .about-layout,
 #page-contact .contact-layout {grid-template-columns:minmax(0,1fr)!important;}
 #page-grip .v24-tiles,
 #page-lastminute-productie .v24-tiles,
 #page-werkwijze .v24-tiles,
 #page-home .v24-tiles {grid-template-columns:minmax(0,1fr)!important;}
 #page-grip .subhero.has-image > .shell {padding-block:28px!important;}
 .hero-actions,.v24-actions {flex-wrap:wrap!important;}
 .hero-actions .btn,.v24-actions .btn {max-width:100%;}
 #page-lastminute-productie .v24-lm-photo-together,
 #page-lastminute-productie .v24-lm-photo-tabitha {max-width:100%!important;}
 .section-head,.reviews-page-intro {min-width:0;}
}
@media (max-width:380px) {
  .header-shell .wordmark {font-size:clamp(16px,5vw,19px);}
  #page-grip .subhero .display {font-size:clamp(36px,10vw,44px)!important;}
  .v24-actions .btn {white-space:normal;}
}
/* Legacy Werkwijze rules had their own 44px gutters at every breakpoint. */
#page-werkwijze .workflow-intro.shell,
#page-werkwijze .workflow-steps .shell,
#page-werkwijze .workflow-cta-inner {
  box-sizing:border-box!important;
  max-width:var(--site-content-width)!important;
  width:min(var(--site-content-width),calc(100% - var(--site-gutter) * 2))!important;
  margin-inline:auto!important;
}
@media (max-width:700px) {
 #page-werkwijze .workflow-intro.shell,
 #page-werkwijze .workflow-steps .shell,
 #page-werkwijze .workflow-cta-inner {
   width:calc(100% - 36px)!important;
 }
 .mobile-menu-btn {min-width:44px!important;min-height:44px!important;}
}
/* Display the working hamburger navigation on tablets as well as phones. */
@media (max-width:1100px) {
  .header .mainnav {display:none!important;}
  .header .header-cta {display:none!important;}
  .header .mobile-menu-btn {display:grid!important;place-items:center!important;flex:0 0 44px;}
  .header .header-shell {gap:16px!important;justify-content:space-between!important;}
  .header .mobile-drawer.open {display:flex!important;flex-direction:column!important;gap:0!important;background:#091318!important;padding:8px max(18px,var(--site-gutter)) 24px!important;border-top:1px solid rgba(255,255,255,.13)!important;max-height:calc(100svh - 68px)!important;overflow-y:auto!important;}
  .header .mobile-drawer.open a {display:block!important;padding:13px 8px!important;border-bottom:1px solid rgba(255,255,255,.11)!important;font-size:14px!important;}
}