.elementor-33089 .elementor-element.elementor-element-9f9f612{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.88;}.elementor-33089 .elementor-element.elementor-element-9f9f612:not(.elementor-motion-effects-element-type-background), .elementor-33089 .elementor-element.elementor-element-9f9f612 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-33089 .elementor-element.elementor-element-9f9f612::before, .elementor-33089 .elementor-element.elementor-element-9f9f612 > .elementor-background-video-container::before, .elementor-33089 .elementor-element.elementor-element-9f9f612 > .e-con-inner > .elementor-background-video-container::before, .elementor-33089 .elementor-element.elementor-element-9f9f612 > .elementor-background-slideshow::before, .elementor-33089 .elementor-element.elementor-element-9f9f612 > .e-con-inner > .elementor-background-slideshow::before, .elementor-33089 .elementor-element.elementor-element-9f9f612 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:var( --e-global-color-astglobalcolor2 );}.elementor-33089 .elementor-element.elementor-element-c04915e{--display:flex;}.elementor-33089 .elementor-element.elementor-element-b750b86{--display:flex;}.elementor-33089 .elementor-element.elementor-element-5fc312c{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-33089 .elementor-element.elementor-element-bb1d897{text-align:start;}.elementor-33089 .elementor-element.elementor-element-bb1d897 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:2em;font-weight:600;text-transform:uppercase;line-height:51px;letter-spacing:2px;color:#FFFFFF;}.elementor-33089 .elementor-element.elementor-element-bb1d897.elementor-element{--align-self:flex-start;}.elementor-33089 .elementor-element.elementor-element-d36c93e{text-align:start;}.elementor-33089 .elementor-element.elementor-element-d36c93e .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:32px;font-weight:400;text-transform:none;font-style:italic;color:var( --e-global-color-astglobalcolor7 );}.elementor-33089 .elementor-element.elementor-element-d36c93e.elementor-element{--align-self:flex-start;}.elementor-33089 .elementor-element.elementor-element-5c45de1{--display:flex;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-33089 .elementor-element.elementor-element-4f69f1d .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-33089 .elementor-element.elementor-element-4f69f1d .elementor-button{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;text-transform:none;}.elementor-33089 .elementor-element.elementor-element-4f69f1d .elementor-button:hover, .elementor-33089 .elementor-element.elementor-element-4f69f1d .elementor-button:focus{color:#CC8200;}.elementor-33089 .elementor-element.elementor-element-4f69f1d .elementor-button:hover svg, .elementor-33089 .elementor-element.elementor-element-4f69f1d .elementor-button:focus svg{fill:#CC8200;}.elementor-33089 .elementor-element.elementor-element-a70f565 .elementor-button{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;text-transform:none;}.elementor-33089 .elementor-element.elementor-element-b1a4c07{--display:flex;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-876b8bf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--border-radius:2px 2px 2px 2px;--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-33089 .elementor-element.elementor-element-32d6a9a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.12);--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-33089 .elementor-element.elementor-element-32d6a9a:not(.elementor-motion-effects-element-type-background), .elementor-33089 .elementor-element.elementor-element-32d6a9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F9FF;}.elementor-33089 .elementor-element.elementor-element-b9ce881{--display:flex;--justify-content:center;--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-33089 .elementor-element.elementor-element-6df64dc{text-align:start;}.elementor-33089 .elementor-element.elementor-element-6df64dc .elementor-heading-title{color:#1E3A6E;}.elementor-33089 .elementor-element.elementor-element-07e4cba{text-align:start;}.elementor-33089 .elementor-element.elementor-element-07e4cba .elementor-heading-title{color:#0D2B55;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-33089 .elementor-element.elementor-element-e9e57f0{text-align:start;color:#CC8200;width:var( --container-widget-width, 90% );max-width:90%;--container-widget-width:90%;--container-widget-flex-grow:0;}.elementor-33089 .elementor-element.elementor-element-82a1e2d{--display:flex;--justify-content:center;border-style:none;--border-style:none;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-82a1e2d.e-con{--align-self:stretch;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-33089 .elementor-element.elementor-element-5eaab50{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-33089 .elementor-element.elementor-element-5eaab50.e-con{--flex-grow:0;--flex-shrink:1;}.elementor-33089 .elementor-element.elementor-element-5c09a91{--display:flex;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-33089 .elementor-element.elementor-element-5c09a91:not(.elementor-motion-effects-element-type-background), .elementor-33089 .elementor-element.elementor-element-5c09a91 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F9FF;}.elementor-33089 .elementor-element.elementor-element-ad6eb67{--display:flex;}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-33089 .elementor-element.elementor-element-7e1506f{--grid-columns:3;--grid-column-gap:32px;--grid-row-gap:32px;}.elementor-33089 .elementor-element.elementor-element-7e1506f .elementor-loop-container{grid-auto-rows:1fr;}.elementor-33089 .elementor-element.elementor-element-7e1506f .e-loop-item > .elementor-section, .elementor-33089 .elementor-element.elementor-element-7e1506f .e-loop-item > .elementor-section > .elementor-container, .elementor-33089 .elementor-element.elementor-element-7e1506f .e-loop-item > .e-con, .elementor-33089 .elementor-element.elementor-element-7e1506f .e-loop-item .elementor-section-wrap > .e-con{height:100%;}.elementor-33089 .elementor-element.elementor-element-c44291c{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:03em;}.elementor-33089 .elementor-element.elementor-element-1f3ca74 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-33089 .elementor-element.elementor-element-1f3ca74 .elementor-button .elementor-button-content-wrapper{gap:15px;}.elementor-33089 .elementor-element.elementor-element-1f3ca74 .elementor-button{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;text-transform:none;fill:var( --e-global-color-astglobalcolor8 );color:var( --e-global-color-astglobalcolor8 );background-color:#FFA30000;border-style:none;}.elementor-33089 .elementor-element.elementor-element-1f3ca74 .elementor-button:hover, .elementor-33089 .elementor-element.elementor-element-1f3ca74 .elementor-button:focus{color:var( --e-global-color-astglobalcolor1 );}.elementor-33089 .elementor-element.elementor-element-1f3ca74 .elementor-button:hover svg, .elementor-33089 .elementor-element.elementor-element-1f3ca74 .elementor-button:focus svg{fill:var( --e-global-color-astglobalcolor1 );}.elementor-33089 .elementor-element.elementor-element-1f3ca74 > .elementor-widget-container{margin:0px -32px 0px 0px;}.elementor-33089 .elementor-element.elementor-element-1f3ca74.elementor-element{--align-self:flex-start;}.elementor-33089 .elementor-element.elementor-element-431dfb1 .elementor-button{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;text-transform:none;}.elementor-33089 .elementor-element.elementor-element-74c20a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-6e07af5{--display:flex;}.elementor-33089 .elementor-element.elementor-element-ta50003{--display:flex;}.elementor-33089 .elementor-element.elementor-element-ta50004{--display:flex;}.elementor-33089 .elementor-element.elementor-element-ta50008{--display:flex;}.elementor-33089 .elementor-element.elementor-element-ta50009{--display:flex;}.elementor-33089 .elementor-element.elementor-element-ta5000d{--display:flex;}.elementor-33089 .elementor-element.elementor-element-ta50011{--display:flex;}.elementor-33089 .elementor-element.elementor-element-ta50015{--display:flex;}.elementor-33089 .elementor-element.elementor-element-k6a0001{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-k6a0002{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-k6a0003{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-33089 .elementor-element.elementor-element-k6a0007{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-33089 .elementor-element.elementor-element-k6a0008{--display:flex;}.elementor-33089 .elementor-element.elementor-element-k6a000c{--display:flex;}.elementor-33089 .elementor-element.elementor-element-k6a0010{--display:flex;}.elementor-33089 .elementor-element.elementor-element-a193948{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:2px 2px 2px 2px;--padding-top:2em;--padding-bottom:2em;--padding-left:0em;--padding-right:0em;}.elementor-33089 .elementor-element.elementor-element-3b6d4e0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-33089 .elementor-element.elementor-element-3b6d4e0.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-33089 .elementor-element.elementor-element-9d32ca0{text-align:start;}.elementor-33089 .elementor-element.elementor-element-9d32ca0 .elementor-heading-title{color:#0D2B55;}.elementor-33089 .elementor-element.elementor-element-b0049a4{text-align:start;}.elementor-33089 .elementor-element.elementor-element-077a277{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-33089 .elementor-element.elementor-element-077a277:not(.elementor-motion-effects-element-type-background), .elementor-33089 .elementor-element.elementor-element-077a277 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D2B55;}.elementor-33089 .elementor-element.elementor-element-e4cab18{text-align:start;}.elementor-33089 .elementor-element.elementor-element-e4cab18 .elementor-heading-title{font-family:"Gill Sans", Sans-serif;font-size:1.1em;font-weight:200;color:#FFFFFF;}.elementor-33089 .elementor-element.elementor-element-7a1c002{--display:flex;}.elementor-33089 .elementor-element.elementor-element-7a1c004{--display:flex;}.elementor-33089 .elementor-element.elementor-element-7a1c006{--display:flex;}.elementor-33089 .elementor-element.elementor-element-7a1c008{--display:flex;}.elementor-33089 .elementor-element.elementor-element-7a1c00a{--display:flex;}.elementor-33089 .elementor-element.elementor-element-7a1c00c{--display:flex;}.elementor-33089 .elementor-element.elementor-element-7a1c00e{--display:flex;}.elementor-33089 .elementor-element.elementor-element-7a1c001{--n-accordion-title-font-size:1rem;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;}.elementor-33089 .elementor-element.elementor-element-091bec6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:032px;--padding-right:032px;}.elementor-33089 .elementor-element.elementor-element-5eef362{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-a037d2e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-8a00669 .elementor-button{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;text-transform:none;}.elementor-33089 .elementor-element.elementor-element-5be19ae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-5ebb23c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-4ae7bca{--display:flex;}.elementor-33089 .elementor-element.elementor-element-6f0ed94{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-ff07932{--display:flex;}.elementor-33089 .elementor-element.elementor-element-3985798{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-7deefa5{--display:flex;}.elementor-33089 .elementor-element.elementor-element-a5b58f4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-c4aa60e{--display:flex;}.elementor-33089 .elementor-element.elementor-element-5809114{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-d24076c{--display:flex;}.elementor-33089 .elementor-element.elementor-element-8e8de16{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-c6125c0{--display:flex;}.elementor-33089 .elementor-element.elementor-element-cd6c431{--display:flex;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-33089 .elementor-element.elementor-element-cd6c431:not(.elementor-motion-effects-element-type-background), .elementor-33089 .elementor-element.elementor-element-cd6c431 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D2B55;}.elementor-33089 .elementor-element.elementor-element-5ea25f8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:28px;--padding-bottom:28px;--padding-left:36px;--padding-right:36px;}.elementor-33089 .elementor-element.elementor-element-5ea25f8.e-con{--align-self:center;}.elementor-33089 .elementor-element.elementor-element-8673c37{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;}.elementor-33089 .elementor-element.elementor-element-999d4ae .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:28px;font-weight:700;line-height:1.2em;}.elementor-33089 .elementor-element.elementor-element-3888406 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:13px;font-weight:400;line-height:1.5em;color:#FFFFFFB8;}.elementor-33089 .elementor-element.elementor-element-25cd13c .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:400;line-height:1.5em;color:#FFFFFF69;}.elementor-33089 .elementor-element.elementor-element-952bf84{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-33089 .elementor-element.elementor-element-9d3bd36 .elementor-button{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;text-transform:none;fill:#0D2B55;color:#0D2B55;transition-duration:0.4s;}.elementor-33089 .elementor-element.elementor-element-9d3bd36 .elementor-button:hover, .elementor-33089 .elementor-element.elementor-element-9d3bd36 .elementor-button:focus{background-color:#CC8200;}.elementor-33089 .elementor-element.elementor-element-9d3bd36{--e-transform-transition-duration:0ms;}.elementor-33089 .elementor-element.elementor-element-9d3bd36:hover .elementor-widget-container{background-color:#CC8200;}.elementor-33089 .elementor-element.elementor-element-9d3bd36 > .elementor-widget-container{transition:background 0.3s;border-radius:2px 2px 2px 2px;}.elementor-33089 .elementor-element.elementor-element-be10ef3 .elementor-button{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;text-transform:none;fill:#FFFFFF;color:#FFFFFF;background-color:#0D2B55;transition-duration:400ms;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF85;border-radius:2px 2px 2px 2px;}.elementor-33089 .elementor-element.elementor-element-be10ef3 .elementor-button:hover, .elementor-33089 .elementor-element.elementor-element-be10ef3 .elementor-button:focus{background-color:#1E3A6E;}.elementor-33089 .elementor-element.elementor-element-be10ef3 > .elementor-widget-container{transition:background 0.3s;border-radius:2px 2px 2px 2px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-33089 .elementor-element.elementor-element-bb1d897 .elementor-heading-title{font-size:2.2rem;}.elementor-33089 .elementor-element.elementor-element-d36c93e .elementor-heading-title{font-size:2rem;}.elementor-33089 .elementor-element.elementor-element-876b8bf{--padding-top:06%;--padding-bottom:6%;--padding-left:0%;--padding-right:0%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-33089 .elementor-element.elementor-element-5eaab50.e-con{--flex-grow:0;--flex-shrink:1;}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-33089 .elementor-element.elementor-element-7e1506f{--grid-columns:2;}.elementor-33089 .elementor-element.elementor-element-k6a0002{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-k6a0007{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-a193948{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33089 .elementor-element.elementor-element-cd6c431{--padding-top:56px;--padding-bottom:56px;--padding-left:32px;--padding-right:32px;}.elementor-33089 .elementor-element.elementor-element-5ea25f8{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-33089 .elementor-element.elementor-element-952bf84{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-33089 .elementor-element.elementor-element-bb1d897 .elementor-heading-title{font-size:2.4rem;line-height:1.2em;letter-spacing:1.5px;}.elementor-33089 .elementor-element.elementor-element-d36c93e .elementor-heading-title{font-size:1.7rem;}.elementor-33089 .elementor-element.elementor-element-b9ce881{--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-33089 .elementor-element.elementor-element-e9e57f0{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-33089 .elementor-element.elementor-element-82a1e2d{--margin-top:3%;--margin-bottom:3%;--margin-left:3%;--margin-right:3%;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-33089 .elementor-element.elementor-element-5eaab50{--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-33089 .elementor-element.elementor-element-7e1506f{--grid-columns:1;}.elementor-33089 .elementor-element.elementor-element-e4cab18 .elementor-heading-title{font-size:1.1em;}.elementor-33089 .elementor-element.elementor-element-5eef362{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-a037d2e{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-5be19ae{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-5ebb23c{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-4ae7bca{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-6f0ed94{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-ff07932{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-3985798{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-7deefa5{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-a5b58f4{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-c4aa60e{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-5809114{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-d24076c{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-8e8de16{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-c6125c0{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33089 .elementor-element.elementor-element-cd6c431{--padding-top:48px;--padding-bottom:48px;--padding-left:20px;--padding-right:20px;}.elementor-33089 .elementor-element.elementor-element-5ea25f8{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:28px 28px;--row-gap:28px;--column-gap:28px;--padding-top:16px;--padding-bottom:16px;--padding-left:8px;--padding-right:8px;}.elementor-33089 .elementor-element.elementor-element-952bf84{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-33089 .elementor-element.elementor-element-9d3bd36{width:100%;max-width:100%;}.elementor-33089 .elementor-element.elementor-element-be10ef3{width:100%;max-width:100%;}}@media(min-width:768px){.elementor-33089 .elementor-element.elementor-element-5eaab50{--width:80em;}.elementor-33089 .elementor-element.elementor-element-74c20a5{--width:100%;}.elementor-33089 .elementor-element.elementor-element-6e07af5{--content-width:1440px;}.elementor-33089 .elementor-element.elementor-element-k6a0001{--content-width:1440px;}.elementor-33089 .elementor-element.elementor-element-3b6d4e0{--width:100%;}.elementor-33089 .elementor-element.elementor-element-077a277{--width:100%;}.elementor-33089 .elementor-element.elementor-element-091bec6{--content-width:1440px;}.elementor-33089 .elementor-element.elementor-element-5ea25f8{--width:1440px;}.elementor-33089 .elementor-element.elementor-element-952bf84{--width:45%;}}@media(max-width:1024px) and (min-width:768px){.elementor-33089 .elementor-element.elementor-element-5eaab50{--width:100%;}.elementor-33089 .elementor-element.elementor-element-3b6d4e0{--width:100%;}.elementor-33089 .elementor-element.elementor-element-077a277{--width:100%;}.elementor-33089 .elementor-element.elementor-element-5ea25f8{--width:100%;}.elementor-33089 .elementor-element.elementor-element-952bf84{--width:56%;}}/* Start custom CSS for container, class: .elementor-element-9f9f612 *//* go-live 16 Oct 2026: staging kit (36345) defaults this page relies on, scoped to page 33089. Live kit 41728 differs (width 1140, padding 10px, colours, fonts, custom CSS). */
.elementor-33089{--e-global-color-primary:#0D2B55;--e-global-color-secondary:#1E3A6E;--e-global-color-text:#CC8200;--e-global-color-accent:#FFA300;--e-global-color-44c17d9:#CC8200;--e-global-color-f1dc31c:#FFF3CC;--e-global-color-c7f7946:#045CB4;--e-global-color-2ed62f1:#94A3B8;--e-global-color-a9a2511:#FFFFFF;--e-global-color-7fbde92:#F7F9FF;--e-global-color-f7ab81a:#1D3291;--e-global-color-166736b:#00A9E0;--e-global-color-09e1772:#127A50;--e-global-color-f23f144:#0A5530;--e-global-color-2b77928:#DFFBEC;--e-global-color-42e65bd:#0A8A8A;--e-global-color-d8f8ad8:#086060;--e-global-color-71c7aef:#DCF8F8;--e-global-color-db69e18:#B91C1C;--e-global-color-c6f26cc:#FEF2F2;--e-global-color-c5fdf36:#15803D;--e-global-color-73d9031:#DCFCE7;--e-global-color-b5f4d3f:#0F172A;--e-global-color-254fb54:#1E293B;--e-global-color-7e0bcf5:#334155;--e-global-color-9acc1b8:#64748B;--e-global-color-f6d8d7d:#CBD5E1;--e-global-color-9281a3a:#E2E8F0;--e-global-color-7ceb53b:#F1F5F9;--e-global-color-841dacb:#F8FAFC;--e-global-color-31861db:#FFFFFF;--e-global-color-2afd064:#FFFFFF85;--e-global-color-7751cdd:#FFFFFFB8;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:1.8em;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:44px;--e-global-typography-primary-letter-spacing:0.1rem;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:1.4em;--e-global-typography-secondary-font-weight:100;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-letter-spacing:1.3px;--e-global-typography-text-font-family:"Inter Tight";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;--e-global-typography-84f5a91-font-size:16px;--e-global-typography-84f5a91-font-weight:400;--e-global-typography-84f5a91-line-height:1.65em;--e-global-typography-7e34bfc-font-family:"Inter";--e-global-typography-7e34bfc-font-size:13px;--e-global-typography-7e34bfc-font-weight:400;--e-global-typography-7e34bfc-line-height:1.5em;--e-global-typography-6c264f2-font-family:"Inter";--e-global-typography-6c264f2-font-size:14px;--e-global-typography-6c264f2-font-weight:400;--e-global-typography-6c264f2-line-height:1.6em;--e-global-typography-6c96bfc-font-family:"Inter";--e-global-typography-6c96bfc-font-size:12px;--e-global-typography-6c96bfc-font-weight:400;--e-global-typography-6c96bfc-line-height:1.5em;--e-global-typography-59619df-font-family:"Inter";--e-global-typography-59619df-font-size:11px;--e-global-typography-59619df-font-weight:600;--e-global-typography-59619df-line-height:1.4em;--e-global-typography-d87b1d1-font-family:"Inter";--e-global-typography-d87b1d1-font-size:52px;--e-global-typography-d87b1d1-font-weight:700;--e-global-typography-d87b1d1-line-height:1.1em;--e-global-typography-c6f4d8c-font-family:"Inter";--e-global-typography-c6f4d8c-font-size:38px;--e-global-typography-c6f4d8c-font-weight:700;--e-global-typography-c6f4d8c-line-height:1.15em;--e-global-typography-6b89f13-font-family:"Inter";--e-global-typography-6b89f13-font-size:28px;--e-global-typography-6b89f13-font-weight:700;--e-global-typography-6b89f13-line-height:1.2em;--e-global-typography-1094e1c-font-family:"Inter";--e-global-typography-1094e1c-font-size:20px;--e-global-typography-1094e1c-font-weight:700;--e-global-typography-1094e1c-line-height:1.25em;--e-global-typography-460bab2-font-family:"Inter";--e-global-typography-460bab2-font-size:16px;--e-global-typography-460bab2-font-weight:600;--e-global-typography-c2931da-font-family:"Inter";--e-global-typography-c2931da-font-size:2em;--e-global-typography-c2931da-font-weight:600;--e-global-typography-c2931da-text-transform:uppercase;--e-global-typography-c2931da-line-height:51px;--e-global-typography-c2931da-letter-spacing:2px;--e-global-typography-b61fe73-font-family:"Inter";--e-global-typography-b61fe73-font-size:32px;--e-global-typography-b61fe73-font-weight:400;--e-global-typography-b61fe73-text-transform:none;--e-global-typography-b61fe73-font-style:italic;--e-global-typography-867f28d-font-family:"Inter";--e-global-typography-867f28d-font-size:15px;--e-global-typography-867f28d-font-weight:600;--e-global-typography-867f28d-text-transform:uppercase;--e-global-typography-ad5f2c8-font-family:"Inter";--e-global-typography-ad5f2c8-font-size:14px;--e-global-typography-ad5f2c8-text-transform:uppercase;--e-global-typography-eb6d7d0-font-family:"Gill Sans";--e-global-typography-eb6d7d0-font-size:32px;--e-global-typography-eb6d7d0-font-weight:600;--e-global-typography-c578778-font-family:"Gill Sans";--e-global-typography-c578778-font-size:1.1em;--e-global-typography-c578778-font-weight:200;--e-global-typography-9ca3ae0-font-family:"Gill Sans";--e-global-typography-9ca3ae0-font-weight:400;--e-global-typography-9ca3ae0-text-transform:capitalize;--e-global-typography-2f9aec3-font-family:"Gill Sans";--e-global-typography-2f9aec3-font-size:20px;--e-global-typography-2f9aec3-font-weight:400;--e-global-typography-2f9aec3-text-decoration:none;--e-global-typography-c1e2bb1-font-family:"Open Sans";--e-global-typography-c1e2bb1-font-size:16px;--e-global-typography-c1e2bb1-font-weight:600;--e-global-typography-c1e2bb1-letter-spacing:-0.1px;--e-global-typography-c16a900-font-family:"Gill Sans";--e-global-typography-c16a900-font-size:14px;--e-global-typography-c16a900-font-weight:700;--e-global-typography-c16a900-text-transform:uppercase;--e-global-typography-c16a900-letter-spacing:1.1px;--e-global-typography-1aceff4-font-family:"Gill Sans";--e-global-typography-1aceff4-font-size:1.1em;--e-global-typography-1aceff4-font-weight:600;--e-global-typography-1aceff4-line-height:36px;--e-global-typography-1aceff4-letter-spacing:0.1rem;--e-global-typography-8b6f056-font-family:"Gill Sans";--e-global-typography-8b6f056-font-weight:600;--e-global-typography-a3be363-font-family:"Gill Sans";--e-global-typography-btn0001-font-family:"Inter";--e-global-typography-btn0001-font-size:14px;--e-global-typography-btn0001-font-weight:700;--e-global-typography-btn0001-text-transform:none;--e-global-typography-lnk0001-font-family:"Inter";--e-global-typography-lnk0001-font-size:13px;--e-global-typography-lnk0001-font-weight:700;--e-global-typography-lnk0001-text-transform:none;background-color:var( --e-global-color-a9a2511 );color:#0D2B55;font-family:"Inter", Sans-serif;font-size:14px;font-weight:400;line-height:1.6em;}
.elementor-33089 button, .elementor-33089 input[type="button"], .elementor-33089 input[type="submit"], .elementor-33089 .elementor-button{background-color:#FFA300;font-family:var( --e-global-typography-btn0001-font-family ), Sans-serif;font-size:var( --e-global-typography-btn0001-font-size );font-weight:var( --e-global-typography-btn0001-font-weight );text-transform:var( --e-global-typography-btn0001-text-transform );color:var( --e-global-color-a9a2511 );border-radius:2px 2px 2px 2px;}
.elementor-33089 button:hover, .elementor-33089 button:focus, .elementor-33089 input[type="button"]:hover, .elementor-33089 input[type="button"]:focus, .elementor-33089 input[type="submit"]:hover, .elementor-33089 input[type="submit"]:focus, .elementor-33089 .elementor-button:hover, .elementor-33089 .elementor-button:focus{background-color:#E89400;}
.elementor-33089 e-page-transition{background-color:#FFBC7D;}
.elementor-33089 p{margin-block-end:1em;}
.elementor-33089 a{color:var( --e-global-color-primary );}
.elementor-33089 a:hover{color:#046bd2;}
.elementor-33089 h1{color:#0D2B55;font-family:"Inter", Sans-serif;font-size:52px;font-weight:700;line-height:1.1em;}
.elementor-33089 h2{color:#0D2B55;font-family:"Inter", Sans-serif;font-size:38px;font-weight:700;line-height:1.15em;}
.elementor-33089 h3{color:#0D2B55;font-family:"Inter", Sans-serif;font-size:28px;font-weight:700;line-height:1.2em;}
.elementor-33089 h4{color:#0D2B55;font-size:20px;font-weight:700;line-height:1.25em;}
.elementor-33089 h5{color:#0D2B55;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:1.3em;}
.elementor-33089 .elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}
.elementor-33089 .e-con{--container-max-width:1280px;--container-default-padding-top:1em;--container-default-padding-right:1em;--container-default-padding-bottom:1em;--container-default-padding-left:1em;}
.elementor-33089 .elementor-widget:not(:last-child){margin-block-end:01rem;}
.elementor-33089 .elementor-element{--widgets-spacing:01rem 3rem;--widgets-spacing-row:01rem;--widgets-spacing-column:3rem;}
@media(max-width:1024px){.elementor-33089{--e-global-typography-primary-font-size:2rem;--e-global-typography-secondary-font-size:1.5rem;--e-global-typography-c2931da-font-size:2.2rem;--e-global-typography-b61fe73-font-size:2rem;--e-global-typography-8b6f056-font-size:2rem;--e-global-typography-a3be363-font-size:1.5rem;}.elementor-33089 button, .elementor-33089 input[type="button"], .elementor-33089 input[type="submit"], .elementor-33089 .elementor-button{font-size:var( --e-global-typography-btn0001-font-size );}.elementor-33089 .elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.elementor-33089 .e-con{--container-max-width:1024px;}}
@media(max-width:767px){.elementor-33089{--e-global-typography-primary-font-size:32px;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.1px;--e-global-typography-secondary-font-size:1.5rem;--e-global-typography-c2931da-font-size:2.4rem;--e-global-typography-c2931da-line-height:1.2em;--e-global-typography-c2931da-letter-spacing:1.5px;--e-global-typography-b61fe73-font-size:1.7rem;--e-global-typography-867f28d-font-size:1rem;--e-global-typography-eb6d7d0-font-size:1.3em;--e-global-typography-eb6d7d0-letter-spacing:-0.1px;--e-global-typography-c578778-font-size:1.1em;--e-global-typography-9ca3ae0-font-size:30px;--e-global-typography-1aceff4-letter-spacing:-0.1px;}.elementor-33089 h2{font-size:1.3em;letter-spacing:-0.1px;}.elementor-33089 button, .elementor-33089 input[type="button"], .elementor-33089 input[type="submit"], .elementor-33089 .elementor-button{font-size:var( --e-global-typography-btn0001-font-size );}.elementor-33089 .elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.elementor-33089 .e-con{--container-max-width:767px;}}
/* =========================================================
XENTYS — PAGE HERO · component rulebook v1 (15 Oct 2026)
ONE stylesheet for all three hero variants. Paste it, unchanged,
into the hero section's Advanced → Custom CSS. Never edit a copy:
change this file and re-apply it everywhere.
Basis: /afstudeerstage-bij-xentys/ (37479), chosen by Sarah.
Stats column lifted from /inkoopfuncties/ (31869).
Variants (decided by what the section contains, not by a class):
Hero breadcrumb · eyebrow · title · body · buttons
Hero + checks … + .xentys-page-hero-meta (✓ row)
Hero + stats … + .xentys-page-hero-stats (right column)
Structures it accepts:
flat hero > inner > items (37479)
nested hero > layout > inner > left (+ stats) (3323, 31869)
Left/right edge = THE SITE STANDARD (v1.2, Sarah 16 Oct): content
max 1280px, centred, side gutter clamp(20px, 5vw, 64px). Edge = 64
at 1280, 80 at 1440, 320 at 1920, 38 at 768, 20 at 390 — measured
on 48 sections across 12 pages, the majority. Every section follows it.
Top padding: the header (92px desktop, 70px tablet/phone) floats
over the top of EVERY hero. On pages with the service switcher the
sticky switcher sits under the header and the two together still
cover the top 92px. So one value for all: 134 desktop/tablet
(42px visible under the header, = afstudeerstage), 87 phone.
v1.1 — the solid-header exception of v1 was wrong (Sarah, 15 Oct).
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 {
background: #0d2b55 !important;
padding: 134px clamp(20px, 5vw, 64px) 88px !important;
border: 0 !important;
overflow: hidden !important;
}
/* Some heroes carry Elementor's native background overlay (#1e293b @ .88,
drawn on ::before) over a photo. Switch it off: the hero is flat navy.
::after is left alone — that is where the central xentys-grid-on paints. */
.elementor-33089 .elementor-element.elementor-element-9f9f612::before {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
opacity: 0 !important;
}
/* one content box, whatever the structure */
.elementor-33089 .elementor-element.elementor-element-9f9f612 > .e-con-inner {
width: 100% !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-layout,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-main {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-layout > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-main > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-left > .e-con-inner {
max-width: none !important;
padding: 0 !important;
}
/* flat structure: the inner box is the item stack */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* nested structure: the inner box holds the left stack (+ stats) */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .xentys-page-hero-left),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .e-con-inner > .xentys-page-hero-left) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: center !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .e-con-inner > .xentys-page-hero-stats),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .xentys-page-hero-stats),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .e-con-inner > .xentys-page-hero-right),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .xentys-page-hero-right) {
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) !important;
column-gap: 72px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(.xentys-page-hero-left) > .e-con-inner {
display: contents !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-left {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* service pages wrap the stats in a right-hand column box (v1.4) */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-right {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-right > .e-con-inner {
max-width: none !important;
padding: 0 !important;
}
/* =========================================================
BREADCRUMB
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb {
margin-bottom: 24px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb *,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb a,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb span,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb p,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb .elementor-shortcode {
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.50) !important;
text-decoration: none !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-breadcrumb a:hover {
color: rgba(255, 255, 255, 0.80) !important;
}
/* =========================================================
EYEBROW (bar comes from the central .xentys-kicker-bar)
The central sheet adds 16px above the eyebrow in the nested
structure only; cancel it so both structures space alike.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-left > .elementor-element.xentys-page-hero-eyebrow.xentys-page-hero-eyebrow.xentys-page-hero-eyebrow.xentys-page-hero-eyebrow.xentys-page-hero-eyebrow.xentys-page-hero-eyebrow {
margin-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-eyebrow {
position: relative !important;
margin-bottom: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-eyebrow,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-eyebrow .elementor-heading-title {
color: #ffa300 !important;
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0.48px !important;
text-transform: uppercase !important;
}
/* =========================================================
TITLE
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title {
max-width: 768px !important;
margin-bottom: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title .elementor-heading-title {
color: #ffffff !important;
font-family: Inter, sans-serif !important;
font-size: 48px !important;
font-weight: 700 !important;
line-height: 1.02 !important;
letter-spacing: -0.025em !important;
text-transform: none !important;
font-style: normal !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title span,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title .elementor-heading-title span {
color: #ffa300 !important;
}
/* =========================================================
BODY (text-editor or heading widget)
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body {
max-width: 576px !important;
margin-bottom: 32px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body p,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body .elementor-heading-title {
color: rgba(255, 255, 255, 0.70) !important;
font-family: Inter, sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
letter-spacing: -0.011em !important;
text-transform: none !important;
font-style: normal !important;
margin-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body p:last-child {
margin-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body a {
color: #ffa300 !important;
text-decoration: underline !important;
}
/* =========================================================
BUTTONS
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-buttons {
width: 100% !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn {
width: fit-content !important;
max-width: fit-content !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Elementor's wrapper boxes add ~8px of line slack around a lone button;
flatten them so a single button spaces exactly like a button row (v1.4) */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn .elementor-button-wrapper {
display: flex !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner > .xentys-page-hero-btn,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-left > .xentys-page-hero-btn {
margin-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn + .xentys-page-hero-meta {
margin-top: 56px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn .elementor-button {
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
padding: 10px 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border-radius: 2px !important;
border: 1px solid transparent !important;
box-shadow: none !important;
font-family: Inter, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
transition: background 0.2s ease, border-color 0.2s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn .elementor-button-content-wrapper,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn .elementor-button-text {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-primary .elementor-button {
background: #ffa300 !important;
color: #0d2b55 !important;
border-color: #ffa300 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-primary .elementor-button:hover {
background: #e8970a !important;
border-color: #e8970a !important;
}
/* Button icons (e.g. the arrow) take the button's text colour (v1.3):
navy on the amber button, white on the outline one. */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-primary .elementor-button-icon,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-primary .elementor-button-icon i,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-primary .elementor-button-icon svg,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-primary .elementor-button-icon svg * {
color: #0d2b55 !important;
fill: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-secondary .elementor-button-icon,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-secondary .elementor-button-icon i,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-secondary .elementor-button-icon svg,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-secondary .elementor-button-icon svg * {
color: #ffffff !important;
fill: #ffffff !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-secondary .elementor-button {
background: transparent !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn-secondary .elementor-button:hover {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.60) !important;
}
/* =========================================================
✓ ROW (Hero + checks)
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta {
width: 100% !important;
max-width: 980px !important;
display: flex !important;
flex-wrap: wrap !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 16px 40px !important;
margin: 56px 0 0 0 !important;
padding: 0 !important;
border-top: none !important;
}
/* heroes without buttons: intro → ✓ row stays 56 (v1.4) */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body + .xentys-page-hero-meta {
margin-top: 24px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta-item {
width: auto !important;
max-width: 34ch !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta-item,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta-item .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta-item .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta-item p {
display: inline-flex !important;
align-items: flex-start !important;
gap: 10px !important;
color: rgba(255, 255, 255, 0.82) !important;
font-family: Inter, sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: normal !important;
margin: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta-item .elementor-heading-title::before,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta-item p::before {
content: "✓" !important;
flex: 0 0 auto !important;
width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(255, 163, 0, 0.16) !important;
color: #ffa300 !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1 !important;
margin-top: 1px !important;
}
/* =========================================================
STATS COLUMN (Hero + stats) — from /inkoopfuncties/
========================================================= */
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stats {
width: 100% !important;
margin: 0 !important;
padding: 0 0 0 42px !important;
border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
display: flex !important;
flex-direction: column !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat {
margin: 0 !important;
padding: 0 0 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat + .xentys-page-hero-stat {
padding-top: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-value,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-value .elementor-heading-title {
margin: 0 !important;
color: #ffa300 !important;
font-family: Inter, sans-serif !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-label,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-label .elementor-heading-title {
margin: 0 !important;
color: rgba(255, 255, 255, 0.65) !important;
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* =========================================================
TABLET 768–1024
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-9f9f612 {
padding: 134px clamp(20px, 5vw, 64px) 80px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title .elementor-heading-title {
font-size: 36px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .e-con-inner > .xentys-page-hero-stats),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .xentys-page-hero-stats),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .e-con-inner > .xentys-page-hero-right),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .xentys-page-hero-right) {
grid-template-columns: minmax(0, 1fr) !important;
column-gap: 0 !important;
row-gap: 44px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stats {
padding: 30px 0 0 !important;
border-left: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.20) !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat + .xentys-page-hero-stat {
padding: 0 !important;
border: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-value,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-value .elementor-heading-title {
font-size: 30px !important;
}
}
/* =========================================================
PHONE ≤ 767 (87px top: agreed phone-hero clearance)
========================================================= */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-9f9f612 {
padding: 87px clamp(20px, 5vw, 64px) 80px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-title .elementor-heading-title {
font-size: 32px !important;
line-height: 1.08 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body {
max-width: 100% !important;
margin-bottom: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body p,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body .elementor-heading-title {
font-size: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-meta {
max-width: 100% !important;
flex-direction: column !important;
gap: 12px !important;
margin-top: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-body + .xentys-page-hero-meta {
margin-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-btn + .xentys-page-hero-meta {
margin-top: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .e-con-inner > .xentys-page-hero-stats),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .xentys-page-hero-stats),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .e-con-inner > .xentys-page-hero-right),
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-inner:has(> .xentys-page-hero-right) {
grid-template-columns: minmax(0, 1fr) !important;
column-gap: 0 !important;
row-gap: 36px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stats {
padding: 28px 0 0 !important;
border-left: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.20) !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat + .xentys-page-hero-stat {
padding: 0 0 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat + .xentys-page-hero-stat {
padding-top: 22px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-value,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-value .elementor-heading-title {
font-size: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-label,
.elementor-33089 .elementor-element.elementor-element-9f9f612 .xentys-page-hero-stat-label .elementor-heading-title {
font-size: 13px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-876b8bf *//* =========================================================
XENTYS — SECTION [3], "Interim opdrachten"
/werken-als-interim-inkoper/ (32464), container e8bb91b
Modelled on xentys-impact-section, the built "prose left,
image right" component (5165-interim-inkoop.md:1290-1650).
Values are the ones SECTION-GRAMMAR.md measured across the
nine rebuilt pages; nothing here is tuned by eye.
Paste on: the section container -> Advanced -> Custom CSS.
---------------------------------------------------------
WHY THE LAST ATTEMPT RENDERED AS A GREY VOID
---------------------------------------------------------
Three faults, all settings on the elements rather than CSS:
1. c7052a7 carries background_overlay_color #494949. Elementor
paints a container's background overlay on ::before, so the
grey wash survived every background rule written against the
element itself. Killed in 04 below.
2. Both 49a8a58 and c7052a7 carry a grey box_shadow. The house
set is four navy-tinted shadows and box-shadow:none is
written 41x in the corpus. Killed in 02 and 04.
3. The headings "industrie productie high tech", "Tarief EUR 120+"
and "Per uur" are hide_desktop + hide_tablet + hide_mobile.
They render nothing at any width, so this column was never a
rate card. What it actually holds is an image, two zero-weight
dividers and one button. Designed for that, not for the copy
that is switched off.
No copy is added, removed or reworded. The hidden widgets stay
hidden. The second divider is hidden as a DESIGN choice so the
accent bar reads as one 64x2 rule, per SECTION-GRAMMAR 8.4.
========================================================= */
/* ---------------------------------------------------------
01. SECTION SHELL
Grammar 1a/1b/1d: edge-to-edge outer, house padding triple,
white ground, and a hairline below because the next section
is also light.
--------------------------------------------------------- */
.elementor-33089 .elementor-element.elementor-element-876b8bf {
width: 100% !important;
max-width: none !important;
background-color: #ffffff !important;
padding: 84px 48px 92px !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid #e8edf3 !important;
border-radius: 0 !important; /* was 2px on the outer */
box-shadow: none !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf > .e-con-inner {
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
02. THE TWO-COLUMN GRID
Grammar 4a shape 3 — content-left / visual-right:
minmax(0,1.6fr) minmax(340px,0.75fr), gap 64px, align center.
`center` because the right column is a photograph (4b).
--------------------------------------------------------- */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.75fr) !important;
column-gap: 64px !important;
row-gap: 0 !important;
/* Grammar 4b says `center` when one column is a photograph, and the built
impact section does exactly that. Deviating deliberately: there the left
column carries eyebrow + heading + subheading + body and is a comparable
height to the image. Here it is only a heading and one paragraph — about
40% of the panel — so centring left a ~190px void above the heading in
the render. Tops aligned instead, which is what the corpus does whenever
both columns are unequal text stacks (4b, flex-start). */
align-items: start !important;
box-shadow: none !important; /* fault 2 */
border-radius: 0 !important;
background: transparent !important;
}
/* ---------------------------------------------------------
03. LEFT COLUMN — heading + prose
Grammar 2: heading --14px--> lead. gap:0 declared deliberately;
an unset Elementor container gap adds space on top of margins
(5165:1275-1279).
--------------------------------------------------------- */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-content {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important; /* was 2em — grammar 10 cause 1 */
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading {
width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
}
/* Grammar 3: section H2 is 44-48px desktop. 34px is the MOBILE step —
using it on desktop is what made the last attempt read as "small
pale text". This element is tagged h3 in the markup; the tag is
left alone, only its size is corrected. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading h1,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading h2,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading h3,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading h4 {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 48px !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.04em !important;
color: #0d2b55 !important;
text-align: left !important;
text-transform: none !important;
font-style: normal !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body {
width: 100% !important;
max-width: 640px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Elementor's Text Editor default wins unless the colour is said on
the wrapper, the widget-container, the element itself and its
children — the built pattern with its own comment is 3323:2253-2272. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body li,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body span {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: -0.01em !important;
color: #667085 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p { margin: 0 0 14px !important; }
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p:last-child { margin-bottom: 0 !important; }
/* ---------------------------------------------------------
04. RIGHT COLUMN — the image panel
The image is a CONTAINER BACKGROUND, not an image widget, so
min-height + cover does the work the component's would
normally do (spec-impact-and-proof, re-application note).
430px is the built impact image height (5165:1602).
--------------------------------------------------------- */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
min-height: 380px !important;
align-self: stretch !important;
margin: 0 !important;
padding: 0 !important;
/* Navy sits UNDER the photograph. If the image is slow, missing or the
media id ever changes, the panel is a navy block rather than a white
void — the failure mode is on-palette instead of broken. */
background-color: #0d2b55 !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border-radius: 2px !important;
box-shadow: none !important; /* fault 2 */
overflow: hidden !important;
}
/* c7052a7 is a BOXED container, so Elementor renders its children inside an
.e-con-inner. Flex rules on the outer position nothing — that is why the
accent rule and the button first rendered at the top of the panel instead
of the bottom. The layout has to go on the inner. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > .e-con-inner {
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 380px !important;
margin: 0 !important;
padding: 28px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-end !important;
gap: 0 !important;
position: relative !important;
z-index: 1 !important;
}
/* fault 1 — Elementor paints background_overlay_color (#494949) on
::before. Nothing written against the element removes it. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual::before {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
/* A soft navy scrim so the button reads against any part of the photo.
Not the grey wash: a bottom-up gradient inside the panel, which is
the built treatment for a panel over a photograph (5165:2887-2930).
::after is free — xentys-grid-on is not on this element. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
background: linear-gradient(180deg,
rgba(13, 43, 85, 0.00) 45%,
rgba(13, 43, 85, 0.62) 100%) !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > * {
position: relative !important;
z-index: 1 !important;
}
/* ---------------------------------------------------------
05. THE ACCENT RULE
Both dividers are weight:0, i.e. invisible spacers carrying no
copy. Grammar 8.4: where an accent bar is wanted it is a divider
widget, 64x2px #ffa300 (36431-vacatures.md:176-196). The first
becomes that bar; the second is hidden so the composition reads
as one rule above one action.
--------------------------------------------------------- */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule {
width: 64px !important;
max-width: 64px !important;
margin: 0 0 16px !important;
padding: 0 !important;
align-self: flex-start !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule .elementor-divider { padding: 0 !important; }
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule .elementor-divider-separator {
width: 64px !important;
border-top: 2px solid #ffa300 !important;
border-block-start: 2px solid #ffa300 !important;
margin: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule--last { display: none !important; }
/* ---------------------------------------------------------
06. THE BUTTON
Grammar 6: amber fill takes NAVY text, radius 2px, never a pill,
and a button widget needs width:fit-content or it floats in a
full-width block.
--------------------------------------------------------- */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta {
width: fit-content !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-self: flex-start !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button:visited {
display: inline-flex !important;
align-items: center !important;
min-height: 50px !important;
padding: 13px 20px !important;
background-color: #ffa300 !important;
color: #0d2b55 !important;
border: 0 !important;
border-radius: 2px !important;
box-shadow: none !important;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
line-height: 1.2 !important;
letter-spacing: 0.01em !important;
transition: background-color .15s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button:hover,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button:focus {
color: #0d2b55 !important;
}
/* ---------------------------------------------------------
07. TABLET (768-1024) — grammar 4c: every two-column
section collapses at <=1024px.
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf { padding: 72px 32px 80px !important; }
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 40px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading h3 {
font-size: 40px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual { min-height: 360px !important; }
}
/* ---------------------------------------------------------
08. MOBILE (<=767)
--------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf { padding: 60px 24px 68px !important; }
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 32px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading h3 {
font-size: 34px !important;
letter-spacing: -0.03em !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p { font-size: 15px !important; }
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual {
min-height: 280px !important;
padding: 20px !important;
}
}
/* ---------------------------------------------------------
09. SMALL MOBILE (<=480) — grammar 1b: sides only.
--------------------------------------------------------- */
@media (max-width: 480px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf {
padding-left: 20px !important;
padding-right: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading h3 {
font-size: 31px !important;
}
}
/* 2026-09-24 - Sarah's role-intro values, translated into this page's ladder.
Her file has ONE block, @media (max-width: 1024px): 1fr / gap 36 / 360px. This section
already had a three-band ladder (768-1024, <=767, <=480), so her values were applied
INTO those bands rather than added after them - which would have orphaned three rules
and let source order decide the 768-1024 rendering.
The page's <=480 min-height 320px is KEPT: her file has no 480 rule, so applying her
360px there would overwrite a considered value with one authored for a different
question. Fidelity to a spec that never addressed a case is extrapolation, not fidelity.
Her grid is SECTION-GRAMMAR 4a 'visual-left / list-right' MIRRORED so the picture sits
right: 1.1fr / 0.9fr, 72px, align center. Six shapes, not a seventh. Do not normalise.
gap: 72px and align-items: center were ALREADY her values before this edit.
Her figure rules target an ; this column is a background-image container, so
object-fit/object-position were translated to background-size/background-position and
height to min-height. */
/* =========================================================
XENTYS — IMPACT SECTION, variant B (body copy)
For the four candidate-facing "werken als …" pages:
32464 · 33498 · 33089 · 32699
Source: data/design-corpus/spec-impact-and-proof.md §2 (canonical
ruling), §3 (tree), §4 (values), §6 (the verbatim variant-B CSS,
byte-identical on 56808 / 5703). Everything below is that file
verbatim except the changes listed in "WHAT CHANGED" — no value
has been retuned by eye.
---------------------------------------------------------
HOW TO PASTE
---------------------------------------------------------
Written in theme-stylesheet form, so the page id is explicit:
.elementor-33089 .elementor-element.elementor-element-876b8bf
33089 = 32464 | 33498 | 33089 | 32699.
To ship it the way the four services impact sections ship
instead — section → Advanced → Custom CSS — do one mechanical
replace:
".elementor-33089 .elementor-element.elementor-element-876b8bf" → ".elementor-33089 .elementor-element.elementor-element-876b8bf"
That is the whole conversion. Every rule in this file starts with
that exact string, nothing else needs touching.
---------------------------------------------------------
WHICH SECTION THIS IS, PER PAGE
---------------------------------------------------------
The top-level index differs per page. Resolved from the cached
json, never assumed:
32464 werken-als-interim-inkoper → section [3]
33498 werken-als-strategisch-inkoper → section [1]
33089 werken-als-tactisch-inkoper → section [1]
32699 werken-als-technisch-inkoper → section [3]
Nothing here can reach the shared `template` widgets: every
.elementor-33089 .elementor-element.elementor-element-876b8bf is gated on .xentys-impact-section, a class that exists
on this one container only. No JavaScript anywhere.
---------------------------------------------------------
WHY VARIANT B
---------------------------------------------------------
§10 note 2 says pick the variant by CONTENT. This block is a
prose explainer — one text-editor of running Dutch — with ONE
hard number beside it, not four quantified proof points. So:
no card grid, 1.35fr / 0.85fr split, 72px gap, 42px heading,
470px visual. §10 note 3's shell (#ffffff, 84/48/92 · 72/32/80 ·
60/24/68 padding, 1px #e8edf3 bottom rule, 1440px inner cap) is
inherited exactly, so the rhythm matches the sections above and
below it.
---------------------------------------------------------
WHAT CHANGED vs the canonical services impact section, and why
---------------------------------------------------------
1. THE RIGHT COLUMN IS A RATE CARD, NOT A PHOTO CAPTION.
The component's right column is a photograph with a small
white panel overlaid. These pages have the same photograph —
but as a container BACKGROUND, not an image widget — and the
panel has to hold four widgets (hairline, the number, its
unit, the CTA, hairline) instead of one caption line. So the
geometry, ground and shadow of `-caption` are the spec values
untouched; only its padding opens from `18px 20px` to
`22px 24px 24px`, and `-visual` gains background-size/position
so the container background behaves like the image widget did.
2. NEW CLASSES `-unit`, `-rule`, `-cta`. The family has no name
for a unit label, a hairline or a button, because the built
pages need none. `-unit` copies the proof panel's `-company`
label (11px / 800 / .14em / uppercase / #64748b) so the two
stat idioms agree; `-cta` copies the page-hero primary button
verbatim; `-rule` is a 1px #e2e8f0 line.
3. `-value` RE-SCALED, and its leftover media queries DROPPED.
Canonical is `clamp(22px, 1.8vw, 28px)` — sized for one of
four cards. Here it is the only number in the section and
carries the whole right column, so: `clamp(26px, 2.1vw, 34px)`.
§2 says variant B still ships dead `-grid` / `-card` / `-value`
rules in its tablet and mobile queries and to reproduce them
verbatim. Not done, deliberately: those set `-value` to 30px
on tablet and mobile, i.e. LARGER than desktop. Harmless dead
CSS on the built pages, a real bug here where `-value` is live.
4. EYEBROW GETS `order: -1`. Widget order on all four pages is
h3-then-eyebrow, the reverse of the component. This puts the
eyebrow back on top without moving the widget. Reordering it
in the editor instead is fine — the rule is idempotent.
5. A LINK RULE IN THE BODY SLOT. The canonical block has none;
its body carried no links. 33498 links "inkoop" to the wiki.
6. LEGACY CHROME RESET. These containers arrive at 70% width
with 2em padding, a 2px radius, a tinted ground, a background
overlay and two drop shadows. The shell cannot land on top of
that, so each is zeroed where it sits. Nothing outside
.xentys-impact-section is touched.
7. A BOXED-CONTAINER SAFETY NET. §10 note 1 says every inner
container must be content_width: full. On these pages
`-content` and `-visual` default to boxed, which renders an
extra .e-con-inner between the container and its widgets —
the grid and flex rules would then bite on an empty wrapper.
Setting content_width: full in Elementor is still the right
fix; `display: contents` makes the CSS correct either way.
Deliberately NOT applied to the section's own .e-con-inner:
that one carries the 1440px boxed cap.
---------------------------------------------------------
HIDDEN WIDGETS FOUND IN THE JSON — all four pages checked
---------------------------------------------------------
· The small second heading in the left column ("industrie
productie high tech", "industrie productie offshore" on 33089)
carries hide_desktop + hide_tablet + hide_mobile on ALL FOUR
pages. That is the eyebrow slot, and it is invisible
everywhere today. Rules are written for it anyway, order: -1
included, so it lands correctly if it is ever unhidden.
Nothing here unhides it — that stays a content decision.
· The stat pair is hidden on ONE page only:
32464 "Tarief €120+" / "Per uur" HIDDEN on desktop,
tablet and mobile
33498 "VANAF €60K+" / "Salaris per jaar" visible
33089 "VANAF €60K+" / "Interim en vast" visible
32699 "VANAF €60K+" / "Salaris per jaar" visible
So 32464 renders the rate card as hairline / button / hairline.
The card's rhythm is written on adjacent siblings, which CSS
still honours across display:none elements, so that page
degrades to a deliberate panel instead of collapsing.
· Both divider widgets have weight = 0px on all four pages —
they draw nothing today. `-rule` forces the width back on,
custom property included.
========================================================= */
/* =========================================================
01. OUTER SECTION — the shared shell (§10 note 3)
The six lines under the border are the legacy chrome reset
from "WHAT CHANGED" 6.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf {
width: 100% !important;
background: #ffffff !important;
padding: 84px 48px 92px !important;
border-top: 0 !important;
border-bottom: 1px solid #e8edf3 !important;
overflow: hidden !important;
--width: 100% !important;
--content-width: 1440px !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* =========================================================
02. BOXED-CONTAINER SAFETY NET — "WHAT CHANGED" 7
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-content > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption > .e-con-inner {
display: contents !important;
}
/* =========================================================
03. INNER LAYOUT — variant B grid
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
gap: 72px !important;
align-items: center !important;
/* legacy chrome: tinted ground, overlay, 6px drop shadow */
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner > .elementor-background-overlay {
display: none !important;
}
/* =========================================================
04. LEFT CONTENT
gap: 0 is load-bearing (§10 note 4) — Elementor's container
gap otherwise stacks on top of every margin below.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-content {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
align-self: center !important;
gap: 0 !important;
}
/* =========================================================
05. EYEBROW — hidden on every breakpoint on all four pages
today. order: -1 per "WHAT CHANGED" 4.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-eyebrow {
order: -1 !important;
width: auto !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-eyebrow .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-eyebrow,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-eyebrow .elementor-heading-title {
color: #d97706 !important;
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: 0.13em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-eyebrow .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-eyebrow::before,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-eyebrow .elementor-heading-title::before {
content: none !important;
display: none !important;
}
/* =========================================================
06. MAIN HEADING — stays an h3, the h1 lives in the hero
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading {
width: 100% !important;
max-width: 700px !important;
margin: 0 0 34px !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 36px !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.04em !important;
text-align: left !important;
}
/* =========================================================
07. BODY COPY
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body {
width: 100% !important;
max-width: 760px !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body .elementor-widget-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p {
margin: 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.75 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p + p {
margin-top: 18px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p:last-child {
margin-bottom: 0 !important;
}
/* "WHAT CHANGED" 5 — not in the canonical block */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body a {
color: #0d2b55 !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-decoration-color: rgba(13, 43, 85, 0.35) !important;
text-underline-offset: 3px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body a:hover,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body a:focus-visible {
color: #d97706 !important;
text-decoration-color: #d97706 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body strong,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body b {
color: #0d2b55 !important;
font-weight: 600 !important;
}
/* =========================================================
08. RIGHT VISUAL — "WHAT CHANGED" 1
The photograph is a container background here, not an image
widget, so the geometry lands on the container and the
background is forced to behave like the widget did.
Elementor's overlay child is retyped from flat #494949 to a
navy scrim, so the white rate card reads cleanly on it.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual {
position: relative !important;
isolation: isolate !important;
display: block !important;
align-self: stretch !important;
width: 100% !important;
min-width: 0 !important;
min-height: 430px !important;
margin: 0 !important;
padding: 0 !important;
background-size: cover !important;
background-position: center 28% !important;
background-repeat: no-repeat !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > .elementor-background-overlay {
background-color: #0d2b55 !important;
background-image: none !important;
opacity: 0.28 !important;
z-index: 0 !important;
}
/* =========================================================
09. IMAGE — inert today: no image widget on these four
pages. Kept because it is the canonical slot. Drop a
widget/image carrying this class into the visual and it
takes over from the container background, no further CSS.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-image {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
height: 470px !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-image .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-image picture {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center !important;
}
/* =========================================================
10. CAPTION PANEL — the rate card
Same overlay treatment as the built pages: white 0.96 panel
pinned into the photograph, 34px inset, no yellow band.
Only the padding differs, per "WHAT CHANGED" 1.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > .xentys-impact-caption,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption.e-con,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption.e-con-full,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption.e-flex {
position: absolute !important;
left: 34px !important;
right: 34px !important;
bottom: 34px !important;
top: auto !important;
z-index: 5 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
width: auto !important;
max-width: calc(100% - 68px) !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 22px 24px 24px !important;
background: rgba(255, 255, 255, 0.96) !important;
border: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
box-shadow: 0 12px 28px rgba(13, 43, 85, 0.08) !important;
transform: none !important;
flex: none !important;
align-self: auto !important;
}
/* =========================================================
11. CAPTION TITLE — canonical slot, unused on these four
pages. Kept so a one-line caption can be added later.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption-title,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption-title .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption-title .elementor-heading-title {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption-title .elementor-heading-title {
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.025em !important;
}
/* =========================================================
12. HAIRLINES — the two divider widgets, top and bottom of
the rate card. Both are weight 0 in the json, so the width
has to be forced back on, custom property included.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule .elementor-divider {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule .elementor-divider-separator {
--divider-border-width: 1px !important;
--divider-border-style: solid !important;
--divider-color: #e2e8f0 !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
border-top: 1px solid #e2e8f0 !important;
}
/* =========================================================
13. STAT VALUE — the one hard number. "WHAT CHANGED" 3.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value .elementor-heading-title {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: clamp(26px, 2.1vw, 34px) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -0.035em !important;
text-align: left !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
white-space: normal !important;
}
/* =========================================================
14. STAT UNIT — "Per uur", "Salaris per jaar", "Interim en
vast". Same tiny uppercase label the proof panel uses for
the client name, so the two stat idioms agree.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-unit,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-unit .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-unit .elementor-heading-title {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #64748b !important;
font-family: Inter, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
text-align: left !important;
}
/* =========================================================
15. RATE-CARD RHYTHM
Written on adjacent siblings on purpose: CSS still honours
"+" across display:none elements, so 32464 — which hides
both stat widgets — keeps its spacing and renders as
hairline / button / hairline rather than collapsing.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule + .xentys-impact-value {
margin-top: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value + .xentys-impact-unit {
margin-top: 8px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-unit + .xentys-impact-cta {
margin-top: 22px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta + .xentys-impact-rule {
margin-top: 24px !important;
}
/* =========================================================
16. CTA — the site's primary button, geometry verbatim from
the page-hero primary (spec-page-hero §9): 50px min-height,
13/20 padding, 3px radius, Inter 14 / 800, amber on navy.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta {
width: fit-content !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-self: flex-start !important;
background: transparent !important;
box-shadow: none !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button-wrapper {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button {
min-width: 0 !important;
min-height: 50px !important;
height: auto !important;
padding: 13px 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: #ffa300 !important;
border: 1px solid #ffa300 !important;
border-radius: 3px !important;
box-shadow: none !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
line-height: 1.2 !important;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button:hover,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button:focus-visible {
border-color: #e8970a !important;
color: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button-content-wrapper,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button-text {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: inherit !important;
}
/* =========================================================
17. TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf {
padding: 72px 32px 80px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title {
font-size: 33px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual {
min-height: 360px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-image {
height: 440px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value .elementor-heading-title {
font-size: 32px !important;
}
}
/* =========================================================
18. MOBILE
========================================================= */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf {
padding: 60px 24px 68px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading {
margin-bottom: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title {
font-size: 29px !important;
line-height: 1.1 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-body p {
max-width: 100% !important;
font-size: 17px !important;
line-height: 1.7 !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual {
min-height: 360px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-image {
height: 360px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > .xentys-impact-caption,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption.e-con,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption.e-con-full,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption.e-flex {
left: 18px !important;
right: 18px !important;
bottom: 18px !important;
max-width: calc(100% - 36px) !important;
padding: 18px 18px 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value .elementor-heading-title {
font-size: 30px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-rule + .xentys-impact-value {
margin-top: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-unit + .xentys-impact-cta {
margin-top: 18px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta + .xentys-impact-rule {
margin-top: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button {
min-height: 46px !important;
padding: 12px 18px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-caption-title .elementor-heading-title {
font-size: 19px !important;
}
}
/* =========================================================
19. SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf {
padding-left: 20px !important;
padding-right: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading .elementor-heading-title {
font-size: 27px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual {
min-height: 320px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-image {
height: 320px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-value .elementor-heading-title {
font-size: 28px !important;
}
}
/* =========================================================
20. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-cta .elementor-button {
transition: none !important;
}
}
/* 2026-09-24 fix 1 — one content width. Measured on 33089 at 1440: inner edges landed
at 0, 48, 64 and 80px because transplanted sections carry 5507's 1312 grid and
Elementor's own sections default to 1344. The hero is the correct one: 1280, the
site grid. Capping the inner wrapper and centring it puts every inner edge at 80
on a 1440 viewport without touching any section's padding — so nothing about the
kept sections changes except where their content starts.
Scoped to the section's OWN inner wrapper and the named inner directly inside it,
never `[class*="-inner"]` at any depth: that would also have hit the inner wrapper
of every loop-grid card and every accordion panel on the page.
Two places can decide this width — Elementor's per-section setting and this CSS.
I changed only the CSS; it compiles to a higher specificity than Elementor's own
per-element rule and carries !important, so it wins without the settings moving. */
.elementor-33089 .elementor-element.elementor-element-876b8bf > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-876b8bf > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-876b8bf > .e-con-inner > [class*="-inner"] {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 fix 4 — the "Alle inkoopvacatures" button was inside the visual
container, sitting on the photograph at its top-left. It is what the salary panel
left behind when its headings moved to the hero meta row. Moved into the copy
column below the prose, where her §2 puts it and where the live page had it.
The old rate-card rhythm rules that referenced it are inert now, not removed —
they are adjacent-sibling rules that simply no longer match. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-content .xentys-impact-cta {
align-self: flex-start !important;
margin-top: 28px !important;
}
/* 2026-09-24 — sections set to content_width:full have NO `.e-con-inner`, so their
children are DIRECT children of the section. Every cap we have written has aimed at
that wrapper, which is why the same handful of sections stayed off-grid through three
rounds while everything around them moved. Not an older kind of section — every one of
them is elType:container, same as the rest. Capping the direct children as well makes
the rule cover both shapes. On a boxed section these .elementor-33089 .elementor-element.elementor-element-876b8bfs simply match nothing. */
.elementor-33089 .elementor-element.elementor-element-876b8bf > .e-con,
.elementor-33089 .elementor-element.elementor-element-876b8bf > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* [dev 2026-09-25] S2 intro layout, from Sarah's spec verbatim
(.xentys-role-intro-layout). Ours is .xentys-impact-inner and holds the same two
children - copy and visual - so the grid maps directly. "Copy centred against
it" is her align-items: center. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
gap: 72px !important;
align-items: center !important;
}
@media (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-inner {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
}
/* [dev 2026-09-25] Grey hue removed. Sarah: "The image doesn't have the grey hue
over it", and her document says why - "the veiled-background version from round 3
is gone, it needed content the section does not have." Her decision, not our
reading. The ::after gradient above is neutralised rather than deleted so the
round-3 treatment stays recoverable. NOTE: this gradient exists ONLY on 32464 -
the other three role pages never had it. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual::after {
content: none !important;
background: none !important;
}
/* [dev 2026-09-25] S2 heading-to-body spacing, her rule:
.xentys-role-intro-copy > .xentys-h2 { margin-bottom: 20px }. Ours is
.xentys-impact-heading in the same position. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-heading {
margin-bottom: 20px !important;
}
/* [dev 2026-09-25] S2 figure. Her spec needs ; a container
background cannot carry a caption, so the photo becomes a real image widget -
Elementor renders that as figure/img/figcaption natively when a caption is set.
The container's background_image is cleared so the photo is not painted twice.
Class is HERS, .xentys-role-intro-figure, as with .xentys-process-step-num.
Token mapping, flagged not sourced: --xn-muted -> #667085. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-role-intro-figure {
margin: 0 !important;
width: 100% !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-role-intro-figure img {
display: block !important;
width: 100% !important;
height: 430px !important;
object-fit: cover !important;
object-position: center 28% !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-role-intro-figure figcaption,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-role-intro-figure .widget-image-caption {
margin: 12px 0 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
text-align: left !important;
}
@media (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-role-intro-figure img {
height: 360px !important;
}
}
/* [dev 2026-09-30] S2 legacy shell removed. Sarah's figure/figcaption was built
INSIDE .xentys-impact-visual rather than replacing it, so the caption rendered on
the old component's navy and the 28px inner padding framed the photo. The caption's
own styling was always correct - it was the GROUND behind it that was wrong, which a
computed read of the caption cannot show.
Her spec is a photo on the section's own white: no ground, no padding, no veil, no
min-height. The overlay element, the pseudo-elements, the min-heights and the
box-shadow all belong to the superseded component. The legacy .xentys-impact-caption
rules (an absolute white card OVER the photo) already style nothing - she replaced
that card with a caption UNDER the photo - and are left in place rather than
deleted, since they render nothing either way.
The native padding, background and overlay are cleared AT SOURCE as well, so the
panel stops disagreeing with the render. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual {
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
min-height: 0 !important;
padding: 0 !important;
--padding-top: 0px !important;
--padding-right: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > .e-con-inner {
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual > .elementor-background-overlay {
background: none !important;
background-color: transparent !important;
opacity: 0 !important;
display: none !important;
}
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual::before,
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-visual::after {
content: none !important;
background: none !important;
display: none !important;
}
/* 2026-09-30 - ONE SHARED HEADER MEASURE, 680px. From Sarah's role-page stylesheet:
`.xentys-sec-head { max-width: 680px; margin: 0 0 48px; }`, with her own comment -
"One shared header block so eyebrow, heading and intro keep one left edge in every
section." We carried five different measures and three sections with no cap at all,
so §3's heading ran to 992px and set on one line where her reference wraps it to two.
Her class name is not ours, so the cap is written against this section's own header
container; the effect is hers.
WIDTH ONLY, deliberately. Her spec also says 12px internal steps and 48px below the
header. Neither is written here: Kingsford ruled 16px across these pages earlier
today, and §3 carries 54px below from its own rule. Both are his to change and
neither should ride along silently inside a width fix.
On the two-column sections (§2, §8) the header column already renders narrower than
680, so this is a no-op there by design rather than by accident. */
.elementor-33089 .elementor-element.elementor-element-876b8bf .xentys-impact-content { max-width: 680px !important; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5eaab50 *//* =========================================================
XENTYS — VACANCY LIST SECTION (`xentys-vacancies-section`)
Page 33089 — one of the four "werken als ..." pillar pages.
Paste target:
vacancy-list section container -> Advanced -> Custom CSS
`.elementor-33089 .elementor-element.elementor-element-5eaab50` is Elementor's own token. Do not substitute it.
If this is ever lifted to theme level instead, `.elementor-33089 .elementor-element.elementor-element-5eaab50`
becomes `.elementor-33089 .xentys-vacancies-section`.
SECTION INDEX IS NOT THE SAME ON ALL FOUR PAGES — resolved
from _elementor_data, do not assume:
32464 werken-als-interim-inkoper -> index [1]
32699 werken-als-technisch-inkoper -> index [1]
33089 werken-als-tactisch-inkoper -> index [2]
33498 werken-als-strategisch-inkoper -> index [2]
The four sections are otherwise structurally identical
(same widget tree, same loop template, same button; only
the taxonomy term the list filters on differs).
Classes this file expects on the markup:
.xentys-vacancies-section outer container (the paste target)
.xentys-vacancies-inner the single child container
.xentys-vacancies-header NEW container — see 03, needs widgets
.xentys-vacancies-grid the `posts` widget (class only)
.xentys-vacancies-cta the existing row-reverse button container
NOT USED HERE: `xentys-grid-on` is a navy-ground overlay —
astra-child-style.css, "SITE-WIDE GRID UTILITY (v3.5)":
"Add class `xentys-grid-on` to any navy-ground
container/section". This section is a light ground, so it
must not carry it.
========================================================= */
/* =========================================================
00. SCOPE WARNING — READ BEFORE APPLYING PART B
---------------------------------------------------------
Blocks 01-07 and 14 style elements that live ON THE PAGE.
Fully in scope.
Blocks 08-13 reach INSIDE the vacancy card. That card is
not page markup: the `posts` widget runs `_skin: "custom"`
with `custom_skin_template: "36381"`, so every element of
every card is rendered by SAVED LOOP TEMPLATE 36381 — the
same shared template used by /freelance-inkoper/ (56836)
and /inkoop-zzp/ (57391), at minimum.
This is the same hazard as the `template` widgets in the
out-of-scope sections, wearing a different hat. One
difference matters: these rules are `.elementor-33089 .elementor-element.elementor-element-5eaab50`-scoped, so
they CANNOT leak. Nothing here can alter 56836 or 57391.
What it DOES do is make the identical card look one way on
these four pages and another way on the other two. That is
a divergence to decide deliberately, not to inherit. The
clean fix is to restyle template 36381 once, centrally, so
all six pages agree. Until that decision is taken, blocks
08-13 can be deleted wholesale without affecting anything
in 01-07 or 14.
========================================================= */
/* =========================================================
01. OUTER SECTION
Ground, padding and bottom rule are the canonical services
section shell. Padding `84px 48px 92px` is identical on
WHY (spec-why-and-difference.md L134), PROCESS
(spec-process-section.md L242) and PROOF
(spec-impact-and-proof.md L1394).
Ground `#f4f7fa` comes with the card: the corpus states the
card is "`#ffffff` on a `#f4f7fa` section"
(spec-why-and-difference.md L958). Putting the white-card
recipe on a white ground would leave the 1px border doing
all the work.
Rule: `border-top: 0` + `border-bottom: 1px solid #e8edf3`,
taken from PROOF (spec-impact-and-proof.md L1395-1396) and
PROCESS (spec-process-section.md L244-245) rather than from
WHY, which also carries a top rule
(spec-why-and-difference.md L136). This section sits
directly under the navy hero, where a top hairline against
`#0d2b55` would read as a seam.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 {
width: 100% !important;
max-width: 100% !important;
background: #f4f7fa !important;
padding: 84px 48px 92px !important;
border-top: 0 !important;
border-bottom: 1px solid #e8edf3 !important;
overflow: hidden !important;
}
/* The live container carries `width: 80em` and `padding: 2em`
from 2023. Both are replaced above; these clear the
Elementor custom properties that feed them, because
`.e-con` consumes padding through var() longhands. */
.elementor-33089 .elementor-element.elementor-element-5eaab50.e-con,
.elementor-33089 .elementor-element.elementor-element-5eaab50 {
--width: 100% !important;
--padding-top: 84px !important;
--padding-bottom: 92px !important;
--padding-left: 48px !important;
--padding-right: 48px !important;
--gap: 0px !important;
}
/* =========================================================
02. INNER WRAPPER
1440px cap, verbatim from WHY
(spec-why-and-difference.md L148-149: `width: 100%` /
`max-width: 1440px`, `margin: 0 auto`). Stack gap 54px,
same block (L157).
The live inner container carries `padding: 3%` and a global
background (`--e-global-color-7fbde92`). Both are cleared:
the ground now belongs to the section, and a percentage
padding cannot hold a vertical rhythm.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-inner {
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 54px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-inner.e-con {
--padding-top: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
}
/* Works with or without Elementor's boxed-container wrapper,
so switching the container from full to boxed cannot
silently reintroduce padding. No `> *` wildcards. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-inner > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
/* =========================================================
03. HEADER
*** THIS BLOCK HAS NO MARKUP TO STYLE YET. ***
The live section is exactly:
container > container > [ posts, container > button ]
No heading, no eyebrow, no intro — the vacancy list
currently opens with no label at all. The three widgets
addressed in 04/05/06 must be ADDED for this block to do
anything. Suggested Dutch copy is in the handover notes.
Layout is a plain stack, NOT the two-column grid WHY
specifies. Reason: that grid is dead code. The corpus
records `xentys-why-header` as "styled but never applied"
and confirms it "occurs 0 times" in the rendered DOM of
both 5703 and 5507 (spec-why-and-difference.md L983-995).
A stack is therefore what the canonical component has
actually always rendered, and it keeps the header's left
edge flush with the cards below — the whole section is one
left edge at the inner wrapper's padding line.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-header {
width: 100% !important;
min-width: 0 !important;
max-width: 1440px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-header.e-con {
--padding-top: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
}
/* =========================================================
04. EYEBROW
Verbatim from the WHY eyebrow
(spec-why-and-difference.md L209-227), including the
`::before` kill at L224-227. Note the amber is `#d97706`,
not `#ffa300`: `#d97706` is the light-ground amber
throughout the corpus, `#ffa300` is the navy-ground amber.
Widget HTML tag: div.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-eyebrow,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-eyebrow .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #d97706 !important;
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: 0.13em !important;
text-transform: uppercase !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-eyebrow .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
/* No decorative line */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-eyebrow::before,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-eyebrow .elementor-heading-title::before {
content: none !important;
display: none !important;
}
/* =========================================================
05. MAIN HEADING
Verbatim from the WHY heading
(spec-why-and-difference.md L249-262).
Widget HTML tag: h2.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 36px !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.04em !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
06. INTRO
Verbatim from the WHY intro
(spec-why-and-difference.md L275-295), max-width 880px.
Widget: text-editor.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro {
width: 100% !important;
max-width: 880px !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro p {
margin: 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: -0.01em !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
07. GRID (the `posts` widget — class only, per the brief)
Gap 20px desktop / 14px mobile, from the WHY card grid
(spec-why-and-difference.md L316 and L544). This overrides
the widget's own `custom_row_gap: 32px`.
Forced to ONE column at every breakpoint. The widget is
already `custom_columns: 1` on desktop but ships
`custom_columns_tablet: 2`. These are wide row cards whose
own inner panel is 60% of the cell; two side by side on a
tablet leaves the content unreadably narrow.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-posts-container,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-posts.elementor-grid {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
--grid-column-gap: 0px !important;
--grid-row-gap: 20px !important;
gap: 20px !important;
align-items: stretch !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor {
width: 100% !important;
}
/* =========================================================
---------------------------------------------------------
PART B — INSIDE SHARED LOOP TEMPLATE 36381. See block 00.
---------------------------------------------------------
========================================================= */
/* =========================================================
08. CARD SHELL
The WHY card, verbatim
(spec-why-and-difference.md L325-361), mapped onto the two
containers the loop template provides:
article > .elementor > .e-con (id 434d725) = the card
> .e-con (id 225d579) = content well
Addressed structurally rather than by
`.elementor-element-434d725`, so a rebuild of template
36381 that reissues element ids does not silently unstyle
the section.
434d725 currently carries
`box-shadow: 0 0 8px 0 rgba(0,0,0,0.15)`, no border and no
radius. That is the 2023 treatment, and replacing it is
the one real visual change this file makes to the card.
*** ON THE "SQUARE AND FLAT" INSTRUCTION ***
I was asked to confirm `border-radius: 0` / `box-shadow:
none` against the corpus before writing it. Half of it
does not hold, so I have not written it:
- `border-radius: 0` is WRONG for a card here. The corpus
is explicit that `1px solid #d7e1ec` + `border-radius:
4px` "appears on 5165, 5507, 56808 and 5703 and nowhere
else" (spec-why-and-difference.md L969-971) — that is,
on all four services pages — and that 3310 home and 3358
use `1px solid #dbe3ec` + `border-radius: 2px`. Radius 0
appears exactly once in the entire corpus, on the
home-3310 process CTA button, inside a block the spec
heads "The home variant (`xentys-process-steps`) — for
reference only ... Recorded here so nobody mistakes it
for the canonical one" (spec-process-section.md
L741-745), and whose navy is the superseded `#003865`,
of which the same spec says "They are not
interchangeable — use `#0d2b55` on anything rebuilt to
the services standard" (L768-769). So `border-radius: 0`
is the legacy home idiom, not the house standard.
- `box-shadow: none` is RIGHT, but only at rest. The
canonical card sets `box-shadow: none` in its base state
(L345) and then deliberately lifts on desktop hover with
`0 12px 28px rgba(13, 43, 85, 0.05)` (L359). Removing
the hover would strip affordance from what is, in this
section, a list of links.
Both are written below as the corpus has them. If the flat
square card is a new decision rather than a reading of the
corpus, it should be taken for the whole system at once,
not introduced here through one section.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
border: 1px solid #d7e1ec !important;
border-radius: 4px !important;
box-shadow: none !important;
overflow: hidden !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con.e-con {
--padding-top: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
--width: 100% !important;
}
/* Subtle desktop hover — spec-why-and-difference.md L355-361 */
@media (min-width: 1025px) {
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con:hover {
transform: translateY(-2px) !important;
border-color: #bfcddd !important;
box-shadow: 0 12px 28px rgba(13, 43, 85, 0.05) !important;
}
}
/* Content well. Card padding `34px 32px` and flex gap 16px
are the WHY card's own (L331, L343). The template gives
this element `--width: 60%` and a second global background;
both are cleared so the card reads as one surface rather
than a panel inside a panel. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con > .e-con {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 34px 32px !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con > .e-con.e-con {
--width: 100% !important;
--padding-top: 34px !important;
--padding-bottom: 34px !important;
--padding-left: 32px !important;
--padding-right: 32px !important;
--gap: 16px !important;
--flex-shrink: 1 !important;
}
/* =========================================================
09. CARD REFERENCE CODE ("MS797")
A short identifier sitting above the title. The corpus has
exactly one element in that role: `xentys-proof-company`,
the client name above the quote
(spec-impact-and-proof.md L1586-1598) — 11px / 800 /
`0.14em` / uppercase / `#64748b`. Used verbatim.
Selector note: the post-title widget also carries
`.elementor-widget-heading`, so the ref code has to be
picked out with `:not(.elementor-widget-theme-post-title)`.
========================================================= */
/* =========================================================
10. CARD TITLE
The WHY card title, verbatim
(spec-why-and-difference.md L386-397): 22px / 700 /
`#0d2b55` / lh 1.25 / ls -0.025em. Replaces the template's
Gill Sans 1.6em bold.
The title is a link, so it takes a hover the plain WHY card
title has no need for. `#d97706` is the light-ground amber,
matching the proof CTA hover
(spec-impact-and-proof.md L1690-1692).
========================================================= */
/* =========================================================
11. CARD META (Interim / Winschoten (Gron.) omg. /
Machinebouw)
Both meta widgets are styled together: the template ships a
desktop copy and an `elementor-hidden-desktop` copy, and
they must not drift apart.
13px is the corpus's light-ground meta size — the proof CTA
runs 13px on `#ffffff` (spec-impact-and-proof.md L1684).
`#64748b` is the corpus's light-ground secondary, used by
`xentys-proof-role` (L1651) and
`xentys-proof-roster-label` (L1742).
THIS IS THE ONE PLACE in this file where I have paired an
existing size with an existing colour instead of lifting a
single declaration block whole: the corpus contains no
icon-list meta row to copy outright. Both values are real
corpus values on a light ground; the pairing is mine.
Icons take `#d97706`, the light-ground amber (block 04),
not `#ffa300`, which the corpus reserves for navy grounds
and for the one decorative arrow glyph.
========================================================= */
/* Clear the template's `calc(2em/2)` inline-item margins and
its separator pseudo-element; the flex gap above owns the
spacing now. */
/* =========================================================
12. CARD DIVIDER AND FOOT ROW
The corpus hairline `1px solid #e8edf3` — the same rule
colour used for section borders (block 01) and for the
between-item rule on the DIFFERENCE list
(spec-why-and-difference.md L656).
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-divider {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
--divider-color: #e8edf3 !important;
--divider-border-width: 1px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-divider .elementor-divider {
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-divider .elementor-divider-separator {
border-top: 1px solid #e8edf3 !important;
}
/* The row holding the trailing meta and the card's own CTA */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con > .e-con > .e-con {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con > .e-con > .e-con.e-con {
--padding-top: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
--gap: 14px 20px !important;
}
/* =========================================================
13. CARD CTA ("Bekijk vacature")
Same idiom as the section CTA in block 14: the corpus's
quiet text-link-with-arrow, `xentys-proof-cta`
(spec-impact-and-proof.md L1670-1692) — transparent, no
border, no padding, 13px / 700 / `#0d2b55`, hover
`#d97706`.
NOTE: the corpus version appends its own arrow with
`::after { content: "→" }` (spec-impact-and-proof.md
L1700-1706). That is deliberately NOT reproduced, because
this button already carries a real FontAwesome icon in the
markup. Adding the pseudo-element would render two arrows.
========================================================= */
/* =========================================================
---------------------------------------------------------
END OF PART B. Back to page-owned markup.
---------------------------------------------------------
========================================================= */
/* =========================================================
14. SECTION CTA ("Alle inkoopvacatures")
The existing widget is ALREADY this idiom, badly
tokenised: `background_color: "#FFA30000"` (amber at zero
alpha, i.e. transparent), `border_border: "none"`, text
`#1E293B`, hover `#FFA300`, plus a `fas fa-angle-right` at
`icon_align: right`. So it is a transparent text link with
a trailing arrow — exactly `xentys-proof-cta`
(spec-impact-and-proof.md L1670-1692).
All this block does is put the corpus tokens on it:
`#0d2b55` instead of the near-miss `#1E293B`, `#d97706` on
hover instead of `#ffa300`, 13px / 700 (L1684-1686), and
gap 8px (L1673) instead of the widget's 15px icon indent.
The container is already `flex_direction: row-reverse`,
which right-aligns the button. Kept: its right edge then
lines up with the right edge of the cards above it, while
the header and grid share the left edge.
`_margin: right -32px` on the widget is a 2023 nudge that
pulled the button outside the old percentage padding. With
the padding now fixed it would break that alignment, so it
is zeroed.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row-reverse !important;
justify-content: flex-start !important;
align-items: center !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta.e-con {
--padding-top: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-widget-button {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button-wrapper {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #0d2b55 !important;
text-decoration: none !important;
font-family: Inter, sans-serif !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: color 0.2s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button:hover,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button:hover .elementor-button-text {
color: #d97706 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button-content-wrapper {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button-text {
color: inherit !important;
font: inherit !important;
flex-grow: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button-icon {
margin: 0 !important;
color: #ffa300 !important;
line-height: 1 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .elementor-button-icon svg {
width: 15px !important;
height: 15px !important;
fill: #ffa300 !important;
}
/* =========================================================
15. TABLET 768-1024
Steps taken from the WHY tablet block
(spec-why-and-difference.md L434-489).
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-5eaab50 {
padding: 72px 32px 80px !important;
--padding-top: 72px !important;
--padding-bottom: 80px !important;
--padding-left: 32px !important;
--padding-right: 32px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-inner {
gap: 44px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-header {
gap: 14px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading .elementor-heading-title {
font-size: 30px !important;
line-height: 1.1 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro {
max-width: 760px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro p {
font-size: 17px !important;
}
/* One column, against the widget's custom_columns_tablet: 2 */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-posts-container,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-posts.elementor-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con > .e-con {
padding: 30px 28px !important;
--padding-top: 30px !important;
--padding-bottom: 30px !important;
--padding-left: 28px !important;
--padding-right: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-theme-post-title,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-theme-post-title .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-theme-post-title .elementor-heading-title a {
font-size: 20px !important;
}
}
/* =========================================================
16. MOBILE <=767
Steps taken from the WHY mobile block
(spec-why-and-difference.md L495-563).
========================================================= */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-5eaab50 {
padding: 60px 24px 68px !important;
--padding-top: 60px !important;
--padding-bottom: 68px !important;
--padding-left: 24px !important;
--padding-right: 24px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-inner {
gap: 36px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-header {
gap: 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-eyebrow,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-eyebrow .elementor-heading-title {
font-size: 11px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading .elementor-heading-title {
font-size: 26px !important;
line-height: 1.1 !important;
letter-spacing: -0.035em !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-intro p {
font-size: 16px !important;
line-height: 1.65 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-posts-container,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-posts.elementor-grid {
grid-template-columns: 1fr !important;
--grid-row-gap: 14px !important;
gap: 14px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con > .e-con {
padding: 26px 24px !important;
--padding-top: 26px !important;
--padding-bottom: 26px !important;
--padding-left: 24px !important;
--padding-right: 24px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-theme-post-title,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-theme-post-title .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid .elementor-widget-theme-post-title .elementor-heading-title a {
font-size: 19px !important;
}
/* The foot row stacks rather than splitting */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-grid article.elementor-post > .elementor > .e-con > .e-con > .e-con {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
/* CTA goes left so its edge matches the cards above it */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta {
flex-direction: row !important;
justify-content: flex-start !important;
}
}
/* =========================================================
17. SMALL MOBILE <=480
spec-why-and-difference.md L569-578.
========================================================= */
@media (max-width: 480px) {
.elementor-33089 .elementor-element.elementor-element-5eaab50 {
padding-left: 20px !important;
padding-right: 20px !important;
--padding-left: 20px !important;
--padding-right: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading,
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-heading .elementor-heading-title {
font-size: 23px !important;
}
}
/* 2026-09-24 fix 1 — one content width. Measured on 33089 at 1440: inner edges landed
at 0, 48, 64 and 80px because transplanted sections carry 5507's 1312 grid and
Elementor's own sections default to 1344. The hero is the correct one: 1280, the
site grid. Capping the inner wrapper and centring it puts every inner edge at 80
on a 1440 viewport without touching any section's padding — so nothing about the
kept sections changes except where their content starts.
Scoped to the section's OWN inner wrapper and the named inner directly inside it,
never `[class*="-inner"]` at any depth: that would also have hit the inner wrapper
of every loop-grid card and every accordion panel on the page.
Two places can decide this width — Elementor's per-section setting and this CSS.
I changed only the CSS; it compiles to a higher specificity than Elementor's own
per-element rule and carries !important, so it wins without the settings moving. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-5eaab50 > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-5eaab50 > .e-con-inner > [class*="-inner"] {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — sections set to content_width:full have NO `.e-con-inner`, so their
children are DIRECT children of the section. Every cap we have written has aimed at
that wrapper, which is why the same handful of sections stayed off-grid through three
rounds while everything around them moved. Not an older kind of section — every one of
them is elType:container, same as the rest. Capping the direct children as well makes
the rule cover both shapes. On a boxed section these .elementor-33089 .elementor-element.elementor-element-5eaab50s simply match nothing. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 > .e-con,
.elementor-33089 .elementor-element.elementor-element-5eaab50 > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* [dev 2026-09-25] S3 two buttons. Sarah: "I'm including two buttons here
'alle inkoopvacatures' and 'stuur je cv'." Ours had one, styled as a transparent
arrow-link rather than a button pair.
PRIMARY is transplanted from this page's OWN .xentys-cta-btn-primary, which sits
on the same #f4f7fa band - not from the hero pair, whose secondary is white-on-navy
and would be invisible here.
SECONDARY is her rule verbatim: .xentys-sec:not(.xentys-sec--dark)
.xentys-btn--secondary { border-color: var(--xn-card-rule); color: var(--xn-navy) }
with hover background rgba(13,43,85,0.04). Her file references --xn-card-rule but
does not define it; mapped to #d7e1ec / #bfcddd, which are the values this build
already uses for card rules and card-rule-hover. Mapping flagged, not invented. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .xentys-vacancies-btn .elementor-button {
min-height: 50px !important;
padding: 13px 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important;
transition: background 0.2s ease, border-color 0.2s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .xentys-vacancies-btn-primary .elementor-button {
background: #ffa300 !important;
color: #0d2b55 !important;
border: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .xentys-vacancies-btn-primary .elementor-button:hover {
color: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .xentys-vacancies-btn-secondary .elementor-button {
background: transparent !important;
color: #0d2b55 !important;
border: 1.5px solid #d7e1ec !important;
}
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta .xentys-vacancies-btn-secondary .elementor-button:hover {
background: rgba(13, 43, 85, 0.04) !important;
border-color: #bfcddd !important;
color: #0d2b55 !important;
}
/* [dev 2026-09-25] S3 button row gap. The two buttons rendered touching at 0.
Geometry copied from this page's own hero button row, as on 32464: gap 12px and
flex-wrap wrap. flex-direction is DELIBERATELY NOT TOUCHED - these pages are
row-reverse and already render the amber primary on the left, which is the right
result by a different route than 32464's row + primary-first DOM. Changing the
direction here without swapping the children would silently reverse them.
_margin and the .elementor-widget-container rule that neutralises it are also
left alone: the -32px is actively suppressed on these pages, and that rule is the
load-bearing part, not the setting. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta {
gap: 12px !important;
flex-wrap: wrap !important;
}
/* [dev 2026-09-25] S3 header gap 10px -> 16px, four-page harmonisation authorised by
Kingsford. All four pages measured 10px, so this is a decision he took rather than
a defect on any one page - recorded as such. 16px is the value three of this
page's own section headers already use. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-header {
gap: 16px !important;
}
/* [dev 2026-09-30] S3 buttons to the LEFT, amber first - her reference puts them
under the left-hand copy on all three pages. This page was row-reverse with the
secondary first in the DOM, which rendered them right-aligned at x1037.
Set to `row` with the primary first, which is EXACTLY 32464's arrangement and is
render-verified at x73 - not an inference from the direction, which is the
mistake that caused the original swap bug. This also ends the row/row-reverse
divergence between the four pages rather than preserving it. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-cta {
flex-direction: row !important;
justify-content: flex-start !important;
}
/* 2026-09-30 - ONE SHARED HEADER MEASURE, 680px. From Sarah's role-page stylesheet:
`.xentys-sec-head { max-width: 680px; margin: 0 0 48px; }`, with her own comment -
"One shared header block so eyebrow, heading and intro keep one left edge in every
section." We carried five different measures and three sections with no cap at all,
so §3's heading ran to 992px and set on one line where her reference wraps it to two.
Her class name is not ours, so the cap is written against this section's own header
container; the effect is hers.
WIDTH ONLY, deliberately. Her spec also says 12px internal steps and 48px below the
header. Neither is written here: Kingsford ruled 16px across these pages earlier
today, and §3 carries 54px below from its own rule. Both are his to change and
neither should ride along silently inside a width fix.
On the two-column sections (§2, §8) the header column already renders narrower than
680, so this is a no-op there by design rather than by accident. */
.elementor-33089 .elementor-element.elementor-element-5eaab50 .xentys-vacancies-header { max-width: 680px !important; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74c20a5 *//* 2026-09-24 fix 4 — the newsletter is CONTAINED. Everything this host added for the
full-bleed band has been removed by restoring this field to its recorded pre-§4
state, not by writing counter-rules: the gradient and the amber X watermark go back
to being 65149's own declarations on the card, and the card's own vertical padding
comes back with them. Right width AND right insides.
All that remains here is the grid: the host spans the page, and the CARD is capped
at 1280 and centred, so its outer edge lands at 80 on a 1440 view like every other
section. `.xentys-cta-card.e-con` is matched explicitly because the template caps
the same element through that .elementor-33089 .elementor-element.elementor-element-74c20a5, which is one class more specific.
65149 is NOT edited — it renders on /vacatures/ and the other role pages too. */
.elementor-33089 .elementor-element.elementor-element-74c20a5 {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-74c20a5 .xentys-cta-card,
.elementor-33089 .elementor-element.elementor-element-74c20a5 .xentys-cta-card.e-con {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — the newsletter's 1412. Walking the chain showed the element sitting at
1412 with max-width:100% is the TEMPLATE WIDGET, not `.xentys-cta-card` inside it,
so the cap I wrote for the card never bound to the thing being measured. The 14px
inset was this host's padding. Capping the widget and clearing the padding puts the
band's outer edge at 80 like every other section. 65149 is still untouched. */
.elementor-33089 .elementor-element.elementor-element-74c20a5 { padding-left: 0 !important; padding-right: 0 !important; }
.elementor-33089 .elementor-element.elementor-element-74c20a5 > .elementor-widget-template,
.elementor-33089 .elementor-element.elementor-element-74c20a5 > .e-con-inner > .elementor-widget-template {
display: block !important;
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — sections set to content_width:full have NO `.e-con-inner`, so their
children are DIRECT children of the section. Every cap we have written has aimed at
that wrapper, which is why the same handful of sections stayed off-grid through three
rounds while everything around them moved. Not an older kind of section — every one of
them is elType:container, same as the rest. Capping the direct children as well makes
the rule cover both shapes. On a boxed section these .elementor-33089 .elementor-element.elementor-element-74c20a5s simply match nothing. */
.elementor-33089 .elementor-element.elementor-element-74c20a5 > .e-con,
.elementor-33089 .elementor-element.elementor-element-74c20a5 > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-30 - mobile gutter to 20px for the NEWSLETTER, written on its host container
rather than in the template. The newsletter's root carries .xentys-cta-section inside
elementor_library 65149, where its mobile padding is 40px 24px. 65149 is shared with
/vacatures/ and the other role pages, and his "make them all 20px" was said looking at
a role page, so editing the template would push a decision onto a page nobody has
looked at. Scoping it to this host keeps the change where the instruction was given.
This IS a page-level override of a shared component - the same shape as the §3 card
fork he objected to. It is deliberate and narrow, and the clean end state is to
harmonise 65149 itself once someone rules on /vacatures/. Flagged, not hidden. */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-74c20a5 .xentys-cta-section { padding-left: 20px !important; padding-right: 20px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6e07af5 *//* =========================================================
XENTYS — SEARCH PROCESS SECTION
Simplified Elementor structure
Paste on:
process-section → Advanced → Custom CSS
Classes:
.xentys-process-inner
.xentys-process-header
.xentys-process-eyebrow
.xentys-process-heading
.xentys-process-intro
.xentys-process-timeline
.xentys-process-step
.xentys-process-step-title
.xentys-process-step-text
========================================================= */
/* =========================================================
OUTER SECTION
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 {
width: 100% !important;
background: #f4f7fa !important;
padding: 88px clamp(20px, 5vw, 64px) 88px !important;
border-top: 0 !important;
border-bottom: 1px solid #e8edf3 !important;
overflow: hidden !important;
}
/* =========================================================
INNER WRAPPER
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-inner {
width: 100% !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
HEADER — LEFT ALIGNED
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-header {
width: 100% !important;
max-width: 900px !important;
margin: 0 0 64px !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}
/* =========================================================
EYEBROW
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow {
width: auto !important;
margin: 0 0 14px !important;
padding: 0 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #d97706 !important;
font-family: Inter, sans-serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow::before,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow .elementor-heading-title::before {
content: none !important;
display: none !important;
}
/* =========================================================
MAIN HEADING
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading {
width: 100% !important;
max-width: 820px !important;
margin: 0 0 14px !important;
padding: 0 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: clamp(26px, 3vw, 36px) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
text-align: left !important;
}
/* =========================================================
INTRO TEXT
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro {
width: 100% !important;
max-width: 760px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro p {
margin: 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: clamp(15px, 1.7vw, 17px) !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
TIMELINE WRAPPER
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 34px 0 0 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
align-items: start !important;
}
/* =========================================================
HORIZONTAL TIMELINE LINE
Exact center through dots
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline::before {
content: "" !important;
position: absolute !important;
top: 10px !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: #cfd8e3 !important;
z-index: 0 !important;
}
/* =========================================================
PROCESS STEP
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 18px 0 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
z-index: 1 !important;
}
/* =========================================================
TIMELINE DOT
Centered exactly on line
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step::before {
content: "" !important;
position: absolute !important;
top: -34px !important;
left: 24px !important;
width: 12px !important;
height: 12px !important;
background: #ffa300 !important;
border: 4px solid #fff3d6 !important;
border-radius: 50% !important;
box-sizing: content-box !important;
z-index: 2 !important;
}
/* =========================================================
STEP TITLE
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: -0.015em !important;
}
/* =========================================================
STEP TEXT
========================================================= */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text p {
margin: 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
;
letter-spacing: normal !important}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 {
padding: 76px clamp(20px, 5vw, 64px) 76px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-header {
max-width: 760px !important;
margin-bottom: 52px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-heading-title {
font-size: 38px !important;
line-height: 1.1 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro p {
font-size: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 44px 30px !important;
padding-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline::before {
display: none !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step {
padding: 26px 0 0 !important;
border-top: 1px solid #cfd8e3 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step::before {
top: -10px !important;
left: 20px !important;
}
}
/* =========================================================
MOBILE — VERTICAL TIMELINE
========================================================= */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 {
padding: 64px clamp(20px, 5vw, 64px) 64px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-header {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 40px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow {
margin-bottom: 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow .elementor-heading-title {
font-size: 11px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading {
margin-bottom: 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-heading-title {
font-size: 34px !important;
line-height: 1.1 !important;
letter-spacing: -0.035em !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro p {
font-size: 16px !important;
line-height: 1.65 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 0 0 34px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline::before {
display: block !important;
top: 7px !important;
bottom: 18px !important;
left: 7px !important;
right: auto !important;
width: 1px !important;
height: auto !important;
background: #cfd8e3 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step {
width: 100% !important;
padding: 0 0 32px !important;
border: 0 !important;
gap: 7px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step:last-child {
padding-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step::before {
top: 3px !important;
left: -34px !important;
width: 10px !important;
height: 10px !important;
border-width: 3px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title .elementor-heading-title {
font-size: 17px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text p {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 {
padding-left: clamp(20px, 5vw, 64px) !important;
padding-right: clamp(20px, 5vw, 64px) !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-heading-title {
font-size: 31px !important;
}
}
/* =========================================================
PROCESS TIMELINE — SIDE INSET (Kingsford)
Narrows the timeline inside the existing 1280 shell so the
columns shrink and each step's copy runs a line longer.
1180 is the same inset figure used on home's spec grid, so
the site carries one inset value rather than two.
Column gap, step padding, type and the section's 88/88
rhythm are all untouched. The connecting line is the
timeline's own ::before (left 0 / right 0) and each dot is
positioned inside its step, so both inset with the grid.
Desktop only: below 1025 the timeline re-columns and the
1180 cap could never bind anyway.
========================================================= */
@media (min-width: 1025px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; }
}
/* 2026-09-24 fix 1 — one content width. Measured on 33089 at 1440: inner edges landed
at 0, 48, 64 and 80px because transplanted sections carry 5507's 1312 grid and
Elementor's own sections default to 1344. The hero is the correct one: 1280, the
site grid. Capping the inner wrapper and centring it puts every inner edge at 80
on a 1440 viewport without touching any section's padding — so nothing about the
kept sections changes except where their content starts.
Scoped to the section's OWN inner wrapper and the named inner directly inside it,
never `[class*="-inner"]` at any depth: that would also have hit the inner wrapper
of every loop-grid card and every accordion panel on the page.
Two places can decide this width — Elementor's per-section setting and this CSS.
I changed only the CSS; it compiles to a higher specificity than Elementor's own
per-element rule and carries !important, so it wins without the settings moving. */
.elementor-33089 .elementor-element.elementor-element-6e07af5 > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-6e07af5 > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-6e07af5 > .e-con-inner > [class*="-inner"] {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — sections set to content_width:full have NO `.e-con-inner`, so their
children are DIRECT children of the section. Every cap we have written has aimed at
that wrapper, which is why the same handful of sections stayed off-grid through three
rounds while everything around them moved. Not an older kind of section — every one of
them is elType:container, same as the rest. Capping the direct children as well makes
the rule cover both shapes. On a boxed section these .elementor-33089 .elementor-element.elementor-element-6e07af5s simply match nothing. */
.elementor-33089 .elementor-element.elementor-element-6e07af5 > .e-con,
.elementor-33089 .elementor-element.elementor-element-6e07af5 > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* [dev 2026-09-25] S5 rebuilt to her spec (design/inkoop-zzp.css), verbatim.
The numerals were baked into the step TITLES as "1. Vacature-intake"; they are now
separate .xentys-process-step-num elements - her class name, not one I invented -
and the titles carry no number. Her reference shows the bare digit, not "01".
THE RAIL AND DOTS COME OFF ON DESKTOP: her desktop treatment is four numerals with
no connecting line. The only ::before in her sheet is a MOBILE vertical rail, so the
existing @media blocks for those pseudo-elements are re-emitted AFTER this kill -
without that, a later desktop rule of equal specificity would win inside them too
and take the mobile rail with it.
Token mapping, flagged not sourced: --xn-muted -> #667085, the value this build uses
for muted body text throughout. --xn-amber and --xn-navy are #ffa300 / #0d2b55. */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline::before,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step::before {
content: none !important;
display: none !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-header {
max-width: 900px !important;
margin: 0 0 64px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step {
position: relative !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-num,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-num .elementor-heading-title {
margin: 0 0 4px !important;
padding: 0 !important;
color: #ffa300 !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.03em !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title .elementor-heading-title {
color: #0d2b55 !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: -0.015em !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text p {
color: #667085 !important;
font-size: 15px !important;
line-height: 1.65 !important;
}
/* mobile rail preserved, re-emitted after the desktop kill */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 {
padding: 76px clamp(20px, 5vw, 64px) 76px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-header {
max-width: 760px !important;
margin-bottom: 52px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-heading-title {
font-size: 38px !important;
line-height: 1.1 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro p {
font-size: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 44px 30px !important;
padding-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline::before {
display: none !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step {
padding: 26px 0 0 !important;
border-top: 1px solid #cfd8e3 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step::before {
top: -10px !important;
left: 20px !important;
}
}
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 {
padding: 64px clamp(20px, 5vw, 64px) 64px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-header {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 40px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow {
margin-bottom: 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-eyebrow .elementor-heading-title {
font-size: 11px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading {
margin-bottom: 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-heading-title {
font-size: 34px !important;
line-height: 1.1 !important;
letter-spacing: -0.035em !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro p {
font-size: 16px !important;
line-height: 1.65 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 0 0 34px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline::before {
display: block !important;
top: 7px !important;
bottom: 18px !important;
left: 7px !important;
right: auto !important;
width: 1px !important;
height: auto !important;
background: #cfd8e3 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step {
width: 100% !important;
padding: 0 0 32px !important;
border: 0 !important;
gap: 7px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step:last-child {
padding-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step::before {
top: 3px !important;
left: -34px !important;
width: 10px !important;
height: 10px !important;
border-width: 3px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-title .elementor-heading-title {
font-size: 17px !important;
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-step-text p {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
/* [dev 2026-09-30] S5 ground -> white. Kingsford: "you can make the 'our process'
section white bg". Ground only - type, numerals, the four-column grid, the 64px
header gap and the desktop rail suppression are all untouched.
NOTE the resulting desktop sequence on this page:
hero navy · S2 white · S3 band · S4 band · S5 WHITE · S6 white · S7 navy ·
S8 white · S9 band
so S5 and S6 become adjacent whites with no boundary between them. Raised with
him as a consequence, not an objection. */
.elementor-33089 .elementor-element.elementor-element-6e07af5 {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* 2026-09-30 - §5 grid and wrapping. DESIGN ONLY: not one stored string changes.
1. The timeline was capped at 1180 inside (min-width:1025px) while the section inner
is 1280, so the grid stopped 100px short on the RIGHT only - left edge aligned,
right edge did not, which reads as off-centre without any one element looking
wrong. Uncapping lets the four columns go 274 -> 299 and the right edge land flush.
2. The heading was capped TIGHTER than its own header (820 vs 900), so at 36px the
line broke after "bij" and orphaned "xentys". Raised to 900 to match its container.
3. text-wrap: balance instead of a non-breaking space - he has said no content edits,
and balance fixes single-word last lines generally rather than patching one
sentence, which matters because this heading is a different length on every page.
4. Mobile: the 34px left inset and gap:0 are the old vertical-rail component. Sarah's
steps are plain columns with no connecting rail, so the inset was reserving space
for a line that no longer renders. Inset cleared, gap restored to the grid's 28. */
@media (min-width: 1025px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline { max-width: none !important; }
}
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading { max-width: 900px !important; }
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading .elementor-heading-title { text-wrap: balance !important; }
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro,
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-intro p { text-wrap: pretty !important; }
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline { padding: 0 !important; gap: 28px !important; }
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-timeline::before { content: none !important; display: none !important; }
}
/* 2026-09-30 - ONE SHARED HEADER MEASURE, 680px. From Sarah's role-page stylesheet:
`.xentys-sec-head { max-width: 680px; margin: 0 0 48px; }`, with her own comment -
"One shared header block so eyebrow, heading and intro keep one left edge in every
section." We carried five different measures and three sections with no cap at all,
so §3's heading ran to 992px and set on one line where her reference wraps it to two.
Her class name is not ours, so the cap is written against this section's own header
container; the effect is hers.
WIDTH ONLY, deliberately. Her spec also says 12px internal steps and 48px below the
header. Neither is written here: Kingsford ruled 16px across these pages earlier
today, and §3 carries 54px below from its own rule. Both are his to change and
neither should ride along silently inside a width fix.
On the two-column sections (§2, §8) the header column already renders narrower than
680, so this is a no-op there by design rather than by accident. */
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-header { max-width: 680px !important; }
.elementor-33089 .elementor-element.elementor-element-6e07af5 .xentys-process-heading { max-width: 680px !important; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-k6a0003 */.elementor-33089 .elementor-element.elementor-element-k6a0003 .xentys-principles-eyebrow.xentys-principles-eyebrow .elementor-heading-title{margin-bottom:16px !important}
@media (max-width:767px){.elementor-33089 .elementor-element.elementor-element-k6a0003 .xentys-principles-eyebrow.xentys-principles-eyebrow .elementor-heading-title{margin-bottom:2px !important}}
.elementor-33089 .elementor-element.elementor-element-k6a0003 .xentys-principles-heading .elementor-heading-title{margin-bottom:20px !important}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-k6a0001 *//* =========================================================
XENTYS — "WIE JE BENT" SECTION (was: About / Principles)
Paste into the parent SECTION → Advanced → Custom CSS.
Tokens:
navy #0d2b55
amber #ffa300 (accent bar)
amber-text #d97706 (eyebrow + icon hover)
number grey #d1d5db
body grey #4d5056
divider #e0e2e5
section bg #f8f8f7 (warm off-white)
Cards use an ICON instead of a number. The amber bar hangs off
the icon rather than being positioned from the top of the card,
so it always sits directly under the icon no matter how tall the
icon is. Give every Icon widget the class:
xentys-principle-icon
========================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001 {
background: #f8f8f7 !important;
padding: 88px 80px 88px 80px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-inner {
width: 100% !important;
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 64px !important;
}
/* =========================================================
HEADER
========================================================= */
/* Wider than Kingsford's 665px so the heading fits on one line.
The intro underneath is pulled back to 620px separately, so it
still reads at a comfortable width. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-header {
position: relative !important;
width: 100% !important;
max-width: 860px !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow .elementor-widget-container {
color: #d97706 !important;
font-family: Inter, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin: 0 0 0px 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading .elementor-heading-title {
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading span,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading .elementor-heading-title span {
color: #d97706 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body {
max-width: 620px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body p,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body .elementor-widget-container {
color: #4d5056 !important;
font-family: Inter, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.625 !important;
margin: 0 !important;
}
/* =========================================================
PRINCIPLE GRID
========================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
align-items: stretch !important;
}
/* =========================================================
PRINCIPLE CARD
========================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-height: 240px !important;
padding: 8px 32px 0 32px !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:first-child {
padding-left: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:not(:last-child) {
border-right: 1px solid #e0e2e5 !important;
}
/* The old amber bar was pinned 100px from the top of the card,
measured against the 72px number. With an icon the title moves up
and the bar cuts through it, so it is switched off here and drawn
under the icon instead (see below). */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card::after,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:first-child::after {
display: none !important;
}
/* =========================================================
ICON (replaces the number)
========================================================= */
/* The gap BELOW the amber bar is set here, on the widget itself.
It can't go on the ::after: a bottom margin there collapses through
the parent and disappears, which is what pushed the bar into the
title. A flex item's margin can't collapse, so this one holds. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon {
position: relative !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon .elementor-icon-wrapper,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon .elementor-widget-container {
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
/* Outline (stroke-only) icons — Lucide, Feather, Phosphor Light etc.
These are drawn with strokes, so "fill" does nothing: the colour has
to go on stroke, and fill must be none or the shapes solidify.
▼ icon size — change all three together ▼ */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon svg,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon i {
width: 56px !important;
height: 56px !important;
font-size: 56px !important;
color: #0d2b55 !important;
stroke: #0d2b55 !important;
fill: none !important;
transition: color 0.25s ease, stroke 0.25s ease !important;
}
/* Lucide sets stroke and width on the shapes themselves, so the rule
above doesn't always reach them. This one does.
stroke-width is measured in the icon's own 24-unit grid, not in
screen pixels, so it scales with the icon. At 56px each unit is
about 2.3 real pixels:
1.0 -> 2.3px thin
1.25 -> 2.9px
1.5 -> 3.5px <- set here
1.75 -> 4.1px
2.0 -> 4.7px Lucide's default, drawn for small sizes
Lucide's 2 is calibrated for a 24px icon; at 56px it reads heavy,
so this sits a little finer. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon svg,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon svg * {
stroke: #0d2b55 !important;
fill: none !important;
stroke-width: 1.5 !important;
}
/* the amber bar, hanging off the icon so it always sits under it */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon::after {
content: "" !important;
display: block !important;
width: 32px !important;
height: 3px !important;
border-radius: 999px !important;
background: #ffa300 !important;
margin: 22px 0 0 0 !important;
}
/* =========================================================
NUMBERS (kept, in case a card still uses one)
========================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number .elementor-widget-container {
color: #d1d5db !important;
font-family: Inter, sans-serif !important;
font-size: 72px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -2px !important;
margin-bottom: 16px !important;
}
/* =========================================================
TITLES
========================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-title .elementor-heading-title {
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 22px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
margin-bottom: 6px !important;
}
/* =========================================================
BODY
========================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body p,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body .elementor-widget-container {
color: #4d5056 !important;
font-family: Inter, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* =========================================================
HOVER — DESKTOP
========================================================= */
@media (min-width: 1025px) {
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card {
transition: transform 0.25s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:hover {
transform: translateY(-4px) !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:hover .xentys-principle-icon svg,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:hover .xentys-principle-icon i,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:hover .xentys-principle-icon svg * {
color: #d97706 !important;
stroke: #d97706 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:hover .xentys-principle-number,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:hover .xentys-principle-number .elementor-heading-title {
color: #d97706 !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-k6a0001 {
padding: 72px 40px 72px 40px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-inner {
max-width: 100% !important;
gap: 56px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-header {
text-align: left !important;
max-width: 680px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading .elementor-heading-title {
font-size: 30px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid {
grid-template-columns: repeat(2, 1fr) !important;
border-top: 1px solid #e0e2e5 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card {
min-height: 220px !important;
padding: 34px 28px !important;
border-right: none !important;
border-bottom: 1px solid #e0e2e5 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:first-child {
padding-left: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:nth-child(odd) {
border-right: 1px solid #e0e2e5 !important;
}
/* three cards in two columns leaves the last one alone on its row -
no divider to its right, and nothing under it */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:last-child {
border-right: none !important;
border-bottom: none !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon {
margin-bottom: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon svg,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon i {
width: 48px !important;
height: 48px !important;
font-size: 48px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon::after {
margin-top: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number .elementor-widget-container {
font-size: 62px !important;
margin-bottom: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-title .elementor-heading-title {
font-size: 21px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body p,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body .elementor-widget-container {
font-size: 15px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-k6a0001 {
padding: 56px 24px 56px 24px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-inner {
max-width: 100% !important;
gap: 44px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-header {
text-align: left !important;
max-width: 100% !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow .elementor-widget-container {
font-size: 11px !important;
margin-bottom: 2px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading .elementor-heading-title {
font-size: 28px !important;
line-height: 1.18 !important;
margin-bottom: 8px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body p,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body .elementor-widget-container {
font-size: 15px !important;
line-height: 1.6 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid {
display: flex !important;
flex-direction: column !important;
border-top: 1px solid #e0e2e5 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:first-child {
min-height: auto !important;
padding: 30px 0 32px 0 !important;
border-right: none !important;
border-bottom: 1px solid #e0e2e5 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:last-child {
border-bottom: none !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon {
margin-bottom: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon svg,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon i {
width: 44px !important;
height: 44px !important;
font-size: 44px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-icon::after {
margin-top: 16px !important;
width: 28px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-number .elementor-widget-container {
font-size: 50px !important;
margin-bottom: 6px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-title .elementor-heading-title {
font-size: 21px !important;
line-height: 1.25 !important;
margin-bottom: 6px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body p,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-body .elementor-widget-container {
font-size: 15px !important;
line-height: 1.6 !important;
}
}
/* ===== added 10 Sep 2026 ===================================================
This container came from the afstudeer page's "wie je bent" section, which
holds THREE principles — so its grid is repeat(3,1fr) and a fourth card was
always going to drop onto its own row.
The section padding is also matched to the rest of the page: the source used
80px of side padding against this page's 48px, which would have set its left
edge 32px in from every neighbouring section.
========================================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001{
background: #f4f7fa !important;
padding: 84px 48px 92px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (min-width: 768px) and (max-width: 1024px){
.elementor-33089 .elementor-element.elementor-element-k6a0001{ padding: 72px 32px 80px !important; }
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px){
.elementor-33089 .elementor-element.elementor-element-k6a0001{ padding: 60px 24px 68px !important; }
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid{
display: grid !important;
grid-template-columns: 1fr !important;
}
}
/* ===== header type, corrected 10 Sep 2026 =================================
Three problems, all from the section being pasted in from another page:
1. FONT. The heading widget carries `xentys-sec-title`, but this section is
`xentys-principles-section`, not `xentys-sec` — so the page's Inter rule
never reached it and it fell back to the kit default, Gill Sans.
2. EYEBROW. The pasted component uses 11px / 600 / 0.1em; the eight eyebrows
elsewhere on this page are 12px / 700 / 0.13em. Two eyebrow styles on one
page. Matched to the others.
3. HEADING + INTRO. The component's 32px / -0.025em / 1.15 is the afstudeer
page's scale. The measured house value is 34px / -0.035em / 1.10, and the
intro is #374151 capped at 620px, not #4d5056 running full width.
========================================================================= */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-header{ max-width: 680px !important; }
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-eyebrow .elementor-heading-title{
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.13em !important;
line-height: 1 !important;
text-transform: uppercase !important;
color: #d97706 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-sec-title{ margin: 0 0 12px 0 !important; padding-top: 0 !important; }
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-sec-title .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-heading .elementor-heading-title{
font-family: Inter, sans-serif !important;
font-size: 36px !important;
line-height: 1.1 !important;
letter-spacing: -0.035em !important;
font-weight: 700 !important;
color: #0d2b55 !important;
text-transform: none !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body p{
font-family: Inter, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: -0.01em !important;
color: #374151 !important;
max-width: 620px !important;
}
@media (min-width: 768px) and (max-width: 1024px){
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-sec-title .elementor-heading-title{ font-size: 30px !important; }
}
@media (max-width: 767px){
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-sec-title .elementor-heading-title{
font-size: 26px !important; line-height: 1.15 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-body p{ font-size: 15px !important; }
}
/* 2026-09-24 §6 Inkoop kennis — white ground per her table. The component ships on a
band (#f8f8f7, then #f4f7fa later in its own block), so this is last and wins.
The cards are xentys-principle-card: bordered, white, with a hairline between them,
which is her "three bordered cards on white, white-on-white with a hairline, not
white-on-band". Her file records that photo-backed cards were tried and rejected, so
the icon widgets that ship with this component have been removed rather than filled.
THE BODY OF EACH CARD IS DELIBERATELY EMPTY. The three titles and links are known
facts; the body lines are copy we do not have, and a placeholder sentence would be
invented Dutch. One edit per card fills them. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 { background: #ffffff !important; }
/* 2026-09-24 §6 onto the grid — this section arrived after the alignment passes, so it
carried neither rule and was the only section left at 48/1329 while every other one
sits at 73/1280. These are the same two rules every other section on the page got,
verbatim: cap the inner wrapper, and cap direct children for the full-width case
where no inner wrapper exists. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-k6a0001 > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-k6a0001 > .e-con-inner > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-k6a0001 > .e-con,
.elementor-33089 .elementor-element.elementor-element-k6a0001 > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 §6 link line. Her design gives each card three parts — title, body, link —
and our build had only the first two, so this is new markup rather than a body fill.
Values are xentys-sector-link's verbatim (41947): navy #003865, Inter 14/600, no
underline, amber on hover. Her spec adds an AMBER ARROW at rest, which the existing
treatment does not have, so the arrow is wrapped in a span and coloured — the same
span-for-accent pattern the two-tone H1 uses, not a new idea.
The card title also links. Two links to one destination is deliberate: the title was
already a link before her copy arrived and a larger click target is not a defect. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link a,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link .elementor-heading-title {
color: #003865 !important;
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
text-decoration: none !important;
letter-spacing: normal !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link {
cursor: pointer !important;
width: fit-content !important;
margin-top: 18px !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link span { color: #ffa300 !important; }
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link:hover,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link:hover a,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-link:hover .elementor-heading-title { color: #ffa300 !important; }
/* 2026-09-24 §6 — close the box. The component draws ONE border-right between columns,
which renders as three columns separated by hairlines, not as three cards. Her table
says "three bordered cards on white, white-on-white with a hairline", which is a
rectangle with an edge all the way round. Same hairline weight and colour the
component already uses — 1px #e0e2e5 — so this closes the box rather than restyling
it. Radius 2px, the site's --r.
ALSO FIXES A LATENT DEFECT the design comparison did not name: the donor's last grid
rule declares `repeat(4, minmax(0, 1fr))` because 65488 has four cards. We have three,
so the row has been rendering with an empty fourth track and the cards narrower than
they should be. Re-declared as three, with the 2-up and 1-up breakpoints restated
after it so they still win in their own ranges.
Every rule is page-scoped through `.elementor-33089 .elementor-element.elementor-element-k6a0001`. The class is on eleven objects, but each
carries its own copy of this CSS, so nothing here can reach the other seven. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
border-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:first-child,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:last-child,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:nth-child(odd),
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principle-card:not(:last-child) {
border: 1px solid #e0e2e5 !important;
border-radius: 2px !important;
background: #ffffff !important;
padding: 28px !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
border-top: 0 !important;
}
}
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-grid {
grid-template-columns: 1fr !important;
border-top: 0 !important;
}
}
/* 2026-09-30 - §6's header sat 14px right of every other header because nothing zeroes
the Elementor kit default on that container: `.e-con { --padding-left:
var(--container-default-padding-left, 10px) }` resolves to 1em = 14px at this site's
base. Absent from the data, visible on the page - the same 14px chased twice before.
Her comment is the reason this matters: the shared header exists "so eyebrow, heading
and intro keep one left edge in every section", and a 680px measure with six different
left edges is not a shared header.
Both the block and its inner wrapper are zeroed, because which of the two exists
depends on the container's content_width and only one of them will match.
Horizontal only - no vertical spacing is written here. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-header,
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-header > .e-con-inner {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
}
/* 2026-09-30 - mobile gutter to 20px, his ruling "make them all 20px". Section
horizontal padding only: the inset cards inside keep their own padding untouched, so
their text moves in by the same 4px the section gave up rather than jumping to 20. */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-k6a0001 { padding-left: 20px !important; padding-right: 20px !important; }
}
/* 2026-09-30 - the §6 inset, on the right box this time. My earlier write zeroed the
header and its wrapper; both already read 0, and zeroing something that already says
what you intend to write moves nothing. The kit default sits one level further up, on
the section's own inner container: `.e-con { --padding-left:
var(--container-default-padding-left, 10px) }` = 1em = 14px here. The equivalent
element on every working section - vacancies-inner, process-inner - reads 0, which is
the comparison that located it.
Left and right both, because the kit sets both and clearing one leaves the block
asymmetric. No vertical spacing, no width, no string. */
.elementor-33089 .elementor-element.elementor-element-k6a0001 .xentys-principles-inner {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a193948 *//* =========================================================
XENTYS — FAQ SECTION (skin v3)
Component: xentys-faq-section
Target: the four candidate pillar pages, section [4]
32464 werken-als-interim-inkoper (8 items)
33498 werken-als-strategisch-inkoper (6 items)
33089 werken-als-tactisch-inkoper (7 items)
32699 werken-als-technisch-inkoper (7 items)
Paste on: the xentys-faq-section container -> Advanced -> Custom CSS.
Nowhere else. Every rule is scoped by Elementor's own element token,
so nothing here can reach the shared template widgets in sections
[2] [5] [6] [7]. Section [4] contains no template widget.
CSS ONLY. No JavaScript. No copy is changed by this file.
SOURCE
Variant A / page 5165 interim-inkoop, the canonical occurrence
(spec-faq-section.md sections 6 and 8.1), reproduced value for value.
TWO DELIBERATE CHANGES TO THE CANONICAL FILE, both recorded so they
can be audited:
1. The 5165 appendix is FOLDED IN, not appended. 5165 states the header
centred and then corrects it to left at the end of the file. Only
five declarations differ, and they are folded into the base rules
here so no rule in this file contradicts another:
eyebrow width fit-content -> 100%
eyebrow margin 0 -> 0 0 14px
heading margin -8px auto 0 -> 0
heading text-align center -> left (and margin-left auto -> 0)
grid margin 0 auto -> 0 auto 0 0
Note the appendix sits AFTER the media queries on 5165, so it also
beats the mobile rule eyebrow margin-bottom 12px. 5165 therefore
renders 14px at every width. That is reproduced: 14px throughout,
and the dead 12px mobile line is not carried over.
2. Every rule is prefixed with body.page-id-33089 ahead of Elementor's
element token, instead of using that token on its own.
These pages still carry a page-level skin that styles
.elementor-toggle with !important at the same specificity as the
canonical file. The body.page-id prefix lifts every rule here above
it so the component wins on specificity, not on source order.
ELEMENT TREE (two containers added by the wrapper, no widget moved)
[4] container .xentys-faq-section <- this CSS
+- container .xentys-faq-inner ADDED wrapper
+- container .xentys-faq-header was the left column
| +- widget/heading .xentys-faq-eyebrow OPTIONAL, see below
| +- widget/heading .xentys-faq-heading
| +- widget/heading .xentys-faq-intro 33498 only
| +- widget/text-editor .xentys-faq-intro
+- container .xentys-faq-grid was the right column
+- container .xentys-faq-column ADDED wrapper
+- widget/heading .xentys-faq-column-title
+- widget/toggle .xentys-faq-toggle
THREE SLOTS THE CANONICAL COMPONENT DOES NOT HAVE
The candidate pages carry copy that variant A has no slot for. Rather
than delete or move it, it is given house-pattern classes:
.xentys-faq-intro the lead prose under the heading. Same
recipe as .xentys-impact-subheading and
.xentys-why-intro: 17px / 1.7 / #667085.
On 33498 it also lands on a heading widget
whose content is a lead sentence, not a
heading; that one renders as a standfirst.
.xentys-faq-column-title the accordion's own heading, one step down
from the section heading.
answer lists and links the tab content on these pages contains
ul / ol / a / h-tags. Variant A styles only
p, so those would fall back to the theme
inside a component that controls everything
else. Styled here to match.
CONTENT RULING (settled, applied here)
The toggle titles on these pages are TOPICS, not questions. So: no
Veelgestelde vragen heading, and faq_schema stays OFF. It is already
unset on all four toggles, so there is nothing to switch off. The
header keeps each page's own neutral heading. The eyebrow is the only
place GOED OM TE WETEN would go, and it needs a new widget - see the
note at the end of this file. Every eyebrow rule is present and simply
matches nothing until that widget exists, exactly as on page 5703.
PALETTE
ground #f4f7fa hairline #e8edf3
card #ffffff card border #d7e1ec open #b9c8d8
navy #0d2b55 amber #d97706 body #667085
hover row #f8fafc
========================================================= */
/* =========================================================
OUTER SECTION
Was a 70%-wide two-column row. Becomes a full-bleed band.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
background: #f4f7fa !important;
background-image: none !important;
padding: 84px 48px 92px !important;
border-top: 1px solid #e8edf3 !important;
border-bottom: 1px solid #e8edf3 !important;
border-left: 0 !important;
border-right: 0 !important;
/* the section carries a 2px corner radius from 2024; a full-bleed
band must be square */
border-radius: 0 !important;
box-shadow: none !important;
display: block !important;
overflow: hidden !important;
}
/* =========================================================
BOXED-CONTAINER NEUTRALISER
Three of the four sections, and both containers the wrapper
adds, are boxed, so Elementor renders an .e-con-inner with
its own max-width and padding. One page is already full.
This makes boxed and full render identically, so every rule
below can address the class and not worry which it got.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
COLUMN RESET
Clears the old two-column geometry: section width 70%,
left column 33/50%, right column 60/66%, percentage and em
padding on both, flex-start self-alignment on some.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
align-self: stretch !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* =========================================================
INNER WRAPPER
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner > .e-con-inner {
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 52px !important;
}
/* =========================================================
HEADER
Eyebrow, heading and lead prose, all flush left.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header > .e-con-inner {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* =========================================================
EYEBROW
Optional. No eyebrow widget exists on these four pages yet;
these rules match nothing until one is added, which is how
page 5703 ships.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow {
width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #d97706 !important;
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: 0.13em !important;
text-transform: uppercase !important;
text-align: left !important;
}
/* remove inherited line */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow::before,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow .elementor-heading-title::before {
content: none !important;
display: none !important;
}
/* =========================================================
MAIN HEADING
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading {
width: 100% !important;
max-width: 900px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading .elementor-heading-title {
margin-left: 0 !important;
margin-right: auto !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 36px !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.04em !important;
text-align: left !important;
}
/* =========================================================
LEAD PROSE
The left column's body copy. House recipe, the same one
.xentys-impact-subheading uses. Sits 14px off the heading,
matching the eyebrow-to-heading step used system wide.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro {
width: 100% !important;
max-width: 740px !important;
margin: 14px 0 0 !important;
padding: 0 !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro p,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro li {
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro p {
margin: 0 0 14px !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro p:last-child {
margin-bottom: 0 !important;
}
/* 33498 puts a lead sentence in a heading widget. It is a standfirst,
not a heading: navy and a shade heavier, but on the prose scale. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro a {
color: #d97706 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-thickness: 1px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro a:hover {
color: #0d2b55 !important;
}
/* =========================================================
FAQ GRID — ONE COLUMN, FLUSH LEFT
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid > .e-con-inner {
width: 100% !important;
max-width: 980px !important;
min-width: 0 !important;
margin: 0 auto 0 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
align-items: start !important;
}
/* =========================================================
FAQ COLUMN
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column > .e-con-inner {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
/* If Elementor still has two FAQ column containers,
force both into the same one-column flow */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid > .xentys-faq-column {
grid-column: 1 / -1 !important;
}
/* =========================================================
COLUMN TITLE
The accordion's own heading, one step down from the
section heading. Elementor holds it at custom width 80%;
cleared here so its left edge matches everything else.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title {
--container-widget-width: 100% !important;
width: 100% !important;
max-width: 820px !important;
margin: 0 0 8px !important;
padding: 0 !important;
align-self: stretch !important;
text-align: left !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title .elementor-heading-title {
margin-left: 0 !important;
margin-right: auto !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.015em !important;
text-align: left !important;
}
/* =========================================================
TOGGLE WIDGET
Elementor holds it at custom width 65% and align-self
flex-start; both cleared. It also carries a 2024 drop
shadow (0 0 6px rgba(0,0,0,0.11)); the card recipe below
supplies the only shadow this component uses, on the open
item alone.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-widget-container {
--container-widget-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
align-self: stretch !important;
}
/* =========================================================
TOGGLE ITEM
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-toggle-item {
width: 100% !important;
margin: 0 0 10px !important;
background: #ffffff !important;
border: 1px solid #d7e1ec !important;
border-radius: 4px !important;
overflow: hidden !important;
box-shadow: none !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-toggle-item:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
QUESTION / CLOSED STATE
The title element is an h3 on all four pages
(title_html_tag), so its theme margins are cleared too.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 20px 52px 20px 22px !important;
background: #ffffff !important;
border: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.45 !important;
transition:
background-color 0.2s ease,
color 0.2s ease !important;
}
/* Force inner title colour / weight */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title *,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title a {
color: #0d2b55 !important;
font-weight: 700 !important;
}
/* =========================================================
QUESTION HOVER
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title:hover {
background: #f8fafc !important;
color: #d97706 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title:hover *,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title:hover a {
color: #d97706 !important;
font-weight: 700 !important;
}
/* =========================================================
ACTIVE / OPEN QUESTION
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title.elementor-active {
background: #ffffff !important;
color: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title.elementor-active *,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title.elementor-active a {
color: #0d2b55 !important;
font-weight: 700 !important;
}
/* =========================================================
TOGGLE ICON — DEFAULT
These four toggles have no selected_icon set, so Elementor
emits its own icon on the LEFT with an 8px icon_space.
Absolute positioning moves it right; the margin icon_space
produces is cleared, since 5165 sets icon_space to 0.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-toggle-icon {
position: absolute !important;
right: 20px !important;
top: 50% !important;
left: auto !important;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%) !important;
color: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-toggle-icon i {
color: #0d2b55 !important;
margin: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-toggle-icon svg,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-toggle-icon svg path {
color: #0d2b55 !important;
fill: #0d2b55 !important;
stroke: #0d2b55 !important;
}
/* =========================================================
ICON HOVER
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title:hover
.elementor-toggle-icon,
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title:hover
.elementor-toggle-icon i {
color: #d97706 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title:hover
.elementor-toggle-icon svg,
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title:hover
.elementor-toggle-icon svg path {
fill: #d97706 !important;
stroke: #d97706 !important;
}
/* =========================================================
ACTIVE ICON
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title.elementor-active
.elementor-toggle-icon,
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title.elementor-active
.elementor-toggle-icon i {
color: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title.elementor-active
.elementor-toggle-icon svg,
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-tab-title.elementor-active
.elementor-toggle-icon svg path {
fill: #0d2b55 !important;
stroke: #0d2b55 !important;
}
/* =========================================================
ANSWER CONTENT
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content {
width: 100% !important;
margin: 0 !important;
padding: 0 22px 22px !important;
background: #ffffff !important;
border: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content p {
margin: 0 0 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
ANSWER CONTENT — LISTS, LINKS AND STRAY HEADINGS
Not in the canonical file, because the services pages have
none. These four do: ul on 33498 and 33089, ol and an
h-tag on 32699, and one to four links per page. Without
these they would fall back to the theme inside a component
that controls everything around them.
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content ul,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content ol {
margin: 0 0 12px !important;
padding: 0 0 0 20px !important;
list-style-position: outside !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content ul {
list-style-type: disc !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content ol {
list-style-type: decimal !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content ul:last-child,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content ol:last-child {
margin-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content li {
margin: 0 0 6px !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content li:last-child {
margin-bottom: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h1,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h2,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h3,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h4,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h5,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h6 {
margin: 0 0 8px !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content a {
color: #d97706 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-thickness: 1px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content a:hover {
color: #0d2b55 !important;
}
/* =========================================================
OPEN ITEM
========================================================= */
.elementor-33089 .elementor-element.elementor-element-a193948
.xentys-faq-toggle
.elementor-toggle-item:has(.elementor-tab-title.elementor-active) {
border-color: #b9c8d8 !important;
box-shadow:
0 8px 22px rgba(13, 43, 85, 0.04) !important;
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-a193948 {
padding: 72px 32px 80px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner > .e-con-inner {
max-width: 100% !important;
gap: 44px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading {
max-width: 760px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading .elementor-heading-title {
font-size: 31px !important;
line-height: 1.1 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro {
max-width: 700px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title .elementor-heading-title {
font-size: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid > .e-con-inner {
max-width: 860px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-a193948 {
padding: 60px 24px 68px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner > .e-con-inner {
max-width: 100% !important;
gap: 34px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header > .e-con-inner {
width: 100% !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-eyebrow .elementor-heading-title {
font-size: 11px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading {
max-width: 100% !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading .elementor-heading-title {
font-size: 28px !important;
line-height: 1.1 !important;
letter-spacing: -0.035em !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro {
max-width: 100% !important;
margin-top: 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro p,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro li {
font-size: 16px !important;
line-height: 1.65 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro .elementor-heading-title {
font-size: 17px !important;
line-height: 1.55 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title .elementor-heading-title {
font-size: 19px !important;
line-height: 1.3 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid > .e-con-inner {
max-width: 100% !important;
gap: 10px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column > .e-con-inner {
gap: 10px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-title {
padding: 18px 48px 18px 18px !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.45 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-toggle-icon {
right: 18px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content {
padding: 0 18px 18px !important;
font-size: 14px !important;
line-height: 1.65 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content li {
font-size: 14px !important;
line-height: 1.65 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h1,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h2,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h3,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h4,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h5,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-toggle .elementor-tab-content h6 {
font-size: 14px !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.elementor-33089 .elementor-element.elementor-element-a193948 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading .elementor-heading-title {
font-size: 25px !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title .elementor-heading-title {
font-size: 18px !important;
}
}
/* =========================================================
THE ONE WIDGET THIS COMPONENT WOULD LIKE AND DOES NOT HAVE
.xentys-faq-eyebrow — widget/heading, header_size: div,
text GOED OM TE WETEN, first child of .xentys-faq-header.
It is the slot the settled content ruling asks for, and the
only place a neutral label belongs now that each page keeps
its own heading. Every rule for it is already in this file,
so adding the widget needs no CSS change, and leaving it
out changes nothing else - page 5703 ships that way. It is
called out separately because adding a widget is not a
styling change: the apply script compares widget count and
every text value before it writes, and would refuse.
========================================================= */
/* 2026-09-24 §7 "The role in depth".
Ground and padding: OUR xentys-spec-section from 5507/1d54bb9 (navy #0d2b55, 88px).
Behaviour: OUR nested-accordion widget, the same one the mobile menu runs on.
Arrangement: HER two-column grid and toggle affordance from the prototype.
Translated because the markup differs: she styles .xentys-spec-toggle / summary /
.xentys-spec-toggle-body against native ; Elementor's nested-accordion emits
.e-n-accordion-item / .e-n-accordion-item-title, so her rules are bound to those.
Her open-state glyph reads content:"3" in the file - mojibake - so our close glyph is used. */
.elementor-33089 .elementor-element.elementor-element-a193948 { width: 100% !important; background: #0d2b55 !important;
padding: 88px clamp(20px, 5vw, 64px) 88px !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading, .elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-heading .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-a193948 h2, .elementor-33089 .elementor-element.elementor-element-a193948 h3 { color: #ffffff !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .elementor-widget-text-editor { color: rgba(255,255,255,0.72) !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion { display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 56px !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item {
border-top: 1px solid rgba(255,255,255,0.16) !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item:nth-last-child(-n+2) {
border-bottom: 1px solid rgba(255,255,255,0.16) !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item-title { display: flex !important;
align-items: center !important; justify-content: space-between !important; gap: 24px !important;
padding: 20px 0 !important; cursor: pointer !important; list-style: none !important;
color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important;
line-height: 1.35 !important; letter-spacing: -0.02em !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item-title::-webkit-details-marker { display: none !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item-title::after { content: "+" !important;
flex: none !important; color: #ffa300 !important; font-size: 22px !important;
font-weight: 400 !important; line-height: 1 !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
content: "\2212" !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggle-body { padding: 0 0 22px !important;
color: rgba(255,255,255,0.72) !important; font-size: 15px !important; line-height: 1.65 !important; }
@media (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion { grid-template-columns: 1fr !important;
column-gap: 0 !important; }
}
/* 2026-09-24 fix 1 — one content width. Measured on 33089 at 1440: inner edges landed
at 0, 48, 64 and 80px because transplanted sections carry 5507's 1312 grid and
Elementor's own sections default to 1344. The hero is the correct one: 1280, the
site grid. Capping the inner wrapper and centring it puts every inner edge at 80
on a 1440 viewport without touching any section's padding — so nothing about the
kept sections changes except where their content starts.
Scoped to the section's OWN inner wrapper and the named inner directly inside it,
never `[class*="-inner"]` at any depth: that would also have hit the inner wrapper
of every loop-grid card and every accordion panel on the page.
Two places can decide this width — Elementor's per-section setting and this CSS.
I changed only the CSS; it compiles to a higher specificity than Elementor's own
per-element rule and carries !important, so it wins without the settings moving. */
.elementor-33089 .elementor-element.elementor-element-a193948 > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-a193948 > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-a193948 > .e-con-inner > [class*="-inner"] {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 fix 3 — the columns were never the problem: the grid is already
repeat(2, minmax(0,1fr)). Measured 462+56+462 = 980 inside a 1312 content area,
so the CONTAINER was short, not the tracks. Forcing the widget and its wrapper to
full width lets the existing fr columns fill whatever the content width is, which
is what keeps this correct after fix 1 changes that width. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles > .elementor-widget-container,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion {
width: 100% !important;
max-width: none !important;
}
/* 2026-09-24 fix 1b — why fix 1 missed this section. Its children are
.xentys-faq-header and .xentys-faq-grid, and NEITHER ends in "-inner", so the
rule that caps `.elementor-33089 .elementor-element.elementor-element-a193948 > [class*="-inner"]` never matched them. Underneath
that, .xentys-faq-grid carries its own max-width: 980px, which is what the two
fr columns were resolving against — 462 + 56 + 462 = 980, exactly.
Capping both at the page grid makes the columns 612 each with no change to the
grid definition itself. Last in the block so nothing later takes it back. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-inner {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — the duplicate marker, and why the title read as centred.
Elementor's nested-accordion renders its OWN marker in
.e-n-accordion-item-title-icon (e-closed / e-opened SVGs). With our ::after that
made two, and it also made the summary a flex row of THREE children under
space-between: native icon hard left, title floating in the middle, our "+" hard
right. One fact, two symptoms. Hiding the native marker leaves two children, so
the title sits left and the "+" right, which is the design.
NOT done as a widget setting on purpose: none of the four accordions stores any
icon key at all — the settings are only _css_classes, _title, default_state and
items — so the marker comes from the widget's own default and there is nothing in
the saved data to switch off. Setting a control name I could not verify would have
been a guess that silently does nothing. If Elementor later exposes it in the
panel, that is the better place and this rule should go.
Our ::after is untouched: it carries the "+" / "−" pair. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item-title-icon {
display: none !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggles .e-n-accordion-item-title {
padding: 20px 24px !important;
}
/* 2026-09-24 — sections set to content_width:full have NO `.e-con-inner`, so their
children are DIRECT children of the section. Every cap we have written has aimed at
that wrapper, which is why the same handful of sections stayed off-grid through three
rounds while everything around them moved. Not an older kind of section — every one of
them is elType:container, same as the rest. Capping the direct children as well makes
the rule cover both shapes. On a boxed section these .elementor-33089 .elementor-element.elementor-element-a193948s simply match nothing. */
.elementor-33089 .elementor-element.elementor-element-a193948 > .e-con,
.elementor-33089 .elementor-element.elementor-element-a193948 > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — the §7 row. This section is flex-direction:row with two children,
.xentys-faq-header and .xentys-faq-grid, both at width:100%. Two 100% items on one
flex line share it, which is what put 32464's grid at 690 — half of its line rather
than the full content width. The other three happen to render stacked, so this rule
is a no-op there; it makes the intended arrangement explicit on all four instead of
leaving one page relying on something the other three get by accident. */
.elementor-33089 .elementor-element.elementor-element-a193948 {
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-grid {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — the §7 row, second attempt, and the first one styled the wrong box.
On a BOXED container Elementor puts the flex layout on `.e-con-inner`, not on the
section itself. So `.elementor-33089 .elementor-element.elementor-element-a193948 { flex-direction: column }` applied to an element whose
only child is that wrapper, and the header/grid row inside it was never addressed.
Targeting both covers boxed and full-width sections alike. */
.elementor-33089 .elementor-element.elementor-element-a193948,
.elementor-33089 .elementor-element.elementor-element-a193948 > .e-con-inner {
flex-direction: column !important;
flex-wrap: nowrap !important;
}
/* [dev 2026-09-25] Photo + navy veil on the "Werken als ..." section.
His observation: the reference shows a faint photo under the navy and the role
pages never got it - effective background-image was `none` on all four.
Mechanism transplanted verbatim from 57391 S6, which he signed off: the photo
sits above the navy background-colour, the ::after lays rgba(13,43,85,0.82)
over it, and the content is lifted to z-index 1 so the veil never covers it.
The navy ground rule earlier in this file sets background-image: none; this
rule is later and therefore wins. */
.elementor-33089 .elementor-element.elementor-element-a193948 {
background-image: url(https://xentys.nl/wp-content/uploads/2026/10/werkplaats-handen-technische-tekening.jpg) !important;
background-size: cover !important;
background-position: center 40% !important;
background-repeat: no-repeat !important;
position: relative !important;
isolation: isolate !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948::after {
content: "" !important; position: absolute !important; inset: 0 !important; background: rgba(13, 43, 85, 0.82) !important; z-index: 0 !important; pointer-events: none !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-a193948 > .e-con,
.elementor-33089 .elementor-element.elementor-element-a193948 > .elementor-widget {
position: relative !important;
z-index: 1 !important;
}
/* [dev 2026-09-25] Accordion SUMMARY box. Kingsford: "what you have created has
each one of them with a bounding box... in the reference there is borders on
the top and the bottom of them." The details wrapper was always correct - a
1px top rule and nothing else. The box is Elementor's nested-accordion DEFAULT
on the summary inside it: 1px solid rgb(213,216,220) on all four sides, which
nothing of ours overrode. Zeroing it leaves only the authored top rule (and the
bottom rule on the last item per column), which is the ruled form he signed off
on /inkoop-zzp/. */
.elementor-33089 .elementor-element.elementor-element-a193948 .e-n-accordion-item-title {
border: 0 !important;
}
/* [dev 2026-09-25] Dark-ground text conversion, finished. When this section was
made navy the H2 and the eyebrow got their white/amber overrides and these two
did not - exactly the same miss as 57391 S6's intro. Both were rendering a
LIGHT-ground colour on #0d2b55: the intro in the muted grey she uses on white,
and the column title in navy ON navy, i.e. invisible. Her rule for a dark
section: .xentys-sec--dark .xentys-intro { color: rgba(255,255,255,0.72) }.
The column title is a heading, so it takes the same #ffffff her headings take
on a dark ground - noted as a judgement, since she has no column title. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro p,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro li,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-intro .elementor-heading-title {
color: rgba(255, 255, 255, 0.72) !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title .elementor-heading-title {
color: #ffffff !important;
}
/* [dev 2026-09-25] Sub-heading spacing. Kingsford: "the text is almost sitting
right on top of the secondary header." Measured 0 above it here and 40 above it
on 32464, which is the page that reads correctly - so 40 is taken from a sibling
rather than chosen. It groups the label with the toggles it introduces instead of
reading as the last line of the paragraph above.
NOTE: the stored data does NOT explain either measurement - section flex_gap is
20px row on all four, the grid padding is zeroed by CSS on all four, and the
column-title's own margin-top is 0 everywhere. So this is written to the MEASURED
distance, not to an arithmetic I can reproduce. Verify the rendered gap. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-column-title {
margin-top: 40px !important;
}
/* [dev 2026-09-25] Open-panel box + invisible links.
1. Kingsford: "when unfolded, put no border around the text." The summary's
border was zeroed earlier today; the CONTENT panel keeps the SAME Elementor
default one level down - 1px solid rgb(213,216,220) on the .e-con inside each
accordion item. Zeroed here. The details' own top rule is untouched.
2. Links inside the toggle bodies inherit the site's base navy and were
therefore navy ON navy - unreadable. SOURCED, not invented: her role-page
stylesheet carries `.xentys-spec-section .xentys-intro a { color: #ffffff }`,
i.e. white is her answer for a link on this dark section. Applied to the
toggle bodies, which is where ours actually are. Written on every section
even where no link exists today, because a link added later would be
invisible and nothing would flag it. */
.elementor-33089 .elementor-element.elementor-element-a193948 .e-n-accordion-item > .e-con {
border: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggle-body a,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggle-body a:visited {
color: #ffffff !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-toggle-body a:hover {
color: #ffa300 !important;
}
/* [dev 2026-09-30] S7 amber link. Element and rules transplanted from 57391 S6,
the same component. Anchor is HER #vacatures (her file pairs that target with
this label four times); 32464 keeps #opdrachten because its own S3 heading is
"Interim opdrachten" - recorded as a decision, not a drift.
The eyebrow needed no CSS: .xentys-faq-eyebrow is already styled on this page. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link a,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link .elementor-heading-title {
color: #ffffff !important; font-family: Inter, sans-serif !important;
font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link { width: fit-content !important; margin: 28px 0 0 auto !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link span { color: #ffa300 !important; }
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link a,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link .elementor-heading-title {
color: #ffa300 !important;
}
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link:hover,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link:hover a,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link:hover .elementor-heading-title,
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-spec-link:hover span {
color: #ffffff !important;
}
/* 2026-09-30 - ONE SHARED HEADER MEASURE, 680px. From Sarah's role-page stylesheet:
`.xentys-sec-head { max-width: 680px; margin: 0 0 48px; }`, with her own comment -
"One shared header block so eyebrow, heading and intro keep one left edge in every
section." We carried five different measures and three sections with no cap at all,
so §3's heading ran to 992px and set on one line where her reference wraps it to two.
Her class name is not ours, so the cap is written against this section's own header
container; the effect is hers.
WIDTH ONLY, deliberately. Her spec also says 12px internal steps and 48px below the
header. Neither is written here: Kingsford ruled 16px across these pages earlier
today, and §3 carries 54px below from its own rule. Both are his to change and
neither should ride along silently inside a width fix.
On the two-column sections (§2, §8) the header column already renders narrower than
680, so this is a no-op there by design rather than by accident. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header { max-width: 680px !important; }
/* 2026-09-30 - un-centre the §7 header. This is a side effect of my own 680 cap: the
block already carried `margin-left/right: auto`, which did nothing while it was full
width and centred it the moment it had a width to centre within. Her spec is explicit
that the shared header is not centred - `.xentys-sec-head { max-width: 680px;
margin: 0 0 48px }`, margin-left 0 - so the left edge returns to the content edge and
the right side takes the slack.
Left/right only. The vertical margins are untouched: his 16px steps and the 54px below
stand, and her 12/48 are still parked with him.
Worth remembering: adding a max-width to a previously full-width block can change its
alignment without changing a single alignment property. */
.elementor-33089 .elementor-element.elementor-element-a193948 .xentys-faq-header {
margin-left: 0 !important;
margin-right: auto !important;
}
/* 2026-09-30 - §7 mobile gutter, 20px, matching the five sections that already carry 20
including the hero directly above it.
WHY §7 ALONE WAS AT ZERO, and it is only 33498 that actually rendered zero: the last
unmediated rule in this field is
padding-left: max(0px, calc((100% - 1280px) / 2))
a full-bleed centring device that yields 80px at 1440 and 0 at ANY width below 1280.
Being unmediated and last, it beats the earlier (max-width: 767px) and (max-width:
480px) rules, which add no specificity. It is load-bearing at desktop, so it is left
alone and this mobile-only rule is appended after it.
The other three pages end on `clamp(20px, 5vw, 64px)`, which already resolves to 20 at
390. The rule is written on all four anyway so the gutter is an authored value rather
than something that falls out of a clamp, and so the four pages agree in the data.
The 20 vs 24 split across the page is NOT harmonised here: restoring a missing value is
a fix, changing chosen ones is a decision, and that one is with him.
Left and right only - the vertical padding is untouched. */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-a193948 {
padding-left: 20px !important;
padding-right: 20px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-091bec6 *//* =========================================================
XENTYS — ROLES WE RECRUIT
OPTION A: EDITORIAL ROLE INDEX
Paste on:
Roles-section → Advanced → Custom CSS
Classes:
.xentys-roles-inner
.xentys-roles-intro
.xentys-roles-eyebrow
.xentys-roles-heading
.xentys-roles-body
.xentys-roles-list
.xentys-roles-item
.xentys-roles-item-content
.xentys-roles-item-title
.xentys-roles-item-text
========================================================= */
/* =========================================================
OUTER SECTION
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 {
width: 100% !important;
background: #ffffff !important;
padding: 88px clamp(20px, 5vw, 64px) 88px !important;
border-top: 0 !important;
border-bottom: 1px solid #e8edf3 !important;
overflow: hidden !important;
}
/* =========================================================
INNER LAYOUT
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-inner {
width: 100% !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns:
minmax(300px, 0.85fr)
minmax(0, 1.15fr) !important;
gap: 80px !important;
align-items: start !important;
}
/* =========================================================
LEFT INTRO COLUMN
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-intro {
width: 100% !important;
max-width: 520px !important;
margin: 0 !important;
padding: 6px 0 0 !important;
}
/* =========================================================
EYEBROW
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow {
width: auto !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #d97706 !important;
font-family: Inter, sans-serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
/* Remove inherited decorative eyebrow line */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow::before,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow .elementor-heading-title::before {
content: none !important;
display: none !important;
}
/* =========================================================
MAIN HEADING
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading {
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: clamp(26px, 3vw, 36px) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
}
/* =========================================================
INTRO BODY
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body p {
margin: 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: clamp(15px, 1.7vw, 17px) !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
RIGHT ROLE LIST
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-list {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
border-top: 1px solid #d7e1ec !important;
}
/* =========================================================
ROLE ROW
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 20px 0 !important;
display: block !important;
border: 0 !important;
border-bottom: 1px solid #d7e1ec !important;
transform: none !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
ROLE CONTENT
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-content {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 5px !important;
}
/* =========================================================
ROLE TITLE
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title .elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
}
/* =========================================================
ROLE DESCRIPTION
========================================================= */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text p {
margin: 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
STATIC ROWS
No hover because these are not links
========================================================= */
@media (min-width: 1025px) {
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item:hover {
transform: none !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item:hover
.xentys-roles-item-title,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item:hover
.xentys-roles-item-title .elementor-heading-title {
color: #0d2b55 !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-091bec6 {
padding: 76px clamp(20px, 5vw, 64px) 76px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-inner {
grid-template-columns: 1fr !important;
gap: 48px !important;
max-width: 100% !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-intro {
max-width: 720px !important;
padding-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading .elementor-heading-title {
font-size: 38px !important;
line-height: 1.1 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body p {
font-size: 17px !important;
line-height: 1.7 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item {
padding: 20px 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title .elementor-heading-title {
font-size: 18px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text p {
font-size: 13px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-091bec6 {
padding: 64px clamp(20px, 5vw, 64px) 64px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-inner {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-intro {
max-width: 100% !important;
padding-top: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow {
margin-bottom: 18px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-eyebrow .elementor-heading-title {
font-size: 11px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading {
margin-bottom: 16px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading .elementor-heading-title {
font-size: 34px !important;
line-height: 1.1 !important;
letter-spacing: -0.035em !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-body p {
font-size: 16px !important;
line-height: 1.7 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item {
padding: 18px 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-content {
gap: 5px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title .elementor-heading-title {
font-size: 17px !important;
line-height: 1.35 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-text p {
font-size: 13px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.elementor-33089 .elementor-element.elementor-element-091bec6 {
padding-left: clamp(20px, 5vw, 64px) !important;
padding-right: clamp(20px, 5vw, 64px) !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-heading .elementor-heading-title {
font-size: 31px !important;
}
}
/* ===== NEW DESIGN 18 Sep 2026 (round 2) ===== */
/* 2026-09-24: was #f4f7fa. That band came in with the component when §8 was
transplanted from 5507 and, sitting last in the file, it overrode the white
ground declared at the top of this same block. Her table's row for "Other
procurement roles" is white, and band here ran §8 and the §9 CTA together
with no boundary between them. Component is ours; arrangement is hers. */
.elementor-33089 .elementor-element.elementor-element-091bec6 { background-color: #ffffff !important; }
/* 2026-09-24 fix 1 — one content width. Measured on 33089 at 1440: inner edges landed
at 0, 48, 64 and 80px because transplanted sections carry 5507's 1312 grid and
Elementor's own sections default to 1344. The hero is the correct one: 1280, the
site grid. Capping the inner wrapper and centring it puts every inner edge at 80
on a 1440 viewport without touching any section's padding — so nothing about the
kept sections changes except where their content starts.
Scoped to the section's OWN inner wrapper and the named inner directly inside it,
never `[class*="-inner"]` at any depth: that would also have hit the inner wrapper
of every loop-grid card and every accordion panel on the page.
Two places can decide this width — Elementor's per-section setting and this CSS.
I changed only the CSS; it compiles to a higher specificity than Elementor's own
per-element rule and carries !important, so it wins without the settings moving. */
.elementor-33089 .elementor-element.elementor-element-091bec6 > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-091bec6 > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-091bec6 > .e-con-inner > [class*="-inner"] {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 fix 2 — .is-current had NO rule at all. The class was on the element and
"Je bent hier" rendered as plain text on a transparent ground. Last rule in this
block on purpose, so nothing later can take the ground back. */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item.is-current {
background: rgba(255, 163, 0, 0.06) !important;
border-left: 3px solid #ffa300 !important;
border-bottom-color: transparent !important;
padding: 18px 24px 18px 21px !important;
margin: 0 -24px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item.is-current .xentys-roles-here {
color: #ffa300 !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
margin-top: 8px !important;
}
/* 2026-09-24 — sections set to content_width:full have NO `.e-con-inner`, so their
children are DIRECT children of the section. Every cap we have written has aimed at
that wrapper, which is why the same handful of sections stayed off-grid through three
rounds while everything around them moved. Not an older kind of section — every one of
them is elType:container, same as the rest. Capping the direct children as well makes
the rule cover both shapes. On a boxed section these .elementor-33089 .elementor-element.elementor-element-091bec6s simply match nothing. */
.elementor-33089 .elementor-element.elementor-element-091bec6 > .e-con,
.elementor-33089 .elementor-element.elementor-element-091bec6 > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* [dev 2026-09-25] "Je bent hier" rendered 25.2px/600 - the unstyled heading
fallback. The small amber label was ALREADY authored in the rule above
(11px / 800 / 0.14em / uppercase / #ffa300); it simply never reached the text,
because it names only the widget and the type sits on .elementor-heading-title.
An inherited value loses to a direct declaration on the element, so the
heading-title has to be a member of the group. No new values: her label is
what was already specified. Same fix as S7's eyebrow and the spec-link . */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item.is-current .xentys-roles-here,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item.is-current .xentys-roles-here .elementor-heading-title {
color: #ffa300 !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
margin: 8px 0 0 !important;
padding: 0 !important;
}
/* [dev 2026-09-25] Roles-section button. Sarah: "Intro and button left, role
list right." Label "Bekijk inkoop vacatures" is verbatim from her role-page
document (4 occurrences). Styling transplanted from this page's hero PRIMARY
button so it is the same component, not a new one - class renamed only.
The link is NOT copied from the hero button: 4f69f1d/a70f565 carry live-domain
absolutes under a standing do-not-touch, so this uses the staging path that
every other link on these pages uses. */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn {
width: fit-content !important; max-width: fit-content !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn .elementor-widget-container, .elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn .elementor-button-wrapper {
margin: 0 !important; padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn .elementor-button {
min-width: 0 !important; min-height: 50px !important; height: auto !important; padding: 13px 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border: 1px solid transparent !important; border-radius: 3px !important; box-shadow: none !important; font-family: Inter, sans-serif !important; line-height: 1.2 !important; text-decoration: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn .elementor-button-content-wrapper, .elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn .elementor-button-text {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button {
background: #ffa300 !important; border-color: #ffa300 !important; color: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button:hover { border-color: #e8970a !important; color: #0d2b55 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button-icon, .elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button-icon i, .elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button-icon svg, .elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button:hover .elementor-button-icon, .elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button:hover .elementor-button-icon i, .elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-btn-primary .elementor-button:hover .elementor-button-icon svg {
color: #0d2b55 !important; fill: #0d2b55 !important; stroke: #0d2b55 !important;
}
/* [dev 2026-09-25] Roles-row hover. Kingsford: "lets add a hover effect to these."
Hover was not missing, it was NEUTRALISED: an existing rule inside
@media (min-width: 1025px) sets the title to #0d2b55 on hover - the same navy it
already is - at specificity [7-0]. That rule is left in place and beaten rather
than edited.
SELECTOR CHOICE, both constraints at once: scoping to the ANCHOR gives [7-1],
which outranks the neutraliser, AND it cannot match the is-current row, which
carries no link per her spec. A .elementor-33089 .elementor-element.elementor-element-091bec6 on the title would have done neither.
COLOUR is her house idiom, not invented: #d97706 is the hover colour of
.xentys-arrow-link, used by every arrow link on these pages. No layout change -
reproducing the is-current block's margin 0 -24px bleed on hover would shift
every row as the cursor moves.
The transition is MINE: without it the colour snaps while the row's existing
background/border transition eases, which reads as a glitch. Drop it if unwanted. */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item-title .elementor-heading-title a {
transition: color 0.2s ease !important;
}
@media (min-width: 1025px) {
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item:hover .xentys-roles-item-title .elementor-heading-title a {
color: #d97706 !important;
}
}
/* [dev 2026-09-30] S8 to her reference: eyebrow, heading, subtext, her six roles and
the footer line. The .xentys-roles-here rule on this page names only the WIDGET,
so the label rendered as a 25.2px heading; the heading-title is added to the group,
same fix as the other pages. .xentys-roles-footer has no styling anywhere and she
gives none, so it takes .xentys-roles-body's type with her amber link - DERIVED,
flagged not sourced. */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item.is-current .xentys-roles-here,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-item.is-current .xentys-roles-here .elementor-heading-title {
color: #ffa300 !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
margin: 8px 0 0 !important;
padding: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer p {
margin: 18px 0 0 !important;
padding: 0 !important;
color: #667085 !important;
font-family: Inter, sans-serif !important;
font-size: 15px !important;
line-height: 1.6 !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer a {
color: #d97706 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer span {
color: #d97706 !important;
}
/* 2026-09-30 - §8 footer link: navy + bold + no underline, arrow stays amber.
The underline was set as BOTH the shorthand and the longhand, each !important, so
clearing one and leaving the other is a half-fix that reads as done in the data and
still renders underlined. Both are cleared here.
The arrow's own rule (.xentys-roles-footer span) is deliberately NOT touched: it
targets the span directly, so the anchor's colour cannot override it by inheritance,
whatever the source order. Appended last, which is how every override in this field
wins. No stored string changes - this is colour and weight only. */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer a,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer a:link,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer a:visited,
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-footer a:hover {
color: #0d2b55 !important;
font-weight: 700 !important;
text-decoration: none !important;
text-decoration-line: none !important;
}
/* 2026-09-30 - ONE SHARED HEADER MEASURE, 680px. From Sarah's role-page stylesheet:
`.xentys-sec-head { max-width: 680px; margin: 0 0 48px; }`, with her own comment -
"One shared header block so eyebrow, heading and intro keep one left edge in every
section." We carried five different measures and three sections with no cap at all,
so §3's heading ran to 992px and set on one line where her reference wraps it to two.
Her class name is not ours, so the cap is written against this section's own header
container; the effect is hers.
WIDTH ONLY, deliberately. Her spec also says 12px internal steps and 48px below the
header. Neither is written here: Kingsford ruled 16px across these pages earlier
today, and §3 carries 54px below from its own rule. Both are his to change and
neither should ride along silently inside a width fix.
On the two-column sections (§2, §8) the header column already renders narrower than
680, so this is a no-op there by design rather than by accident. */
.elementor-33089 .elementor-element.elementor-element-091bec6 .xentys-roles-intro { max-width: 680px !important; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cd6c431 *//* =========================================================
XENTYS — UNIFIED CTA DESIGN (family-wide)
Paste on: xentys-cta-section (template root)
========================================================= */
.elementor-33089 .elementor-element.elementor-element-cd6c431 {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 88px 48px !important;
background: #f4f7fa !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 > .e-con-inner {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card.e-con {
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
position: relative !important;
overflow: hidden !important;
background: linear-gradient(150deg, #0d2b55 30%, #081d3d 100%) !important;
border-radius: 6px !important;
padding: clamp(48px, 6.5vw, 84px) clamp(28px, 6vw, 84px) !important;
display: grid !important;
grid-template-columns: 1.2fr 0.8fr !important;
gap: 40px !important;
align-items: center !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card > .e-con-inner {
display: contents !important;
}
/* Xentys X watermark */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card::before {
content: "" !important;
position: absolute !important;
top: -16% !important;
right: -5% !important;
width: min(44%, 560px) !important;
aspect-ratio: 84 / 68 !important;
background: url(https://xentys.nl/wp-content/uploads/2026/10/logo-x-amber.png) no-repeat center / contain !important;
opacity: 0.14 !important;
pointer-events: none !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form {
position: relative !important;
padding: 0 !important;
background: transparent !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy.e-con { display: block !important; }
/* copy roles */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow * {
color: #ffa300 !important;
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow { margin: 0 0 16px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-title,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-title * {
color: #ffffff !important;
font-family: Inter, sans-serif !important;
font-size: clamp(28px, 3.4vw, 40px) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-title { margin: 0 0 14px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body * {
color: rgba(255,255,255,0.75) !important;
font-family: Inter, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body { max-width: 480px !important; margin: 0 !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body p { margin: 0 !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note * {
color: rgba(255,255,255,0.6) !important;
font-family: Inter, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note { margin: 18px 0 0 !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note p { margin: 0 !important; }
/* actions */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions.e-con {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
justify-self: end !important;
width: min(280px, 100%) !important;
align-items: stretch !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions .elementor-widget-button,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions .elementor-button-wrapper { width: 100% !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions .elementor-button {
display: flex !important;
width: 100% !important;
justify-content: center !important;
box-sizing: border-box !important;
padding: 15px 26px !important;
font-family: Inter, sans-serif !important;
line-height: 1 !important;
border-radius: 2px !important;
transition: background 0.2s, border-color 0.2s !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-btn-primary .elementor-button {
background: #ffa300 !important;
color: #0d2b55 !important;
border: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-btn-primary .elementor-button:hover { }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-btn-secondary .elementor-button {
background: transparent !important;
color: #ffffff !important;
border: 1.5px solid rgba(255,255,255,0.35) !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-btn-secondary .elementor-button:hover {
border-color: #ffffff !important;
background: rgba(255,255,255,0.06) !important;
}
/* newsletter form (Elementor Pro Form, navy context) */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-form-fields-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-group {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-label { display: none !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-textual {
width: 100% !important;
min-height: 48px !important;
box-sizing: border-box !important;
padding: 14px 16px !important;
font-family: Inter, sans-serif !important;
font-size: 14.5px !important;
color: #ffffff !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.3) !important;
border-radius: 2px !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-textual::placeholder { color: rgba(255,255,255,0.55) !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-textual:focus {
outline: none !important;
border-color: #ffa300 !important;
background: rgba(255,255,255,0.12) !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-subgroup label,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-option label {
color: rgba(255,255,255,0.75) !important;
font-family: Inter, sans-serif !important;
font-size: 13.5px !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form input[type="checkbox"] { accent-color: #ffa300 !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-button {
width: 100% !important;
min-height: 48px !important;
box-sizing: border-box !important;
background: #ffa300 !important;
color: #0d2b55 !important;
font-family: Inter, sans-serif !important;
border: 0 !important;
border-radius: 2px !important;
transition: background 0.2s !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-button:hover { }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-message-success {
font-family: Inter, sans-serif !important;
font-size: 13.5px !important;
color: #ffffff !important;
background: rgba(255,163,0,0.15) !important;
border: 1px solid rgba(255,163,0,0.4) !important;
border-radius: 2px !important;
padding: 12px 14px !important;
}
@media (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-cd6c431 { padding: 64px 40px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card.e-con { grid-template-columns: 1fr !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions.e-con { justify-self: start !important; }
}
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-cd6c431 { padding: 56px 24px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions.e-con { width: 100% !important; }
}
/* =========================================================
COMPACT v2 — unified CTA sizing (Kingsford 2026-09-08)
========================================================= */
.elementor-33089 .elementor-element.elementor-element-cd6c431 { padding: 64px 48px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card.e-con {
padding: clamp(36px, 4.5vw, 56px) !important;
gap: 32px !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card::before { width: min(36%, 420px) !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow, .elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow * { font-size: 11.5px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow { margin: 0 0 12px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-title, .elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-title * { font-size: clamp(24px, 2.5vw, 30px) !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-title { margin: 0 0 10px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body, .elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body * { font-size: 15px !important; line-height: 1.6 !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body { max-width: 460px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note, .elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note * { font-size: 12px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note { margin: 14px 0 0 !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions, .elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions.e-con { width: min(260px, 100%) !important; gap: 10px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-actions .elementor-button { padding: 13px 22px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-field-textual { min-height: 44px !important; padding: 12px 14px !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-form .elementor-button { min-height: 44px !important; }
@media (max-width: 1024px) { .elementor-33089 .elementor-element.elementor-element-cd6c431 { padding: 48px 40px !important; } }
@media (max-width: 767px) { .elementor-33089 .elementor-element.elementor-element-cd6c431 { padding: 40px 24px !important; } }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-body { max-width: none !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-note { max-width: none !important; }
/* watermark: right, vertically centred in the button zone (+ explicit resets so an Elementor overlay ::before can never pin it left/full-height) */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card::before { top: 50% !important; transform: translateY(-50%) !important; right: -4% !important; left: auto !important; bottom: auto !important; height: auto !important; }
/* ── STRETCH v2: copy fills, buttons fixed column ── */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card.e-con {
grid-template-columns: minmax(0, 1fr) 280px !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy.e-con {
width: 100% !important;
max-width: none !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy > .e-con-inner { width: 100% !important; max-width: none !important; }
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy .elementor-widget,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-copy .elementor-widget-container {
width: 100% !important;
max-width: none !important;
}
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-title { max-width: none !important; }
@media (max-width: 1024px) {
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card.e-con { grid-template-columns: 1fr !important; }
}
/* 2026-09-24 fix 1 — one content width. Measured on 33089 at 1440: inner edges landed
at 0, 48, 64 and 80px because transplanted sections carry 5507's 1312 grid and
Elementor's own sections default to 1344. The hero is the correct one: 1280, the
site grid. Capping the inner wrapper and centring it puts every inner edge at 80
on a 1440 viewport without touching any section's padding — so nothing about the
kept sections changes except where their content starts.
Scoped to the section's OWN inner wrapper and the named inner directly inside it,
never `[class*="-inner"]` at any depth: that would also have hit the inner wrapper
of every loop-grid card and every accordion panel on the page.
Two places can decide this width — Elementor's per-section setting and this CSS.
I changed only the CSS; it compiles to a higher specificity than Elementor's own
per-element rule and carries !important, so it wins without the settings moving. */
.elementor-33089 .elementor-element.elementor-element-cd6c431 > .e-con-inner,
.elementor-33089 .elementor-element.elementor-element-cd6c431 > [class*="-inner"],
.elementor-33089 .elementor-element.elementor-element-cd6c431 > .e-con-inner > [class*="-inner"] {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 fix 1c — why fix 1 missed the closing CTA. Its child DOES carry
"-inner" (.xentys-ready-cta-inner), so the attribute .elementor-33089 .elementor-element.elementor-element-cd6c431 matched — but the
section's own rule caps the same element through `.xentys-cta-card.e-con`, which
is one class more specific than `[class*="-inner"]` and therefore won at 1440px.
Not a load-order problem and not a missing match: a specificity loss. Matching
the winning .elementor-33089 .elementor-element.elementor-element-cd6c431 exactly, and placed last. */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-ready-cta-inner,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-card.e-con {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-24 — sections set to content_width:full have NO `.e-con-inner`, so their
children are DIRECT children of the section. Every cap we have written has aimed at
that wrapper, which is why the same handful of sections stayed off-grid through three
rounds while everything around them moved. Not an older kind of section — every one of
them is elType:container, same as the rest. Capping the direct children as well makes
the rule cover both shapes. On a boxed section these .elementor-33089 .elementor-element.elementor-element-cd6c431s simply match nothing. */
.elementor-33089 .elementor-element.elementor-element-cd6c431 > .e-con,
.elementor-33089 .elementor-element.elementor-element-cd6c431 > .elementor-widget {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 2026-09-30 - §9 adopts Sarah's CTA copy. Copy only: this block writes no width,
padding, ground or colour, so the card stays capped at 1280px by the fix-1c block
above and does not span the page.
The eyebrow widget is NEW. `.xentys-cta-eyebrow` was already styled in this field
but carried by nothing - a styled-but-uncarried asset - so the widget needs only
the class. One property was off Kingsford's ruled triple 11.5/700/0.12em: the
tracking resolved to 0.14em from the base block. Corrected here rather than in the
theme, because the theme-file sweep is still gated. Colour stays #ffa300: the ruled
triple is size/weight/tracking, and amber is the dark-ground eyebrow. Placed last,
which is how every other override in this field wins. */
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-ready-cta-eyebrow,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-ready-cta-eyebrow *,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow,
.elementor-33089 .elementor-element.elementor-element-cd6c431 .xentys-cta-eyebrow * {
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
}
/* 2026-09-30 - mobile gutter to 20px, his ruling "make them all 20px". Section
horizontal padding only: the inset cards inside keep their own padding untouched, so
their text moves in by the same 4px the section gave up rather than jumping to 20. */
@media (max-width: 767px) {
.elementor-33089 .elementor-element.elementor-element-cd6c431 { padding-left: 20px !important; padding-right: 20px !important; }
}/* End custom CSS */