/* ============================================
   VITAL CARE - Fomic-inspired layout (fx)
   Loaded after style.css on the redesigned pages; everything is scoped to body.fx
   (page variants: .page-home, .page-services, .page-service) so pages without it keep the old look.
   ============================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.fx {
  --f-bg: #fcfcfc;
  --f-surface: #ffffff;
  --f-ink: #0b1220;
  --f-text: #444a55;
  --f-muted: #5f6571;
  --f-blue: #1a73b5;
  --f-blue-hover: #145d94;
  --f-tint: #eaf2fb;
  --f-tint-2: #d6e6f6;
  --f-line: #dbe6f2;
  --f-star: #ff7b00;
  --f-radius: 24px;
  --f-radius-sm: 16px;
  --f-gutter: 24px;
  --f-max: 1320px;
  --f-font: 'Inter', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  background: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.fx h1,
.fx h2,
.fx h3,
.fx h4 {
  font-family: var(--f-font);
  color: var(--f-ink);
  letter-spacing: -0.02em;
  font-weight: 500;
}

.fx .fcontainer {
  max-width: var(--f-max);
  margin: 0 auto;
  padding: 0 40px;
}

.fx .fsection {
  padding: 120px 0;
}

.fx .fsection--tint {
  background: var(--f-tint);
}

/* ---------- Shared pieces ---------- */

.fx .fpill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  background: var(--f-surface);
  color: var(--f-ink);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx .fpill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--f-blue);
  opacity: 0.55;
  flex-shrink: 0;
}

.fx .fpill--glass {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.fx .fpill--glass .fpill__dot {
  background: #fff;
  opacity: 1;
}

.fx .fhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 56px;
}

.fx .fhead--center {
  align-items: center;
  text-align: center;
}

.fx .fhead--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.fx .fhead__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.fx .fhead h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  margin: 0;
}

.fx .fhead__sub {
  font-size: 1.1rem;
  color: var(--f-text);
  margin: 0;
}

/* Button: label + blue arrow square (Fomic) */
.fx .fbtn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 5px 5px 5px 18px;
  border-radius: 14px;
  border: 1px solid var(--f-line);
  background: var(--f-surface);
  color: var(--f-ink);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.fx .fbtn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--f-blue);
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.fx .fbtn__icon svg {
  width: 18px;
  height: 18px;
}

.fx .fbtn:hover .fbtn__icon,
.fx .fbtn:focus-visible .fbtn__icon {
  transform: rotate(45deg);
}

.fx .fbtn--primary {
  background: var(--f-blue);
  border-color: var(--f-blue);
  color: #fff;
}

.fx .fbtn--primary .fbtn__icon {
  background: #fff;
  color: var(--f-blue);
}

.fx .fbtn--primary:hover {
  background: var(--f-blue-hover);
  border-color: var(--f-blue-hover);
}

.fx .fbtn--glass {
  background: rgba(10, 18, 34, 0.35);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.fx .fbtn--glass .fbtn__icon {
  background: #25d366;
}

.fx .ficon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--f-blue);
  color: #fff;
  flex-shrink: 0;
}

.fx .ficon svg {
  width: 24px;
  height: 24px;
}

/* ---------- Header: floating pill ---------- */
/* Solid light pill on every fx page (Fomic inner pages); on the homepage it is glass over
   the hero photo until the page scrolls (script.js adds .header--scrolled). */

.fx .header {
  --nav-ink: #13233a;
  --nav-line: #d3e0ee;
  --nav-blue: #145d94;
  --nav-hover: #f1f6fc;
  --nav-active: #e3eefa;
  --nav-active-line: #c6daf0;
  position: fixed;
  top: 24px;
  left: 50%;
  right: auto;
  width: min(1040px, calc(100% - 96px));
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--nav-line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.05), 0 14px 34px -12px rgba(11, 18, 32, 0.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  transition: background-color 0.3s ease, border-color 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
}

.fx .header .header__inner {
  height: 72px;
  padding: 0 10px 0 22px;
  max-width: none;
}

.fx .header .header__logo-img {
  height: 38px;
}

.fx .header__logo-light {
  display: none;
}

/* Nav labels in Title Case (Offerte Aanvragen / Request A Quote); the text itself stays as written */
.fx .header .nav__link,
.fx .header .header__cta,
.fx .mobile-menu__link,
.fx .mobile-menu__footer .btn {
  text-transform: capitalize;
}

.fx .header .nav__link {
  color: var(--nav-ink);
  font-family: var(--f-font);
  font-weight: 500;
  background: transparent;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.fx .header .nav__link:hover {
  background: var(--nav-hover);
  color: var(--nav-blue);
}

.fx .header .nav__link--active,
.fx .header .nav__link--active:hover {
  background: var(--nav-active);
  color: var(--nav-blue);
  box-shadow: inset 0 0 0 1px var(--nav-active-line);
}

.fx .header .nav__link:focus-visible,
.fx .header .lang-switch__btn:focus-visible,
.fx .header .header__cta:focus-visible {
  outline: 2px solid #7fb3de;
  outline-offset: 2px;
}

.fx .header .nav__dropdown-menu {
  border-radius: 16px;
  border: 1px solid var(--nav-line);
  box-shadow: 0 16px 40px rgba(11, 18, 32, 0.12);
  font-family: var(--f-font);
}

.fx .header .nav__dropdown-menu a {
  color: #2b3a4f;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.fx .header .nav__dropdown-menu a:hover {
  background: var(--nav-hover);
  color: var(--nav-blue);
}

.fx .header .lang-switch {
  height: 40px;
  padding: 3px;
  border: 1px solid var(--nav-line);
  border-radius: 12px;
  background: #eef3f9;
}

.fx .header .lang-switch__btn {
  height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  color: #2b3a4f;
  font-family: var(--f-font);
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.fx .header .lang-switch__btn:hover {
  color: var(--nav-blue);
}

.fx .header .lang-switch__btn--active,
.fx .header .lang-switch__btn--active:hover {
  background: #fff;
  color: var(--nav-blue);
  box-shadow: 0 0 0 1px var(--nav-active-line), 0 1px 2px rgba(11, 18, 32, 0.08);
}

.fx .header .header__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--f-blue);
  color: #fff;
  font-family: var(--f-font);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.fx .header .header__cta:hover {
  background: var(--nav-blue);
  color: #fff;
  transform: none;
  box-shadow: 0 6px 16px -6px rgba(26, 115, 181, 0.55);
}

/* The nav sits in its own centred column, so it lands on the same spot on every page,
   whatever the logo or the right-hand controls measure (the blog hides the language switch). */
.fx .header .header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}

.fx .header .header__logo {
  justify-self: start;
}

.fx .header .header__right {
  justify-self: end;
}

/* Switching NL/EN must not move anything: the two labels that differ in length keep the
   width of their (longer) Dutch text, so the nav, the language switch and the CTA stay put. */
.fx .header .nav__dropdown-trigger {
  min-width: 179px;
  justify-content: center;
  text-align: center;
}

.fx .header .header__cta {
  min-width: 164px;
  justify-content: center;
}

@media (max-width: 1100px) {
  .fx .header .nav__link {
    padding: 8px 10px;
  }

  .fx .header .lang-switch__btn {
    padding: 0 9px;
  }

  .fx .header .nav__dropdown-trigger {
    min-width: 171px;
  }
}

/* Below this the full nav no longer fits in the pill: same hamburger menu as on phones */
@media (max-width: 1000px) {
  .fx .header .nav,
  .fx .header .header__cta {
    display: none;
  }

  .fx .header .menu-toggle {
    display: flex;
  }

  .fx .mobile-menu {
    display: block;
  }

  .fx .header .header__inner {
    display: flex;
    justify-content: space-between;
  }
}

/* Mobile menu: same language switch and quiet WhatsApp accent as the header and widget */
.fx .mobile-menu__link {
  color: var(--f-ink);
  font-family: var(--f-font);
}

.fx .mobile-menu__lang .lang-switch {
  height: 40px;
  padding: 3px;
  border: 1px solid #d3e0ee;
  border-radius: 12px;
  background: #eef3f9;
}

.fx .mobile-menu__lang .lang-switch__btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  color: #2b3a4f;
  font-family: var(--f-font);
}

.fx .mobile-menu__lang .lang-switch__btn--active {
  background: #fff;
  color: #145d94;
  box-shadow: 0 0 0 1px #c6daf0, 0 1px 2px rgba(11, 18, 32, 0.08);
}

.fx .mobile-menu__footer .btn {
  border-radius: 12px;
  font-family: var(--f-font);
  font-weight: 600;
}

.fx .mobile-menu__footer .btn--whatsapp {
  border: 1px solid #c3e7d2;
  background: #e9f7ef;
  color: #0f6b43;
}

.fx .mobile-menu__footer .btn--whatsapp:hover {
  background: #dcf2e5;
  color: #0f6b43;
}

.fx .header .menu-toggle svg {
  stroke: var(--f-ink);
}

.fx .header.header--scrolled {
  top: 16px;
}

/* ---------- Hero ---------- */

.fx .fhero {
  position: relative;
  margin: 24px;
  min-height: min(880px, calc(100svh - 48px));
  border-radius: var(--f-radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}

.fx .fhero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.fx .fhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
}

.fx .fhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 14, 28, 0.35) 0%, rgba(8, 14, 28, 0) 22%),
    linear-gradient(0deg, rgba(8, 14, 28, 0.82) 0%, rgba(8, 14, 28, 0.35) 45%, rgba(8, 14, 28, 0.05) 75%);
}

.fx .fhero__content {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: end;
  gap: 48px;
  padding: 48px;
}

.fx .fhero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 860px;
}

.fx .fhero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0;
}

.fx .fhero__text p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}

.fx .fhero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fx .fhero__actions .fbtn {
  justify-content: space-between;
  width: 100%;
  padding-left: 20px;
}

/* ---------- About statement ---------- */

.fx .fabout__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.fx .fabout__statement {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--f-ink);
}

/* Words start light and darken as the paragraph scrolls through (home.js adds .is-reveal).
   The light state stays readable: #7f8793 on the page background is 3.5:1, above the 3:1 WCAG
   minimum for text this large (1.4.3), so an unlit word is quieter, never gone. */
.fx .fabout__statement.is-reveal .fword {
  color: #7f8793;
  transition: color 0.35s ease;
}

.fx .fabout__statement.is-reveal .fword.is-on {
  color: var(--f-ink);
}

/* ---------- Services ---------- */

.fx .fservices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.fx .fservice {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.fx .fservice__media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--f-radius);
  overflow: hidden;
  background: var(--f-tint);
}

.fx .fservice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx .fservice:hover .fservice__media img {
  transform: scale(1.04);
}

.fx .fservice__bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  background: var(--f-bg);
  border-radius: 12px;
}

.fx .fservice__bar h3 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.fx .fservice__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #b9d3ec;
  border-radius: 9px;
  background: #dceaf8;
  color: #145d94;
  flex-shrink: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.fx .fservice__chip svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.fx .fservice:hover .fservice__chip,
.fx .fservice:focus-visible .fservice__chip {
  border-color: var(--f-blue);
  background: var(--f-blue);
  color: #fff;
  transform: rotate(45deg);
}

/* Keyboard: ring around the card plus the filled arrow */
.fx .fservice:focus-visible {
  outline: 3px solid #7fb3de;
  outline-offset: 4px;
  border-radius: var(--f-radius);
}

.fx .fservice__desc {
  margin: 0;
  padding: 0 4px;
  color: var(--f-text);
  line-height: 1.55;
}

.fx .fservice__more {
  padding: 0 4px;
  color: var(--f-blue);
  font-weight: 500;
  font-size: 0.95rem;
}

/* ---------- Why: bento ---------- */

.fx .fbento {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(240px, auto));
  gap: 24px;
}

.fx .fbento__photo {
  grid-row: 1 / span 2;
  margin: 0;
  border-radius: var(--f-radius);
  overflow: hidden;
  min-height: 420px;
}

.fx .fbento__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx .fbento__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 28px;
  border-radius: var(--f-radius);
  background: var(--f-surface);
}

.fx .fbento__card h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.fx .fbento__card p {
  margin: 0;
  line-height: 1.6;
}

/* ---------- Steps ---------- */

.fx .fsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: none;
}

.fx .fstep {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--f-radius);
  background: var(--f-tint);
}

.fx .fstep__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--f-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.fx .fstep h3 {
  margin: 8px 0 0;
  font-size: 1.3rem;
}

.fx .fstep p {
  margin: 0;
  line-height: 1.6;
}

/* ---------- Marquee band ---------- */

/* Quiet brand strip: deep blue-teal, small type, slow seamless loop. Every item carries its
   own trailing space (no flex gap), so the two halves are identical and -50% loops without a jump. */
.fx .fmarquee {
  overflow: hidden;
  padding: 21px 0;
  background: #174e6d;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.fx .fmarquee__track {
  display: flex;
  width: max-content;
  animation: fmarquee 72s linear infinite;
  will-change: transform;
}

.fx .fmarquee__item {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.fx .fmarquee__spark {
  display: inline-flex;
  flex: 0 0 auto;
  width: 0.42em;
  height: 0.42em;
  color: #e7c67d;
  opacity: 0.9;
}

.fx .fmarquee__spark svg {
  width: 100%;
  height: 100%;
}

@keyframes fmarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- Testimonials ---------- */

.fx .freviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.fx .freview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px 28px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  background: var(--f-surface);
}

.fx .freview::before {
  content: "\201C";
  font-size: 5rem;
  line-height: 0.6;
  height: 34px;
  color: var(--f-tint-2);
  font-weight: 700;
}

.fx .freview__stars {
  color: var(--f-star);
  letter-spacing: 3px;
  font-size: 1.05rem;
}

.fx .freview p {
  margin: 0;
  flex: 1;
  color: var(--f-ink);
  font-size: 1.15rem;
  line-height: 1.55;
}

.fx .freview__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fx .freview__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--f-tint);
  color: var(--f-blue);
  font-weight: 600;
}

.fx .freview__name {
  color: var(--f-ink);
  font-weight: 500;
}

/* ---------- FAQ ---------- */

.fx .ffaq {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fx .ffaq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx .ffaq .faq-item {
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
  overflow: hidden;
}

.fx .ffaq .faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 22px 24px;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--f-ink);
  cursor: pointer;
}

.fx .ffaq .faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--f-tint);
  color: var(--f-blue);
  flex-shrink: 0;
  transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.fx .ffaq .faq-item__icon svg {
  width: 18px;
  height: 18px;
}

.fx .ffaq .faq-item--open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--f-blue);
  color: #fff;
}

.fx .ffaq .faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.fx .ffaq .faq-item--open .faq-item__answer {
  max-height: 400px;
}

.fx .ffaq .faq-item__answer p {
  margin: 0;
  padding: 0 24px 24px;
  line-height: 1.65;
}

.fx .ffaq__card {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 36px;
  border-radius: var(--f-radius);
  background: var(--f-tint);
  text-align: center;
}

.fx .ffaq__card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--f-radius-sm);
}

.fx .ffaq__card h3 {
  margin: 12px 0 0;
  font-size: 1.6rem;
}

.fx .ffaq__card p {
  margin: 0;
  max-width: 420px;
  line-height: 1.6;
}

.fx .ffaq__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* ---------- Final CTA + footer card ---------- */

.fx .fcta {
  position: relative;
  padding: 150px 24px 260px;
  text-align: center;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.fx .fcta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.fx .fcta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx .fcta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 20, 38, 0.62);
}

.fx .fcta__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.fx .fcta h2 {
  color: #fff;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.08;
  margin: 0;
}

.fx .fcta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.15rem;
  max-width: 600px;
}

.fx .fcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* Footer becomes a light card overlapping the CTA photo */
.fx .footer {
  position: relative;
  z-index: 1;
  margin: -200px 24px 24px;
  padding: 56px 0 0;
  border-radius: var(--f-radius);
  background: #eef1f6;
  color: var(--f-text);
}

.fx .footer .footer__logo-img {
  height: 44px;
}

.fx .footer h4 {
  color: var(--f-ink);
  font-size: 1.15rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
}

.fx .footer .footer__contact-item svg {
  stroke: var(--f-blue);
}

.fx .footer .footer__bottom {
  border-top-color: #d8dee8;
}

/* ---------- Responsive ---------- */

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

  .fx .fsteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx .freviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx .fbento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx .fbento__photo {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 360px;
  }
}

@media (max-width: 1100px) {
  .fx .header {
    width: calc(100% - 48px);
  }
}

@media (max-width: 860px) {
  .fx .fhero__content {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px;
  }

  .fx .fhero__actions {
    max-width: 420px;
  }

  .fx .fhead--split {
    flex-direction: column;
    align-items: flex-start;
  }

  .fx .ffaq {
    grid-template-columns: 1fr;
  }

  .fx .ffaq__card {
    position: static;
  }
}

@media (max-width: 768px) {
  .fx .fcontainer {
    padding: 0 20px;
  }

  .fx .fsection {
    padding: 80px 0;
  }

  .fx .fhead {
    margin-bottom: 40px;
  }

  .fx .header {
    top: 24px;
    width: calc(100% - 48px);
    border-radius: 16px;
  }

  .fx .header .header__inner {
    height: 64px;
    padding: 0 8px 0 16px;
  }

  .fx .header .header__logo-img {
    height: 32px;
  }

  .fx .fhero {
    margin: 12px;
    min-height: calc(100svh - 24px);
    border-radius: 20px;
  }

  .fx .fhero__content {
    padding: 104px 22px 24px;
  }

  .fx .fhero__text p {
    font-size: 1.02rem;
  }

  .fx .fhero .fpill {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 8px 12px;
  }

  .fx .fservices {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
  }

  .fx .fservices::-webkit-scrollbar {
    display: none;
  }

  .fx .fservice {
    scroll-snap-align: start;
  }

  .fx .fbento,
  .fx .fsteps,
  .fx .freviews {
    grid-template-columns: 1fr;
  }

  .fx .fbento__photo {
    min-height: 280px;
  }

  .fx .fmarquee {
    padding: 16px 0;
  }

  .fx .fmarquee__track {
    animation-duration: 60s;
  }

  .fx .fmarquee__item {
    gap: 24px;
    padding-right: 24px;
  }

  .fx .fcta {
    padding: 100px 20px 230px;
  }

  .fx .footer {
    margin: -180px 12px 12px;
    border-radius: 20px;
  }
}

