/* UPYB homepage · global code block (do not delete this widget). Colours/fonts = kit 9 "UPYB" globals. Breakpoints: tablet ≤ 1024, mobile ≤ 767. */
/* aliases live on body: Elementor defines the kit vars on .elementor-kit-9 (= body), not on :root */
.elementor-kit-9{
  --upyb-navy:var(--e-global-color-upybnavy);--upyb-wit:var(--e-global-color-upybwit);--upyb-volt:var(--e-global-color-upybvolt);--upyb-volt-hover:var(--e-global-color-upybvolthover);
  --upyb-blauw:var(--e-global-color-upybblauw);--upyb-blauw-hover:var(--e-global-color-upybblauwhover);--upyb-blauw-diep:var(--e-global-color-upybblauwdiep);--upyb-blauw-diep-hover:var(--e-global-color-upybblauwdiephover);
  --upyb-tint:var(--e-global-color-upybtint);--upyb-lijn:var(--e-global-color-upyblijn);--upyb-lijn-veld:var(--e-global-color-upyblijnveld);--upyb-grijs:var(--e-global-color-upybgrijs);--upyb-grijs-donker:var(--e-global-color-upybgrijsopdonker);
  --upyb-lijn-donker:var(--e-global-color-upyblijndonker);--upyb-bg-soft:var(--e-global-color-upybbgsoft);
  --upyb-diepzee:linear-gradient(135deg,var(--upyb-navy) 0%,#001a44 35%,var(--upyb-blauw-diep) 75%,var(--upyb-blauw) 100%);
  --upyb-glas:linear-gradient(135deg,rgb(255 255 255/.22) 0%,rgb(255 255 255/.07) 40%,rgb(255 255 255/.03) 100%);
  --upyb-glas-rand:inset 0 1px 0 rgb(255 255 255/.45),inset 1px 0 0 rgb(255 255 255/.18);
  --upyb-kaart-schaduw:0 4px 5px rgb(0 2 31/.04),0 8px 15px rgb(0 2 31/.03),0 30px 50px rgb(0 2 31/.08);
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--dur-press:120ms;--dur-hover:200ms;--dur-move:350ms;
  --upyb-font-head:"Inter Tight",sans-serif;--upyb-font-text:"Switzer",sans-serif;--upyb-font-accent:"Instrument Serif",serif;
}
html,body{overflow-x:clip !important}
html{scroll-padding-top:96px;scroll-padding-bottom:96px}
.upyb a:focus-visible,.upyb button:focus-visible{outline:3px solid var(--upyb-blauw);outline-offset:2px;border-radius:999px}
.upyb-accent{font-family:var(--upyb-font-accent);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:0}
.upyb-ico{width:18px;height:18px;flex:none;display:block}
.upyb-btn__icon{display:inline-flex;transition:transform var(--dur-hover) var(--ease-out)}

/* ---------- Buttons (DS 11 Nov 2026) ---------- */
.upyb-btn{--h:52px;--inset:6px;position:relative;display:inline-flex;align-items:center;gap:16px;height:var(--h);padding:0 var(--inset) 0 28px;border-radius:999px;font-family:var(--upyb-font-text);font-weight:600;font-size:16px;line-height:20px;text-decoration:none !important;white-space:nowrap;transition:background-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}
.upyb-btn__label{transition:transform var(--dur-move) var(--ease-in-out)}
.upyb-btn__circle{width:calc(var(--h) - 2*var(--inset));height:calc(var(--h) - 2*var(--inset));border-radius:999px;display:grid;place-items:center;flex:none;transition:transform var(--dur-move) var(--ease-in-out)}
.upyb-btn:active{transform:scale(.97)}
.upyb-btn--signaal{background:var(--upyb-volt);color:var(--upyb-navy) !important}.upyb-btn--signaal .upyb-btn__circle{background:var(--upyb-navy);color:var(--upyb-volt)}
.upyb-btn--primair{background:var(--upyb-blauw-diep);color:var(--upyb-wit) !important}.upyb-btn--primair .upyb-btn__circle{background:var(--upyb-navy);color:var(--upyb-wit)}
.upyb-btn--blauw{background:var(--upyb-blauw);color:var(--upyb-wit) !important}.upyb-btn--blauw .upyb-btn__circle{background:var(--upyb-wit);color:var(--upyb-blauw)}
.upyb-btn--secundair-donker,.upyb-btn--secundair{gap:8px;padding:0 24px;border:1px solid rgb(255 255 255/.5);color:var(--upyb-wit) !important;background:transparent}
.upyb-btn--secundair{border-color:var(--upyb-lijn-veld);color:var(--upyb-navy) !important}
.upyb-btn--klein{--h:44px;--inset:4px;font-size:15px;padding-left:16px;padding-right:16px}
@media (hover:hover) and (pointer:fine){
  .upyb-btn--signaal:hover{background:var(--upyb-volt-hover)}.upyb-btn--primair:hover{background:var(--upyb-blauw-diep-hover)}.upyb-btn--blauw:hover{background:var(--upyb-blauw-hover)}
  :is(.upyb-btn--signaal,.upyb-btn--primair,.upyb-btn--blauw):hover .upyb-btn__circle{transform:translateX(calc(-1 * var(--upyb-label-w,0px) - 16px - 28px + var(--inset)))}
  :is(.upyb-btn--signaal,.upyb-btn--primair,.upyb-btn--blauw):hover .upyb-btn__label{transform:translateX(calc(var(--h) - 2*var(--inset) + 16px - 28px + var(--inset)))}
  .upyb-btn--secundair-donker:hover{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.8)}
  :is(.upyb-btn--secundair-donker,.upyb-btn--secundair):hover .upyb-btn__icon{transform:translateX(3px)}.upyb-btn--secundair:hover{background:var(--upyb-bg-soft)}
}
/* Hello theme resets buttons to #c36 on hover/focus: keep ours (skill step 3) */
.upyb .upyb-btn.upyb-btn:hover,.upyb .upyb-btn.upyb-btn:focus{text-decoration:none}

/* ---------- Eyebrow pill (DS Pill, dark) ---------- */
.upyb-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--upyb-lijn-donker);border-radius:999px;white-space:nowrap}
.upyb-eyebrow .elementor-heading-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--upyb-blauw);flex:none}

/* ---------- S01 hero ---------- */
/* Layout widths live here, not in per-element custom_css (Elementor does not output that for these elements). */
.upyb-header,.upyb-hero-inner{max-width:1200px;width:100%}.upyb-hero-text{max-width:600px}
.upyb-proof-wrap{width:100vw !important;max-width:none !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important}
.upyb-s01{background:var(--upyb-diepzee)}
.upyb-header{background:var(--upyb-glas);box-shadow:var(--upyb-glas-rand);border:1px solid rgb(255 255 255/.28);border-radius:999px;backdrop-filter:blur(16px)}
.upyb-logo .elementor-heading-title a{color:inherit}
.upyb-nav{display:flex;align-items:center;gap:40px}
.upyb-nav ul{display:flex;gap:40px;list-style:none;margin:0;padding:0}
.upyb-nav a{font-family:var(--upyb-font-text);font-size:14px;line-height:22px;color:var(--upyb-grijs-donker);text-decoration:none;transition:color var(--dur-hover) ease}
.upyb-nav a:hover{color:var(--upyb-wit)}
.upyb-burger{display:none;width:48px;height:48px;border:0;border-radius:999px;background:transparent !important;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.upyb-burger span{display:block;width:20px;height:2px;border-radius:1px;background:var(--upyb-wit);margin:0}
.upyb-hero-img img{display:block;width:100%;height:494px;object-fit:cover;border-radius:24px;box-shadow:0 24px 64px rgb(0 2 31/.45)}
.upyb-intro a,.upyb-intro .upyb-future{color:var(--upyb-wit);text-decoration:none}
.upyb-proof{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px 120px;background:var(--upyb-glas);border-top:1px solid rgb(255 255 255/.12)}
.upyb-proof__sep{width:1px;height:20px;background:rgb(255 255 255/.2)}
.upyb-gchip{display:inline-flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border-radius:999px;background:var(--upyb-glas);box-shadow:var(--upyb-glas-rand);border:1px solid rgb(255 255 255/.28);font-family:var(--upyb-font-text);font-size:14px;line-height:22px;color:var(--upyb-wit)}
.upyb-gchip__g{width:32px;height:32px;border-radius:50%;background:var(--upyb-wit);display:grid;place-items:center;flex:none}.upyb-gchip__g svg{width:20px;height:20px}
.upyb-stars{display:inline-flex;gap:4px}.upyb-stars svg{width:14px;height:14px;fill:var(--upyb-volt)}
.upyb-usp{font-family:var(--upyb-font-text);font-size:14px;line-height:22px;color:var(--upyb-grijs-donker)}.upyb-usp b{color:var(--upyb-wit);font-weight:600}
.upyb-textlink{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-family:var(--upyb-font-text);font-weight:600;font-size:15px;color:var(--upyb-wit) !important;text-decoration:none}
@media (max-width:1024px){
  .upyb-nav ul,.upyb-nav .upyb-btn{display:none}.upyb-burger{display:flex}
  .upyb-hero-img{width:calc(100% + 64px) !important;max-width:none !important;margin:0 -32px !important}.upyb-hero-img img{height:520px;border-radius:0;box-shadow:none}
  .upyb-hero-text{text-align:center}
}
@media (max-width:767px){.upyb-hero-img{width:calc(100% + 40px) !important;margin:0 -20px !important}.upyb-hero-img img{height:330px}}

/* ---------- S01b logo strip (marquee, ≥ 60 s, no pause on hover) ---------- */
.upyb-logos{position:relative;overflow:hidden}
.upyb-logos__track{display:flex;align-items:center;gap:64px;width:max-content;animation:upyb-marquee 60s linear infinite}
.upyb-logos__track img{height:var(--h,40px);width:auto;display:block;flex:none}
.upyb-logos::before,.upyb-logos::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:1;pointer-events:none}
.upyb-logos::before{left:0;background:linear-gradient(90deg,var(--upyb-wit),transparent)}.upyb-logos::after{right:0;background:linear-gradient(-90deg,var(--upyb-wit),transparent)}
@keyframes upyb-marquee{to{transform:translateX(-50%)}}
@media (max-width:1024px){.upyb-logos__track{gap:48px}.upyb-logos__track img{height:calc(var(--h,40px) * .82)}}

