.elementor-kit-6{--e-global-color-primary:#017580;--e-global-color-secondary:#06333A;--e-global-color-text:#3D5A5F;--e-global-color-accent:#F1F4F4;--e-global-color-4f8b0d2:#FFFFFF;--e-global-color-866b90b:#E6E1D5;--e-global-color-13a4939:#67AFB6;--e-global-color-dbntldp:#01565F;--e-global-color-dbnsndp:#D3CCBB;--e-global-color-dbnmuted:#4F6B70;--e-global-color-dbnline:#D8E0E0;--e-global-color-dbnalert:#9C3B2E;--e-global-color-dbntllt:#8FC3C7;--e-global-color-dbnlnst:#C6CBCC;--e-global-color-dbnstar:#FFC107;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-line-height:1.14em;--e-global-typography-primary-letter-spacing:-0.8px;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:68px;--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-line-height:1.04em;--e-global-typography-secondary-letter-spacing:-2px;--e-global-typography-text-font-family:"IBM Plex Sans";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-size:13px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:1.8px;--e-global-typography-dbnh1-font-family:"Archivo";--e-global-typography-dbnh1-font-size:52px;--e-global-typography-dbnh1-font-weight:600;--e-global-typography-dbnh1-text-transform:none;--e-global-typography-dbnh1-line-height:1.08em;--e-global-typography-dbnh1-letter-spacing:-1.3px;--e-global-typography-dbnh2-font-family:"Archivo";--e-global-typography-dbnh2-font-size:40px;--e-global-typography-dbnh2-font-weight:600;--e-global-typography-dbnh2-text-transform:none;--e-global-typography-dbnh2-line-height:1.14em;--e-global-typography-dbnh2-letter-spacing:-0.8px;--e-global-typography-dbnh3-font-family:"Archivo";--e-global-typography-dbnh3-font-size:30px;--e-global-typography-dbnh3-font-weight:600;--e-global-typography-dbnh3-text-transform:none;--e-global-typography-dbnh3-line-height:1.24em;--e-global-typography-dbnh3-letter-spacing:-0.45px;--e-global-typography-dbnh4-font-family:"Archivo";--e-global-typography-dbnh4-font-size:24px;--e-global-typography-dbnh4-font-weight:600;--e-global-typography-dbnh4-text-transform:none;--e-global-typography-dbnh4-line-height:1.34em;--e-global-typography-dbnh4-letter-spacing:-0.25px;--e-global-typography-dbnh5-font-family:"Archivo";--e-global-typography-dbnh5-font-size:20px;--e-global-typography-dbnh5-font-weight:600;--e-global-typography-dbnh5-text-transform:none;--e-global-typography-dbnh5-line-height:1.42em;--e-global-typography-dbnh5-letter-spacing:0px;--e-global-typography-dbnh6-font-family:"Archivo";--e-global-typography-dbnh6-font-size:17px;--e-global-typography-dbnh6-font-weight:600;--e-global-typography-dbnh6-text-transform:none;--e-global-typography-dbnh6-line-height:1.45em;--e-global-typography-dbnh6-letter-spacing:0px;--e-global-typography-dbnbodylg-font-family:"IBM Plex Sans";--e-global-typography-dbnbodylg-font-size:20px;--e-global-typography-dbnbodylg-font-weight:400;--e-global-typography-dbnbodylg-text-transform:none;--e-global-typography-dbnbodylg-line-height:1.58em;--e-global-typography-dbnbodylg-letter-spacing:0px;--e-global-typography-dbnbodysm-font-family:"IBM Plex Sans";--e-global-typography-dbnbodysm-font-size:14px;--e-global-typography-dbnbodysm-font-weight:400;--e-global-typography-dbnbodysm-text-transform:none;--e-global-typography-dbnbodysm-line-height:1.55em;--e-global-typography-dbnbodysm-letter-spacing:0px;--e-global-typography-dbnspec-font-family:"IBM Plex Mono";--e-global-typography-dbnspec-font-size:17px;--e-global-typography-dbnspec-font-weight:500;--e-global-typography-dbnspec-text-transform:none;--e-global-typography-dbnspec-line-height:1.4em;--e-global-typography-dbnspec-letter-spacing:0.2px;--e-global-typography-dbnspeclbl-font-family:"IBM Plex Mono";--e-global-typography-dbnspeclbl-font-size:12px;--e-global-typography-dbnspeclbl-font-weight:400;--e-global-typography-dbnspeclbl-text-transform:uppercase;--e-global-typography-dbnspeclbl-line-height:1.4em;--e-global-typography-dbnspeclbl-letter-spacing:1px;--e-global-typography-dbnnav-font-family:"Archivo";--e-global-typography-dbnnav-font-size:16px;--e-global-typography-dbnnav-font-weight:500;--e-global-typography-dbnnav-text-transform:none;--e-global-typography-dbnnav-line-height:1em;--e-global-typography-dbnnav-letter-spacing:0px;--e-global-typography-dbnbtn-font-family:"Archivo";--e-global-typography-dbnbtn-font-size:15px;--e-global-typography-dbnbtn-font-weight:600;--e-global-typography-dbnbtn-text-transform:none;--e-global-typography-dbnbtn-line-height:1em;--e-global-typography-dbnbtn-letter-spacing:1px;--e-global-typography-dbnquote-font-family:"IBM Plex Sans";--e-global-typography-dbnquote-font-size:26px;--e-global-typography-dbnquote-font-weight:400;--e-global-typography-dbnquote-text-transform:none;--e-global-typography-dbnquote-line-height:1.4em;--e-global-typography-dbnquote-letter-spacing:-0.3px;--e-global-typography-dbnprice-font-family:"IBM Plex Mono";--e-global-typography-dbnprice-font-size:36px;--e-global-typography-dbnprice-font-weight:500;--e-global-typography-dbnprice-text-transform:none;--e-global-typography-dbnprice-line-height:1em;--e-global-typography-dbnprice-letter-spacing:-0.7px;--e-global-typography-dbnchip-font-family:"Archivo";--e-global-typography-dbnchip-font-size:15px;--e-global-typography-dbnchip-font-weight:600;--e-global-typography-dbnchip-text-transform:none;--e-global-typography-dbnchip-line-height:1em;--e-global-typography-dbnchip-letter-spacing:0px;color:var( --e-global-color-text );font-family:"IBM Plex Sans", Sans-serif;font-size:17px;font-weight:400;text-transform:none;line-height:1.65em;letter-spacing:0px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-dbnbtn-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnbtn-font-size );font-weight:var( --e-global-typography-dbnbtn-font-weight );text-transform:var( --e-global-typography-dbnbtn-text-transform );line-height:var( --e-global-typography-dbnbtn-line-height );letter-spacing:var( --e-global-typography-dbnbtn-letter-spacing );color:var( --e-global-color-4f8b0d2 );border-radius:2px 2px 2px 2px;padding:17px 34px 17px 34px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-dbntldp );color:var( --e-global-color-4f8b0d2 );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );text-decoration:none;}.elementor-kit-6 a:hover{color:var( --e-global-color-dbntldp );}.elementor-kit-6 h1{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-dbnh1-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnh1-font-size );font-weight:var( --e-global-typography-dbnh1-font-weight );text-transform:var( --e-global-typography-dbnh1-text-transform );line-height:var( --e-global-typography-dbnh1-line-height );letter-spacing:var( --e-global-typography-dbnh1-letter-spacing );}.elementor-kit-6 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-dbnh2-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnh2-font-size );font-weight:var( --e-global-typography-dbnh2-font-weight );text-transform:var( --e-global-typography-dbnh2-text-transform );line-height:var( --e-global-typography-dbnh2-line-height );letter-spacing:var( --e-global-typography-dbnh2-letter-spacing );}.elementor-kit-6 h3{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-dbnh3-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnh3-font-size );font-weight:var( --e-global-typography-dbnh3-font-weight );text-transform:var( --e-global-typography-dbnh3-text-transform );line-height:var( --e-global-typography-dbnh3-line-height );letter-spacing:var( --e-global-typography-dbnh3-letter-spacing );}.elementor-kit-6 h4{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-dbnh4-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnh4-font-size );font-weight:var( --e-global-typography-dbnh4-font-weight );text-transform:var( --e-global-typography-dbnh4-text-transform );line-height:var( --e-global-typography-dbnh4-line-height );letter-spacing:var( --e-global-typography-dbnh4-letter-spacing );}.elementor-kit-6 h5{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-dbnh5-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnh5-font-size );font-weight:var( --e-global-typography-dbnh5-font-weight );text-transform:var( --e-global-typography-dbnh5-text-transform );line-height:var( --e-global-typography-dbnh5-line-height );letter-spacing:var( --e-global-typography-dbnh5-letter-spacing );}.elementor-kit-6 h6{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-dbnh6-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnh6-font-size );font-weight:var( --e-global-typography-dbnh6-font-weight );text-transform:var( --e-global-typography-dbnh6-text-transform );line-height:var( --e-global-typography-dbnh6-line-height );letter-spacing:var( --e-global-typography-dbnh6-letter-spacing );}.elementor-kit-6 img{border-radius:0px 0px 0px 0px;}.elementor-kit-6 label{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-dbnbodysm-font-family ), Sans-serif;font-size:var( --e-global-typography-dbnbodysm-font-size );font-weight:var( --e-global-typography-dbnbodysm-font-weight );text-transform:var( --e-global-typography-dbnbodysm-text-transform );line-height:var( --e-global-typography-dbnbodysm-line-height );letter-spacing:var( --e-global-typography-dbnbodysm-letter-spacing );}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-secondary );background-color:var( --e-global-color-4f8b0d2 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-dbnline );border-radius:2px 2px 2px 2px;transition:0.2ms;padding:14px 16px 14px 16px;}.elementor-kit-6 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea:focus,.elementor-kit-6 .elementor-field-textual:focus{background-color:var( --e-global-color-4f8b0d2 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:40px;--container-default-padding-bottom:0px;--container-default-padding-left:40px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(min-width:1600px){.elementor-kit-6 h1{font-size:var( --e-global-typography-dbnh1-font-size );line-height:var( --e-global-typography-dbnh1-line-height );letter-spacing:var( --e-global-typography-dbnh1-letter-spacing );}.elementor-kit-6 h2{font-size:var( --e-global-typography-dbnh2-font-size );line-height:var( --e-global-typography-dbnh2-line-height );letter-spacing:var( --e-global-typography-dbnh2-letter-spacing );}.elementor-kit-6 h3{font-size:var( --e-global-typography-dbnh3-font-size );line-height:var( --e-global-typography-dbnh3-line-height );letter-spacing:var( --e-global-typography-dbnh3-letter-spacing );}.elementor-kit-6 h4{font-size:var( --e-global-typography-dbnh4-font-size );line-height:var( --e-global-typography-dbnh4-line-height );letter-spacing:var( --e-global-typography-dbnh4-letter-spacing );}.elementor-kit-6 h5{font-size:var( --e-global-typography-dbnh5-font-size );line-height:var( --e-global-typography-dbnh5-line-height );letter-spacing:var( --e-global-typography-dbnh5-letter-spacing );}.elementor-kit-6 h6{font-size:var( --e-global-typography-dbnh6-font-size );line-height:var( --e-global-typography-dbnh6-line-height );letter-spacing:var( --e-global-typography-dbnh6-letter-spacing );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-dbnbtn-font-size );line-height:var( --e-global-typography-dbnbtn-line-height );letter-spacing:var( --e-global-typography-dbnbtn-letter-spacing );}.elementor-kit-6 label{font-size:var( --e-global-typography-dbnbodysm-font-size );line-height:var( --e-global-typography-dbnbodysm-line-height );letter-spacing:var( --e-global-typography-dbnbodysm-letter-spacing );}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:34px;--e-global-typography-primary-line-height:1.14em;--e-global-typography-primary-letter-spacing:-0.7px;--e-global-typography-secondary-font-size:52px;--e-global-typography-secondary-line-height:1.04em;--e-global-typography-secondary-letter-spacing:-1.6px;--e-global-typography-text-font-size:17px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-size:13px;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:1.8px;--e-global-typography-dbnh1-font-size:42px;--e-global-typography-dbnh1-line-height:1.08em;--e-global-typography-dbnh1-letter-spacing:-1.05px;--e-global-typography-dbnh2-font-size:34px;--e-global-typography-dbnh2-line-height:1.14em;--e-global-typography-dbnh2-letter-spacing:-0.7px;--e-global-typography-dbnh3-font-size:27px;--e-global-typography-dbnh3-line-height:1.24em;--e-global-typography-dbnh3-letter-spacing:-0.4px;--e-global-typography-dbnh4-font-size:22px;--e-global-typography-dbnh4-line-height:1.34em;--e-global-typography-dbnh4-letter-spacing:-0.2px;--e-global-typography-dbnh5-font-size:19px;--e-global-typography-dbnh5-line-height:1.42em;--e-global-typography-dbnh5-letter-spacing:0px;--e-global-typography-dbnh6-font-size:17px;--e-global-typography-dbnh6-line-height:1.45em;--e-global-typography-dbnh6-letter-spacing:0px;--e-global-typography-dbnbodylg-font-size:19px;--e-global-typography-dbnbodylg-line-height:1.58em;--e-global-typography-dbnbodylg-letter-spacing:0px;--e-global-typography-dbnbodysm-font-size:14px;--e-global-typography-dbnbodysm-line-height:1.55em;--e-global-typography-dbnbodysm-letter-spacing:0px;--e-global-typography-dbnspec-font-size:17px;--e-global-typography-dbnspec-line-height:1.4em;--e-global-typography-dbnspec-letter-spacing:0.2px;--e-global-typography-dbnspeclbl-font-size:12px;--e-global-typography-dbnspeclbl-line-height:1.4em;--e-global-typography-dbnspeclbl-letter-spacing:1px;--e-global-typography-dbnnav-font-size:16px;--e-global-typography-dbnnav-line-height:1em;--e-global-typography-dbnnav-letter-spacing:0px;--e-global-typography-dbnbtn-font-size:15px;--e-global-typography-dbnbtn-line-height:1em;--e-global-typography-dbnbtn-letter-spacing:1px;--e-global-typography-dbnquote-font-size:24px;--e-global-typography-dbnquote-line-height:1.4em;--e-global-typography-dbnquote-letter-spacing:-0.25px;--e-global-typography-dbnprice-font-size:32px;--e-global-typography-dbnprice-line-height:1em;--e-global-typography-dbnprice-letter-spacing:-0.6px;--e-global-typography-dbnchip-font-size:15px;--e-global-typography-dbnchip-line-height:1em;--e-global-typography-dbnchip-letter-spacing:0px;font-size:17px;line-height:1.65em;letter-spacing:0px;}.elementor-kit-6 h1{font-size:var( --e-global-typography-dbnh1-font-size );line-height:var( --e-global-typography-dbnh1-line-height );letter-spacing:var( --e-global-typography-dbnh1-letter-spacing );}.elementor-kit-6 h2{font-size:var( --e-global-typography-dbnh2-font-size );line-height:var( --e-global-typography-dbnh2-line-height );letter-spacing:var( --e-global-typography-dbnh2-letter-spacing );}.elementor-kit-6 h3{font-size:var( --e-global-typography-dbnh3-font-size );line-height:var( --e-global-typography-dbnh3-line-height );letter-spacing:var( --e-global-typography-dbnh3-letter-spacing );}.elementor-kit-6 h4{font-size:var( --e-global-typography-dbnh4-font-size );line-height:var( --e-global-typography-dbnh4-line-height );letter-spacing:var( --e-global-typography-dbnh4-letter-spacing );}.elementor-kit-6 h5{font-size:var( --e-global-typography-dbnh5-font-size );line-height:var( --e-global-typography-dbnh5-line-height );letter-spacing:var( --e-global-typography-dbnh5-letter-spacing );}.elementor-kit-6 h6{font-size:var( --e-global-typography-dbnh6-font-size );line-height:var( --e-global-typography-dbnh6-line-height );letter-spacing:var( --e-global-typography-dbnh6-letter-spacing );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-dbnbtn-font-size );line-height:var( --e-global-typography-dbnbtn-line-height );letter-spacing:var( --e-global-typography-dbnbtn-letter-spacing );padding:16px 30px 16px 30px;}.elementor-kit-6 label{font-size:var( --e-global-typography-dbnbodysm-font-size );line-height:var( --e-global-typography-dbnbodysm-line-height );letter-spacing:var( --e-global-typography-dbnbodysm-letter-spacing );}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.14em;--e-global-typography-primary-letter-spacing:-0.6px;--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-line-height:1.04em;--e-global-typography-secondary-letter-spacing:-1.2px;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-size:12px;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:1.7px;--e-global-typography-dbnh1-font-size:34px;--e-global-typography-dbnh1-line-height:1.08em;--e-global-typography-dbnh1-letter-spacing:-0.85px;--e-global-typography-dbnh2-font-size:28px;--e-global-typography-dbnh2-line-height:1.14em;--e-global-typography-dbnh2-letter-spacing:-0.6px;--e-global-typography-dbnh3-font-size:23px;--e-global-typography-dbnh3-line-height:1.24em;--e-global-typography-dbnh3-letter-spacing:-0.35px;--e-global-typography-dbnh4-font-size:20px;--e-global-typography-dbnh4-line-height:1.34em;--e-global-typography-dbnh4-letter-spacing:-0.2px;--e-global-typography-dbnh5-font-size:18px;--e-global-typography-dbnh5-line-height:1.42em;--e-global-typography-dbnh5-letter-spacing:0px;--e-global-typography-dbnh6-font-size:17px;--e-global-typography-dbnh6-line-height:1.45em;--e-global-typography-dbnh6-letter-spacing:0px;--e-global-typography-dbnbodylg-font-size:18px;--e-global-typography-dbnbodylg-line-height:1.58em;--e-global-typography-dbnbodylg-letter-spacing:0px;--e-global-typography-dbnbodysm-font-size:14px;--e-global-typography-dbnbodysm-line-height:1.55em;--e-global-typography-dbnbodysm-letter-spacing:0px;--e-global-typography-dbnspec-font-size:16px;--e-global-typography-dbnspec-line-height:1.4em;--e-global-typography-dbnspec-letter-spacing:0.2px;--e-global-typography-dbnspeclbl-font-size:12px;--e-global-typography-dbnspeclbl-line-height:1.4em;--e-global-typography-dbnspeclbl-letter-spacing:1px;--e-global-typography-dbnnav-font-size:17px;--e-global-typography-dbnnav-line-height:1em;--e-global-typography-dbnnav-letter-spacing:0px;--e-global-typography-dbnbtn-font-size:15px;--e-global-typography-dbnbtn-line-height:1em;--e-global-typography-dbnbtn-letter-spacing:1px;--e-global-typography-dbnquote-font-size:21px;--e-global-typography-dbnquote-line-height:1.4em;--e-global-typography-dbnquote-letter-spacing:-0.2px;--e-global-typography-dbnprice-font-size:30px;--e-global-typography-dbnprice-line-height:1em;--e-global-typography-dbnprice-letter-spacing:-0.55px;--e-global-typography-dbnchip-font-size:15px;--e-global-typography-dbnchip-line-height:1em;--e-global-typography-dbnchip-letter-spacing:0px;font-size:16px;line-height:1.65em;letter-spacing:0px;}.elementor-kit-6 h1{font-size:var( --e-global-typography-dbnh1-font-size );line-height:var( --e-global-typography-dbnh1-line-height );letter-spacing:var( --e-global-typography-dbnh1-letter-spacing );}.elementor-kit-6 h2{font-size:var( --e-global-typography-dbnh2-font-size );line-height:var( --e-global-typography-dbnh2-line-height );letter-spacing:var( --e-global-typography-dbnh2-letter-spacing );}.elementor-kit-6 h3{font-size:var( --e-global-typography-dbnh3-font-size );line-height:var( --e-global-typography-dbnh3-line-height );letter-spacing:var( --e-global-typography-dbnh3-letter-spacing );}.elementor-kit-6 h4{font-size:var( --e-global-typography-dbnh4-font-size );line-height:var( --e-global-typography-dbnh4-line-height );letter-spacing:var( --e-global-typography-dbnh4-letter-spacing );}.elementor-kit-6 h5{font-size:var( --e-global-typography-dbnh5-font-size );line-height:var( --e-global-typography-dbnh5-line-height );letter-spacing:var( --e-global-typography-dbnh5-letter-spacing );}.elementor-kit-6 h6{font-size:var( --e-global-typography-dbnh6-font-size );line-height:var( --e-global-typography-dbnh6-line-height );letter-spacing:var( --e-global-typography-dbnh6-letter-spacing );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-dbnbtn-font-size );line-height:var( --e-global-typography-dbnbtn-line-height );letter-spacing:var( --e-global-typography-dbnbtn-letter-spacing );padding:15px 26px 15px 26px;}.elementor-kit-6 label{font-size:var( --e-global-typography-dbnbodysm-font-size );line-height:var( --e-global-typography-dbnbodysm-line-height );letter-spacing:var( --e-global-typography-dbnbodysm-letter-spacing );}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}}/* Start custom CSS *//* ==========================================================
   DBN HOMES - CUSTOM CSS
   Last updated: 2026-08-31

   Contents:
   1. Root tokens
   1b. Theme Style corrections
   2. Spacing utilities
   3. Surface utilities
   4. Forms and accessibility
   5. Header / Navigation      (Phase 4)
   6. Home designs             (Phase 7)
   7. House and land           (Phase 8)
   9. Homepage hero            (Phase 6)
  10. Homepage - Fixed price  (Phase 6b)
  11. Homepage - Two specs   (Phase 6c)

   Rule: every block states what it does, why a native control could
   not do it, and where it is used.
   Prefix: dbn-
   ========================================================== */


/* ---------- 1. ROOT TOKENS ---------- */

/* Mirrors Global Colors so nothing below hardcodes a hex.
   Never add a colour here that is not in Global Colors. */
:root {
  --dbn-teal:       #017580;
  --dbn-teal-deep:  #01565F;
  --dbn-ink:        #06333A;
  --dbn-body:       #3D5A5F;
  --dbn-muted:      #4F6B70;
  --dbn-mist:       #F1F4F4;
  --dbn-sand:       #E6E1D5;
  --dbn-sand-deep:  #D3CCBB;
  --dbn-line:       #D8E0E0;
  --dbn-alert:      #9C3B2E;
  --dbn-white:      #FFFFFF;

  /* Spacing scale. Section padding uses these values only. */
  --dbn-s1:   8px;
  --dbn-s2:  16px;
  --dbn-s3:  24px;
  --dbn-s4:  32px;
  --dbn-s5:  48px;
  --dbn-s6:  64px;
  --dbn-s7:  96px;
  --dbn-s8: 128px;
  --dbn-s9: 160px;
}

/* ---------- 1b. THEME STYLE CORRECTIONS ---------- */

/* Restores the Theme Style button appearance set in Site Settings > Buttons.
   Why custom: for every Button widget on a page, Elementor also emits its own
   widget-default rule into that page's stylesheet:

     .elementor-widget-button .elementor-button { background-color: var(--e-global-color-accent) }

   That .elementor-kit-6 has the same specificity as the Theme Style rule
   (.elementor-kit-6 .elementor-button) but the page stylesheet loads after the
   kit stylesheet, so the widget default wins and every button renders on Mist
   with Eyebrow type and white text - invisible. Adding `body` lifts this to
   (0,2,1) so it beats the default without !important, while per-widget rules
   (0,3,0) still override it, so individual buttons can still be restyled in
   the editor as normal.

   Values are read straight from the same Global tokens the Theme Style uses,
   so changing a Global still propagates and nothing is duplicated by hand.
   Verified against: Style Guide page and the Header template.
   Remove this block if a future Elementor release stops emitting that rule. */
body .elementor-widget-button .elementor-button {
  background-color: var(--e-global-color-primary);
  color:            var(--e-global-color-4f8b0d2);
  font-family:      var(--e-global-typography-dbnbtn-font-family), sans-serif;
  font-size:        var(--e-global-typography-dbnbtn-font-size);
  font-weight:      var(--e-global-typography-dbnbtn-font-weight);
  text-transform:   var(--e-global-typography-dbnbtn-text-transform);
  line-height:      var(--e-global-typography-dbnbtn-line-height);
  letter-spacing:   var(--e-global-typography-dbnbtn-letter-spacing);
}
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus {
  background-color: var(--e-global-color-dbntldp);
  color:            var(--e-global-color-4f8b0d2);
}

/* Same fault, same fix, for the Nav Menu widget: its widget default paints the
   hover and active colours with Mist, which is invisible on a white surface. */
body .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
body .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
body .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--e-global-color-primary);
  fill:  var(--e-global-color-primary);
}