/* The hero already offers WhatsApp; the floating button waits until the hero is scrolled past
   (home.js toggles .is-tucked) so it never covers the hero buttons. */
.fx .wa-widget {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fx .wa-widget.is-tucked {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx .fmarquee__track {
    animation: none;
  }

  .fx .fabout__statement.is-reveal .fword {
    color: var(--f-ink);
    transition: none;
  }
}

/* Services follow the intro directly; the intro already carries the bottom spacing. */
.fx .fsection--flush-top {
  padding-top: 0;
}

/* ============================================
   Inner pages (services overview + service detail)
   ============================================ */

.fx .fpage {
  padding-top: 170px;
}

.fx .fpagehead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto 56px;
  text-align: center;
}

.fx .fpagehead h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.fx .fpagehead p {
  margin: 0;
  max-width: 640px;
  font-size: 1.15rem;
  line-height: 1.6;
}

.fx .fpagehead__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.fx .fsubhead {
  margin: 0 0 28px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
}

/* Services overview: two large cards per row (Fomic /services) */
.fx .fservices--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fx .fservices--2 .fservice__media {
  aspect-ratio: 648 / 560;
}

.fx .fservices--2 .fservice__bar {
  left: 24px;
  right: 24px;
  bottom: 24px;
}

.fx .fservices--2 .fservice__bar h3 {
  font-size: 1.5rem;
}

/* Service detail: wide media */
.fx .fwide {
  margin: 0 0 72px;
  border-radius: var(--f-radius);
  overflow: hidden;
  aspect-ratio: 1320 / 760;
  background: var(--f-tint);
}

.fx .fwide > picture img,
.fx .fwide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx .fwide.ba-slider {
  position: relative;
}

.fx .fwide.ba-slider .ba-slider__after,
.fx .fwide.ba-slider .ba-slider__after img {
  height: 100%;
}

.fx .fwide.ba-slider .ba-slider__before img {
  height: 100%;
  object-fit: cover;
}

/* Service detail: article + sticky booking card */
.fx .fdetail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  gap: 56px;
  align-items: start;
}

.fx .farticle > * + * {
  margin-top: 0;
}

.fx .farticle__lead {
  margin: 0 0 56px;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--f-ink);
}

.fx .farticle__block {
  margin-bottom: 64px;
}

.fx .farticle__block:last-child {
  margin-bottom: 0;
}

.fx .farticle h2 {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.12;
}

.fx .farticle p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* "What's included": bordered pills with a blue check chip */
.fx .fchecklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.fx .fchecklist li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 16px 10px 60px;
  border: 1px solid var(--f-tint-2);
  border-radius: 14px;
  background: var(--f-tint);
  color: var(--f-ink);
  line-height: 1.4;
}

.fx .fchecklist li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: var(--f-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---- Answer blocks: a direct, self-contained answer + plain facts (service and sector pages) ---- */
.fx .fanswer__text {
  color: var(--f-ink);
}

.fx .ffacts {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.fx .ffacts__row {
  padding: 16px 18px;
  border: 1px solid var(--f-line);
  border-radius: 14px;
  background: var(--f-surface);
}

.fx .ffacts__row:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.fx .ffacts dt {
  margin: 0 0 4px;
  color: var(--f-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fx .ffacts dd {
  margin: 0;
  color: var(--f-ink);
  font-size: 0.98rem;
  line-height: 1.55;
}

.fx .fsus-intro:has(+ .fsec-answer) {
  margin-bottom: 48px;
}

.fx .fsec-block.fsec-answer {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 36px;
  border: 1px solid var(--f-tint-2);
  border-radius: var(--f-radius);
  background: var(--f-tint);
}

.fx .fsec-block.fsec-answer h2 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.2;
}

.fx .fsec-block.fsec-answer p {
  margin: 0;
  color: var(--f-ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .fx .ffacts { grid-template-columns: 1fr; }
  .fx .fsus-intro:has(+ .fsec-answer) { margin-bottom: 32px; }
  .fx .fsec-block.fsec-answer { padding: 24px 20px; }
}

/* Benefits: rows with an icon */
.fx .fbenefits {
  display: grid;
  gap: 16px;
}

.fx .fbenefit {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
}

.fx .fbenefit .ficon {
  width: 48px;
  height: 48px;
}

.fx .fbenefit .ficon svg {
  width: 22px;
  height: 22px;
}

.fx .fbenefit h3 {
  margin: 2px 0 6px;
  font-size: 1.2rem;
}

.fx .fbenefit p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Compact steps inside the article */
.fx .fsteps--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fx .fsteps--compact .fstep {
  padding: 24px;
}

.fx .fsteps--compact .fstep h3 {
  font-size: 1.15rem;
}

.fx .fsteps--compact .fstep p {
  font-size: 1rem;
}

.fx .farticle .ffaq__list {
  gap: 12px;
}

/* Sticky booking card (Fomic "Book Our Services") */
.fx .fbook {
  position: sticky;
  top: 116px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px;
  border-radius: var(--f-radius);
  background: var(--f-tint);
}

.fx .fbook h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.15;
}

.fx .fbook img {
  width: 100%;
  aspect-ratio: 376 / 260;
  object-fit: cover;
  border-radius: var(--f-radius-sm);
}

.fx .fbook__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fx .fbook__label {
  color: var(--f-muted);
  font-size: 0.95rem;
}

.fx .fbook__value {
  color: var(--f-ink);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.fx .fbook__value:hover {
  color: var(--f-blue);
}

.fx .fbook .fbtn {
  justify-content: space-between;
}

/* Related services under the article */
.fx .frelated {
  margin-top: 96px;
}

/* ---------- Inner pages + footer: responsive ---------- */

@media (max-width: 1100px) {
  .fx .fdetail {
    grid-template-columns: 1fr;
  }

  .fx .fbook {
    position: static;
  }
}

@media (max-width: 768px) {
  .fx .fpage {
    padding-top: 130px;
  }

  .fx .fpagehead {
    margin-bottom: 36px;
  }

  .fx .fservices--2 {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .fx .fwide {
    aspect-ratio: 4 / 3;
    margin-bottom: 48px;
  }

  .fx .fchecklist,
  .fx .fsteps--compact {
    grid-template-columns: 1fr;
  }

  .fx .farticle__block {
    margin-bottom: 48px;
  }
}

/* FAQ inside the service article: one column, no side card */
.fx .ffaq--single {
  grid-template-columns: 1fr;
}

/* ---------- Specificity fixes (older .fx .footer / .farticle p rules win otherwise) ---------- */

.fx .farticle .farticle__lead {
  margin: 0 0 56px;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--f-ink);
}

/* ============================================
   Contact page (Fomic /contact)
   ============================================ */

.fx .fcontact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.fx .fcontact__photo {
  border-radius: var(--f-radius);
  overflow: hidden;
  min-height: 420px;
}

.fx .fcontact__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx .fcontact__form {
  padding: 32px;
  border-radius: var(--f-radius);
  background: var(--f-tint);
  box-shadow: none;
  border: 0;
}

.fx .fcontact__form h2 {
  margin: 0 0 8px;
  font-size: 1.9rem;
}

.fx .fcontact__form form {
  margin-top: 20px !important;
}

.fx .fcontact__form .form-group {
  margin-bottom: 18px;
}

.fx .fcontact__form label {
  display: block;
  margin-bottom: 8px;
  color: var(--f-ink);
  font-family: var(--f-font);
  font-size: 1rem;
  font-weight: 500;
}

.fx .fcontact__form .optional {
  color: var(--f-muted);
  font-weight: 400;
}

.fx .fcontact__form input,
.fx .fcontact__form select,
.fx .fcontact__form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--f-tint-2);
  border-radius: 12px;
  background: var(--f-bg);
  color: var(--f-ink);
  font-family: var(--f-font);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fx .fcontact__form input:focus,
.fx .fcontact__form select:focus,
.fx .fcontact__form textarea:focus {
  outline: none;
  border-color: var(--f-blue);
  box-shadow: 0 0 0 3px rgba(26, 115, 181, 0.15);
}

.fx .fcontact__form textarea {
  min-height: 150px;
  resize: vertical;
}

.fx .fcontact__form button[type="submit"] {
  width: auto !important;
  padding: 14px 26px;
  border: 0;
  border-radius: 12px;
  background: var(--f-blue);
  color: #fff;
  font-family: var(--f-font);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.fx .fcontact__form button[type="submit"]:hover:not(:disabled) {
  background: var(--f-blue-hover);
}

.fx .fcontact__form button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fx .fcontact__infotitle {
  margin-top: 72px;
}

.fx .finfos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.fx .finfo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 176px;
  padding: 24px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
}

.fx .finfo__icon {
  color: var(--f-blue);
  margin-bottom: auto;
}

.fx .finfo__icon svg {
  width: 30px;
  height: 30px;
}

.fx .finfo .finfo__label {
  margin: 24px 0 4px;
  color: var(--f-muted);
  font-size: 0.98rem;
}

.fx .finfo__value,
.fx .finfo__value a,
.fx .finfo__value span {
  color: var(--f-ink);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fx .finfo__value a:hover {
  color: var(--f-blue);
}

.fx .fcontact__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.fx .fnote {
  padding: 28px;
  border-radius: var(--f-radius-sm);
  background: var(--f-tint);
}

.fx .fnote h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.fx .fnote p {
  margin: 0;
  color: var(--f-text);
  line-height: 1.7;
}

/* ============================================
   Legal pages (Fomic /legal-pages/*)
   ============================================ */

.fx .fpagehead--legal {
  gap: 14px;
}

.fx .flegal__updated {
  color: var(--f-text);
  font-size: 1.05rem;
}

.fx .flegal {
  max-width: 640px;
  margin: 0 auto;
}

.fx .flegal h2 {
  margin: 56px 0 18px;
  color: var(--f-ink);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fx .flegal h2:first-child {
  margin-top: 0;
}

.fx .flegal p,
.fx .flegal li {
  color: var(--f-text);
  font-size: 1.05rem;
  line-height: 1.75;
}

.fx .flegal p {
  margin: 0 0 16px;
}

.fx .flegal ul {
  margin: 8px 0 20px;
  padding-left: 4px;
  list-style: none;
}

.fx .flegal li {
  margin: 0 0 6px;
}

.fx .flegal strong {
  color: var(--f-ink);
}

.fx .flegal a {
  color: var(--f-blue);
}

.fx .flegal code {
  font-size: 0.95em;
}

.fx .flegal__nav {
  display: flex;
  justify-content: space-between;
  max-width: 640px;
  margin: 64px auto 0;
}

.fx .flegal__nav a {
  color: var(--f-text);
  font-size: 1.1rem;
  text-decoration: none;
}

.fx .flegal__nav a:hover {
  color: var(--f-blue);
}

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

@media (max-width: 900px) {
  .fx .fcontact,
  .fx .fcontact__notes {
    grid-template-columns: 1fr;
  }

  .fx .fcontact__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 768px) {
  .fx .fcontact__form {
    padding: 22px;
  }

  .fx .finfos {
    grid-template-columns: 1fr;
  }

  .fx .finfo {
    min-height: 0;
  }

  .fx .fcontact__infotitle {
    margin-top: 48px;
  }
}

/* ============================================
   Blog (Fomic /blog + /blog/<post>): overview, editorial article, related posts
   Built by scripts/build-blog.mjs; the articles are Dutch only (<main lang="nl">).
   ============================================ */

.fx .fmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  color: var(--f-muted);
  font-size: 1rem;
}

.fx .fmeta__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- Overview ---------- */

.fx .fpagehead--left {
  align-items: flex-start;
  max-width: none;
  margin: 0 0 56px;
  text-align: left;
}

.fx .ffeatured {
  display: grid;
  grid-template-columns: minmax(0, 612px) minmax(0, 1fr);
  gap: 48px;
  padding: 24px;
  border-radius: var(--f-radius);
  background: var(--f-tint);
  color: inherit;
  text-decoration: none;
}

.fx .ffeatured__media {
  overflow: hidden;
  border-radius: var(--f-radius-sm);
  aspect-ratio: 612 / 470;
}

.fx .ffeatured__media img,
.fx .fpostcard-link__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.fx .ffeatured:hover .ffeatured__media img,
.fx .fpostcard-link:hover .fpostcard-link__media img {
  transform: scale(1.04);
}

.fx .ffeatured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 12px 24px 12px 0;
}

.fx .ffeatured__title {
  margin: 12px 0 0;
  max-width: 520px;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1.3;
}

.fx .ffeatured__excerpt {
  margin: 0;
  max-width: 520px;
  font-size: 1.1rem;
  line-height: 1.65;
}

.fx .ffeatured .fbtn {
  margin-top: auto;
}

.fx .ffilters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -24px 0 56px;
}

.fx .ffilter {
  padding: 8px 16px;
  border: 1px solid var(--f-tint-2);
  border-radius: 999px;
  background: var(--f-tint);
  color: var(--f-text);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fx .ffilter:hover {
  border-color: var(--f-blue);
}

.fx .ffilter.is-active {
  border-color: var(--f-blue);
  background: var(--f-blue);
  color: #fff;
}

.fx .fpostgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 24px;
}

.fx .fpostcard-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.fx .fpostcard-link[hidden] {
  display: none;
}

.fx .fpostcard-link__media {
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 424 / 300;
  background: var(--f-tint);
}

.fx .fpostcard-link .fmeta {
  margin-top: 8px;
}

.fx .fpostcard-link__title {
  margin: 0;
  max-width: 380px;
  font-size: 1.45rem;
  line-height: 1.33;
  transition: color 0.2s ease;
}

.fx .fpostcard-link:hover .fpostcard-link__title {
  color: var(--f-blue);
}

/* ---------- Article ---------- */

.fx .freadprogress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1100;
  height: 3px;
  pointer-events: none;
}

.fx .freadprogress span {
  display: block;
  height: 100%;
  background: var(--f-blue);
  transform: scaleX(0);
  transform-origin: left;
}

.fx .fposthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1188px;
  margin: 0 auto;
  text-align: center;
}

.fx .fcrumbs {
  flex-wrap: wrap;
  justify-content: center;
}

.fx .fcrumbs a {
  color: var(--f-muted);
  text-decoration: none;
}

.fx .fcrumbs a:hover {
  color: var(--f-blue);
}

.fx .fposthead h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5.2vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.fx .fposthead__meta {
  justify-content: center;
  font-size: 1.05rem;
}

.fx .fposthero {
  margin: 56px 0 72px;
  overflow: hidden;
  border-radius: var(--f-radius);
  aspect-ratio: 16 / 9;
  background: var(--f-tint);
}

.fx .fposthero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx .fpost {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  gap: 32px;
  align-items: start;
}

.fx .fpost__body {
  min-width: 0;
  max-width: 864px;
}

.fx .fpost__body p,
.fx .fpost__body li {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--f-text);
}

.fx .fpost__body p {
  margin: 0 0 20px;
}

.fx .fpost__body .fpost__lead {
  margin: 0 0 40px;
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--f-ink);
}

.fx .fpost__body h2 {
  margin: 80px 0 20px;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height: 1.14;
  scroll-margin-top: 120px;
}

.fx .fpost__body h3 {
  margin: 36px 0 10px;
  font-size: 1.4rem;
  line-height: 1.3;
}

.fx .fpost__body > ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.fx .fpost__body > ul li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 22px;
}

.fx .fpost__body > ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--f-blue);
}

