/* Owner 31 Oct 2026 — services page (/services/ and /nl/services/): glass card panel
   on the owner's backdrop (built by creadifity-services-panel.js). Since 1 Nov 2026
   the backdrop is the owner's wave video.
   - The intro card is the largest; nine service cards sit to its right and below it,
     each with its own size and ratio (desktop: 12-column bento; phones/tablets: two
     staggered columns whose cards all differ in height).
   - Cards are clear glass like the header bar; on hover they turn to frosted (blur)
     glass and a service card comes forward a little.
   - All cards fade in one by one. */

/* Until the panel is built, keep the old layout out of sight (the head script
   removes this class after 3.5 s at the latest, so nothing stays hidden). */
html.cf-svcp-pending #advertisement-services { background: #000; }
html.cf-svcp-pending #advertisement-services > .StripPreview_backgroundComponent__3YmQM { visibility: hidden; }

/* One.com animates this block's height (0.1 s) and pins its row to the old layout's
   height; the panel decides the height now. */
#advertisement-services { transition: none !important; }
#advertisement-services.cf-svcp-host { min-height: 0 !important; height: auto !important; }
.template > .Preview_row__3Fkye:has(#advertisement-services.cf-svcp-host) { min-height: 0 !important; }
#advertisement-services > .cf-svcp-original { display: none !important; }

.cf-svcp {
  --svcp-gap: 16px;
  --svcp-radius: 30px;
  --svcp-inset: 10px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 56px 32px 104px;
  background: #000;
  color: #fff;
  font-family: var(--svcp-body-font, Montserrat, Arial, sans-serif);
  text-align: left;
}
.cf-svcp *, .cf-svcp *::before, .cf-svcp *::after { box-sizing: border-box; }
/* Owner 1 Nov 2026 — the wave video fills the screen and stays put while the cards
   scroll over it; the panel clips it to its own area. (Sticky cannot work here: on
   phones One.com's .extraContainer is a scroll box.) Its black matches the panel's. */
.cf-svcp-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip: rect(0, auto, auto, 0);
  clip-path: inset(0);
  pointer-events: none;
}
.cf-svcp-video {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  object-fit: cover;
  object-position: 50% 50%;
  background: #000;
}
/* Local preview only: room for the floating glass navigation bar. */
html[data-cf-local-navigation=true] .cf-svcp { padding-top: 124px; }

.cf-svcp-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--svcp-gap);
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Glass ---------- */
.cf-svcp-card {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: var(--svcp-radius);
  border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 45%, rgba(10, 18, 32, .1) 100%);
  box-shadow: 0 18px 44px rgba(0, 4, 18, .34), 0 2px 8px rgba(0, 4, 18, .18),
    inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset 1px 0 0 rgba(255, 255, 255, .22), inset -1px 0 0 rgba(255, 255, 255, .1),
    inset 0 0 22px rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(3px) saturate(175%) brightness(1.07);
  backdrop-filter: blur(3px) saturate(175%) brightness(1.07);
  color: #fff;
  text-decoration: none !important;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1),
    -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}
/* Soft sheen at the top, like the header bar. */
.cf-svcp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .04) 36%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 140% at 8% -25%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 48%);
}
/* Bright rim: white top-left, a blue glint bottom-right. */
.cf-svcp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .3) 22%, rgba(255, 255, 255, 0) 44%,
    rgba(255, 255, 255, 0) 62%, rgba(159, 208, 255, .42) 84%, rgba(255, 255, 255, .75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Frosted layer, faded in on hover. */
.cf-svcp-frost {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .1) 55%, rgba(206, 224, 255, .17));
  opacity: 0;
  transition: opacity .5s ease;
}
@media (hover: hover) {
  .cf-svcp-card:hover {
    border-color: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.14);
    backdrop-filter: blur(24px) saturate(150%) brightness(1.14);
  }
  .cf-svcp-card:hover > .cf-svcp-frost { opacity: 1; }
  .cf-svcp-service:hover {
    z-index: 2;
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 34px 70px rgba(0, 4, 18, .5), 0 8px 22px rgba(0, 4, 18, .26), 0 0 0 1px rgba(255, 255, 255, .08),
      0 0 46px rgba(48, 138, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 26px rgba(255, 255, 255, .1);
  }
  .cf-svcp-service:hover .cf-svcp-img { transform: scale(1.05); }
  .cf-svcp-service:hover .cf-svcp-more svg { transform: translateX(3px); }
}
.cf-svcp-service:focus-visible {
  outline: 3px solid #9cceff;
  outline-offset: 4px;
  z-index: 2;
  transform: translateY(-8px) scale(1.03);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.14);
  backdrop-filter: blur(24px) saturate(150%) brightness(1.14);
}
.cf-svcp-service:focus-visible > .cf-svcp-frost { opacity: 1; }

