/* Static-site overrides (injected by build_static.py after all other stylesheets) */

/* --- Project tiles: cleaner text in the gold banners (same shape, colour, position) --- */
.raxo-projecten .raxo-title {
  display: flex;
  align-items: center;
  top: auto;
  bottom: 10%;
  min-height: 92px;
  padding: 18px 22px 18px 15% !important;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.raxo-projecten .raxo-title a,
.raxo-projecten .raxo-title a:hover {
  display: block;
  color: #fff;
  text-decoration: none !important;
}
/* --- "Bekijk alle projecten": banner-style button in the site blue (points left + right), aqua on hover --- */
.sppb-btn.buttonProjecten {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 16px 48px;
  background-color: #316094 !important;
  color: #fff !important;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 50%, 26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease-out, padding 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sppb-btn.buttonProjecten:hover,
.sppb-btn.buttonProjecten:focus-visible {
  background-color: #009abf !important;   /* site aqua blue */
  color: #fff !important;
  font-weight: 500 !important;
  padding-left: 54px;                        /* points reach out a little */
  padding-right: 54px;
}
.sppb-btn.buttonProjecten:focus-visible { outline: none; text-decoration: underline !important; }

/* --- Header: hide the off-canvas hamburger on desktop (full menu is visible there) --- */
@media (min-width: 992px) {
  #offcanvas-toggler {
    display: none !important;
  }
}

/* --- Footer bottom bar: copyright + Webjongens credit --- */
.footer .site-footer__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer .site-footer__credits p { margin: 0; }
.footer .site-footer__credits,
.footer .site-footer__credits p,
.footer .site-footer__credits a { font-size: 16px !important; }

.credit {
  --credit-heart: #ab8900;
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; white-space: nowrap;
}
.footer .credit__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: #fff !important; text-decoration: none !important; letter-spacing: 0.02em;
}
.footer .credit__link:hover { text-decoration: none !important; }
.credit__link strong { font-weight: 700; }
.credit__link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.credit__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.credit__heart { width: 1.1rem; height: 1.1rem; fill: var(--credit-heart); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.credit__link:hover .credit__heart { transform: scale(1.2); }
.credit__typed { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 6.5em; color: rgb(255 255 255 / 0.72); }
.credit__cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: currentColor; animation: credit-blink 1s step-end infinite; }
@keyframes credit-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .credit__cursor { animation: none; }
  .credit__heart { transition: none; }
}

/* --- Disciplines banners (home): cleaner text + hover (same shapes/colours) --- */
.disciplines .blauw h4.sppb-addon-title,
.disciplines .aqua h4.sppb-addon-title,
.disciplines .geel h4.sppb-addon-title {
  padding: 26px 30px !important;
  font-size: 19px;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.7s ease-out;
}
/* arrow tips nudge in the direction they point; middle one lifts */
.disciplines .blauw .sppb-addon-overlay-image:hover h4.sppb-addon-title { transform: translateX(-4px); }
.disciplines .geel  .sppb-addon-overlay-image:hover h4.sppb-addon-title { transform: translateX(4px); }
.disciplines .aqua  .sppb-addon-overlay-image:hover h4.sppb-addon-title { transform: translateY(-2px); }
.disciplines .sppb-addon-overlay-image:hover h4.sppb-addon-title {
  filter: brightness(0.92);
}
/* slower, shorter photo slide + gentler text fade (was 50px in 0.35s) */
.disciplines .image-effect-slide-left .overlay-background-image {
  width: calc(100% + 20px);
  transform: translate3d(-20px, 0, 0);
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.disciplines .image-effect-slide-left:hover .overlay-background-image { transform: translate3d(0, 0, 0); }
.disciplines .overlay-image-title p,
.disciplines .overlay-image-button-wrap { transition: opacity 0.7s ease-out, visibility 0.7s; }
@media (prefers-reduced-motion: reduce) {
  .disciplines h4.sppb-addon-title { transition: none; }
  .disciplines .image-effect-slide-left .overlay-background-image,
  .disciplines .image-effect-slide-left:hover .overlay-background-image { transform: none; transition: none; }
}

/* --- Remove the back-to-top button --- */
.sp-scroll-up { display: none !important; }

/* --- Over Boekhold: Profiel (blok2) --- */
.blok2 h1.sppb-addon-title {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 28px;
  font-size: 38px !important;
  line-height: 1.1;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}
.blok2 h1.sppb-addon-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: #ab8900;
}
.blok2 .colLeft .sppb-addon-content p {
  max-width: 36em;
  font-size: 17px;
  line-height: 1.8;
  color: #3d434b;
}
.blok2 .colRight img {
  border-radius: 6px;
  box-shadow: 0 28px 56px -18px rgba(16, 40, 70, 0.35);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease-out;
}
.blok2 .colRight img:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 64px -18px rgba(16, 40, 70, 0.42);
}