/* ---------- Motion: section entrance (GSAP adds .upyb-reveal-ready; see motion.js) ---------- */
.upyb-reveal-ready [data-upyb-reveal],.upyb-reveal-ready .upyb-reveal{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  .upyb-logos__track{animation:none}
  .upyb-btn,.upyb-btn__label,.upyb-btn__circle{transition:background-color 200ms ease !important;transform:none !important}
  .upyb-reveal-ready [data-upyb-reveal],.upyb-reveal-ready .upyb-reveal{opacity:1;transform:none}
}

/* hero buttons / intro (was inline in the homepage build) */
.upyb-hero-btns{display:flex;gap:12px;align-items:center;padding-top:8px}.upyb-only-tm{display:none !important}
.upyb-intro .elementor-widget-container p{margin:0}.upyb-gchip--plain{background:none;box-shadow:none;border:0;padding-left:0}
@media (max-width:1024px){.upyb-hero-btns{flex-direction:column;gap:4px}.upyb-only-d{display:none !important}.upyb-only-tm{display:inline-flex !important}.upyb-intro-rest{display:none}}

/* ---------- Global header (phase 5, Noah 11 Nov: sticky, solid on scroll; every page starts with a dark hero) ---------- */
.upyb.e-con.upyb-hdr{position:fixed !important;left:0;right:0;top:var(--wp-admin--admin-bar--height,0px);transition:top .32s cubic-bezier(.23,1,.32,1);z-index:900;background:transparent !important;pointer-events:none}
.upyb-hdr .upyb-header{pointer-events:auto;transition:background-color .3s cubic-bezier(.23,1,.32,1),box-shadow .3s cubic-bezier(.23,1,.32,1)}
html.upyb-gescrold .upyb-hdr .upyb-header{background:rgb(0 2 31/.92);box-shadow:0 10px 30px rgb(0 2 31/.35)}
/* the hero no longer holds the header: same content position as before (header top + height) */
.upyb.e-con.upyb-s01{padding-top:86px !important}
body.admin-bar .upyb-s01{margin-top:0 !important}
@media (max-width:1024px){.upyb.e-con.upyb-s01{padding-top:82px !important}}
@media (prefers-reduced-motion:reduce){.upyb-hdr .upyb-header{transition:none}}

/* header below the top bar (40 px) until you scroll; then bar and header slide up together (motion.js toggles upyb-gescrold) */
html.upyb-balk-aan:not(.upyb-gescrold) .upyb.e-con.upyb-hdr{top:calc(var(--wp-admin--admin-bar--height,0px) + 40px)}

/* theme/plugin styles load on header-footer pages: keep the nav spacing of the design (was overridden to 2px) */
.upyb .upyb-nav{gap:40px !important}
@media (max-width:1024px){.upyb .upyb-nav{gap:8px !important}}