.fx .fpost__body a:not(.fbtn) {
  color: var(--f-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.fx .fpost__body a:not(.fbtn):hover {
  color: var(--f-blue-hover);
}

.fx .fpost__body strong {
  color: var(--f-ink);
  font-weight: 600;
}

.fx .fpost__figure {
  margin: 48px 0;
}

.fx .fpost__figure img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.fx .fpost__figure figcaption {
  margin-top: 14px;
  color: var(--f-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.fx .fcallout {
  margin: 36px 0;
  padding: 24px 28px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
}

.fx .fpost__body .fcallout p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.fx .fpost__body .fcallout .fcallout__title {
  margin: 0 0 8px;
  color: var(--f-blue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx .fquote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 56px 0;
  padding: 64px 48px;
  border-left: 3px solid var(--f-blue);
  border-radius: 0 var(--f-radius) var(--f-radius) 0;
  background: var(--f-tint);
  text-align: center;
}

.fx .fquote__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--f-blue);
  color: #fff;
}

.fx .fquote__icon svg {
  width: 22px;
  height: 22px;
}

.fx .fpost__body .fquote p {
  margin: 0;
  max-width: 580px;
  color: var(--f-ink);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.fx .fcheck {
  margin: 40px 0;
}

.fx .fpost__body .fcheck__title {
  margin: 0 0 16px;
  color: var(--f-ink);
  font-size: 1.15rem;
  font-weight: 600;
}

.fx .fpost__body .fchecklist li {
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--f-ink);
}

.fx .fpostcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0;
}

.fx .fpostcard {
  padding: 24px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
}

.fx .fpost__body .fpostcard h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.fx .fpost__body .fpostcard p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.fx .fpostcta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin: 40px 0 0;
  padding: 32px;
  border-radius: var(--f-radius);
  background: var(--f-tint);
}

.fx .fpost__body .fpostcta p {
  margin: 0;
  color: var(--f-ink);
  font-size: 1.2rem;
  line-height: 1.6;
}

.fx .fpost__faq {
  margin-top: 16px;
}

.fx .ftoc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.fx .ftoc li {
  counter-increment: toc;
}

.fx .ftoc a {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  color: var(--f-text);
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fx .ftoc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto;
  color: var(--f-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
}

.fx .ftoc a:hover,
.fx .ftoc a.is-active {
  color: var(--f-blue);
}

.fx .ftoc a.is-active::before {
  color: var(--f-blue);
}

.fx .ftoc--inline {
  display: none;
}

.fx .fpost__aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx .ftoc--aside {
  position: sticky;
  top: 116px;
  padding: 24px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  background: var(--f-surface);
}

.fx .ftoc__title,
.fx .fshare__title {
  margin: 0 0 8px;
  color: var(--f-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx .fbook.fbook--post {
  position: static;
  gap: 18px;
}

.fx .fbook__title {
  margin: 0;
  color: var(--f-ink);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.fx .fbook__text {
  margin: 0;
  line-height: 1.6;
}

.fx .fbook__link {
  color: var(--f-blue-hover);
  font-weight: 500;
  text-decoration: none;
}

.fx .fbook__link:hover {
  text-decoration: underline;
}

.fx .fshare {
  padding: 20px 24px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  background: var(--f-surface);
}

.fx .fshare__row {
  display: flex;
  gap: 10px;
}

.fx .fshare__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--f-line);
  border-radius: 50%;
  background: var(--f-surface);
  color: var(--f-ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fx .fshare__btn:hover {
  border-color: var(--f-blue);
  background: var(--f-blue);
  color: #fff;
}

.fx .fshare__btn svg {
  width: 18px;
  height: 18px;
}

.fx .fshare__done {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--f-ink);
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
}

.fx .fshare__done:empty {
  display: none;
}

.fx .fpost__more {
  margin-top: 120px;
}

/* Service page: link to the editorial on the same subject */
.fx .freadcard {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.fx .freadcard:hover {
  border-color: var(--f-blue);
}

.fx .freadcard > picture {
  display: block;
  grid-column: 1;
  grid-row: 1;
}

.fx .freadcard__text {
  grid-column: 2;
  grid-row: 1;
}

.fx .freadcard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.fx .freadcard__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fx .freadcard__title {
  color: var(--f-ink);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
}

.fx .freadcard__more {
  color: var(--f-blue);
  font-weight: 500;
}

@media (max-width: 1100px) {
  .fx .fpost {
    grid-template-columns: 1fr;
  }

  .fx .fpost__body {
    max-width: 760px;
    margin: 0 auto;
  }

  .fx .fpost__aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    width: 100%;
    margin: 32px auto 0;
  }

  .fx .ftoc--aside {
    display: none;
  }

  .fx .ftoc--inline {
    display: block;
    margin: 0 0 32px;
    padding: 4px 20px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-sm);
    background: var(--f-surface);
  }

  .fx .ftoc--inline summary {
    padding: 14px 0;
    color: var(--f-ink);
    font-weight: 600;
    cursor: pointer;
  }

  .fx .ftoc--inline ol {
    padding-bottom: 12px;
  }

  .fx .fpostgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx .ffeatured {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fx .ffeatured__body {
    padding: 0 8px 8px;
  }
}

@media (max-width: 768px) {
  .fx .fposthead {
    gap: 18px;
  }

  .fx .fposthead__meta {
    font-size: 0.95rem;
  }

  .fx .fmeta__by {
    flex-basis: 100%;
  }

  .fx .fmeta__dot--by {
    display: none;
  }

  .fx .fposthero {
    margin: 36px 0 44px;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  .fx .fpost__body p,
  .fx .fpost__body li {
    font-size: 1.06rem;
    line-height: 1.7;
  }

  .fx .fpost__body .fpost__lead {
    font-size: 1.2rem;
  }

  .fx .fpost__body h2 {
    margin-top: 56px;
  }

  .fx .fpost__body h3 {
    font-size: 1.25rem;
  }

  .fx .fpost__figure {
    margin: 36px 0;
  }

  .fx .fquote {
    padding: 40px 24px;
  }

  .fx .fpost__body .fquote p {
    font-size: 1.15rem;
  }

  .fx .fpostcards {
    grid-template-columns: 1fr;
  }

  .fx .fpostcta {
    padding: 24px;
  }

  .fx .fpost__aside {
    grid-template-columns: 1fr;
  }

  .fx .fpostgrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .fx .ffeatured {
    padding: 12px;
  }

  .fx .ffilters {
    justify-content: flex-start;
    margin: -12px 0 36px;
  }

  .fx .fpost__more {
    margin-top: 80px;
  }

  .fx .freadcard {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    padding: 12px;
  }

  .fx .freadcard__title {
    font-size: 1.05rem;
  }
}

/* ============================================
   WhatsApp contact: compact navy button + small panel in the Vital Care style
   Closed by default, opens on click only (script.js). --wa-lift = height of the
   cookie banner while it is shown, so the button never sits underneath it.
   ============================================ */

.fx .wa-widget {
  --wa-navy: #0f2d4a;
  --wa-navy-hover: #173d62;
  --wa-green: #0f6b43;
  --wa-green-bg: #e9f7ef;
  --wa-green-line: #c3e7d2;
  position: fixed;
  right: 28px;
  bottom: calc(28px + var(--wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.25s ease;
}

.fx .wa-widget__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Button */
.fx .wa-widget__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: var(--wa-navy);
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(11, 18, 32, 0.35), 0 2px 6px rgba(11, 18, 32, 0.12);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fx .wa-widget__btn:hover {
  background: var(--wa-navy-hover);
  transform: translateY(-1px);
}

.fx .wa-widget__btn:focus-visible,
.fx .wa-widget__close:focus-visible,
.fx .wa-widget__cta:focus-visible {
  outline: 3px solid #7fb3de;
  outline-offset: 3px;
}

.fx .wa-widget__icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.fx .wa-widget__x {
  display: none;
}

.fx .wa-widget__x svg {
  width: 22px;
  height: 22px;
}

.fx .wa-widget--open .wa-widget__btn > .wa-widget__icon {
  display: none;
}

.fx .wa-widget--open .wa-widget__x {
  display: inline-flex;
}

/* Hover label left of the button ("WhatsApp ons"); it is also the button's accessible name */
.fx .wa-widget__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 8px 14px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  background: var(--f-surface);
  color: var(--f-ink);
  font-family: var(--f-font);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(11, 18, 32, 0.25);
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .fx .wa-widget__btn:hover .wa-widget__label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.fx .wa-widget__btn:focus-visible .wa-widget__label {
  opacity: 1;
  transform: translate(0, -50%);
}

.fx .wa-widget--open .wa-widget__label {
  opacity: 0 !important;
}

/* Panel */
.fx .wa-widget__popup {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 336px;
  overflow: hidden;
  border: 1px solid var(--f-line);
  border-radius: 20px;
  background: var(--f-surface);
  box-shadow: 0 28px 56px -18px rgba(11, 18, 32, 0.28), 0 2px 8px rgba(11, 18, 32, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fx .wa-widget--open .wa-widget__popup {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; /* visible at once, so focus can move in */
}

.fx .wa-widget__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 16px 16px;
  background: var(--wa-navy);
}

.fx .wa-widget__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
}

.fx .wa-widget__avatar img {
  width: 24px;
  height: auto;
}

.fx .wa-widget__who {
  flex: 1 1 auto;
  min-width: 0;
}

.fx .wa-widget__name {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.fx .wa-widget__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
}

.fx .wa-widget__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3cc9a8;
}

.fx .wa-widget__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.fx .wa-widget__close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.fx .wa-widget__close svg {
  width: 15px;
  height: 15px;
}

.fx .wa-widget__body {
  padding: 18px 16px;
  background: var(--f-tint);
}

.fx .wa-widget__bubble {
  padding: 14px 16px;
  border: 1px solid var(--f-line);
  border-radius: 4px 16px 16px 16px;
  background: var(--f-surface);
}

.fx .wa-widget__bubble p {
  margin: 0;
  color: var(--f-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.fx .wa-widget__foot {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--f-line);
}

.fx .wa-widget__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1px solid var(--wa-green-line);
  border-radius: 12px;
  background: var(--wa-green-bg);
  color: var(--wa-green);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.fx .wa-widget__cta:hover {
  border-color: #a6dbbd;
  background: #dcf2e5;
  color: var(--wa-green);
}

.fx .wa-widget__cta .wa-widget__icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .fx .wa-widget {
    right: 16px;
    bottom: calc(16px + var(--wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
  }

  .fx .wa-widget__btn {
    width: 52px;
    height: 52px;
  }

  .fx .wa-widget__icon {
    width: 24px;
    height: 24px;
  }

  .fx .wa-widget__popup {
    width: min(336px, calc(100vw - 32px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx .wa-widget,
  .fx .wa-widget__btn,
  .fx .wa-widget__label,
  .fx .wa-widget__popup {
    transition: none;
  }
}

/* Contact page: short note under the quick-quote button */
.fx .fpagehead .fpagehead__note {
  max-width: 520px;
  margin-top: -4px;
  color: var(--f-muted);
  font-size: 0.95rem;
}

/* ============================================
   Glass layer: one blue-glass language for the primary CTA and every round icon.
   Tokens live on .fx so quote.css (the assistant) uses exactly the same values.
   Motion only on hover/focus (and one reveal on first view); never looping.
   ============================================ */

.fx {
  --glass-blue: linear-gradient(180deg, rgba(38, 132, 200, 0.92) 0%, rgba(22, 104, 168, 0.94) 100%);
  --glass-sheen: radial-gradient(120% 140% at 0% 0%, rgba(140, 222, 255, 0.34) 0%, rgba(140, 222, 255, 0) 55%);
  --glass-edge: rgba(150, 220, 255, 0.55);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(6, 40, 80, 0.28), 0 10px 22px -12px rgba(22, 104, 168, 0.7), 0 2px 6px rgba(11, 18, 32, 0.08);
  --glass-ease: 0.2s ease;
}

/* ---------- Primary CTA: blue crystal glass ---------- */
.fx .fbtn--primary,
.fx .header .header__cta,
.fx .mobile-menu__footer .btn--primary,
.fx .vq-btn--primary {
  position: relative;
  border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  transition: filter var(--glass-ease), transform var(--glass-ease), box-shadow var(--glass-ease);
}

.fx .fbtn--primary:hover,
.fx .header .header__cta:hover,
.fx .mobile-menu__footer .btn--primary:hover,
.fx .vq-btn--primary:hover {
  border-color: rgba(170, 230, 255, 0.7);
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
  filter: brightness(1.07) saturate(1.12);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(6, 40, 80, 0.28), 0 14px 26px -12px rgba(22, 104, 168, 0.75), 0 2px 6px rgba(11, 18, 32, 0.08);
}

.fx .vq-btn--primary[disabled] {
  filter: grayscale(0.6) opacity(0.6);
  transform: none;
}

/* arrow chip inside the primary button: frosted white glass, white arrow */
.fx .fbtn--primary .fbtn__icon {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- Hero secondary: smoked glass, green only in the icon chip ---------- */
.fx .fbtn--glass {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(20, 32, 52, 0.46), rgba(10, 18, 34, 0.56));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px -14px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  transition: filter var(--glass-ease), transform var(--glass-ease), background var(--glass-ease);
}

.fx .fbtn--glass:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(26, 40, 62, 0.52), rgba(14, 24, 40, 0.6));
  transform: translateY(-1px);
}

.fx .fbtn--glass .fbtn__icon {
  border: 1px solid rgba(160, 240, 200, 0.4);
  background: linear-gradient(180deg, rgba(40, 170, 105, 0.9), rgba(24, 132, 80, 0.92));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---------- Glass icon component ---------- */
.fx .ficon,
.fx .finfo__icon,
.fx .fquote__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  transition: transform var(--glass-ease), box-shadow var(--glass-ease), opacity 0.4s ease;
}

.fx .ficon svg,
.fx .finfo__icon svg,
.fx .fquote__icon svg {
  position: relative;
  z-index: 1;
  transition: transform var(--glass-ease), opacity var(--glass-ease);
}

.fx .finfo__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.fx .finfo__icon svg {
  width: 24px;
  height: 24px;
}

/* the glint: a soft light band that crosses the glass once on hover */
.fx .ficon::after,
.fx .finfo__icon::after,
.fx .fquote__icon::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.fx .fbento__card:hover .ficon,
.fx .fbenefit:hover .ficon,
.fx .finfo:hover .finfo__icon,
.fx .fquote:hover .fquote__icon,
.fx .ficon:focus-within {
  transform: translateY(-2px) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(6, 40, 80, 0.28), 0 14px 24px -12px rgba(22, 104, 168, 0.75), 0 2px 6px rgba(11, 18, 32, 0.08);
}

.fx .fbento__card:hover .ficon::after,
.fx .fbenefit:hover .ficon::after,
.fx .finfo:hover .finfo__icon::after,
.fx .fquote:hover .fquote__icon::after {
  animation: fglint 0.3s ease-out 1;
}

.fx .fbento__card:hover .ficon svg,
.fx .fbenefit:hover .ficon svg,
.fx .finfo:hover .finfo__icon svg {
  transform: translateY(-1px);
}

/* per icon kind, one short cycle each */
.fx .fbento__card:hover .ficon--sparkle svg,
.fx .fbenefit:hover .ficon--sparkle svg {
  animation: ftwinkle 0.3s ease-out 1;
}

.fx .fbento__card:hover .ficon--search svg {
  transform: translate(1px, -1px) rotate(-3deg);
}

.fx .fbento__card:hover .ficon--calendar svg,
.fx .fbenefit:hover .ficon--calendar svg {
  animation: ftick 0.26s ease-out 1;
}

.fx .fbento__card:hover .ficon--shield svg,
.fx .fbenefit:hover .ficon--shield svg {
  animation: fpulse 0.28s ease-out 1;
}

@keyframes fglint {
  to { transform: translateX(120%); }
}

@keyframes ftwinkle {
  0% { opacity: 0.8; transform: scale(1); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1) translateY(-1px); }
}

@keyframes ftick {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(-1px); }
}

@keyframes fpulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1) translateY(-1px); }
}

/* first view: icons fade up once (fx.js adds .fx-reveal to <html> and .is-in per icon) */
.fx-reveal .fx .ficon:not(.is-in),
.fx-reveal .fx .finfo__icon:not(.is-in) {
  opacity: 0;
  transform: translateY(8px);
}

.fx-reveal .fx .ficon.is-in,
.fx-reveal .fx .finfo__icon.is-in {
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow var(--glass-ease);
}

@media (prefers-reduced-motion: reduce) {
  .fx .fbtn--primary,
  .fx .fbtn--glass,
  .fx .header .header__cta,
  .fx .ficon,
  .fx .finfo__icon,
  .fx .fquote__icon,
  .fx .ficon svg,
  .fx .finfo__icon svg {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .fx .ficon::after,
  .fx .finfo__icon::after,
  .fx .fquote__icon::after {
    display: none;
  }

  .fx-reveal .fx .ficon:not(.is-in),
  .fx-reveal .fx .finfo__icon:not(.is-in) {
    opacity: 1;
  }
}

/* Hero CTA labels in Title Case (Offerte Aanvragen / WhatsApp Ons), same as the nav */
.fx .fhero__actions .fbtn > span:first-child {
  text-transform: capitalize;
}

/* ============================================
   Scrollbar in the brand blue (thin, quiet); native scrolling untouched
   ============================================ */
:root {
  --vc-blue-rgb: 26, 115, 181;
  --vc-blue-dark-rgb: 20, 93, 148;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--vc-blue-rgb), 0.55) transparent;
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(var(--vc-blue-rgb), 0.55) padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--vc-blue-dark-rgb), 0.8) padding-box;
  }
}

/* ============================================
   Back to top (fx.js): glass button stacked above the WhatsApp button, same right axis
   ============================================ */