/* --- Over Boekhold: three coloured discipline columns (blok4) + hover --- */
.blok4 .sppb-col-md-4 .sppb-column {
  transition: box-shadow 0.4s ease-out;
}
.blok4 .sppb-col-md-4 .sppb-column-addons {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.blok4 h3.sppb-addon-title {
  position: relative;
  padding-bottom: 18px;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
.blok4 h3.sppb-addon-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease-out;
}
.blok4 .sppb-addon-content p {
  line-height: 1.8;
  opacity: 0.92;
  -webkit-font-smoothing: antialiased;
}
.blok4 .sppb-col-md-4 .sppb-column:hover {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.07);
}
.blok4 .sppb-col-md-4 .sppb-column:hover .sppb-column-addons { transform: translateY(-6px); }
.blok4 .sppb-col-md-4 .sppb-column:hover h3.sppb-addon-title::after { width: 72px; background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .blok2 .colRight img, .blok4 .sppb-column, .blok4 .sppb-column-addons, .blok4 h3.sppb-addon-title::after { transition: none; }
}

/* --- Footer links: timed gold underline on hover (replaces instant underline) --- */
.footer .footermidden a {
  text-decoration: none !important;
  padding-bottom: 3px;
  background: linear-gradient(#ab8900, #ab8900) 0 100% / 0 2px no-repeat;
  transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer .footermidden a:hover,
.footer .footermidden a:focus-visible {
  text-decoration: none !important;
  background-size: 100% 2px;
}
@media (prefers-reduced-motion: reduce) {
  .footer .footermidden a { transition: none; }
}

/* --- Centred section titles (Projecten, Disciplines, ...): gold accent bar for more focus --- */
.sppb-addon-text-block.sppb-text-center > h2.sppb-addon-title {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: 30px;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
}
.sppb-addon-text-block.sppb-text-center > h2.sppb-addon-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: #ab8900;
  transform: translateX(-50%);
}

/* --- Header (hero): load-in motion --- */
@keyframes hero-pan    { from { background-position: 50% 28%; } to { background-position: 50% 0; } }
@keyframes hero-panel  { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.headerHome {
  animation: hero-pan 2.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.headerHome .colRight {
  animation: hero-panel 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  box-shadow: 0 24px 48px -20px rgba(10, 30, 60, 0.45);
}
/* animate the addon wrappers (not the h3s: a transform on the h3 would re-anchor its absolute marker) */
.headerHome .colRight .sppb-addon-wrapper {
  animation: hero-rise 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.headerHome .colRight .sppb-addon-wrapper:nth-child(1) { animation-delay: 0.5s; }
.headerHome .colRight .sppb-addon-wrapper:nth-child(2) { animation-delay: 0.75s; }
.headerHome .colRight .sppb-addon-wrapper:nth-child(3) { animation-delay: 0.95s; }
.headerHome .colRight .sppb-addon-wrapper:nth-child(4) { animation-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) {
  .headerHome, .headerHome .colRight, .headerHome .colRight .sppb-addon-wrapper { animation: none; }
}

/* --- Contact: blue site logo in the space where the form used to be --- */
.formulier .sppb-row { align-items: stretch; }
.contact-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* sit close to the contact details */
  height: 100%;
  padding: 20px 0;
}
/* centre contact details + logo as one group on wider screens */
@media (min-width: 768px) {
  .formulier .sppb-row { justify-content: center; column-gap: 96px; }
  .formulier .sppb-row > .sppb-col-md-5 { flex: 0 0 auto; width: auto; max-width: none; }
  /* fixed width: an auto-width column around a 100%-wide image collapses to 0 in Safari */
  .formulier .sppb-row > .sppb-col-md-7 { flex: 0 0 380px; width: 380px; max-width: 380px; }
}
.contact-logo img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  opacity: 0.55;
}
@media (max-width: 767px) {
  /* stacked: centre the contact details and the logo */
  .formulier .sppb-col-md-5 .sppb-column,
  .formulier .sppb-col-md-5 .sppb-addon,
  .formulier .sppb-col-md-5 .sppb-addon-content { text-align: center !important; }
  .formulier .sppb-col-md-5 ul { display: inline-block; text-align: left; padding-left: 0; margin: 0 auto; }
  .formulier .phone ul li,
  .formulier .email ul li { position: relative; margin-left: 0 !important; padding-left: 52px; }
  .contact-logo { justify-content: center; padding-top: 40px; }
  .contact-logo img { max-width: 260px; }
}

/* --- Disciplines cards: "Informatie aanvragen" in the two-pointed button shape --- */
.disciplines .overlay-image-button-wrap {
  background-color: transparent !important;
  text-align: center;
}
.overlay-show-content-on-hover:hover .overlay-image-button-wrap { bottom: 32px !important; }
.disciplines .overlay-image-button-wrap a.sppb-btn {
  display: inline-block;
  width: auto !important;                    /* one card had "full width" (sppb-btn-block) set */
  padding: 16px 48px !important;
  background-color: #fff !important;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 50%, 26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.disciplines .overlay-image-button-wrap:hover,
.disciplines .overlay-image-button-wrap a.sppb-btn:hover { text-decoration: none !important; }
.disciplines .overlay-image-button-wrap a.sppb-btn:hover,
.disciplines .overlay-image-button-wrap a.sppb-btn:focus-visible {
  background-color: #316094 !important;
  color: #fff !important;
  padding-left: 54px !important;
  padding-right: 54px !important;
}

/* --- Contact: larger phone number and e-mail --- */
.formulier .phone ul li,
.formulier .email ul li {
  margin-bottom: 14px;
  line-height: 30px;
}
.formulier .phone a,
.formulier .email a {
  font-size: 20px;
  letter-spacing: 0.01em;
}

/* --- Sticky navbar: frosted-glass (glossy, semi-opaque) --- */
#sp-header.header-sticky {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(49, 96, 148, 0.06), 0 10px 30px -12px rgba(16, 40, 70, 0.25);
}
#sp-header.header-sticky::before {           /* subtle gloss highlight along the top */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #sp-header.header-sticky { background: rgba(255, 255, 255, 0.95); }
}

/* --- Project tiles on hover: crisp white title above the blue overlay --- */
.raxo-projecten .raxo-title { z-index: 2; }
.raxo-projecten article:hover .raxo-title {
  z-index: 3;
  background-color: #4c86a0;                 /* site steel blue */
}
.raxo-projecten .raxo-title a:hover,
.raxo-projecten article:hover .raxo-title a {
  opacity: 1 !important;                     /* template dims links to 0.8 on hover */
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}


/* --- Footer: slightly larger link text (was 18px) --- */
.footer .footermidden p,
.footer .footermidden a { font-size: 20px !important; }

/* --- Over Boekhold: centre the text vertically in the three coloured columns --- */
.blok4 .sppb-col-md-4 .sppb-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* --- Contact: a little more breathing room before the footer --- */
section.sppb-section.formulier { padding-bottom: 70px !important; }

/* --- No sideways panning: several Page Builder rows stick out 15-30px (negative row margins).
       On phones that let the page shift sideways after opening/closing the menu. --- */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html { overflow-x: clip; }
  /* the theme sets body{overflow:hidden} inline while the menu is open; that made the body a scroll box
     that focus() nudged sideways. Keep the body a non-scrolling box and lock background scroll on <html>. */
  body { overflow: clip !important; }
  html:has(body.offcanvas-active) { overflow-y: hidden; }
}