/* mobile menu: the glass blur would trap the full-screen menu inside the capsule; switch it off while the menu is open */
.upyb-header:has(.upyb-nav.is-open){backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* ---------- shared (S02–S11) ---------- */
.upyb-full{width:100%}.upyb-w1200{max-width:1200px;width:100%}.upyb-w760{max-width:760px}.upyb-w700{max-width:700px}.upyb-w648{max-width:648px}.upyb-w620{max-width:620px}.upyb-w600{max-width:600px}.upyb-w536{max-width:536px}.upyb-w512{max-width:512px}.upyb-w456{max-width:456px}.upyb-w800{max-width:800px;width:100%}.upyb-w960{max-width:960px}
.upyb .e-con-inner,.upyb.e-con{--container-max-width:1200px}
.upyb-full>.elementor-widget-container,.upyb-full{width:100%}
.upyb .elementor-widget-text-editor p{margin:0}
.upyb-bg-diepzee{background:var(--upyb-diepzee) !important}.upyb-bg-ijs{background:linear-gradient(135deg,#fff 0%,#f2f9fd 45%,#cdebf8 80%,#9bd8f1 100%)}
.upyb ul{list-style:none;margin:0;padding:0}
.upyb h3{margin:0}
.upyb-future{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.upyb-inline{color:var(--upyb-blauw-diep) !important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.upyb-dark .upyb-accent,.upyb-accent-tint .upyb-accent{color:var(--upyb-tint)}
.upyb-pill{display:inline-flex;align-items:center;align-self:flex-start;padding:4px 10px;border-radius:999px;font-family:var(--upyb-font-text);font-weight:600;font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase}
.upyb-pill--grijs{background:var(--e-global-color-upybbgmuted);color:var(--upyb-grijs)}.upyb-pill--donker{background:rgb(255 255 255/.12);color:var(--upyb-tint)}.upyb-pill--tint{background:var(--upyb-tint);color:var(--upyb-navy);letter-spacing:0;text-transform:none;font-size:12px}
.upyb-stars{display:inline-flex;gap:4px}.upyb-stars svg{width:16px;height:16px;fill:var(--upyb-volt)}
.upyb-tick{width:20px;height:20px;border-radius:50%;background:var(--upyb-tint);color:var(--upyb-blauw-diep);display:inline-grid;place-items:center;flex:none}.upyb-tick svg{width:12px;height:12px}
.upyb-tick--blauw{background:var(--upyb-blauw);color:var(--upyb-wit);width:24px;height:24px}
.upyb-round{width:32px;height:32px;border-radius:50%;background:var(--upyb-blauw);color:var(--upyb-wit);display:grid;place-items:center;flex:none;transition:transform var(--dur-hover) var(--ease-out)}.upyb-round svg{width:16px;height:16px}
.upyb-dots{display:none;gap:6px;margin-top:20px}.upyb-dots span{width:6px;height:6px;border-radius:3px;background:rgb(0 2 31/.2)}.upyb-dots span:first-child{width:20px;background:var(--upyb-blauw-diep)}
.upyb-dark .upyb-dots span{background:rgb(255 255 255/.35)}.upyb-dark .upyb-dots span:first-child{background:var(--upyb-wit)}
.upyb h3,.upyb .upyb-h3kop{font-family:var(--upyb-font-head)}

/* ---------- S02 ---------- */
.upyb-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.upyb-split>div{border-radius:28px;padding:48px}
.upyb-split__nu{background:var(--upyb-bg-soft)}.upyb-split__met{background:var(--upyb-diepzee);color:var(--upyb-wit)}
.upyb-h3kop{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.015em;margin:0 0 24px !important}
.upyb-split__nu .upyb-h3kop{color:var(--upyb-grijs)}.upyb-split__met .upyb-h3kop{color:var(--upyb-wit)}
.upyb-split li,.upyb-sit li{display:flex;gap:16px;align-items:flex-start;padding:28px 0;border-bottom:1px solid var(--upyb-lijn);font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs)}
.upyb-split__met li{border-color:rgb(255 255 255/.14);color:var(--upyb-wit)}.upyb-split li:last-child{border-bottom:0;padding-bottom:0}
.upyb-li-ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}.upyb-li-ico svg{width:16px;height:16px}
.upyb-li-ico--nu{background:var(--e-global-color-upybbgmuted);color:var(--upyb-grijs)}.upyb-li-ico--ok{background:var(--upyb-blauw);color:var(--upyb-wit)}
.upyb-li-txt{padding-top:3px}
.upyb-split__met .upyb-future,.upyb-sit__met .upyb-future{color:var(--upyb-tint)}
.upyb-sit{display:flex;flex-direction:column;gap:28px}
.upyb-sit__kop{font-size:18px;line-height:24px;font-weight:600;color:var(--upyb-navy);margin:0 0 12px !important}
.upyb-sit__card{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden}
.upyb-sit__nu{background:var(--upyb-bg-soft);padding:20px;display:flex;flex-direction:column;gap:12px}.upyb-sit__met{background:var(--upyb-diepzee);padding:20px;display:flex;flex-direction:column;gap:12px}
.upyb-sit li{padding:0;border:0;font-size:15px;line-height:24px}.upyb-sit__met li{color:var(--upyb-wit)}
@media (max-width:767px){.upyb-sit__card{grid-template-columns:1fr}}

/* ---------- S03 ---------- */
.upyb-cases{display:grid;grid-template-columns:736px 1fr;grid-template-rows:auto auto;gap:32px}
.upyb-case{display:flex;flex-direction:column;gap:20px}.upyb-case--big{grid-row:1/3}
.upyb-case__visual{position:relative;border-radius:28px;overflow:hidden;height:340px}.upyb-case--big .upyb-case__visual{height:806px}
.upyb-case__img{width:100%;height:100%;object-fit:cover;display:block}
.upyb-tags{display:flex;flex-wrap:wrap;gap:8px}
.upyb-tags li{padding:4px 12px;border-radius:999px;font-family:var(--upyb-font-text);font-size:14px;line-height:22px}
.upyb-tags--on{position:absolute;left:20px;right:20px;bottom:20px}.upyb-tags--on li{background:rgb(255 255 255/.55);border:1px solid rgb(255 255 255/.7);backdrop-filter:blur(12px);color:var(--upyb-navy)}
.upyb-tags--under{display:none}.upyb-tags--under li{background:var(--upyb-wit);border:1px solid var(--upyb-lijn);color:var(--upyb-grijs);font-size:12px;line-height:18px;padding:5px 10px}
.upyb-case__text{display:flex;flex-direction:column;gap:16px}
.upyb-case__name{display:inline-flex;align-items:center;gap:12px;text-decoration:none !important;align-self:flex-start;min-height:44px}
.upyb-case__name h3{font-size:20px;line-height:28px;font-weight:600;color:var(--upyb-navy);font-family:var(--upyb-font-text)}
.upyb-case p{margin:0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs)}
@media (hover:hover) and (pointer:fine){.upyb-case__name:hover .upyb-round{transform:translate(2px,-2px)}.upyb-case__visual img{transition:transform .6s var(--ease-out)}.upyb-case:hover .upyb-case__visual img{transform:scale(1.02)}}

/* ---------- S04 ---------- */
.upyb-score{display:inline-flex;flex-direction:column;gap:24px;padding:40px;background:var(--upyb-wit);border-radius:28px}
.upyb-score__row{display:flex;align-items:center;gap:8px}.upyb-score__g{width:64px;height:64px;border-radius:50%;background:var(--upyb-bg-soft);display:grid;place-items:center;margin-right:12px}.upyb-score__g svg{width:34px;height:34px}
.upyb-score__num{font-family:var(--upyb-font-head);font-weight:600;font-size:70px;line-height:72px;letter-spacing:-.02em;color:var(--upyb-navy)}.upyb-score__of{font-family:var(--upyb-font-head);font-weight:700;font-size:22px;color:var(--upyb-grijs);align-self:flex-end;padding-bottom:10px}
.upyb-score__stars{display:none}
.upyb-score__link{display:inline-flex;align-items:center;gap:8px;padding-top:24px;border-top:1px solid var(--upyb-lijn);font-family:var(--upyb-font-text);font-weight:600;font-size:16px;color:var(--upyb-blauw-diep) !important;text-decoration:none !important}.upyb-score__link svg{width:18px;height:18px}
.upyb-reviews-wrap{width:624px;flex:none}
.upyb-loop{display:grid;grid-template-columns:1fr 1fr;gap:32px;height:600px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.upyb-loop__track{display:flex;flex-direction:column;gap:32px;animation:upyb-up 50s linear infinite}.upyb-loop__col:nth-child(2) .upyb-loop__track{animation-direction:reverse;padding-top:96px}
@keyframes upyb-up{to{transform:translateY(-50%)}}
.upyb-review{margin:0;display:flex;flex-direction:column;gap:16px;padding:32px;border-radius:28px;background:var(--upyb-glas);box-shadow:var(--upyb-glas-rand);border:1px solid rgb(255 255 255/.18);color:var(--upyb-wit)}
.upyb-review__top{display:flex;justify-content:space-between;align-items:center}.upyb-review__g{width:28px;height:28px;border-radius:50%;background:var(--upyb-wit);display:grid;place-items:center}.upyb-review__g svg{width:16px;height:16px}
.upyb-review__q{margin:0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-wit);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;border:0;padding:0;font-style:normal}
.upyb-review.is-open .upyb-review__q{-webkit-line-clamp:unset}
.upyb-more{align-self:flex-start;background:none !important;border:0;padding:12px 0;margin:-12px 0;color:var(--upyb-tint) !important;font-family:var(--upyb-font-text);font-size:14px;text-decoration:underline;cursor:pointer}
.upyb-review figcaption{padding-top:16px;border-top:1px solid rgb(255 255 255/.16);font-family:var(--upyb-font-text);font-size:14px;line-height:22px}
.upyb-revcar{display:none}

/* ---------- S05 ---------- */
.upyb-steps__line{position:relative;height:2px;background:var(--upyb-lijn);margin:15px 0 32px}.upyb-steps__fill{position:absolute;left:0;top:0;height:2px;width:63%;background:var(--upyb-blauw);transform-origin:left}
.upyb-steps__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.upyb-step{position:relative;display:flex;flex-direction:column}
.upyb-step__num{position:absolute;top:-64px;left:28px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--upyb-wit);border:1.5px solid var(--upyb-blauw);color:var(--upyb-blauw-diep);font-family:var(--upyb-font-head);font-weight:600;font-size:14px}
.upyb-step:nth-child(4) .upyb-step__num{border-color:var(--upyb-lijn);color:var(--upyb-grijs)}.upyb-step--doel .upyb-step__num{background:var(--upyb-blauw);border-color:var(--upyb-blauw);color:var(--upyb-wit)}
.upyb-step__card{flex:1;display:flex;flex-direction:column;gap:20px;padding:32px 28px;border-radius:28px;background:var(--upyb-wit);border:1px solid var(--upyb-lijn);transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.upyb-step--doel .upyb-step__card{background:var(--upyb-diepzee);border-color:transparent}
.upyb-outcome{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 12px 4px 10px;border-radius:999px;background:var(--upyb-tint);color:var(--upyb-blauw-diep);font-family:var(--upyb-font-text);font-size:14px;line-height:22px}.upyb-outcome .upyb-ico{width:14px;height:14px}
.upyb-step--doel .upyb-outcome{background:var(--upyb-volt);color:var(--upyb-navy)}
.upyb-step h3{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.015em;color:var(--upyb-navy);margin:4px 0 -12px !important}.upyb-step--doel h3{color:var(--upyb-wit)}
.upyb-step__regel{margin:0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs)}.upyb-step--doel .upyb-step__regel{color:var(--upyb-grijs-donker)}
.upyb-step hr{border:0;border-top:1px solid var(--upyb-lijn);margin:0}.upyb-step--doel hr{border-color:rgb(255 255 255/.2)}
.upyb-price{display:flex;align-items:baseline;gap:8px;margin:0;font-family:var(--upyb-font-text);font-size:13px;color:var(--upyb-grijs)}.upyb-price b{font-weight:500;font-size:28px;line-height:34px;letter-spacing:-.02em;color:var(--upyb-navy)}
.upyb-step--doel .upyb-price{color:var(--upyb-grijs-donker)}.upyb-step--doel .upyb-price b{color:var(--upyb-wit)}
.upyb-step ul{display:flex;flex-direction:column;gap:12px;flex:1}.upyb-step li{display:flex;gap:12px;align-items:center;font-family:var(--upyb-font-text);font-size:14px;line-height:22px;color:var(--upyb-navy)}
.upyb-step--doel li{color:var(--upyb-wit)}.upyb-step--doel .upyb-tick{background:var(--upyb-blauw);color:var(--upyb-wit)}
.upyb-step__more{display:flex;align-items:center;gap:8px;min-height:48px;padding-top:20px;border-top:1px solid var(--upyb-lijn);font-family:var(--upyb-font-head);font-weight:600;font-size:16px;color:var(--upyb-blauw-diep) !important;text-decoration:none !important}
.upyb-step--doel .upyb-step__more{border-color:rgb(255 255 255/.2);color:var(--upyb-tint) !important}
@media (hover:hover) and (pointer:fine){.upyb-step__card:hover{transform:translateY(-2px);box-shadow:var(--upyb-kaart-schaduw)}.upyb-step__more .upyb-ico{transition:transform var(--dur-hover) var(--ease-out)}.upyb-step__more:hover .upyb-ico{transform:translateX(3px)}}
.upyb-groei{display:flex;align-items:center;justify-content:space-between;gap:48px;padding:32px 40px;border-radius:28px;background:var(--upyb-wit);border:1px solid var(--upyb-lijn)}
.upyb-groei h3{font-family:var(--upyb-font-text);font-size:20px;line-height:28px;font-weight:600;color:var(--upyb-navy)}.upyb-groei p{margin:4px 0 0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs)}

