.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-menu-toggle{margin:0 auto;}.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-nav-menu .elementor-item{font-family:"Jost", Sans-serif;font-size:13px;font-weight:500;letter-spacing:-0.01em;word-spacing:0px;}.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-nav-menu--main .elementor-item{color:rgba(27,36,52,0.82);fill:rgba(27,36,52,0.82);}.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-nav-menu--main .elementor-item:hover,
					.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-nav-menu--main .elementor-item:focus{color:#1B2434;fill:#1B2434;}.elementor-7015 .elementor-element.elementor-element-468c82ae .elementor-nav-menu--main .elementor-item.elementor-item-active{color:rgba(27,36,52,0.82);}.elementor-7015 .elementor-element.elementor-element-b1a0de02 .elementor-button{background-color:rgba(0,0,0,0);font-family:"Jost", Sans-serif;font-size:13px;font-weight:500;letter-spacing:-0.01em;fill:#1B2434;color:#1B2434;border-style:none;padding:9px 14px 9px 14px;}.elementor-7015 .elementor-element.elementor-element-b1a0de02.elementor-element{--align-self:center;}.elementor-7015 .elementor-element.elementor-element-b1a0e100{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e121{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e116{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e105{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e110{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e115{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e117{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e120 .elementor-button{background-color:#1A3668;fill:#FFFFFF;color:#FFFFFF;border-style:none;}.elementor-7015 .elementor-element.elementor-element-b1a0e200{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e221{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e216{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e205{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e210{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e215{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e217{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e220 .elementor-button{background-color:#1A3668;fill:#FFFFFF;color:#FFFFFF;border-style:none;}.elementor-7015 .elementor-element.elementor-element-b1a0e300{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e316{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e311{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e305{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e310{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e312{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e315 .elementor-button{background-color:#1A3668;fill:#FFFFFF;color:#FFFFFF;border-style:none;}.elementor-7015 .elementor-element.elementor-element-b1a0e400{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e411{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e406{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e405{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e407{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e410 .elementor-button{background-color:#1A3668;fill:#FFFFFF;color:#FFFFFF;border-style:none;}.elementor-7015 .elementor-element.elementor-element-b1a0e500{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e521{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e516{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e505{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e510{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e515{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e517{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7015 .elementor-element.elementor-element-b1a0e520 .elementor-button{background-color:#1A3668;fill:#FFFFFF;color:#FFFFFF;border-style:none;}.elementor-7015 .elementor-element.elementor-element-01a3669{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3674{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3674:not(.elementor-motion-effects-element-type-background), .elementor-7015 .elementor-element.elementor-element-01a3674 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a3670{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a366e{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a366a > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a366a .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.8px;color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-01a366b .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:44px;font-weight:500;line-height:1.05em;letter-spacing:-1.04px;color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-01a366c{--divider-border-style:solid;--divider-color:#C9A84C;--divider-border-width:2px;}.elementor-7015 .elementor-element.elementor-element-01a366c .elementor-divider-separator{width:56px;margin:0 auto;margin-left:0;}.elementor-7015 .elementor-element.elementor-element-01a366c .elementor-divider{text-align:left;padding-block-start:10px;padding-block-end:10px;}.elementor-7015 .elementor-element.elementor-element-01a366d{font-family:"Inter", Sans-serif;font-size:19px;line-height:1.6em;color:#C3CFE4;}.elementor-7015 .elementor-element.elementor-element-01a3673{--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;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3671 .elementor-button{background-color:#FFFFFF;font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;letter-spacing:0.01em;fill:#1A3668;color:#1A3668;border-style:solid;border-width:1.5px 1.5px 1.5px 1.5px;border-color:#FFFFFF;border-radius:4px 4px 4px 4px;padding:13px 22px 13px 22px;}.elementor-7015 .elementor-element.elementor-element-01a3671 .elementor-button:hover, .elementor-7015 .elementor-element.elementor-element-01a3671 .elementor-button:focus{background-color:#E8EDF5;color:#1A3668;border-color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-01a3671 .elementor-button:hover svg, .elementor-7015 .elementor-element.elementor-element-01a3671 .elementor-button:focus svg{fill:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a3672 .elementor-button{background-color:rgba(0,0,0,0);font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;letter-spacing:0.01em;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1.5px 1.5px 1.5px 1.5px;border-color:rgba(255,255,255,.55);border-radius:4px 4px 4px 4px;padding:13px 22px 13px 22px;}.elementor-7015 .elementor-element.elementor-element-01a3672 .elementor-button:hover, .elementor-7015 .elementor-element.elementor-element-01a3672 .elementor-button:focus{background-color:rgba(255,255,255,.10);color:#FFFFFF;border-color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-01a3672 .elementor-button:hover svg, .elementor-7015 .elementor-element.elementor-element-01a3672 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-01a371c{--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-7015 .elementor-element.elementor-element-01a3719{--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-7015 .elementor-element.elementor-element-01a371b{--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-7015 .elementor-element.elementor-element-01a371a{--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-7015 .elementor-element.elementor-element-01a3718{--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-7015 .elementor-element.elementor-element-01a3717{--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-7015 .elementor-element.elementor-element-01a36b3{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36b2{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3742{--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-7015 .elementor-element.elementor-element-01a373d{--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-7015 .elementor-element.elementor-element-01a373f{--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-7015 .elementor-element.elementor-element-01a373e{--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-7015 .elementor-element.elementor-element-01a3741{--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-7015 .elementor-element.elementor-element-01a3740{--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-7015 .elementor-element.elementor-element-01a36ae{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36ab .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36ac > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a36ac .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:30px;font-weight:600;line-height:1.2em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36ad{font-family:"Inter", Sans-serif;font-size:16.5px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36af{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36b0{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a367b{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3675{font-family:"Inter", Sans-serif;font-size:10.5px;font-weight:500;line-height:1.65em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a3676{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a3677 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a3678{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a3679{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a367a{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a3682{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a367c{font-family:"Inter", Sans-serif;font-size:10.5px;font-weight:500;line-height:1.65em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a367d{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a367e .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a367f{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a3680{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a3681{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a3689{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3683{font-family:"Inter", Sans-serif;font-size:10.5px;font-weight:500;line-height:1.65em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a3684{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a3685 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a3686{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a3687{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a3688{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a3690{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a368a{font-family:"Inter", Sans-serif;font-size:10.5px;font-weight:500;line-height:1.65em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a368b{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a368c .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a368d{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a368e{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a368f{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a3697{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3691{font-family:"Inter", Sans-serif;font-size:10.5px;font-weight:500;line-height:1.65em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a3692{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a3693 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a3694{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a3695{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a3696{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a369e{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3698{font-family:"Inter", Sans-serif;font-size:10.5px;font-weight:500;line-height:1.65em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a3699{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a369a .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a369b{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a369c{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a369d{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36a5{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a369f{font-family:"Inter", Sans-serif;font-size:10.5px;font-weight:500;line-height:1.65em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a36a0{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36a1 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36a2{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a36a3{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a36a4{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36aa{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36a6{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36a7 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:22px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36a8{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#5C6675;}.elementor-7015 .elementor-element.elementor-element-01a36a9{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36b1{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36b8{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36b4 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36b5 > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a36b5 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:24px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36b7{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36b6{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a3722{--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-7015 .elementor-element.elementor-element-01a371f{--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-7015 .elementor-element.elementor-element-01a3721{--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-7015 .elementor-element.elementor-element-01a3720{--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-7015 .elementor-element.elementor-element-01a371e{--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-7015 .elementor-element.elementor-element-01a371d{--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-7015 .elementor-element.elementor-element-01a36d1{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36ce .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36cf > .elementor-widget-container{margin:0px 0px 24px 0px;}.elementor-7015 .elementor-element.elementor-element-01a36cf .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:30px;font-weight:600;line-height:1.2em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36d0{--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;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--flex-wrap:wrap;--padding-top:8px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36bd{--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:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36b9{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36ba .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:20px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36bb{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#4C5665;}.elementor-7015 .elementor-element.elementor-element-01a36bc{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36c2{--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:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36be{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36bf .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:20px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36c0{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#4C5665;}.elementor-7015 .elementor-element.elementor-element-01a36c1{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36c7{--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:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36c3{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36c4 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:20px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36c5{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#4C5665;}.elementor-7015 .elementor-element.elementor-element-01a36c6{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36cc{--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:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36c8{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;line-height:1.65em;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36c9 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:20px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36ca{font-family:"Inter", Sans-serif;font-size:16px;line-height:1.62em;color:#4C5665;}.elementor-7015 .elementor-element.elementor-element-01a36cb{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36cd{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a3728{--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-7015 .elementor-element.elementor-element-01a3725{--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-7015 .elementor-element.elementor-element-01a3727{--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-7015 .elementor-element.elementor-element-01a3726{--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-7015 .elementor-element.elementor-element-01a3724{--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-7015 .elementor-element.elementor-element-01a3723{--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-7015 .elementor-element.elementor-element-01a36d6{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36d2 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36d3 > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a36d3 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:24px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36d5{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36d4{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a372e{--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-7015 .elementor-element.elementor-element-01a372b{--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-7015 .elementor-element.elementor-element-01a372d{--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-7015 .elementor-element.elementor-element-01a372c{--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-7015 .elementor-element.elementor-element-01a372a{--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-7015 .elementor-element.elementor-element-01a3729{--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-7015 .elementor-element.elementor-element-01a36ec{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36e9 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36ea > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a36ea .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:30px;font-weight:600;line-height:1.2em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36eb{--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;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:8px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36dd{--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;--align-items:start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36dc{--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:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36d8 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:18px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36d9{font-family:"Inter", Sans-serif;font-size:13.5px;line-height:1.65em;color:#656F7E;}.elementor-7015 .elementor-element.elementor-element-01a36da{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#4C5665;}.elementor-7015 .elementor-element.elementor-element-01a36db{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36e4{--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;--align-items:start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36e3{--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:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36df .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:18px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36e0{font-family:"Inter", Sans-serif;font-size:13.5px;line-height:1.65em;color:#656F7E;}.elementor-7015 .elementor-element.elementor-element-01a36e1{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#4C5665;}.elementor-7015 .elementor-element.elementor-element-01a36e2{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36e7{--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;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36e5 .elementor-button{background-color:#1A3668;font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:4px 4px 4px 4px;padding:15px 28px 15px 28px;}.elementor-7015 .elementor-element.elementor-element-01a36e6 .elementor-button{background-color:#1A3668;font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:4px 4px 4px 4px;padding:15px 28px 15px 28px;}.elementor-7015 .elementor-element.elementor-element-01a36e8{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a3734{--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-7015 .elementor-element.elementor-element-01a3731{--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-7015 .elementor-element.elementor-element-01a3733{--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-7015 .elementor-element.elementor-element-01a3732{--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-7015 .elementor-element.elementor-element-01a3730{--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-7015 .elementor-element.elementor-element-01a372f{--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-7015 .elementor-element.elementor-element-01a36f5{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36ed .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36ee > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a36ee .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:24px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36ef{font-family:"Inter", Sans-serif;font-size:16.5px;line-height:1.7em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36f0{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36f1{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36f4{--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;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36f2 .elementor-button{background-color:#1A3668;font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:4px 4px 4px 4px;padding:15px 28px 15px 28px;}.elementor-7015 .elementor-element.elementor-element-01a36f3 .elementor-button{background-color:#1A3668;font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;border-radius:4px 4px 4px 4px;padding:15px 28px 15px 28px;}.elementor-7015 .elementor-element.elementor-element-01a373c{--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-7015 .elementor-element.elementor-element-01a3739{--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-7015 .elementor-element.elementor-element-01a373b{--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-7015 .elementor-element.elementor-element-01a373a{--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-7015 .elementor-element.elementor-element-01a3736{--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-7015 .elementor-element.elementor-element-01a3735{--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-7015 .elementor-element.elementor-element-01a3738{--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-7015 .elementor-element.elementor-element-01a3737{--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-7015 .elementor-element.elementor-element-01a36fc{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36fc:not(.elementor-motion-effects-element-type-background), .elementor-7015 .elementor-element.elementor-element-01a36fc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F6F9;}.elementor-7015 .elementor-element.elementor-element-01a36f6 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a36f7 > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a36f7 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:28px;font-weight:600;line-height:1.25em;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a36f8{font-family:"Inter", Sans-serif;font-size:16.5px;line-height:1.7em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36f9{font-family:"Inter", Sans-serif;font-size:16.5px;line-height:1.7em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a36fb{--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:16px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a36fa{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-01a370a{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3708 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.8px;color:#7A6529;}.elementor-7015 .elementor-element.elementor-element-01a3709 > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a3709 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:24px;font-weight:600;color:#1B2434;}.elementor-7015 .elementor-element.elementor-element-01a3707{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:16px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3712{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3712:not(.elementor-motion-effects-element-type-background), .elementor-7015 .elementor-element.elementor-element-01a3712 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F6F9;}.elementor-7015 .elementor-element.elementor-element-01a3711{--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:44px 44px;--row-gap:44px;--column-gap:44px;--flex-wrap:wrap;--padding-top:58px;--padding-bottom:52px;--padding-left:56px;--padding-right:56px;}.elementor-7015 .elementor-element.elementor-element-01a3711:not(.elementor-motion-effects-element-type-background), .elementor-7015 .elementor-element.elementor-element-01a3711 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#12244A;}.elementor-7015 .elementor-element.elementor-element-01a370f{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a370d > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-7015 .elementor-element.elementor-element-01a370d .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:30px;font-weight:500;line-height:1.25em;color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-01a370e{font-family:"Inter", Sans-serif;font-size:17px;line-height:1.62em;color:#C3CFE4;}.elementor-7015 .elementor-element.elementor-element-01a3710{--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;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a370b .elementor-button{background-color:#FFFFFF;font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;letter-spacing:0.01em;fill:#1A3668;color:#1A3668;border-style:solid;border-width:1.5px 1.5px 1.5px 1.5px;border-color:#FFFFFF;border-radius:4px 4px 4px 4px;padding:13px 22px 13px 22px;}.elementor-7015 .elementor-element.elementor-element-01a370b .elementor-button:hover, .elementor-7015 .elementor-element.elementor-element-01a370b .elementor-button:focus{background-color:#E8EDF5;color:#1A3668;border-color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-01a370b .elementor-button:hover svg, .elementor-7015 .elementor-element.elementor-element-01a370b .elementor-button:focus svg{fill:#1A3668;}.elementor-7015 .elementor-element.elementor-element-01a370c .elementor-button{background-color:rgba(0,0,0,0);font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;letter-spacing:0.01em;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1.5px 1.5px 1.5px 1.5px;border-color:rgba(255,255,255,.55);border-radius:4px 4px 4px 4px;padding:13px 22px 13px 22px;}.elementor-7015 .elementor-element.elementor-element-01a370c .elementor-button:hover, .elementor-7015 .elementor-element.elementor-element-01a370c .elementor-button:focus{background-color:rgba(255,255,255,.10);color:#FFFFFF;border-color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-01a370c .elementor-button:hover svg, .elementor-7015 .elementor-element.elementor-element-01a370c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-01a3716{--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:9px 9px;--row-gap:9px;--column-gap:9px;--padding-top:128px;--padding-bottom:128px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3713 > .elementor-widget-container{margin:0px 0px 3px 0px;}.elementor-7015 .elementor-element.elementor-element-01a3713 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:1.5px;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a3714{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.62em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a3715{font-family:"Inter", Sans-serif;font-size:14px;line-height:1.62em;color:#6A7382;}.elementor-7015 .elementor-element.elementor-element-01a3744{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7015 .elementor-element.elementor-element-01a3743{font-family:"Inter", Sans-serif;font-size:15px;line-height:1.65em;color:#414B5A;}.elementor-7015 .elementor-element.elementor-element-983e902{--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:64px;--padding-bottom:48px;--padding-left:28px;--padding-right:28px;}.elementor-7015 .elementor-element.elementor-element-983e902:not(.elementor-motion-effects-element-type-background), .elementor-7015 .elementor-element.elementor-element-983e902 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A1424;}.elementor-7015 .elementor-element.elementor-element-eda5616{--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-7015 .elementor-element.elementor-element-5a7c435{--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-7015 .elementor-element.elementor-element-b0f5eea > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-7015 .elementor-element.elementor-element-b0f5eea .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:600;letter-spacing:1.6px;color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-bc9f652{--e-icon-list-icon-size:0px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:14px;font-weight:300;}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-text{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-bc9f652 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-b6e6cfa{--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-7015 .elementor-element.elementor-element-49f8cca > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-7015 .elementor-element.elementor-element-49f8cca .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:600;letter-spacing:1.6px;color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-b50dfea{--e-icon-list-icon-size:0px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:14px;font-weight:300;}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-text{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-b50dfea .elementor-icon-list-item:hover .elementor-icon-list-text{color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-7627335{--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-7015 .elementor-element.elementor-element-92e8d8c > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-7015 .elementor-element.elementor-element-92e8d8c .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:600;letter-spacing:1.6px;color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-031371c{--e-icon-list-icon-size:0px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:14px;font-weight:300;}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-text{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-031371c .elementor-icon-list-item:hover .elementor-icon-list-text{color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-9a9179d{--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-7015 .elementor-element.elementor-element-7a51547 > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-7015 .elementor-element.elementor-element-7a51547 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:600;letter-spacing:1.6px;color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-1a9faf3{--e-icon-list-icon-size:0px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:14px;font-weight:300;}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-text{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-1a9faf3 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-51a2a6d{--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:36px;--padding-bottom:40px;--padding-left:28px;--padding-right:28px;}.elementor-7015 .elementor-element.elementor-element-51a2a6d:not(.elementor-motion-effects-element-type-background), .elementor-7015 .elementor-element.elementor-element-51a2a6d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A1424;}.elementor-7015 .elementor-element.elementor-element-a7d0c7f{--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-7015 .elementor-element.elementor-element-6e9bd5d{--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-7015 .elementor-element.elementor-element-31513bc{--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-7015 .elementor-element.elementor-element-e8abbd7 > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-7015 .elementor-element.elementor-element-e8abbd7 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-icon i{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-icon svg{fill:#C7D3E6;transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-e59dfb2{--e-icon-list-icon-size:9px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-icon{padding-inline-end:4px;}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:12px;font-weight:500;}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-text{color:#8FA3BF;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-e59dfb2 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-icon i{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-icon svg{fill:#C7D3E6;transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-65bdb04{--e-icon-list-icon-size:9px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-icon{padding-inline-end:4px;}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:12px;font-weight:500;}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-text{color:#8FA3BF;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-65bdb04 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-121fbcd{--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-7015 .elementor-element.elementor-element-f40a390 > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-7015 .elementor-element.elementor-element-f40a390 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-icon i{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-icon svg{fill:#C7D3E6;transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-5b0ea4e{--e-icon-list-icon-size:9px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-icon{padding-inline-end:4px;}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:12px;font-weight:500;}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-text{color:#8FA3BF;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-5b0ea4e .elementor-icon-list-item:hover .elementor-icon-list-text{color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-icon i{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-icon svg{fill:#C7D3E6;transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-7ff1200{--e-icon-list-icon-size:9px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-icon{padding-inline-end:4px;}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:12px;font-weight:500;}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-text{color:#8FA3BF;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-7ff1200 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-6697bf6{--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-7015 .elementor-element.elementor-element-91807da > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-7015 .elementor-element.elementor-element-91807da .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-icon i{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-icon svg{fill:#C7D3E6;transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-3e9c065{--e-icon-list-icon-size:9px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-icon{padding-inline-end:4px;}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:12px;font-weight:500;}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-text{color:#8FA3BF;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-3e9c065 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-icon i{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-icon svg{fill:#C7D3E6;transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-08fb852{--e-icon-list-icon-size:9px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-icon{padding-inline-end:4px;}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:12px;font-weight:500;}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-text{color:#8FA3BF;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-08fb852 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#C9A84C;}.elementor-7015 .elementor-element.elementor-element-720d633{--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;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-7015 .elementor-element.elementor-element-581b894{font-family:"Inter", Sans-serif;font-size:12px;line-height:1.8em;color:#8FA3BF;}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(11px/2);}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-11px/2);}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-icon i{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-icon svg{fill:#C7D3E6;transition:fill 0.3s;}.elementor-7015 .elementor-element.elementor-element-18bad48{--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-icon{padding-inline-end:8px;}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-item > a{font-family:"Jost", Sans-serif;font-size:13px;font-weight:300;}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-text{color:#C7D3E6;transition:color 0.3s;}.elementor-7015 .elementor-element.elementor-element-18bad48 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#FFFFFF;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-7015 .elementor-element.elementor-element-01a3674{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a36b8{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a36d1{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a36bd{--width:48%;}.elementor-7015 .elementor-element.elementor-element-01a36c2{--width:48%;}.elementor-7015 .elementor-element.elementor-element-01a36c7{--width:48%;}.elementor-7015 .elementor-element.elementor-element-01a36cc{--width:48%;}.elementor-7015 .elementor-element.elementor-element-01a36d6{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a36ec{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a36dd{--width:48%;}.elementor-7015 .elementor-element.elementor-element-01a36e4{--width:48%;}.elementor-7015 .elementor-element.elementor-element-01a36f5{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a36fc{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a370a{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a3712{--content-width:1240px;}.elementor-7015 .elementor-element.elementor-element-01a3716{--content-width:1240px;}}/* Start custom CSS *//* Boettcher Law landing page. Design System v1.2. Hover states only. */
.bl-btn .elementor-button{transition:background-color 160ms cubic-bezier(.2,.6,.3,1),
  color 160ms cubic-bezier(.2,.6,.3,1),border-color 160ms cubic-bezier(.2,.6,.3,1),
  box-shadow 160ms cubic-bezier(.2,.6,.3,1)}
/* the gold line arrives inset, so the button never shifts by 2px on hover */
.bl-btn-primary .elementor-button:hover,.bl-btn-primary .elementor-button:focus-visible,
.bl-btn-on-navy .elementor-button:hover,.bl-btn-on-navy .elementor-button:focus-visible{
  box-shadow:inset 0 -2px 0 #C9A84C}
/* sequence rows: gold number, quiet ground */
.bl-step{transition:background-color 160ms cubic-bezier(.2,.6,.3,1)}
.bl-step:hover{background-color:#F4F6F9}
.bl-step:hover .bl-stepnum{color:#1A3668}
/* engagement cards: hairline becomes gold */
.bl-card{transition:border-color 200ms cubic-bezier(.2,.6,.3,1),
  box-shadow 200ms cubic-bezier(.2,.6,.3,1)}
.bl-card:hover{border-color:#C9A84C!important;
  box-shadow:0 1px 2px rgba(15,34,70,.05),0 10px 28px rgba(15,34,70,.07)}
/* judgment pieces: a gold rule appears on the left */
.bl-jud{border-left:2px solid transparent;padding-left:16px;
  transition:border-color 200ms cubic-bezier(.2,.6,.3,1)}
.bl-jud:hover{border-left-color:#C9A84C}
/* related chips */
.bl-chips a{transition:border-color 160ms cubic-bezier(.2,.6,.3,1),
  background-color 160ms cubic-bezier(.2,.6,.3,1)}
.bl-chips a:hover{border-color:#C9A84C!important;background:#E8EDF5}
@media (prefers-reduced-motion:reduce){
  .bl-btn .elementor-button,.bl-step,.bl-rail-card,.bl-jud,.bl-chips a{
    transition:none}
  .elementor-invisible{opacity:1!important;animation:none!important}
}

/* hovers */
/* hover states on the rest of the page ------------------------------ */
/* Restraint is the design thesis, so nothing moves far and nothing bounces.
   Every hover does the same one thing: gold arrives where the hairline was. */
.seq li{transition:background 160ms cubic-bezier(.2,.6,.3,1)}
.seq li:hover{background:var(--surface)}
.seq li:hover .step{color:var(--navy)}
/* the engagement card hover now lives with the rail, above */
.chip{transition:border-color 160ms cubic-bezier(.2,.6,.3,1),
  background 160ms cubic-bezier(.2,.6,.3,1)}
.chip:hover,.chip:focus-visible{border-color:var(--gold);
  background:var(--navy-tint)}
.jud>div{padding-left:16px;border-left:2px solid transparent;
  transition:border-color 200ms cubic-bezier(.2,.6,.3,1)}
.jud>div:hover{border-left-color:var(--gold)}

/* people */
/* 06 portraits, Elementor classes. The preview styles `.person .portrait`
   directly; Elementor wraps its image widget, so the same geometry has to be
   expressed against the widget's own markup. Both live here so a change to the
   portrait size happens once. */
.bl-person{align-items:flex-start}
.bl-person .bl-portrait{flex:0 0 140px}
.bl-person .bl-portrait img{display:block;width:140px;height:175px;
  object-fit:cover;object-position:center 22%;
  border:1px solid var(--hairline)}
@media (max-width:900px){
  .bl-person .bl-portrait,.bl-person .bl-portrait img{width:110px;flex-basis:110px}
  .bl-person .bl-portrait img{height:138px}
}
/* THE CARD BECOMES A COLUMN AT 767px, AND IT IS ELEMENTOR'S BREAKPOINT, NOT
   OURS. Fabian, 1 September 2026, on the live homepage on a phone: the staff
   section "is completely off." It was: measured at 500px, person 1's card box
   ran y7864 to y8227 while its own h3 rendered at y8247, its > and + controls
   at y8562 inside person 2's box, and the "Meet the team" pair at y8646 across
   Mason's biography. Every child was painting a card behind where it belonged.

   THREE RULES COMBINE AND NONE OF THEM IS WRONG ON ITS OWN.

   One, Elementor ships `@media (max-width:767px){.e-con.e-flex{--width:100%}}`,
   so the bio column, which is a nested container, is forced to the card's full
   width instead of the ~303px left beside the portrait.

   Two, the card is `flex-direction:row` with `flex-wrap:wrap`, so a child that
   cannot fit beside the portrait does not shrink, it wraps to a second line.

   Three, `.bl-country .bl-person > div{height:100%}` below is what makes the
   two control rows line up across the row at desktop. On a wrapped second line
   it resolves 100% against the card, which was already sized by line one, so
   the column renders a full card-height tall starting below the card and
   `overflow:visible` lets it out.

   SO THE FIX IS THE DIRECTION, NOT THE OVERFLOW. Stacking the card removes the
   wrap, and with no second line there is nothing to resolve 100% against
   wrongly, so the height rule can go back to `auto` rather than being fought.
   Clipping the overflow would have hidden the symptom and kept the biography
   truncated behind the portrait.

   `--flex-direction` AND the longhand, on a doubled body.elementor-page-7015. Elementor drives
   direction through the custom property from a per-element rule, and setting
   only the longhand ties on specificity with `.e-con-full.e-flex` and is
   decided by source order. `.e-con.e-flex` on our own class outranks both.

   AND `flex-basis` IS THE HEIGHT ONCE THE DIRECTION IS COLUMN, so the 110px
   basis set at 900px above has to go back to auto or the portrait is 110px
   tall rather than 110px wide. */
@media (max-width:767px){
  .bl-country .bl-person.e-con.e-flex,.bl-person.e-con.e-flex{
    --flex-direction:column;--flex-wrap:nowrap;
    flex-direction:column;flex-wrap:nowrap;height:auto}
  /* The card's own height is released beside the rule that sets it, in the
     chipfeed block, NOT here: written here it ties on specificity and loses
     on source order. See the note there. */
  .bl-person .bl-portrait,.bl-person .bl-portrait img{flex-basis:auto}
  .bl-person .bl-portrait{width:110px}
}

/* counsel */
/* 06b counsel assisting. Deliberately quieter than the people band above it:
   no portraits, smaller type, a hairline rule instead of cards. The visual
   hierarchy is doing the same job as the words, which is to say that these are
   not the people a client deals with. Do not add portraits here. Giving these
   two the same treatment as the principals is exactly the impression the band
   exists to avoid. */
.bl-counsel{border-top:1px solid var(--hairline);padding-top:18px}
.bl-counsel .bl-counsel-name{font-family:Jost;font-size:17px;color:#1A3668}
.bl-counsel .bl-counsel-role{font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#656F7E}

/* diagram */
/* 05a the share-sale / asset-sale diagram ----------------------------
   Inline SVG, so every colour comes from the same tokens as the rest of the
   page and a token change restyles the drawing. That is the whole reason the
   article template settled on hand-built SVG over exported pictures. */
.bl-dia{margin:0 0 var(--s7);padding:0}
.bl-dia svg{display:block;width:100%;height:auto;overflow:visible;
  color:var(--navy)}   /* the arrowhead uses currentColor */
.bl-dia figcaption{margin-top:var(--s4);font-size:14px;color:var(--muted);
  max-width:38rem}
.d-title{font:500 19px var(--display);fill:var(--ink)}
.d-rule{fill:var(--gold)}
.d-node{fill:var(--navy);stroke:none}
.d-node-t{font:500 14px var(--sans);fill:#fff;text-anchor:middle}
.d-arrow{stroke:var(--navy);stroke-width:1.5;marker-end:url(#bl-arrow)}
.d-arrow-t{font:400 12px var(--sans);fill:var(--muted);text-anchor:middle}
.d-box{fill:var(--surface);stroke:var(--hairline);stroke-width:1}
.d-box-t{font:500 14px var(--sans);fill:var(--ink)}
.d-item{font:400 13.5px var(--sans);fill:var(--body)}
.d-dot{fill:var(--gold)}
.d-note{font:400 12px var(--sans);fill:var(--muted)}
.d-foot{font:400 13px var(--sans);fill:var(--body)}
/* A node highlight for drawings built as a sequence of nodes, added 19 August
   2026 for the homepage decision map. Hover only and decorative: the drawing is
   role="img", so its subtree is not exposed to assistive technology and there is
   nothing here for a keyboard user to reach. Everything the highlight points at
   is written out in the steps beneath the drawing. Transition is guarded, so a
   reader who asks for less motion gets the colour change with no animation. */
.bl-map-node .d-node{fill:var(--navy)}
@media (prefers-reduced-motion: no-preference){
  .bl-map-node .d-node{transition:fill .18s ease}
}
.bl-map-node:hover .d-node{fill:var(--navy-deep)}
@media (max-width:900px){
  /* Two panels side by side stop being readable well before the band does, so
     the drawing scrolls rather than shrinking its type into illegibility. */
  .bl-dia{overflow-x:auto}
  .bl-dia svg{min-width:720px}
}

/* join */
/* 02a join: one full-bleed image, no text over it ---------------------
   Sits between the navy facts strip and the sequence, so it is the
   transition out of the navy block AND it lands where the page first
   describes the deal, which is what stops it being decoration.

   `max-height` is not optional. The source is cropped 3:1, so on a 2400px
   monitor an uncapped full-bleed image would stand 800px tall and become the
   page's subject rather than a band. Capped and re-cropped by the browser, it
   stays a band at every width. */
.bl-join{display:block;margin:0;line-height:0}
/* A join used INSIDE band 03, between two questions, rather than as a band of
   its own. It needs the vertical space a band boundary would have given it, and
   it must not inherit the sibling questions' left rule. Added 25 August 2026
   for the Singapore page, whose band 03 runs to ten questions.

   TWO SELECTORS, BECAUSE THE PREVIEW AND THE LIVE PAGE HAVE DIFFERENT DOMS, and
   the first version of this rule had only the first of them, so it styled the
   preview and did nothing at all to the published page. The template renders
   `<div class="brf">` with the figure as a direct child; the Elementor emitter
   names the band `bl-brf` and wraps the image in its own `bl-join-band`
   container. Fabian saw the result on the live page: no spacing, and the
   photograph cutting through the heading underneath it.

   OVERFLOW IS THE OTHER HALF, and it is the part that caused the overlap. The
   container resolves to the 340px `max-height` while the image itself is laid
   out from its intrinsic aspect ratio and comes out ~371px, so with the default
   `overflow:visible` it spilled 15px past its own container and over the next
   question's h3. Measured in a browser at 1440px, not inferred. Clipping the
   wrapper is the minimal fix: it leaves the mobile `max-height:200px` rule and
   the object-fit crop untouched.

   LITERAL PIXELS, NOT var(--s5)/var(--s6), AND THAT IS THE REAL LESSON HERE.
   The first version used the tokens and the margin silently did nothing on the
   published page while `overflow` from the SAME rule worked. The tokens are
   defined on `:root` in the template's own stylesheet, and the Elementor page
   gets only the fenced CSS BLOCKS copied out of it, so on that page --s5 and
   --s6 resolve to nothing, the shorthand is invalid at computed value, and the
   browser drops that one declaration and keeps its neighbours. Measured on the
   live page: --s5, --s6, --measure and --hairline are all empty strings there,
   including on :root.

   This is not peculiar to this rule. 44 of the 207 declarations in the CSS
   pushed to every landing page reference a token that page never defines, so
   they have all been doing nothing. Raised separately: defining the tokens once
   would revive all 44 at once, which is a change across nineteen live pages and
   is not a thing to do inside a spacing fix. Until then, any rule written for
   the Elementor path uses literal values. */
.brf>.bl-join,
.bl-brf>.bl-join-band{margin:24px 0 32px;border-left:0;overflow:hidden}

/* ==========================================================================
   COUNTRY PAGES: their own spacing, added 25 August 2026 on Fabian's call.
   Scoped to `.bl-country`, which `build_landing_elementor.build()` stamps on
   every top-level band of a page whose spec kind is "country", so the other
   sixteen live pages are untouched.

   THE DIAGNOSIS, measured at 1440px rather than felt. The careers page, which
   he likes, is padded 0 48px, caps its content at 1240 and carries ZERO
   full-bleed images. The country pages carried two photographs rendering
   1596px wide inside a 1440px viewport: not merely full width but wider than
   the window. So the pictures were the only element breaking the margin, which
   is what made everything else feel cramped against them.

   Literal pixel values throughout, not var(--sN): the tokens do not exist on
   an Elementor page and a declaration that uses one is dropped whole. See the
   note above the join rule.
   ========================================================================== */

/* 0. THE TOKENS, DEFINED HERE FOR THE FIRST TIME ON AN ELEMENTOR PAGE, and
      this is the fix the other rules in this block were working around.

      The template defines the palette and the spacing scale on `:root` in its
      own stylesheet. The Elementor page receives only the fenced CSS BLOCKS cut
      out of that stylesheet, so on the published page every one of those tokens
      resolves to nothing, and a declaration that uses one is invalid at
      computed value and dropped whole while its neighbours survive. 44 of the
      207 declarations pushed to a landing page reference a token. All of them
      have been doing nothing.

      Three separate visible defects on 25 August 2026 were that single cause:
      the in-band photograph margin, which read as a specificity fight; the band
      rhythm; and the rail cards' background and border, which is why the rail
      looked like bare columns of text and not like cards.

      SCOPED TO `.bl-country`, deliberately. Defining these on `:root` would
      switch 44 dormant declarations on across nineteen live pages at once,
      changing fonts, colours and spacing nobody has previewed. Scoped, it
      reaches three pages, and only the one that gets re-pushed. Fabian's
      country-pages-only decision is what makes this safe to do at all.

      Values mirror the template constants. If a constant changes, this block is
      regenerated with it, because it is written from the same names. */
.bl-country{
  --navy:#1A3668; --navy-deep:#0F2246; --navy-tint:#E8EDF5;
  --gold:#C9A84C; --gold-text:#7A6529;
  --ink:#1B2434; --body:#414B5A; --muted:#656F7E;
  --hairline:#D8DEE8; --surface:#F4F6F9; --paper:#FFFFFF;
  --measure:36rem;
  --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --display:Jost; --sans:Inter}

/* 1. The photographs come back inside the content column and stop being
      full-bleed. They keep their 3:1 crop and their height cap; what changes
      is that they now begin and end where the text does.

      CONSTRAIN THE IMAGE, NOT THE CONTAINER, and there are two reasons.

      First, padding on the container does not win. Elementor styles container
      padding through `.elementor-element.e-con` with its own custom
      properties, which ties on specificity and beats a page rule on source
      order: the first version of this set `padding-left:56px` on
      `.bl-join-band` and the computed value came back `0px`. That is the same
      cascade this project has already recorded as "page CSS loses to
      Elementor's widget CSS".

      Second, and this is what the measurement actually showed, the overflow was
      never a layout width. The image's layout box was 1425, the full width of
      its parent, but it RENDERED 1533 wide at left -54, because the E14 drift
      effect scales it by about 7.6 per cent. That is what pushed it past the
      viewport and gave the document a horizontal scrollbar
      (scrollWidth 1511 against clientWidth 1425). Capping the image at the
      content measure fixes the full-bleed look and the overflow together,
      because 1240 scaled by 1.076 is 1334 and still inside the page. */
.bl-country .bl-join img{max-width:1240px;margin:0 auto}
.bl-country .bl-join-band{overflow:hidden}
/* EXCEPT ON A PRACTICE-AREA PAGE, where the picture is the third slice of the
   sandwich rather than a divider inside the measure, and has to be as wide as
   the blue band above it. Fabian, 27 August 2026: "the picture is narrow the
   header is wider." The cap above reached these pages only when the scope class
   was extended to them, so this removes a fault that arrived with that change
   rather than one that was ever designed. (0,3,0) against the (0,2,0) above. */
.bl-country.bl-practice .bl-join img{max-width:none;margin:0}
/* AND THE BAND HAS TO CLIP, or the picture takes the page with it. `.bl-join
   img` carries the `bl-join-drift` animation, which is a 1.107 scale. At the
   1240 cap that renders 1373px and stays inside a 1425px page by luck; at full
   bleed it renders 1578px, escapes to left:-76 and gives the whole document a
   horizontal scrollbar. Measured on /property-law/ at 1440x900: scrollWidth
   1501 against innerWidth 1440.
   `.bl-country .bl-join-band{overflow:hidden}` above does NOT catch this on the
   Elementor path: the emitter wraps the image in `elementor-widget-container`
   and there is no `.bl-join-band` element in that chain at all, which is why the
   country pages were saved by the width cap rather than by the clip. Both boxes
   named here, so the clip lands wherever the wrapper ends up. */
.bl-country.bl-practice .bl-join,
.bl-country.bl-practice .bl-join .elementor-widget-container{overflow:hidden}

/* 2. Air. The band rhythm is set by the emitter's own container padding, so
      this adds the part CSS can add: a wider measure for headings, more space
      under a band heading, and more room between the questions in band 03,
      which is the band he called overwhelming. */
.bl-country .bl-brf-i{padding-bottom:38px}
.bl-country .bl-brf-i+.bl-brf-i{padding-top:38px}
.bl-country .bl-brf-i p{max-width:34rem}
.bl-country .bl-brf-i p+p{margin-top:15px}

/* 3. The rail stops running edge to edge and sits on the same left edge as
      the text above it. The track still bleeds to the right, because the
      cut-off card IS the affordance that says "this scrolls": showing part of
      the next card is the strongest signal there is, and hiding it would trade
      a usability gain for a tidier edge. */
/* REWRITTEN 26 August 2026, and the rule it replaces was reasoned rather
      than measured. It padded the sticky inner 56px on the left and 0 on the
      right, on the belief that the page's own bands sit 56px from the viewport
      edge. MEASURED at 2560px they do not: `.bl-brf` is 1240px wide at x 653,
      centred, and every band on the page with it. The rail was the ONLY band
      running edge to edge, 2545px against everything else's 1240, and its
      heading column finished 1264px short of the track's right edge. That
      mismatch is what Fabian read as "still full width".

      So the stick takes the page's own column, centred. Its padding box is
      1352px, being the 1240 column plus its two 56px gutters, and that box is
      now the window the cards run through: the track can still bleed past the
      text on both sides, and it is in those two gutters that the mask below
      does its work. */
.bl-country .bl-rail-stick{max-width:1580px;margin:0 auto;padding:64px 0}
.bl-country .bl-rail-head,
.bl-country .bl-rail-bar,
.bl-country .bl-rail-note{max-width:1240px;margin-left:170px;margin-right:170px}
.bl-country .bl-rail-track{margin:28px 0 0 170px;padding:4px 0 18px}
/* The HEAD spans the column so the rule under it does, but its prose must not:
   1240px is about 130 characters and every other band on the page caps its
   paragraphs at 34rem. Only the block is wide. */
.bl-country .bl-rail-head .bl-intro{max-width:34rem}

/* 3a. THE ENDS TAPER OUT INSTEAD OF BEING CUT OFF. Fabian, 26 August 2026:
       "the right and left may taper off into blur".

       A MASK, not a blur filter and not a gradient overlay. `filter:blur()`
       would repaint on every frame of a band that already animates, and it is
       the one thing R04 on the effects register refuses. An overlay only works
       over a ground you know, which here happens to be flat but will not be on
       the next page that borrows this. `mask-image` fades the pixels
       themselves, costs nothing, and is correct over anything.

       IT CANNOT GO ON THE TRACK, and that is the part worth remembering. In
       the pinned mode the track is the element that translates, and a mask
       lives in its own element's coordinate space, so a mask on the track
       would travel with the cards and fade whichever card happened to be
       passing under it. It goes on the STICK, which does not move.

       Masking the stick would ordinarily fade the heading too. It does not,
       because the fade zones are exactly the two gutters: the gradient reaches
       full opacity at 56px, which is precisely where the heading, the rule and
       the note begin. Nothing in the text column is ever touched. The track
       starts on that same line, so at rest the first card is at full opacity,
       and the travel ends with the last card on the far line, so it is too.
       Only the cut card at the open end is ever faded, which is the one that
       should be. */
/* WIDENED AND LENGTHENED, 26 August 2026. Fabian: "widen the scroll window a
   bit, not to full width but slightly wider than the rest, and then taper off
   with the blur a bit more, so it stays sharp to the width like the rest, but
   then tapers into the blur over a bit more distance."

   That is two numbers and they are the same number. The window is the 1240
   column plus a 170px run on each side, and the mask is opaque across exactly
   that column and fades across exactly those runs. So the cards are sharp for
   precisely the width every other band occupies, and the fade begins on the
   column's own edge rather than somewhere near it. Widening the window without
   moving the fade would have blurred cards that are still inside the measure,
   which is the opposite of what was asked for. */
.bl-country .bl-rail-stick{
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 170px,
    #000 calc(100% - 170px),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 170px,
    #000 calc(100% - 170px),rgba(0,0,0,0) 100%)}

/* 3b. THE TRAVEL, and the band's height with it. The shared keyframe carries
       `calc(100vw - 56px - 100%)`, which was right while the window was the
       viewport. The window is now the page's column, so the row must stop when
       its right edge reaches the column's right edge, which is
       `calc(<column> - 100%)`.

       Travel grew from 1880px to about 3090px in the process, because the same
       4328px row now passes through a 1240px window instead of a 2545px one.
       At the shared 320dvh that would have run the cards past at about one and
       a half times scroll speed on a 1440 screen, which reads as snatching.
       400dvh puts it back to roughly 1.1, so the page turns sideways at about
       the rate the reader is already scrolling. */
@supports (animation-timeline:view()){
 @media (min-width:1100px) and (prefers-reduced-motion:no-preference){
/* 455dvh, NOT 400, BECAUSE THE ROW GAINED A CARD. Speed is
   `travel / (railHeight - viewport)`, and the ninth element takes the travel
   from 3088px to 3632px. At 400dvh that is 1.35x, which is exactly the
   snatching speed the 400 was chosen to avoid when the count was nine
   judgments. Lengthening the pin restores the tuned 1.14x rather than
   accepting a faster row: 3632 / 1.14 = 3186 of scroll, plus one 900px
   viewport, is 4086px, which is 454dvh. Measured, not assumed. */
.bl-country .bl-rail,.bl-country.bl-rail{height:400dvh}
.bl-country .bl-rail-track{animation-name:bl-country-rail-travel}
/* THE CARD IN THE MIDDLE COMES FORWARD. Fabian, 30 August 2026: "The
   orizontal scroll cards shoud grow a bit when they are in the center. maybe a
   bit of a pop out effect".

   THE TIMELINE IS THE CARD'S OWN POSITION IN THE PINNED BOX, on the INLINE
   axis, and both halves of that were tested rather than assumed. `.bl-rail-
   stick` already carries `overflow:hidden`, which makes it a scroll container
   even though nobody can scroll it, so `view(inline)` has a scrollport to
   resolve against; and the browser measures the card where the transform has
   actually put it, not where layout left it. Measured at a 1440x900 viewport,
   two thirds of the way into the band, the first four cards read 64.5%, 36.6%,
   8.6% and -19.4%: one timeline per card, tracking its real travel. Had either
   half been false every card would have sat at the same value and the effect
   would have been a single card-shaped pulse.

   SO THE PEAK IS AT 50% BY CONSTRUCTION rather than by tuning, because 50% of
   `contain` is the moment the card is centred in the window. Nothing here
   depends on the card's width, the gap, the number of cards or the viewport,
   which is what an arithmetic version out of the travel distance would have
   done, and it would have drifted the moment the `clamp` on the card width
   stopped clamping.

   THE CARD GROWS ACROSS ITS WHOLE PASS, not just at the middle. Fabian,
   31 August 2026: "can the box grow as it goes thr the scroll. just as an
   effect." The first version held 1.0 for most of the traverse and put a small
   pop at the centre, which reads as a hover firing by itself rather than as
   movement. The curve now runs 0.94 to 1.06 and back, so a card is visibly
   arriving, largest as it passes, and receding: the growth IS the travel.

   0.94 TO 1.06, AND NO FURTHER. The row is the page's one moving object and
   the reader is not pointing at it, so a card that jumps reads as a fault.
   Twelve per cent across a whole traverse is movement; the same twelve in the
   middle third would be a jump. The border warms to gold on the same curve, so
   the card at the centre is the one being offered. */
/* THE EFFECT NEVER RAN, AND THE REASON IS WHY IT COULD NOT.
   It was written as `animation-timeline:view(inline)` on each card, which is
   the right idea and cannot work here. **A view timeline measures the
   element's LAYOUT position in the scrollport, and this row travels by
   `transform`.** A transform does not change layout, so every card's inline
   progress is frozen at whatever it was when the page loaded.

   MEASURED 31 August 2026, at five scroll positions across the whole pin: the
   cards' centres moved from 430px to -2658px and their scales did not change
   once, sitting at .985, .991 and then .94 for all six others. Fabian, the
   same day: "the way its set up now one is bigger and stays bigger as it
   moves out." That is card 2 at .991 against the rest at .94, and it was never
   an effect at all.

   SO THE CARDS RUN ON THE RAIL'S OWN TIMELINE, which does progress, and each
   takes a window of it centred on the moment it passes the middle of the
   screen. The windows are one card apart and two cards wide, so a card is
   growing from a card-width before the centre and shrinking for a card-width
   after: the growth is the travel, which is what was asked for.

   WHY THE NUMBERS ARE WHAT THEY ARE, AND WHERE THEY ARE APPROXIMATE. A card
   passes the centre at `(trackLeft + i*step + cardWidth/2 - 50vw) / travel` of
   the rail's range. That is exact and it is NOT expressible in CSS, because
   calc() cannot divide a length by a length. Two of its three parts are
   stable: the spacing between peaks is `step / travel`, and both scale
   together, so it computes to 17.6% at 1280, 1440 and 1680 alike. Only the
   offset moves, because 50vw grows while the card width is clamped: -6.9% at
   1280, -9.4% at 1440, -13.3% at 1680. The offset is written at the 1440
   design width.

   WHAT THAT COSTS, STATED RATHER THAN HIDDEN. The largest card is the one
   nearest the centre at every one of five positions at 1440, and at four of
   five at 1280, where one sample put the peak a card early. A third of a card
   at the edge of the range is the whole error, and the alternative was an
   effect that did not run. Re-measure if the card width, the gap, the track's
   left margin or the card count changes; the count is already held at eight by
   the audit. */
.bl-country .bl-rail-card{animation:bl-card-pop linear both;
  animation-timeline:--bl-rail}
  .bl-country .bl-rail-card:nth-child(1){animation-range:
    contain -27.0% contain 8.2%}
  .bl-country .bl-rail-card:nth-child(2){animation-range:
    contain -9.4% contain 25.8%}
  .bl-country .bl-rail-card:nth-child(3){animation-range:
    contain 8.2% contain 43.4%}
  .bl-country .bl-rail-card:nth-child(4){animation-range:
    contain 25.8% contain 61.0%}
  .bl-country .bl-rail-card:nth-child(5){animation-range:
    contain 43.4% contain 78.6%}
  .bl-country .bl-rail-card:nth-child(6){animation-range:
    contain 61.0% contain 96.2%}
  .bl-country .bl-rail-card:nth-child(7){animation-range:
    contain 78.6% contain 113.8%}
  .bl-country .bl-rail-card:nth-child(8){animation-range:
    contain 96.2% contain 131.4%}
@keyframes bl-card-pop{
  0%  {transform:scale(.94);box-shadow:0 1px 2px rgba(26,54,104,.04);
       border-color:#D8DEE8}
  25% {transform:scale(1.00);box-shadow:0 4px 12px rgba(26,54,104,.06);
       border-color:#D3DAE6}
  50% {transform:scale(1.06);box-shadow:0 18px 42px rgba(26,54,104,.16);
       border-color:#C9A84C}
  75% {transform:scale(1.00);box-shadow:0 4px 12px rgba(26,54,104,.06);
       border-color:#D3DAE6}
  100%{transform:scale(.94);box-shadow:0 1px 2px rgba(26,54,104,.04);
       border-color:#D8DEE8}}
  @keyframes bl-country-rail-travel{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(min(1240px,100vw - 112px) - 100%),0,0)}}
 }
}

/* 3c. The narrow end. The country rules above are two classes and the shared
       narrow block is one, so without this the 900px layout would keep the
       desktop gutters and lose its own. */
@media (max-width:900px){
.bl-country .bl-rail-stick{padding:44px 0;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 26px,
      #000 calc(100% - 26px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 26px,
      #000 calc(100% - 26px),rgba(0,0,0,0) 100%)}
  .bl-country .bl-rail-head,
  .bl-country .bl-rail-bar,
.bl-country .bl-rail-note{margin-left:26px;margin-right:26px}
.bl-country .bl-rail-track{margin:24px 0 0 26px}
}

/* 4. BIGGER SLIDES, WITH A MARK. The desktop card was 360x258 carrying about
      30 words, and that was deliberate rather than broken: the 82vw rule people
      assume is the desktop one sits inside `@media (max-width:900px)`. Fabian
      asked for bigger slides carrying more, and the research is clear that a
      horizontal row suits graphic-led content, so each card now leads with a
      line mark and has room for a real sentence.

      `clamp` rather than a fixed width, so the card grows with the viewport but
      never gets so wide that two of them stop fitting: at 1440 this is 520px,
      which shows two whole cards and the edge of a third. That partial third
      card is the affordance and it is the reason the track still bleeds right. */
/* THE CARDS HAD NO VISIBLE EDGE, and the screenshot is what showed it. The
   base rule sets `background:var(--paper);border:1px solid var(--hairline)`,
   and BOTH are tokens, so both are dropped on an Elementor page and the cards
   rendered as bare columns of text. That is a large part of why the rail read
   as thin: there was nothing to see but words. Literals restore the card. */
/* THE CARD, rebuilt 26 August 2026. Fabian: the cards are "still missing
   something", the icons "are not well positioned and sized", and the whole
   thing has to be more attractive. He is right on all three, and MEASURING the
   live page showed why: three of the four rules that were supposed to dress
   this card never reached it.

     * `h3` rendered at 19px/1.3, not the 22px/1.25 set here, because Elementor
       generates `.elementor-<page> .elementor-element.elementor-element-<id>
       .elementor-heading-title`, which is (0,4,0) and beats
       `.bl-country .bl-rail-card h3` at (0,2,1). Page CSS also prints BEFORE
       the widget CSS, so a tie loses as well.
     * The body ran at 14.5px, not 16px, because the rule targets `p` and an
       Elementor text widget emits no `<p>` at all: the words sit as a bare
       text node inside `.elementor-widget-container`.
     * The sector label was never uppercase and never tracked, because the rule
       targeted `.eb`, a class the Elementor emitter has never put on that
       widget.

   THE FIX IS NOT A SPECIFICITY WAR. Typography that Elementor generates is set
   in the EMITTER, where it cannot be outranked, so `e_work` now emits 22/1.25
   and 16/1.62 directly. This block keeps only what Elementor never writes:
   layout, the mark, casing, tracking and the rule at the foot. Where a class
   is needed it is now the same class in both renderers (`bl-rail-sector`),
   which is what stops this recurring.

   The card also held 177px of content in a 380px box, so more than half of
   every one of them was empty. The floor is gone, the row equalises the cards
   at the tallest by itself, and the foot of the card now carries something. */
/* TALLER, AND WITH THE SLOT ALREADY CUT. Fabian, 26 August 2026: the cards
   "can be a bit higher", and "we will have some connected pages and add a read
   more button later ... but the space should be created already".
   So the floor comes back at 430, and the foot of the card is a 48px strip
   rather than a line of text. Today the strip holds the position index alone,
   left aligned. When the link arrives it goes on the right of the same strip
   and NOTHING ELSE MOVES, which is the point of reserving it now: a card that
   grows a control later re-flows the whole rail and every screenshot with it. */
.bl-country .bl-rail-card{
  flex:0 0 clamp(360px,40vw,520px);width:clamp(360px,40vw,520px);
  min-height:430px;padding:26px 30px 18px;
  display:flex;flex-direction:column;gap:0;
  background:#FFFFFF;border:1px solid #D8DEE8;border-radius:3px;
  box-shadow:0 1px 2px rgba(26,54,104,.04);
  transition:border-color 200ms cubic-bezier(.2,.6,.3,1),
             box-shadow 200ms cubic-bezier(.2,.6,.3,1)}

/* THE MARK STOPS FLOATING. It was a 34px block sitting on its own line above
   the label with 26px under it, which is what "not well positioned and sized"
   describes: a loose glyph with nothing holding it. It is now the leading item
   of the label's own line, in a 46px tile with a ground and a hairline, so it
   reads as a deliberate object and the card gains a proper top row instead of
   two thin ones. The mark itself is 24px inside that tile, which is the size
   its 32px viewBox and 1.6 stroke were drawn for. */
.bl-country .bl-rail-card .bl-rail-kind{margin:0 0 8px;
  font:500 10.5px/1 "Jost","Futura","Century Gothic",ui-sans-serif,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:#6A7382}
.bl-country .bl-rail-card .bl-rail-sector{
  display:flex;align-items:center;gap:14px;margin:0 0 20px;
  text-transform:uppercase;letter-spacing:.11em}
.bl-country .bl-rail-card .bl-rail-sector::before{
  content:"";flex:0 0 46px;width:46px;height:46px;
  background-color:#F1F4FA;border:1px solid #E1E7F1;border-radius:3px;
  background-repeat:no-repeat;background-position:center;
  background-size:24px 24px}

/* The preview's own type. The Elementor page takes the same numbers from the
   emitter; both are stated so a change to one is visibly a change to both. */
.bl-country .bl-rail-card h3{font-size:22px;line-height:1.25;margin:0 0 12px}
.bl-country .bl-rail-card p{font-size:16px;line-height:1.62;margin:0}

/* THE FOOT OF THE CARD, and it is wayfinding rather than decoration. The one
   thing a horizontal row does not tell a reader is where in it they are, which
   is the whole of the NN/g objection to scroll-driven horizontal movement and
   the reason C13 sits on the register. "03 / 08" answers it on every card, at
   no cost, and it fills the slack that made the cards look unfinished. The
   content per card is written by `rail_marks_css()` beside the marks. */
.bl-country .bl-rail-card::after{
  margin-top:auto;padding-top:18px;border-top:1px solid #E7EBF2;
  min-height:48px;display:flex;align-items:center;
  font:500 12px/1 "Jost","Futura","Century Gothic",ui-sans-serif,sans-serif;
  letter-spacing:.12em;color:#6A7382;font-variant-numeric:tabular-nums}

/* THE BAND'S CLOSING LINK sits under the head, on the copy column, not at
   the left edge of the pinned box. The box is full bleed so the row can
   travel; anything placed in it without being told where to go lands against
   the window. */
.bl-country .bl-rail-more{margin:22px 0 0;padding-left:max(
  calc((100% - 1240px) / 2), 26px)}

/* THE CLOSING CARD, and it is the one card that is not a matter.
   It carries the way out of the row, so it has to read as a different KIND of
   thing rather than as a ninth judgment with the words missing. Three changes
   and no more: the ground is the page's tint instead of white, the gold rule
   sits at its head rather than a sector icon, and it carries a labelled
   control instead of the "NN / 08" index, because it is not one of the eight.

   NOT NAVY. The ask box is the page's one solid navy object and a second one
   inside the rail would take that away from it. */
.bl-country .bl-rail-card-end{background:var(--surface);
  border-color:#D3DAE6;justify-content:flex-start}
/* THE CLOSER CARRIES NO INDEX, and this body.elementor-page-7015 needs all four classes to
   say so. The index is written by a positional rule at
   `.bl-country .bl-rail-card:nth-child(N)::after`, which is three
   specificity classes; `.bl-country .bl-rail-card-end` is only two and lost.
   It went unseen while the closer sat ninth, because only eight index rules
   exist and nothing matched it. The moment the rail came back to eight cards
   the closer became the eighth and started announcing itself as "08 / 08",
   which is a count of matters it is not one of. */
.bl-country .bl-rail .bl-rail-card.bl-rail-card-end::after{content:none}
.bl-country .bl-rail-card-end .bl-rail-sector{color:var(--gold-text)}
.bl-country .bl-rail-card-end .bl-rail-sector::before{
  background:var(--gold);border-radius:1px;width:26px;height:2px;
  border:0;box-shadow:none}
.bl-country .bl-rail-card-end .bl-rc-acts{position:static;margin-top:auto;
  padding-top:18px;min-height:0}
.bl-country .bl-rail-card-end .bl-rc-cta{font:600 15px/1.3
  "Jost","Futura","Century Gothic",ui-sans-serif,sans-serif;
  letter-spacing:.01em;color:var(--navy)}
/* the control and its label read as one thing, which is what a button is */
.bl-country .bl-rail-card-end .bl-rc-acts{gap:12px}

/* THE TWO CONTROLS IN THE CARD'S FOOT, added 31 August 2026.
   The arrow leaves and the plus opens in place, which is the firm's functional
   vocabulary, and here one card carries both. They sit on the same line as the
   "NN / 08" index, hard right, so the foot reads as one row of wayfinding
   rather than as two devices.

   THE WORD IS FOR SCREEN READERS AND THE SHAPE IS FOR EVERYONE ELSE. Each
   control carries a real word, clipped visually, so a link list reads as
   "Read" and "More" rather than as two unlabelled marks. The shape is drawn in
   a pseudo-element for the same reason the chips draw theirs. */
.bl-country .bl-rail-card{position:relative}
.bl-country .bl-rc-acts{position:absolute;right:30px;bottom:18px;
  display:flex;align-items:center;gap:6px;min-height:48px}
.bl-country .bl-rc-acts a{position:relative;display:inline-flex;
  align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--hairline);border-radius:2px;color:var(--navy);
  text-decoration:none;overflow:hidden;text-indent:-999px;
  background:var(--paper);
  transition:border-color 160ms cubic-bezier(.2,.6,.3,1),
             background 160ms cubic-bezier(.2,.6,.3,1)}
.bl-country .bl-rc-acts a:hover,.bl-country .bl-rc-acts a:focus-visible{
  border-color:#C9A84C;background:var(--navy-tint)}
.bl-country .bl-rc-acts a::after{content:"";position:absolute;
  top:50%;left:50%;text-indent:0}
.bl-country .bl-rc-go::after{width:8px;height:8px;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:translate(-60%,-50%) rotate(45deg)}
.bl-country .bl-rc-more::after{width:11px;height:11px;
  background:linear-gradient(currentColor,currentColor)
             center/100% 1.5px no-repeat,
             linear-gradient(currentColor,currentColor)
             center/1.5px 100% no-repeat;
  transform:translate(-50%,-50%);
  transition:transform 160ms cubic-bezier(.2,.6,.3,1)}
.bl-country .bl-rc-more:hover::after,
.bl-country .bl-rc-more:focus-visible::after{
  transform:translate(-50%,-50%) rotate(90deg)}
/* the index keeps its own line clear of the controls */
.bl-country .bl-rail-card::after{padding-right:86px}

/* The house hover, being gold arriving where the hairline was, plus the lift
   the engagement cards already use. One idiom, not a second effect: the rail's
   travel remains the band's one signature effect. */
.bl-country .bl-rail-card:hover{border-color:#C9A84C;
  box-shadow:0 8px 22px rgba(26,54,104,.09)}

/* The narrow card, and it has to sit AFTER the desktop rule rather than with
   the other narrow rules above. The shared narrow block reaches the card at
   one class and this one at two, so the country rule wins inside the media
   query as well; at equal specificity only source order separates them, and
   the first attempt at this sat above the desktop rule and did nothing. Left
   alone the phone keeps a 360px desktop card, which is 92 per cent of a 390px
   screen and leaves no edge of the next card to say the row scrolls. */
@media (max-width:900px){
.bl-country .bl-rail-card{flex:0 0 82vw;width:82vw;padding:22px 24px 18px}
.bl-country .bl-rail-card .bl-rail-sector::before{
    flex:0 0 40px;width:40px;height:40px;background-size:21px 21px}
}

.bl-country .bl-rail-card:nth-child(1) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='14' height='12' rx='1'/%3E%3Cpath d='M3 15h14'/%3E%3Cpath d='M21 17h8'/%3E%3Cpath d='M26 14l3 3-3 3'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(1)::after{content:"01 / 08"}
.bl-country .bl-rail-card:nth-child(2) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='4'/%3E%3Ccircle cx='24' cy='16' r='4'/%3E%3Cpath d='M12 16h8'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(2)::after{content:"02 / 08"}
.bl-country .bl-rail-card:nth-child(3) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 4H7a3 3 0 0 0-3 3v10l11 11 11-11z'/%3E%3Ccircle cx='11' cy='11' r='1.6'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(3)::after{content:"03 / 08"}
.bl-country .bl-rail-card:nth-child(4) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='11' y='3' width='10' height='7' rx='1'/%3E%3Crect x='3' y='22' width='9' height='7' rx='1'/%3E%3Crect x='20' y='22' width='9' height='7' rx='1'/%3E%3Cpath d='M16 10v6H7.5v6M16 16h8.5v6'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(4)::after{content:"04 / 08"}
.bl-country .bl-rail-card:nth-child(5) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='4'/%3E%3Cpath d='M4 27a7 7 0 0 1 14 0'/%3E%3Ccircle cx='23' cy='13' r='3'/%3E%3Cpath d='M18 27a5 5 0 0 1 10 0'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(5)::after{content:"05 / 08"}
.bl-country .bl-rail-card:nth-child(6) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14L16 5l12 9'/%3E%3Cpath d='M7 14v14h18V14'/%3E%3Crect x='13' y='19' width='6' height='9'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(6)::after{content:"06 / 08"}
.bl-country .bl-rail-card:nth-child(7) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='16' height='16' rx='2'/%3E%3Crect x='13' y='8' width='16' height='16' rx='2'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(7)::after{content:"07 / 08"}
.bl-country .bl-rail-card:nth-child(8) .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h16'/%3E%3Cpath d='M15 8l4 4-4 4'/%3E%3Cpath d='M29 20H13'/%3E%3Cpath d='M17 24l-4-4 4-4'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card:nth-child(8)::after{content:"08 / 08"}
.bl-join img{display:block;width:100%;max-height:340px;object-fit:cover;
  object-position:center 55%}
@media (max-width:900px){.bl-join img{max-height:200px}}

/* E14, added 24 August 2026 on Fabian's instruction to loosen the page up.
   The photograph drifts and settles as it crosses the viewport: it enters
   slightly oversized and offset, and resolves to its true scale by the time it
   leaves. It is the same mechanic as E08 and E12, being a CSS scroll-driven
   animation on a compositor-only property, so there is no script, no library
   and nothing on the main thread.

   Scale, not translate alone: translating a full-bleed image would show the
   band's ground at one edge, so the 1.06 floor is what guarantees the frame
   stays covered through the whole travel. Keep any change to the keyframes
   above that floor.

   All three guards, and the fallback is the plain static photograph, which is
   the same content at the same crop. Nothing is hidden outside the guards. */
@supports (animation-timeline:view()){
  @media (min-width:1100px) and (prefers-reduced-motion:no-preference){
    .bl-join img{animation:bl-join-drift linear both;
      animation-timeline:view();animation-range:entry 0% exit 100%;
      will-change:transform}
    @keyframes bl-join-drift{
      from{transform:scale(1.12) translate3d(0,-1.5%,0)}
      to{transform:scale(1.06) translate3d(0,1.5%,0)}}
  }
}

/* rail */
/* 04 work: the pinned horizontal rail --------------------------------
   Adopted 18 August 2026, replacing the 2 x 4 tile grid. Mechanic and full
   reasoning in build_hscroll_rail.py: a tall outer, a sticky inner that pins
   for its length, and a no-wrap row that translates on x as the page scrolls.
   No JavaScript and no GSAP, because CSS scroll-driven animation does it
   natively, which is what keeps the band at 0 html widgets in Elementor.

   The band deliberately does NOT carry `.band`: it supplies its own padding
   and its own top and bottom rules, and it opts out of the scroll reveal,
   because motion here is one effect at a time and the rail's travel IS the
   effect. */
.bl-rail{position:relative;background:var(--surface);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.bl-rail-stick{padding:64px 56px}
.bl-rail-head{max-width:36rem}
/* The gold progress rule, as a pseudo-element, so neither the preview nor the
   Elementor tree needs a child for the fill. Static in the fallback: a
   hairline and nothing more, because a bar that cannot fill must not pretend
   it can. */
.bl-rail-bar{position:relative;height:2px;background:var(--hairline);
  margin:28px 0 0}
.bl-rail-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:0;
  background:var(--gold)}
/* Baseline everywhere: a keyboard-reachable snap rail. Full bleed to the
   right, so the row visibly continues past the edge. */
.bl-rail-track{display:flex;gap:24px;margin:28px -56px 0 0;
  padding:4px 56px 18px 0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-color:var(--navy) var(--hairline)}
.bl-rail-card{flex:0 0 360px;width:360px;scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--hairline);border-radius:4px;
  padding:26px 28px;display:flex;flex-direction:column;
  transition:border-color 200ms cubic-bezier(.2,.6,.3,1)}
.bl-rail-card:hover{border-color:var(--gold)}
.bl-rail-card .sector{font:500 11.5px/1.4 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-text)}
.bl-rail-card h3{font-size:19px;margin:10px 0 12px;line-height:1.3}
.bl-rail-card .role{font-size:14.5px;color:#5C6675}
.bl-rail-card .val{font-family:var(--display);font-size:15px;color:var(--navy);
  margin-top:auto;padding-top:12px;border-top:1px solid var(--hairline);
  font-variant-numeric:tabular-nums}
.bl-rail-note{margin-top:22px;font-size:14px;color:var(--muted);max-width:38rem}

/* The pin is an ENHANCEMENT, not the design. Firefox stable still has
   scroll-driven animations behind a flag, so support is roughly 82% and this
   is gated three ways: the feature must exist, the viewport must be wide
   enough for a pin to mean anything, and the visitor must not have asked for
   less motion. Anything else keeps the snap rail above. */
@supports (animation-timeline:view()){
 @media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .bl-rail{height:320dvh;view-timeline-name:--bl-rail;view-timeline-axis:block}
  .bl-rail-stick{position:sticky;top:0;height:100vh;display:flex;
    flex-direction:column;justify-content:center;overflow:hidden}
  /* `width:max-content` is LOAD BEARING and was found by measuring, not by
     reading. Without it the track's layout width is whatever the sticky
     parent allows, so the 100% in the keyframe resolves to about 1384px
     rather than the row's real width, and the row travels 15px forwards
     instead of the full distance back. It must NOT be set in the fallback,
     where the track is itself the scroll container. */
  .bl-rail-track{overflow:visible;scroll-snap-type:none;padding-bottom:0;
    width:max-content}
  .bl-rail-track,.bl-rail-bar::after{animation-timeline:--bl-rail;
    animation-range:contain 0% contain 100%;
    animation-timing-function:linear;animation-fill-mode:both}
  .bl-rail-track{animation-name:bl-rail-travel}
  .bl-rail-bar::after{animation-name:bl-rail-fill}
  /* Travel is the row's own overflow: its full width less what is on screen,
     computed from the track, so a ninth card needs no maths here. */
  @keyframes bl-rail-travel{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(100vw - 56px - 100%),0,0)}
  }
  @keyframes bl-rail-fill{from{width:0}to{width:100%}}
 }
}
/* the rail keeps its side padding in step with .band at narrow widths. This
   lives inside the sentinels so the Elementor copy gets it too. */
@media (max-width:900px){
  .bl-rail-stick{padding:44px 26px}
  .bl-rail-track{margin-right:-26px;padding-right:26px}
  .bl-rail-card{flex-basis:82vw;width:82vw}
}

/* pair */
.bl-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:var(--s5)}
.bl-pair figure{margin:0}
.bl-pair img,.bl-pair-img img{width:100%;height:auto;display:block;
  border:1px solid #D8DEE8;border-radius:4px}
.bl-pair figcaption,.bl-pair .bl-pair-cap{font-size:13.5px;color:#656F7E;
  margin-top:10px;padding-top:8px;border-top:1px solid #D8DEE8}
@media(max-width:820px){.bl-pair{grid-template-columns:1fr}}

/* brief */
/* 03 what you need to know, Elementor classes ------------------------
   The band the country pages exist for, and the one no competitor page in
   either family carries.

   DELIBERATELY NOT A DISCLOSURE WIDGET, and that is load bearing rather
   than aesthetic. AI crawlers read raw HTML and do not execute JavaScript,
   so anything behind a tab or an accordion is invisible to exactly the
   systems P153 exists to reach. `nested-accordion` stores perfectly and
   would pass every check we run while hiding the most valuable content on
   the page. The instinct on a band this long is to collapse it. Resist it:
   the length is the value.

   The left hairline turning gold on hover is the site's single hover idiom,
   the same one `.jud` uses, so the band introduces no new motion. */
.bl-brf-i{border-left:2px solid #D8DEE8;
  transition:border-left-color 200ms cubic-bezier(.2,.6,.3,1)}
.bl-brf-i:hover{border-left-color:#C9A84C}
.bl-brf-i+.bl-brf-i{border-top:1px solid #D8DEE8;padding-top:28px}
.bl-brf-i p{max-width:36rem}
@media (max-width:860px){
  .bl-brf-i{padding-left:14px!important}
}

/* qbento */
/* 03 AS A BENTO, with a panel behind each tile. Fabian, 26 August 2026: the
   band is to be a bento box design, the size of a box set by the importance of
   the topic, the text on the box short, some boxes carrying a picture, and
   hovering or clicking a box opening a panel "similar to the drop down on the
   header", meaning the rest of the page blurs behind it, carrying the full
   text, suggested other articles and the expertise and industries.

   ============================================================ THE ONE RULE
   THIS BAND HAS TO SATISFY, and it is the rule the prose version was built on:
   AI CRAWLERS READ RAW HTML AND DO NOT EXECUTE JAVASCRIPT. Anything behind a
   tab, an accordion or a script-built panel is invisible to exactly the systems
   P153 exists to reach, and this band is the most valuable content on the page.
   The BRIEF block above says so in terms and says to resist collapsing it.

   This design does not collapse it, and there are two reasons rather than one.

   FIRST, the split is answer-first. The tile carries the QUESTION as its h3 and
   the DIRECT ANSWER as its paragraph, which is the shape the whole band was
   written to, and that stays in plain sight. Only the reasoning paragraphs move
   into the panel. An answer engine lifting a passage still finds the question
   and its answer adjacent and visible.

   SECOND, the panel is CSS, not script. Every word of it is real text in the
   served HTML, reached by `:target` and revealed by a rule. A crawler that
   reads raw HTML reads all of it. That is the difference between this and an
   accordion widget, and it is why the mechanism had to be `:target` rather than
   anything driven by JavaScript.

   ================================================== AND ZERO HTML WIDGETS
   Containers, headings, text and images only. The panel is a container with an
   `_element_id`; the tile heading carries a link to that id. Both renderers
   emit the same classes, which is the lesson the rail taught this week: a rule
   written against a class that exists in only one of them does nothing, and
   says nothing while doing it. */

/* -------------------------------------------------------------- the bento */
/* A GRID, and never nested percentage widths. Twelve fractions, because the
   span arithmetic is the same at four and twelve leaves room for a tier that is
   not a quarter. Every row must total twelve exactly; `ev2.grid_container()`
   runs the browser own auto-placement over the spans at build time and refuses
   to emit if a row is ragged or a tile overruns the track. */
.bl-qb{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;
  margin-top:32px}
.bl-qb-w3{grid-column:span 3}
.bl-qb-w4{grid-column:span 4}
.bl-qb-w6{grid-column:span 6}
.bl-qb-w8{grid-column:span 8}
.bl-qb-w12{grid-column:span 12}

/* --------------------------------------------------------------- the tile */
.bl-qt{position:relative;display:flex;flex-direction:column;
  background:#FFFFFF;border:1px solid #D8DEE8;border-radius:3px;
  padding:26px 28px 76px;overflow:hidden;
  transition:border-color 200ms cubic-bezier(.2,.6,.3,1),
             box-shadow 200ms cubic-bezier(.2,.6,.3,1)}
/* The house hover, being gold arriving where the hairline was, plus the lift
   the engagement cards already use. No new idiom is introduced. */
.bl-qt:hover{border-color:#C9A84C;box-shadow:0 8px 22px rgba(26,54,104,.09)}
/* THE WHOLE TILE IS THE CONTROL, from ONE link. The question own anchor is
   stretched over the tile, which is the standard card-link overlay: one link in
   the accessibility tree, the tile clickable everywhere, and nothing emitted
   that a colleague cannot edit in the Elementor panel. A second link inside a
   card is what makes a card unreadable to a screen reader, so there is only
   this one and the read-the-detail line below it is a label, not an anchor. */
.bl-qt h3{margin:0 0 10px;font-size:21px;line-height:1.25}
.bl-qt h3 a{color:inherit;text-decoration:none}
.bl-qt h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.bl-qt .bl-ans{margin:0;font-size:15.5px;line-height:1.6;color:#4A5464}
/* #6A7382 AND NOT #8A9099. The contrast audit measured the lighter grey at
   3.22:1 on white at 11.5px against the 4.5 the guideline requires, and it is
   right: these are small, tracked, uppercase labels, which is the hardest
   case there is. #6A7382 measures 4.79:1 and is close enough in tone that
   nothing about the design changes. Applied everywhere the light grey sat on
   white: the tile number, the rail card index, the panel foot labels and the
   disclaimer label. */
.bl-qt-n{font:500 12px/1 "Jost","Futura",ui-sans-serif,sans-serif;
  letter-spacing:.12em;color:#6A7382;margin:0 0 14px;
  font-variant-numeric:tabular-nums}
/* THE PLUS ALONE. Fabian, 26 August 2026: take the words off and make the
   icon bigger, "that will be intuitive enough". He is right, and it is better
   than the label was: a plus on a card is understood without being read, it
   survives translation, and it removes a line of furniture from nine tiles.

   IT IS NOW A PSEUDO-ELEMENT OF THE TILE and not of a paragraph, so the markup
   carries one node fewer in both renderers and the icon sits at the same point
   in every tile of a row whatever the answer's length. The card reserves the
   room for it in its own bottom padding. */
/* A LINKED TILE CARRIES A CHEVRON, NOT A PLUS. The plus is a promise that
   something opens in place; the chevron is a promise that you leave. Using one
   mark for both would make the two variants of this band indistinguishable to a
   reader, which is the one thing a benchmark component must not do.

   IT WAS A TYPED GLYPH AND IS NOW DRAWN, changed 31 August 2026 with the
   knowledge bento's mark. Fabian: "the arrows should be consistent on the page
   [...] Make everything the chevron." A glyph also inherits the body font and
   changes shape with it, which is why `.chip::after` was already drawn. */
.bl-qt.bl-qt-link::after{content:"";width:9px;height:9px;
  border:0;border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;transform:rotate(45deg);
  background:none}
/* The close control returns the reader to this tile, so it has to land
   clear of the fixed header rather than underneath it. */
.bl-qt{scroll-margin-top:96px}
.bl-qt::after{content:"+";position:absolute;right:22px;bottom:20px;z-index:1;
  width:40px;height:40px;display:grid;place-items:center;
  font:400 24px/1 "Jost","Futura",ui-sans-serif,sans-serif;
  border:1px solid #D8DEE8;border-radius:3px;color:#5C6675;
  transition:border-color 200ms cubic-bezier(.2,.6,.3,1),
             color 200ms cubic-bezier(.2,.6,.3,1),
             background-color 200ms cubic-bezier(.2,.6,.3,1)}
.bl-qt:hover::after{border-color:#C9A84C;color:#1A3668;background:#FCFAF3}
/* A tile that carries a picture. A REAL image widget with a real attachment,
   never a CSS background: a background carries no alt text, scores nothing on
   the Rank Math media test and gives a screen reader nothing. */
.bl-qt-pic img{display:block;width:100%;height:150px;object-fit:cover;
  border-radius:2px;margin:0 0 18px}
/* The large tiles take their heading up a step, so importance reads as size
   before it reads as position. */
/* THE SPAN CLASS SITS ON THE TILE ITSELF, so the tile IS the grid item and
   stretches to its row by itself. The first build wrapped each tile in a
   spanning div and the tiles then sat at their natural heights inside rows of a
   different height: 244px and 390px side by side in row one. It also matched
   how Elementor does it, where `grid_column` is a setting on the child
   container and there is no wrapper to put it on. One element fewer and one
   class of defect fewer. */
.bl-qt.bl-qb-w6 h3,.bl-qt.bl-qb-w8 h3,.bl-qt.bl-qb-w12 h3{font-size:24px}
.bl-qt.bl-qb-w12 .bl-ans{max-width:52rem}

/* A BOX THAT IS ONLY A PICTURE. Same border, same radius, same hairline as a
   tile, so it sits in the grid as a member of the set rather than as a hole
   with a photograph in it. No padding: the picture is the box. It stretches to
   its row like every other tile, which is why `height:100%` and `object-fit`
   are both needed; a fixed height would leave a white strip whenever the row
   grew. */
.bl-qt-photo{position:relative;margin:0;overflow:hidden;
  border:1px solid #D8DEE8;border-radius:3px;background:#EDF1F7}
.bl-qt-photo img{display:block;width:100%;height:100%;min-height:220px;
  object-fit:cover}

/* -------------------------------------------------------------- the panel */
/* Closed state. `visibility` rather than `display`, so the text stays in the
   layout tree and nothing about its presence is conditional. */
.bl-qp{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:5vh 24px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s cubic-bezier(.4,0,.6,1),
             visibility .32s steps(1)}
.bl-qp:target{opacity:1;visibility:visible;pointer-events:auto}

/* THE CURTAIN, and it is the header own mechanic. The header blurs the page
   behind its mega panel with a fixed layer carrying
   `backdrop-filter: saturate(1.8) blur(20px)`; this is the same layer at the
   same values, which is what makes the two read as one system.
   IT IS A PSEUDO-ELEMENT OF THE PANEL AND NOT `body::after`. The header
   already owns `body::after` and defines it in the furniture CSS, so a second
   definition here would be two rules fighting over one element on every page,
   and would leave this band depending on furniture it does not itself emit.
   Owning its own layer costs one pseudo-element and no coupling.
   Note the trap that shaped the header version: `backdrop-filter` makes an
   element the containing block for its fixed descendants, so nothing fixed may
   be nested inside this layer. Nothing is. */
.bl-qp::before{content:"";position:fixed;inset:0;
  pointer-events:none;background:rgba(27,36,52,.16);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  backdrop-filter:saturate(1.8) blur(20px)}

/* CLICK ANYWHERE OFF THE PANEL TO CLOSE, from the same single link that draws
   the Close control. Its anchor is stretched over the whole viewport BEHIND
   the box, so the scrim is clickable without emitting a giant invisible button
   that a colleague would find in the Elementor panel and not understand.
   ESCAPE DOES NOT CLOSE IT. `:target` has no keyboard dismissal and the only
   route to one is a snippet. Recorded rather than pretended. */
/* Z-INDEX 1, AND IT MUST BE BELOW THE BOX. At 3 this element became a stacking
   context ABOVE the box, so its full-viewport scrim pseudo, although set to
   z-index -1, painted above the box as well and swallowed every click inside
   the panel: clicking the text closed the panel. Caught with
   `elementFromPoint` at the centre of the screen, which returned the close link
   where it should have returned the box. A negative z-index child cannot escape
   its own context, so the context is what had to move. */
/* A PANEL SETS ITS OWN TEXT COLOUR AND DOES NOT INHERIT ONE.
   The panel is a white box that can sit inside any band, and colour inherits
   down the DOM rather than from what the reader sees. Inside the hero it was
   inheriting `#C3CFE4`, the hero's light-on-navy body colour, and painting it
   on white at 1.57:1. Fabian: "the text in the pop up is greay and has a bad
   conrtast". It is not grey; it is the hero's own text colour in the wrong
   place. Set here so no panel can ever inherit its way into this again. */
.bl-qp-box{color:var(--ink)}

.bl-qp-x{position:absolute;top:18px;right:20px;z-index:1;
  font:500 12px/1 "Jost","Futura",ui-sans-serif,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#5C6675;
  text-decoration:none;padding:8px 10px;border-radius:3px}
.bl-qp-x:hover{color:#1A3668;box-shadow:inset 0 -2px 0 #C9A84C}
.bl-qp-x::before{content:"";position:fixed;inset:0;z-index:-1}

/* 720, NOT 820. At 820 with the prose capped at a 38rem measure the box had a
   200px empty column down its right side and read as a half-filled sheet. The
   measure is the constraint that matters, so the BOX is sized to it: 720 less
   96px of padding is 624, which is that measure, and the cap comes off. */
.bl-qp-box{position:relative;z-index:2;width:min(720px,100%);
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  background:#FFFFFF;border:1px solid #D8DEE8;border-radius:4px;
  box-shadow:0 24px 60px rgba(26,54,104,.18);padding:44px 48px 40px}
/* THE PANEL TITLE IS NOT A HEADING, and that is deliberate rather than lazy.
   The question is already an h3 on the tile, which is where an answer engine
   should find it; emitting it again in the panel gave the band EIGHTEEN h3s for
   nine questions and doubled every entry in the document outline. Caught by
   reading the outline the build prints, not by looking at the page. The dialog
   is still named, because `aria-labelledby` points at this paragraph. */
/* SCOPED TO THE BOX, because `.bl-qp-h` alone is (0,1,0) and `.bl-qp-box p` is
   (0,1,1), so the body rule below won and the panel title rendered at 16px.
   Demoting the title from a heading to a paragraph is what exposed it. */
.bl-qp-box .bl-qp-h{margin:0 0 6px;font-size:27px;line-height:1.2;font-weight:500;
  color:#1B2434;
  font-family:"Jost","Futura","Century Gothic",ui-sans-serif,sans-serif;
  letter-spacing:-.015em}
.bl-qp-eb{font:500 11.5px/1.4 "Inter",ui-sans-serif,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:#8A7434;margin:0 0 14px}
/* The ANSWER leads and is set apart from the reasoning under it, which it was
   not: both were inheriting the page's 17px and read as one undifferentiated
   column. The answer is the thing the reader came for. */
.bl-qp-box .bl-ans{font-size:18px;line-height:1.58;color:#1B2434;margin:16px 0 0}
.bl-qp-box p{font-size:16px;line-height:1.66;color:#3F4A5C}
.bl-qp-box p+p{margin-top:15px}

/* The foot of the panel: what to read next, and which areas this work sits in.
   Two columns on a wide panel, stacked on a narrow one. A column with nothing
   in it is not emitted at all, and that matters here: four of the nine German
   questions have no article of ours to point at yet, and an empty heading would
   advertise the gap rather than close it. */
.bl-qp-foot{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
  margin-top:32px;padding-top:24px;border-top:1px solid #E7EBF2}
.bl-qp-foot .bl-lb{font:500 11.5px/1.4 "Inter",ui-sans-serif,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:#6A7382;margin:0 0 12px}
.bl-qp-foot ul{margin:0;padding:0;list-style:none}
.bl-qp-foot li+li{margin-top:9px}
.bl-qp-foot a{font-size:15px;color:#1A3668;text-decoration:none;
  box-shadow:inset 0 -1px 0 #D8DEE8;
  transition:box-shadow 160ms cubic-bezier(.2,.6,.3,1)}
.bl-qp-foot a:hover{box-shadow:inset 0 -2px 0 #C9A84C}

/* ------------------------------------------------------------- responsive */
/* A bento is a desktop idea. Two fractions at tablet, one at phone, and every
   tile falls back to a full-width tier so no row can be left ragged. */
@media (max-width:1024px){
  .bl-qb{grid-template-columns:repeat(2,1fr);gap:14px}
  /* EVERY TILE IS ONE FRACTION AT TABLET, the full-width tier included. It
     used to keep a span of 2 there, which put an odd number of cells into a
     two-fraction grid and left a hole that `grid_container` refuses to build.
     One fraction for all of them, and the orphan rule below is the only
     exception. */
  .bl-qb-w3,.bl-qb-w4,.bl-qb-w6,.bl-qb-w8,.bl-qb-w12{grid-column:span 1}
  /* AN ODD NUMBER OF TILES LEAVES THE LAST ONE ALONE IN A HALF-EMPTY ROW at
     two columns, which is what nine questions do. `:last-child:nth-child(odd)`
     matches only when the last tile sits at an odd index, so it widens the
     orphan and leaves an even set untouched. Measured at 1000px: tile 9 was
     430px in a row of its own. */
  .bl-qb>.bl-qt:last-child:nth-child(odd){grid-column:span 2}
  .bl-qt.bl-qb-w6 h3,.bl-qt.bl-qb-w8 h3,.bl-qt.bl-qb-w12 h3{font-size:21px}
}
@media (max-width:700px){
  .bl-qb{grid-template-columns:1fr}
  .bl-qb-w12{grid-column:span 1}
  .bl-qp{padding:0}
  .bl-qp-box{width:100%;max-height:100vh;height:100%;border-radius:0;
    border:0;padding:56px 24px 32px}
}
@media (prefers-reduced-motion:reduce){
  .bl-qp{transition:none}
  .bl-qt{transition:none}
}

/* notes */
/* The local disclaimer, added 26 August 2026. Deliberately the quietest thing
   on the page: no eyebrow rule, no heading, small type, muted, and a hairline
   above it so it reads as fine print rather than as a band with something to
   say. It is last, after the call to action, which is where a reader looks for
   this and nowhere else. */
/* NO PADDING HERE. It never applied in the preview either, losing to
   `.bl-country .bl-band`, so the approved page shows the full 128px rhythm.
   On the Elementor path nothing outranked it and the band grew 74px. */
.bl-notes{border-top:1px solid #E7EBF2}
.bl-notes .lb{font:500 11.5px/1.4 "Inter",ui-sans-serif,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:#6A7382;margin:0 0 12px}
.bl-notes p{font-size:14px;line-height:1.62;color:#6A7382;max-width:46rem;
  margin:0}
.bl-notes p+p{margin-top:9px}

/* elem */
/* WHAT THE EMITTER CANNOT SAY, SAID LONG ENOUGH TO WIN.
   Elementor writes a rule per element as
   `.elementor-<page> .elementor-element.elementor-element-<id>`, which is
   (0,4,0) and is printed AFTER the page's own CSS, so a page rule loses on
   specificity and on order. Anything structural the emitter CAN express is set
   in the emitter for that reason. These three cannot be:

     * the band's horizontal padding is a `max()` against the viewport, and
       Elementor's padding control takes fixed units only;
     * the hero's inner padding has to stay a multiple of the 58px mark lattice
       and belongs beside the lattice, not in a widget setting;
     * the hero's inner measure is a max-width, which Elementor has no control
       for on an unboxed container.

   Five classes clears (0,4,0). The `:not()`s add their own class each, which is
   why the band rule reads (0,6,0) and is deliberate rather than defensive. */
.bl-country .bl-band.e-con.elementor-element.e-parent:not(.bl-pos):not(.bl-facts),.bl-country.bl-band.e-con.elementor-element.e-parent:not(.bl-pos):not(.bl-facts){
  padding-left:max(56px,calc((100% - 1240px) / 2));
  padding-right:max(56px,calc((100% - 1240px) / 2))}

.bl-country .bl-pos .bl-pos-inner.e-con.elementor-element,.bl-country.bl-pos .bl-pos-inner.e-con.elementor-element{
  max-width:1352px;margin-left:auto;margin-right:auto;
  /* THE SAME CELL MULTIPLES AS THE PREVIEW. This rule exists only to outrank
     Elementor's per-element padding, so it has to carry the value rather than
     defer to the one in the HERO block, and the two must not drift. */
  padding:calc(var(--bl-cell) * 4.586) 56px calc(var(--bl-cell) * 1.9)}

/* THE FACTS BAND, PROPORTIONAL ON THE ELEMENTOR PATH. Its figure, label and
   cell padding are all set by the emitter, so all three arrive as per-element
   rules and a page rule cannot reach them. Measured before this: the band stood
   at 208px against the 135 its own `min-height` asked for, which is why the pair
   came in at 90 per cent and not 80. */
.bl-country.bl-facts .bl-fact-v.elementor-widget.elementor-element .elementor-heading-title{
  font-size:clamp(21px,2.7vh,34px)}
.bl-country.bl-facts .bl-fact-k.elementor-widget.elementor-element .elementor-heading-title{
  font-size:clamp(10.5px,1.05vh,12px)}
.bl-country.bl-facts .bl-fact.e-con.elementor-element{
  padding-top:calc(var(--bl-cell) * 0.586);
  padding-bottom:calc(var(--bl-cell) * 0.586)}

/* RELATIVE TYPE ON THE ELEMENTOR PATH. The emitter sets these sizes on the
   widget and Elementor prints them at (0,4,0) after the page CSS, so the clamps
   in the HERO block reach the preview and lose here. Six classes clears it, and
   the target is the element Elementor styles rather than the wrapper. */
.bl-country .bl-pos-inner .bl-pos-line.elementor-widget.elementor-element .elementor-heading-title{
  font-size:clamp(29px,4.1vh,42px)}
.bl-country .bl-pos-inner .bl-pos-eb.elementor-widget.elementor-element .elementor-heading-title{
  font-size:clamp(11px,1.05vh,13px)}
.bl-country .bl-pos-inner .bl-pos-lead.elementor-widget.elementor-element,
.bl-country .bl-pos-inner .bl-pos-lead.elementor-widget.elementor-element .elementor-widget-container{
  font-size:clamp(15px,1.75vh,19px)}

/* THE BAND RHYTHM IS NOT SET HERE, and the reason is worth keeping because it
   cost a full rebuild of every band on all three pages.

   It looked as though it had to be. Measured on live 4189, the band's computed
   padding-top was 0 while `--padding-block-start` read 128px, which reads
   exactly like a rule that never travelled. It was not: on a BOXED container
   Elementor applies the padding control to the inner wrapper, `.e-con-inner`,
   and not to the band element the body.elementor-page-7015 was measuring. The emitter's 128px
   was working the whole time, one element further in.

   Adding it here too therefore did not fix anything. It paid the rhythm twice,
   256px on the band and another 256px on the wrapper inside it, and every band
   on the page grew by a clear 256px against the approved preview. The bands
   that showed it worst were the two short chip bands, 725px against 422px.

   So the vertical rhythm belongs to the EMITTER, which can say it in fixed px
   and per band. Only the horizontal padding stays here, because it is a `max()`
   against the viewport and Elementor's control takes fixed units only. */

/* TWO MEASURES THE EMITTER HAS NO CONTROL FOR. Elementor gives every widget
   wrapper `max-width:100%` and offers no max-width control on an unboxed
   container, so both of these have to be said here, long enough to beat the
   per-element rule. Both are visible faults without them: the CTA copy ran the
   full width of the box instead of stopping at the preview's 38rem, and the
   fine print ran the full 1240px instead of the 46rem that makes it read as
   fine print. */
.bl-country .bl-ask-box .bl-ask-copy.e-con.elementor-element{max-width:38rem}
/* AND THE BUTTONS MUST NOT CLAIM THE WHOLE LINE. Elementor gives every
   container `--width:100%`, so inside a flex row the second child measured
   1128px and wrapped to its own line: the box read as a stack, and the row set
   on it computed correctly while looking like nothing had changed. */
.bl-country .bl-ask-box .bl-ask-acts.e-con.elementor-element{width:auto}

/* THE WHOLE BENTO TILE HAS TO BE THE CLICK TARGET, and it was not.
   `.bl-qt h3 a::after{inset:0}` is what turns the heading link into a hit area
   covering the tile, and it needs the TILE to be the anchor's nearest positioned
   ancestor. Elementor gives every widget `position:relative`, so on the live page
   the overlay resolved against the heading widget instead: only the heading text
   opened a panel, and the large `+` in the corner, which is the affordance the
   design puts there, was decorative and dead. Clicking the tile anywhere else
   did nothing at all, which is what Fabian saw.

   Making the heading widget static hands the containing block back to the tile.
   Nothing else in a bento tile relies on that wrapper being positioned. */
.bl-country .bl-qt .elementor-widget.elementor-element.elementor-widget-heading{
  position:static}

/* A PICTURE TILE MUST FILL ITS ROW, and on the Elementor path it did not.
   `.bl-qt-photo img{height:100%}` is correct and is what the preview uses, but
   Elementor wraps an image widget in three boxes of automatic height, so the
   percentage had nothing to resolve against and fell back to the `min-height`
   of 220px. Measured on live 1939: the tile was 395x335 and the picture 393x220,
   leaving a 114px white strip under it, which is exactly the failure the
   `min-height` was written to avoid.

   Every box in the chain has to carry the height, and the last body.elementor-page-7015 has to
   outrank Elementor's own per-element rule on the image. Same shape of fault as
   the hero poster, which needed the figure and the widget container named for
   the same reason. */
.bl-country .bl-qt-photo.e-con.elementor-element{display:block}
.bl-country .bl-qt-photo .elementor-widget.elementor-element,
.bl-country .bl-qt-photo .elementor-widget-container,
.bl-country .bl-qt-photo figure.wp-caption,
.bl-country .bl-qt-photo figure{height:100%;margin:0}
.bl-country .bl-qt-photo .elementor-widget-image.elementor-element img{
  height:100%;width:100%;object-fit:cover;display:block}

/* THE BENTO'S COLUMN COUNT IS OURS TO STATE, not Elementor's to infer.
   `.e-con.e-grid{grid-template-columns:var(--e-con-grid-template-columns)}` is
   (0,2,0) and outranks the one-class `.bl-qb` rules, so the page never decided
   its own column count. Measured at a 390px viewport: Germany resolved to one
   303px track and Vietnam to `58px 246px`, two tracks with the first crushed,
   from identical CSS and an identical custom property. Why the two pages
   differed is not established; that our rule never had the specificity to
   decide it either way is, and on one page Elementor's inference was wrong.
   Five classes takes the decision back. */
.bl-country .bl-qb.e-con.e-grid.elementor-element{
  grid-template-columns:repeat(12,1fr)}
@media (max-width:1024px){
  .bl-country .bl-qb.e-con.e-grid.elementor-element{
    grid-template-columns:repeat(2,1fr);gap:14px}
  .bl-country .bl-qb.e-con.e-grid.elementor-element>.e-con{
    grid-column:span 1}
}
@media (max-width:700px){
  /* ONE COLUMN, AND EVERY SPAN RESET WITH IT. A tile still carrying `span 2` in
     a single-column grid is clamped rather than honoured, so it looks right
     until a second track appears from anywhere. Resetting the spans means there
     is nothing left to honour: measured on live 4189, tiles were still reporting
     `span 2` while the grid reported two tracks. */
  .bl-country .bl-qb.e-con.e-grid.elementor-element{
    grid-template-columns:1fr;gap:14px}
  .bl-country .bl-qb.e-con.e-grid.elementor-element>.e-con{
    grid-column:span 1}
}

/* THE RAIL OVERFLOWED THE VIEWPORT BY EXACTLY ITS OWN LEFT MARGIN, on mobile.
   Measured on live 1939 at a 485px viewport: `scrollWidth` 511 against
   `clientWidth` 485, with `.bl-rail-head`, `.bl-rail-bar` and `.bl-rail-track`
   all sitting at `left:26px` and `width:485px`. 485 + 26 = 511.

   The 26px is the deliberate mobile gutter. The 485 is Elementor, which gives
   every container `--width:100%`, and a block with `width:100%` does not
   subtract its own margins. So the gutter pushed the whole rail out of the
   document and the page scrolled sideways. Exactly the same fault as the call to
   action's buttons claiming a whole flex line, and the same fix: let the width
   be `auto` so the margins come out of it.

   Scoped to the mobile block on purpose. Above 1100px the track is deliberately
   `width:max-content`, which is load bearing for the scroll-driven travel, and
   a blanket `auto` would take it out. */
@media (max-width:900px){
  .bl-country .bl-rail-head.e-con.elementor-element,
  .bl-country .bl-rail-bar.e-con.elementor-element,
  .bl-country .bl-rail-track.e-con.elementor-element{width:auto}
}

/* THE PANEL'S CLOSE CONTROL ON A PHONE. Fabian, 26 August 2026: on mobile the
   panel "does not look good and has no easily accessible close button to come
   back to the page".

   Two faults, both real. It was a 63x28 text link, well under the 44px minimum
   for a touch target; and it was `position:absolute` inside `.bl-qp-box`, which
   is the element that scrolls, so on any answer longer than the screen it
   scrolled off the top and there was no way back to the page at all.

   Fixed positioning takes it out of the scrolling box and pins it to the
   viewport, and it is given the appearance of a button rather than a caption,
   because on a full-screen white sheet a small grey word does not read as a
   control. `env(safe-area-inset-*)` keeps it clear of a notch and of the home
   indicator. Desktop is untouched: there the panel is a centred card, the
   control sits on the card, and clicking anywhere outside already closes it. */
@media (max-width:700px){
  /* THE CONTROL HAS TO OUTRANK THE SHEET, and on desktop it does not need to.
     `.bl-qp-x` is a SIBLING of `.bl-qp-box`, not a child of it, and carries
     `z-index:1` against the box's `2`. On desktop that is invisible, because the
     box is a 720px card in the middle of the screen and the control sits in the
     corner outside it. On a phone the box is the whole screen, so the box simply
     painted over the control: it measured present, visible, 77x44 and at
     `top:10`, and `elementFromPoint` at its own centre returned the panel text.
     Being on screen is not the same as being reachable.

     The outside-click scrim goes with it. It is a full-viewport `::before` whose
     only job is closing the panel when the reader taps beside the card, and on a
     full-screen sheet there is no beside. Left in, and lifted above the box with
     the control, it would cover the answer instead. */
  .bl-country .bl-qp .bl-qp-x::before{display:none}
  .bl-country .bl-qp .bl-qp-x{position:fixed;z-index:3;
    top:calc(10px + env(safe-area-inset-top));
    right:calc(12px + env(safe-area-inset-right));
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0 16px;font-size:12px;
    background:#FFFFFF;color:#1B2434;
    border:1px solid #D8DEE8;border-radius:22px;
    box-shadow:0 6px 18px rgba(26,54,104,.18)}
  .bl-country .bl-qp .bl-qp-box{
    padding-top:calc(74px + env(safe-area-inset-top));
    padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  /* AND THE SHEET MUST NOT WRAP. This is the fault behind "on mobile it does
     not look good", and it is not a spacing problem at all.

     Elementor sets `flex-wrap` PER BREAKPOINT and its mobile default is `wrap`,
     where desktop is `nowrap`. The panel box is a column flex container that is
     given a definite height on a phone (`height:100%`, `max-height:100vh`), and
     a wrapping column flex container whose content exceeds its height does not
     scroll: it starts a NEW COLUMN beside the first. Measured at a 500px
     viewport, the answer was laid out in three columns at x=24, 476 and 928, so
     a reader saw the first third of it and the rest sat off the side of the
     screen with no way to reach it.

     Desktop never showed it because `flex-wrap` computed `nowrap` there, which
     is why the panel verified clean at 1600px and was broken on a phone the
     whole time. A per-breakpoint default is invisible to any check run at one
     width. */
  .bl-country .bl-qp .bl-qp-box.e-con.elementor-element{flex-wrap:nowrap}
}

/* THE BAND INTRO'S MEASURE. The preview sets it with `.m{max-width:36rem}`, a
   class the Elementor path has no way of putting on a paragraph, so live every
   band intro ran the full 1240px and read as a wall rather than as the short
   standfirst the design has. Elementor's `max-width:100%` on the wrapper is
   what has to be beaten, so the body.elementor-page-7015 runs long. */
.bl-country .bl-intro.elementor-widget.elementor-element.elementor-widget-text-editor{
  max-width:36rem}
/* THE STEP BODY'S MEASURE, which `.seq p` sets at 40rem in the preview. */
.bl-country .bl-step-body.elementor-widget.elementor-element.elementor-widget-text-editor{
  max-width:40rem}
.bl-country.bl-notes .elementor-widget.elementor-element.elementor-widget-text-editor{
  max-width:46rem}

/* PARAGRAPH SPACING INSIDE A PANEL. The preview separates them with
   `p + p`, which cannot work on the Elementor path: every paragraph is its own
   text widget in its own wrapper, so no two <p> are ever siblings. Live on 2072
   the whole answer ran together as one block. The adjacency has to be expressed
   between the WIDGETS instead. Same shape of fault as the class mismatches
   above, and the same lesson: a body.elementor-page-7015 that assumes the preview's DOM is a
   body.elementor-page-7015 that does nothing on the site. */
.bl-country .bl-qp-box .elementor-widget.elementor-element+.elementor-widget.elementor-element{
  margin-top:15px}
.bl-country .bl-qp-box .bl-qp-h.elementor-widget.elementor-element+.elementor-widget.elementor-element{
  margin-top:16px}

/* THE SHORT-QUESTIONS MATRIX. Elementor drives a container's display through
   `--display` on `.e-con`, which ties with a one-class page rule and wins on
   order, so the grid rendered as a flex row. */
.bl-country .bl-qgrid.e-con.elementor-element{display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1100px){
  .bl-country .bl-qgrid.e-con.elementor-element{
    grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .bl-country .bl-qgrid.e-con.elementor-element{grid-template-columns:1fr}}

/* THE HERO COPY'S MEASURE. `_css_classes` lands on the widget WRAPPER, and
   Elementor gives every wrapper a max-width of 100, so the 19ch measure never
   applied and the heading ran the full width of the band straight across the
   picture. */
.bl-country.bl-pos .bl-pos-inner .bl-pos-line.elementor-widget.elementor-widget-heading{
  max-width:21ch}
.bl-country.bl-pos .bl-pos-inner .bl-pos-lead.elementor-widget.elementor-widget-text-editor{
  max-width:36rem}

/* The poster is an image widget, so it arrives wrapped in Elementor's own
   figure and container. The rule that makes it the hero's ground has to reach
   through those rather than sit on the <img> alone. */
.bl-pos-media .bl-pos-poster,
.bl-pos-media .bl-pos-poster .elementor-widget-container,
.bl-pos-media .bl-pos-poster figure{position:absolute;inset:0;margin:0}
.bl-pos-media .bl-pos-poster img{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover}

/* Elementor's background video sits in a wrapper of its own inside the media
   layer. It is absolutely positioned already; what it does not do is cover, so
   the video element still takes the project's own sizing.

   THE Z-INDEX IS THE WHOLE REASON THE VIDEOS "DID NOT WORK". The design stacks
   the media layer poster < video(1) < wedge(2) < mark field(3), and in the
   preview the poster is a bare `img` so it simply paints first. On the Elementor
   path the poster is an image WIDGET that Elementor appends AFTER its own video
   container, and the container carries `z-index:0`. A `z-index:1` on the video
   inside it is confined to that container's own stacking context, so the whole
   video sat under a poster painted later in the DOM at `z-index:auto`. The video
   played, on time, for its full length, entirely hidden. Nothing about it read
   as a stacking fault: the element was there, the src was right, readyState was
   4 and currentTime advanced.

   The container therefore takes the 1 and the poster takes the 0.

   AND THE POSTER IS WHAT YOU SEE AT THE END. `background_play_once` does not
   freeze the last frame; Elementor sets `display:none` on the video when it
   ends. Whatever is behind is then the still, which is why each poster has to be
   its clip's own final frame or the picture jumps at the cut. */
.bl-pos-media .elementor-background-video-container{position:absolute;
  inset:0;overflow:hidden;z-index:1}
.bl-pos-media .elementor-background-video-container video{position:absolute;
  inset:0;width:100%;height:100%;object-fit:cover}
.bl-pos-media .bl-pos-poster.elementor-widget.elementor-element{z-index:0}

@media (max-width:900px){
.bl-country .bl-pos .bl-pos-inner.e-con.elementor-element,.bl-country.bl-pos .bl-pos-inner.e-con.elementor-element{
    /* Mobile keeps fixed padding on purpose. Below 900px the wedge is gone,
       the copy sits on a plain ground and there is no lattice for the monogram
       to stay on, so there is nothing left for the cell to hold in step. */
    padding:150px 26px 64px}
.bl-country .bl-band.e-con.elementor-element.e-parent:not(.bl-pos):not(.bl-facts),.bl-country.bl-band.e-con.elementor-element.e-parent:not(.bl-pos):not(.bl-facts){
    padding-left:26px;padding-right:26px}
}

/* hero */
/* THE HERO IS THE ONE BAND THAT RUNS TO THE EDGE, and the one that may carry a
   moving background. Added 26 August 2026.

   The ground is full bleed; the words are not. `.bl-pos-inner` holds the same
   1240 column every other band sits in, so the hero reads as the same page with
   its background let out, rather than as a different page.

   THE VIDEO IS AN ENHANCEMENT AND THE STILL IS THE PAGE. The poster image is a
   real <img> underneath, so it is what the browser loads, what it measures for
   layout, and what remains when the video is removed. The video sits over it
   with `preload="none"`. Three consequences worth keeping:
     * a visitor who has asked for less motion gets the still, because the
       video element is removed and the still was never conditional on it;
     * a narrow screen gets the still, because a background video on a phone is
       data the visitor did not ask to spend;
     * the file never competes with the hero's own paint for LCP.

   THE SCRIM IS NOT DECORATION. White type over moving footage fails contrast
   somewhere in every clip. The gradient is opaque enough on the left, where the
   words are, to hold the ratio whatever frame is under it, and thins to the
   right so the picture is still visible. Contrast is measured against the
   DARKEST end of the scrim, not against the average. */
.bl-country .bl-band.bl-pos,.bl-country.bl-band.bl-pos{max-width:none;padding:0;position:relative;
  overflow:hidden}
/* TWO LATTICE CELLS OF EXTRA HEADROOM, added 26 August 2026. The site header
   is fixed and sits OVER the hero, so the top of this band is under it: 56px of
   bar, 64 on mobile, and another 32 whenever an admin bar is showing. The copy
   cleared it but the monogram's top row did not by much, and the point is air
   rather than clearance. Fabian, having no header in the preview to judge it
   against: "the header goes over the video and everything, we need to add more
   space to the top."
   116px AND NOT SOME OTHER NUMBER: the monogram has to stay on the field's
   lattice, so the copy and the monogram both move by a whole number of 58px
   cells or the marks stop replacing squares and start sitting between them. */
.bl-pos-inner{position:relative;z-index:2;max-width:1352px;margin:0 auto;
  /* 4.586 and 2.276 cells, being the old 266px and 132px over 58. Written as
     multipliers so the header clearance, the copy and the monogram keep step.

     The bottom is 1.9 cells and not the old 2.276. That padding is where the
     hero's slack falls by design, so it is the one measurement here that can be
     trimmed without moving anything the reader looks at, and it was 21px of
     overflow at 1440x900, the commonest laptop there is. */
  padding:calc(var(--bl-cell) * 4.586) 56px calc(var(--bl-cell) * 1.9)}
/* THE MEDIA LAYER CLIPS ITSELF, and it has to from the moment any page frames
   its clip. A framing scale makes the video LARGER than the band: at 1.15 on a
   1585px hero it renders 1823px wide. The hero is `overflow:visible` for the
   mark field, so that surplus escaped the band, escaped the page and gave the
   whole document a horizontal scrollbar. Measured: scrollWidth 1823 against
   clientWidth 1585, on Singapore and Vietnam and not on Germany, which is the
   one page with no framing set.
   Clipping HERE and not on the hero is the point: the wedge and the mark field
   are both `inset:0` pseudo-elements of this box, so they are unaffected, while
   the monogram, which deliberately hangs off the copy and past the left edge,
   is outside this box and keeps its overhang. */
.bl-pos-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.bl-pos-media img,.bl-pos-media video{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover;display:block}
.bl-pos-media video{z-index:1}
/* A SHAPE, NOT A VEIL. Fabian, 26 August 2026: "maybe can we play with a
   shape so the video plays without overlay but then there is a shape that cuts
   off where the video plays and where the text is."

   So the navy is a solid wedge rather than a gradient laid over everything, and
   the right of the frame is the footage untouched, at full contrast and full
   colour. The diagonal is shallow, 8 per cent of the width across the full
   height, because a steeper one starts to read as a graphic device and this is
   meant to read as the page's own ground meeting the picture.

   THE COPY MEASURE AND THE WEDGE ARE ONE NUMBER. The text column is capped so
   that its longest line clears the diagonal at the narrowest point of the
   wedge, which is the bottom. Change one and the other has to move, which is
   why they are commented together and why the heading takes its own size here
   rather than the 52px it uses on a page with no picture behind it. */
/* MORE PICTURE, LESS GROUND. Moved 26 August 2026 from 70/62 to 56/48 on
   Fabian's "can the cut out in the video be a bit more video and less space for
   the text". The copy measure did not have to move with it: measured at 1600,
   the longest line of the heading ends 108px clear of the diagonal at its own
   baseline and the lead 130px clear at its own, so the wedge could give up 14
   points of width without the text coming near it.

   THE WEDGE STOPS AT THE HERO'S BOTTOM. Its box is inset by the overhang below,
   so its percentages still resolve against the hero and not against the taller
   media box. */
.bl-pos-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:#0E1C3A;
  clip-path:polygon(0 0,56% 0,48% 100%,0 100%);
  /* NO CUT-OUTS ANY MORE. The navy was punched with square holes for part of
     26 August 2026, so the picture showed through it, and the whole idea was
     replaced by something simpler: one square field drawn OVER both grounds,
     which is the rule above this one. A cut-out and a drawn mark were two
     devices doing one job, and the work was going into making them look
     alike. The wedge is now just a wedge. */}

/* THE RIBBON CARRIES NO MARKS. It had a field of its own, then the hero's
   lattice continued into it, then that was confined to the gutter so it would
   not run under the four figures. Fabian, 26 August 2026: "the lower right
   corner is still not perfect and I don't think we get there. Just remove the
   squares on that text element."
   He is right that it was not going to get there. The band is four figures in a
   1240px column with a gutter either side, so the only place a mark can go is
   the gutter, and a pattern that exists only in the margin is not a pattern.
   The hero carries the field; this band carries the facts. */
.bl-country .bl-band.bl-facts,.bl-country.bl-band.bl-facts{position:relative;padding-top:0;padding-bottom:0}
.bl-facts>*{position:relative;z-index:1}
.bl-facts::before{content:"";position:absolute;inset:0;z-index:0;
  background:#0F2246}

/* THE SHAPE STOPS ON THE BOUNDARY. The diagonal was carried 84px down into the
   band below on 26 August 2026 and taken out again the same day: Fabian liked
   the marks and not the continuation. The band below keeps its stacking order
   only because the square cut-outs there still need the picture behind them.

   `overflow:visible` is belt and braces rather than a fix: no rule in this
   stylesheet clips a band, checked rather than assumed. It is stated because
   the marks layer now reaches past the hero's bottom edge and anything that
   started clipping bands would silently cut it off. */
/* THE HERO AND THE BANNER TOGETHER ARE 85% OF THE WINDOW. Fabian, 26 August
   2026: "the video hero and the info banner together should cover 85% of the
   height of the screen."

   Expressed as one sum rather than two guesses: the banner is pinned at 210px,
   which is what its four figures actually occupy, and the hero takes the rest
   of the 85. So the pair is exactly 85vh at any window height and neither can
   drift from the other.

   THE COPY IS NOT CENTRED IN THE TALLER HERO, and that is deliberate. The
   monogram field is anchored to the top left in pixels because it has to hug
   the eyebrow; centring the copy would leave the marks pinned to the top while
   the words moved down, and the one relationship this hero is built on would
   come apart at exactly the window sizes nobody tests. So the extra height
   falls BELOW the copy, where the pool wants it anyway. */
/* THE PAIR IS 80vh AND THE CELL IS WHAT MAKES IT TRUE. Fabian, 26 August 2026:
   "the Hero is not in Realive height but fixed. It looked great on my computer at
   work but now on my laptop it does not [...] the Hero Section and the below text
   Banner is together 80% of the height of the screen [...] change the font to be
   in relative size so everything stays in proportion."

   The previous rule asked for 85vh and got 113. `min-height` cannot shrink a box
   that its own content has already made taller, and this hero's content was
   entirely fixed: 398px of padding, a 44px heading over five lines, a 19px lead.
   Naming a smaller number would have changed nothing.

   `--bl-cell` is the 58px lattice the whole hero is built on, and every vertical
   offset in it is a multiple of that cell. Scale the cell and the padding, the
   monogram, the mark field and the spacing all move together, so the one
   relationship the hero depends on, the monogram landing ON a square rather than
   between two, survives every window size. The multipliers are the old pixel
   values divided by 58 and are written out where they are used.

   `min-height` and not `height`, deliberately. If a page ever carries copy that
   genuinely will not fit, the hero grows and the pair passes 80vh. That is the
   right failure: a hero half a band too tall is a blemish, a hero that clips its
   own first sentence is a broken page. */
.bl-country,.bl-country.bl-band{
  --bl-cell:clamp(26px,3.6vh,58px);
  --bl-facts-h:clamp(128px,15vh,210px)}
.bl-country .bl-band.bl-pos,.bl-country.bl-band.bl-pos{overflow:visible;z-index:1;
  min-height:calc(80vh - var(--bl-facts-h))}
.bl-country .bl-band.bl-facts,.bl-country.bl-band.bl-facts{
  min-height:var(--bl-facts-h)}
.bl-pos-media{bottom:0}

/* THE MARK. See `hero_mark_uri` for why it is a square, why it is white and why
   it is a data URI. It sits ABOVE the wedge in the stack and is masked back to
   nothing over it, so the field only ever appears on the footage: a radial mask
   anchored bottom right, densest in the corner furthest from the words and gone
   entirely before it reaches them. That gradient is doing the same job as the
   hand-placed density in the reference, without hand-placing anything. */
/* THE TWO DRAWN GROUPS, one anchored in each corner, so the composition has
   weight in the lower right and the upper left and nothing in between. No mask
   is needed any more: the compositions ARE the density, and each is placed
   where it belongs rather than faded into place. */
/* BOUNDED TO THE HERO, and this is what made the bottom right group invisible
   for three passes. `.bl-pos-media` reaches 190px BELOW the hero so the banner
   has something to show through its cut-outs, and a pseudo-element at `inset:0`
   inherits that taller box. `background-position: bottom 34px` was therefore
   measuring from 190px under the fold, and the whole group was sitting behind
   the banner's navy. Every adjustment to opacity, placement and shadow was
   being made to marks that were not on screen at all.
   The lesson is the general one this project keeps relearning: when a change
   has no visible effect, stop adjusting it and find out where the thing
   actually is. */
/* THE FIELD. One repeating square over the whole hero, drawn above both the
   navy and the footage so the same mark reads on both grounds.

   IT STOPS AT THE HERO'S OWN EDGE, and the ribbon continues it. An earlier
   version reached 42px down so a row would straddle the boundary, while the
   ribbon also drew a field of its own in the same corner: two lattices, out of
   phase, doubling every mark where they met. Fabian saw it immediately as
   "duplicate squares in the lower right corner". ONE tile, drawn twice by two
   elements that agree about where the rows are, is the fix. See the ribbon rule
   for how the phase is kept.

   THE TWO CORNERS ARE TWO MASK LAYERS, added together. Anchoring one radial
   gradient in the bottom right and one in the top left, and compositing them
   with `add`, gives a union: strongest in those two corners, tapering to
   nothing across the middle. `-webkit-mask-composite` takes the old keyword
   `source-over` for a union, not `add`. */
.bl-pos-media::before{content:"";position:absolute;inset:0;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Crect x='22.5' y='22.5' width='13' height='13' fill='none' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:repeat;
  /* THE LATTICE IS ANCHORED TO THE COPY COLUMN, and that is what lets the
     monogram sit IN the pattern rather than on top of it. Anchored to the band
     edge the lattice moved with the window while the centred copy did not, so
     the monogram could never land on a cell and had to blank one instead.

     THE 29px IS NOT A FUDGE. A percentage in `background-position` resolves
     against (container width less IMAGE width), not container width, so
     `calc((100% - 1240px)/2)` gives (W - 1298)/2 where the copy column starts
     at (W - 1240)/2. The difference is a constant 29, being half the 58px tile,
     and adding it back makes the lattice origin the copy's own left edge. The
     `max` reproduces the band's own gutter floor. */
  /* HALF A CELL, not 29px. Same arithmetic as before and the same reason: a
     percentage in `background-position` resolves against (container - image), so
     the tile has to be offset by half its own width to land on the column. */
  background-size:var(--bl-cell) var(--bl-cell);
  background-position:left max(56px,calc((100% - 1240px) / 2
    + var(--bl-cell) / 2)) top 0;
  opacity:.5;
  -webkit-mask-image:radial-gradient(62% 74% at 100% 100%,#000 0%,
      rgba(0,0,0,.55) 34%,rgba(0,0,0,0) 72%),
    radial-gradient(52% 62% at 0% 0%,#000 0%,rgba(0,0,0,.5) 32%,
      rgba(0,0,0,0) 68%);
  mask-image:radial-gradient(62% 74% at 100% 100%,#000 0%,
      rgba(0,0,0,.55) 34%,rgba(0,0,0,0) 72%),
    radial-gradient(52% 62% at 0% 0%,#000 0%,rgba(0,0,0,.5) 32%,
      rgba(0,0,0,0) 68%);
  -webkit-mask-composite:source-over;
  mask-composite:add}

/* THE MONOGRAM, hung off the COPY and not off the band. Fabian: it sits
   "approximately 20px above and 20px to the left of the golden word Germany",
   so it has to move with the eyebrow rather than with the window.
   `.bl-pos-inner` is padded 56px left and 150px top and the eyebrow is its first
   child, so the eyebrow's top left corner is exactly (56, 150) inside it. The
   monogram is 40px and sits 20px clear on both sides, so its right edge lands
   at 56 less 20, and its bottom edge at 150 less 20. The group is five cells
   square with the monogram at its centre, so the group offsets back 145px from
   the monogram's own centre. Measured after the first attempt, which put it 20
   up and 20 left of where it belonged: the arithmetic is easy to do twice and
   the only way to know is to read the eyebrow's box off the page. */
.bl-country:not(.bl-practice) .bl-pos::before,
.bl-country:not(.bl-practice).bl-pos::before{content:"";position:absolute;z-index:4;
  /* ON THE LATTICE. The field's cell centres sit at the copy's left edge plus
     29 plus a multiple of 58 horizontally, and at 29 plus a multiple of 58 down
     from the hero's top. The monogram takes the nearest cell to where it was by
     eye: two cells left of the copy edge and one row down, which is 31px left
     of the inner box and 87px from the top. The group is five cells square with
     the monogram at its centre, hence the further 145. */
  /* -3.034, 1 and 5 cells. At cell 58 these are the measured -176, 58 and 290
     exactly; at any smaller cell the monogram stays on the field's lattice,
     which pixel values could not do. */
  /* ON THE LATTICE, AND NOW ACTUALLY ON IT. Fabian, 30 August 2026: "the
     solid squares are not aligned with the faint squares."

     THE OLD VALUE COULD NOT ALIGN AT MORE THAN ONE WINDOW SIZE. It placed the
     block at a multiple of the cell from the inner box, but the lattice is not
     anchored to the inner box: it is anchored to the copy column plus half a
     cell, and the inner box starts a FIXED 63.5px to the left of that column.
     So the error is (c - 0.5) * cell - 63.5, which has a cell in it and a
     constant in it and cannot be zero for both at once. Measured: 16.4px out at
     a 900px window, 31.4px at 1069px. It was tuned by eye at one height and was
     wrong at every other.

     Carrying the 63.5 explicitly makes the block's left edge land on a lattice
     column at any cell size: 63.5 + cell * (k + 0.5) is the column. k = -6 is
     arithmetically nearest to where the monogram sat, but it puts the block's
     centre at 3px and the BL box is clipped by the window edge, so the column
     one to its right is the one that is both on the lattice and on the page.

     `audit()` now measures this rather than trusting it. */
  /* ON THE LATTICE, AND THE LATTICE IS THE COPY COLUMN.
     Fabian, 30 August 2026: "the solid squares are not aligned with the faint
     squares", and then "they seem to move when scaled", which is the tell that
     names the fault: the residual was a FRACTION OF A CELL, and the cell is
     3.6vh, so the error grew and shrank as the window did.

     WHERE THE LATTICE ACTUALLY IS. Its `background-position` reads
     `max(56px, (100% - 1240px)/2 + cell/2)`, and a percentage in
     `background-position` resolves against (positioning area MINUS the image),
     so `100%` is (mediaWidth - cell). Substitute it and the halves cancel:

         (mediaWidth - cell - 1240)/2 + cell/2  =  (mediaWidth - 1240)/2

     The lattice origin is therefore the copy column itself, floored at 56px,
     which is exactly what the comment on that rule set out to achieve.
     Measured: origin 92.5px, copy edge 92.5px, at a 1425px media box.

     SO THE GAP IS THE INNER'S OWN PADDING, 56px, and nothing else. Two earlier
     attempts modelled it as 63.5px and as 63.5px plus half a cell; both were
     wrong, and the second was wrong in a way that its own check could not see,
     because the check was built from the same model as the fix. That is why
     `css_sanity` now asserts the SHAPE of the placement rather than trusting
     an arithmetic that agrees with itself.

     `56px - cell * 4` is the first lattice column left of the copy that keeps
     the whole monogram on the page; one further left clips the BL box. */
  /* ON THE LATTICE AT EVERY WINDOW, AND THIS IS THE FOURTH ATTEMPT.
     Fabian, 1 September 2026: "the solid squares are not aligned anymore and
     the move when the windo scale changes. can we make it aligned and fixed?"
     The same words as 30 August, because the previous fix was exact in one
     regime and wrong in the other, and the regime it was tuned in is the one
     a narrow window sits in.

     THE FIVE SOLID MARKS ARE NOT A SECOND LATTICE. They are five 13px rects
     baked into this one tile beside the BL box, each at a multiple of 58 plus
     the same 22.5 inset the field uses, and the tile is scaled by exactly
     cell/58. The tile has always been right. Only where it was PUT was wrong,
     so nothing inside it needed touching.

     WHY `56px - cell * 4` COULD NOT WORK. Write x for (bandWidth - 1240)/2.
     The field's origin is max(56px, x) and the inner box's own left edge is
     max(0px, x), so the gap the monogram must cross is max(56,x) - max(0,x):
     56 while the window is narrow, 0 once it is wide, and sliding between the
     two across 1240px to 1352px. The old value hard-codes the narrow answer.
     Measured on the live page: 0.00px out at a 1100px window and 8.80px, being
     0.272 of a cell, at 1440px. And the residue is 56 mod cell while cell is
     clamp(26px,3.6vh,58px), so it also breathes as the window changes HEIGHT,
     which is the "move when scaled" half of the report.

     NO VALUE WRITTEN IN THE INNER'S COORDINATES CAN BE RIGHT. Between 1240px
     and 1352px the inner box is pinned at 1240 wide while the gap it has to
     cross slides from 56 to 0, so the inner cannot see the band width that
     decides its own answer. That is why this moves to the band.

     ON `.bl-pos::before`, the positioning area is now the band, which is the
     same box the field is measured against, so the two share ONE expression
     and cannot drift apart by construction. `::after` is the sun-catch, which
     rests at opacity 0 and is absent from the homepage entirely.

     THE HALF-IMAGE CORRECTION IS 5 CELLS HERE, NOT ONE. A percentage in
     `background-position` resolves against (area - IMAGE), and this image is
     five cells wide where the field's is one, so the term that cancels the
     halves is cell*5/2. Substituting: ((W - 5c) - 1240)/2 + 5c/2 = (W-1240)/2,
     the copy column, for any cell. Same max(56px, ...) floor as the field, so
     both switch regime at the same width, and then a whole 4 cells left, which
     is the first lattice column that keeps the BL box on the page.

     `css_sanity` now asserts this shape instead of the old one. The old check
     stated the two-floor rule in its own comment and then tested only that the
     expression began with 56px and ended in a whole number of cells, both of
     which the wrong value satisfied. A guard built from the same model as the
     fix agrees with it and proves nothing. */
  inset:0;pointer-events:none;
  background-size:calc(var(--bl-cell) * 5) calc(var(--bl-cell) * 5);
  background-position:left calc(max(56px,(100% - 1240px) / 2
    + var(--bl-cell) * 5 / 2) - var(--bl-cell) * 4) top var(--bl-cell);
  /* .5, the same as the field. At .92 it was the one thing on the hero that
     looked drawn on rather than shimmering through, which is the whole idea of
     the field it belongs to. And 40px further left than the arithmetic put it,
     on Fabian's eye rather than on a measurement: the monogram wants more air
     between itself and the words than the 20px that positions it. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='290'%3E%3Crect x='116.0' y='116.0' width='58' height='58' fill='%230E1C3A'/%3E%3Crect x='80.5' y='80.5' width='13' height='13' fill='%23FFFFFF' fill-opacity='0.5'/%3E%3Crect x='196.5' y='80.5' width='13' height='13' fill='%23FFFFFF' fill-opacity='0.5'/%3E%3Crect x='80.5' y='196.5' width='13' height='13' fill='%23FFFFFF' fill-opacity='0.5'/%3E%3Crect x='254.5' y='138.5' width='13' height='13' fill='%23FFFFFF' fill-opacity='0.5'/%3E%3Crect x='138.5' y='254.5' width='13' height='13' fill='%23FFFFFF' fill-opacity='0.5'/%3E%3Crect x='125.0' y='125.0' width='40' height='40' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-opacity='0.5'/%3E%3Ctext x='145.0' y='151.0' fill='%23FFFFFF' fill-opacity='0.5' font-family='Jost, Futura, sans-serif' font-size='17' font-weight='500' letter-spacing='0.5' text-anchor='middle'%3EBL%3C/text%3E%3C/svg%3E");background-repeat:no-repeat;opacity:1}
/* THREE CLASSES, because this block sits ABOVE `.bl-pos .bl-pos-line` in the
   stylesheet and both would otherwise be (0,2,0), so the 52px original wins on
   source order alone. Measured: the heading came back 52px and 635px wide with
   these rules present and correct in the file. */
/* RELATIVE TYPE, WITH FLOORS. Asked for as "relative size so everything stays
   in proportion", and the proportion is what `vh` gives: the hero's box is a
   fraction of the window, so its words have to be too, or a 44px heading over
   five lines eats a short hero whole.

   NOT pure proportion, though. Scaling the eyebrow off the cell would put it at
   8px on a small laptop; legibility is a floor and not a ratio, so each line has
   a clamp with a minimum that is still readable and a maximum that is the value
   Fabian approved on the large screen. The measure stays in `ch`, so it tracks
   the font size and the line count holds as the type scales. */
/* THE MEASURE IS ONE NUMBER AT EVERY HEIGHT, and the wedge chose it. A `ch`
   measure holds its line count as the type scales, so the measure alone decides
   how many lines the heading takes, and two tiers of measure would give two
   different compositions. Jost runs about 0.61em to the `ch` here, measured off
   the preview, where 19ch at 52px came to 635px. The longest line must clear the
   diagonal at its narrowest, the bottom at 48% of the band, which leaves about
   588px from the copy's left edge at a 1600px window:

     * four lines wants 26ch, which caps the heading at 36px, too small for the
       most important line on the page;
     * five lines wants 21ch, which caps it at 44px, the size already approved.

   Hence 21ch, and a 42px maximum rather than 44. Measured on the live page at a
   1400px viewport, 44px left the longest line clearing the diagonal by FOUR
   pixels: correct for this heading and no margin at all for the next one. 42px
   pulls the clearance to about 65px and still sets five lines, so the maximum is
   set by the geometry rather than by the one heading that happened to fit. */
.bl-pos .bl-pos-line{font-size:clamp(29px,4.1vh,42px);max-width:21ch}
/* 36rem, AND THE WEDGE ALLOWS IT. The lead sits low in the hero, around 70 to
   90 per cent down, where the diagonal has run in to about 49 per cent of the
   band: at a 1440px window that leaves roughly 605px from the copy's left edge,
   so a 576px measure clears it. The step from 34rem was worth a whole line on
   Singapore, whose lead ran to five, and a line of lead is 25px of hero. */
.bl-pos .bl-pos-lead{font-size:clamp(15px,1.75vh,19px);max-width:36rem}
.bl-pos .eb,.bl-pos .bl-pos-eb{font-size:clamp(11px,1.05vh,13px)}
@media (prefers-reduced-motion:reduce){
  .bl-pos-media video{display:none}
}
@media (max-width:1100px){
  /* The wedge needs room on both sides of the diagonal. Below this there is
     none, so the shape becomes a plain ground over the still, the overhang is
     taken back to nothing, and the picture stops competing with the words. */
  .bl-pos-media::after{clip-path:none;background:rgba(14,28,58,.88);inset:0;
    -webkit-mask-image:none;mask-image:none}
  .bl-pos-media{bottom:0}
  .bl-pos-media::before{opacity:.3}
  .bl-pos .bl-pos-line{max-width:none}
}
@media (max-width:900px){
  .bl-pos-media video{display:none}
  .bl-pos-inner{padding:72px 26px 64px}
  .bl-pos .bl-pos-line{font-size:34px}
}

/* ------------------------------------------------------------------ 01b
   THE PRACTICE-AREA HERO IS THE SANDWICH, AND IT IS DELIBERATE. Fabian,
   27 August 2026, offered the wedge or the stack and chose the stack: "you
   leave it in the Sandwich style where its blue and info and picture (I
   actually like that for landing pages as they are different from Main Country
   Pages)."

   So this is not a country hero with the picture missing. It is its own thing:
   a blue field of copy, the facts strip, then a full-bleed photograph. What it
   inherits from `.bl-country` is the lattice, the type scale and the header
   clearance; what it does NOT inherit is the height of a band built to hold
   footage behind a wedge, and it should not inherit the country page's cap on
   the picture either.

   THREE CORRECTIONS, all measured on `/insolvency-and-restructuring/` at
   1440x900 after the scope class was first applied.

   ONE: SHORTER. The country pair is 80vh because the hero carries a picture.
   This one carries four lines of copy and was 585px tall with 110px of dead
   field under the lead. 60vh less the facts strip, with the top padding cut
   from 4.586 cells to 3.2 and the bottom from 1.9 to 1.3, brings it to about
   446px without moving anything the reader looks at. The top padding still
   clears the fixed header: the bar ends 56px into the band and 3.2 cells is
   104px at full cell, so there is roughly 48px of air under it.

   TWO: THE PICTURE RUNS TO THE EDGE. `.bl-country .bl-join img` caps the image
   at the 1240 copy column, which is right on a country page where the band is
   a quiet divider inside the measure. Here the picture is the third slice of
   the sandwich and has to be as wide as the blue above it. Fabian: "the picture
   is narrow the header is wider." That cap arrived on these pages WITH the
   scope class, so it is a fault this file introduced and this file removes.
   The override lives in the JOIN block, next to the rule it answers.

   THREE: THE FIELD CROSSES THE WHOLE BANNER. The mark field is a pseudo-element
   of `.bl-pos-media`, so on a hero with no media it never renders at all and
   the only marks on the page are the five cells around the monogram. Fabian:
   "I like the Logo as squares but you also need to add the faint squares across
   the banner." This puts the same 58px tile on the band itself, on the same
   lattice as the monogram so the marks line up with it rather than sitting
   between the squares, and masks it AWAY from the copy: strongest on the right
   where the field is empty, gone before it reaches the words. Opacity .3 and
   not the .5 the footage version uses, because there is no photograph here to
   compete with and the same value reads as a printed grid rather than a
   watermark. */
.bl-country.bl-practice .bl-band.bl-pos,
.bl-country.bl-practice.bl-band.bl-pos{
  min-height:calc(60vh - var(--bl-facts-h))}
.bl-country.bl-practice .bl-pos-inner{
  padding:calc(var(--bl-cell) * 3.2) 56px calc(var(--bl-cell) * 1.3)}
/* THE FIELD. `.bl-pos::after` is already the preview's monogram, so this is
   ::before. z-index 1 puts it under `.bl-pos-inner`, which is z-index 2, so no
   mask failure can ever put a square over a letter.

   BOTH FORMS OF THE SELECTOR, and the first version had only the descendant one,
   which matched nothing. The emitter puts the scope classes on EVERY node, so on
   the Elementor page the hero band itself carries `bl-country bl-practice
   bl-band bl-pos` together and the compound form is the one that matches; in the
   preview the scope sits on an ancestor and the descendant form is. The
   min-height rule above was written with both from the start and worked, which
   is exactly why the height changed and the field did not. */
.bl-country.bl-practice .bl-band.bl-pos::before,
.bl-country.bl-practice.bl-band.bl-pos::before{content:"";position:absolute;
  inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Crect x='22.5' y='22.5' width='13' height='13' fill='none' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:repeat;
  background-size:var(--bl-cell) var(--bl-cell);
  /* Same anchor arithmetic as the media field: a percentage in
     `background-position` resolves against (container less image), so the tile
     is offset by half its own width to land on the copy column's left edge. */
  background-position:left max(56px,calc((100% - 1240px) / 2
    + var(--bl-cell) / 2)) top 0;
  opacity:.3;
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,0) 34%,
    rgba(0,0,0,.45) 58%,#000 100%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,0) 34%,
    rgba(0,0,0,.45) 58%,#000 100%)}
@media (max-width:900px){
  /* The field is decoration and the phone has no room to spare for it. */
  .bl-country.bl-practice .bl-band.bl-pos::before,
  .bl-country.bl-practice.bl-band.bl-pos::before{display:none}
  .bl-country.bl-practice .bl-pos-inner{padding:72px 26px 56px}
}
/* THE HERO'S TWO BUTTONS, AND THEY HAD NO GAP IN THE PREVIEW AT ALL.
   There was no rule for this container: the buttons are inline-level and
   `_buttons` joins them with no whitespace, so they met at exactly 0px. It
   went unseen while the labels were "What we do" and "The record", which read
   as two objects even when touching. "Coming up" and "What we are" ran
   together into one string and Fabian caught it at once.

   THE EMITTER WAS ALREADY RIGHT, which is the unusual direction for this page:
   it wraps the pair in a row container at gap 12, so the live page has always
   been correct and the preview never was. Twelve here, so the two agree. */
.bl-country .bl-pos-cta{display:flex;flex-wrap:wrap;gap:12px;
  align-items:center}

/* suncatch */
/* E18. The logo caught by the light as the reflection leaves the glass, then
   lost again. See `hero_sunmark_uri` for the timing and where it came from.

   THE SWEEP IS A MASK TRAVELLING ACROSS THE SHAPE, at the angle of the tower's
   own glass, so the logo is not faded in and out but WIPED in and out by a band
   of light. That is the difference between a badge appearing and a reflection
   catching something, and it is the whole of what was asked for.

   IT ANIMATES `mask-position`, WHICH IS NOT A COMPOSITOR PROPERTY, and that is
   a deliberate exception to this project's own rule that only `transform` and
   `opacity` may animate. The rule exists for INP, and it is worth breaking here
   only because the element is 260px wide, the animation runs three seconds once
   every twenty-five, and the alternative (translating the element under a fixed
   mask) moves the mask with it and produces no sweep at all. If the hero ever
   becomes an interaction target, revisit this first.

   GUARDS. `prefers-reduced-motion` kills it in the script rather than in the
   CSS, because the class is what starts it. It never appears below 1100px: on a
   phone the video is not playing at all, so there is no reflection for it to
   belong to. */
.bl-pos::after{content:"";position:absolute;z-index:4;pointer-events:none;
  /* 61%, moved right when the mark took the reflection's colour. In white it
     sat happily across the lit face of the glass; in the glass's own orange the
     wordmark crossed the bright band and disappeared into it, because a colour
     sampled FROM something has no contrast against it. The mark now sits on the
     darker face to the right of the band, where the same orange reads as light
     falling on it. */
  width:260px;height:200px;
  background-repeat:no-repeat;background-size:contain;opacity:0;
  /* A WIDE BAND, NOT A SLIT. The first version lit about a fifth of the mark at
     a time, so the sweep read as a glint and the logo was never legible in it.
     The band now covers roughly half the shape at its peak: enough that the
     whole mark resolves for a moment, which is the point of it appearing at
     all, and still narrow enough to be a reflection passing rather than a fade
     in and out. */
  -webkit-mask-image:linear-gradient(108deg,rgba(0,0,0,0) 14%,#000 42%,
    #000 58%,rgba(0,0,0,0) 86%);
  mask-image:linear-gradient(108deg,rgba(0,0,0,0) 14%,#000 42%,
    #000 58%,rgba(0,0,0,0) 86%);
  -webkit-mask-size:210% 100%;mask-size:210% 100%;
  -webkit-mask-position:118% 0;mask-position:118% 0}

.bl-pos.bl-suncatch::after{animation-name:bl-suncatch;
  animation-timing-function:cubic-bezier(.32,0,.28,1);
  animation-fill-mode:both}

@keyframes bl-suncatch{
  0%{opacity:0;-webkit-mask-position:118% 0;mask-position:118% 0}
  18%{opacity:.52}
  62%{opacity:.52}
  100%{opacity:0;-webkit-mask-position:-18% 0;mask-position:-18% 0}
}

@media (max-width:1100px){.bl-pos::after{display:none}}

/* askbox */
/* The call to action, as the one solid navy object on the page. Added 26 August
   2026. It is deliberately NOT the full width of the band: a box inset from the
   ground it sits on reads as an object, and an object is what stops a reader
   who has scrolled past nine questions. The gold rule above the heading is the
   same 56px mark the hero uses, so the page opens and closes on the same
   gesture.

   The two buttons take the navy-ground variants, which the renderer now forces
   rather than reading from the spec: the ground is decided here, so the pairing
   is decided here too. */
.bl-ask-box{position:relative;background:#12244A;color:#C3CFE4;
  border-radius:4px;padding:58px 56px 52px;display:flex;align-items:center;
  justify-content:space-between;gap:44px;flex-wrap:wrap;
  box-shadow:0 18px 44px rgba(18,36,74,.16)}
/* INSIDE the box, not on its edge. At top:0 the rule sat half on the boundary
   and read as a stray tab rather than as the same 56px gold mark the hero opens
   with. It is the page's closing gesture, so it has to look intended. */
.bl-ask-box::before{content:"";position:absolute;left:56px;top:30px;
  width:56px;height:2px;background:#C9A84C}
.bl-ask-box h2{color:#FFFFFF}
.bl-ask-box>div:first-child{max-width:38rem}
.bl-ask-box p{color:#C3CFE4;font-size:17px;line-height:1.62;margin:14px 0 0}
.bl-ask-acts{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){
  .bl-ask-box{padding:44px 26px 36px;gap:26px}
  .bl-ask-box::before{left:26px;top:22px}
}

/* qs */
/* 09 questions people ask, Elementor classes -------------------------
   Two columns on a wide screen because six of these in one column pushes
   the Ask band off the bottom of the world, one column on a phone. Same
   no-accordion rule as the brief band and the same reason for it.

   FAQPage schema is a Rank Math panel field per page and is NOT emitted
   here. A JSON-LD snippet is site-wide, and one injected by script is
   invisible to the crawlers that would use it, which would be a schema
   that exists only for us to feel good about. */
.bl-qs-i p{max-width:36rem}
@media (max-width:860px){
  .bl-qs-i{width:100%!important;--width:100%!important}
}

/* road */

/* ===================================================== THE ROAD (library 5) */
.bl-road{display:none}
@media (min-width:900px){
  /* `.bl-band`, NOT `.band`. THE TRAP THIS RULE WAS IN, and it is the one
     the component library records from 26 August. The preview writes both
     classes on every band; the Elementor emitter writes only `bl-band`. A
     road rule keyed to `.band` therefore applies in the preview and to
     nothing at all on the live page, so `position:relative` would be
     absent, every piece would position against the wrong ancestor, and the
     whole road would land somewhere else. It would look perfect in the
     preview and be wrong on the site, with no error anywhere. Both
     renderers write `bl-band`, so this body.elementor-page-7015 is correct in both. */
  .bl-road-on .bl-band{position:relative}

  /* THE HOLD IS GONE, and the reason is worth keeping. It pinned the first
     screen so the reader's opening scroll was spent on the birth rather than
     on the page moving. Fabian, 30 August 2026: "Can we do the initial
     pulsation motion beeing therer regardles of scrolling? otherwise its too
     fast to transform into the motion." A pulse driven by scroll is only as
     long as the reader's first gesture, which is one flick of a wheel, so it
     was over before it read as anything. On the clock it takes the time it
     needs. The hold also cost about 110px of empty navy under the facts strip
     at rest, because a hold needs document height to absorb and the pinned
     block is shorter than the viewport. Both problems had one answer. */
  .bl-road-on .bl-band,.bl-road-on .bl-rail-stick{--gold-soft:#E3CE8C}
  /* The pinned box is a containing block already, because `position:sticky`
     is a positioned element, but only above 1100px where the pin exists. In
     the 900 to 1100 band the road still shows and the box is static, so it
     needs one. Scoped, and NOT written unconditionally: this stylesheet ends
     after the rule that makes it sticky, so an unscoped `position:relative`
     here would win and silently unpin the rail. */
  @media (max-width:1099px){.bl-road-on .bl-rail-stick{position:relative}}

  .bl-road{display:block;position:absolute;z-index:3;pointer-events:none}

  /* THE PIECE. One per band, hung from that band's own heading and exactly as
     tall as the band, so the piece of the band below begins precisely where
     this one ends. `--bl-road-delta` is the difference between this band's
     anchor and the next one's, written by the generator, and is 0 everywhere
     the two agree. */
  /* ELEMENTOR PADS EVERY CONTAINER BY 10px A SIDE AND THE BOX IS
     BORDER-BOX, so a road piece asked for 1px renders at TWENTY: the padding
     alone, with the hairline nowhere in it. Measured on the published page,
     1 September 2026, where the road came out as a broad grey bar down the
     whole page and was the first thing Fabian saw. The preview has no
     Elementor and so could never show it.

     ZERO THE VARIABLES, NOT THE PROPERTY. Elementor's own rule is
     `padding-inline: var(--padding-inline-start) var(--padding-inline-end)`,
     so setting `padding:0` alone is a specificity race against the container
     stylesheet; setting the variables wins by feeding its own rule. Both are
     set, because the variables are what Elementor reads and the shorthand is
     what any other stylesheet would. */
  .bl-road,.bl-road-piece,.bl-road-drop,.bl-road-head,.bl-road-warble{
    --padding-inline-start:0px;--padding-inline-end:0px;
    --padding-block-start:0px;--padding-block-end:0px;padding:0}
  .bl-road-piece{top:var(--bl-road-anchor,176px);
    height:calc(100% + var(--bl-road-delta,0px));
    width:1px;left:max(calc((100% - 1240px) / 2 - 34px),18px);
    background:rgba(126,141,166,.34)}

  /* THE BIRTH RIDES THE H1 ITSELF, AND THIS IS WHY IT IS NOT A NUMBER.
     `--bl-road-anchor` for the hero was 237px, measured once. The h1's centre
     is not a constant: it moves with `--bl-cell`, and it moves again the
     moment the H1 text changes length, because a heading that wraps to four
     lines has its centre half a line lower than one that wraps to three.
     Measured 31 August 2026 at 37.6, 54.2 and 82.4px out at 800, 900 and
     1069, having been about 18px out before the H1 became the descriptor
     sentence. Every attempt to express it as `A * cell + B` fits the windows
     it was fitted on and carries the line count of one particular sentence
     inside B, which is the same fault wearing arithmetic.

     So the mark is attached to the thing rather than to a distance, which is
     what the rail's mark already does by riding the drop at `top:100%`. CSS
     anchor positioning gives the h1 a name and lets the piece take its top
     from that box's centre. Verified 0.00px out at every window size tried,
     and it cannot drift for any future H1.

     ONLY `top` MOVES. `height` stays `100% + delta`, so the piece still ends
     exactly where it did and the band below still begins where this one
     finishes. Guarded by `@supports`, because this is recent: a browser
     without it keeps the measured constant, which is the behaviour that
     shipped, so the fallback is a page slightly out rather than a page
     broken. */
  /* AND THE THREE REASONS IT DID NOTHING ON THE LIVE PAGE. Fabian,
     1 September 2026: the mark sits "at the top end of the frame" and its
     starting point should be "somewhere in the middle of this text". It was
     81px above the h1's centre at 1920x1080, which is the 82.4px this block
     was written to cure and says it cured. The block is correct. Every one of
     its three body.elementor-page-7015s was written against the preview's tree and matches
     nothing on the emitted one:

       h1.bl-pos-line   Elementor puts `bl-pos-line` on the WIDGET WRAPPER,
                        so the live h1 carries only `elementor-heading-title`
                        and the anchor was never named.
       .bl-pos >        Elementor inserts `.e-con-inner` between a container
                        and its children, so the child combinator misses.
       .bl-road-on      is not on the emitted page AT ALL. `_scope_class`
                        builds it and the band ships with `bl-country bl-home`
                        and nothing else, so this body.elementor-page-7015 could never match
                        live whatever else was fixed.

     Any one of the three is enough to kill it, which is why the fallback
     constant is what has been on screen since the block was written. Recorded
     rather than quietly repaired: `.bl-road-on` also gates the bands'
     `position:relative` and the road's lighter `--gold-soft`, so restoring it
     changes how the line is coloured and is Fabian's call, not a side effect
     of this one.

     The doubled `.bl-country X, .bl-country.X` form is used because the scope
     class is stamped ON the band on the emitted page and sits above it in the
     preview. Measured live after the change: piece top 237 -> 318 against an
     h1 centre of 318, delta 0.00. */
  @supports (top: anchor(--bl-h1 center)) {
    .bl-country .bl-pos h1,.bl-country.bl-pos h1{anchor-name:--bl-h1}
    .bl-country .bl-pos .bl-road-piece,
    .bl-country.bl-pos .bl-road-piece{
      position-anchor:--bl-h1;top:anchor(center)}
  }
  .bl-road-run{position:absolute;inset:0;transform-origin:top;
    background:linear-gradient(to bottom,var(--gold-soft),var(--gold));
    transform:scaleY(1)}          /* finished state: the road is drawn */

  /* THE POINT LIVES INSIDE ITS PIECE, at the piece's own top or foot. It has
     to: the piece is the timeline subject, and a name is found by looking up
     the ancestors, so a sibling of the piece could not see it. Being a child
     is also what makes the sync a single fact, because the top of the piece
     IS the band's heading and IS the instant the range opens. */
  .bl-point{position:absolute;top:0;left:50%;translate:-50% -50%;
    width:12px;height:12px;border-radius:50%;
    background:var(--gold);border:1px solid var(--gold);z-index:4}
  /* A FOOT MARK SITS AT THE FOOT. MEASURED FAULT, 30 August 2026: the class
     carried its animation windows but never its position, so the record's mark
     rendered at the TOP of the drop, 161px above its own heading, while the
     line ran past it to the right place. Both halves of "at the foot" have to
     be written, and the ranges alone look complete in review. */
  .bl-point-end{top:100%}
  .bl-point::after{content:"";position:absolute;inset:-8px;border-radius:50%;
    border:1px solid var(--gold);opacity:0}
  .bl-point > .bl-point-ring{position:absolute;inset:-8px;border-radius:50%;
    border:1px solid var(--gold-soft);opacity:0}

  /* THE BIRTH and THE DEATH are the same mark at the two ends of a run: a
     wide ring collapses onto the origin and the dot arrives with it. The one
     at the end runs the same keyframes on the same scroll, so scrolling back
     up plays it in reverse and it is born again, which is what it should do:
     it is the end of the road, not a separate object. */
  .bl-cap{width:14px;height:14px}
  .bl-cap::before,.bl-cap::after{content:"";position:absolute;inset:-9px;
    border-radius:50%;border:1px solid var(--gold);opacity:0}
  .bl-cap-die{width:16px;height:16px;background:transparent;
    border:1px solid var(--gold)}
  .bl-cap-die::before{inset:3px;background:var(--gold);border:0;opacity:1}

  /* THE HEAD: a soft glow riding the leading edge, so the line reads as being
     drawn by something rather than simply getting longer. The outer element
     is moved by the scroll timeline; the inner one carries the warble on its
     own clock, because two animations on one element fight over `transform`. */
  .bl-road-head{position:absolute;left:50%;top:0;translate:-50% -50%;
    width:3px;height:64px;z-index:4;opacity:0}
  .bl-road-head .bl-road-warble{display:block;width:100%;height:100%;border-radius:2px;
    background:linear-gradient(to bottom,rgba(201,168,76,0),var(--gold-soft));
    box-shadow:0 0 14px 3px rgba(201,168,76,.55)}
}

/* ------------------------------------------------------------- THE MOTION.
   Everything above is the finished road. Everything below only ever moves it,
   and only where the browser supports scroll timelines AND the reader has not
   asked for less motion. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){

    /* ================================================================
       THE ONE IDEA THIS WHOLE ELEMENT RESTS ON: A ZERO HEIGHT SCROLLPORT.

       `view-timeline-inset: 25% 75%` insets the top of the scrollport by a
       quarter of its height and the bottom by three quarters, which leaves
       the timeline measuring against a LINE at 25% of the viewport rather
       than against a box. Three things follow, and all three are what make
       the road work:

         1. A band's range is then exactly its own height in scroll, because
            the band overlaps a line from the moment its top crosses it until
            its bottom does. So the gold fills at exactly scroll speed and the
            leading edge sits at a FIXED height on the screen. Every other
            range is the wrong length: `contain` is the band's height minus a
            viewport, `cover` is its height plus one, and both make the edge
            drift against the reader.
         2. Because each piece is as tall as its band and each band's range is
            its own height, piece N finishes at the exact scroll position at
            which piece N+1 starts. The line is continuous in space and in
            time without anything being tuned.
         3. A point sits at the top of its own piece and lights at the start of
            its own band's range, which is the same instant. The sync is one
            fact, not two numbers that have to be kept equal.

       This replaced an evenly spaced scheme in which the dots were placed at
       fractions of a multi band segment. That could never put a dot beside a
       heading, because heights are not knowable when the page is generated,
       and it is why there were ten of them at arbitrary heights instead of
       six at the sections that matter.
       ================================================================ */
    /* ================================================================
       EVERY LENGTH OF ROAD IS ITS OWN TIMELINE SUBJECT.

       It used to be the BAND, and that was wrong in a way only a long scroll
       shows. A piece is as tall as its band only when the anchors either side
       of it agree; wherever they do not, `--bl-road-delta` shortens or
       lengthens it while the band's range stays the band's height. The fill
       then advances at (piece / band) of scroll speed, so the glow drifts
       against the reader. Measured on the hero: a 419px piece on a 656px band
       is 0.64, and the light slid from 237px up to the top of the screen over
       the first band. That is the "not smooth" between the h1 and the record.

       An absolutely positioned element can carry a view timeline, so each
       piece now carries its own. Its range is then its own height, which makes
       three things true at once and none of them need tuning:

         * the fill advances at exactly scroll speed, so the glow sits at a
           FIXED height on the screen, `--bl-road-line`, on every piece of
           every run whatever the anchors do;
         * piece N's range closes at the scroll position at which piece N+1's
           opens, because the pieces are contiguous by construction;
         * a mark at a piece's top lights as that range opens, and one at its
           foot as it closes, so arrival is the same event as the line getting
           there.

       ONE NUMBER SETS THE WHOLE SCHEDULE. `--bl-road-line` is where the line
       sits on the screen: the glow rides at that height, and a mark lights at
       the instant its own heading crosses it. Fabian, 30 August 2026: "The glow
       needs to reach the dot besides The record is public when the sideways
       scroll starts." Changing it moves the glow's ride height and that arrival
       together, which is correct, because they are the same fact.

       46vh SINCE 1 SEPTEMBER 2026, AND IT IS A FRACTION NOW RATHER THAN A
       DISTANCE. Fabian, on the expertise band: "the animation button happens
       not in or arround the middle of the screen. the animation has to habben
       when 'The areas of law we practise' is approaching or just before the
       middle of the screen."

       IT WAS 216px, AND A PIXEL CANNOT MEAN "THE MIDDLE". 216px is 27 per cent
       down an 800px window and 20 per cent down a 1080px one, so the marks fired
       in the top quarter and fired at a different place on every machine.
       Measured on the live page before the change: the three marks lit with
       their headings at 22, 26 and 26 per cent of the screen. After: 42, 44 and
       44 per cent, which is approaching the middle and just short of it.

       THE CONTINUITY DOES NOT DEPEND ON THE VALUE. Property 2 above, that piece
       N's range closes at the scroll position where piece N+1's opens, holds
       wherever the line is drawn, because every piece is measured against the
       same line. So moving it retimes the whole road together and cannot pull
       the pieces apart. The pinned rail is on its own `--bl-rail` timeline and
       is not affected at all. */
    .bl-road-piece,.bl-road-drop{
      view-timeline-name:--bl-road-seg;view-timeline-axis:block;
      view-timeline-inset:var(--bl-road-line,46vh)
                          calc(100% - var(--bl-road-line,46vh))}

    @keyframes bl-road-v{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    .bl-road-piece > .bl-road-run{
      animation:bl-road-v linear both;animation-timeline:--bl-road-seg;
      animation-range:cover 0% cover 100%}

    /* THE DROP FINISHES BEFORE THE PIN, NOT AT IT. Fabian, 30 August 2026:
       "it never reaches", and "ideally it reches just before the sideway
       scroll happens."

       MEASURED CAUSE. The drop's own range closed at exactly the scroll
       position the pin engages. At the instant the gold would have touched the
       mark, the pinned box began to move and took the mark with it, so the
       arrival was never on screen: it was correct to the pixel and invisible.
       Closing at 75% of the drop's range lands the light about 54px of scroll
       earlier, which is a beat of stillness with the dot lit before the row
       starts to travel. */
    /* THE DROP IS DRIVEN BY THE RAIL, NOT BY ITSELF, AND THIS IS WHY.
       It used to carry its own `--bl-road-seg` view timeline like every other
       piece. That works for a piece sitting in normal flow and does not work
       here, because the drop lives INSIDE the pinned box: a sticky element's
       position relative to the scrollport stops changing the moment it
       sticks, so its own view progress is not a usable clock. While the facts
       strip existed this was invisible, because the drop sat below the fold
       at rest and nobody saw its resting state. Suppressing the strip lifted
       the band 135px, the drop came onto the first screen, and it was drawn
       to 100 per cent at scroll 0: a lit mark at the foot of the first screen
       with no line leading to it. Measured 31 August 2026.

       IT IS NOT A RANGE THAT NEEDS RETUNING. Both ends of the mechanism fail:
       with the inherited inset the drop reads 100 per cent at every scroll
       position, and with a top-of-viewport inset it reads 0 per cent at every
       one. So the timeline moves to `--bl-rail`, which is declared on the
       rail section itself and is not inside the pin.

       `contain 0%` IS THE INSTANT THE PIN ENGAGES, which is exactly where the
       library says the gold should arrive: "the mark arrives with the drop, at
       the foot of it, which is the instant the pin engages and the row starts
       to travel". The 240px is a length rather than a percentage on purpose,
       so the approach is the same distance of scroll at every window height
       instead of a fraction that changes with the viewport. Measured filling
       0 per cent to scroll 480, then 33, 67, 92 and 100 per cent landing on
       720, which is the pin. */
    .bl-road-drop{view-timeline-name:none}
    .bl-road-drop > .bl-road-run{
      animation:bl-road-v linear both;animation-timeline:--bl-rail;
      animation-range:contain -240px contain 0px}

    /* THE HEAD RIDES THE LEADING EDGE, and `top` is a percentage rather than a
       translate because CSS cannot read an ancestor's height: a translate ran
       to its fallback distance while the gold ran to the real one and drifted
       further behind the further you scrolled. A percentage `top` resolves
       against the containing block, which is the piece. */
    @keyframes bl-road-head-v{
      0%{top:0;opacity:0} 6%{opacity:1} 94%{opacity:1} 100%{top:100%;opacity:0}}
    .bl-road-piece > .bl-road-head{
      animation:bl-road-head-v linear both;animation-timeline:--bl-road-seg;
      animation-range:cover 0% cover 100%}
    .bl-road-drop > .bl-road-head{
      animation:bl-road-head-v linear both;animation-timeline:--bl-road-seg;
      animation-range:cover 0% cover 60%}

    /* NOTHING TRAVELS BETWEEN THE RECORD AND THE AREAS. Fabian, 30 August
       2026: "when done we should scroll wothout animation till we reach 'te
       Areas ...' and then once there it shoul jump there."

       So the road has a genuine gap in it, and the gap is the point: the light
       ends at the record, holds while the reader works the row sideways, and
       then there is simply no road until the next heading, where it is struck
       again. An earlier build drew a line across that stretch and then a
       shorter, faster one; both were wrong in the same way, because any line
       at all makes the two runs one journey with a slow patch in the middle
       rather than two arrivals with quiet between them.

       The jump is the birth mark on "The areas of law we practise", which
       needs nothing added: a run's first mark is already struck rather than
       reached. */
    @keyframes bl-warble{
      0%{transform:translateX(0) scaleY(1)}
      25%{transform:translateX(1.5px) scaleY(1.18)}
      50%{transform:translateX(-1px) scaleY(.9)}
      75%{transform:translateX(1px) scaleY(1.12)}
      100%{transform:translateX(0) scaleY(1)}}
    .bl-road-head .bl-road-warble{animation:bl-warble 1.9s ease-in-out infinite}

    /* THE POINT STARTS UNLIT, AND ONLY WHERE IT CAN LIGHT.
       `animation-fill-mode: both` includes the BACKWARDS fill, which paints
       the value at time zero for the whole time before the range opens, and
       with `steps(1,jump-start)` that value is already the END of the step, so
       every point was gold before the line reached it. All three of a point's
       animations use `forwards`, which leaves the before state to ordinary
       CSS; this rule is that CSS, and it sits INSIDE the guards because a
       reader with no support should see the road finished rather than a row of
       empty circles. */
    .bl-point{background:transparent;border-color:rgba(201,168,76,.5)}
    /* A BIRTH OR A DEATH IS NOT AN UNLIT POINT WAITING. The rule above is for
       an ordinary point, which sits faint until the line reaches it. The marks
       at the two ends of a run are struck into existence instead, so they are
       gold from the outset and simply are not there yet: `bl-cap-in` carries
       them in from `opacity:0`, and its `forwards` fill leaves this rule to
       hold them invisible until their range opens. Without the explicit
       `opacity:0` they would sit gold on the page before being born. */
    .bl-point.bl-cap{background:var(--gold);border-color:var(--gold);opacity:0}
    .bl-point.bl-cap-die{background:transparent}
    /* THE MARKS' OWN KEYFRAMES.
       LOST IN AN EDIT ON 30 August 2026 AND RESTORED, and the way they were
       lost is the reason the guard in `css_sanity` now exists: an animation
       naming keyframes that are not there does not error and does not run. The
       element simply sits still. `bl-cap-in` was gone, so no birth and no death
       played anywhere on the page; `bl-implode` was gone, so neither ring
       collapsed; `bl-breathe` was gone, so nothing held. Every one of those is
       invisible in the CSS, in the markup and in a code review. */
    @keyframes bl-cap-in{
      0%{transform:scale(0);opacity:0}
      70%{transform:scale(1.5);opacity:1}
      100%{transform:scale(1);opacity:1}}
    @keyframes bl-implode{
      0%{transform:scale(4.5);opacity:0}
      35%{opacity:.9}
      100%{transform:scale(1);opacity:0}}
    /* A shadow ring rather than a transform, so it runs alongside a mark's own
       scale without the two fighting over `transform`. It is what makes a mark
       read as alive and holding rather than as one that already happened. */
    @keyframes bl-breathe{
      0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.55)}
      50%{box-shadow:0 0 0 7px rgba(201,168,76,0)}}
    @keyframes bl-way{
      from{background:transparent;border-color:rgba(201,168,76,.5)}
      to{background:var(--gold);border-color:var(--gold)}}
    @keyframes bl-punch{
      0%{transform:scale(1);background:var(--gold)}
      18%{transform:scale(2.3);background:#FFF6DF}
      42%{transform:scale(1.25);background:var(--gold-soft)}
      70%{transform:scale(1.55);background:var(--gold)}
      100%{transform:scale(1);background:var(--gold)}}
    @keyframes bl-ring{
      0%{transform:scale(.5);opacity:0} 15%{transform:scale(1);opacity:1}
      100%{transform:scale(3.4);opacity:0}}
    @keyframes bl-ring2{
      0%{transform:scale(.7);opacity:0} 35%{transform:scale(1.7);opacity:.75}
      100%{transform:scale(5);opacity:0}}
    /* THE TWO RINGS. Declared here rather than inline because a
       pseudo-element cannot carry an inline style, and given their OWN ranges
       rather than `inherit`: the point itself carries two animations, so
       `inherit` hands a pseudo-element the first of a two item list, which is
       the one percent window that flips the colour, and the ring would expand
       and vanish inside it. */
    .bl-point::after{animation:bl-ring linear forwards;
      animation-timeline:--bl-road-seg;animation-range:cover 0% cover 8%}
    .bl-point > .bl-point-ring{animation:bl-ring2 linear forwards;
      animation-timeline:--bl-road-seg;animation-range:cover 0% cover 10%}
    .bl-cap::before{animation:bl-implode linear forwards;
      animation-timeline:--bl-road-seg;animation-range:cover 0% cover 5%}
    .bl-cap::after{animation:bl-implode linear forwards;
      animation-timeline:--bl-road-seg;animation-range:cover 1% cover 7%}

    /* A MARK AT THE FOOT OF A PIECE fires as that piece's range CLOSES, so
       every one of its windows is the mirror of the head's. */
    .bl-point-end::after{animation-range:cover 92% cover 100%}
    .bl-point-end > .bl-point-ring{animation-range:cover 90% cover 100%}
    .bl-cap-die::before{animation-range:cover 95% cover 100%}
    .bl-cap-die::after{animation-range:cover 93% cover 100%}

    /* THE FIRST BIRTH RUNS ON THE CLOCK AND THEN KEEPS BREATHING, so it is
       there whether or not the reader ever scrolls. It is the one mark that
       has to introduce itself: every other is met on the way down and is lit
       by the line arriving, which is its own explanation. The breathe is a
       shadow ring rather than a transform, so it cannot fight the birth's own
       scale, and it starts once the birth has landed.

       ORDER IS LOAD BEARING: the `animation` shorthand RESETS
       `animation-timeline`, so the timeline must be declared AFTER it or the
       animation silently falls back to the document clock. */
    .bl-cap-load{animation:bl-cap-in .9s .5s cubic-bezier(.2,.8,.2,1) both,
      bl-breathe 3.2s 1.6s ease-in-out infinite;animation-timeline:auto,auto}
    .bl-cap-load::before{animation:bl-implode .9s .15s ease-in both;
      animation-timeline:auto}
    .bl-cap-load::after{animation:bl-implode .9s .35s ease-in both;
      animation-timeline:auto}
    .bl-cap-load > .bl-point-ring{animation:none}

    /* THE FOUR MARK SCHEDULES, AS CLASSES RATHER THAN INLINE STYLE.
       A mark is at the head of its piece or at its foot, and it is an ordinary
       arrival or a struck cap. That is four combinations and it has always
       been four: the ranges were never tunable per band, because a mark firing
       on its own schedule is exactly the fault the evenly spaced version had.
       They were written as an inline `style` on every mark, which the preview
       can do and an Elementor container cannot, so they are classes now. One
       source, both renderers, and the schedule is legible in the stylesheet
       instead of being assembled in a Python string. */
    .bl-mark-h,.bl-mark-f{animation:bl-way .01s steps(1,jump-start) forwards,
      bl-punch linear forwards;
      animation-timeline:--bl-road-seg,--bl-road-seg}
    .bl-mark-hc,.bl-mark-fc{animation:bl-cap-in linear forwards,
      bl-punch linear forwards;
      animation-timeline:--bl-road-seg,--bl-road-seg}
    .bl-mark-h{animation-range:cover 0% cover 1%,cover 0% cover 9%}
    .bl-mark-f{animation-range:cover 96% cover 100%,cover 88% cover 100%}
    .bl-mark-hc{animation-range:cover 0% cover 11%,cover 0% cover 20%}
    .bl-mark-fc{animation-range:cover 89% cover 100%,cover 80% cover 100%}

    /* THE RECORD'S MARK arrives with the drop, at the foot of it, which is the
       instant the pin engages and the row starts to travel. It then breathes
       on its own clock for as long as the reader is inside the band, so the
       road reads as held rather than as finished. */
    /* THE MARK MOVES TO THE RAIL'S CLOCK WITH THE DROP IT RIDES, and it has
       to: the drop no longer declares `--bl-road-seg`, so a mark still asking
       for that timeline resolves nothing, and an animation whose timeline does
       not resolve shows its `forwards` end state. The mark sat gold at rest
       either way, before and after, but for two different reasons, and only
       this one is fixable here. Its three windows keep their old proportions
       against the new schedule: the strike lands in the last thirty pixels of
       the approach, the punch straddles the arrival, and the breathe stays on
       its own clock so the mark holds while the reader works the row. */
    .bl-rail-point{animation:bl-way .01s steps(1,jump-start) forwards,
      bl-punch linear forwards,bl-breathe 2.6s ease-in-out infinite;
      animation-timeline:--bl-rail,--bl-rail,auto;
      animation-range:contain -30px contain -20px,
                      contain -70px contain 30px,normal}

    /* ------------------------------- INTO THE RAIL, AND BACK OUT OF IT
     Fabian, 30 August 2026: "the flowing animation does not reach the point
     besides 'The record is public' it should look like that the glowing part
     reaches the dot and then it pulsates while we engage with the horizontal
     scroll. and onece the horizontal scroll is completed, it shouls somehomw
     animate that the dot from 'the record is public' goes to the dote 'The
     areas of law we practise'".

     THE DROP is the last of run 1 and it lives INSIDE the pinned box, running
     from its top edge down to the heading. It fills over the band's approach,
     so the gold arrives at the dot at the instant the pin engages and the row
     starts to travel. Run 1's own bands stop at the band's top edge, which is
     where this takes over; the facts strip is given an anchor of 0 for that
     reason, having no heading of its own to hang from.

     THE LINK is the journey out. It is one element spanning from where the dot
     ends up when the pin releases down to the next heading's own mark, and it
     is its OWN view-timeline subject, which is the whole trick: an absolutely
     positioned element can carry a timeline, so the range is its own height
     and the glow crosses it at exactly scroll speed. Anchoring it to the rail
     band instead would have given it the band's 400dvh range and the light
     would have crawled.

     IT CARRIES NO TRACK. Every other piece shows a faint grey line before the
     gold reaches it; this one shows nothing at all, because it is drawn across
     the pinned box's own ground and a grey line hanging over the cards would
     read as a fault. So what the reader sees is the dot leaving the heading
     and travelling down the gutter to the next one, which is what was asked
     for, and it never crosses the text because the gutter is 34px clear of the
     column. */
  /* WHERE THE WORK BAND'S HEADING ACTUALLY SITS, at any window height.
     (It read "The record is public" when this was written and reads
     "Recent work" from 31 August 2026. The distance is a property of
     the pinned box, not of the words in it.)
     Fabian, 30 August 2026: "the glow does not reach the 'the record ...'
     section." It reached at 1440x900 and nowhere else, and it is the same
     shape of mistake as the monogram was: a distance measured once and written
     down as a constant, on a layout that moves.

     THE PINNED BOX CENTRES ITS CONTENT. `.bl-rail-stick` is 100vh with
     `justify-content:center`, so the heading's offset from its top is

         (100vh - contentHeight) / 2  +  the h2's centre within the head

     Both of those ARE constants and both were measured at two window heights
     to prove it: the stack of head, bar and track including its margins is
     675.5px, and the h2's centre sits 49px into the head. Neither moves with
     the window; only the centring does. So the anchor is

         50vh - 337.75 + 49  =  50vh - 288.75

     Checked: 161.25 at a 900px window against a measured 161, and 245.75 at
     1069 against a measured 246. The old fixed 161px left the mark 85px above
     its own heading at 1069 and the line stopped there.

     THE MARK RIDES THE DROP, at `top:100%` of it, so it cannot come adrift
     from the line's end however this number changes.

     RE-MEASURE THE 675.5 IF THE RAIL HEAD'S CONTENT CHANGES. It is the height
     of that content and nothing else; adding a line to the intro moves it. */
  .bl-road-drop{top:0;height:var(--bl-rail-anchor,calc(50vh - 288.75px));
    width:1px;
    left:max(calc((100% - 1240px) / 2 - 34px),18px);
    background:rgba(126,141,166,.34)}


  /* THE RECORD'S MARK sits at the foot of the drop, inside the pinned box, so
     it holds still beside its heading while the row travels. Anchored to the
     band instead it would scroll away the moment the pin engaged. */

  }
}


/* chipfeed */
/* 08 related -------------------------------------------------------- */
.rel{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.chip{border:1px solid var(--hairline);border-radius:2px;padding:7px 14px;
  font-size:14px;color:var(--navy);text-decoration:none;background:var(--paper)}

/* THE FUNCTIONAL VOCABULARY, ON THE CHIPS. Fabian, 31 August 2026: the plus is
   for more information in a pop-up and the arrow is for a link to another page,
   and it is "an important part of our linking of content and design".

   A CHIP CARRIED NEITHER UNTIL NOW. The blueprint says "arrow on every chip"
   and the chip had no mark at all, so the two bands that carry the firm's whole
   breadth claim gave the reader nothing to read the destination from.

   The mark is a pseudo-element, so it costs no markup and cannot be edited out
   of an Elementor panel by accident. It is drawn rather than typed: a glyph
   would inherit the body font and change shape with it. */
.chip{display:inline-flex;align-items:center;gap:8px}
/* SAID AGAIN, SCOPED, BECAUSE SOMETHING LIVE SAYS `flex`. Measured on the
   published page 31 August 2026: `.chip` computed to `display:flex`, so every
   chip stretched to the row and the expertise and industries bands came out as
   a column of wide slabs instead of a wrap of small boxes. Our stylesheet says
   `inline-flex` and nothing in it says otherwise, so the `flex` is the theme's
   or Elementor's, at equal specificity and later in the cascade. Scoping to
   `.bl-country .bl-chips` wins on specificity rather than on load order, which
   is the same move the `elem` block makes for the same reason. */
.bl-country .bl-chips .chip{display:inline-flex;width:auto;flex:0 0 auto}
.chip::after{content:"";width:9px;height:9px;flex:0 0 9px;opacity:.55;
  transition:opacity 160ms cubic-bezier(.2,.6,.3,1),
             transform 160ms cubic-bezier(.2,.6,.3,1)}
/* the arrow: a chevron, which is the site's leaving mark everywhere else */
.chip::after{border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;transform:rotate(45deg) scale(.86)}
.chip:hover::after,.chip:focus-visible::after{opacity:1;
  transform:rotate(45deg) scale(.86) translate(1px,-1px)}
/* the plus: two rules crossing, so it reads as opening rather than leaving */
.chip-plus::after{border:0;background:
  linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
  linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transform:none;width:11px;height:11px;flex-basis:11px}
.chip-plus:hover::after,.chip-plus:focus-visible::after{opacity:1;
  transform:rotate(90deg)}

/* 08 the knowledge feed ---------------------------------------------- */
/* A CHIP ROW WAS NOT ENOUGH FOR THIS BAND. Fabian, 31 August 2026: the section
   "must be nicer. this is really important. It needs to have the articles and
   it needs to have a nice text introducing it."

   A chip is a label. It tells the reader a thing exists and nothing about
   whether it is worth their time, which is the whole question a reader has
   about an article. So each piece gets its title at reading size and one line
   saying what it settles, and the band gets an introduction that says what the
   library is for.

   THE RULE IS UNCHANGED: every item is a published article, so every item
   takes an arrow. Nothing here opens a panel. */
.bl-kn{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  margin-top:var(--s5)}
.bl-kn a{display:block;text-decoration:none;color:inherit;
  padding:20px 0 18px;border-top:1px solid var(--hairline)}
.bl-kn a:first-child,.bl-kn a:nth-child(2){border-top:0;padding-top:0}
.bl-kn h3{font-size:19px;line-height:1.32;margin:0 0 7px;color:var(--navy);
  display:flex;align-items:baseline;gap:9px}
.bl-kn h3::after{content:"";width:8px;height:8px;flex:0 0 8px;opacity:.5;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:opacity 160ms cubic-bezier(.2,.6,.3,1),
             transform 160ms cubic-bezier(.2,.6,.3,1)}
.bl-kn a:hover h3,.bl-kn a:focus-visible h3{color:var(--navy-deep)}
.bl-kn a:hover h3::after,.bl-kn a:focus-visible h3::after{opacity:1;
  transform:rotate(45deg) translate(1px,-1px)}
.bl-kn p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.bl-kn .bl-kn-when{margin-top:9px;font-size:13px;color:#6B7585}
.bl-kn .bl-kn-kind{display:block;font:500 11px/1 "Jost","Futura",
  "Century Gothic",ui-sans-serif,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 9px}
@media (max-width:820px){.bl-kn{grid-template-columns:1fr}
  .bl-kn a:nth-child(2){border-top:1px solid var(--hairline);padding-top:20px}}

/* CLOSING A PANEL MUST NOT MOVE THE PAGE, and this one element is why it
   does not. Fabian, 31 August 2026: "when you press on coming up and close it
   you are at a differnt page on the website and that loos weired."

   MEASURED: open at scroll 0, close, and the page was at 532. The close
   pointed at the button that opened the panel, which is a real fragment
   navigation, and the browser scrolls a target to the TOP of the viewport. So
   closing dragged the hero off the screen and left the reader mid-page.

   `:target` HAS TO BE CLEARED BY A REAL NAVIGATION, because that is the only
   thing that clears it: `history.pushState` does not, which the component
   library already records. So the navigation stays and its scroll is removed
   instead, by pointing every close at an element that is `position:fixed` and
   therefore already inside the viewport at any scroll position. The browser
   finds it in view and has nothing to scroll. Verified 0px of movement from
   scroll 0 and from scroll 1500.

   A REAL ELEMENT AND NOT A DEAD FRAGMENT. Pointing the close at an id that
   matches nothing also clears `:target` without scrolling, and it breaks
   silently the day somebody gives an element that id.

   ONE COST, STATED. Focus lands here rather than returning to the control that
   opened the panel, which is what a modal should do. Returning it needs script
   to undo the scroll in the same task, and custom script on this site needs an
   HTML widget, which the rules forbid. A close that does not move the page is
   the better of the two while that is true. */
.bl-shut{position:fixed;top:0;left:0;width:1px;height:1px;
  pointer-events:none;opacity:0}

/* A PANEL'S ROUTES ARE CHIPS IN A WRAPPING ROW, not a bulleted list. The
   chips bring their own arrow from the rule near the top of this stylesheet,
   so nothing about the mark is written twice. */
.bl-qp-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}

/* THE PERSON'S NAME CARRIES THE ARROW, and the portrait above it does not.
   Both are the same link to the same profile, so one mark is the honest count:
   a second arrow on the picture would say there are two places to go. The name
   is the labelled half, so it is the half that gets marked. */
.bl-country .person h3 .person-link,
.bl-country .bl-person h3 .person-link{display:inline-flex;align-items:baseline;
  gap:8px}
.bl-country .person h3 .person-link::after,
.bl-country .bl-person h3 .person-link::after{content:"";width:8px;height:8px;
  flex:0 0 8px;opacity:.5;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:opacity 160ms cubic-bezier(.2,.6,.3,1),
             transform 160ms cubic-bezier(.2,.6,.3,1)}
.bl-country .person h3 .person-link:hover::after,
.bl-country .person h3 .person-link:focus-visible::after{opacity:1;
  transform:rotate(45deg) translate(1px,-1px)}

/* THE PEOPLE BAND'S CONTROLS AND ITS BUTTON PAIR.
   The controls are the rail card's, reused rather than restyled, so a reader
   who has met the pair once on the work band meets the same pair here. They
   sit in the flow at the foot of the card, not absolutely, because a person
   card has no fixed height and no index line to share. */
.bl-country .person .bl-rc-acts,
.bl-country .bl-person .bl-rc-acts{position:static;margin-top:auto;
  padding-top:14px;min-height:0}
/* AND ON THE WIDGET, WHICH IS THE ACTUAL FLEX CHILD. Live the control row sits
   inside `.elementor-widget-container`, a block, so its own `margin-top:auto`
   absorbs nothing; the widget above it is the child of the bio column and is
   what can take the slack. Without this the two cards set their controls
   wherever each biography stopped, 25px apart on the published page. */
.bl-country .bl-ppl-acts{margin-top:auto}
/* AND THE RAIL'S CONTROL WIDGET OUT OF THE POSITIONING CHAIN. Elementor gives
   a widget `position:relative`, so the widget rather than the card became the
   containing block for the absolutely positioned control row, which then sat
   mid-card across the summary text. Taking the widget back to `static` makes
   the card the containing block again, which is what the rule assumes. */
.bl-country .bl-rc-acts-w{position:static}
/* THE CONTROLS LINE UP ACROSS THE ROW, which needs three things and not one:
   the cards stretch to the tallest, the text column becomes a flex column, and
   the control row takes the slack with `margin-top:auto`. Without them the
   controls sit wherever each biography happens to stop, and two cards whose
   lines wrap differently put their marks at different heights. */
.bl-country .ppl,.bl-country .bl-ppl{align-items:stretch}
.bl-country .person > div,
.bl-country .bl-person > div{display:flex;flex-direction:column;height:100%}
/* AND IT COMES OFF AGAIN AT 767px, WHERE THE CARD IS A COLUMN.
   `> div` matches BOTH children of the card, so `height:100%` reaches the
   portrait widget as well as the bio column. Beside the text that is
   invisible, because the widget is 110px wide and the picture inside it is its
   own height. Stacked it is the whole fault: the portrait widget renders the
   card's full height, 363px against a 138px picture, and pushes the bio column
   225px down and clean out of the card. Every name, control row and button on
   the homepage then sat a card lower than it belonged. Measured on the live
   page at 500px on 1 September 2026, after Fabian reported the band on a
   phone: card y7864-y8227, its own h3 at y8247.

   THE ALIGNMENT THIS RULE EXISTS FOR IS A DESKTOP CONCERN AND ONLY A DESKTOP
   ONE. It makes two control rows meet across a row of cards. At 767px each
   card is its own row, so there is nothing to line up with and nothing is
   given away by releasing the height.

   IT MUST SIT HERE RATHER THAN IN THE PEOPLE BLOCK. Both body.elementor-page-7015s are one
   class and one class deep, so they tie on specificity and source order
   decides; written 1,400 lines earlier it loses, appears in the cascade, and
   does nothing. That is exactly how it failed the first time. */
@media (max-width:767px){
  .bl-country .person > div,.bl-country .bl-person > div{height:auto}
}
.bl-country .bl-kn-btns,
.bl-country .bl-ppl-cta{display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;margin-top:var(--s5)}

/* THE ASSOCIATIONS BAND. One box per logo, everything fitted inside it, and
   the colour held back until the reader points at one.

   TWO STRUCTURES, ONE RULE SET. In the preview `.bl-assoc-i` IS the anchor; on
   the live page it is an Elementor image widget with
   `.elementor-widget-container > a > img` inside it. So the box is set on
   `.bl-assoc-i` and then handed down through whatever layers sit under it,
   rather than assuming the image is a direct child. */
/* FIVE TO A ROW, SO TEN LOGOS ARE TWO EVEN ROWS. Left to wrap on their own the
   ten broke 4/4/2 at this width and 6/4 at the full measure, and a ragged last
   row reads as a set that ran out rather than a list. The count is fixed by
   flex-basis and the row therefore re-flows with the band instead of being
   pinned to a pixel width. The CAP IS ON THE IMAGE, not on the box: capping the
   box would leave the spacing uneven at wide viewports, whereas a wide box with
   a capped logo centred in it stays even at every size. */
.bl-assoc{--g:34px;display:flex;flex-wrap:wrap;align-items:center;
  gap:18px var(--g);margin-top:var(--s5)}
.bl-assoc .bl-assoc-i{display:flex;align-items:center;justify-content:center;
  flex:0 0 calc((100% - 4*var(--g))/5 - 0.5px);height:80px;min-width:0;
  text-decoration:none}
.bl-assoc .bl-assoc-i>div,.bl-assoc .bl-assoc-i>div>a,.bl-assoc .bl-assoc-i>a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;text-decoration:none}
/* THE SIZES ARE MADE SIMILAR BY THE BOX, NOT THE FILES. The sources run from
   200x55 to 300x300, so scaling one dimension makes the round seal tower over
   the wordmarks. Every logo is fitted inside the same box instead. */
.bl-assoc .bl-assoc-i img{max-width:min(100%,150px);max-height:56px;
  width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) opacity(.72);
  transition:filter 200ms cubic-bezier(.2,.6,.3,1)}
.bl-assoc .bl-assoc-lnk:hover img,.bl-assoc .bl-assoc-lnk:focus-within img{
  filter:grayscale(0) opacity(1)}
@media (prefers-reduced-motion:reduce){
  .bl-assoc .bl-assoc-i img{transition:none}}
/* FIVE ACROSS BECOMES 72px A LOGO ON A PHONE, which is unreadable, so the row
   count drops with the viewport rather than the logo size. */
@media (max-width:820px){
  .bl-assoc{--g:22px;gap:14px var(--g)}
  .bl-assoc .bl-assoc-i{flex:0 0 calc((100% - 2*var(--g))/3 - 0.5px);
    height:68px}}
@media (max-width:520px){
  .bl-assoc .bl-assoc-i{flex:0 0 calc((100% - var(--g))/2 - 0.5px)}}

/* THE KNOWLEDGE BENTO. A uniform row of four on top, an asymmetrical five
   below. The two are deliberately different objects: the row is evidence of
   recency and says nothing about importance, the bento is the editorial view. */
.bl-kn-top{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:var(--s5)}
.bl-kn-bento{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(104px,auto);gap:14px;margin-top:14px;
  /* NAMED AREAS, NOT COUNTED ONES. A tile whose area has no unused piece left
     drops out; with positional placement every tile after it would slide into
     the wrong size. Named, the others hold their shape. */
  grid-template-areas:"a a b" "a a c" "d e e"}
.bl-kn-t-a{grid-area:a}.bl-kn-t-b{grid-area:b}.bl-kn-t-c{grid-area:c}
.bl-kn-t-d{grid-area:d}.bl-kn-t-e{grid-area:e}

.bl-kn-card{display:flex;flex-direction:column;gap:8px;
  padding:20px 20px 16px;background:var(--paper);border:1px solid var(--hairline);
  border-radius:3px;text-decoration:none;color:var(--body);
  transition:border-color 180ms cubic-bezier(.2,.6,.3,1),
             transform 180ms cubic-bezier(.2,.6,.3,1)}
.bl-kn-card:hover,.bl-kn-card:focus-visible{border-color:var(--gold);
  transform:translateY(-2px)}
.bl-kn-card h3{margin:0;font-family:var(--display);font-weight:600;
  font-size:16px;line-height:1.32;color:var(--navy);letter-spacing:-.005em}
/* THE BIG TILE CENTRES ITS CONTENT. Its article's excerpt is one sentence, so
   pinning the text to the top and the date to the floor left a void through the
   middle of the largest object in the band. Centred, the same space reads as
   the tile being generous rather than as content having failed to arrive. It is
   the only tile that does this, because it is the only one tall enough to. */
.bl-kn-bento .bl-kn-t-a{justify-content:center}
.bl-kn-bento .bl-kn-t-a .bl-kn-foot{margin-top:18px}
.bl-kn-t-a h3{font-size:22px;line-height:1.24}
.bl-kn-t-e h3{font-size:18px;line-height:1.28}
.bl-kn-card .bl-kn-kind{font-size:13px;line-height:1.4}
.bl-kn-card .bl-kn-line{margin:0;font-size:14px;line-height:1.6;
  color:var(--body)}
/* THE FOOT IS PUSHED DOWN so the date and arrow sit on the tile's floor
   whatever the title's length, which is what stops a grid of unequal titles
   reading as a grid of unequal cards. */
.bl-kn-card .bl-kn-foot{margin-top:auto;padding-top:10px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.bl-kn-card .bl-kn-when{font-size:12px;color:var(--muted);
  letter-spacing:.01em}
.bl-kn-card .bl-kn-arw{width:9px;height:9px;flex:0 0 9px;
  color:var(--gold-text);opacity:.85;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform 180ms cubic-bezier(.2,.6,.3,1),
             opacity 180ms cubic-bezier(.2,.6,.3,1)}
.bl-kn-card:hover .bl-kn-arw,.bl-kn-card:focus-visible .bl-kn-arw{opacity:1;
  transform:rotate(45deg) translate(1.5px,-1.5px)}
@media (prefers-reduced-motion:reduce){
  .bl-kn-card,.bl-kn-card .bl-kn-arw{transition:none}
  .bl-kn-card:hover{transform:none}
  .bl-kn-card:hover .bl-kn-arw{transform:rotate(45deg)}}

@media (max-width:1000px){
  .bl-kn-top{grid-template-columns:repeat(2,1fr)}
  /* THE LARGE TILE STAYS LARGE. Collapsing the bento to a plain two-column
     grid would throw away the arrangement and leave five identical boxes,
     which is the list the bento exists not to be. */
  .bl-kn-bento{grid-template-columns:repeat(2,1fr);
    grid-template-areas:"a a" "b c" "d e"}}
@media (max-width:620px){
  .bl-kn-top,.bl-kn-bento{grid-template-columns:1fr}
  .bl-kn-bento{grid-template-areas:"a" "b" "c" "d" "e"}
  .bl-kn-t-a h3{font-size:19px}}

/* THE PLUS ON A HERO BUTTON, and the list it opens.
   The hero's first button is the one place on the page where a plus sits on a
   solid control rather than beside a line of text, so the mark is drawn to the
   button's own scale and inherits its colour. */
.bl-btn-plus{display:inline-flex;align-items:center;gap:10px}
.bl-btn-plus .elementor-button{display:inline-flex;align-items:center;gap:10px}
a.bl-btn-plus::after,
.bl-btn-plus .elementor-button::after{content:"";width:11px;height:11px;
  flex:0 0 11px;
  background:linear-gradient(currentColor,currentColor)
             center/100% 1.5px no-repeat,
             linear-gradient(currentColor,currentColor)
             center/1.5px 100% no-repeat;
  transition:transform 160ms cubic-bezier(.2,.6,.3,1)}
a.bl-btn-plus:hover::after,a.bl-btn-plus:focus-visible::after,
.bl-btn-plus:hover .elementor-button::after,
.bl-btn-plus:focus-within .elementor-button::after{
  transform:rotate(90deg)}

.bl-ev{list-style:none;margin:4px 0 0;padding:0}
.bl-ev li{padding:18px 0;border-top:1px solid var(--hairline)}
.bl-ev li:first-child{border-top:0;padding-top:4px}
.bl-ev .bl-ev-when{margin:0 0 6px;font:500 11.5px/1 "Jost","Futura",
  "Century Gothic",ui-sans-serif,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-text);
  display:flex;gap:10px;align-items:baseline}
.bl-ev .bl-ev-where{color:#8A93A3;letter-spacing:.09em}
.bl-ev .bl-ev-title{margin:0 0 6px;font-size:17px;line-height:1.34;
  color:var(--navy);font-weight:600}
.bl-ev .bl-ev-go{margin:12px 0 0}
.bl-ev p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}

/* THE ARGUMENT BAND, and it is the only band on the page that argues.
   Everything else shows something. So it is allowed a shape of its own: a
   number, a claim in one line, and a way into the reasoning. Two columns, not
   four, because four across turns each pillar into a caption. */
.bl-country .jud{display:grid;grid-template-columns:1fr 1fr;
  gap:0 var(--s6)}
/* THE LEFT PADDING IS THE GOLD LINE'S BREATHING ROOM, and the shorthand
   above took it away. `.jud>div` gives every pillar `padding-left:16px` and a
   transparent 2px left border that warms to gold on hover; writing
   `padding:26px 0 24px` here overrode the left value to zero, so the line
   arrived 2px from the text. Fabian: "the godlen line when hovering is too
   close to the text."

   22px rather than the old 16. The pillars are wider than they were and the
   line now runs beside a number as well as a heading, so it needs more room to
   read as an edge rather than as an underline that has fallen over. */
.bl-country .bl-jud-i{padding:26px 0 24px 22px;
  border-top:1px solid var(--hairline);
  border-left:2px solid transparent;
  transition:border-color 200ms cubic-bezier(.2,.6,.3,1);
  display:flex;flex-direction:column;align-items:flex-start}
/* THE GOLD LINE IS CARRIED HERE, NOT BY `.jud>div`, and that is not tidiness.
   The `.jud>div` pair sits outside every emittable CSS block, so it reaches
   the preview and no live page: the border and its hover have never existed on
   the site. Only the padding was ever real there, and the padding was the half
   that made the line look wrong. Written against the class both renderers emit
   so the effect exists in both. */
.bl-country .bl-jud-i:hover{border-left-color:var(--gold)}
.bl-country .bl-jud-i:nth-child(1),.bl-country .bl-jud-i:nth-child(2){
  border-top:0;padding-top:0}
.bl-country .bl-jud-n{margin:0 0 10px;
  font:500 12px/1 "Jost","Futura","Century Gothic",ui-sans-serif,sans-serif;
  letter-spacing:.16em;color:var(--gold-text)}
.bl-country .bl-jud-i h3{margin:0 0 8px;font-size:20px;line-height:1.3;
  color:var(--navy)}
.bl-country .bl-jud-i p{margin:0;font-size:16px;line-height:1.62;
  color:var(--body);max-width:34rem}
/* the way in, quiet, and it reads as a control rather than as a link */
.bl-country .bl-jud-more{margin-top:16px;display:inline-flex;align-items:center;
  gap:9px;text-decoration:none;color:var(--navy);
  font:600 14px/1 "Jost","Futura","Century Gothic",ui-sans-serif,sans-serif}
.bl-country .bl-jud-more::after{content:"";width:11px;height:11px;flex:0 0 11px;
  background:linear-gradient(currentColor,currentColor)
             center/100% 1.5px no-repeat,
             linear-gradient(currentColor,currentColor)
             center/1.5px 100% no-repeat;
  transition:transform 160ms cubic-bezier(.2,.6,.3,1)}
.bl-country .bl-jud-more:hover::after,
.bl-country .bl-jud-more:focus-visible::after{transform:rotate(90deg)}
@media (max-width:820px){.bl-country .jud{grid-template-columns:1fr}
  .bl-country .bl-jud-i:nth-child(2){border-top:1px solid var(--hairline);
    padding-top:26px}}
/* per page: no facts ribbon, so the hero carries the pair alone */
.bl-country,.bl-country.bl-band{--bl-facts-h:0px}

/* per page: the road's anchors */
.bl-anch-176{--bl-road-anchor:176px}
.bl-anch-237{--bl-road-anchor:237px}

/* per page: the rail's icons, by subject */
.bl-country .bl-rail-card.bl-mk-building .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14L16 5l12 9'/%3E%3Cpath d='M7 14v14h18V14'/%3E%3Crect x='13' y='19' width='6' height='9'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card.bl-mk-crossing .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h16'/%3E%3Cpath d='M15 8l4 4-4 4'/%3E%3Cpath d='M29 20H13'/%3E%3Cpath d='M17 24l-4-4 4-4'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card.bl-mk-transfer .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='14' height='12' rx='1'/%3E%3Cpath d='M3 15h14'/%3E%3Cpath d='M21 17h8'/%3E%3Cpath d='M26 14l3 3-3 3'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card.bl-mk-people .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='4'/%3E%3Cpath d='M4 27a7 7 0 0 1 14 0'/%3E%3Ccircle cx='23' cy='13' r='3'/%3E%3Cpath d='M18 27a5 5 0 0 1 10 0'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card.bl-mk-entities .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='4'/%3E%3Ccircle cx='24' cy='16' r='4'/%3E%3Cpath d='M12 16h8'/%3E%3C/svg%3E")}
.bl-country .bl-rail-card.bl-mk-documents .bl-rail-sector::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231A3668' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='16' height='16' rx='2'/%3E%3Crect x='13' y='8' width='16' height='16' rx='2'/%3E%3C/svg%3E")}
.bl-assoc .bl-assoc-m514 img{max-width:min(114.1px,100%);max-height:48.3px}
.bl-assoc .bl-assoc-m513 img{max-width:min(113.6px,100%);max-height:48.5px}
.bl-assoc .bl-assoc-m4788 img{max-width:min(74.2px,100%);max-height:74.2px}
.bl-assoc .bl-assoc-m1322 img{max-width:min(126.1px,100%);max-height:43.7px}
.bl-assoc .bl-assoc-m151 img{max-width:min(157.1px,100%);max-height:35.1px}
.bl-assoc .bl-assoc-m5119 img{max-width:min(76.8px,100%);max-height:71.7px}
.bl-assoc .bl-assoc-m1354 img{max-width:min(164.6px,100%);max-height:33.5px}
.bl-assoc .bl-assoc-m2194 img{max-width:min(157.1px,100%);max-height:35.1px}
.bl-assoc .bl-assoc-m2193 img{max-width:min(141.6px,100%);max-height:38.9px}
.bl-assoc .bl-assoc-m1330 img{max-width:min(96.1px,100%);max-height:57.3px}

/* per page: how the hero picture is framed */
.bl-country .bl-pos-media img{left:auto;right:0;width:52%}
@media (max-width:1100px){.bl-country .bl-pos-media img{left:0;right:auto;width:100%}}

/* == BL HEADER v2 : begin, apply_header_v2.py == */
.bl-hdr{--bl-hdr-h:56px}
.bl-hdr{-webkit-backdrop-filter:saturate(1.8) blur(20px);
  backdrop-filter:saturate(1.8) blur(20px);box-shadow:none;border-bottom:0}
/* Without the blur the material must carry itself, or text scrolls through it. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bl-hdr{background:rgba(255,255,255,.97)!important}
}
.bl-hdr-row{max-width:1240px;width:100%;margin-inline:auto;height:100%;
  padding:0 28px!important;display:flex;align-items:stretch;gap:24px}
/* Elementor sets a cell's width through the --width custom property as well as
   width, so both have to go, exactly as the bento filter needed. */
.bl-hdr-logo,.bl-hdr-nav,.bl-hdr-act{width:auto!important;--width:auto!important;
  display:flex;align-items:center}
.bl-hdr-logo{flex:0 0 auto;justify-content:flex-start!important;gap:11px}
.bl-hdr-nav{flex:1 1 auto;justify-content:center!important}
.bl-hdr-act{flex:0 0 auto;justify-content:flex-end!important}

/* THE WORDMARK. A div, not a heading: the page must keep exactly one h1 and no
   level skips, and the standing audit checks it. */
.bl-wm,.bl-wm a,.bl-wm .elementor-heading-title{font-family:Jost,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#1A3668;text-decoration:none;line-height:1;white-space:nowrap;margin:0}
.bl-wm a:hover{color:#0F2246}

/* FULL-BAR HIT AREAS. Apple's links are the full height of the bar, which is
   why 44px never feels fiddly.
   NO UNDERLINE AND NO CURRENT-PAGE RULE. Both were mine and Fabian rejected
   both on sight, 23 August 2026: the gold rule on hover and the colour change
   on the current item. The nav is therefore plain, and the panel below does the
   work of telling the reader something is happening. */
.bl-hdr .elementor-nav-menu>li>a.elementor-item{height:var(--bl-hdr-h);
  display:flex;align-items:center;padding:0 14px!important;position:relative}

/* THE PANEL, and it only exists while the item is open.
   FIRST VERSION SET `display:flex` UNCONDITIONALLY AND THAT SHIPPED TO A LIVE
   PAGE: Elementor hides a dropdown with display:none and reveals it on hover,
   so overriding display in the base rule pinned the panel permanently open in
   the corner of /knowledge/. Caught by measuring the DOM rather than reading
   the screenshot, which showed a box that looked like a mispositioned panel
   rather than an always-open one. Everything about the panel therefore lives in
   the open-state rule, and the closed state is left entirely to Elementor.

   THE SELECTOR IS DELIBERATELY LONG. At three classes it LOST: `left` and
   `width` resolved to Elementor's own dropdown values while `background`, `top`
   and `padding` from the same block applied. Elementor's competing rule has
   EQUAL specificity and is also !important, and a page's custom CSS is printed
   BEFORE Elementor's widget stylesheets, so cascade order decided it. Proved by
   injecting the identical rule last, where it won.
   Corollary worth keeping: a scan of document.styleSheets for that competing
   rule reported ZERO, because 3 of the 93 sheets on this page throw on
   .cssRules and the loop skipped them in silence. A scan that cannot read
   everything must count what it skipped, or its zero reads as proof.

   `width:auto` is not optional. With left, right and width all set the box is
   over-constrained and the browser drops `right`, which is how the panel came
   back 156px wide with left:0 correctly applied.

   `top` is measured from the HEADER, not the viewport: backdrop-filter makes an
   element the containing block for its fixed descendants, so var(--bl-hdr-h)
   lands the panel flush under the bar whether or not the admin bar has pushed
   the header down 32px. No 100vw either: left and right do the width, and 100vw
   includes the scrollbar, which is how a fixed full-width band gives a page a
   horizontal scroll. */
.bl-hdr .bl-hdr-nav .elementor-nav-menu>li.menu-item-has-children:hover>ul.sub-menu.elementor-nav-menu--dropdown,
.bl-hdr .bl-hdr-nav .elementor-nav-menu>li.menu-item-has-children:focus-within>ul.sub-menu.elementor-nav-menu--dropdown{
  display:flex!important;position:fixed!important;top:var(--bl-hdr-h)!important;
  left:0!important;right:0!important;width:auto!important;
  min-width:0!important;max-width:none!important;
  background:rgba(244,246,249,.94)!important;
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  backdrop-filter:saturate(1.8) blur(20px);
  border:0!important;border-top:1px solid rgba(26,54,104,.10)!important;
  box-shadow:none!important;justify-content:center;gap:8px;
  padding:22px 28px!important;margin:0!important}
.bl-hdr .bl-hdr-nav .elementor-nav-menu ul.sub-menu.elementor-nav-menu--dropdown>li{list-style:none;width:auto}
.bl-hdr .bl-hdr-nav .elementor-nav-menu ul.sub-menu.elementor-nav-menu--dropdown>li>a.elementor-sub-item{
  font-family:Jost,sans-serif!important;font-size:13.5px!important;
  letter-spacing:-.01em;color:#1B2434!important;padding:9px 16px!important;
  border-radius:4px;transition:background-color 160ms cubic-bezier(.2,.6,.3,1)}
.bl-hdr .bl-hdr-nav .elementor-nav-menu ul.sub-menu.elementor-nav-menu--dropdown>li>a.elementor-sub-item:hover{
  background:rgba(26,54,104,.06)!important}

/* THE CURTAIN. The page recedes behind glass while the panel is open, and no
   script: :has() does it.
   IT CANNOT LIVE ON THE HEADER. First attempt was `.bl-hdr::after` with
   top:56px and bottom:0, and it rendered ZERO PIXELS HIGH. backdrop-filter makes
   the header the containing block for its own fixed descendants, so bottom:0
   resolved against a 56px box rather than the viewport. It hangs off body
   instead, which has no filter, and covers the whole viewport at z-index 9: the
   header is z-index 10 and paints over it, so no offset arithmetic is needed and
   the logged-in admin bar cannot shift it. */
/* display:block is NOT redundant. Something on this site already styles
   `body::after` and sets it to display:none, so the curtain computed as fixed,
   inset 0, z-index 9, opacity 1 and visible, and painted NOTHING. A probe that
   forced 55% red at z-index 99999 still showed no pixels, which is what sent me
   to read `display` at all. Read every box-generating property before believing
   a computed style, not just the ones you set. */
body::after{content:"";display:block!important;position:fixed;inset:0;
  background:rgba(27,36,52,.16);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;pointer-events:none;z-index:9;
  transition:opacity .32s cubic-bezier(.4,0,.6,1) .08s,
             visibility .32s steps(1) .08s}
/* NO @supports GUARD HERE, AND THAT IS DELIBERATE. Wrapping this in
   `@supports body.elementor-page-7015(:has(*))` is what a guard should look like, and on this
   delivery route it silently destroys the rule: Elementor scopes a page's
   custom CSS by prefixing body.elementor-page-7015s with `body.elementor-page-<id>`, and its
   rewriter treats the bare word `body.elementor-page-7015` inside the at-rule condition as a
   body.elementor-page-7015, so the file shipped `@supports body.elementor-page-6869(:has(*))`.
   That condition is invalid, so the browser dropped the whole block and the
   curtain never appeared, while every unwrapped rule in the same file applied.
   Found by fetching post-6869.css and reading it, after an in-page scan of
   <style> tags found nothing because the block lives in a file.
   `@supports not (...)` in the same file survived untouched, so the fault is
   specific to the `body.elementor-page-7015()` function.
   No guard is needed anyway: a browser that does not understand :has() treats
   the whole rule as invalid and ignores it, which is exactly the fallback the
   guard was for. */
body:has(.bl-hdr .menu-item-has-children:hover)::after,
body:has(.bl-hdr .menu-item-has-children:focus-within)::after{
  opacity:1!important;visibility:visible!important}

/* CONTACT, as the ghost variant of the site's own button system. */
.bl-hdr .bl-btn .elementor-button{font-family:Jost,sans-serif;font-size:13px;
  font-weight:500;letter-spacing:-.01em;background:transparent;color:#1B2434;
  border:0;padding:9px 14px;border-radius:4px;
  transition:box-shadow 160ms cubic-bezier(.2,.6,.3,1),
             color 160ms cubic-bezier(.2,.6,.3,1)}
.bl-hdr .bl-btn-ghost .elementor-button:hover,
.bl-hdr .bl-btn-ghost .elementor-button:focus-visible{color:#1A3668;
  box-shadow:inset 0 -2px 0 #C9A84C}

/* THE BOUNDARY IS 1024, NOT 767. Containers stack at 767 on this site, but the
   nav-menu widget carries `elementor-nav-menu--dropdown-tablet`, so the burger
   appears at the TABLET breakpoint. With the block at 767 a 900px viewport got
   the desktop rail with a burger in it: the burger sat centred at x=405 and
   measured 33px, under the 44px minimum. The mega panel is disabled at the same
   width, so the two agree. */
@media(max-width:1024px){
  .bl-hdr{--bl-hdr-h:64px;height:64px!important}
  .bl-hdr-row{padding:0 20px!important;gap:12px;flex-direction:row!important}
  .bl-hdr-logo{flex:1 1 auto}
  .bl-hdr-nav{flex:0 0 auto;justify-content:flex-end!important}
  .bl-hdr .bl-hdr-nav .elementor-nav-menu>li.menu-item-has-children:hover>ul.sub-menu.elementor-nav-menu--dropdown,
  .bl-hdr .bl-hdr-nav .elementor-nav-menu>li.menu-item-has-children:focus-within>ul.sub-menu.elementor-nav-menu--dropdown{
    position:static!important;width:auto!important;display:block!important;
    padding:0!important;background:transparent!important;border-top:0!important;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  body::after{display:none!important}
  .bl-hdr .elementor-menu-toggle{min-width:44px;min-height:44px}
  /* The Contact button gets the same tap target as the burger beside it.
     Measured on the phone once it was revealed: 70x31px against the burger's
     44x44, which is under the 44px guideline and looked slight next to it. */
  .bl-hdr-act .bl-btn .elementor-button{min-height:44px;display:inline-flex;
    align-items:center}
}
/* THE CONTACT BUTTON IS NOT HIDDEN ON A PHONE. It used to be, by
   `@media(max-width:520px){.bl-hdr-act{display:none!important}}`, so on every
   phone the header carried a logo and a burger and nothing else. Fabian,
   24 August 2026: the Contact button is arguably the most important button on
   the site.

   There was never a space reason for it. Measured at 390px: the row has 350px of
   inner width and needs 164px, being a 26px logo image, a 70px Contact button
   and a 44px burger with two 12px gaps. 186px spare. Below 380px the button
   tightens rather than disappearing. */
@media(max-width:380px){
  .bl-hdr-act .bl-btn .elementor-button{padding:8px 11px!important;
    font-size:12px!important}
  .bl-hdr-row{gap:8px!important}
}
@media(prefers-reduced-motion:reduce){
  body::after,.bl-hdr .elementor-nav-menu>li>a.elementor-item::after,
  .bl-hdr .bl-btn .elementor-button{transition:none!important}
}
/* == BL HEADER v2 : end == */

/* == BL MEGA PANELS : begin, apply_mega_panel.py == */
/* Hidden by default. Each panel is revealed by :has() on its own menu item's id
   class, and held open by its own :hover once the pointer leaves the bar. */
/* NOT display:none. A display:none panel never fetches its photographs, because
   Elementor marks them loading="lazy", so the first hover showed the layout with
   three empty boxes and decoded the images afterwards. Measured: naturalWidth 0
   on every image while the boxes were already 277x136. Hidden by visibility and
   opacity instead, the images load with the page and the panel gets a real
   entrance for free. pointer-events:none is not optional, or five invisible
   full-width panels sit over the page swallowing clicks. */
.bl-hdr .bl-mega{opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .22s cubic-bezier(.2,.6,.3,1),
             visibility .22s steps(1)!important;
  position:fixed!important;
  top:var(--bl-hdr-h)!important;left:0!important;right:0!important;
  width:auto!important;max-width:none!important;
  /* Nearly opaque, not translucent: the panels carry text and photographs, and
     at .96 the navy hero behind ghosted through the copy. */
  background:rgba(244,246,249,.985)!important;
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  backdrop-filter:saturate(1.8) blur(20px);
  border-top:1px solid rgba(26,54,104,.10)!important;
  box-shadow:0 18px 40px rgba(26,54,104,.10)!important;
  padding:34px 28px 38px!important;margin:0!important;z-index:1}
.bl-hdr:has(.menu-item-6612:hover) .bl-mega-expertise,
.bl-hdr .bl-mega-expertise:hover{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body:has(.bl-hdr .menu-item-6612:hover)::after,
body:has(.bl-hdr .bl-mega-expertise:hover)::after{opacity:1!important;visibility:visible!important}
.bl-hdr:has(.menu-item-6658:hover) .bl-mega-industries,
.bl-hdr .bl-mega-industries:hover{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body:has(.bl-hdr .menu-item-6658:hover)::after,
body:has(.bl-hdr .bl-mega-industries:hover)::after{opacity:1!important;visibility:visible!important}
.bl-hdr:has(.menu-item-6781:hover) .bl-mega-careers,
.bl-hdr .bl-mega-careers:hover{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body:has(.bl-hdr .menu-item-6781:hover)::after,
body:has(.bl-hdr .bl-mega-careers:hover)::after{opacity:1!important;visibility:visible!important}
.bl-hdr:has(.menu-item-6873:hover) .bl-mega-knowledge,
.bl-hdr .bl-mega-knowledge:hover{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body:has(.bl-hdr .menu-item-6873:hover)::after,
body:has(.bl-hdr .bl-mega-knowledge:hover)::after{opacity:1!important;visibility:visible!important}
.bl-hdr:has(.menu-item-1929:hover) .bl-mega-international,
.bl-hdr .bl-mega-international:hover{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body:has(.bl-hdr .menu-item-1929:hover)::after,
body:has(.bl-hdr .bl-mega-international:hover)::after{opacity:1!important;visibility:visible!important}

/* International Service still has a real WordPress sub-menu. The panel replaces
   it here rather than deleting it from the menu, which stays correct for any
   page not carrying this header. */
/* EIGHT CLASSES, because the header block's own open-state rule for this
   sub-menu carries seven and !important. At the shorter body.elementor-page-7015 the old list
   drew straight through the panel: "Singapore Germany Vietnam" sat over the
   cards and pushed the aside's first link out of the top of the box. */
.bl-hdr .bl-hdr-nav .elementor-nav-menu>li.menu-item-1929.menu-item-has-children:hover>ul.sub-menu.elementor-nav-menu--dropdown,
.bl-hdr .bl-hdr-nav .elementor-nav-menu>li.menu-item-1929.menu-item-has-children:focus-within>ul.sub-menu.elementor-nav-menu--dropdown,
.bl-hdr .bl-hdr-nav .elementor-nav-menu>li.menu-item-1929>ul.sub-menu{
  display:none!important}

/* EVERY LAYOUT RULE BELOW IS OVER-SPECIFIED AND !important. A page's custom CSS
   is printed BEFORE Elementor's widget stylesheets, so at equal specificity ours
   loses on cascade order alone: the first build came out 1267px tall with the
   cards stacked and the photographs at three different widths. */
.bl-hdr .bl-mega .bl-mega-rail{max-width:1240px!important;margin-inline:auto!important;
  display:flex!important;flex-direction:row!important;
  align-items:flex-start!important;gap:44px!important;width:100%!important}
.bl-hdr .bl-mega .bl-mega-cards{display:flex!important;flex-direction:row!important;
  gap:26px!important;flex:1 1 auto!important;width:auto!important;
  --width:auto!important;align-items:stretch!important}
/* A card is one third of the cards area whatever the panel holds, so every card
   on the site is the same size, and a row with fewer than three is left aligned
   rather than stretched. The single featured item on Knowledge is the exception
   and is deliberately wider, so it reads as a feature rather than an orphan. */
.bl-hdr .bl-mega .bl-mega-cards{justify-content:flex-start!important}
.bl-hdr .bl-mega .bl-mega-card{flex:0 0 calc((100% - 52px)/3)!important;
  width:auto!important;--width:auto!important;min-width:0!important;
  display:block!important;padding:0!important}
.bl-hdr .bl-mega .bl-mega-n1 .bl-mega-card{flex:0 0 46%!important}
/* The WHOLE chain, not just the img: `link_to: custom` wraps it in an
   inline-block anchor, so width:100% on the img would resolve against a parent
   sized BY the img. */
.bl-hdr .bl-mega .bl-mega-card .elementor-widget-image,
.bl-hdr .bl-mega .bl-mega-card .elementor-widget-image .elementor-widget-container,
.bl-hdr .bl-mega .bl-mega-card .elementor-widget-image a{display:block!important;
  width:100%!important;max-width:none!important;line-height:0!important}
.bl-hdr .bl-mega .bl-mega-card .elementor-widget-image img{width:100%!important;
  height:136px!important;object-fit:cover!important;display:block!important;
  border-radius:4px!important;max-width:none!important}
/* The image-less card: a tinted block the same height, so a card with no
   licensed picture reads as deliberate rather than broken. */
.bl-hdr .bl-mega .bl-mega-noshot{height:136px!important;border-radius:4px!important;
  background:linear-gradient(135deg,rgba(26,54,104,.16),
    rgba(201,168,76,.24))!important;
  border:1px solid rgba(26,54,104,.10)!important}
.bl-hdr .bl-mega .bl-mega-noshot p{display:none!important}
.bl-hdr .bl-mega .bl-mega-name,.bl-hdr .bl-mega .bl-mega-name .elementor-heading-title{
  font-family:Jost,sans-serif!important;font-size:15px!important;
  font-weight:600!important;letter-spacing:.01em;color:#1A3668!important;
  line-height:1.3!important;margin:14px 0 0!important}
.bl-hdr .bl-mega .bl-mega-line,.bl-hdr .bl-mega .bl-mega-line p{
  font-family:Inter,sans-serif!important;font-size:13.5px!important;
  line-height:1.55!important;color:#656F7E!important;margin:8px 0 0!important}
.bl-hdr .bl-mega .bl-mega-read{margin-top:12px!important}
.bl-hdr .bl-mega .bl-mega-read p{margin:0!important}
.bl-hdr .bl-mega .bl-mega-read a{font-family:Jost,sans-serif!important;
  font-size:13px!important;font-weight:500!important;color:#1A3668!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(26,54,104,.28);padding-bottom:2px;
  transition:border-color 160ms cubic-bezier(.2,.6,.3,1)}
.bl-hdr .bl-mega .bl-mega-read a:hover{border-bottom-color:#C9A84C}

.bl-hdr .bl-mega .bl-mega-aside{flex:0 0 274px!important;width:274px!important;
  --width:274px!important;display:block!important;
  border-left:1px solid rgba(26,54,104,.12)!important;
  padding:0 0 0 36px!important}
.bl-hdr .bl-mega .bl-mega-eyebrow,.bl-hdr .bl-mega .bl-mega-eyebrow .elementor-heading-title{
  font-family:Jost,sans-serif!important;font-size:11.5px!important;
  font-weight:600!important;letter-spacing:.14em;text-transform:uppercase;
  color:#656F7E!important;margin:0!important}
.bl-hdr .bl-mega .bl-mega-list{margin-top:10px!important}
.bl-hdr .bl-mega .bl-mega-list p{margin:0!important}
.bl-hdr .bl-mega .bl-mega-list a{display:block!important;
  font-family:Inter,sans-serif!important;font-size:13.5px!important;
  line-height:1.5!important;color:#1B2434!important;
  text-decoration:none!important;padding:8px 0!important;
  border-bottom:1px solid rgba(26,54,104,.08);
  transition:color 160ms cubic-bezier(.2,.6,.3,1)}
.bl-hdr .bl-mega .bl-mega-list a:hover{color:#1A3668!important}
.bl-hdr .bl-mega .bl-mega-cta{margin-top:18px!important}
.bl-hdr .bl-mega .bl-mega-cta .elementor-button{font-family:Jost,sans-serif!important;
  font-size:13px!important;font-weight:500!important;
  background:#1A3668!important;color:#fff!important;border:0!important;
  border-radius:4px!important;padding:11px 18px!important;
  transition:box-shadow 160ms cubic-bezier(.2,.6,.3,1)}
.bl-hdr .bl-mega .bl-mega-cta .elementor-button:hover{box-shadow:inset 0 -2px 0 #C9A84C}

/* A panel this size is a desktop affordance, and 1024 is where the nav becomes
   a burger, so both stop at the same width. */
@media(max-width:1024px){.bl-hdr .bl-mega{display:none!important}}
/* Reduced motion keeps the panel and drops the fade. */
@media(prefers-reduced-motion:reduce){.bl-hdr .bl-mega{transition:none!important}}
@media(prefers-reduced-motion:reduce){
  .bl-hdr .bl-mega a,.bl-hdr .bl-mega .elementor-button{transition:none!important}
}
/* == BL MEGA PANELS : end == */

/* --- bl-ft generated footer, 24 August 2026 --- */
/* The footer. Scoped to bl-ft- so nothing here reaches a page band.

   References, taken for mechanics: stripe.com (84 links, no icons, hierarchy by
   weight and colour rather than size, and unequal column lengths left alone),
   pentagram.com (hairline rules between groups, one horizontal utility row).

   ONE GRID FOR BOTH ROWS. This is the whole point of this revision. The links
   were a four-column flex row and the offices were a separate flex row with a
   200px mark column, so the two grids shared no edges and the footer looked
   misaligned because it WAS misaligned. Both rows are now the same four-track
   CSS grid, so every column edge in the base row falls under a column edge in
   the link row. Grid also removes the calc-width-with-!important scaffolding the
   flex version needed, which is what broke the phone layout twice. */
.bl-ft-cols,.bl-ft-base-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:40px;
  align-items:start}

/* THE EDGE. A gold hairline, and a ground darker than any band above it. */
.bl-ft-links{border-top:2px solid #C9A84C}

/* Links. 14px against an 11px heading, so the links read first, and no icons at
   all: the footer this replaces put a chevron on every one of 36 items. */
.bl-ft-list .elementor-icon-list-icon{display:none}
.bl-ft-list .elementor-icon-list-item{padding-block:0}
.bl-ft-list .elementor-icon-list-item a{text-decoration:none}
.bl-ft-list .elementor-icon-list-item .elementor-icon-list-text{
  transition:color 160ms}

/* The base row. The mark holds the first grid cell, top-aligned with the three
   office names beside it, at a size that sits inside the column rather than
   filling it. */
.bl-ft-base{border-top:1px solid rgba(255,255,255,0.09)}
.bl-ft-logo img{width:76px;height:auto;display:block}
.bl-ft-addr .elementor-icon-list-icon{display:none}
.bl-ft-addr .elementor-icon-list-item{padding-block:0}
.bl-ft-tel .elementor-icon-list-item{padding-block:6px 0}
.bl-ft-tel a{text-decoration:none}

/* The legal bar. One slim row: small print left, LinkedIn right, on a hairline. */
.bl-ft-bar{border-top:1px solid rgba(255,255,255,0.09);margin-top:40px;
  padding-top:20px;align-items:flex-start;justify-content:space-between}
.bl-ft-legal{flex:1 1 auto}
.bl-ft-legal p{margin:0 0 3px}
.bl-ft-legal .bl-ft-legal-links a{color:#C7D3E6;text-decoration:none;
  margin-right:20px}
.bl-ft-legal .bl-ft-legal-links a:hover{color:#C9A84C}
.bl-ft-social{flex:0 0 auto}
.bl-ft-social .elementor-icon-list-icon{display:inline-flex}
.bl-ft-social a{text-decoration:none}
.bl-ft-social .elementor-icon-list-item:hover .elementor-icon-list-text{
  color:#C9A84C}

/* Two tracks from 768 to 1000, one below it. The grid needs no width forcing at
   any breakpoint, which is the other reason for using it: the flex version
   needed calc widths with !important, and unscoped they gave 39px columns at
   390px and destroyed the footer on a phone. */
@media(max-width:1000px){
  .bl-ft-cols,.bl-ft-base-row{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px}
}
@media(max-width:767px){
  .bl-ft-cols,.bl-ft-base-row{grid-template-columns:minmax(0,1fr);gap:36px}
  .bl-ft-bar{flex-wrap:wrap;gap:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* --- end bl-ft generated footer --- *//* End custom CSS */