/* Same fault a third time, for Elementor Pro's Loop Grid "Load More" button.
   That button is NOT a Button widget, so the correction above never reaches it:
   Elementor emits '.elementor-widget-loop-grid .elementor-button' into the page
   stylesheet painting it on Mist with Accent (mono) type. On the Sand Home
   Designs section that is Mist on Sand - about 1.05:1, so the button reads as
   an empty ghost until you hover it and a dark box appears from nowhere.
   Why custom: the Loop Grid exposes only 'Load More' alignment - it has no
   colour, type or hover controls at all (verified against Elementor Pro 4.2.3),
   so there is no native control to reach for.
   Specificity: the page rule scores (0,2,0) and its stylesheet loads after this
   one, so 'body' lifts these to (0,3,1) and (0,4,1) to win without !important.
   Values come from the same Globals as every other primary button, so the two
   stay in step.
   Used on: Homepage Design Grid, and any future Loop Grid using Load More. */
body .elementor-widget-loop-grid .e-loop__load-more .elementor-button {
  background-color: var(--e-global-color-primary);
  color:            var(--e-global-color-4f8b0d2);
  font-family:      var(--e-global-typography-dbnbtn-font-family), sans-serif;
  font-size:        var(--e-global-typography-dbnbtn-font-size);
  font-weight:      var(--e-global-typography-dbnbtn-font-weight);
  text-transform:   var(--e-global-typography-dbnbtn-text-transform);
  line-height:      var(--e-global-typography-dbnbtn-line-height);
  letter-spacing:   var(--e-global-typography-dbnbtn-letter-spacing);
  transition:       background-color 200ms ease, color 200ms ease;
}
body .elementor-widget-loop-grid .e-loop__load-more .elementor-button:hover,
body .elementor-widget-loop-grid .e-loop__load-more .elementor-button:focus-visible {
  background-color: var(--e-global-color-dbntldp);
  color:            var(--e-global-color-4f8b0d2);
}