/* ---------- S07 ---------- */
.upyb-bento{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.upyb-makers{position:relative;border-radius:28px;overflow:hidden;min-height:638px;display:flex;align-items:flex-end;padding:32px;isolation:isolate}
.upyb-makers__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;z-index:-2}
.upyb-makers::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(0 2 31/0) 42%,rgb(0 2 31/.82) 66%,rgb(0 2 31/.96) 100%)}
.upyb-makers__txt{display:flex;flex-direction:column;gap:12px;max-width:500px;color:var(--upyb-wit)}
.upyb-makers h3{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.015em;color:var(--upyb-wit)}.upyb-makers p{margin:0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs-donker)}
.upyb-makers hr{border:0;border-top:1px solid rgb(255 255 255/.14);margin:12px 0}
.upyb-makers__bel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--upyb-font-text);font-weight:600;font-size:16px;color:var(--upyb-tint) !important;text-decoration:none !important}
.upyb-why{display:flex;flex-direction:column;gap:24px}
.upyb-why__card{padding:32px;border-radius:28px;background:var(--upyb-wit);border:1px solid var(--upyb-lijn);display:flex;flex-direction:column;gap:16px}
.upyb-why__card h3{display:flex;align-items:center;gap:12px;font-family:var(--upyb-font-text);font-size:20px;line-height:28px;font-weight:600;color:var(--upyb-navy)}.upyb-why__card h3 .upyb-ico{width:24px;height:24px;color:var(--upyb-blauw-diep)}
.upyb-why__card p{margin:0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs)}

/* ---------- S08 ---------- */
.upyb-s08{display:grid !important;grid-template-columns:520px 560px;justify-content:space-between;grid-template-areas:"kop form" "vs form";column-gap:64px;row-gap:24px;align-items:start}
.upyb-s08>.upyb-s08__kop{grid-area:kop;max-width:520px}.upyb-s08>.upyb-s08__form{grid-area:form}.upyb-s08>.upyb-s08__vs{grid-area:vs}
.upyb-vs{border-radius:20px;overflow:hidden;background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.14);color:var(--upyb-wit);font-family:var(--upyb-font-text)}
.upyb-vs__head,.upyb-vs__row,.upyb-vs__total{display:flex;align-items:flex-start;gap:16px;padding:16px 24px;border-bottom:1px solid rgb(255 255 255/.1)}
.upyb-vs__head{background:rgb(255 255 255/.06);justify-content:space-between;align-items:center;font-size:14px}.upyb-vs__head span{font-size:13px;color:var(--upyb-grijs-donker)}
.upyb-vs__row>div{flex:1;display:flex;flex-direction:column;gap:2px}.upyb-vs__row b{font-weight:400;font-size:16px;line-height:26px}.upyb-vs__row small{font-size:13px;line-height:20px;color:var(--upyb-grijs-donker)}
.upyb-vs__val{font-size:16px;line-height:26px;white-space:nowrap;text-align:right;display:flex;flex-direction:column;align-items:flex-end}.upyb-vs__val--muted{color:var(--upyb-grijs-donker)}.upyb-vs__val s{font-size:13px;color:var(--upyb-grijs-donker)}.upyb-vs__val b{font-weight:600}
.upyb-vs__row--gift{background:rgb(255 255 255/.04)}.upyb-vs__row--gift .upyb-pill{margin-bottom:6px}
.upyb-vs__total{border-bottom:0;background:rgb(255 255 255/.08);justify-content:space-between;align-items:center;font-size:16px;color:var(--upyb-grijs-donker)}
.upyb-vs__total b{font-family:var(--upyb-font-head);font-size:22px;line-height:28px;font-weight:700;color:var(--upyb-wit)}.upyb-vs__total em{font-style:normal;color:var(--upyb-volt)}
.upyb-form{display:flex;flex-direction:column;gap:24px;padding:32px;border-radius:28px;background:var(--upyb-wit);color:var(--upyb-navy);font-family:var(--upyb-font-text);min-height:727px}
.upyb-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--upyb-bg-soft)}
.upyb-toggle label{cursor:pointer}.upyb-toggle input{position:absolute;opacity:0;pointer-events:none}
.upyb-toggle span{display:grid;place-items:center;height:44px;border-radius:999px;font-size:14px;color:var(--upyb-grijs);transition:background-color var(--dur-hover) ease}
.upyb-toggle input:checked+span{background:var(--upyb-wit);color:var(--upyb-navy);font-weight:600;box-shadow:0 1px 3px rgb(0 2 31/.08)}
.upyb-toggle input:focus-visible+span{outline:3px solid var(--upyb-blauw);outline-offset:2px}
.upyb-progress__label{margin:0 0 8px;font-weight:600;font-size:12px;line-height:16px;letter-spacing:.12em;color:var(--upyb-blauw-diep)}
.upyb-progress__bar{height:4px;border-radius:2px;background:var(--upyb-lijn);overflow:hidden}.upyb-progress__bar span{display:block;height:100%;width:100%;background:var(--upyb-blauw-diep);transform:scaleX(.1667);transform-origin:left;transition:transform 250ms var(--ease-out)}
.upyb-step-q{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;min-width:0}.upyb-step-q[hidden]{display:none}
.upyb-step-q.is-in{animation:upyb-stepin 200ms var(--ease-out)}@keyframes upyb-stepin{from{opacity:0;transform:translateX(8px)}}
.upyb-q{padding:0;font-family:var(--upyb-font-head);font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.015em;color:var(--upyb-navy);margin-bottom:8px}
.upyb-choices{display:flex;flex-direction:column;gap:12px}
.upyb-choice{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;border:1px solid var(--upyb-lijn-veld);border-radius:12px;cursor:pointer;font-size:16px;transition:border-color var(--dur-hover) ease,background-color var(--dur-hover) ease}
.upyb-choice input{appearance:none;width:20px;height:20px;border:1.5px solid var(--upyb-lijn-veld);border-radius:50%;margin:0;flex:none;display:grid;place-items:center}.upyb-choice input:checked{border-color:var(--upyb-blauw-diep)}.upyb-choice input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--upyb-blauw-diep)}
.upyb-choice:has(input:checked){border-color:var(--upyb-blauw-diep);background:var(--upyb-tint)}
@media (hover:hover) and (pointer:fine){.upyb-choice:hover{border-color:var(--upyb-blauw-diep)}}
.upyb-help{margin:0;font-size:13px;line-height:20px;color:var(--upyb-grijs)}
.upyb-field{display:flex;flex-direction:column;gap:8px}.upyb-field__label{font-weight:600;font-size:16px}
.upyb-field input{height:52px;padding:0 16px;border:1px solid var(--upyb-lijn-veld) !important;border-radius:12px !important;font:400 16px/24px var(--upyb-font-text);color:var(--upyb-navy);background:var(--upyb-wit)}
.upyb-field input::placeholder{color:var(--e-global-color-upybplaceholder)}.upyb-field input:focus{outline:3px solid var(--upyb-blauw);outline-offset:1px;border-color:var(--upyb-blauw-diep) !important}
.upyb-field small{font-size:13px;line-height:20px;color:var(--upyb-grijs)}.upyb-field__err{min-height:20px;font-size:13px;line-height:20px;color:var(--e-global-color-upybfout)}
.upyb-field.is-error input{border-color:var(--e-global-color-upybfout) !important}
.upyb-form__nav{display:flex;align-items:center;gap:24px;margin-top:8px}
.upyb-prev{display:inline-flex;align-items:center;min-height:48px;background:none !important;border:0;padding:0;color:var(--upyb-grijs) !important;font:600 16px/20px var(--upyb-font-text);cursor:pointer}
.upyb-form button.upyb-btn{border:0;cursor:pointer}
.upyb-form__foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--upyb-lijn);display:flex;flex-direction:column;gap:12px}
.upyb-person{display:flex;align-items:center;gap:12px}.upyb-person img{width:40px;height:40px;border-radius:50%;object-fit:cover}.upyb-person b{display:block;font-weight:600;font-size:14px}.upyb-person small{font-size:13px;color:var(--upyb-grijs)}
.upyb-privacy{margin:0;font-size:13px;line-height:20px;color:var(--upyb-grijs)}.upyb-privacy a{color:var(--upyb-blauw-diep);text-decoration:underline}
.upyb-hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.upyb-form__done{display:flex;flex-direction:column;gap:16px}.upyb-form__done[hidden]{display:none}.upyb-done__ico{width:48px;height:48px;border-radius:50%;background:var(--e-global-color-upybsucces);color:var(--upyb-wit);display:grid;place-items:center}
.upyb-form__done h3{font-size:22px;line-height:28px;font-weight:700;color:var(--upyb-navy)}.upyb-form__done p{margin:0;font-size:16px;line-height:26px;color:var(--upyb-grijs)}
.upyb-form.is-done .upyb-toggle,.upyb-form.is-done .upyb-progress{display:none}

/* ---------- S09 ---------- */
.upyb-skyline img{display:block;width:100%;height:520px;object-fit:cover;object-position:50% 0;border-radius:28px}
.upyb-area{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.upyb-area__col{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--upyb-lijn)}
.upyb-area h3{font-family:var(--upyb-font-text);font-size:20px;line-height:28px;font-weight:600;color:var(--upyb-navy)}.upyb-area p{margin:0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs)}
.upyb-chips{display:flex;flex-wrap:wrap;gap:8px}.upyb-chips li{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--upyb-wit);border:1px solid var(--upyb-lijn);font-family:var(--upyb-font-text);font-weight:600;font-size:14px;line-height:22px;color:var(--upyb-navy)}.upyb-chips .upyb-ico{width:16px;height:16px;color:var(--upyb-blauw-diep)}