.fx .fbtt {
  position: fixed;
  right: 32px; /* centred over the 56px WhatsApp button at right: 28px */
  bottom: calc(28px + 56px + 12px + var(--wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 899;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s, filter 0.2s ease, bottom 0.25s ease;
}

.fx .fbtt.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fx .fbtt svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.fx .fbtt:hover {
  filter: brightness(1.07) saturate(1.12);
}

.fx .fbtt:hover svg {
  transform: translateY(-2px);
}

.fx .fbtt:focus-visible {
  outline: 3px solid #7fb3de;
  outline-offset: 3px;
}

.fx .fbtt__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 7px 12px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  background: var(--f-surface);
  color: var(--f-ink);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(11, 18, 32, 0.25);
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .fx .fbtt:hover .fbtt__label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* never on top of the open WhatsApp panel or the quote assistant */
html.vq-lock .fx .fbtt,
.fx:has(.wa-widget--open) .fbtt {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 768px) {
  .fx .fbtt {
    right: 20px; /* centred over the 52px button at right: 16px */
    bottom: calc(16px + 52px + 12px + var(--wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx .fbtt,
  .fx .fbtt svg,
  .fx .fbtt__label {
    transition: none;
    transform: none;
  }
}

/* ============================================
   Footer: premium glass closing section (markup: footer() in scripts/build-fx.mjs)
   CTA band / brand + three columns / bottom bar. Same glass tokens as the rest of the site.
   ============================================ */

.fx .footer.fxfooter {
  --vcf-line: rgba(26, 115, 181, 0.14);
  --vcf-stack: 104px; /* room on the right for the floating back-to-top + WhatsApp stack */
  padding: 20px;
  border: 1px solid rgba(211, 224, 238, 0.9);
  border-radius: 32px;
  background: radial-gradient(90% 60% at 100% 0%, rgba(140, 222, 255, 0.18), rgba(140, 222, 255, 0) 60%), linear-gradient(180deg, rgba(246, 250, 254, 0.94), rgba(235, 243, 251, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 60px -34px rgba(11, 18, 32, 0.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  color: var(--f-text);
}

/* soft fade line instead of a hard rule */
.fx .vcf-main,
.fx .vcf-bottom {
  position: relative;
}

.fx .vcf-main::before,
.fx .vcf-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(26, 115, 181, 0), var(--vcf-line) 20%, var(--vcf-line) 80%, rgba(26, 115, 181, 0));
}

.fx .vcf-main::before {
  display: none;
}

/* CTA band: deeper blue glass with a light bloom */
.fx .vcf-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 40px 44px;
  border: 1px solid rgba(150, 220, 255, 0.35);
  border-radius: 24px;
  background: radial-gradient(70% 140% at 0% 0%, rgba(140, 222, 255, 0.34), rgba(140, 222, 255, 0) 60%), linear-gradient(135deg, rgba(26, 96, 150, 0.96), rgba(18, 66, 104, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 20px 40px -24px rgba(18, 66, 104, 0.7);
}

.fx .footer .vcf-cta__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fx .footer .vcf-cta__sub {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.55;
}

.fx .vcf-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* green glass: WhatsApp next to the blue glass primary */
.fx .fbtn--wa {
  border: 1px solid rgba(160, 240, 200, 0.45);
  background: radial-gradient(120% 140% at 0% 0%, rgba(190, 255, 220, 0.28), rgba(190, 255, 220, 0) 55%), linear-gradient(180deg, rgba(38, 160, 100, 0.92), rgba(22, 124, 76, 0.94));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 22px -12px rgba(16, 100, 60, 0.7);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  transition: filter var(--glass-ease), transform var(--glass-ease);
}

.fx .fbtn--wa:hover {
  color: #fff;
  filter: brightness(1.06) saturate(1.1);
  transform: translateY(-1px);
}

.fx .fbtn--wa .fbtn__icon {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Main: brand + three columns */
.fx .vcf-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 52px 24px 44px;
}

.fx .vcf-logo img {
  height: 42px;
  width: auto;
}

.fx .footer .vcf-desc {
  max-width: 340px;
  margin: 18px 0 22px;
  color: var(--f-text);
  font-size: 0.98rem;
  line-height: 1.6;
}

.fx .footer .vcf-phone {
  display: inline-block;
  color: var(--f-ink);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--glass-ease);
}

.fx .footer .vcf-phone:hover {
  color: var(--f-blue-hover);
}

.fx .footer .vcf-area {
  margin: 4px 0 18px;
  color: var(--f-muted);
  font-size: 0.95rem;
}

.fx .vcf-actions,
.fx .vcf-bottom__icons {
  display: flex;
  gap: 10px;
}

.fx .ficon.ficon--sm {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.fx .ficon.ficon--xs {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.fx .ficon--sm svg {
  width: 19px;
  height: 19px;
}

.fx .ficon--xs svg {
  width: 17px;
  height: 17px;
}

.fx a.ficon:hover,
.fx a.ficon:focus-visible {
  transform: translateY(-1px) scale(1.03);
}

.fx a.ficon:hover::after {
  animation: fglint 0.3s ease-out 1;
}

.fx a.ficon:focus-visible {
  outline: 3px solid #7fb3de;
  outline-offset: 3px;
}

.fx .vcf-business {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid rgba(211, 224, 238, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.fx .footer .vcf-business p {
  margin: 0;
  color: var(--f-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.fx .footer .vcf-business .vcf-business__title {
  margin-bottom: 2px;
  color: var(--f-ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx .footer .vcf-heading {
  margin: 0 0 16px;
  color: var(--f-ink);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: capitalize;
}

.fx .vcf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx .footer .vcf-list a,
.fx .footer .vcf-list .footer__cookie-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--f-text);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--glass-ease), transform var(--glass-ease);
}

/* small arrow that slides in on hover */
.fx .footer .vcf-list a::after {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--glass-ease), transform var(--glass-ease);
}

.fx .footer .vcf-list a:hover,
.fx .footer .vcf-list .footer__cookie-settings:hover {
  color: var(--f-blue-hover);
  transform: translateX(2px);
}

.fx .footer .vcf-list a:hover::after {
  opacity: 1;
  transform: none;
}

.fx .footer .vcf-list a:focus-visible,
.fx .footer .vcf-list .footer__cookie-settings:focus-visible,
.fx .footer .vcf-phone:focus-visible {
  outline: 2px solid #7fb3de;
  outline-offset: 3px;
  border-radius: 4px;
}

.fx .vcf-col--quiet .vcf-list a,
.fx .footer .vcf-col--quiet .footer__cookie-settings {
  color: var(--f-muted);
  font-size: 0.94rem;
}

/* Bottom bar: copyright + credit on the left, icons after, room for the floating stack */
.fx .vcf-bottom {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding: 22px var(--vcf-stack) 20px 24px;
}

.fx .footer .vcf-copy {
  margin: 0;
  color: var(--f-muted);
  font-size: 0.9rem;
}

.fx .vcf-bottom__icons {
  order: 3;
  margin-left: auto;
}

.fx .footer .vcf-maker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--f-muted);
  font-size: 0.86rem;
}

/* TCL credit as a small blue-white glass capsule */
.fx .footer .vcf-maker a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border: 1px solid rgba(26, 115, 181, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(232, 242, 252, 0.8));
  color: var(--f-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px -8px rgba(26, 115, 181, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--glass-ease), border-color var(--glass-ease), transform var(--glass-ease), color var(--glass-ease);
}

.fx .footer .vcf-maker a::after {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--glass-ease);
}

.fx .footer .vcf-maker a:hover {
  border-color: rgba(26, 115, 181, 0.4);
  background: linear-gradient(180deg, rgba(240, 248, 255, 0.95), rgba(214, 232, 250, 0.9));
  color: var(--f-blue-hover);
  transform: translateY(-1px);
}

.fx .footer .vcf-maker a:hover::after {
  transform: translate(1px, -1px);
}

.fx .footer .vcf-maker a:focus-visible {
  outline: 2px solid #7fb3de;
  outline-offset: 3px;
}

/* ---------- Floating WhatsApp: smoked dark-blue glass (family of the back-to-top button) ---------- */
.fx .wa-widget__btn {
  border: 1px solid rgba(150, 210, 255, 0.35);
  background: radial-gradient(120% 140% at 0% 0%, rgba(140, 222, 255, 0.22), rgba(140, 222, 255, 0) 55%), linear-gradient(180deg, rgba(22, 48, 78, 0.88), rgba(12, 30, 52, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 28px -10px rgba(11, 18, 32, 0.45), 0 2px 6px rgba(11, 18, 32, 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  overflow: visible;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fx .wa-widget__btn:hover {
  background: radial-gradient(120% 140% at 0% 0%, rgba(140, 222, 255, 0.3), rgba(140, 222, 255, 0) 55%), linear-gradient(180deg, rgba(28, 58, 92, 0.9), rgba(16, 38, 64, 0.93));
  filter: brightness(1.08);
  transform: scale(1.03);
}

@media (max-width: 1100px) {
  .fx .vcf-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fx .vcf-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .fx .footer.fxfooter {
    --vcf-stack: 84px;
    padding: 12px;
    border-radius: 24px;
  }

  .fx .vcf-cta {
    padding: 28px 22px;
    border-radius: 18px;
  }

  .fx .vcf-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .fx .vcf-cta__actions .fbtn {
    justify-content: space-between;
  }

  .fx .vcf-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
    padding: 36px 12px 28px;
  }

  .fx .vcf-col--quiet {
    grid-column: 1 / -1;
  }

  .fx .ficon.ficon--sm {
    width: 48px;
    height: 48px;
  }

  .fx .vcf-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px var(--vcf-stack) 18px 12px;
  }

  .fx .vcf-bottom__icons {
    order: 0;
    margin-left: 0;
  }

  .fx .ficon.ficon--xs {
    width: 44px;
    height: 44px;
  }
}

.fx .footer .vcf-maker,
.fx .footer .vcf-maker a {
  white-space: nowrap;
}

/* WhatsApp panel CTA: deep emerald glass, the primary action in the panel */
.fx .wa-widget__cta {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(120, 225, 170, 0.45);
  background: radial-gradient(120% 160% at 0% 0%, rgba(170, 255, 210, 0.22), rgba(170, 255, 210, 0) 55%), linear-gradient(180deg, rgba(16, 122, 76, 0.94), rgba(8, 92, 56, 0.96));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -12px rgba(8, 92, 56, 0.75);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fx .wa-widget__cta:hover {
  border-color: rgba(150, 240, 190, 0.6);
  background: radial-gradient(120% 160% at 0% 0%, rgba(170, 255, 210, 0.3), rgba(170, 255, 210, 0) 55%), linear-gradient(180deg, rgba(20, 138, 86, 0.95), rgba(10, 104, 64, 0.96));
  color: #fff;
  filter: saturate(1.1);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 0 18px rgba(170, 255, 210, 0.12), 0 14px 26px -12px rgba(8, 92, 56, 0.8);
}

.fx .wa-widget__cta::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}

.fx .wa-widget__cta:hover::after {
  animation: fglint 0.4s ease-out 1;
}

.fx .wa-widget__cta .wa-widget__icon {
  width: 20px;
  height: 20px;
  fill: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .fx .wa-widget__cta,
  .fx .wa-widget__cta:hover {
    transition: none;
    transform: none;
  }

  .fx .wa-widget__cta::after {
    display: none;
  }
}

/* ============================================
   Navigation: floating glass capsule, always glass (never solid white).
   Two variants of one material, picked by fx.js from what sits behind the bar:
   light glass (navy text) over light sections, smoked glass (white text) over photos.
   ============================================ */
.fx .header {
  --nav-glass-light: linear-gradient(180deg, rgba(248, 251, 254, 0.66), rgba(238, 245, 252, 0.58));
  --nav-glass-dark: linear-gradient(180deg, rgba(20, 36, 58, 0.52), rgba(12, 24, 42, 0.6));
  top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  background: var(--nav-glass-light);
  box-shadow: 0 0 0 1px rgba(20, 50, 90, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 30px -14px rgba(11, 18, 32, 0.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  backdrop-filter: blur(18px) saturate(1.45);
  transition: top 0.25s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fx .header .header__inner {
  height: 68px;
  transition: height 0.25s ease;
}

/* compact once the page scrolls: a little lower profile, a little more body */
.fx .header.header--scrolled {
  top: 14px;
  --nav-glass-light: linear-gradient(180deg, rgba(248, 251, 254, 0.78), rgba(238, 245, 252, 0.72));
  --nav-glass-dark: linear-gradient(180deg, rgba(20, 36, 58, 0.56), rgba(12, 24, 42, 0.62));
}

.fx .header.header--scrolled .header__inner {
  height: 62px;
}

.fx .header .header__logo-light { display: none; }
.fx .header .header__logo-dark { display: block; }

.fx .header .nav__link {
  color: #13233a;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.fx .header .nav__link:hover {
  background: rgba(26, 115, 181, 0.07);
  color: #145d94;
}

.fx .header .nav__link--active,
.fx .header .nav__link--active:hover {
  background: rgba(26, 115, 181, 0.1);
  color: #145d94;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 181, 0.2);
}

.fx .header .lang-switch {
  border: 1px solid rgba(20, 50, 90, 0.1);
  background: rgba(255, 255, 255, 0.34);
}

.fx .header .lang-switch__btn {
  color: #1f3350;
}

.fx .header .lang-switch__btn--active,
.fx .header .lang-switch__btn--active:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #145d94;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 181, 0.16), 0 1px 3px rgba(11, 18, 32, 0.08);
}

.fx .header .menu-toggle svg {
  stroke: #13233a;
}

/* the one solid element: brand blue, quietly integrated */
.fx .header .header__cta {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, #2179ba, #1a68a6);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 16px -8px rgba(26, 104, 166, 0.65);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
}

.fx .header .header__cta:hover {
  background: linear-gradient(180deg, #2583c8, #1b6dae);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 20px -8px rgba(26, 104, 166, 0.7);
}

/* ---------- smoked variant over photos ---------- */
.fx .header.header--on-dark {
  border-color: rgba(255, 255, 255, 0.26);
  background: var(--nav-glass-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 32px -16px rgba(0, 0, 0, 0.45);
}

/* over photos: the colour logo with a white "Vital" and "AMSTERDAM" (vital-care-logo-horizontal-light),
   so the navy lettering stays legible on the smoked glass; mark and "Care" keep their colour */
.fx .header.header--on-dark .header__logo-light { display: block; }
.fx .header.header--on-dark .header__logo-dark { display: none; }

.fx .header.header--on-dark .nav__link {
  color: #fff;
}

.fx .header.header--on-dark .nav__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.fx .header.header--on-dark .nav__link--active,
.fx .header.header--on-dark .nav__link--active:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.fx .header.header--on-dark .lang-switch {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.fx .header.header--on-dark .lang-switch__btn {
  color: rgba(255, 255, 255, 0.92);
}

.fx .header.header--on-dark .lang-switch__btn--active,
.fx .header.header--on-dark .lang-switch__btn--active:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.fx .header.header--on-dark .menu-toggle svg {
  stroke: #fff;
}

/* the open mobile menu is a white sheet: keep the light variant on top of it */
.fx:has(.mobile-menu--open) .header.header--on-dark {
  border-color: rgba(255, 255, 255, 0.6);
  background: var(--nav-glass-light);
}

.fx:has(.mobile-menu--open) .header .header__logo-light { display: none; }
.fx:has(.mobile-menu--open) .header .header__logo-dark { display: block; }
.fx:has(.mobile-menu--open) .header .menu-toggle svg { stroke: #13233a; }
.fx:has(.mobile-menu--open) .header .lang-switch__btn { color: #1f3350; }
.fx:has(.mobile-menu--open) .header .lang-switch { background: rgba(255, 255, 255, 0.34); border-color: rgba(20, 50, 90, 0.1); }
.fx:has(.mobile-menu--open) .header .lang-switch__btn--active { background: rgba(255, 255, 255, 0.85); color: #145d94; }

/* the hero runs up under the floating bar */
.fx .fhero {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .fx .header { top: 18px; }
  .fx .header.header--scrolled { top: 12px; }
}

@media (max-width: 768px) {
  .fx .header {
    top: 14px;
    width: calc(100% - 32px);
    border-radius: 18px;
  }

  .fx .header.header--scrolled { top: 10px; }

  .fx .header .header__inner,
  .fx .header.header--scrolled .header__inner {
    height: 60px;
  }

  .fx .fhero {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx .header,
  .fx .header .header__inner {
    transition: none;
  }
}

/* the old fixed header height (style.css) would override the compact state */
.fx .header {
  height: auto;
}

/* ============================================
   404 (built by scripts/build-blog.mjs): one glass panel, a large glass "404",
   a soft bloom and one glint that crosses the digits once.
   ============================================ */
.fx .f404 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - 170px);
  padding: 40px 24px 260px; /* the footer overlaps the section above it */
  overflow: hidden;
}

.fx .f404__bloom {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(900px, 120vw);
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(120, 210, 255, 0.32), rgba(26, 115, 181, 0.1) 55%, rgba(26, 115, 181, 0));
  pointer-events: none;
}

.fx .f404__shape {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 40px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(214, 232, 250, 0.35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 60px -30px rgba(26, 115, 181, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  animation: f404float 9s ease-in-out infinite alternate;
}

.fx .f404__shape--a {
  top: 10%;
  left: max(4%, calc(50% - 560px));
  width: 180px;
  height: 180px;
  transform: rotate(-12deg);
}

.fx .f404__shape--b {
  bottom: 30%;
  right: max(4%, calc(50% - 580px));
  width: 130px;
  height: 130px;
  border-radius: 50%;
  animation-delay: -4s;
}

@keyframes f404float {
  to { translate: 0 -12px; }
}

.fx .f404__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(720px, 100%);
  padding: 44px 48px 40px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(236, 244, 252, 0.52));
  box-shadow: 0 0 0 1px rgba(20, 50, 90, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 40px 80px -40px rgba(11, 18, 32, 0.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  text-align: center;
}

.fx .f404__eyebrow {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(26, 115, 181, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: #145d94;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.fx .f404__num {
  position: relative;
  margin: 10px 0 4px;
  line-height: 0.9;
}

/* glass digits: blue gradient fill, light edge, and a glint that sweeps once */
.fx .f404__digits {
  display: block;
  background: linear-gradient(100deg, rgba(26, 115, 181, 0.95) 0%, rgba(90, 185, 235, 0.85) 38%, rgba(255, 255, 255, 0.95) 48%, rgba(90, 185, 235, 0.85) 58%, rgba(22, 96, 150, 0.95) 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(6.5rem, 22vw, 13rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  filter: drop-shadow(0 18px 30px rgba(26, 115, 181, 0.25));
  animation: f404glint 1.6s ease-out 0.5s 1 both;
}

@keyframes f404glint {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

.fx .f404__spark {
  position: absolute;
  top: 8%;
  right: -6%;
  width: clamp(22px, 4vw, 34px);
  color: #7fd0ff;
  opacity: 0;
  animation: f404spark 0.9s ease-out 1.6s 1 both;
}

@keyframes f404spark {
  0% { opacity: 0; transform: scale(0.6) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(0); }
  100% { opacity: 0.9; transform: scale(1); }
}

.fx .f404__title {
  margin: 12px 0 0;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fx .f404__text {
  max-width: 460px;
  margin: 14px 0 0;
  font-size: 1.08rem;
  line-height: 1.6;
}

.fx .f404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* secondary: light glass */
.fx .fbtn--lightglass {
  border: 1px solid rgba(26, 115, 181, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(232, 242, 252, 0.7));
  color: var(--f-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 20px -14px rgba(26, 115, 181, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color var(--glass-ease), transform var(--glass-ease), background var(--glass-ease);
}

.fx .fbtn--lightglass:hover {
  border-color: rgba(26, 115, 181, 0.4);
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.95), rgba(220, 236, 250, 0.85));
  transform: translateY(-1px);
}

.fx .fbtn--lightglass .fbtn__icon {
  border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
}

.fx .f404__link {
  margin-top: 18px;
  color: #145d94;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fx .f404__link:hover {
  color: var(--f-ink);
}

@media (max-width: 768px) {
  .fx .f404 {
    min-height: auto;
    padding: 24px 16px 220px;
  }

  .fx .f404__panel {
    padding: 32px 22px 28px;
    border-radius: 24px;
  }

  .fx .f404__digits {
    font-size: clamp(5rem, 30vw, 8rem);
  }

  .fx .f404__actions {
    flex-direction: column;
    width: 100%;
  }

  .fx .f404__actions .fbtn {
    justify-content: space-between;
  }

  .fx .f404__shape--a { width: 110px; height: 110px; top: 4%; left: -30px; }
  .fx .f404__shape--b { width: 80px; height: 80px; right: -20px; bottom: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .fx .f404__shape,
  .fx .f404__digits,
  .fx .f404__spark {
    animation: none;
  }

  .fx .f404__digits { background-position: 0% 0; }
  .fx .f404__spark { opacity: 0.9; }
}

/* ============================================
   Contact form at Fomic's measurements: photo 624 + card 672 (gap 34), card padding 24,
   radius 16, labels 18px/500, fields 52px high, textarea 174px, button 52px pill.
   Two-column rows (naam | bedrijf, e-mail | telefoon); every field and the honeypot stay.
   ============================================ */
.fx .fcontact {
  grid-template-columns: minmax(0, 624fr) minmax(0, 672fr);
  gap: 34px;
  max-width: 1330px;
  margin: 0 auto;
}

/* the form sets the row height; the photo fills it (it used to stretch the row to its own 2:3) */
.fx .fcontact__photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
}

.fx .fcontact__photo picture {
  position: absolute;
  inset: 0;
  display: block;
}

.fx .fcontact__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx .fcontact__form {
  padding: 24px;
  border-radius: 16px;
  background: #e8f1fd;
}

/* heading stays for screen readers and the i18n key; the Fomic card has no visible title */
.fx .fcontact__form > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fx .fcontact__form form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;
  margin-top: 0 !important;
}

.fx .fcontact__form .form-group {
  margin: 0;
}

.fx .fcontact__form .form-group:has(#service),
.fx .fcontact__form .form-group:has(#message),
.fx .fcontact__form noscript,
.fx .fcontact__form button[type="submit"] {
  grid-column: 1 / -1;
}

.fx .fcontact__form label {
  margin-bottom: 7px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
}

.fx .fcontact__form .optional {
  font-size: 0.8rem;
}

.fx .fcontact__form input,
.fx .fcontact__form select {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d4e3f5;
  border-radius: 11px;
  background: #fff;
  font-size: 1rem;
}

.fx .fcontact__form textarea {
  height: 128px;
  min-height: 0;
  padding: 11px 14px;
  border: 1px solid #d4e3f5;
  border-radius: 11px;
  background: #fff;
  font-size: 1rem;
  resize: vertical;
}

.fx .fcontact__form button[type="submit"] {
  justify-self: start;
  width: auto !important;
  height: 48px;
  margin-top: 4px;
  padding: 0 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: var(--glass-shadow);
}

@media (max-width: 900px) {
  .fx .fcontact {
    grid-template-columns: 1fr;
  }

  .fx .fcontact__photo {
    aspect-ratio: 16 / 10;
    max-height: 320px;
  }
}

@media (max-width: 560px) {
  .fx .fcontact__form form {
    grid-template-columns: 1fr;
  }

  .fx .fcontact__form button[type="submit"] {
    justify-self: stretch;
    width: 100% !important;
  }
}

/* ============================================
   Service cards: one component. Cards stretch to the row height (grid default), the
   description takes the free space and the "Meer over ..." link sits on the bottom line,
   so every link in a row shares one baseline whatever the text length.
   ============================================ */
.fx .fservices {
  align-items: stretch;
}

.fx .fservice {
  height: 100%;
  gap: 0;
}

.fx .fservice__media {
  flex: 0 0 auto;
}

.fx .fservice__desc {
  flex: 1 0 auto;
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}

.fx .fservice__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  line-height: 1.4;
}

.fx .fservice__bar {
  min-height: 60px;
}

/* phones: plain single column (no side scroller, no forced equal heights) */
@media (max-width: 768px) {
  .fx .fservices {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    gap: 32px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .fx .fservice {
    height: auto;
  }
}

/* ============================================
   Ice-blue glass: one reusable surface (tokens below) for the service-card title bars,
   the "Hoe het werkt" step cards and their number orbs. Same blur, edge, highlight and
   shadow family as the navbar and the blue glass CTAs; a touch more opacity for legibility.
   ============================================ */
.fx {
  --ice-glass: linear-gradient(180deg, rgba(240, 247, 255, 0.84), rgba(222, 236, 251, 0.8));
  --ice-edge: rgba(255, 255, 255, 0.7);
  --ice-shadow: 0 0 0 1px rgba(26, 115, 181, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px -14px rgba(11, 18, 32, 0.35);
  --ice-blur: blur(18px) saturate(1.45);
}

.fx .fservice__bar {
  border: 1px solid var(--ice-edge);
  border-radius: 12px;
  background: var(--ice-glass);
  box-shadow: var(--ice-shadow);
  -webkit-backdrop-filter: var(--ice-blur);
  backdrop-filter: var(--ice-blur);
}

.fx .fservice__bar h3 {
  color: #0f2340;
}

/* arrow chip: a deeper tone of the same glass; fills brand blue on hover */
.fx .fservice__chip {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(26, 115, 181, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(200, 224, 248, 0.9), rgba(176, 208, 240, 0.85));
  color: #0f5a92;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fx .fservice:hover .fservice__chip,
.fx .fservice:focus-visible .fservice__chip {
  border-color: var(--glass-edge);
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
  box-shadow: var(--glass-shadow);
  transform: rotate(45deg) scale(1.04);
}

/* "Hoe het werkt": the same ice glass on the step cards */
.fx .fstep {
  border: 1px solid var(--ice-edge);
  background: var(--ice-glass);
  box-shadow: var(--ice-shadow);
  -webkit-backdrop-filter: var(--ice-blur);
  backdrop-filter: var(--ice-blur);
}

.fx .fstep__num {
  border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-blue);
  box-shadow: var(--glass-shadow);
}

@media (max-width: 768px) {
  .fx .fservice__chip {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx .fservice__chip { transition: none; }
  .fx .fservice:hover .fservice__chip { transform: rotate(45deg); }
}

/* CTA section buttons: same pair as the hero (blue glass + smoked glass), Title Case */
.fx .fcta__actions .fbtn > span:first-child {
  text-transform: capitalize;
}

/* ============================================
   /duurzaamheid (scripts/build-blog.mjs): calm editorial page, glass icons,
   warm green only as a quiet secondary accent.
   ============================================ */
.fx .fsus-head h1 {
  max-width: 900px;
}

.fx .fsus-lead {
  max-width: 620px;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.6;
}

.fx .fsus-intro {
  max-width: 760px;
  margin: 0 auto 96px;
  text-align: center;
}

.fx .fsus-intro p {
  margin: 0;
  color: var(--f-ink);
  font-size: 1.3rem;
  line-height: 1.65;
}

.fx .fsus-pillars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.fx .fsus-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--ice-edge);
  border-radius: var(--f-radius);
  background: var(--ice-glass);
  box-shadow: var(--ice-shadow);
  -webkit-backdrop-filter: var(--ice-blur);
  backdrop-filter: var(--ice-blur);
}

/* 3 + 2 layout: the last two cards share the second row */
.fx .fsus-card:nth-child(4),
.fx .fsus-card:nth-child(5) {
  grid-column: span 3;
}

.fx .fsus-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.fx .fsus-card__num {
  color: #3f7a5c;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.fx .fsus-card h3 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
}

.fx .fsus-card p {
  margin: 0;
  line-height: 1.65;
}

.fx .fsus-honest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 900px;
  margin: 96px auto 0;
  padding: 32px 36px;
  border: 1px solid rgba(63, 122, 92, 0.22);
  border-left: 3px solid #3f7a5c;
  border-radius: 8px var(--f-radius) var(--f-radius) 8px;
  background: linear-gradient(180deg, rgba(246, 250, 247, 0.9), rgba(236, 245, 240, 0.85));
}

.fx .fsus-honest h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.fx .fsus-honest p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.7;
}

.fx .fsus-links {
  max-width: 900px;
  margin: 56px auto 0;
}

.fx .fsus-links__title {
  margin: 0 0 12px;
  color: var(--f-ink);
  font-weight: 600;
}

.fx .fsus-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx .fsus-links a {
  display: inline-flex;
  padding: 9px 16px;
  border: 1px solid rgba(26, 115, 181, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #145d94;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.fx .fsus-links a:hover {
  border-color: rgba(26, 115, 181, 0.4);
  background: #eef5fc;
}

.fx .fsus-cta {
  align-items: center;
  max-width: 900px;
  margin: 56px auto 0;
  text-align: center;
}

.fx .fsus-cta p {
  color: var(--f-ink);
  font-size: 1.5rem !important;
  font-weight: 500;
}

@media (max-width: 1000px) {
  .fx .fsus-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx .fsus-card,
  .fx .fsus-card:nth-child(4),
  .fx .fsus-card:nth-child(5) { grid-column: span 1; }
  .fx .fsus-card:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .fx .fsus-pillars { grid-template-columns: 1fr; }
  .fx .fsus-intro { margin-bottom: 64px; }
  .fx .fsus-intro p { font-size: 1.12rem; }
  .fx .fsus-honest { grid-template-columns: 1fr; padding: 26px 22px; margin-top: 64px; }
  .fx .fsus-cta .f404__actions { flex-direction: column; width: 100%; }
}

/* no .fcta section on this page, so leave room for the footer that overlaps upward */
.fx .fsus-page > .fsection {
  padding-bottom: 300px;
}

@media (max-width: 768px) {
  .fx .fsus-page > .fsection { padding-bottom: 240px; }
}

/* ============================================
   Homepage location selector (build-fx.mjs + fx.js)
   ============================================ */
.fx .fsel {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.fx .fsel__tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 110px;
}

.fx .fsel__group {
  margin: 14px 0 6px 6px;
  color: var(--f-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx .fsel__group:first-child { margin-top: 0; }

.fx .fsel__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--f-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--glass-ease), border-color var(--glass-ease), box-shadow var(--glass-ease);
}

.fx .fsel__tab .ficon { width: 40px; height: 40px; opacity: 0.75; transition: opacity var(--glass-ease), transform var(--glass-ease); }
.fx .fsel__tab .ficon svg { width: 18px; height: 18px; }
.fx .fsel__tab:hover { background: rgba(26, 115, 181, 0.06); }
.fx .fsel__tab.is-active {
  border-color: var(--ice-edge);
  background: var(--ice-glass);
  box-shadow: var(--ice-shadow);
  color: #0f2340;
}
.fx .fsel__tab.is-active .ficon { opacity: 1; transform: scale(1.04); }
.fx .fsel__tab:focus-visible { outline: 3px solid #7fb3de; outline-offset: 2px; }

.fx .fsel__panels { display: grid; gap: 24px; }
.fx .fsel.is-js .fsel__panels { display: block; position: relative; }

.fx .fsel__panel {
  overflow: hidden;
  border: 1px solid var(--ice-edge);
  border-radius: var(--f-radius);
  background: var(--ice-glass);
  box-shadow: var(--ice-shadow);
}

.fx .fsel.is-js .fsel__panel { display: none; }
.fx .fsel.is-js .fsel__panel.is-active { display: block; animation: fselIn 0.35s ease both; }

@keyframes fselIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.fx .fsel__media { aspect-ratio: 16 / 8; overflow: hidden; }
.fx .fsel__media img { width: 100%; height: 100%; object-fit: cover; }
.fx .fsel__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 32px 32px; }
.fx .fsel__body h3 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.fx .fsel__body p { margin: 0; max-width: 620px; font-size: 1.08rem; line-height: 1.6; }
.fx .fsel__feat { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; padding: 0; list-style: none; }
.fx .fsel__feat li { padding: 6px 12px; border: 1px solid rgba(26, 115, 181, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: #145d94; font-size: 0.9rem; font-weight: 500; }

@media (max-width: 900px) {
  .fx .fsel { grid-template-columns: 1fr; }
  .fx .fsel__tabs { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .fx .fsel__group { width: 100%; margin: 8px 0 0; }
  .fx .fsel__tab { padding: 6px 12px 6px 6px; font-size: 0.95rem; }
  .fx .fsel__tab .ficon { width: 34px; height: 34px; }
  .fx .fsel__body { padding: 22px; }
  .fx .fsel__media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .fx .fsel.is-js .fsel__panel.is-active { animation: none; }
}

/* nav dropdown: sector group */
.fx .nav__dropdown-label,
.fx .mobile-menu__sub .nav__dropdown-label {
  display: block;
  margin: 8px 14px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--f-line);
  color: var(--f-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* services overview: sector cards */
.fx .fsubhead--sectors { margin-top: 72px; }
.fx .fsectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fx .fsector { position: relative; display: block; overflow: hidden; border-radius: var(--f-radius); color: inherit; text-decoration: none; }
.fx .fsector__media { aspect-ratio: 4 / 5; }
.fx .fsector__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.fx .fsector:hover img { transform: scale(1.04); }
.fx .fsector .fservice__bar { left: 12px; right: 12px; bottom: 12px; }
.fx .fsector .fservice__bar h3 { font-size: 1.15rem; }
.fx .fsector:hover .fservice__chip { border-color: var(--glass-edge); background: var(--glass-sheen), var(--glass-blue); color: #fff; transform: rotate(45deg); }
@media (max-width: 1000px) { .fx .fsectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================
   Sector pages (content/sectors.mjs)
   ============================================ */
.fx .fsec-head .f404__actions { margin-top: 6px; }
.fx .fsec-block { margin-top: 96px; }
.fx .fsec-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fx .fsec-need { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--ice-edge); border-radius: var(--f-radius); background: var(--ice-glass); box-shadow: var(--ice-shadow); }
.fx .fsec-need h3 { margin: 0 0 6px; font-size: 1.3rem; }
.fx .fsec-need p { margin: 0; line-height: 1.6; }
.fx .fsec-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.fx .fsec-zones { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fx .fsec-zones li { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--f-line); border-radius: 14px; background: #fff; color: var(--f-ink); font-weight: 500; }
.fx .fsec-zones .ficon { width: 32px; height: 32px; }
.fx .fsec-zones .ficon svg { width: 15px; height: 15px; }
.fx .fsec-detail { margin: 0; }
.fx .fsec-detail img { width: 100%; height: auto; border-radius: var(--f-radius); }
.fx .fsec-detail figcaption { margin-top: 12px; color: var(--f-muted); font-size: 0.95rem; }
.fx .fsec-plan__text { max-width: 820px; }
.fx .fsec-plan__text p { font-size: 1.12rem; line-height: 1.75; margin: 0 0 18px; }
.fx .fsec-plan__text a { color: var(--f-blue); text-underline-offset: 3px; }
.fx .fsec-quote { max-width: 900px; margin: 96px auto 0; }
.fx .fsec-faq .ffaq { max-width: 900px; }

/* layout variations */
.fx .fsec--editorial .fsec-needs { grid-template-columns: 1fr; max-width: 820px; }
.fx .fsec--editorial .fsec-need { flex-direction: row; align-items: flex-start; }
.fx .fsec--active .fsec-need:nth-child(2) { background: linear-gradient(180deg, rgba(38, 132, 200, 0.95), rgba(22, 104, 168, 0.96)); border-color: var(--glass-edge); }
.fx .fsec--active .fsec-need:nth-child(2) h3,
.fx .fsec--active .fsec-need:nth-child(2) p { color: #fff; }
.fx .fsec--visual .fsec-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.fx .fsec--structured .fsec-plan__text { counter-reset: step; display: grid; gap: 14px; max-width: none; }
.fx .fsec--structured .fsec-plan__text p { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; margin: 0; padding: 22px; border: 1px solid var(--f-line); border-radius: var(--f-radius-sm); background: #fff; }
.fx .fsec--structured .fsec-plan__text p::before { content: counter(step, decimal-leading-zero); color: #145d94; font-weight: 600; }

.fx .fsec-page > .fsection { padding-bottom: 300px; }

@media (max-width: 900px) {
  .fx .fsec-needs { grid-template-columns: 1fr; }
  .fx .fsec-split,
  .fx .fsec--visual .fsec-split { grid-template-columns: 1fr; gap: 28px; }
  .fx .fsec-block { margin-top: 64px; }
  .fx .fsec-page > .fsection { padding-bottom: 240px; }
  .fx .fsec-head .f404__actions { flex-direction: column; width: 100%; }
}

/* ============================================
   Cookie consent: floating ice-glass card (bottom left on desktop, almost full width on
   phones) and a compact settings panel. Overrides the old full-width bar in style.css.
   ============================================ */
.fx .cookie-banner.vcc {
  position: fixed;
  top: auto;
  right: auto;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 24px;
  z-index: 2000;
  display: block;
  width: min(440px, calc(100vw - 48px));
  padding: 22px 22px 18px;
  border: 1px solid var(--ice-edge);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.9), rgba(232, 242, 252, 0.86));
  box-shadow: 0 0 0 1px rgba(26, 115, 181, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 50px -24px rgba(11, 18, 32, 0.4);
  -webkit-backdrop-filter: var(--ice-blur);
  backdrop-filter: var(--ice-blur);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.fx .cookie-banner.vcc.cookie-banner--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fx .vcc__title {
  margin: 0 0 6px;
  color: var(--f-ink);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fx .vcc__text {
  margin: 0;
  color: var(--f-text);
  font-size: 0.94rem;
  line-height: 1.55;
}

.fx .vcc__links {
  display: flex;
  gap: 16px;
  margin: 10px 0 16px;
}

.fx .vcc__link {
  padding: 0;
  border: 0;
  background: none;
  color: #145d94;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fx .vcc__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fx .vcc__btn {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--glass-ease), transform var(--glass-ease), background var(--glass-ease), border-color var(--glass-ease);
}

.fx .vcc__btn--primary {
  border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-blue);
  color: #fff;
  box-shadow: var(--glass-shadow);
}

.fx .vcc__btn--primary:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* "Alleen Noodzakelijk": same size, clearly visible navy text, no grey-out */
.fx .vcc__btn--equal {
  border: 1px solid rgba(26, 115, 181, 0.35);
  background: rgba(255, 255, 255, 0.9);
  color: #0f2340;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 14px -10px rgba(26, 115, 181, 0.5);
}

.fx .vcc__btn--equal:hover { border-color: rgba(26, 115, 181, 0.55); background: #fff; transform: translateY(-1px); }

.fx .vcc__btn--ghost {
  grid-column: 1 / -1;
  min-height: 44px;
  border: 1px solid transparent;
  background: rgba(26, 115, 181, 0.07);
  color: #145d94;
}

.fx .vcc__btn--ghost:hover { background: rgba(26, 115, 181, 0.12); }

.fx .vcc__btn:focus-visible,
.fx .vcc__link:focus-visible,
.fx .vcc-modal__close:focus-visible,
.fx .vcc-switch input:focus-visible + .vcc-switch__track {
  outline: 3px solid #7fb3de;
  outline-offset: 2px;
}

/* settings panel */
html.vcc-lock { overflow: hidden; }

.fx .vcc-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 16px;
}

.fx .vcc-modal[hidden] { display: none; }

.fx .vcc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.fx .vcc-modal__panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--ice-edge);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.97), rgba(236, 244, 252, 0.95));
  box-shadow: 0 40px 80px -30px rgba(11, 18, 32, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fx .vcc-modal.is-open .vcc-modal__panel { opacity: 1; transform: none; }

.fx .vcc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.fx .vcc-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--f-line); border-radius: 12px; background: #fff; color: var(--f-ink); cursor: pointer; }
.fx .vcc-modal__close svg { width: 16px; height: 16px; }

.fx .vcc-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--f-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
}

.fx .vcc-cat__name { margin: 0 0 4px; color: var(--f-ink); font-weight: 600; }
.fx .vcc-cat__text { margin: 0; color: var(--f-text); font-size: 0.9rem; line-height: 1.5; }

.fx .vcc-switch { position: relative; flex: 0 0 auto; display: inline-flex; min-width: 48px; min-height: 44px; align-items: center; cursor: pointer; }
.fx .vcc-switch input { position: absolute; inset: 0; z-index: 1; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fx .vcc-switch__track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c9d6e4; transition: background 0.2s ease; }
.fx .vcc-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 18, 32, 0.25); transition: transform 0.2s ease; }
.fx .vcc-switch input:checked + .vcc-switch__track { background: #1a73b5; }
.fx .vcc-switch input:checked + .vcc-switch__track::after { transform: translateX(20px); }
.fx .vcc-switch input:disabled + .vcc-switch__track { background: #6ea3cf; }
.fx .vcc-switch input:disabled { cursor: not-allowed; }
.fx .vcc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.fx .vcc__actions--panel { margin-top: 18px; }

/* phones: almost full width, above the safe area; widget/back-to-top lift above it */
@media (max-width: 768px) {
  .fx .cookie-banner.vcc {
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 18px 18px 14px;
  }

  .fx .vcc__text { font-size: 0.9rem; }
  .fx .vcc__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fx .cookie-banner.vcc,
  .fx .vcc-modal__panel,
  .fx .vcc-switch__track,
  .fx .vcc-switch__track::after { transition: none; transform: none; }
}

/* ==========================================================================
   Services mega menu (desktop) and the Fomic-style mobile menu.
   Markup: scripts/build-fx.mjs (megaMenu). Behaviour: fx.js (panel) and script.js (mobile).
   ========================================================================== */

/* ---- trigger: the /schoonmaakdiensten link with a chevron button inside its pill ---- */
.fx .header .vmm {
  position: relative;
  display: flex;
  align-items: center;
}

.fx .header .vmm .nav__dropdown-trigger {
  min-width: 203px;
  padding-right: 36px;
}

.fx .header .vmm__caret {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nav-ink);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.fx .header .vmm__caret svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx .header .vmm__caret:hover { background: rgba(26, 115, 181, 0.1); }
.fx .header .vmm__caret:focus-visible { outline: 2px solid #7fb3de; outline-offset: 1px; }

.fx .header .vmm.is-open .nav__dropdown-trigger,
.fx .header .vmm.is-open .nav__dropdown-trigger:hover {
  background: var(--nav-active);
  color: var(--nav-blue);
  box-shadow: inset 0 0 0 1px var(--nav-active-line), 0 1px 2px rgba(11, 18, 32, 0.06);
}

.fx .header .vmm.is-open .vmm__caret { color: var(--nav-blue); }
.fx .header .vmm.is-open .vmm__caret svg { transform: rotate(180deg); }

.fx .header.header--on-dark .vmm__caret { color: #fff; }
.fx .header.header--on-dark .vmm__caret:hover { background: rgba(255, 255, 255, 0.14); }
.fx .header.header--on-dark .vmm.is-open .nav__dropdown-trigger,
.fx .header.header--on-dark .vmm.is-open .nav__dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.fx .header.header--on-dark .vmm.is-open .vmm__caret { color: #fff; }

@media (max-width: 1100px) {
  .fx .header .vmm .nav__dropdown-trigger {
    min-width: 194px;
    padding-right: 32px;
  }

  .fx .header .vmm__caret { right: 5px; }
}

/* ---- the panel: one smoked-blue glass sheet that folds out of the bar ---- */
.fx .vmm__panel {
  position: fixed;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 999;
  width: min(1040px, calc(100% - 96px));
  margin-inline: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(120, 200, 255, 0.14) 0%, rgba(120, 200, 255, 0) 55%),
    linear-gradient(180deg, rgba(26, 48, 78, 0.8) 0%, rgba(14, 30, 54, 0.86) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(140, 210, 255, 0.05),
    0 34px 70px -26px rgba(6, 16, 34, 0.6),
    0 12px 26px -14px rgba(6, 16, 34, 0.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  font-family: var(--f-font);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scaleY(0.97);
  transform-origin: 50% 0;
  transition:
    opacity 0.19s cubic-bezier(0.4, 0, 1, 1),
    transform 0.2s cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 0.2s;
}

/* invisible bridge over the gap under the bar: the pointer never "falls out" on the way down */
.fx .vmm__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.fx .vmm__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.fx .vmm__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 10px;
  filter: blur(2px);
  transition: filter 0.2s ease;
}

.fx .vmm__panel.is-open .vmm__inner { filter: none; transition-duration: 0.3s; }

.fx .vmm__group {
  display: flex;
  flex-direction: column;
  padding: 18px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.fx .vmm__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 10px;
  color: #8ec6f0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fx .vmm__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5fb2ee;
  box-shadow: 0 0 10px rgba(95, 178, 238, 0.8);
}

.fx .vmm__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx .vmm__group--services .vmm__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fx .vmm__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  color: rgba(238, 245, 252, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.fx .vmm__arrow {
  flex: none;
  width: 14px;
  height: 14px;
  color: #9fd3ff;
  opacity: 0.35;
  transform: translateX(-2px);
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx .vmm__link:hover,
.fx .vmm__link:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  outline: none;
}

.fx .vmm__link:focus-visible { box-shadow: inset 0 0 0 2px rgba(127, 190, 240, 0.8); }

.fx .vmm__link:hover .vmm__arrow,
.fx .vmm__link:focus-visible .vmm__arrow {
  opacity: 1;
  transform: none;
}

.fx .vmm__link[aria-current="page"] {
  background: rgba(110, 185, 245, 0.14);
  color: #fff;
}

.fx .vmm__link[aria-current="page"] .vmm__arrow { opacity: 0.8; transform: none; }

.fx .vmm__all {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 8px;
  padding: 0 12px;
  border-radius: 10px;
  color: #9fd3ff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.fx .vmm__all svg {
  width: 14px;
  height: 14px;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx .vmm__all:hover,
.fx .vmm__all:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  outline: none;
}

.fx .vmm__all:focus-visible { box-shadow: inset 0 0 0 2px rgba(127, 190, 240, 0.8); }
.fx .vmm__all:hover svg { transform: translateX(2px); }

/* contents settle in a beat after the sheet */
.fx .vmm__panel .vmm__eyebrow,
.fx .vmm__panel .vmm__link,
.fx .vmm__panel .vmm__all {
  opacity: 0;
  translate: 0 -4px;
  transition-property: opacity, translate, background-color, color, box-shadow;
  transition-duration: 0.14s, 0.14s, 0.18s, 0.18s, 0.18s;
}

.fx .vmm__panel.is-open .vmm__eyebrow,
.fx .vmm__panel.is-open .vmm__link,
.fx .vmm__panel.is-open .vmm__all {
  opacity: 1;
  translate: 0 0;
  transition-duration: 0.28s, 0.32s, 0.18s, 0.18s, 0.18s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(50ms + var(--i, 0) * 14ms), calc(50ms + var(--i, 0) * 14ms), 0s, 0s, 0s;
}

@media (max-width: 1000px) {
  .fx .vmm__panel,
  .fx .header .vmm__caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx .vmm__panel,
  .fx .vmm__panel.is-open { transform: none; transition: opacity 0.12s linear, visibility 0s linear 0.12s; }
  .fx .vmm__panel.is-open { transition: opacity 0.12s linear, visibility 0s; }
  .fx .vmm__inner { filter: none; transition: none; }
  .fx .vmm__panel .vmm__eyebrow,
  .fx .vmm__panel .vmm__link,
  .fx .vmm__panel .vmm__all { translate: none; transition-delay: 0s !important; }
  .fx .header .vmm__caret svg { transition: none; }
}

/* ---- mobile: the bar folds out into a glass card (Fomic), white sheet inside ---- */
.fx .header .menu-toggle svg line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.fx .header .menu-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fx .header .menu-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.fx .header .menu-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .fx .header .menu-toggle {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--nav-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.6);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .fx .header .menu-toggle svg { width: 22px; height: 22px; }
  .fx .header.header--on-dark .menu-toggle { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.14); }
  .fx:has(.mobile-menu--open) .header .menu-toggle { border-color: #d3e0ee; background: #fff; }

  .fx .mobile-menu {
    display: block;
    position: fixed;
    top: var(--mm-top, 84px);
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 999;
    width: var(--mm-width, calc(100% - 32px));
    max-height: calc(100dvh - var(--mm-top, 84px) - 16px);
    margin-inline: auto;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(246, 250, 254, 0.74) 0%, rgba(232, 241, 250, 0.68) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 34px 70px -28px rgba(11, 30, 56, 0.45),
      0 10px 24px -14px rgba(11, 30, 56, 0.28);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scaleY(0.97);
    transform-origin: 50% 0;
    transition:
      opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
      transform 0.22s cubic-bezier(0.4, 0, 1, 1),
      visibility 0s linear 0.22s;
  }

  .fx .mobile-menu.mobile-menu--open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }
}

.fx .mm__card {
  padding: 22px 16px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(20, 50, 90, 0.06), 0 1px 2px rgba(11, 18, 32, 0.05);
}

.fx .mm__eyebrow {
  margin: 0 6px 6px;
  color: #6b7d94;
  font-family: var(--f-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fx .mm__nav { display: flex; flex-direction: column; }

.fx .mobile-menu .mm__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid #e9eff6;
  background: none;
  color: #0f1f33;
  font-family: var(--f-font);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, border-color 0.2s ease;
}

.fx .mobile-menu .mm__nav > a.mm__link:last-child { border-bottom: 0; }
.fx .mobile-menu .mm__link:hover { color: #145d94; }
.fx .mobile-menu .mm__link:focus-visible { outline: 2px solid #7fb3de; outline-offset: -2px; border-radius: 10px; }

.fx .mobile-menu .mm__link[aria-current="page"] { color: #145d94; }
.fx .mobile-menu .mm__link[aria-current="page"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a73b5;
  box-shadow: 0 0 0 4px rgba(26, 115, 181, 0.12);
}

/* services accordion */
.fx .mm-acc__toggle svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #5d7089;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.fx .mm-acc--open .mm-acc__toggle { color: #145d94; border-bottom-color: transparent; }
.fx .mm-acc--open .mm-acc__toggle svg { color: #145d94; transform: rotate(180deg); }

.fx .mobile-menu .mm-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx .mm-acc--open .mm-acc__panel { grid-template-rows: 1fr; }

.fx .mm-acc__inner {
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #f2f6fb;
  box-shadow: inset 0 0 0 1px #e2eaf3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.34s;
}

.fx .mm-acc--open .mm-acc__inner {
  margin-bottom: 8px;
  opacity: 1;
  /* inherit, never visible: an open accordion inside the CLOSED menu must stay hidden, or its
     invisible links catch taps on the page (footer, service cards) and navigate elsewhere */
  visibility: inherit;
  transition: opacity 0.3s ease 0.06s, visibility 0s;
}

.fx .mm-acc__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 16px 6px;
  color: #1a6fae;
  font-family: var(--f-font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fx .mm-acc__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3f97d6;
}

.fx .mobile-menu .mobile-menu__sub a.mm-acc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin: 0 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  color: #1f3350;
  font-family: var(--f-font);
  font-size: 1rem;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.fx .mm-acc__link svg { flex: none; width: 14px; height: 14px; color: #8ba1b9; transition: color 0.18s ease; }
.fx .mobile-menu .mobile-menu__sub a.mm-acc__link:hover,
.fx .mobile-menu .mobile-menu__sub a.mm-acc__link:active { background: #fff; color: #145d94; }
.fx .mm-acc__link:hover svg { color: #1a73b5; }

.fx .mobile-menu .mobile-menu__sub a.mm-acc__link[aria-current="page"] {
  background: #fff;
  color: #145d94;
  box-shadow: 0 0 0 1px #c6daf0, 0 1px 2px rgba(11, 18, 32, 0.06);
}

.fx .mobile-menu .mobile-menu__sub a.mm-acc__all {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  margin: 10px 0 0;
  padding: 0 18px;
  border: 0;
  border-top: 1px solid #e2eaf3;
  color: #145d94;
  font-family: var(--f-font);
  font-size: 0.95rem;
  font-weight: 600;
}

.fx .mm-acc__all svg { width: 14px; height: 14px; }

/* footer: Fomic's blue CTA with a white arrow block, WhatsApp as the quiet second */
.fx .mobile-menu .mm__foot {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

.fx .mm__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 0 7px 0 20px;
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  background: var(--glass-sheen), var(--glass-blue);
  box-shadow: var(--glass-shadow);
  color: #fff;
  font-family: var(--f-font);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
  -webkit-tap-highlight-color: transparent;
}

.fx .mm__cta-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.96);
  color: #1a68a6;
  box-shadow: 0 1px 2px rgba(6, 40, 80, 0.2);
}

.fx .mm__cta-icon .vmm__arrow { width: 16px; height: 16px; color: #1a68a6; opacity: 1; transform: none; }
.fx .mm__cta:active { filter: brightness(1.06); }

.fx .mm__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border: 1px solid #cfe9da;
  border-radius: 16px;
  background: #eef8f2;
  color: #0f6b43;
  font-family: var(--f-font);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.fx .mm__wa svg { width: 20px; height: 20px; }
.fx .mm__wa:active { background: #e2f3e9; }

/* the card's rows arrive one after another */
.fx .mobile-menu .mm__eyebrow,
.fx .mobile-menu .mm__nav > *,
.fx .mobile-menu .mm__foot {
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 0.14s ease, translate 0.14s ease;
}

.fx .mobile-menu.mobile-menu--open .mm__eyebrow,
.fx .mobile-menu.mobile-menu--open .mm__nav > *,
.fx .mobile-menu.mobile-menu--open .mm__foot {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), translate 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(70ms + var(--i, 0) * 35ms);
}

@media (prefers-reduced-motion: reduce) {
  .fx .mobile-menu,
  .fx .mobile-menu.mobile-menu--open { transform: none; }
  .fx .mobile-menu .mm__eyebrow,
  .fx .mobile-menu .mm__nav > *,
  .fx .mobile-menu .mm__foot { translate: none; transition-delay: 0s !important; }
  .fx .mobile-menu .mm-acc__panel,
  .fx .mm-acc__toggle svg,
  .fx .header .menu-toggle svg line { transition: none; }
}

/* ---- mega menu, colour pass: smoked blue crystal instead of a slate panel ----
   Translucent navy with a cool cyan cast. The backdrop is dimmed inside the filter
   (brightness) rather than by a thicker fill, so the page still shows through on a photo
   while light text keeps its contrast over white sections. Layout/motion untouched. */
.fx .vmm__panel {
  border: 1px solid rgba(170, 226, 255, 0.26);
  background:
    radial-gradient(46% 60% at 6% 0%, rgba(120, 222, 255, 0.13) 0%, rgba(120, 222, 255, 0) 70%),
    radial-gradient(40% 50% at 96% 0%, rgba(110, 176, 255, 0.1) 0%, rgba(110, 176, 255, 0) 70%),
    linear-gradient(180deg, rgba(30, 96, 172, 0.62) 0%, rgba(16, 64, 130, 0.68) 45%, rgba(8, 36, 86, 0.76) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(140, 215, 255, 0.07),
    inset 0 -30px 50px -40px rgba(120, 205, 255, 0.35),
    0 0 90px -30px rgba(70, 160, 240, 0.4),
    0 40px 80px -32px rgba(6, 24, 56, 0.55),
    0 12px 28px -16px rgba(6, 24, 56, 0.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.9) brightness(0.6);
  backdrop-filter: blur(30px) saturate(1.9) brightness(0.6);
}

.fx .vmm__group {
  background:
    radial-gradient(80% 40% at 20% 0%, rgba(160, 230, 255, 0.06) 0%, rgba(160, 230, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(170, 226, 255, 0.09);
}

.fx .vmm__eyebrow { color: #a8e4ff; }
.fx .vmm__eyebrow::before { background: #7fd8ff; box-shadow: 0 0 8px rgba(127, 216, 255, 0.55); }

.fx .vmm__group--services .vmm__list {
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(170, 226, 255, 0) 0%, rgba(170, 226, 255, 0.22) 18%, rgba(170, 226, 255, 0.22) 82%, rgba(170, 226, 255, 0)) bottom / 100% 1px no-repeat;
}

.fx .vmm__link { color: #f0f7ff; }
.fx .vmm__arrow { color: #8fdcf7; opacity: 0.45; }

.fx .vmm__link:hover,
.fx .vmm__link:focus-visible,
.fx .vmm__link[aria-current="page"] {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(150, 225, 255, 0.11) 0%, rgba(150, 225, 255, 0) 60%),
    linear-gradient(180deg, rgba(90, 175, 255, 0.15) 0%, rgba(50, 130, 225, 0.08) 100%);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(150, 222, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 20px -12px rgba(50, 150, 240, 0.55);
}

.fx .vmm__link[aria-current="page"] { color: #fff; }

.fx .vmm__link:focus-visible {
  box-shadow:
    inset 0 0 0 2px rgba(140, 215, 255, 0.85),
    0 8px 20px -12px rgba(50, 150, 240, 0.55);
}

.fx .vmm__link:hover .vmm__arrow,
.fx .vmm__link:focus-visible .vmm__arrow { color: #b8ecff; }

.fx .vmm__all { color: #7fd3ff; }
.fx .vmm__all:hover,
.fx .vmm__all:focus-visible {
  background: linear-gradient(180deg, rgba(110, 190, 255, 0.16) 0%, rgba(70, 150, 235, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 222, 255, 0.2);
  color: #d6f3ff;
}

/* ---- sector layouts: calm (zorg) and timeline (hotels) ---- */
.fx .fsec-lead { max-width: 720px; margin: 14px 0 0; color: var(--f-muted); font-size: 1.08rem; line-height: 1.65; }

.fx .fsec-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--f-line); }
.fx .fsec-room { padding: 26px 26px 30px 0; border-bottom: 1px solid var(--f-line); }
.fx .fsec-room:not(:nth-child(3n + 1)) { padding-left: 26px; border-left: 1px solid var(--f-line); }
.fx .fsec-room__n { display: block; margin-bottom: 18px; color: #1a73b5; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; }
.fx .fsec-room h3 { margin: 0 0 8px; font-size: 1.22rem; }
.fx .fsec-room p { margin: 0; line-height: 1.6; }
.fx .fsec-room a { color: var(--f-blue); text-underline-offset: 3px; }
.fx .fsec--calm .fsec-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx .fsec--calm .fsec-need { background: #fff; box-shadow: none; border-color: var(--f-line); }
.fx .fsec--calm .fsec-split--touch { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.fx .fsec--calm .fsec-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fx .fsec-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fx .fsec-timeline::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 139px; width: 1px; background: linear-gradient(180deg, rgba(26, 115, 181, 0.35), rgba(26, 115, 181, 0.08)); }
.fx .fsec-step { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 40px; padding: 22px 0; }
.fx .fsec-step::before { content: ""; position: absolute; top: 30px; left: 134px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #1a73b5; box-shadow: 0 0 0 4px rgba(26, 115, 181, 0.14); }
.fx .fsec-step__when { padding-top: 4px; color: #145d94; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fx .fsec-step h3 { margin: 0 0 6px; font-size: 1.3rem; }
.fx .fsec-step p { max-width: 680px; margin: 0; line-height: 1.65; }
.fx .fsec-step a { color: var(--f-blue); text-underline-offset: 3px; }
.fx .fsec--timeline .fsec-needs .fsec-need:first-child { background: linear-gradient(180deg, #16385f, #0f2a4a); border-color: rgba(150, 210, 255, 0.25); }
.fx .fsec--timeline .fsec-needs .fsec-need:first-child h3,
.fx .fsec--timeline .fsec-needs .fsec-need:first-child p { color: #fff; }
.fx .fsec--timeline .fsec-needs .fsec-need:first-child .ficon { background: rgba(255, 255, 255, 0.12); color: #bfe3ff; border-color: rgba(255, 255, 255, 0.2); }

.fx .fsec-scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.fx .fsec-scope__col h3 { margin: 0 0 14px; font-size: 1.15rem; }
.fx .fsec-agree { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fx .fsec-agree li { position: relative; padding: 12px 14px 12px 40px; border: 1px dashed #c9d9ec; border-radius: 14px; background: #f7faff; color: var(--f-ink); font-weight: 500; }
.fx .fsec-agree li::before { content: "?"; position: absolute; left: 12px; top: 11px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e3eefa; color: #145d94; font-size: 0.75rem; font-weight: 700; }
.fx .fsec-scope .fsec-detail { align-self: stretch; }

@media (max-width: 1000px) {
  .fx .fsec-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx .fsec-room:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .fx .fsec-room:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--f-line); }
  .fx .fsec-scope { grid-template-columns: 1fr 1fr; }
  .fx .fsec-scope .fsec-detail { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .fx .fsec-rooms { grid-template-columns: 1fr; }
  .fx .fsec-room,
  .fx .fsec-room:nth-child(2n) { padding: 22px 0; border-left: 0; }
  .fx .fsec--calm .fsec-needs,
  .fx .fsec--calm .fsec-split--touch,
  .fx .fsec--calm .fsec-zones,
  .fx .fsec-scope { grid-template-columns: 1fr; }
  .fx .fsec-timeline::before { left: 5px; }
  .fx .fsec-step { grid-template-columns: 1fr; gap: 6px; padding: 18px 0 18px 30px; }
  .fx .fsec-step::before { left: 0; top: 24px; }
}

/* six sectors: services overview in 3 columns, mega menu 2 x 3, footer gets a sector column */
.fx .fsectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx .fsector__media { aspect-ratio: 4 / 3; }
@media (max-width: 1000px) { .fx .fsectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fx .fsectors { grid-template-columns: 1fr; } }

.fx .vmm__group--sectors .vmm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
.fx .vmm__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.fx .vcf-main { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1100px) { .fx .vcf-main { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 768px) { .fx .vcf-main { grid-template-columns: 1fr 1fr; } }

.fx .fsectorlinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.fx .fsectorlinks a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ice-edge); border-radius: 999px; background: var(--ice-glass); color: #145d94; font-weight: 500; text-decoration: none; transition: background-color 0.18s ease, border-color 0.18s ease; }
.fx .fsectorlinks a:hover { border-color: #a9c8ea; background: #fff; }
.fx .fsectorlinks .vmm__arrow { width: 14px; height: 14px; color: currentColor; opacity: 0.7; transform: none; }

/* location selector with six sectors: services keep full-width rows (long labels),
   the short sector names sit two per row so the list stays as tall as the panel */
@media (min-width: 901px) {
  .fx .fsel__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; }
  .fx .fsel__group { grid-column: 1 / -1; }
  .fx .fsel__tab[data-sel="vve"], .fx .fsel__tab[data-sel="office"], .fx .fsel__tab[data-sel="airbnb"],
  .fx .fsel__tab[data-sel="restaurant"], .fx .fsel__tab[data-sel="handover"], .fx .fsel__tab[data-sel="deep"] { grid-column: 1 / -1; }
  .fx .fsel__tab { padding: 6px 12px 6px 6px; }
  .fx .fsel__tab .ficon { width: 36px; height: 36px; }
}

/* ==========================================================================
   Blog mega menu: same glass family and motion as Schoonmaakdiensten, a lighter,
   more editorial sheet with three article cards (content/blog.mjs, newest first).
   ========================================================================== */
.fx .header .vmm--blog .nav__dropdown-trigger { min-width: 0; }

.fx .vmm__panel--blog {
  padding: 14px;
  background:
    radial-gradient(50% 70% at 8% 0%, rgba(150, 230, 255, 0.2) 0%, rgba(150, 230, 255, 0) 70%),
    radial-gradient(40% 60% at 96% 0%, rgba(140, 196, 255, 0.16) 0%, rgba(140, 196, 255, 0) 70%),
    linear-gradient(180deg, rgba(52, 118, 190, 0.5) 0%, rgba(30, 86, 152, 0.56) 55%, rgba(18, 60, 116, 0.64) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(1.8) brightness(0.72);
  backdrop-filter: blur(30px) saturate(1.8) brightness(0.72);
}

.fx .vmm__blog { display: flex; flex-direction: column; filter: blur(2px); transition: filter 0.2s ease; }
.fx .vmm__panel.is-open .vmm__blog { filter: none; transition-duration: 0.3s; }
.fx .vmm__blog > .vmm__eyebrow { margin: 6px 8px 12px; }

.fx .vmm__posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx .vmm__post {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.9) 0%, rgba(230, 241, 252, 0.84) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px -18px rgba(6, 30, 70, 0.55);
  color: #10223a;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.14s, translate 0.14s;
}

.fx .vmm__post-media { display: block; overflow: hidden; aspect-ratio: 16 / 7; border-radius: 11px; background: linear-gradient(135deg, #d9e8f6, #c4d9ee); }
.fx .vmm__post-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.fx .vmm__post-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 8px 6px; }
.fx .vmm__post-tag { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: rgba(26, 115, 181, 0.1); color: #145d94; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.fx .vmm__post-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; transition: color 0.2s ease; }
.fx .vmm__post-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #4a5b70; font-size: 0.85rem; line-height: 1.5; }
.fx .vmm__post-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: #145d94; font-size: 0.82rem; font-weight: 600; }
.fx .vmm__post-more svg { width: 14px; height: 14px; transition: transform 0.2s ease; }

.fx .vmm__post:hover,
.fx .vmm__post:focus-visible {
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(240, 247, 255, 0.94) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(150, 222, 255, 0.35), 0 14px 30px -18px rgba(6, 30, 70, 0.6);
  outline: none;
}
.fx .vmm__post:focus-visible { box-shadow: 0 0 0 3px rgba(140, 215, 255, 0.95), 0 14px 30px -18px rgba(6, 30, 70, 0.6); }
.fx .vmm__post:hover .vmm__post-media img,
.fx .vmm__post:focus-visible .vmm__post-media img { transform: scale(1.02); }
.fx .vmm__post:hover .vmm__post-title,
.fx .vmm__post:focus-visible .vmm__post-title { color: #145d94; }
.fx .vmm__post:hover .vmm__post-more svg,
.fx .vmm__post:focus-visible .vmm__post-more svg { transform: translateX(2px); }
.fx .vmm__post[aria-current="page"] { box-shadow: inset 0 0 0 2px rgba(26, 115, 181, 0.35); }

.fx .vmm__all--wide {
  align-self: stretch;
  justify-content: center;
  min-height: 46px;
  margin-top: 12px;
  border: 1px solid rgba(170, 226, 255, 0.22);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  color: #e6f6ff;
  font-size: 0.92rem;
}

/* same stagger as the services sheet */
.fx .vmm__panel .vmm__post,
.fx .vmm__panel .vmm__all--wide { opacity: 0; translate: 0 -4px; }
.fx .vmm__panel.is-open .vmm__post,
.fx .vmm__panel.is-open .vmm__all--wide {
  opacity: 1;
  translate: 0 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), translate 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s, 0s, 0s, calc(60ms + var(--i, 0) * 40ms), calc(60ms + var(--i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  .fx .vmm__blog { filter: none; transition: none; }
  .fx .vmm__panel .vmm__post,
  .fx .vmm__panel .vmm__all--wide { translate: none; transition-delay: 0s !important; }
  .fx .vmm__post-media img { transition: none; }
}

/* mobile: compact article rows with a small thumbnail inside the Blog accordion */
.fx .mobile-menu .mobile-menu__sub a.mm-post { justify-content: flex-start; gap: 12px; min-height: 64px; padding: 8px 10px 8px 8px; }
.fx .mm-post__thumb { flex: none; overflow: hidden; width: 64px; height: 48px; border-radius: 9px; background: #dde9f5; }
.fx .mm-post__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx .mm-post__text { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.fx .mm-post__tag { color: #1a6fae; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.fx .mm-post__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.92rem; font-weight: 500; line-height: 1.35; }

/* ==========================================================================
   Mega menus, warm palette (2026-09-26): deep navy smoked glass with pearl and champagne
   highlights and a soft aqua accent, instead of steel blue. Layout and motion unchanged.
   ========================================================================== */
.fx .vmm__panel {
  border: 1px solid rgba(255, 243, 226, 0.18);
  background:
    radial-gradient(48% 60% at 6% 0%, rgba(255, 236, 208, 0.1) 0%, rgba(255, 236, 208, 0) 70%),
    radial-gradient(40% 55% at 96% 0%, rgba(140, 214, 214, 0.08) 0%, rgba(140, 214, 214, 0) 70%),
    linear-gradient(180deg, rgba(30, 46, 74, 0.68) 0%, rgba(22, 35, 58, 0.75) 55%, rgba(14, 22, 40, 0.83) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 232, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 32px 64px -32px rgba(10, 14, 24, 0.55),
    0 10px 24px -16px rgba(10, 14, 24, 0.32);
  -webkit-backdrop-filter: blur(30px) saturate(1.25) brightness(0.66);
  backdrop-filter: blur(30px) saturate(1.25) brightness(0.66);
}

.fx .vmm__group {
  background:
    radial-gradient(80% 40% at 20% 0%, rgba(255, 240, 220, 0.06) 0%, rgba(255, 240, 220, 0) 70%),
    linear-gradient(180deg, rgba(255, 248, 238, 0.07) 0%, rgba(255, 248, 238, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 232, 0.12), inset 0 0 0 1px rgba(255, 243, 226, 0.07);
}

.fx .vmm__eyebrow { color: #a9dbd8; }
.fx .vmm__eyebrow::before { background: #8fd0cb; box-shadow: none; }

.fx .vmm__group--services .vmm__list {
  background: linear-gradient(90deg, rgba(255, 240, 220, 0) 0%, rgba(255, 240, 220, 0.16) 18%, rgba(255, 240, 220, 0.16) 82%, rgba(255, 240, 220, 0)) bottom / 100% 1px no-repeat;
}

.fx .vmm__link { color: #f5f0e9; }
.fx .vmm__arrow { color: #b9dcd9; opacity: 0.5; }

.fx .vmm__link:hover,
.fx .vmm__link:focus-visible,
.fx .vmm__link[aria-current="page"] {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255, 244, 228, 0.1) 0%, rgba(255, 244, 228, 0) 60%),
    linear-gradient(180deg, rgba(255, 248, 238, 0.1) 0%, rgba(176, 208, 226, 0.07) 100%);
  color: #fffaf3;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 226, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.fx .vmm__link:focus-visible { box-shadow: inset 0 0 0 2px rgba(169, 219, 216, 0.9); }
.fx .vmm__link:hover .vmm__arrow,
.fx .vmm__link:focus-visible .vmm__arrow { color: #d5eeec; }

.fx .vmm__all { color: #a9dbd8; }
.fx .vmm__all:hover,
.fx .vmm__all:focus-visible {
  background: linear-gradient(180deg, rgba(255, 248, 238, 0.1) 0%, rgba(255, 248, 238, 0.04) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 226, 0.16);
  color: #fffaf3;
}
.fx .vmm__all:focus-visible { box-shadow: inset 0 0 0 2px rgba(169, 219, 216, 0.9); }

/* Blog: lighter and warmer, soft pearl / stone glass with navy text */
.fx .vmm__panel--blog {
  border: 1px solid rgba(24, 38, 60, 0.14);
  background:
    radial-gradient(50% 70% at 8% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 60% at 96% 0%, rgba(150, 214, 214, 0.18) 0%, rgba(150, 214, 214, 0) 70%),
    linear-gradient(180deg, rgba(247, 243, 236, 0.8) 0%, rgba(234, 237, 238, 0.76) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 32px 64px -34px rgba(12, 18, 30, 0.45),
    0 10px 24px -18px rgba(12, 18, 30, 0.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.15) brightness(1.08);
  backdrop-filter: blur(28px) saturate(1.15) brightness(1.08);
}

.fx .vmm__panel--blog .vmm__eyebrow { color: #2f6670; }
.fx .vmm__panel--blog .vmm__eyebrow::before { background: #4f9ea3; }

.fx .vmm__post {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.93) 0%, rgba(250, 246, 240, 0.9) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -18px rgba(18, 24, 34, 0.4);
  color: #14233a;
}
.fx .vmm__post-media { background: linear-gradient(135deg, #ece6dc, #dfe3e4); }
.fx .vmm__post-tag { border: 1px solid rgba(80, 150, 158, 0.25); background: rgba(128, 196, 202, 0.16); color: #245c66; }
.fx .vmm__post-excerpt { color: #56606c; }

.fx .vmm__post:hover,
.fx .vmm__post:focus-visible {
  border-color: #fff;
  background: linear-gradient(180deg, #fffefb 0%, #fbf8f3 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(24, 38, 60, 0.08), 0 16px 32px -18px rgba(18, 24, 34, 0.45);
}
.fx .vmm__post:focus-visible { box-shadow: 0 0 0 3px rgba(26, 115, 181, 0.55), 0 16px 32px -18px rgba(18, 24, 34, 0.45); }

.fx .vmm__all--wide {
  border: 1px solid rgba(255, 243, 226, 0.2);
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(255, 238, 214, 0.12) 0%, rgba(255, 238, 214, 0) 60%),
    linear-gradient(180deg, #243249 0%, #19243a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 232, 0.22), 0 10px 22px -14px rgba(12, 18, 30, 0.55);
  color: #f7f1e8;
}
.fx .vmm__all--wide:hover,
.fx .vmm__all--wide:focus-visible {
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(255, 238, 214, 0.18) 0%, rgba(255, 238, 214, 0) 60%),
    linear-gradient(180deg, #2a3a54 0%, #1d2a42 100%);
  color: #fffaf3;
}

/* ==========================================================================
   Footer, compact pass (2026-09-26): narrower card with more air at the sides, tighter
   vertical rhythm, one quiet bottom row (the duplicate contact icons are gone; the floating
   back-to-top + WhatsApp stay the only fixed actions).
   ========================================================================== */
.fx .footer.fxfooter {
  width: calc(100% - 96px);
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  border-radius: 28px;
}

.fx .vcf-cta { padding: 28px 36px; gap: 24px; }
.fx .footer .vcf-cta__title { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.fx .footer .vcf-cta__sub { margin-top: 6px; font-size: 1rem; }

.fx .vcf-main {
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 0.9fr));
  gap: 28px 32px;
  padding: 36px 24px 26px;
}

.fx .footer .vcf-desc { margin: 14px 0 14px; font-size: 0.95rem; line-height: 1.55; }
.fx .footer .vcf-phone { font-size: 1.3rem; }
.fx .footer .vcf-area { margin: 2px 0 14px; }

/* company details as a quiet text block, no separate card */
.fx .vcf-business {
  margin-top: 16px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--vcf-line);
  border-radius: 0;
  background: none;
}
.fx .footer .vcf-business p { font-size: 0.82rem; line-height: 1.55; }

.fx .footer .vcf-heading { margin-bottom: 12px; }
.fx .vcf-list { gap: 7px; }
.fx .footer .vcf-list a,
.fx .footer .vcf-list .footer__cookie-settings { font-size: 0.94rem; }

.fx .vcf-bottom {
  justify-content: space-between;
  gap: 10px 24px;
  padding: 14px var(--vcf-stack) 12px 24px;
}
.fx .footer .vcf-maker a { padding: 4px 10px 4px 12px; }

/* pages without the .fcta photo band: the card sits on the page with normal spacing */
@media (max-width: 1100px) {
  .fx .footer.fxfooter { width: calc(100% - 48px); }
  .fx .vcf-main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .fx .footer.fxfooter { width: calc(100% - 24px); padding: 10px; border-radius: 22px; }
  .fx .vcf-cta { padding: 22px 18px; gap: 16px; }
  .fx .vcf-main { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 26px 10px 18px; }
  .fx .footer .vcf-desc { margin: 10px 0 12px; }
  .fx .vcf-list { gap: 4px; }
  .fx .footer .vcf-list a,
  .fx .footer .vcf-list .footer__cookie-settings { min-height: 36px; font-size: 0.95rem; }
  .fx .vcf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px var(--vcf-stack) calc(12px + env(safe-area-inset-bottom, 0px)) 10px;
  }
}

/* floating bar steps back once the footer takes over the bottom of the screen (fx.js) */
.fx .header { transition: top 0.25s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease, opacity 0.3s ease; }
.fx .header.header--quiet {
  --nav-glass-light: linear-gradient(180deg, rgba(248, 251, 254, 0.6), rgba(238, 245, 252, 0.52));
  --nav-glass-dark: linear-gradient(180deg, rgba(20, 36, 58, 0.52), rgba(12, 24, 42, 0.6));
  opacity: 0.9;
  box-shadow: 0 6px 18px -14px rgba(11, 18, 32, 0.25);
}
.fx .header.header--quiet .header__inner { height: 58px; }
.fx .header.header--quiet:hover,
.fx .header.header--quiet:focus-within { opacity: 1; }
@media (max-width: 768px) {
  .fx .header.header--quiet .header__inner { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx .header { transition: none; }
}
@media (max-width: 768px) {
  .fx .vcf-main { grid-template-areas: "brand brand" "links legal" "svc sect"; }
  .fx .vcf-main > :nth-child(1) { grid-area: brand; }
  .fx .vcf-main > :nth-child(2) { grid-area: links; }
  .fx .vcf-main > :nth-child(3) { grid-area: svc; }
  .fx .vcf-main > :nth-child(4) { grid-area: sect; }
  .fx .vcf-main > :nth-child(5) { grid-area: legal; grid-column: auto; }
}

/* the closed mobile menu takes no taps at all, whatever its children say */
.fx .mobile-menu:not(.mobile-menu--open) { pointer-events: none; }

/* ==========================================================================
   Morphing nav dropdown (desktop). ONE shell (#vmd) under the bar for Schoonmaakdiensten
   and Blog: fx.js sets its translate/width/height to the active pane, the shell animates
   between them and the panes crossfade inside it. Warm smoked navy glass.
   ========================================================================== */
.fx .vmd {
  --vmd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 600px;
  height: 320px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -40px, 0);
  transform-origin: 50% 0;
  will-change: transform, width, height, opacity;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 1, 1),
    width 0.2s cubic-bezier(0.4, 0, 1, 1),
    height 0.2s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.18s ease,
    visibility 0s linear 0.2s;
}

.fx .vmd.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.32s var(--vmd-ease),
    width 0.32s var(--vmd-ease),
    height 0.32s var(--vmd-ease),
    opacity 0.22s var(--vmd-ease),
    visibility 0s;
}

.fx .vmd.is-instant { transition: none !important; }

/* pointer bridge over the gap under the bar */
.fx .vmd::before { content: ""; position: absolute; left: -8px; right: -8px; top: -16px; height: 16px; }

.fx .vmd__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 243, 226, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(255, 236, 208, 0.08) 0%, rgba(255, 236, 208, 0) 60%),
    radial-gradient(50% 70% at 100% 0%, rgba(120, 200, 210, 0.07) 0%, rgba(120, 200, 210, 0) 60%),
    linear-gradient(180deg, rgba(20, 26, 38, 0.8) 0%, rgba(12, 16, 26, 0.86) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 232, 0.16),
    0 30px 60px -28px rgba(8, 10, 16, 0.6),
    0 10px 24px -14px rgba(8, 10, 16, 0.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.25) brightness(0.62);
  backdrop-filter: blur(26px) saturate(1.25) brightness(0.62);
}

/* panes sit at the top-left of the shell with their own natural size; the shell clips them
   while it morphs */
.fx .vmd__pane {
  --vmd-dir: 1;
  position: absolute;
  top: 0;
  left: 0;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(calc(var(--vmd-dir) * 16px), 0, 0);
  transition: opacity 0.16s ease, transform 0.2s var(--vmd-ease, ease), visibility 0s linear 0.2s;
}

.fx .vmd__pane.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s ease 0.06s, transform 0.3s var(--vmd-ease, ease) 0.04s, visibility 0s;
}

.fx .vmd__pane--services { display: grid; grid-template-columns: 196px 176px 248px; gap: 6px; width: 656px; }
.fx .vmd__pane--blog { width: 700px; }

.fx .vmd__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 10px 10px;
  color: #a9dbd8;
  font-family: var(--f-font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fx .vmd__eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8fd0cb; }

.fx .vmd__list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }

.fx .vmd__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: #f5f0e9;
  font-family: var(--f-font);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.fx .vmd__link .vmm__arrow { width: 13px; height: 13px; color: #b9dcd9; opacity: 0.4; transform: translateX(-2px); transition: opacity 0.18s ease, transform 0.22s var(--vmd-ease, ease); }
.fx .vmd__link:hover,
.fx .vmd__link:focus-visible,
.fx .vmd__link.is-previewed {
  background: linear-gradient(180deg, rgba(255, 248, 238, 0.09) 0%, rgba(176, 208, 226, 0.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 226, 0.13);
  color: #fffaf3;
  outline: none;
}
.fx .vmd__link:focus-visible { box-shadow: inset 0 0 0 2px rgba(169, 219, 216, 0.9); }
.fx .vmd__link:hover .vmm__arrow,
.fx .vmd__link:focus-visible .vmm__arrow,
.fx .vmd__link.is-previewed .vmm__arrow { opacity: 1; transform: none; }
.fx .vmd__link[aria-current="page"] { color: #fffaf3; background: rgba(169, 219, 216, 0.1); }

.fx .vmd__aside { display: flex; flex-direction: column; gap: 10px; padding-left: 8px; }
.fx .vmd__preview {
  position: relative;
  overflow: hidden;
  height: 236px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1b2434, #111722);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 226, 0.1);
}
.fx .vmd__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.28s ease, transform 0.5s var(--vmd-ease, ease);
}
.fx .vmd__img.is-on { opacity: 1; transform: none; }
.fx .vmd__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(12, 16, 26, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fffaf3;
  font-family: var(--f-font);
  font-size: 0.8rem;
  font-weight: 500;
  transition: opacity 0.18s ease;
}

.fx .vmd__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: #a9dbd8;
  font-family: var(--f-font);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.fx .vmd__all svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.fx .vmd__all:hover,
.fx .vmd__all:focus-visible { background: rgba(255, 248, 238, 0.08); color: #fffaf3; outline: none; }
.fx .vmd__all:focus-visible { box-shadow: inset 0 0 0 2px rgba(169, 219, 216, 0.9); }
.fx .vmd__all:hover svg { transform: translateX(2px); }

/* blog pane: three compact editorial cards */
.fx .vmd__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fx .vmd__post {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 8px 8px 12px;
  border-radius: 12px;
  color: #f5f0e9;
  font-family: var(--f-font);
  text-decoration: none;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.fx .vmd__thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 4px; border-radius: 9px; background: linear-gradient(135deg, #1b2434, #111722); }
.fx .vmd__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--vmd-ease, ease); }
.fx .vmd__tag { color: #a9dbd8; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.fx .vmd__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.fx .vmd__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: rgba(236, 230, 220, 0.72); font-size: 0.8rem; line-height: 1.5; }
.fx .vmd__post:hover,
.fx .vmd__post:focus-visible { background: rgba(255, 248, 238, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 243, 226, 0.12); outline: none; }
.fx .vmd__post:focus-visible { box-shadow: inset 0 0 0 2px rgba(169, 219, 216, 0.9); }
.fx .vmd__post:hover .vmd__thumb img { transform: scale(1.02); }
.fx .vmd__all--blog { margin-top: 6px; }

@media (max-width: 1000px) { .fx .vmd { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx .vmd, .fx .vmd.is-open { transition: opacity 0.12s linear, visibility 0s linear 0.12s; }
  .fx .vmd.is-open { transition: opacity 0.12s linear, visibility 0s; }
  .fx .vmd__pane, .fx .vmd__pane.is-active { transform: none; transition: opacity 0.12s linear, visibility 0s linear 0.12s; }
  .fx .vmd__pane.is-active { transition: opacity 0.12s linear, visibility 0s; }
  .fx .vmd__img { transform: none; }
}

/* ==========================================================================
   Reflow (WCAG 1.4.10): nothing wider than the viewport at 320px or at 200% text.
   Flex and grid children default to min-width:auto and grow to their longest word
   ("Schoonmaakdiensten", "schoonmaakprogramma"); these let them shrink instead, and let
   long Dutch compounds break (hyphenated on narrow screens) only when they would overflow.
   :where() keeps these at the lowest specificity, so every component's own width and
   max-width (reading measures such as the 640px legal text) still wins.
   ========================================================================== */
.fx :where(
  .fhero__content > *,
  .fhero__text,
  .fpagehead > *,
  .fposthead > *,
  .fhead > *,
  .fhead__text > *,
  .fcta__inner > *,
  .fdetail > *,
  .farticle > *,
  .fpost > *,
  .vcf-cta > *,
  .vcf-cta__text > *,
  .fcontainer > *,
  .ffaq > *,
  .fsel > *,
  .fbenefits > *,
  .fservices > *,
  .fpost__aside > *,
  .fchecklist > *,
  .ffacts > *,
  .fsec-block > *,
  .fsus-honest > *,
  .ffeatured > *,
  .ffeatured__body > *,
  .fcontact > *,
  .flegal__nav > *,
  .fpostcta > *,
  .fcrumbs > *,
  .footer__legal-links > *,
  .header__inner > *
) {
  min-width: 0;
  max-width: 100%;
}


/* long words wrap inside their own box instead of sticking out of it; inherited, so it
   covers every text node. break-word never changes how wide a button or icon wants to be */
.fx main,
.fx .footer,
.fx .vcc {
  overflow-wrap: break-word;
}

@media (max-width: 860px) {
  .fx .fhero__actions { max-width: min(420px, 100%); }
}

.fx .fbtn {
  max-width: 100%;
}

/* Page titles of one long word ("Schoonmaakdiensten", "schoonmaakprogramma"): below about
   400px the size is capped so the longest word always fits the screen (ratio = width of that
   word per 1px of font size). Above 400px the cap never applies. The title may run into the
   side padding, as it always did, but is not broken up inside a word there. */
.fx .fpagehead h1 {
  font-size: min(clamp(2.6rem, 6vw, 4.8rem), calc((100vw - 16px) / 9.2));
  overflow-wrap: normal;
}
.fx .fposthead h1 {
  font-size: min(clamp(2.3rem, 5.2vw, 4.5rem), calc((100vw - 16px) / 10.4));
  overflow-wrap: normal;
}

/* boxes with their own px max-width keep it on wide screens but never exceed the viewport */
.fx .fpagehead p { max-width: min(640px, 100%); }
.fx .fsel__body p { max-width: min(620px, 100%); }
.fx .fsec-lead { max-width: min(720px, 100%); }
.fx .ffeatured__excerpt { max-width: min(520px, 100%); }
.fx .fabout__statement { max-width: min(1080px, 100%); }
/* the article column is centred with auto margins, which sizes it to its longest word;
   filling the column is what it already does at every normal size */
.fx .fpost__body { width: 100%; }
.fx .fsel__feat { max-width: 100%; }

/* text next to an icon or chevron may shrink; the icon keeps its size */
.fx .faq-item__question > span:first-child,
.fx .fbenefit > div,
.fx .fsel__body > *,
.fx .fpill > span:last-child,
.fx .flegal__next > span,
.fx form > * {
  min-width: 0;
}

/* labels whose text sits directly in a flex box (footer links, selector tabs, checklist rows,
   "Meer over ...", form button) may break inside a word, but only when it would otherwise overflow, e.g. "Schoonmaakdiensten" at 200% text on a 320px screen */
.fx .fsel__tab,
.fx .fsel__feat li,
.fx .fchecklist li,
.fx .fservice__more,
.fx .flegal__nav a,
.fx form .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}


@media (max-width: 480px) {
  /* the logo gives way before the language switch and menu button do */
  .fx .header .header__logo { flex-shrink: 1; }
  .fx .header .header__logo-img { max-width: 100%; object-fit: contain; object-position: left center; }

}

/* Very narrow text columns: a 320px phone, or large system text on any phone (the em
   breakpoint grows with the browser's text size, so 200% text on a 390px phone counts too).
   Only here the footer columns may share the width evenly, footer links and the credit row may
   wrap, and headings and leads may break (hyphenated) inside a long word. Wider layouts stay exactly as they were. */
@media (max-width: 22.4em) {
  .fx .vcf-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx .vcf-main > *,
  .fx .vcf-bottom > * { min-width: 0; max-width: 100%; }
  .fx .footer .vcf-list a { max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  /* running text breaks long compounds at a real syllable, with a hyphen, not after any letter */
  .fx main p,
  .fx main li,
  .fx main dd,
  .fx .footer p {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .fx .vcf-maker,
  .fx .vcc__links { flex-wrap: wrap; }
  .fx h1,
  .fx h2,
  .fx h3,
  .fx .fpagehead h1,
  .fx .fposthead h1,
  .fx .fpost__lead,
  .fx .farticle__lead {
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ==========================================================================
   Inline links in running text are never marked by colour alone (WCAG 1.4.1): a quiet
   permanent underline, the same one the blog articles use, a little stronger on hover and
   focus. Only bare links inside a paragraph (or a legal text list); navigation, cards,
   link lists and buttons all carry a class or sit outside a paragraph and stay as they are.
   ========================================================================== */
.fx main :is(p, dd, td) > a:not([class]),
.fx .legal-content li > a:not([class]) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 115, 181, 0.55);
  transition: text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.fx main :is(p, dd, td) > a:not([class]):is(:hover, :focus-visible),
.fx .legal-content li > a:not([class]):is(:hover, :focus-visible) {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Tap targets: about 44px of hit area without changing what anyone sees. An invisible
   ::before stretches the clickable box; the visual size and spacing stay as they were.
   (::after is already used by the footer links for their hover underline.)
   ========================================================================== */
.fx .footer .vcf-list a,
.fx .footer .vcf-list .footer__cookie-settings,
.fx .footer .vcf-phone,
.fx .footer .vcf-maker a,
.fx .header .header__logo,
.fx .lang-switch__btn,
.fx .fcrumbs a {
  position: relative;
}

.fx .footer .vcf-list a::before,
.fx .footer .vcf-list .footer__cookie-settings::before,
.fx .footer .vcf-phone::before,
.fx .footer .vcf-maker a::before,
.fx .header .header__logo::before,
.fx .lang-switch__btn::before,
.fx .fcrumbs a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translate(-50%, -50%);
}

/* the two language buttons sit side by side: grow outwards only, never over each other */
.fx .lang-switch__btn::before { width: 100%; }
.fx .lang-switch__btn:first-child::before { left: 0; width: calc(100% + 5px); transform: translate(-5px, -50%); }
.fx .lang-switch__btn:last-child::before { left: 0; width: calc(100% + 5px); transform: translate(0, -50%); }