/* ---------- 2. SPACING UTILITIES ---------- */

/* Section rhythm. Apply ONE of these to a top-level Container via
   Advanced > CSS Classes instead of typing padding on every section.
   Why custom: Elementor has no reusable spacing preset. Without this,
   section padding drifts and responsive values get forgotten.
   Used on: every top-level section container. */
.dbn-section        { padding-top: var(--dbn-s8); padding-bottom: var(--dbn-s8); }
.dbn-section--tight { padding-top: var(--dbn-s7); padding-bottom: var(--dbn-s7); }
.dbn-section--wide  { padding-top: var(--dbn-s9); padding-bottom: var(--dbn-s9); }

@media (max-width: 1024px) {
  .dbn-section        { padding-top: var(--dbn-s7); padding-bottom: var(--dbn-s7); }
  .dbn-section--tight { padding-top: var(--dbn-s6); padding-bottom: var(--dbn-s6); }
  .dbn-section--wide  { padding-top: 112px;         padding-bottom: 112px; }
}

@media (max-width: 767px) {
  .dbn-section        { padding-top: var(--dbn-s6); padding-bottom: var(--dbn-s6); }
  .dbn-section--tight { padding-top: var(--dbn-s5); padding-bottom: var(--dbn-s5); }
  .dbn-section--wide  { padding-top: 80px;          padding-bottom: 80px; }
}