/* ---------- S10 ---------- */
.upyb-faq{display:flex;flex-direction:column}
.upyb-faq__item{border-bottom:1px solid var(--upyb-lijn)}
.upyb-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--upyb-font-text);font-weight:600;font-size:20px;line-height:28px;color:var(--upyb-navy)}
.upyb-faq__item summary::-webkit-details-marker{display:none}
.upyb-faq__plus{width:32px;height:32px;border-radius:50%;border:1px solid var(--upyb-lijn-veld);color:var(--upyb-blauw-diep);display:grid;place-items:center;flex:none;transition:transform 250ms var(--ease-out)}.upyb-faq__plus svg{width:16px;height:16px}
.upyb-faq__item[open] .upyb-faq__plus{transform:rotate(45deg)}
.upyb-faq__a p{margin:0;padding:0 48px 24px 0;font-family:var(--upyb-font-text);font-size:16px;line-height:26px;color:var(--upyb-grijs)}
.upyb-jesse{display:inline-flex;align-items:center;gap:14px;padding:8px;border-radius:999px;background:var(--upyb-wit);border:1px solid var(--upyb-lijn);box-shadow:0 4px 16px rgb(0 2 31/.06);text-decoration:none !important;font-family:var(--upyb-font-text)}
.upyb-jesse img{width:48px;height:48px;border-radius:50%;object-fit:cover}.upyb-jesse span{display:flex;flex-direction:column}.upyb-jesse small{font-size:14px;line-height:22px;color:var(--upyb-grijs)}.upyb-jesse b{font-weight:600;font-size:16px;line-height:20px;color:var(--upyb-navy)}
.upyb-jesse__btn{width:44px;height:44px;border-radius:50%;background:var(--upyb-blauw);color:var(--upyb-wit);display:grid !important;place-items:center;margin-left:6px}.upyb-jesse__btn svg{width:18px;height:18px}