/* --- Project tiles grid: keep it inside the screen (first tile was 15px off the left edge).
       Only where the screen is narrower than the 1500px content; wide screens stay as before. --- */
@media (max-width: 1530px) {
  .sppb-section:has(.raxo-projecten) .sppb-row { margin-left: 0; margin-right: 0; }
  .sppb-section:has(.raxo-projecten) .sppb-container-inner,
  .sppb-section:has(.raxo-projecten) .sppb-row-container { padding-left: 20px; padding-right: 20px; }
}

/* --- Project banners on narrow tiles: compact banner so the text fits (based on the tile's own width) --- */
.raxo-projecten .raxo-image { container-type: inline-size; }
@container (max-width: 380px) {
  .raxo-projecten .raxo-title {
    width: 82% !important;
    min-height: 0;
    bottom: 8%;
    padding: 14px 16px 14px 13% !important;
    font-size: 14px;
    line-height: 1.35;
  }
}

/* --- Disciplines overlay text: larger on tablet only --- */
@media (min-width: 576px) and (max-width: 1199px) {
  .disciplines .overlay-image-title p.sppb-addon-subtitle {
    font-size: 17px !important;
    line-height: 1.7;
  }
}

/* --- Phones: Disciplines overlay hidden until the card is tapped (theme forced it always-on) --- */
@media (max-width: 575px) {
  body .disciplines .overlay-show-content-on-hover:not(.is-open):not(:hover) .overlay-image-title p {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  body .disciplines .overlay-show-content-on-hover:not(.is-open):not(:hover) .overlay-image-button-wrap {
    display: none !important;
  }
  body .disciplines .overlay-show-content-on-hover.is-open .overlay-image-title p,
  body .disciplines .overlay-show-content-on-hover:hover .overlay-image-title p {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body .disciplines .overlay-show-content-on-hover.is-open .overlay-image-button-wrap,
  body .disciplines .overlay-show-content-on-hover:hover .overlay-image-button-wrap {
    display: inline-block !important;
  }
  .disciplines .overlay-show-content-on-hover { cursor: pointer; }
}

/* --- Footer on mobile/tablet: the columns form one centred block, text stays left-aligned --- */
@media (max-width: 991px) {
  .footer .footermidden .sppb-row { flex-direction: column; align-items: center; justify-content: center; }
  .footer .footermidden .sppb-row > [class*="sppb-col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 280px;                       /* same width for every column = shared left edge */
    margin-left: auto;
    margin-right: auto;
  }
  .footer .footermidden .sppb-column,
  .footer .footermidden .sppb-addon,
  .footer .footermidden .sppb-addon-content { text-align: left !important; }
  .footer .footermidden ul { padding-left: 0; margin-left: 0; }
  .footer .footermidden ul li {             /* anchor each icon/pill to its own line */
    position: relative;
    margin-left: 0 !important;
    padding-left: 52px;
  }
}


/* --- Tablet/mobile: theme keeps a 200px left padding on stacked text columns (Profiel etc.) --- */
@media (max-width: 991px) {
  .blok2 .colLeft,
  .blok5 .colLeft { padding: 0 32px !important; }
  .blok5 .colRight { padding-left: 32px !important; padding-right: 32px !important; }
  .blok2 .colLeft .sppb-addon-content p { max-width: none; }
}
@media (max-width: 575px) {
  .blok2 .colLeft,
  .blok5 .colLeft { padding: 0 20px !important; }
}

/* --- Footer bottom bar on phones: copyright and credit on two centred lines --- */
@media (max-width: 575px) {
  .footer .site-footer__credits {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
}

/* --- Pills closer to their text (footer menu + navbar active/hover marker) --- */
.footer .footermenu ul li:nth-of-type(1)::before,
.footer .footermenu ul li:nth-of-type(2)::before { left: 14px; }
nav li.active a::before,
nav li a:hover::before { left: 58px; }

/* --- Root cause of the sideways shift: theme wrappers were 30px wider than the screen
       (row -15px margins inside unpadded containers). Same look, no overflow. --- */
#sp-page-title > .row, #sp-main-body > .row, #sp-section-4 > .row,
section[id^="sp-"] > .row { margin-left: 0; margin-right: 0; }
#sp-page-title > .row > [class*="col-"], #sp-main-body > .row > [class*="col-"], #sp-section-4 > .row > [class*="col-"],
section[id^="sp-"] > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* closed off-canvas menu: keep it inside the screen and hide it with a clip (was parked at right:-300px) */
.offcanvs-position-right .offcanvas-menu {
  right: 0 !important;
  max-width: 100vw;
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  transition: clip-path 0.4s ease, visibility 0.4s;
}
.offcanvas-active .offcanvas-menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

/* --- Footer house logo centred on mobile/tablet --- */
@media (max-width: 991px) {
  .footer .footermidden .sppb-addon-single-image,
  .footer .footermidden .sppb-addon-single-image .sppb-addon-content { text-align: center !important; }
  .footer .footermidden .sppb-addon-single-image img { display: inline-block; margin: 0 auto 10px !important; }
}

/* --- Phones: Disciplines tint also only when the card is opened --- */
@media (max-width: 575px) {
  body .disciplines .overlay-show-content-on-hover:not(.is-open):not(:hover) .overlay-background-style { opacity: 0 !important; }
  body .disciplines .overlay-show-content-on-hover.is-open .overlay-background-style,
  body .disciplines .overlay-show-content-on-hover:hover .overlay-background-style { opacity: 1 !important; }
  body .disciplines .overlay-background-style { transition: opacity 0.5s ease; }
}

/* --- Project pages: a little more space under the page title --- */
.project h1.sppb-addon-title { margin-bottom: 18px !important; }

/* --- Project pages: gallery image hover --- */
.ba-gallery-items .ba-image { overflow: hidden; cursor: zoom-in; }
.ba-gallery-items .ba-image img {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.6s ease;
}
.ba-gallery-items:hover .ba-image img,
.ba-gallery-items:focus-visible .ba-image img {
  transform: scale(1.05);
  filter: brightness(0.92) saturate(1.05);
}
.ba-gallery-items .ba-image::after {            /* thin gold line grows along the bottom */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: #ab8900;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}
.ba-gallery-items .ba-image { position: relative; }
.ba-gallery-items:hover .ba-image::after { transform: scaleX(1); }

/* --- "Andere projecten" slider (Smart Slider): subtle polish + dots on tablet/mobile --- */
.n2-ss-slider .n2-ss-slide-background-image img {
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.n2-ss-slider .n2-ss-slide:hover .n2-ss-slide-background-image img { transform: scale(1.04); }
.n2-ss-slider .nextend-arrow { transition: transform 0.25s ease, opacity 0.25s ease; opacity: 0.9; }
.n2-ss-slider .nextend-arrow:hover { transform: scale(1.12); opacity: 1; }
.ss-dots { display: none; }
@media (max-width: 991px) {
  .n2-ss-slider .nextend-arrow { display: none !important; }
  .ss-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 6px;
  }
  .ss-dots {
    position: relative;
    z-index: 5;
  }
  .ss-dots button {
    width: 10px; height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);    /* sits on the aqua band */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
  }
  .ss-dots button.is-active { width: 26px; background: #ab8900; }
  .ss-dots button:focus-visible { outline: 2px solid #316094; outline-offset: 3px; }
}

/* --- Tablet/phone navbar: was 100px tall with only 50px of content (empty strip at the bottom) --- */
@media (max-width: 991px) {
  #sp-header,
  #sp-header.header-sticky { height: 72px !important; padding: 11px 0 !important; }
  #sp-header .logo { height: 50px; }
  #sp-header .logo-image-phone { height: 44px !important; width: auto; }
}

/* --- Over Boekhold, tablet: blueprint image centred and overlapping the blue section a bit more --- */
@media (min-width: 576px) and (max-width: 991px) {
  .blok3 .sppb-addon-single-image,
  .blok3 .sppb-addon-single-image .sppb-addon-content,
  .blok3 .sppb-addon-single-image-container { text-align: center !important; }
  .blok3 img {
    display: inline-block;
    position: relative;
    margin: 0 auto -200px !important;
  }
}

/* --- Project pages: Status band (blok6) - label + state badge --- */
.blok6.project h3.sppb-addon-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
}
.blok6.project h3.sppb-addon-title::before,
.blok6.project h3.sppb-addon-title::after {
  content: "";
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: #ab8900;
}
.status-badge {                               /* same two-pointed shape as the site buttons */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 48px;
  background: #fff;
  clip-path: polygon(0 50%, 26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%);
  color: #316094;
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
.status-dot {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ab8900;                       /* planned / other */
}
.status--active .status-dot { background: #009abf; }
.status--active .status-dot::after {          /* soft pulse = in progress */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #009abf;
  animation: status-pulse 2s ease-out infinite;
}
@keyframes status-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }
.status--done .status-dot {                   /* check = completed */
  width: 20px;
  height: 20px;
  background: #ab8900 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .status--active .status-dot::after { animation: none; }
}

/* --- "Andere projecten" slider: at most 3 (wider) slides on large desktops --- */
div#n2-ss-2-align {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- "Andere projecten" slider: wider banner, tighter padding -> titles on 2 lines --- */
div#n2-ss-2-align { max-width: 1440px !important; }
#n2-ss-2 h2.titel {
  width: 90% !important;
  margin-left: auto !important;
  padding: 18px 22px 18px 13% !important;
  font-family: "Noto Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* --- Project pages: Oplevering band (#5f8db5), styled like the Status band --- */
.blok7.project { padding-top: 0 !important; }
.oplevering-block {
  position: relative;
  padding: 50px 0 54px;
  margin-bottom: 40px;
  text-align: center;
  isolation: isolate;
}
.oplevering-block::before {                  /* one full-width background layer (no seams) */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #5f8db5;
  z-index: -1;
}
.oplevering-block h3.sppb-addon-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
.oplevering-block h3.sppb-addon-title::before,
.oplevering-block h3.sppb-addon-title::after {
  content: "";
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  opacity: 0.8;
}
.oplevering-block .sppb-addon-content p { margin: 0; color: #316094 !important; }
.status-icon {                                  /* calendar icon */
  flex: none;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ab8900' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Project pages: two-line titles (split at the dash) --- */
.project h1.sppb-addon-title .title-sub { display: inline-block; margin-top: 4px; }
@media (max-width: 575px) {
  #n2-ss-2 h2.titel { font-size: 14px !important; padding: 16px 18px 16px 12% !important; width: 94% !important; }
}

/* --- Footer on mobile/tablet: evenly distributed items (same line gap, same group gap) --- */
@media (max-width: 991px) {
  .footer .footermidden .sppb-addon-wrapper { margin: 0 !important; }
  .footer .footermidden ul { margin: 0 !important; }
  .footer .footermidden ul li { margin-bottom: 12px !important; line-height: 30px; min-height: 30px; }
  .footer .footermidden ul li:last-child { margin-bottom: 0 !important; }
  .footer .footermidden ul li p { margin: 0 !important; line-height: 30px; }
  .footer .footermidden ul li br,
  .footer .footermidden ul li br + p { display: none !important; }    /* empty spacer paragraphs */
  .footer .footermidden .sppb-row > [class*="sppb-col-"] { padding-top: 16px; padding-bottom: 16px; }
  .footer .footermidden .sppb-row > [class*="sppb-col-"]:has(.sppb-column-addons:empty) { display: none; }
  .footer .footermidden img { margin: 8px auto 0 !important; }
}
@media (max-width: 991px) {
  .footer .footermidden .sppb-addon.email { margin-top: 12px; }   /* phone + e-mail are separate blocks */
}

/* --- Project titles on tablet/mobile: scale down and never overflow (long words like PROJECTMANAGEMENT) --- */
@media (max-width: 991px) {
  .project h1.sppb-addon-title {
    font-size: clamp(22px, 5.2vw, 34px) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;               /* only breaks a word if it can't fit on a line at all */
  }
  .project h1.sppb-addon-title .title-sub {
    display: block;
    margin-top: 6px;
    font-size: 0.72em;
    letter-spacing: 0.06em;
  }
}

/* --- Phones: less white space between the Oplevering band and "Andere projecten" (was 140px) --- */
@media (max-width: 575px) {
  .oplevering-block { margin-bottom: 0; }
  .blok7.project { padding-bottom: 0 !important; }
  section.sppb-section.blok8 { padding-top: 40px !important; }
}

/* --- Tablet/phone: dots centred in the light-blue strip under the slides --- */
@media (max-width: 991px) {
  section.sppb-section.blok8 { padding-bottom: 0 !important; }
  .ss-dots { padding: 24px 0 !important; margin: 0; }
}