/* ---------- 3. SURFACE UTILITIES ---------- */

/* .dbn-btn-outline
   Secondary button: transparent with an Ink outline, filling on hover.
   Apply via: Button widget > Advanced > CSS Classes
   Why custom: Theme Style supports one button appearance only, and this
   project needs a documented second one used across most sections.
   Used on: to be recorded as sections are built. */
.dbn-btn-outline .elementor-button {
  background-color: transparent;
  color: var(--dbn-ink);
  border: 1px solid var(--dbn-ink);
}
.dbn-btn-outline .elementor-button:hover,
.dbn-btn-outline .elementor-button:focus-visible {
  background-color: var(--dbn-ink);
  color: var(--dbn-white);
}

/* .dbn-on-dark
   Text colour correction for sections using an Ink background.
   Why custom: Theme Style sets one body colour globally, and Body
   (#3D5A5F) on Ink fails contrast. Mist on Ink measures 12.0 to 1.
   Used on: any container with an Ink background. */
.dbn-on-dark,
.dbn-on-dark p,
.dbn-on-dark li {
  color: var(--dbn-mist);
}
.dbn-on-dark h1, .dbn-on-dark h2, .dbn-on-dark h3,
.dbn-on-dark h4, .dbn-on-dark h5, .dbn-on-dark h6 {
  color: var(--dbn-white);
}
.dbn-on-dark a {
  color: var(--dbn-mist);
  text-decoration: underline;
}

/* .dbn-on-sand
   Link colour correction for sections using a Sand background.
   Why custom: Teal on Sand measures 4.3 to 1 and fails WCAG AA.
   Teal Deep on Sand measures 6.5 to 1.
   Used on: any container with a Sand background. */
.dbn-on-sand a {
  color: var(--dbn-teal-deep);
}

/* .dbn-skip-link
   Keyboard skip-to-content link, first element in the header.
   Why custom: no native widget provides one.
   Used on: header template (Phase 4). */
.dbn-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--dbn-ink);
  color: var(--dbn-white);
  text-decoration: none;
}
.dbn-skip-link:focus {
  left: 0;
}


/* ---------- 4. FORMS AND ACCESSIBILITY ---------- */

/* Keyboard focus visibility.
   Why custom: Theme Style focus changes border colour only, which is not
   a sufficient focus indicator and fails WCAG 2.4.7.
   VERIFY these .elementor-kit-6s against a rendered form before relying on them. */
.elementor-field-group input:focus-visible,
.elementor-field-group select:focus-visible,
.elementor-field-group textarea:focus-visible,
.elementor-field-type-submit button:focus-visible,
.elementor-button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--dbn-teal);
  outline-offset: 2px;
}

/* Validation message styling.
   Why custom: Elementor offers no Theme Style control for error text. */
.elementor-message.elementor-message-danger,
.elementor-field-group .elementor-error {
  color: var(--dbn-alert);
  font-size: 14px;
  margin-top: 6px;
}

/* Required-field indicator.
   Why custom: the default marker inherits label colour and is easy to miss. */
.elementor-field-required .elementor-field-label:after {
  content: ' *';
  color: var(--dbn-teal);
}

/* Reduced motion.
   Why custom: Elementor animations have no global opt-out control. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------- 5. HEADER / NAVIGATION ---------- */

/* Built in: Templates > Theme Builder > "Header".
   Structure, spacing, colour and type come from widget controls and Globals.
   The rules below are the ones with no native equivalent.

   Menu links inside the panels come from WP menus (Appearance > Menus,
   the six "Mega - ..." menus), so the client edits links there, not here.

   The bar is brand teal, matching the approved prototype. Marks on it are
   White with Mist as the quiet state; the mega panel below stays White. */

/* .dbn-mega-columns
   Lines the mega panel's link columns up with the 1280px page grid while the
   panel itself stays full-bleed, so the picture bay can run to the viewport
   edge - which is what makes the panel read as part of the page instead of a
   floating card.
   Apply via: Container > Advanced > CSS Classes.
   Why custom: the offset is max(gutter, (100% - content width) / 2). Elementor's
   padding control takes one number per device and cannot express a calc, and
   this has to track viewport width continuously rather than step at breakpoints.
   The container's left padding is deliberately 0 so this margin is the only
   thing setting that edge - do not add left padding in the editor.
   Used on: Header template, all three mega panels. */
.dbn-mega-columns {
  margin-left: max(40px, calc((100% - 1280px) / 2));
}

/* .dbn-mega-feature
   Holds the picture bay at the width set on the container instead of letting
   the link columns squeeze it.
   Apply via: Container > Advanced > CSS Classes.
   Why custom: Elementor exposes Flex Grow / Shrink for widgets but not for a
   container acting as a flex child. It declares `flex-shrink: var(--flex-shrink)`
   on .elementor-element and keeps setting that variable further down its own
   cascade, so both a plain flex-shrink and a --flex-shrink override lose.
   Pairing the utility class with .e-con makes this two classes, which beats
   .elementor-element outright - no !important needed.
   Change the bay's width in the editor as usual; this only stops it shrinking.
   Used on: Header template, all three mega panels. */
.e-con.dbn-mega-feature {
  flex-shrink: 0;
}

/* .dbn-mega-menu
   The hover treatment on mega panel links: the row tints and the label steps
   in from the left, both eased over 150ms. Ported from the approved prototype.
   Apply via: Nav Menu widget > Advanced > CSS Classes.
   Why custom: the Nav Menu widget's own hover controls give a colour and one
   of Elementor's canned pointer animations. Neither can move the item's
   padding, and the two have to run together on one transition or the row
   jitters. Declared once here because six menu widgets share it - which is
   also why it is a class rather than six per-widget Custom CSS boxes.
   The right-hand hairline the widget draws between items is native
   (Nav Menu > Style > Divider); only the hover belongs here. */