/* ---------- S11 ---------- */
.upyb-s11{position:relative;overflow:hidden}
.upyb-s11__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.upyb-glassbtn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px 0 22px;border-radius:999px;background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.22);backdrop-filter:blur(16px);color:var(--upyb-wit) !important;font:600 16px/20px var(--upyb-font-text);text-decoration:none !important;transition:background-color var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){.upyb-glassbtn:hover{background:rgb(255 255 255/.14)}}
.upyb-gline{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;font-family:var(--upyb-font-text);font-size:14px;color:var(--upyb-grijs-donker)}.upyb-gline b{color:var(--upyb-wit);font-weight:600;font-size:16px}
.upyb-gline__g{width:28px;height:28px;border-radius:50%;background:var(--upyb-wit);display:grid;place-items:center}.upyb-gline__g svg{width:16px;height:16px}
.upyb-iphone-wrap{position:absolute !important;right:30px;bottom:-170px;width:306px !important;transform:rotate(-10deg);pointer-events:none}
.upyb-iphone{padding:3px;border-radius:58px;background:linear-gradient(135deg,#9ea1a8,#5a5c63 50%,#949699);box-shadow:0 30px 60px rgb(0 0 10/.5)}
.upyb-iphone__bezel{padding:12px;border-radius:55px;background:#050508}
.upyb-iphone__screen{position:relative;border-radius:44px;overflow:hidden;background:#0f0f0f;aspect-ratio:276/598}
.upyb-iphone__screen img{position:absolute;top:40px;left:0;width:100%;height:auto}
.upyb-iphone__status{position:absolute;inset:0 0 auto;height:40px;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#0f0f0f;color:#fff;font:600 13px/1 var(--upyb-font-text)}.upyb-iphone__status i{width:22px;height:11px;border-radius:3px;background:#fff}
.upyb-iphone__island{position:absolute;top:10px;left:50%;width:84px;height:25px;margin-left:-42px;border-radius:13px;background:#000;z-index:2}

/* ---------- Sticky CTA (tablet/mobile) ---------- */
.upyb-sticky-wrap{position:fixed !important;left:0;right:0;bottom:24px;z-index:200;display:flex;justify-content:center;pointer-events:none;padding:0 !important;transition:opacity var(--dur-hover) ease,transform var(--dur-hover) var(--ease-out)}
.upyb-sticky-wrap.is-hidden{opacity:0;transform:translateY(12px)}
.upyb-sticky{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:14px 16px 14px 22px;border-radius:999px;background:rgb(0 2 31/.55);border:1px solid rgb(255 255 255/.25);backdrop-filter:blur(20px);box-shadow:0 8px 24px rgb(0 0 13/.25);color:var(--upyb-wit) !important;font:600 15px/20px var(--upyb-font-text);text-decoration:none !important}
.upyb-sticky__dot{width:28px;height:28px;border-radius:50%;background:var(--upyb-volt);color:var(--upyb-navy);display:grid;place-items:center}.upyb-sticky__dot .upyb-ico{width:16px;height:16px}

/* ---------- Tablet ≤ 1024 ---------- */
@media (max-width:1024px){
  .upyb-dots{display:flex}
  .upyb-cases,.upyb-steps__cards,.upyb-why,.upyb-revcar,.upyb-area{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -32px;padding:0 32px;scroll-padding-left:32px}
  .upyb-cases::-webkit-scrollbar,.upyb-steps__cards::-webkit-scrollbar,.upyb-why::-webkit-scrollbar,.upyb-revcar::-webkit-scrollbar{display:none}
  .upyb-case,.upyb-why__card,.upyb-review{flex:0 0 360px;scroll-snap-align:start}
  .upyb-case__visual,.upyb-case--big .upyb-case__visual{height:360px}
  .upyb-tags--on{display:none}.upyb-tags--under{display:flex}
  .upyb-case__text{gap:8px}
  .upyb-reviews-wrap{width:100%}.upyb-loop{display:none}.upyb-revcar{display:flex;align-items:stretch}
  .upyb-review__q{-webkit-line-clamp:5}
  .upyb-score{display:flex;flex-direction:column;gap:8px;padding:0;background:none}.upyb-score__g{display:none}.upyb-score__row{gap:12px}
  .upyb-score__num{font-size:28px;line-height:34px;color:var(--upyb-wit)}.upyb-score__of{display:none}.upyb-score__stars{display:inline-flex}
  .upyb-score__link{padding-top:0;border:0;font-weight:400;font-size:14px;color:var(--upyb-grijs-donker) !important;text-decoration:underline !important}
  .upyb-steps__line{display:none}.upyb-steps__cards{display:grid;grid-template-columns:1fr 1fr;gap:56px 24px;overflow:visible;margin:24px 0 0;padding:0}
  .upyb-step__num{top:-44px;left:0}
  .upyb-groei{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 0 0;background:none;border:0;border-top:1px solid var(--upyb-lijn);border-radius:0}
  .upyb-bento{grid-template-columns:1fr}.upyb-makers{min-height:440px}.upyb-makers__img{object-position:50% 30%}
  .upyb-why{flex-direction:row}
  .upyb-s08{grid-template-columns:1fr;grid-template-areas:"kop" "form" "vs";justify-items:center}.upyb-s08>*{width:100%;max-width:600px !important}
  .upyb-skyline img{height:360px;border-radius:20px}
  .upyb-area{overflow:visible;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .upyb-area__col{padding:24px;border:1px solid var(--upyb-lijn);border-radius:20px;background:var(--upyb-wit)}
  .upyb-s09 .upyb-dots,.upyb-area+.upyb-dots{display:none}
  .upyb-faq__item summary{font-size:18px}
  .upyb-iphone-wrap{right:auto;left:50%;margin-left:-125px;width:250px !important;bottom:-260px;transform:rotate(-6deg)}
}
/* ---------- Mobile ≤ 767 ---------- */
@media (max-width:767px){
  .upyb-cases,.upyb-steps__cards,.upyb-why,.upyb-revcar,.upyb-area{margin:0 -20px;padding:0 20px;scroll-padding-left:20px}
  .upyb-case,.upyb-why__card,.upyb-review{flex:0 0 300px}
  .upyb-case__visual,.upyb-case--big .upyb-case__visual{height:375px}
  .upyb-steps__cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:44px;margin-top:0}
  .upyb-step{flex:0 0 300px;scroll-snap-align:start}
  .upyb-makers{min-height:520px;padding:24px}
  .upyb-area{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}.upyb-area__col{flex:0 0 300px;scroll-snap-align:start}.upyb-area+.upyb-dots{display:flex}
  .upyb-skyline img{height:260px}
  .upyb-split li{padding:20px 0}
  .upyb-faq__item summary{font-size:15px;line-height:24px}
  .upyb-faq__a p{padding-right:0;font-size:15px;line-height:24px}
  .upyb-form{padding:24px 20px;min-height:0}.upyb-form button.upyb-btn{max-width:100%}
  .upyb-vs__head,.upyb-vs__row,.upyb-vs__total{padding:14px 16px}
  .upyb-s11__btns{flex-direction:column;align-items:center;gap:12px}
  .upyb-iphone-wrap{bottom:-300px;margin-left:-123px;width:246px !important}
}
@media (prefers-reduced-motion:reduce){.upyb-loop__track{animation:none}.upyb-step-q.is-in{animation:none}.upyb-case__visual img,.upyb-step__card,.upyb-round{transition:none !important}}

/* ---------- Mobile menu (burger open) ---------- */
@media (max-width:1024px){
  .upyb-nav.is-open ul{display:flex;position:fixed;inset:0;z-index:150;flex-direction:column;gap:0;padding:120px 32px 32px;background:var(--upyb-diepzee)}
  .upyb-nav.is-open ul a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid rgb(255 255 255/.12);font-size:18px;color:var(--upyb-wit)}
  .upyb-nav.is-open .upyb-burger{position:relative;z-index:160}
  .upyb-nav.is-open .upyb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}.upyb-nav.is-open .upyb-burger span:nth-child(2){opacity:0}.upyb-nav.is-open .upyb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .upyb-burger span{transition:transform var(--dur-hover) var(--ease-out),opacity var(--dur-hover) ease}
}
/* Old site kit sets h2 to uppercase (h2_typography_text_transform): neutralise inside our sections only. */
.upyb h2.elementor-heading-title,.upyb .elementor-heading-title .upyb-accent{text-transform:none !important}
/* Elementor forces img height:auto; images that must fill their frame use !important. */
.upyb .upyb-case__img,.upyb .upyb-makers__img{height:100% !important;max-width:none !important}
.upyb .upyb-skyline img{max-width:100% !important}
.upyb.upyb-s11{overflow:hidden !important}

/* ---------- Max content width 1200 on every section (Noah 11 Nov: no full-screen content on wide screens) ---------- */
@media (min-width:1025px){
  .upyb.e-con:not(.upyb-sticky-wrap){padding-left:max(120px,calc(50% - 600px)) !important;padding-right:max(120px,calc(50% - 600px)) !important}
  .upyb.e-con.upyb-logostrip{padding-left:max(0px,calc(50% - 600px)) !important;padding-right:max(0px,calc(50% - 600px)) !important}
  .upyb-proof{padding-left:max(120px,calc(50vw - 600px)) !important;padding-right:max(120px,calc(50vw - 600px)) !important}
}
/* Logged-in admin bar: this template does not bump the page, so the fixed top bar (site plugin) overlapped the header. */
body.admin-bar .upyb-s01{margin-top:var(--wp-admin--admin-bar--height,32px) !important}

/* ---------- Noah review 2 (11 Nov): desktop-only layout; mobile untouched ---------- */
.upyb ol{list-style:none;margin:0;padding:0}
.upyb .upyb-review figcaption{color:var(--upyb-wit)}
.upyb-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.upyb-checks input{appearance:none;width:20px;height:20px;border:1.5px solid var(--upyb-lijn-veld);border-radius:6px;margin:0;flex:none;display:grid;place-items:center}.upyb-checks input:checked{background:var(--upyb-blauw-diep);border-color:var(--upyb-blauw-diep)}.upyb-checks input:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
@media (hover:hover) and (pointer:fine){.upyb-jesse{transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}.upyb-jesse:hover{transform:translateY(-2px);box-shadow:var(--upyb-kaart-schaduw)}.upyb-jesse__btn{transition:background-color var(--dur-hover) ease}.upyb-jesse:hover .upyb-jesse__btn{background:var(--upyb-blauw-diep)}}
@media (min-width:1025px){
  .upyb-half>.elementor-element{flex:1 1 0 !important;max-width:none !important;width:auto !important}
  .upyb-score{display:flex;flex-direction:column;gap:8px;padding:0;background:none}.upyb-score__g{display:none}.upyb-score__row{gap:12px;align-items:center}
  .upyb-score__num{font-size:28px;line-height:34px;color:var(--upyb-wit)}.upyb-score__of{display:none}.upyb-score__stars{display:inline-flex}
  .upyb-score__link{padding-top:0;border:0;font-weight:400;font-size:14px;color:var(--upyb-grijs-donker) !important;text-decoration:underline !important}.upyb-score__link .upyb-only-d{display:none}
  .upyb-step__num{top:-49px}
  .upyb-w800{max-width:720px}
  .upyb-makers__img{object-position:50% 35%}
}
@media (min-width:1025px){.upyb .upyb-w800{max-width:720px !important;width:100% !important}.upyb-step__num{top:-51px}}

/* ---------- Noah review 3 (11 Nov) ---------- */
/* Featured card: gradient under the (transparent) border too, so edges and corners look the same. */
.upyb-step--doel .upyb-step__card{background-origin:border-box;background-clip:border-box}
@media (min-width:1025px){.upyb .upyb-w800{max-width:600px !important}}
@media (max-width:767px){
  .upyb-sit__card{grid-template-columns:1fr;gap:8px;border-radius:0;overflow:visible}
  .upyb-sit__nu,.upyb-sit__met{border-radius:20px}
  .upyb.e-con.upyb-s11{padding-bottom:230px !important}
  .upyb-iphone-wrap{width:180px !important;margin-left:-90px;bottom:-190px}
}

/* ---------- Noah review 4 (11 Nov) ---------- */
/* Light blue = always UPYB blauw #009CDE for text links on light (Noah; contrast 2.98:1 below AA, his decision) */
.upyb .upyb-inline,.upyb .upyb-step:not(.upyb-step--doel) .upyb-step__more,.upyb .upyb-privacy a{color:var(--upyb-blauw) !important}
/* Form: 3+ options in 2 columns, less empty space */
@media (min-width:768px){.upyb-choices--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}}
.upyb-form{min-height:560px}
/* Body text: max 16 desktop, 15 tablet/mobile (HTML widgets; the widgets use the kit styles) */
@media (max-width:1024px){
  .upyb-split li,.upyb-case p,.upyb-review__q,.upyb-step__regel,.upyb-groei p,.upyb-makers p,.upyb-why__card p,.upyb-vs__row b,.upyb-vs__val,.upyb-vs__total,.upyb-area p,.upyb-faq__a p,.upyb-choice,.upyb-form__done p{font-size:15px !important;line-height:24px !important}
}
/* Mobile: smaller icons in S02 situation cards */
@media (max-width:767px){
  .upyb-sit .upyb-li-ico{width:24px;height:24px}.upyb-sit .upyb-li-ico svg{width:12px;height:12px}.upyb-sit li{gap:12px}
}
/* Mobile CTA D (Noah 11 Nov, Figma 228:41): full-colour phone rises from the bottom edge, top ~200px visible, no opacity */
@media (max-width:767px){
  .upyb.e-con.upyb-s11{padding-top:72px !important;padding-bottom:240px !important}
  .upyb-s11>.e-con,.upyb-s11>.elementor-element:not(.upyb-iphone-wrap){position:relative;z-index:1}
  .upyb-iphone-wrap{left:50% !important;right:auto !important;top:auto !important;bottom:-280px !important;width:230px !important;margin:0 0 0 -125px !important;transform:rotate(-6deg) !important;opacity:1;z-index:0;-webkit-mask-image:none;mask-image:none}
}


html.upyb-gescrold body .upyb-balk.upyb-balk:not(#u){transform:translateY(calc(-100% - var(--wp-admin--admin-bar--height,0px))) !important;transition:transform .32s cubic-bezier(.23,1,.32,1)}

/* Mobile hero B2 (Noah 11 Nov): Google line on top; the H1 stays in the HTML for SEO but is only visually hidden on mobile */
@media (max-width:767px){
  .upyb-s01 .upyb-eyebrow{position:absolute !important;width:1px !important;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0 !important;padding:0 !important}
  .upyb-gtop{gap:8px;font-size:13px;line-height:20px;padding:0}.upyb-gtop .upyb-gchip__g{width:24px;height:24px}.upyb-gtop .upyb-gchip__g svg{width:14px;height:14px}
}

/* ---------- S12 Footer (Noah 11 Nov, Figma 230:45 / 230:167 / 230:229) ---------- */
.upyb.e-con.upyb-s12{background:linear-gradient(180deg,var(--upyb-navy) 0%,var(--upyb-navy) 50%,var(--upyb-blauw-diep) 100%) !important}
.upyb-s12>.elementor-element{width:100%}
.upyb-foot{font-family:var(--upyb-font-text);color:var(--upyb-wit)}
.upyb-foot ul{list-style:none;margin:0;padding:0}.upyb-foot p{margin:0}
.upyb-foot a{color:var(--upyb-wit);text-decoration:none;transition:color .15s ease}.upyb-foot a:hover,.upyb-foot__cookie:hover{color:var(--upyb-blauw) !important}
.upyb-foot a:focus-visible,.upyb-foot button:focus-visible,.upyb-foot summary:focus-visible{outline:2px solid var(--upyb-blauw);outline-offset:3px;border-radius:4px}
.upyb-foot__top{display:flex;justify-content:space-between;gap:48px;padding-bottom:48px}
.upyb-foot__brand{width:300px;flex:none;display:flex;flex-direction:column;gap:16px}
.upyb-foot__logo{display:block;line-height:0}.upyb-foot__logo-h{width:240px;height:auto}.upyb-foot__logo-s{display:none;width:120px;height:auto}
.upyb-foot__tag{font-size:14px;line-height:22px;color:var(--upyb-grijs-donker)}
.upyb-foot__g{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--upyb-grijs-donker)}.upyb-foot__g b{color:var(--upyb-wit);font-weight:600}.upyb-foot__g svg{width:18px;height:18px}
.upyb-foot__cols{display:flex;gap:56px}.upyb-foot__accs{display:none}
.upyb-foot__label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--upyb-grijs-donker);margin-bottom:16px !important}
.upyb-foot__col li{font-size:14px;line-height:22px;margin-bottom:12px}.upyb-foot__muted{color:var(--upyb-grijs-donker)}
.upyb-foot__socs{display:flex;gap:8px;margin-top:4px}
.upyb-foot__soc{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--upyb-lijn-donker)}.upyb-foot__soc svg{width:16px;height:16px}.upyb-foot__soc:hover{border-color:var(--upyb-blauw)}
.upyb-foot__bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:24px;border-top:1px solid var(--upyb-lijn-donker);font-size:13px;line-height:20px;color:var(--upyb-grijs-donker)}
.upyb-foot__bar ul{display:flex;flex-wrap:wrap;gap:8px 24px}.upyb-foot .upyb-foot__bar a,.upyb-foot__cookie{color:var(--upyb-grijs-donker);font:inherit;background:none;border:0;padding:0;cursor:pointer}
.upyb-foot__big{display:block;width:100%;height:auto;margin-top:48px}
@media (max-width:1024px){
  .upyb-foot__top{flex-wrap:wrap;gap:40px 24px}
  .upyb-foot__brand{width:100%;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px}
  .upyb-foot__logo{width:100%}.upyb-foot__logo-h{width:220px}.upyb-foot__tag{max-width:400px;font-size:13px;line-height:20px}
  .upyb-foot__cols{flex:1;justify-content:space-between;gap:24px}.upyb-foot__col li{font-size:15px;line-height:24px}
  .upyb-foot__big{margin-top:32px}
}
@media (max-width:767px){
  .upyb-foot__top{flex-direction:column;flex-wrap:nowrap;gap:32px;padding-bottom:40px}
  .upyb-foot__brand{flex-direction:column;align-items:flex-start;gap:16px}
  .upyb-foot__logo-h{display:none}.upyb-foot__logo-s{display:block}
  .upyb-foot__cols{display:none}.upyb-foot__accs{display:block}
  .upyb-foot__acc{border-bottom:1px solid var(--upyb-lijn-donker)}
  .upyb-foot__acc summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;list-style:none;cursor:pointer;font-size:18px;line-height:24px;font-weight:600}
  .upyb-foot__acc summary::-webkit-details-marker{display:none}
  .upyb-foot__acc summary svg{width:20px;height:20px;transition:transform .2s ease}.upyb-foot__acc[open] summary svg{transform:rotate(45deg)}
  .upyb-foot__acc ul{padding:0 0 16px}.upyb-foot__acc li{font-size:15px;line-height:24px}
  .upyb-foot__acc li a{display:block;padding:6px 0}
  .upyb-foot__col li{font-size:15px;line-height:24px}.upyb-foot__contact li a{display:inline-block;padding:4px 0}
  .upyb-foot__soc{width:44px;height:44px}.upyb-foot__soc svg{width:18px;height:18px}
  .upyb-foot__bar{flex-direction:column;align-items:flex-start;gap:12px}
  .upyb-foot__big{display:none}
}