/* ---------- Fade in, one card at a time (classes from the script) ---------- */
.cf-svcp-animate .cf-svcp-card {
  transition: opacity .9s ease, translate 1s cubic-bezier(.2, .7, .2, 1), scale 1s cubic-bezier(.2, .7, .2, 1),
    transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1),
    -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}
.cf-svcp-animate .cf-svcp-card:not(.is-in) { opacity: 0; translate: 0 28px; scale: .97; }
@media (prefers-reduced-motion: reduce) {
  .cf-svcp .cf-svcp-card { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
}

/* ---------- Intro card ---------- */
.cf-svcp-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4.2vw, 60px);
  background: linear-gradient(135deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 45%, rgba(10, 18, 32, .12) 100%);
}
.cf-svcp-intro-inner { position: relative; z-index: 1; }
.cf-svcp-intro h1, .cf-svcp-intro h2 {
  margin: 0 0 .42em;
  font-family: var(--svcp-head-font, inherit);
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 12, 48, .35);
}
.cf-svcp-intro h1 span, .cf-svcp-intro h2 span { font: inherit; color: inherit; }
.cf-svcp-intro p {
  max-width: 64ch;
  margin: 0 0 1em;
  font-family: var(--svcp-body-font, inherit);
  font-size: clamp(15px, 1.22vw, 18px);
  line-height: 1.68;
  color: rgba(236, 243, 255, .9);
}
.cf-svcp-intro p:last-child { margin-bottom: 0; }

/* ---------- Service card ---------- */
.cf-svcp-service { container: svcp / size; cursor: pointer; }
.cf-svcp-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--svcp-inset);
}
/* The photo sits inside the card, so the glass shows all around it. */
.cf-svcp-photo {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 64px;
  overflow: hidden;
  border-radius: calc(var(--svcp-radius) - var(--svcp-inset));
  background: rgba(4, 12, 32, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 6, 24, .25);
}
.cf-svcp-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.cf-svcp-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 88%;
  height: 88%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.cf-svcp-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.cf-svcp-icon .creadifity-service-badge {
  position: static;
  width: 48px;
  height: 48px;
  transform: none;
  translate: none;
  margin: 0;
}
.cf-svcp-icon .creadifity-service-badge svg { width: 24px; height: 24px; }
.cf-svcp-icon-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 6, 24, .35));
}
.cf-svcp-body {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px 8px 4px;
}
.cf-svcp-kicker {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a9d4ff;
  overflow-wrap: anywhere;
}
.cf-svcp-title {
  margin: 0;
  padding: 0;
  font-family: var(--svcp-head-font, inherit);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 10, 40, .35);
}
.cf-svcp-brand {
  display: block;
  font-size: clamp(19px, 8.5cqi, 28px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.cf-svcp-name {
  display: block;
  margin-top: 5px;
  font-family: var(--svcp-body-font, inherit);
  font-size: clamp(13px, 5.2cqi, 16px);
  font-weight: 500;
  line-height: 1.25;
  color: rgba(234, 242, 255, .84);
}
.cf-svcp-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cf-svcp-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  padding: 8px 13px 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(115deg, #1861f2, #308aff 58%, #68bfff);
  box-shadow: 0 6px 18px rgba(23, 109, 255, .35), inset 0 1px rgba(255, 255, 255, .38);
}
.cf-svcp-more svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .35s ease; }

/* Wide cards: photo on the left, text on the right. */
@container svcp (min-aspect-ratio: 7 / 5) {
  .cf-svcp-inner { flex-direction: row; align-items: stretch; }
  .cf-svcp-photo { flex: 0 0 50%; }
  .cf-svcp-body { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 12px 14px 12px 20px; gap: 6px; }
  .cf-svcp-brand { font-size: clamp(21px, 5.4cqi, 34px); }
  .cf-svcp-name { font-size: clamp(13px, 2.9cqi, 18px); }
}

/* ---------- Desktop: 12-column bento, intro top-left ---------- */
@media (min-width: 1100px) {
  .cf-svcp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(56px, auto); }
  .cf-svcp-intro { grid-column: 1 / span 7; grid-row: 1 / span 6; }
  .cf-svcp-service[data-svcp="s1"] { grid-column: 8 / span 2; grid-row: 1 / span 5; }
  .cf-svcp-service[data-svcp="s2"] { grid-column: 10 / span 3; grid-row: 1 / span 5; }
  .cf-svcp-service[data-svcp="s3"] { grid-column: 8 / span 5; grid-row: 6 / span 4; }
  .cf-svcp-service[data-svcp="s4"] { grid-column: 1 / span 3; grid-row: 7 / span 4; }
  .cf-svcp-service[data-svcp="s5"] { grid-column: 4 / span 4; grid-row: 7 / span 3; }
  .cf-svcp-service[data-svcp="s6"] { grid-column: 4 / span 3; grid-row: 10 / span 7; }
  .cf-svcp-service[data-svcp="s7"] { grid-column: 7 / span 6; grid-row: 10 / span 3; }
  .cf-svcp-service[data-svcp="s8"] { grid-column: 1 / span 3; grid-row: 11 / span 6; }
  .cf-svcp-service[data-svcp="s9"] { grid-column: 7 / span 6; grid-row: 13 / span 4; }
}