.dbn-mega-menu .elementor-nav-menu--main .elementor-item {
  border-radius: 2px;
  transition:
    padding-left 150ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
    color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dbn-mega-menu .elementor-nav-menu--main .elementor-item:hover,
.dbn-mega-menu .elementor-nav-menu--main .elementor-item:focus-visible {
  padding-left: 12px;
  background-color: var(--e-global-color-accent);
}

/* One chevron, rotated - not two icons swapped.
   Why custom: Elementor renders a separate mark for the open and closed states
   and toggles their display, so the same SVG is set for both and the open one
   is turned here. There is no native rotate-on-open control.
   The .elementor-kit-6 repeats Elementor's own chain and adds the attribute because its
   rule (.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon) sets
   transform from a variable at the same specificity and its stylesheet loads
   after the kit's. Four parts beats three; no !important.
   Used on: Header template, Mega Menu widget. */
.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon[aria-expanded='true'] {
  transform: rotate(180deg);
}

/* .dbn-text-link is the same treatment used outside the header - the two inline
   links on the Single Home Design template. It exists so those links do not wear
   .dbn-mega-cta, a header class: borrowing it coupled them to the mega menu, and
   restyling a picture bay would silently have restyled them. Same rules, two
   entry points, separate meanings.
   Their tap target is native: Button > Style > Padding, 12px top and bottom.
   Why any of this is custom: the button's type comes from the Button Global, and
   a Global supplies the whole type group, so text-decoration cannot be set per
   widget without breaking the link to it. The arrow's travel has no native
   control either. Everything else on these buttons - colour, icon, spacing,
   alignment - is set in the widget. */
/* .dbn-mega-cta
   The picture bay's link: underlined, with the arrow easing right on hover.
   Apply via: Button widget > Advanced > CSS Classes.
   Why custom: the button's typography comes from the Button Global, and a
   Global supplies the whole type group - text-decoration cannot be overridden
   per widget without breaking the link to it. The arrow's travel has no
   native control either.
   Used on: Header template, all three picture bays. */
.dbn-mega-cta .elementor-button,
.dbn-text-link .elementor-button {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dbn-mega-cta .elementor-button-icon svg,
.dbn-text-link .elementor-button-icon svg {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dbn-mega-cta .elementor-button:hover .elementor-button-icon svg,
.dbn-mega-cta .elementor-button:focus-visible .elementor-button-icon svg,
.dbn-text-link .elementor-button:hover .elementor-button-icon svg,
.dbn-text-link .elementor-button:focus-visible .elementor-button-icon svg {
  transform: translateX(3px);
}

/* Stroke-drawn icons.
   Why custom: Elementor paints icon SVGs with `fill`, which does nothing to a
   Lucide mark - those are strokes. Setting the stroke to currentColor lets the
   widget's own colour controls keep working, so colour still comes from the
   editor.
   Used on: Header template, every SVG icon in it. */
.elementor-widget-n-menu .e-n-menu-dropdown-icon svg,
.elementor-widget-n-menu .e-n-menu-toggle svg,
.dbn-header-phone .elementor-button-icon svg,
.dbn-mega-cta .elementor-button-icon svg,
.dbn-text-link .elementor-button-icon svg {
  fill: none;
  stroke: currentColor;
}


/* ---------- 6. FOOTER ---------- */

/* Built in: Templates > Theme Builder > "Footer". Ground is Ink.

   The colour ladder, every step a Global and every step clear of AA:
     White     13.7:1  headings, and every link on hover
     Mist      12.3:1  primary copy - positioning line, subscribe body, hint
     Sand      10.4:1  column labels (the mono eyebrows)
     Line      10.2:1  legal facts, contact facts, disclaimer
     Sand Deep  8.5:1  navigation links at rest, copyright, agency credit

   Links rest a full step below their column label so hover has somewhere to
   travel to. Nothing here uses opacity: hierarchy is colour and placement, so
   every value stays a Global the client can change.

   Link lists come from WP menus (Appearance > Menus - Footer - Build,
   Footer - Buying, Footer - DBN Homes, Footer - Legal), so links are edited
   there, not here. Legal facts, disclaimer and credit are ordinary Text Editor
   copy. The copyright year is [dbn_year], a child theme shortcode
   (inc/footer-year.php) - do not replace it with a typed year.

   Four rules below. Everything else is native widget controls. */

/* .dbn-link-quiet
   The one hover treatment every footer link shares: a rule that draws itself
   from the left under the text while the label lifts to White.
   Apply via: Advanced > CSS Classes on any widget containing links.
   Used on: all four footer menus, the phone and email list, the privacy link.

   Why custom, in three parts:

   1. The Nav Menu widget's own hover offers a colour plus one of Elementor's
      canned pointers. Its underline pointer spans the whole item box, and the
      item is a full-width flex child, so the rule ran the width of the column
      instead of the width of the word. The pointer is set to None in the
      widget and the underline is drawn here instead.

   2. width:fit-content shrinks the two flex-child link types to their text so
      the rule matches the label. The row keeps its 38px height, so the target
      stays comfortable. A link inside a sentence is left inline so it wraps
      with the copy.

   3. background-origin:content-box is what lets one rule serve both the menus
      (8px vertical padding) and the icon list (none): the gradient is measured
      against the content box, so it lands under the text at the same offset
      either way, with no per-widget correction.

   Animating background-size costs no layout work and never repaints the text. */
.dbn-link-quiet a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 0 100%;
  background-size: 0 1px;
  transition:
    background-size 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dbn-link-quiet a:hover,
.dbn-link-quiet a:focus-visible {
  background-size: 100% 1px;
}

.dbn-link-quiet .elementor-item,
.dbn-link-quiet .elementor-icon-list-item > a {
  width: fit-content;
  max-width: 100%;
}

/* Removes the list indent so footer links sit flush with the label above them.
   Why custom: the widget's Horizontal Padding control sets padding on the link
   and is already at 0; the residual offset is the <ul>'s own padding, which
   has no control. */
.dbn-link-quiet .elementor-nav-menu {
  padding-inline-start: 0;
}

/* The Icon List widget paints its Text colour onto the inner span, not onto
   the link, so the link keeps Theme Style's Teal. The text looked right, but
   the underline is drawn from the link's currentColor and came out Teal, which
   is 1.4:1 on Ink. Naming the same two Globals through Elementor's own
   variables keeps this tied to the palette: change the Global and it follows. */
.dbn-link-quiet .elementor-icon-list-item > a {
  color: var( --e-global-color-dbnsndp );
}
.dbn-link-quiet .elementor-icon-list-item > a:hover,
.dbn-link-quiet .elementor-icon-list-item > a:focus-visible {
  color: var( --e-global-color-4f8b0d2 );
}

/* Reduced motion: the underline still appears, it just stops travelling. */
@media (prefers-reduced-motion: reduce) {
  .dbn-link-quiet a { transition: none; }
}

/* .dbn-footer-form placeholder
   Why custom: neither Theme Style > Form Fields nor the Form widget's Style
   tab exposes a placeholder colour, and the browser default on the field's
   translucent ground falls under 3:1.
   opacity is reset because Firefox dims placeholders by default, which would
   undo the contrast the colour just bought.
   Used on: Footer template, newsletter form. */
.dbn-footer-form .elementor-field-textual::placeholder {
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}

/* Keyboard focus on the dark ground.
   Why custom: the site-wide focus rule in section 4 draws a Teal ring. Teal on
   Ink is 1.4:1 - the ring is there and cannot be seen. This overrides the
   colour only; width, style and offset stay with the global rule, so the focus
   indicator behaves the same everywhere. White on Ink is 13.7:1, and the ring
   around the white Join button sits on the footer ground rather than on the
   button, so one colour serves both.
   Used on: Footer template, every focusable element in it. */
#dbn-footer input:focus-visible,
#dbn-footer button:focus-visible,
#dbn-footer a:focus-visible {
  outline: 2px solid var(--dbn-white);
  outline-offset: 2px;
}

/* Contact row icon (the Lucide phone mark)
   Its stroke fix is NOT here. Elementor paints icon SVGs with `fill`, and its
   own widget rule is more specific than anything this sheet can write and
   loads after it. The rule lives in the Icon List widget's
   Advanced > Custom CSS instead, where Elementor emits it last.
   Footer template > Brand > the phone and email list. */


/* ---------- 7. HOME DESIGNS ---------- */

/* Built in: the page /home-designs/ and the Loop Item template "Design Card".
   Structure, spacing, colour and type are widget controls and Globals. The
   rules below are the ones with no native equivalent. */

/* .dbn-design-card
   Apply via: Loop Item "Design Card" > outer container > CSS Classes
   Why custom: Elementor has no control that turns a whole card into one hit
   area. The design title stays the real link, so the keyboard and a screen
   reader still get a single, correctly-named target; this only stretches that
   link's clickable box across the card. Hover darkens the border rather than
   adding a shadow, per the design system's "borders, not shadows" rule.
   Used on: /home-designs/, the related grid on every single design page, and
   the homepage design preview once that is built. */
.dbn-design-card,
.dbn-package-card {
  position: relative;
  transition: border-color 180ms ease-out;
}

.dbn-design-card:hover,
.dbn-package-card:hover {
  border-color: var(--dbn-muted);
}

.dbn-design-card .dbn-card-title a,
.dbn-package-card .dbn-card-title a {
  text-decoration: none;
}

.dbn-design-card .dbn-card-title a::after,
.dbn-package-card .dbn-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* .dbn-card-foot
   Pins the block line and the action to the bottom of the card, so the action
   panels line up across a row whatever the title does.
   Apply via: Loop Item "Design Card" > "Card Foot" > CSS Classes
   Why custom: a container acting as a flex child has no Flex Grow control, and
   Elementor's dimension control writes a unit onto every value, so "auto"
   cannot be typed into Margin Top. */
.dbn-design-card .dbn-card-foot,
.dbn-package-card .dbn-card-foot {
  margin-top: auto;
}

/* .dbn-card-action
   The panel that reads as the card's button. It is not a Button widget on
   purpose — the whole card is already one link, and a second anchor with the
   same destination would sit in the tab order twice. This gives it the hover
   response a button would have, driven by the card rather than by itself.
   Apply via: Loop Item "Design Card" > "Card Action" > CSS Classes
   Why custom: no widget can react to an ancestor's hover state. */
.dbn-design-card .dbn-card-action,
.dbn-package-card .dbn-card-action {
  transition: background-color 180ms ease-out;
}

.dbn-design-card:hover .dbn-card-action,
.dbn-package-card:hover .dbn-card-action {
  background-color: var(--dbn-teal-deep);
}

/* .dbn-spec-icon (bed / bath / car)
   Their stroke fix is NOT here. Elementor paints icon SVGs with `fill`, which
   fills a Lucide mark solid, and its own per-widget rule matches at the same
   specificity while loading after this sheet. The rule lives in each Icon
   widget's Advanced > Custom CSS instead, where Elementor emits it last —
   the same arrangement as the footer phone icon in section 6.
   Loop Item "Design Card" > Spec Box > the three Icon widgets. */

/* .dbn-card-media / .dbn-card-image - the facade photo band
   Apply via: Loop Item "Design Card" > "Card Media" and the Image widget in it.

   The card used to show a floor plan: a line drawing on white, which sat ON the
   sand panel with air around it. The panel was 280px tall and the image 240px,
   so 40px of sand showed above and below by design, and on mobile the panel
   added 24px of padding on all four sides as well.

   The card now shows the featured facade photo. A photograph has to fill the
   panel edge to edge, so the panel's Min Height and its mobile Padding have
   been cleared on the widget and the image alone sets the band's height. The
   sand background stays as the backdrop for a design with no featured image.

   Why the ratio is here rather than on the widget: the grid is fluid - a card
   measures ~411px wide at three columns, ~460px at two and ~335px at one - so a
   fixed pixel height crops a different shape at every width. Measured on the
   old values, the band ran 1.58 at a 768px viewport and 2.09 at 1024px, from
   the same 220px height. aspect-ratio tracks the column instead, and the Image
   widget has no aspect-ratio control. `height: auto` has to go with it: a used
   height wins over aspect-ratio, and the ratio would simply be ignored.

   The widget's Height values are kept, and set to 16:9 at each breakpoint, for
   two reasons: they are the fallback if this sheet never loads, and Elementor
   only emits Object Fit when a height exists.

   16:9 is the source ratio - the facade photos are 1365x768. One file,
   facade-fresh-full.webp, is 4:3; Object Fit: cover crops it to match rather
   than letting one card break the row.
   Used on: /home-designs/, and the related grid on every single design page. */
.dbn-card-image img {
  max-width: 100%;
}

/* The class is doubled to win a specificity tie, not by accident.
   Elementor writes the Image widget's Height as
     .elementor-383 .elementor-element.elementor-element-9945946 img
   which is three classes and an element - exactly what
   .dbn-design-card .dbn-card-media .dbn-card-image img comes to. On a tie the
   later sheet wins, and Elementor prints the loop item's CSS in a <style> tag
   inside the loop container, after the kit's stylesheet. Repeating
   .dbn-card-image makes it four classes and settles it on specificity rather
   than !important, the same way the mega menu's chevron rule does in section 5.
   Verified: without this the band measured 1.64 at a 768px viewport instead of
   1.78, because the widget's 225px tablet height was still winning. */
.dbn-design-card .dbn-card-media .dbn-card-image.dbn-card-image img {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* .dbn-hero-image - the featured facade photo on the Single Home Design hero
   Apply via: Image widget > Advanced > CSS Classes (template 384, 'Hero Media').

   Its own class, not .dbn-card-image. The two are the same photo at the same
   ratio, but they live in different places and will be restyled for different
   reasons - borrowing the card's class would mean a change to the archive card
   silently moved the hero. Same lesson as .dbn-text-link in section 5.

   Why custom: identical reasoning to the card above. The hero column is fluid
   (538px at 1440, 944px at tablet, 342px on a phone), so a fixed pixel height
   crops a different shape at every width. Measured on the old 380/340/280
   values the band ran 1.42, 2.78 and 1.22 against a 1.78 source - the tablet
   crop was letterboxing the roofline off. The Image widget has no aspect-ratio
   control, so it cannot be set in the editor.

   'height: auto' has to travel with it: a used height beats aspect-ratio and
   the ratio would simply be ignored.

   The widget's Height values are kept and set to 16:9 at each breakpoint
   (302 / 531 / 192) for the same two reasons as the card: they are the
   fallback if this sheet never loads, and Elementor only emits Object Fit when
   a height exists.

   The doubled class is deliberate. Elementor writes the height as
     .elementor-384 .elementor-element.elementor-element-b4afcfb img
   which is (0,3,1) and prints after the kit stylesheet. Repeating the class
   brings this to (0,4,2) so it wins on specificity, not !important - the same
   move as the card rule above.
   Used on: Single Home Design template (384), all 19 design pages. */
html .elementor-kit-6 .dbn-hero-image.dbn-hero-image img {
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 100%;
}

/* .dbn-clear-filters
   Hidden while nothing is filtered. The "Home Designs Result Count" snippet in
   Elementor > Custom Code adds .dbn-unfiltered to the bar when the grid is
   showing everything; the link is visible by default, so if that script never
   runs the visitor keeps a working reset rather than losing one.
   Apply via: Button widget > Advanced > CSS Classes
   Why custom: Elementor has no control that shows a widget conditionally on
   filter state. */
.dbn-filter-bar.dbn-unfiltered .dbn-clear-filters {
  display: none;
}

/* The link's underline used to come from .dbn-mega-cta, a header class borrowed
   for its text-decoration. That coupled this button to the mega menu's picture
   bays - restyling those would have silently restyled this - so the class is
   off the widget and the underline is stated here instead.
   Why custom: the button's type comes from the Button Global, and a Global
   supplies the whole type group, so text-decoration cannot be overridden per
   widget without breaking the link to it.
   Its tap target is native: Button > Style > Padding, 12px top and bottom. */
.dbn-clear-filters .elementor-button {
  text-decoration: underline;
  text-underline-offset: 4px;
}



/* Whole-card hit area — the positioning context
   The overlay above is `inset: 0` on the title's link, so it fills whichever
   ancestor is positioned. Elementor gives every container `position: relative`,
   which put four positioned wrappers between that link and the card and left
   the clickable area a 32px strip across the title. Making the inner containers
   static hands the job to .dbn-design-card, which the rule above already sets
   to relative.
   The media panel is excluded on purpose: the frontage badge is absolutely
   positioned inside it and must keep that panel as its own reference.
   Why custom: Elementor exposes no Position control on a container, so there is
   no native way to opt one out of `relative`.
   Apply via: nothing — this keys off classes already on the Loop Item. */
.dbn-design-card .e-con:not(.dbn-card-media),
.dbn-design-card .dbn-card-title,
.dbn-package-card .e-con:not(.dbn-card-media),
.dbn-package-card .dbn-card-title {
  position: static;
}



/* Single design page — Phase 7 */

/* .dbn-plan-download
   Drops the download button on a design with no floor plan PDF. Elementor still
   renders a Button widget when its dynamic link resolves to nothing, leaving a
   button-shaped anchor with no href at all. Elementor drops the attribute
   rather than emitting href="", so the .elementor-kit-6 tests for its absence. Tennyson 12 is the only
   one today: its sole source is a 107MB print export, not something to hand a
   visitor.
   Apply via: Single Home Design > Plan Actions > the Button > CSS Classes
   Why custom: Elementor has no show-only-if-this-field-is-filled control, and
   removing the widget instead would mean a second template per case. */
.dbn-plan-download:has( a:not( [href] ) ) {
  display: none;
}

/* .dbn-facade-card
   Hover response on the six facade tiles, matching the design cards.
   Apply via: Single Home Design > each Facade card container > CSS Classes
   Why custom: a container's border colour has no hover state in the panel. */
.dbn-facade-card {
  transition: border-color 180ms ease-out;
}

.dbn-facade-card:hover {
  border-color: var(--dbn-teal);
}

/* .dbn-action-copy
   The design name in the mobile bar truncates rather than wrapping the bar onto
   a second line and pushing the buttons off-screen.
   Apply via: Single Home Design > Mobile Action Bar > Action Bar Copy
   Why custom: no widget control writes text-overflow, and this also needs
   min-width:0 so the flex item is allowed to shrink below its content. */
.dbn-action-copy {
  min-width: 0;
}

.dbn-action-copy .elementor-heading-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* Clearance for the mobile action bar
   The bar is position:fixed, so it does not occupy layout space and the last
   ~116px of the footer sits behind it — verified: the FAQs and Gallery links
   were unreachable at the bottom of a design page on a 375px viewport.
   This is the one media query in this sheet, and it is not doing responsive
   layout: it is adding document-level clearance for a fixed child, which no
   Elementor control can do. The breakpoint matches Elementor's own mobile
   breakpoint, so it turns on exactly when the bar does.
   Scoped to design singles by the body class WordPress adds for the CPT. */
@media (max-width: 767px) {
  body.single-design {
    padding-bottom: 124px;
  }
}


/* ---------- 8. HOUSE AND LAND ---------- */

/* The Package Card reuses the Design Card's rules above - the .elementor-kit-6s in
   section 7 were widened to cover .dbn-package-card rather than duplicated,
   so the whole-card hit area, the bottom-pinned foot and the hover response
   stay defined once. Only what is genuinely different lives here.
   Apply via: Loop Item "Package Card" (ID 707).

   The price strip's scrim is the one value on the card that is not a global.
   A gradient needs a transparent stop and Global Colors hold no alpha, so the
   Ink value is written into the gradient's second stop in the widget itself.
   If Ink ever changes, that stop is the one place to change with it. */

/* .dbn-package-card .dbn-card-media
   The facade is a dynamic container background rather than an Image widget so
   the price strip can sit inside the same panel and be pinned to its foot by
   Justify Content. Background-size cover is set natively on the container;
   this only guarantees the panel keeps its shape when the card is stretched
   by a taller neighbour in the grid.
   Why custom: a flex child container has no Flex Shrink control. */
.dbn-package-card .dbn-card-media {
  flex-shrink: 0;
}




/* .dbn-breadcrumb-bar
   Apply via: Header template (ID 111) > second top-level container > CSS Classes
   The breadcrumb trail sits in the Header template rather than on each page, so
   it is defined once and every page gets it. It is a sibling *after* the sticky
   Header Bar, not inside it, so it scrolls away instead of eating height.
   Why custom: Elementor's Display Conditions have no "is front page" test — the
   available page conditions are title, parent, author and URL. On the homepage
   Yoast renders a trail of one crumb, "Home", which is noise above a full-bleed
   hero, so it is hidden there.
   If the trail should ever return to the homepage, delete this rule. */
body.home .dbn-breadcrumb-bar {
  display: none;
}

/* .dbn-breadcrumbs
   Apply via: Header template (ID 111) > Breadcrumbs widget > CSS Classes

   Almost nothing about this trail is styled here, on purpose. The widget's own
   controls carry the work and are where the next person will look for them:
     Style > Typography  -> Global "Spec Label"
     Style > Text Color  -> Global "Body"    (the current page, the last crumb)
     Style > Link Color  -> Global "Muted"   (the ancestor links)
     Style > Link Hover  -> Global "Teal"    (the hover colour itself)
     Content > Alignment -> Left, set on desktop, tablet and mobile

   Two things the widget has no control for, and only those two:

   1. The ease between the two link colours. Elementor emits `transition: all`
      with no duration on this widget, so the colour swap is instant.
   2. An underline on hover and on keyboard focus. The hover state must not be
      colour alone - WCAG 1.4.1 - and Muted to Teal is a hue change a
      red-green colour-blind visitor may not register. The underline makes the
      affordance non-colour as well.

   The separator is plain text between the spans, not a link, so it is untouched
   and only the crumbs themselves respond. */
.dbn-breadcrumbs a {
  text-decoration: none;
  transition: color 160ms ease-out;
}

.dbn-breadcrumbs a:hover,
.dbn-breadcrumbs a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- 9. HOMEPAGE HERO ---------- */

/* Six rules. Each one is here because a native Elementor control cannot
   express it, not because CSS was quicker. Layout, spacing, colour, type,
   borders and the poster image are all set on the widgets themselves.

   Used on: Home (page 27), Hero band.
   Paired with: Elementor > Custom Code > "Homepage Hero Film". */


/* The film itself is now a NATIVE container Background Video on .dbn-hero:
   Hero > Style > Background > Video, with the poster set as Background
   Fallback and the darkening set as Background Overlay (gradient).
   Elementor keeps that embed muted, looping, chrome-free and pointer-inert
   on its own, so the layer containers, the scrim container and the whole
   'Homepage Hero Film' snippet are gone. Nothing here styles the film any
   more - it is all editable in the panel. */


/* .dbn-hero-proof — the HIA / guarantee chip.

   Why custom: a translucent panel over moving film. Elementor's Background
   Overlay paints above the container's own background but below its children,
   so it cannot tint the panel itself, and the classic Background colour picker
   cannot take a Global Color at 55%. backdrop-filter has no control at all. */
.dbn-hero-proof {
  background-color: color-mix(in srgb, var(--dbn-ink) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}


/* .dbn-hero-rule — hairlines inside the hero.

   Why custom: only the colour. Border style and width are set natively on each
   element, so they stay editable; a full-strength --dbn-line over film is far
   too loud, and a Global Color cannot carry alpha.

   Wrapped in :where() so this contributes zero specificity. If anyone sets a
   border colour on one of these elements in the editor, theirs wins — which is
   the behaviour a custom rule on a client site should have. */
:where(.dbn-hero-rule) {
  border-color: color-mix(in srgb, var(--dbn-white) 26%, transparent);
}


/* .dbn-hero background video - overscan.
   Why custom: YouTube draws the video's own title in the top-left of the
   player for the first seconds of playback, and Elementor sizes a background
   video to cover EXACTLY - here the player is 810px tall in a 740px band, so
   only 35px is cropped and that title lands inside the visible area. There is
   no native control for overscanning a background video.
   Scaling the video layer 1.2x from its centre lifts the player's top ~100px
   out of the band. The clipping is native: Hero > Layout > Overflow: Hidden.
   The rest of YouTube's chrome needs a hover to appear and can never get one,
   because Elementor sets pointer-events:none on this layer itself.
   Nothing else about the film is styled here - video, poster, overlay and
   height are all native controls on the Hero container.
   If YouTube ever draws a taller title, raise the number. */
.dbn-hero .elementor-background-video-container {
  transform: scale(1.2);
  animation: dbn-hero-film-in 700ms ease-out 1300ms both;
}

/* The film fades in over the poster instead of replacing it instantly.
   Why custom: Elementor inserts the YouTube iframe immediately, and that
   iframe paints opaque black until YouTube has buffered - so the poster set
   natively in Background > Video > Fallback was covered by a black rectangle
   for the first second or two of every visit. Elementor emits no 'playing'
   class or event to hook, and adding a script to listen for one is exactly
   the machinery this rebuild removed.
   A delayed fade needs no signal: the poster holds the band, then the film
   arrives. If the video is slow the poster simply holds longer, which is the
   safe direction to fail in. `both` keeps opacity at 0 during the delay. */
@keyframes dbn-hero-film-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Phone type scale for this band only.

   The client asked for smaller text on phones across the hero. Editing the
   Global Fonts' mobile sizes would be the tidy fix, but those presets drive
   every page including Jane's approved Why DBN, so that is not a change to
   make on the way past. Unlinking each widget from its global and typing sizes
   per device would scatter the type scale across a dozen widgets.

   So the band redefines the global typography *tokens* on itself. Elementor
   emits each preset as a custom property and every widget reads its size from
   that property, so overriding them here re-scales the whole band from one
   place while the presets themselves stay untouched. Desktop and tablet still
   follow the globals; only the phone step is pinned, and only inside .dbn-hero.

   To undo it, delete this block. To adjust it, change a number.
   If the same shrink is wanted site-wide, do it on the Global Fonts instead
   and delete this block. */
@media (max-width: 767px) {
  .dbn-hero {
    --e-global-typography-dbnh1-font-size: 29px;      /* was 34 */
    --e-global-typography-text-font-size: 15px;       /* was 16 */
    --e-global-typography-accent-font-size: 11px;     /* was 12 */
    --e-global-typography-dbnspec-font-size: 15px;    /* was 16 */
    --e-global-typography-dbnbodysm-font-size: 13px;  /* was 14 */
    --e-global-typography-dbnspeclbl-font-size: 11px; /* was 12 */
    --e-global-typography-dbnbtn-font-size: 14px;     /* was 15 */
  }
}


/* ---------- 10. HOMEPAGE - FIXED PRICE ---------- */

/* .dbn-compare-icon  /  .dbn-compare-icon--yes
   Apply via: Icon List widget > Advanced > CSS Classes
   Why custom: the Lucide icons are stroke-drawn SVGs (fill="none").
   Elementor's Icon List colour control paints `fill`, which turns a
   stroke-drawn icon into a solid blob, and the widget has no stroke
   control. Elementor writes that fill as a per-element rule scoring
   (0,4,1), which no reusable utility class can outrank - so !important
   is used here for the single job of neutralising fill.
   Colour is NOT hardcoded: it comes from Global Colors through
   Elementor's own --e-global-color-* variables, so editing the Global
   still repaints these icons.
   --yes = included (Teal), base = not included (Muted).
   Used on: Homepage > Fixed Price > the 8 comparison cells */
.dbn-compare-icon .elementor-icon-list-icon svg,
.dbn-compare-icon .elementor-icon-list-icon svg * {
  fill: none !important;
  stroke: currentColor;
}
.dbn-compare-icon .elementor-icon-list-icon {
  color: var(--e-global-color-dbnmuted);
}
.dbn-compare-icon--yes .elementor-icon-list-icon {
  color: var(--e-global-color-primary);
}


/* ---------- 11. HOMEPAGE - TWO SPECIFICATIONS ---------- */

/* .dbn-tier-image
   Apply via: Image widget > Advanced > CSS Classes
   Why custom: the two tier cards are a fluid 50/50 pair, so their width
   changes with the viewport. The Image widget offers Width, Height and
   Object Fit but no aspect-ratio control, and a fixed pixel height cannot
   hold a 3:2 crop across a fluid width. Object Fit: Cover is set natively.
   Same approach as .dbn-card-image in section 7. */
.dbn-tier-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* .dbn-tier--complete
   Apply via: Container > Advanced > CSS Classes
   The Luxe Turnkey card used to carry a Teal top edge as a quiet signal that
   the two tier cards are not the same weight. Removed 3 September 2026 at the
   client's request - it read as a stray green line, not a signal. The card now
   wears the same Line border on all four sides, set natively in Container >
   Border. Nothing here overrides it.
   To restore: put back
     html .elementor-kit-6 .dbn-tier--complete.e-con {
       border-top-color: var(--e-global-color-primary);
     }
   and set Border > Width top back to 3 on the container. The long .elementor-kit-6 is
   deliberate - Elementor writes the container border colour at (0,3,0), so
   html + .e-con is what wins on element count without !important. */


/* ---------- 12 Homepage Facades ---------- */
/* Renders are supplied at mixed crops; 4:3 keeps the row even. */
.dbn-facade-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Below the desktop five-up the row scrolls; snapping stops a card
   from being left half in view. */
.dbn-facades-row { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.dbn-facade { scroll-snap-align: start; }


/* ---------- 13 Homepage Reviews ---------- */
/* Rebuilt 31 August 2026 to the editorial layout used on the reference site:
   a ruled ornament, one large centred pull quote with its attribution, then
   the remaining reviews as plain columns separated by vertical hairlines.
   No cards, no stars, no avatars - the words carry it.

   Still the native Elementor Pro Testimonial Carousel, so the reviews stay in
   the widget's own Slides repeater and the client edits them in the editor.
   Everything structural is a widget control: slides per view, the 80px Space
   Between that opens the gutters, arrows, progress bar, all typography and
   all colour. What follows is only what the widget has no control for.

   IMPORTANT: never use a CSS unicode escape in this stylesheet. Every escape
   stored here has previously lost its backslash, so a star written as an
   escape reached the front end as the literal digits 2605. Write the
   character literally in UTF-8.

   Used on: Homepage (page 27), Reviews section. */

/* -- The ornament: a hairline with a diamond on its centre.
   Why custom: Elementor's Divider can break its line with an icon or with
   text, but not with a plain lozenge, and commissioning an icon for five
   pixels is not worth the request. The diamond is a rotated square drawn on
   the separator the widget already renders. The line weight, width, colour
   and the space above and below it all stay widget controls. */
.dbn-rev-rule .elementor-divider-separator { position: relative; }
.dbn-rev-rule .elementor-divider-separator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -3px 0 0 -3px;
  background-color: var(--e-global-color-primary);
  transform: rotate(45deg);
}

/* -- The columns.
   Slides carry no background, no border and no padding, so a column is just
   its text. The gutter between columns is the widget's Space Between control
   and the hairline is drawn down the middle of it.
   The leftmost column needs no special case: its hairline falls outside the
   swiper box, which Swiper clips.

   THE ONE COUPLING: -40px is half of the widget's Space Between (80px).
   If that control is changed, change this with it or the hairlines go off
   centre. Space Between is 0 on mobile, where one column shows at a time and
   there is nothing to divide. */
/* overflow:visible is the load-bearing part. Elementor's carousel base
   stylesheet sets every slide to overflow:hidden so a slide background can be
   clipped to its radius. These slides have neither, and that clip was eating
   the hairline, which is drawn in the gutter outside the slide box. The
   leftmost hairline is still clipped, by the swiper box one level up, which
   is exactly what should happen to it. */
.dbn-rev-carousel .swiper-slide { position: relative; height: auto; overflow: visible; }
.dbn-rev-carousel .swiper-slide::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40px;
  width: 1px;
  background-color: var(--e-global-color-dbnlnst);
}

/* -- The review itself.
   Upright, not italic: Elementor Pro's own stylesheet sets this widget's quote
   to font-style: italic and a linked Global Font locks the typography
   sub-controls, so there is no control that can unset it.

   The negative margins close a gap, not a design choice. Elementor's template
   prints the review on its own indented line, so the markup carries a newline
   and six tabs on each side of the text. As leading whitespace that would be
   stripped, but a ::before turns it into whitespace between two inline boxes,
   which collapses to one visible word space and pushes the text off the mark.
   0.28em is one IBM Plex Sans word space.
   Quote marks are drawn rather than typed so the review stays verbatim in the
   editor and nobody has to remember to add them to a new slide. */
html .elementor-kit-6 .dbn-rev-carousel .elementor-testimonial__text { font-style: normal; }
.dbn-rev-carousel .elementor-testimonial__text::before { content: '“'; margin-inline-end: -0.28em; }
.dbn-rev-carousel .elementor-testimonial__text::after { content: '”'; margin-inline-start: -0.28em; }

/* -- Attribution: a short rule, then the name over its context.
   The kit prefix is load-bearing. Elementor Pro's own stylesheet styles this
   cite at (0,3,0) and loads after the kit, so a bare
   .dbn-rev-carousel .elementor-testimonial__cite (0,2,0) silently loses.
   html + the kit class brings it to (0,3,1), which wins on element count with
   no !important. Reach for this before reaching for !important. */
html .elementor-kit-6 .dbn-rev-carousel .elementor-testimonial__footer { display: block; padding: 0; }
html .elementor-kit-6 .dbn-rev-carousel .elementor-testimonial__cite {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding-top: 32px;
  border: 0;
  font-style: normal;
  text-align: start;
}
html .elementor-kit-6 .dbn-rev-carousel .elementor-testimonial__cite::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 40px;
  height: 1px;
  background-color: var(--e-global-color-dbnsndp);
}
html .elementor-kit-6 .dbn-rev-carousel .elementor-testimonial__name { display: block; }
html .elementor-kit-6 .dbn-rev-carousel .elementor-testimonial__title { display: block; margin-top: 8px; }

/* -- Arrows and progress bar share the line under the columns.
   Why custom: Elementor centres the arrows vertically on the cards and gives
   the progress bar a fixed offset, with no control for either. Anchoring both
   to the foot of the widget means the columns can be any height, on any
   breakpoint, without moving them.
   Square rather than round, 34px, to match the reference. */
/* Elementor insets the swiper 32px on each side with a margin, so its
   default side-mounted arrows clear the slides. These arrows are at the foot,
   so that reserve is dead space: it pushes the first and last column in from
   the container edge and out of line with everything above them. There is no
   control for it. */
html .elementor-kit-6 .dbn-rev-carousel .elementor-main-swiper {
  /* Elementor ships this widget at width:95% with a 32px side margin, so its
     default side-mounted arrows clear the slides. These arrows are at the
     foot, so that reserve is dead space: it costs 64px off the right of the
     row and pushes the first column in from the container edge, out of line
     with everything above it. Neither value has a control. */
  width: 100%;
  margin-inline: 0;
  padding-bottom: 120px;
}
html .elementor-kit-6 .dbn-rev-carousel .elementor-swiper-button {
  top: auto;
  bottom: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--e-global-color-dbnsndp);
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}
html .elementor-kit-6 .dbn-rev-carousel .elementor-swiper-button-prev { left: auto; right: 42px; }
html .elementor-kit-6 .dbn-rev-carousel .elementor-swiper-button-next { left: auto; right: 0; }
/* The ring stays 34px because that is the reference. The hit area is pushed
   out to 44px so a thumb still lands on it. */
html .elementor-kit-6 .dbn-rev-carousel .elementor-swiper-button::after {
  content: '';
  position: absolute;
  inset: -5px;
}
html .elementor-kit-6 .dbn-rev-carousel .elementor-swiper-button:hover:not(.swiper-button-disabled) {
  background-color: var(--e-global-color-primary);
  border-color: var(--e-global-color-primary);
  color: var(--e-global-color-4f8b0d2);
}
html .elementor-kit-6 .dbn-rev-carousel .elementor-swiper-button.swiper-button-disabled { opacity: 0.3; }
/* The swiper box clips its overflow and these sit on its right edge, so an
   outward focus ring would be cut in half. Drawn inside instead. */
html .elementor-kit-6 .dbn-rev-carousel .elementor-swiper-button:focus-visible {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: -4px;
}

html .elementor-kit-6 .dbn-rev-carousel .swiper-pagination-progressbar {
  top: auto;
  bottom: 17px;
  left: 0;
  /* Clears the two 34px arrows, the 8px between them and 16px of air. */
  width: calc(100% - 92px);
  height: 1px;
  /* The widget's inactive-pagination control paints the dots, not the progress
     track, so without this the track keeps Swiper's default 25% black. */
  background-color: var(--e-global-color-dbnsndp);
}


/* ---------- 14 Homepage Display Home ---------- */
/* The card floats on the photograph rather than sitting flat against it. */
.dbn-display-card.e-con { box-shadow: 0 1px 2px rgb(18 38 42 / 0.04), 0 12px 32px -16px rgb(18 38 42 / 0.18); }


/* ---------- 15 Homepage Build Process ---------- */
/* The tab box - padding, typography, the active left bar - is set with the
   widget's own controls, because Elementor's stylesheet loads after the kit
   and would otherwise win. What is left here has no control behind it: the
   stage number, the payment column and the rule between rows. */
.dbn-proc-tabs .e-n-tabs-heading { counter-reset: dbn-stage; }

/* The separator is an inset shadow rather than a border, so it cannot fight
   the border-width the widget's own control writes. */
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title {
  counter-increment: dbn-stage;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: start;
  box-shadow: inset 0 -1px 0 var(--e-global-color-dbnline);
  transition: background-color 160ms ease;
}
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:last-of-type { box-shadow: none; }

/* Stage numbers come from a counter, so the editor holds only the name and
   reordering a stage renumbers the list on its own. */
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title::before {
  content: counter(dbn-stage, decimal-leading-zero);
  flex: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 1px;
  color: var(--e-global-color-dbnmuted);
  transition: color 160ms ease;
}
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title[aria-selected='true']::before { color: var(--e-global-color-primary); }

/* What falls due at each stage, so the list is the payment schedule before
   anything is opened. The six figures add to 100. */
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title::after {
  margin-inline-start: auto;
  padding-inline-start: 10px;
  flex: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 1px;
  color: var(--e-global-color-dbnmuted);
}
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(1)::after { content: 'DEPOSIT'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(2)::after { content: '5%'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(3)::after { content: '—'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(4)::after { content: '—'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(5)::after { content: '10%'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(6)::after { content: '50%'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(7)::after { content: '25%'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title:nth-of-type(8)::after { content: '10%'; }
html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title[aria-selected='true']::after { color: var(--e-global-color-secondary); }

html .elementor-kit-6 .dbn-proc-tabs .e-n-tab-title-text { line-height: 1.3; }

/* Beside the list the panel is a pane, so it takes a divider. Collapsed
   under its own row it is an accordion, so it takes the ground colour of
   the open row instead and the two read as one block. */
@media (min-width: 768px) {
  html .elementor-kit-6 .dbn-proc-tabs .e-n-tabs-content { border-inline-start: 1px solid var(--e-global-color-dbnline); }
}
@media (max-width: 767px) {
  html .elementor-kit-6 .dbn-proc-tabs .dbn-proc-panel.e-con { background-color: var(--e-global-color-accent); }
}

/* The payment bar is two containers, so its width stays an Elementor value
   the client can edit. */
.dbn-proc-fill.e-con { min-width: 0; }


/* ---------- 16 Homepage Closing CTA ---------- */
/* The phone number is a link, not a third button competing with the two
   real ones. */
.dbn-closing-phone .elementor-button { text-decoration: underline; text-underline-offset: 4px; }
.dbn-closing-phone .elementor-button-icon svg { width: 17px; height: 17px; }/* End custom CSS */