/* ---------- Noah review 6 (11 Nov) ---------- */
/* Header: white horizontal logo image */
.upyb-logo__a{display:block;line-height:0}.upyb-logo__a img{width:180px;height:auto;display:block}
@media (max-width:767px){.upyb-logo__a img{width:156px}}
/* Demo form: "Binnen 3 werkdagen" as one small line next to the step counter (moved out of the value stack) */
.upyb-progress__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.upyb-progress__top .upyb-progress__label{margin:0}
.upyb-progress__eta{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;line-height:16px;color:var(--upyb-grijs)}.upyb-progress__eta .upyb-ico{width:14px;height:14px;flex:none}
/* Desktop: left column (heading + value stack) exactly as tall as the form */
@media (min-width:1025px){
  .upyb-s08{align-items:stretch !important}
  .upyb-s08>.upyb-s08__vs{align-self:end}
  .upyb-s08>.upyb-s08__form{align-self:stretch}
  .upyb-s08__form>.elementor-widget-container,.upyb-s08__form .upyb-form{height:100%}
}

/* ---------- Noah review 7 (11 Nov) ---------- */
/* Proof band: USP text after the number in white (was grey) */
.upyb-usp{color:var(--upyb-wit) !important}
/* CTA -> footer: CTA fades to navy at the bottom so it flows into the footer; a thin line is the horizon the phone stands on */
.upyb.e-con.upyb-s11{background:linear-gradient(180deg,rgb(0 2 31/0) 55%,var(--upyb-navy) 100%),var(--upyb-diepzee) !important}
.upyb.e-con.upyb-s12{border-top:1px solid var(--upyb-lijn-donker) !important}
@media (max-width:1024px){.upyb.e-con.upyb-s11{background:linear-gradient(180deg,rgb(0 2 31/0) 30%,var(--upyb-navy) 92%),var(--upyb-diepzee) !important}}

/* ---------- S05 tools row (Noah 11 Nov): one general row, monochrome icons + names ---------- */
.upyb-tools{display:flex;flex-direction:column;gap:16px;font-family:var(--upyb-font-text)}
.upyb-tools__label{margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--upyb-grijs)}
.upyb-tools__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.upyb-tool{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border:1px solid var(--upyb-lijn);border-radius:999px;background:var(--upyb-wit);color:var(--upyb-navy);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap}
.upyb-tool svg{width:16px;height:16px;flex:none;color:var(--upyb-grijs)}
@media (max-width:767px){.upyb-tools__list{gap:6px}.upyb-tool{font-size:13px;padding:6px 12px 6px 10px}.upyb-tool svg{width:14px;height:14px}}

/* Tools row v2 (Noah 11 Nov): real colour logos */
.upyb-tool img{width:20px;height:20px;display:block;flex:none;object-fit:contain}
@media (max-width:767px){.upyb-tool img{width:18px;height:18px}}

/* Tools row v3 (Noah 11 Nov, Emil animate skill): one-row marquee on every width.
   CSS animation (off main thread) · transform only · linear (constant motion) · 80 s loop · pause on real hover · reduced motion = static wrap */