/* ---------- Phones and tablets: intro on top, then two staggered columns ----------
   Every card has its own height; both columns end level in each block. */
@media (max-width: 1099.98px) {
  /* 66 px on top keeps the intro clear of the site's floating EN/NL switch. */
  .cf-svcp { --svcp-gap: 12px; --svcp-radius: 26px; --svcp-inset: 8px; --k: 1; padding: 66px 16px 72px; }
  .cf-svcp-grid {
    max-width: 760px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows:
      auto
      calc(190px * var(--k))
      calc(250px * var(--k))
      calc(340px * var(--k) - 250px * var(--k) - var(--svcp-gap))
      calc(300px * var(--k))
      calc(270px * var(--k))
      calc(370px * var(--k) - 270px * var(--k) - var(--svcp-gap))
      calc(320px * var(--k));
    grid-template-areas:
      "intro intro"
      "s1 s1"
      "s2 s3"
      "s2 s5"
      "s4 s5"
      "s6 s7"
      "s6 s9"
      "s8 s9";
  }
  .cf-svcp-intro { grid-area: intro; }
  .cf-svcp-service[data-svcp="s1"] { grid-area: s1; }
  .cf-svcp-service[data-svcp="s2"] { grid-area: s2; }
  .cf-svcp-service[data-svcp="s3"] { grid-area: s3; }
  .cf-svcp-service[data-svcp="s4"] { grid-area: s4; }
  .cf-svcp-service[data-svcp="s5"] { grid-area: s5; }
  .cf-svcp-service[data-svcp="s6"] { grid-area: s6; }
  .cf-svcp-service[data-svcp="s7"] { grid-area: s7; }
  .cf-svcp-service[data-svcp="s8"] { grid-area: s8; }
  .cf-svcp-service[data-svcp="s9"] { grid-area: s9; }
  .cf-svcp-intro { padding: 30px 24px 32px; }
  .cf-svcp-icon, .cf-svcp-icon .creadifity-service-badge { width: 42px; height: 42px; }
  .cf-svcp-icon { top: 8px; left: 8px; }
  .cf-svcp-icon .creadifity-service-badge svg { width: 21px; height: 21px; }
  .cf-svcp-body { padding: 11px 6px 3px; }
  .cf-svcp-kicker { font-size: 9.5px; letter-spacing: .12em; }
  .cf-svcp-more { padding: 7px 11px 7px 13px; font-size: 12px; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .cf-svcp { --k: 1.2; padding: 44px 28px 88px; }
  .cf-svcp-intro { padding: 44px 44px 46px; }
}