.upyb-tools__mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.upyb-tools__track{display:flex;width:max-content;animation:upyb-marquee 80s linear infinite;will-change:transform}
.upyb-tools .upyb-tools__list{flex-wrap:nowrap;padding-right:8px}
@media (hover:hover) and (pointer:fine){.upyb-tools__mq:hover .upyb-tools__track{animation-play-state:paused}}
@media (max-width:767px){.upyb-tools .upyb-tools__list{padding-right:6px}.upyb-tools__mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}}
@media (prefers-reduced-motion:reduce){
  .upyb-tools__track{animation:none;width:auto}.upyb-tools__copy{display:none !important}
  .upyb-tools .upyb-tools__list{flex-wrap:wrap;padding-right:0}.upyb-tools__mq{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Noah review 8 (11 Nov) ---------- */
/* Swipe dots: only on reviews, and they follow the swipe (motion.js). Active = UPYB blauw. Portfolio/services/why/area: no dots (the peeking card shows it swipes). */
.upyb-dots{display:none !important}
@media (max-width:1024px){.upyb-reviews-wrap .upyb-dots{display:flex !important}}
.upyb-dots span{transition:background-color .2s ease}
.upyb .upyb-dots span:first-child{width:6px;background:rgb(0 2 31/.2)}.upyb-dark .upyb-dots span:first-child{background:rgb(255 255 255/.35)}
.upyb .upyb-dots span.is-active,.upyb-dark .upyb-dots span.is-active{width:20px;background:var(--upyb-blauw)}
/* CTA -> footer: phone no longer cut, so no horizon line */
.upyb.e-con.upyb-s12{border-top:0 !important}
/* Desktop CTA = option A (Figma 240:209): text left, full iPhone right inside the section */
@media (min-width:1025px){
  .upyb.e-con.upyb-s11{display:grid !important;grid-template-columns:minmax(0,620px) 300px;justify-content:space-between;grid-template-areas:"tekst phone" "btns phone";column-gap:64px;row-gap:32px;align-content:center;padding-top:96px !important;padding-bottom:96px !important}
  .upyb-s11>.upyb-inner{grid-area:tekst;align-self:end;align-items:flex-start !important;max-width:none !important;width:100% !important}
  .upyb-s11>.upyb-inner .elementor-heading-title,.upyb-s11>.upyb-inner .elementor-widget-text-editor,.upyb-s11>.upyb-inner p{text-align:left !important}
  .upyb-s11>.elementor-widget:not(.upyb-iphone-wrap){grid-area:btns;align-self:start}
  .upyb-s11__btns{justify-content:flex-start}.upyb-s11 .upyb-gline{justify-content:flex-start}
  .upyb-iphone-wrap{grid-area:phone;position:relative !important;right:auto !important;bottom:auto !important;top:auto !important;left:auto !important;justify-self:center;align-self:center;width:250px !important;margin:0 !important;transform:rotate(-6deg) !important}
}
/* Tablet + mobile CTA = option M2 (Figma 240:128): smaller tilted iPhone bridging the CTA and the footer */
@media (max-width:1024px){
  .upyb.e-con.upyb-s11{overflow:visible !important;z-index:2;padding-bottom:220px !important}
  .upyb-iphone-wrap{left:50% !important;right:auto !important;top:auto !important;bottom:-180px !important;width:180px !important;margin:0 0 0 -90px !important;transform:rotate(-8deg) !important;z-index:3}
  .upyb.e-con.upyb-s12{padding-top:244px !important}
}
@media (max-width:767px){
  .upyb.e-con.upyb-s11{padding-bottom:212px !important}
  .upyb.e-con.upyb-s12{padding-top:228px !important}
}

/* ---------- CTA phone v3 (Noah 11 Nov): photoreal iPhone 15 Pro (Magnific PSD, _tools/iphone_float.mjs). The image carries its own tilt, so no CSS rotation. ---------- */
.upyb-iphone--photo{padding:0;border-radius:0;background:none;box-shadow:none}
.upyb-iphone--photo img{display:block;width:100%;height:auto !important;filter:drop-shadow(0 30px 50px rgb(0 0 10/.55))}
@media (min-width:1025px){.upyb-iphone-wrap{width:320px !important;transform:none !important}.upyb.e-con.upyb-s11{grid-template-columns:minmax(0,620px) 340px}}
@media (max-width:1024px){
  .upyb-iphone-wrap{width:220px !important;margin:0 0 0 -110px !important;transform:none !important;bottom:-149px !important}
  .upyb.e-con.upyb-s11{padding-bottom:190px !important}.upyb.e-con.upyb-s12{padding-top:205px !important}
}
@media (max-width:767px){.upyb.e-con.upyb-s11{padding-bottom:182px !important}.upyb.e-con.upyb-s12{padding-top:190px !important}}

/* ---------- Noah review 10 (11 Nov) ---------- */
/* UPYB light blue (#009CDE) for the why-icons and the form step label + bar */
.upyb-why__card h3 .upyb-ico{color:var(--upyb-blauw) !important}
.upyb-progress__label{color:var(--upyb-blauw) !important}.upyb-progress__bar span{background:var(--upyb-blauw) !important}
/* Swipe dots: reviews (white on dark) + services (light blue), both follow the swipe */
@media (max-width:1024px){.upyb-steps+.upyb-dots{display:flex !important}}
.upyb-dark .upyb-dots span.is-active{background:var(--upyb-wit) !important}
.upyb-steps+.upyb-dots span.is-active{background:var(--upyb-blauw) !important}
/* Portfolio swipe cue: slim progress line + previous/next buttons (tablet/mobile only) */
.upyb-swipe{display:none}
@media (max-width:1024px){
  .upyb-swipe{display:flex;align-items:center;gap:24px;margin-top:24px}
  .upyb-swipe__track{position:relative;flex:1;height:2px;border-radius:1px;background:var(--upyb-lijn);overflow:hidden}
  .upyb-swipe__fill{position:absolute;left:0;top:0;height:100%;width:33%;border-radius:1px;background:var(--upyb-navy);will-change:transform}
  .upyb-swipe__btns{display:flex;gap:8px}
  .upyb-swipe__btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--upyb-lijn);background:var(--upyb-wit);color:var(--upyb-navy);cursor:pointer;transition:border-color .2s ease,background-color .2s ease,opacity .2s ease}
  .upyb-swipe__btn svg{width:16px;height:16px}.upyb-swipe__btn[data-dir="-1"] svg{transform:rotate(180deg)}
  .upyb-swipe__btn:active{transform:scale(.96)}
  .upyb-swipe__btn:disabled{opacity:.35;cursor:default}
  .upyb-swipe__btn:focus-visible{outline:2px solid var(--upyb-blauw);outline-offset:2px}
}
@media (hover:hover) and (pointer:fine){.upyb-swipe__btn:not(:disabled):hover{border-color:var(--upyb-navy)}}
/* CTA phone v4 (Noah 11 Nov): orange iPhone 17 Pro Max (Magnific 424925384), taller image (843×1397) -> new bridge offsets */
@media (max-width:1024px){
  .upyb-iphone-wrap{bottom:-182px !important}
  .upyb.e-con.upyb-s11{padding-bottom:222px !important}.upyb.e-con.upyb-s12{padding-top:238px !important}
}
@media (max-width:767px){.upyb.e-con.upyb-s11{padding-bottom:214px !important}.upyb.e-con.upyb-s12{padding-top:222px !important}}
.upyb .upyb-dots.is-off{display:none !important}

/* ---------- Noah review 11 (11 Nov) ---------- */
/* Portfolio dots (mobile/tablet), light blue like services */
@media (max-width:1024px){.upyb-cases+.upyb-dots{display:flex !important}}
.upyb-cases+.upyb-dots span.is-active{background:var(--upyb-blauw) !important}
/* CTA solid navy on every width; it runs into the footer, which fades to UPYB light blue at the bottom */
.upyb.e-con.upyb-s11,.upyb.e-con.upyb-s11.upyb-bg-diepzee{background:var(--upyb-navy) !important}
.upyb.e-con.upyb-s12{background:linear-gradient(180deg,var(--upyb-navy) 0%,var(--upyb-navy) 45%,var(--upyb-blauw) 100%) !important}

/* ---------- Noah review 12 (11 Nov): footer turns light blue right from the top; text on light blue ---------- */
.upyb.e-con.upyb-s12{background:linear-gradient(180deg,var(--upyb-navy) 0%,var(--upyb-blauw-diep) 9%,var(--upyb-blauw) 24%,var(--upyb-blauw) 100%) !important}
@media (max-width:1024px){.upyb.e-con.upyb-s12{background:linear-gradient(180deg,var(--upyb-navy) 0,var(--upyb-blauw-diep) 120px,var(--upyb-blauw) 230px,var(--upyb-blauw) 100%) !important}}
/* readable on light blue: muted text in tint (#E6F5FC), hover in navy */
.upyb-foot__tag,.upyb-foot__g,.upyb-foot__label,.upyb-foot__muted,.upyb-foot__bar,.upyb-foot .upyb-foot__bar a,.upyb-foot__cookie{color:var(--upyb-tint) !important}
.upyb-foot a:hover,.upyb-foot .upyb-foot__bar a:hover,.upyb-foot__cookie:hover{color:var(--upyb-navy) !important}
.upyb-foot__soc{border-color:rgb(255 255 255/.45)}.upyb-foot__soc:hover{border-color:var(--upyb-navy)}
.upyb-foot__bar{border-top-color:rgb(255 255 255/.3)}.upyb-foot__acc{border-bottom-color:rgb(255 255 255/.3)}
.upyb-foot a:focus-visible,.upyb-foot button:focus-visible,.upyb-foot summary:focus-visible{outline-color:var(--upyb-wit)}

/* ---------- Noah review 13 (11 Nov): CTA -> footer = option A "long soft fade" (Figma 250:201 / 250:279) ---------- */
.upyb.e-con.upyb-s11,.upyb.e-con.upyb-s11.upyb-bg-diepzee{background:linear-gradient(180deg,var(--upyb-navy) 0%,var(--upyb-navy) 55%,#001A44 100%) !important}
.upyb.e-con.upyb-s12{background:linear-gradient(180deg,#001A44 0%,#003F70 30%,var(--upyb-blauw-diep) 60%,var(--upyb-blauw) 100%) !important}
@media (max-width:1024px){.upyb.e-con.upyb-s12{background:linear-gradient(180deg,#001A44 0%,#003F70 30%,var(--upyb-blauw-diep) 60%,var(--upyb-blauw) 100%) !important}}
.upyb-foot a:hover,.upyb-foot .upyb-foot__bar a:hover,.upyb-foot__cookie:hover{color:var(--upyb-wit) !important;text-decoration:underline !important;text-underline-offset:3px}
.upyb-foot__soc:hover{border-color:var(--upyb-wit)}

/* ---------- Phase 5 step 1 (11 Nov): rule K3 dots on every swipe row; rule K4 tap areas ---------- */
@media (max-width:1024px){.upyb-why+.upyb-dots,.upyb-area+.upyb-dots,.upyb-bento~.upyb-dots{display:flex !important}}
.upyb .upyb-dots span.is-active{width:20px;background:var(--upyb-blauw) !important}
.upyb-dark .upyb-dots span.is-active{background:var(--upyb-wit) !important}
/* bigger tap areas without moving the layout (padding + negative margin) */
.upyb-logo__a{padding:13px 0;margin:-13px 0}
.upyb-score__link{display:inline-block;padding:12px 0;margin:-12px 0}
.upyb-foot__acc li a{padding:10px 0}.upyb-foot__contact li a{display:inline-block;padding:10px 0}
.upyb-foot__cookie{padding:12px 0 !important;margin:-12px 0 !important}