/* built assets/vendor/bootstrap/bootstrap.subset.css:39866:1786204667 assets/css/fonts.css:5836:1786209625 assets/css/duubeld.css:66009:1786289805 */
/* assets/vendor/bootstrap/bootstrap.subset.css */
/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--bs-warning-text-emphasis:#664d03;--bs-warning-bg-subtle:#fff3cd;--bs-warning-border-subtle:#ffe69c;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-bg:#e9ecef;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-bg:#f8f9fa;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-lg:0.5rem;--bs-form-valid-color:#198754;--bs-form-invalid-color:#dc3545}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ul{padding-left:2rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code{font-family:var(--bs-font-monospace);font-size:1em}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}progress{vertical-align:baseline}[hidden]{display:none!important}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.container{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}:root{}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0{--bs-gutter-x:0}.g-0{--bs-gutter-y:0}.g-1{--bs-gutter-x:0.25rem}.g-1{--bs-gutter-y:0.25rem}.g-2{--bs-gutter-x:0.5rem}.g-2{--bs-gutter-y:0.5rem}.g-3{--bs-gutter-x:1rem}.g-3{--bs-gutter-y:1rem}.g-4{--bs-gutter-x:1.5rem}.g-4{--bs-gutter-y:1.5rem}.g-5{--bs-gutter-x:3rem}.g-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0{--bs-gutter-x:0}.g-sm-0{--bs-gutter-y:0}.g-sm-1{--bs-gutter-x:0.25rem}.g-sm-1{--bs-gutter-y:0.25rem}.g-sm-2{--bs-gutter-x:0.5rem}.g-sm-2{--bs-gutter-y:0.5rem}.g-sm-3{--bs-gutter-x:1rem}.g-sm-3{--bs-gutter-y:1rem}.g-sm-4{--bs-gutter-x:1.5rem}.g-sm-4{--bs-gutter-y:1.5rem}.g-sm-5{--bs-gutter-x:3rem}.g-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0{--bs-gutter-x:0}.g-md-0{--bs-gutter-y:0}.g-md-1{--bs-gutter-x:0.25rem}.g-md-1{--bs-gutter-y:0.25rem}.g-md-2{--bs-gutter-x:0.5rem}.g-md-2{--bs-gutter-y:0.5rem}.g-md-3{--bs-gutter-x:1rem}.g-md-3{--bs-gutter-y:1rem}.g-md-4{--bs-gutter-x:1.5rem}.g-md-4{--bs-gutter-y:1.5rem}.g-md-5{--bs-gutter-x:3rem}.g-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0{--bs-gutter-x:0}.g-lg-0{--bs-gutter-y:0}.g-lg-1{--bs-gutter-x:0.25rem}.g-lg-1{--bs-gutter-y:0.25rem}.g-lg-2{--bs-gutter-x:0.5rem}.g-lg-2{--bs-gutter-y:0.5rem}.g-lg-3{--bs-gutter-x:1rem}.g-lg-3{--bs-gutter-y:1rem}.g-lg-4{--bs-gutter-x:1.5rem}.g-lg-4{--bs-gutter-y:1.5rem}.g-lg-5{--bs-gutter-x:3rem}.g-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0{--bs-gutter-x:0}.g-xl-0{--bs-gutter-y:0}.g-xl-1{--bs-gutter-x:0.25rem}.g-xl-1{--bs-gutter-y:0.25rem}.g-xl-2{--bs-gutter-x:0.5rem}.g-xl-2{--bs-gutter-y:0.5rem}.g-xl-3{--bs-gutter-x:1rem}.g-xl-3{--bs-gutter-y:1rem}.g-xl-4{--bs-gutter-x:1.5rem}.g-xl-4{--bs-gutter-y:1.5rem}.g-xl-5{--bs-gutter-x:3rem}.g-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0{--bs-gutter-x:0}.g-xxl-0{--bs-gutter-y:0}.g-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3{--bs-gutter-x:1rem}.g-xxl-3{--bs-gutter-y:1rem}.g-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5{--bs-gutter-x:3rem}.g-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 var(--bs-border-width)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.col-form-label{padding-top:calc(.375rem + var(--bs-border-width));padding-bottom:calc(.375rem + var(--bs-border-width));margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + var(--bs-border-width));padding-bottom:calc(.5rem + var(--bs-border-width));font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + var(--bs-border-width));padding-bottom:calc(.25rem + var(--bs-border-width));font-size:.875rem}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-valid-color)}.was-validated :valid~.valid-feedback{display:block}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-invalid-color)}.is-invalid~.invalid-feedback,.was-validated :invalid~.invalid-feedback{display:block}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-link-hover-color:var(--bs-body-color);--bs-dropdown-link-hover-bg:var(--bs-tertiary-bg);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:var(--bs-tertiary-color);--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--bs-dropdown-item-border-radius,0)}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.btn-group{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-group{border-radius:var(--bs-border-radius)}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:calc(var(--bs-border-width) * -1)}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:var(--bs-body-bg);--bs-pagination-border-width:var(--bs-border-width);--bs-pagination-border-color:var(--bs-border-color);--bs-pagination-border-radius:var(--bs-border-radius);--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:var(--bs-tertiary-bg);--bs-pagination-hover-border-color:var(--bs-border-color);--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:var(--bs-secondary-bg);--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:var(--bs-secondary-color);--bs-pagination-disabled-bg:var(--bs-secondary-bg);--bs-pagination-disabled-border-color:var(--bs-border-color);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.active>.page-link,.page-link.active{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(var(--bs-border-width) * -1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-warning{--bs-alert-color:var(--bs-warning-text-emphasis);--bs-alert-bg:var(--bs-warning-bg-subtle);--bs-alert-border-color:var(--bs-warning-border-subtle)}.progress{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color: ;--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-title-line-height:1.5;position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-opacity:0.9;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.carousel{position:relative}.offcanvas{--bs-offcanvas-zindex:1045;--bs-offcanvas-color:var(--bs-body-color);--bs-offcanvas-bg:var(--bs-body-bg);--bs-offcanvas-transition:transform 0.3s ease-in-out}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.show:not(.hiding){transform:none}.offcanvas.show{visibility:visible}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.clearfix::after{display:block;clear:both;content:""}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.d-block{display:block!important}.d-flex{display:flex!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top{border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:.5rem!important}.mb-4{margin-bottom:1.5rem!important}.ms-auto{margin-left:auto!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.row-gap-0{row-gap:0!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}.row-gap-4{row-gap:1.5rem!important}.row-gap-5{row-gap:3rem!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-wrap{white-space:normal!important}.visible{visibility:visible!important}@media (min-width:576px){.d-sm-block{display:block!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.row-gap-sm-0{row-gap:0!important}.row-gap-sm-1{row-gap:.25rem!important}.row-gap-sm-2{row-gap:.5rem!important}.row-gap-sm-3{row-gap:1rem!important}.row-gap-sm-4{row-gap:1.5rem!important}.row-gap-sm-5{row-gap:3rem!important}}@media (min-width:768px){.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-between{justify-content:space-between!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.row-gap-md-0{row-gap:0!important}.row-gap-md-1{row-gap:.25rem!important}.row-gap-md-2{row-gap:.5rem!important}.row-gap-md-3{row-gap:1rem!important}.row-gap-md-4{row-gap:1.5rem!important}.row-gap-md-5{row-gap:3rem!important}}@media (min-width:992px){.d-lg-none{display:none!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.align-items-lg-center{align-items:center!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mb-lg-0{margin-bottom:0!important}.ms-lg-0{margin-left:0!important}.gap-lg-1{gap:.25rem!important}.row-gap-lg-0{row-gap:0!important}.row-gap-lg-1{row-gap:.25rem!important}.row-gap-lg-2{row-gap:.5rem!important}.row-gap-lg-3{row-gap:1rem!important}.row-gap-lg-4{row-gap:1.5rem!important}.row-gap-lg-5{row-gap:3rem!important}}@media (min-width:1200px){.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.row-gap-xl-0{row-gap:0!important}.row-gap-xl-1{row-gap:.25rem!important}.row-gap-xl-2{row-gap:.5rem!important}.row-gap-xl-3{row-gap:1rem!important}.row-gap-xl-4{row-gap:1.5rem!important}.row-gap-xl-5{row-gap:3rem!important}}@media (min-width:1400px){.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.row-gap-xxl-0{row-gap:0!important}.row-gap-xxl-1{row-gap:.25rem!important}.row-gap-xxl-2{row-gap:.5rem!important}.row-gap-xxl-3{row-gap:1rem!important}.row-gap-xxl-4{row-gap:1.5rem!important}.row-gap-xxl-5{row-gap:3rem!important}}
/* assets/css/fonts.css */
/*
 * Self-hosted copies of the two families the site uses.
 *
 * Generated from:
 * https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;900&family=Barlow:wght@400;500;600&display=swap
 *
 * Served from this origin so the first paint no longer waits on
 * fonts.googleapis.com and fonts.gstatic.com -- two DNS lookups, two TLS
 * handshakes, and a render-blocking stylesheet that had to arrive before
 * the font files it names could even be requested.
 *
 * Inter used to be here as well, a third family for the nav links, the
 * dropdown items, the form labels, the footer links and the language
 * switcher. It cost 48 KB that was not preloaded, so the navigation
 * re-rendered in Barlow and then again in Inter on every first visit.
 * Those rules ask for Barlow now, which the page is already loading for
 * its body text.
 *
 * Barlow Condensed Light and Bold Italic used to be here too. Nothing asked
 * for either: the Light was reached only by accident, because a rule naming
 * the family without a weight asks for 400 and CSS resolves that downward.
 * Six faces, all of them chosen.
 */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-900-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-900-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* assets/css/duubeld.css */
/* ══ DARK THEME (default) ══ */
:root {
  /* What the browser renders in its own colours, rather than in ours:
     scrollbars, the popup a <select> opens, date pickers, spinner arrows,
     and the yellow-ish background Chrome puts behind an autofilled field.
     Without this they stayed in the operating system's scheme regardless of
     the theme, so a dark page could carry a white scrollbar down its edge
     and open a white dropdown out of a dark select. Not a colour we choose;
     a colour we tell the browser which end of to choose from. */
  color-scheme: dark;

  /* Two blues, because one cannot do both jobs and stay legible.
     --brand-blue fills things that carry white text: buttons, the phone
     button, the pricing table head. White on the old #1B9FD8 measured
     3.0:1 where 4.5 is the line, so it is darker now (4.75:1) and still
     clears 3:1 against the page for a non-text element.
     --brand-blue-text is the blue used AS text, which needs contrast with
     the page behind it rather than with white, so it differs per theme:
     bright on the dark theme, deep on the light one. */
  /* ── TYPE SCALE ──
     Eleven steps, each about 12-20% from the last, which is roughly where a
     reader starts seeing two sizes as different. The stylesheet had 32
     distinct sizes and 21 of the gaps between them were 0.05rem or less --
     0.78, 0.8, 0.82, 0.85, 0.88, 0.9, 0.92, 0.95 all existed as separate
     decisions nobody could see. Pick a step; do not invent a size. */
  --fs-1: 0.7rem;
  --fs-2: 0.8rem;
  --fs-3: 0.9rem;
  --fs-4: 1rem;
  --fs-5: 1.15rem;
  --fs-6: 1.35rem;
  --fs-7: 1.6rem;
  --fs-8: 1.9rem;
  --fs-9: 2.3rem;
  --fs-10: 2.8rem;
  --fs-11: 3.4rem;

  /* The same colours as channels, so a translucent wash can be mixed from
     the palette instead of being typed as a literal that stops tracking it.
     rgba(27,159,216,…) appeared at eight different alphas across this file:
     that is the blue as it was before the contrast work, still sitting in
     hovers, sparks and the numeral watermark long after the token moved. */
  /* States. The form component was carrying its own #D80003 -- a red that is
     neither the brand red nor anything else in here -- and nothing existed
     at all for success or warning. Sized for each theme's background. */
  --state-error: #FF8A80;
  --state-success: #7ED9A0;
  --state-warning: #F2C14E;

  --brand-blue-rgb: 15 123 168;
  --brand-blue-text-rgb: 27 159 216;
  --brand-red-rgb: 217 31 23;

  --brand-blue: #0F7BA8;
  --brand-blue-dark: #0C6588;
  --brand-blue-text: #1B9FD8;
  --brand-red: #D91F17;
  --brand-red-dark: #C01A12;
  --brand-red-text: #E8231A;

  --bg-body: #0E1218;
  --bg-section-alt: #161C25;
  --bg-section-deep: #0A0E14;
  --bg-card: #1E2733;
  /* The skeleton the contact form shows while it lazy-loads. Was #eee,
     written into the component, so the dark theme -- the default -- put a
     near-white slab where the form was about to be. */
  --bg-skeleton: #232D3A;
  --bg-skeleton-sheen: rgba(255,255,255,0.07);
  --bg-card-border: #2A3545;
  --bg-input: #161C25;
  --bg-input-focus: #1E2733;
  --bg-input-border: #2A3545;
  --bg-nav: rgba(10,14,20,0.97);
  --bg-dropdown: #1a2230;
  --bg-dropdown-border: #2A3545;
  --bg-why-visual: #0a0e14;
  --bg-footer: #060A10;
  /* Three steps, not one colour three times. body, muted and faint were all
     pure white, so the twenty rules that call for "muted" text got exactly
     what body text gets and the page had no tonal structure at all. */
  --text-body: #E4EAF0;
  --text-muted: #B9C4CF;
  --text-faint: #8E9BA8;
  --text-footer: #fff;
  --text-nav-link: #FFFFFF;
  --text-dropdown-item: #BDC8D4;
  --text-pricing-row-border: #1E2733;
  --text-footer-copy: #FFFFFF;
  --toggler-border: #2A3545;
  --toggler-icon-filter: invert(1);
  --hero-overlay: linear-gradient(110deg, rgba(6,10,16,0.95) 35%, rgba(6,10,16,0.6) 100%);
  --pricing-note-color: #4A5A6A;
  --hero-stripe: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-red) 100%);
  /* Deprecated: the name says orange and the value is blue. It exists
     because page content written in the CMS uses it -- the front page's
     "1998. aastast" is a <strong style="color:var(--orange)"> -- and
     removing it would leave that text unstyled. Nothing in this stylesheet
     uses it any more; new work says --brand-blue-text. */
  --orange: var(--brand-blue-text);
}

/* ══ LIGHT THEME ══ */
[data-theme="light"] {
  color-scheme: light;
  /* On a light page, blue and red text have to come down to meet it. */
  --brand-blue-text: #0B6E96;
  --state-error: #B3261E;
  --state-success: #1E7A44;
  --state-warning: #8A5A00;

  --brand-red-text: #B81A12;
  --bg-body: #F0F4F8;
  --bg-section-alt: #E4EBF2;
  --bg-section-deep: #E8EEF4;
  --bg-card: #FFFFFF;
  --bg-skeleton: #E2E8F0;
  --bg-skeleton-sheen: rgba(255,255,255,0.75);
  --bg-card-border: #CCD8E4;
  --bg-input: #FFFFFF;
  --bg-input-focus: #F8FAFC;
  --bg-input-border: #B8C8D8;
  --bg-nav: rgba(255,255,255,0.97);
  --bg-dropdown: #FFFFFF;
  --bg-dropdown-border: #CCD8E4;
  --bg-why-visual: #CDD8E4;
  --bg-footer: #0E1218;
  /* muted was #000: darker than body text, so the token meant to recede was
     the loudest thing on the page. The three steps go the way they read.
     Body steps back from #0E1218 too -- 17:1 against the page is past the
     point where more contrast stops helping and starts tiring. */
  --text-body: #1A222C;
  --text-muted: #3C4854;
  --text-faint: #5A6A7A;
  --text-footer: #8A9AAA;
  --text-nav-link: #1A2A3A;
  --text-dropdown-item: #1A2A3A;
  --text-pricing-row-border: #CCD8E4;
  --text-footer-copy: #fff;
  --toggler-border: #B8C8D8;
  --toggler-icon-filter: invert(0);
  --hero-overlay: linear-gradient(110deg, rgba(6,10,16,0.92) 35%, rgba(6,10,16,0.5) 100%);
  --pricing-note-color: #5A6A7A;
  /* Deprecated: the name says orange and the value is blue. It exists
     because page content written in the CMS uses it -- the front page's
     "1998. aastast" is a <strong style="color:var(--orange)"> -- and
     removing it would leave that text unstyled. Nothing in this stylesheet
     uses it any more; new work says --brand-blue-text. */
  --orange: var(--brand-blue-text);
}

/* ══ THEME TRANSITION ══ */
*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* ══ THEME TOGGLE ══ */
.theme-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--bg-card-border);
  background: var(--bg-card);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: var(--fs-4); flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
  margin-left: 0.5rem;
}
.theme-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue-text); transform: rotate(20deg); }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }

/* ── FONT STACKS ──
   Named once, with a fallback that is metrically close rather than whatever
   the browser calls "sans-serif". This is what a visitor reads during the
   swap, and what they read for good if a font fails to arrive. */
:root {
  --font-body: 'Barlow', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Segoe UI Semibold', 'Arial Narrow', 'Helvetica Neue Condensed', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-body);
  overflow-x: hidden;
}

/* ── ICONS ──
   Inline SVG, drawn by the x-icon component. Sized in em and filled with
   currentColor so a rule that sets font-size or color on an icon works the
   same way it did when these were glyphs in a webfont. The baseline nudge is
   what the font gave for free. */
.ico {
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ── TYPOGRAPHY ── */
/* ── HEADINGS ──
   Capitals are for labels: eyebrows, stat captions, buttons, breadcrumb
   chips, nav items -- things of a few words that the eye reads as a unit.
   A heading is a sentence, and Estonian sentences in capitals lose the
   shape of their diacritics (õ, ä, ö, ü) along with their readability.
   Headings that want capitals ask for them by name below. */
h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  /* The family has no 400, and a request for one resolves to the Light. A
     heading that sets its own weight overrides this; one that forgets gets
     something deliberate rather than the thinnest face in the file. */
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The two headings that are labels rather than sentences: the front page's
   own name for itself, and the band above each index. Detail pages carry a
   CMS title of any length and opt out again with --long. */
.hero h1,
.page-hero-title { text-transform: uppercase; }
.page-hero-title--long { text-transform: none; letter-spacing: 0.01em; }

/* ── NAV ── */
.navbar {
  background: var(--bg-nav);
  border-bottom: 2px solid var(--brand-blue);
  padding: 0.6rem 0;
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: blur(6px);
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 900; font-size: var(--fs-7);
  text-transform: uppercase;
  color: var(--text-body) !important;
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0; position: relative;
}

.navbar-brand img {
  height: 44px;
  width: auto;
  transition: transform .3s ease, filter .3s ease;
}

.navbar-brand:hover img {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 8px 14px rgb(var(--brand-blue-text-rgb) / .35));
}

.nav-link {
  font-family: var(--font-body);
  font-weight: 500; font-size: var(--fs-5);
  letter-spacing: 0.03em;
  color: var(--text-nav-link) !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--brand-blue-text) !important; }

.dropdown-menu {
  background: var(--bg-dropdown);
  border: 1px solid var(--bg-dropdown-border);
  border-top: 2px solid var(--brand-blue);
  min-width: 230px;
}

.dropdown-item {
  font-family: var(--font-body);
  font-size: var(--fs-4); font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-dropdown-item);
  padding: 0.55rem 1.2rem;
  transition: background 0.15s, color 0.15s;
}
.dropdown-item:hover { background: var(--brand-blue); color: #fff; }

.btn-call {
  background: var(--brand-blue); color: #fff !important;
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-4);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 1.2rem; border-radius: 3px; border: none;
  transition: background 0.2s, transform 0.1s;
  text-decoration: none;
}
.btn-call:hover { background: var(--brand-blue-dark); transform: scale(1.03); }

/* The small-screen twin: square, thumb-sized, no text. */
.btn-call-mobile {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-4);
}

.navbar-toggler { border: 1px solid var(--toggler-border); }
.navbar-toggler-icon { filter: var(--toggler-icon-filter); }

/* ── ALWAYS-DARK SURFACES ──
   The hero sits under a near-black overlay, and the footer and the CTA band
   are dark in both themes. The text colours the light theme picks are tuned
   for a light page, so inside these they go back to the bright pair. */
.hero, footer, .cta-band {
  --brand-blue-text: #1B9FD8;
  --brand-red-text: #E8231A;
  /* Text and hairlines inside these are always on dark, whichever theme is
     on, so components built from these tokens -- the outline button -- work
     on the hero and on a light section without knowing which they are in. */
  --text-body: #E4EAF0;
  --bg-card-border: rgba(255,255,255,0.45);
}

/* ── HERO ── */
.hero {
  position: relative;
  /* 100vh on a phone is the viewport with the browser chrome counted in, so
     the hero runs under the address bar and the buttons at its foot can sit
     off screen until the bar retracts. svh is the small viewport -- what is
     actually visible -- with vh left as the fallback for anything that does
     not know the unit. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden; background: #0d0d0d;
}

/* Three widths of the same picture, each in two formats. The preload links in
   the front page template carry the same breakpoints, so a browser only ever
   fetches the one it is going to draw.

   Every width is declared twice. The first declaration is the WebP copy on
   its own; the second offers AVIF first and names the type of each candidate,
   so a browser takes the AVIF only if it can actually decode it. Anything
   that does not understand image-set(), or understands it but not type(),
   drops the second declaration as invalid and keeps the first -- which is why
   the plain url() has to come first and cannot be folded in. */
.hero-bg {
  position: absolute; inset: 0;
  background:
    var(--hero-overlay),
    url('/assets/images/hero-1600.webp') center/cover no-repeat;
  background:
    var(--hero-overlay),
    image-set(
      url('/assets/images/hero-1600.avif') type('image/avif'),
      url('/assets/images/hero-1600.webp') type('image/webp')
    ) center/cover no-repeat;
}

/* Laptops. Most screens that are not a phone are also not 1600px wide, and
   the 1600px copy costs them 59 KB for pixels they cannot show. */
@media (max-width: 1400px) {
  .hero-bg {
    background:
      var(--hero-overlay),
      url('/assets/images/hero-1200.webp') center/cover no-repeat;
    background:
      var(--hero-overlay),
      image-set(
        url('/assets/images/hero-1200.avif') type('image/avif'),
        url('/assets/images/hero-1200.webp') type('image/webp')
      ) center/cover no-repeat;
  }
}

/* Phones get a 900px wide copy: same picture, half the bytes. */
@media (max-width: 900px) {
  .hero-bg {
    background:
      var(--hero-overlay),
      url('/assets/images/hero-900.webp') center/cover no-repeat;
    background:
      var(--hero-overlay),
      image-set(
        url('/assets/images/hero-900.avif') type('image/avif'),
        url('/assets/images/hero-900.webp') type('image/webp')
      ) center/cover no-repeat;
  }
}

.sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.spark {
  position: absolute; width: 3px; height: 3px;
  border-radius: 50%; background: var(--brand-blue-text);
  opacity: 0; animation: sparkFly 3s infinite;
}

@keyframes sparkFly {
  0%   { opacity: 0; transform: translate(0,0) scale(1); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}

.hero-content { position: relative; z-index: 2; }

.hero-label {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-4);
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--brand-blue-text);
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1rem;
}
.hero-label::before, .hero-label::after {
  content: ''; width: 30px; height: 2px;
  background: var(--hero-stripe);
}

.hero h1 {
  font-size: clamp(3.2rem, 8vw, 7rem);
  font-weight: 900; line-height: 0.95;
  margin-bottom: 0.3rem; color: #ffffff;
}
.hero h1 .highlight { color: var(--brand-blue-text); display: block; }
.hero h1 .highlight-red { color: var(--brand-red-text); }

.hero-sub {
  font-size: var(--fs-5); color: rgba(220,230,240,0.88);
  max-width: 480px; line-height: 1.6; margin-bottom: 2rem;
}

.btn-primary-dd {
  background: var(--brand-blue); color: #fff;
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-5);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.85rem 2rem; border: none; border-radius: 3px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary-dd:hover { background: var(--brand-blue-dark); transform: translateY(-2px); color: #fff; }
.btn-primary-dd.red { background: var(--brand-red); }
.btn-primary-dd.red:hover { background: var(--brand-red-dark); }

/* Built from tokens rather than from white, so it also works on a light
   section. It was white text with a white border: on the hero and the
   gradient band, where it started life, that is right; on the front page's
   services section in the light theme it was 1.1:1 -- an invisible button. */
.btn-outline-dd {
  background: transparent; color: var(--text-body);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-5);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.85rem 2rem; border: 2px solid var(--bg-card-border);
  border-radius: 3px; cursor: pointer; text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-outline-dd:hover {
  border-color: var(--brand-blue); color: var(--brand-blue-text);
  background: rgb(var(--brand-blue-text-rgb) / 0.08);
}

.hero-stats {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--hero-stripe); z-index: 2;
}

.stat-item {
  padding: 1.1rem 1rem; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.stat-item:last-child { border-right: none; }

.stat-num {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-10); line-height: 1; color: #fff;
}

.stat-label {
  font-size: var(--fs-2); text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.85); font-weight: 600;
}

/* ── SECTION TITLES ── */
.section-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-3); font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--brand-blue-text); margin-bottom: 0.5rem;
}

/* Section headings, in the same face as every other heading on the site.
   They were the one thing set in Barlow while the hero, the page bands and
   the card titles were all Barlow Condensed -- two heading fonts, for no
   reason anybody could point at. Case is left alone: these are sentences,
   sometimes long ones, and the bands shout enough already. */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 3.8rem);
  font-weight: 900; line-height: 1.02;
  text-transform: none; letter-spacing: 0.01em;
  color: var(--text-body); margin-top: 0; margin-bottom: 1rem;
}

.section-line {
  width: 60px; height: 3px;
  background: var(--hero-stripe); margin-bottom: 1.5rem;
}

/* ── ABOUT ── */
.about-section { background: var(--bg-section-alt); padding: 6rem 0; }

.about-img-wrap { position: relative; }
.about-img-wrap img {
  width: 100%; height: 420px; object-fit: cover;
  filter: grayscale(20%) contrast(1.1);
}

.about-badge {
  position: absolute; bottom: -20px; right: -20px;
  background: var(--brand-red); color: #fff;
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase; text-align: center;
  padding: 1.2rem 1.5rem; width: 130px; line-height: 1.1;
}
.about-badge .big { font-size: var(--fs-10); display: block; }
.about-badge .small { font-size: var(--fs-2); letter-spacing: 0.1em; }

.about-text p { color: var(--text-muted); line-height: 1.75; font-size: var(--fs-4); }

/* ── SERVICES ── */
.services-section { background: var(--bg-body); padding: 3rem 0; }

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-top: 3px solid transparent;
  padding: 1rem 1.1rem; height: 100%;
  transition: border-top-color 0.25s, transform 0.25s, box-shadow 0.25s;
  cursor: default;
}
.service-card:hover {
  border-top-color: var(--brand-blue);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}

.service-icon {
  width: 50px; height: 50px;
  background: rgb(var(--brand-blue-text-rgb) / 0.1);
  border: 1px solid rgb(var(--brand-blue-text-rgb) / 0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-6); color: var(--brand-blue-text);
  margin-bottom: 1.2rem; border-radius: 3px;
}

/* The front page draws these cards as links, three across. */
.service-card-link { text-decoration: none; display: block; height: 100%; }
.service-card-link .service-card { display: flex; flex-direction: column; }
.service-card-more {
  margin-top: auto; padding-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-4); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--brand-blue-text);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap 0.2s;
}
.service-card-link:hover .service-card-more { gap: 0.8rem; }

.service-card h2, .service-card h3 {
  font-size: var(--fs-8); font-weight: 700;
  color: var(--text-body); margin-bottom: 0.7rem;
	text-transform: none;
}
.service-card p {
  font-size: var(--fs-5); color: var(--text-muted);
  line-height: 1.6; margin-bottom: 0;
}

.service-card a {
	text-decoration: none;
}

/* ── WHY US ── */
.why-section { background: var(--bg-section-alt); padding: 6rem 0; }

.why-item { display: flex; gap: 1.2rem; margin-bottom: 2rem; }

.why-num {
  font-family: var(--font-display);
  font-size: var(--fs-10); font-weight: 900;
  /* 0.18 read as a rendering fault rather than a device: 1.3:1 against the
     section behind it, faint enough that the numerals looked half-loaded.
     They are decoration -- the markup says aria-hidden -- but decoration
     should look deliberate. */
  color: rgb(var(--brand-blue-text-rgb) / 0.34); line-height: 1; min-width: 60px;
}

.why-content h3 {
  /* 600, not 700: Barlow ships 400, 500 and 600 here, so a 700 was drawn as
     this same 600 anyway. Saying what is drawn beats asking for a weight the
     family does not have. */
  font-family: var(--font-body);
  font-size: var(--fs-5); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-body); margin-top: 0; margin-bottom: 0.4rem;
}
.why-content p {
  font-size: var(--fs-3); color: var(--text-muted);
  line-height: 1.6; margin: 0;
}

/* The class sits on the grid column, so the background used to paint across
   the column's gutter padding and the image floated inside it -- a frame,
   thicker at the bottom than the sides, that looked like a mistake because it
   was one. The backdrop belongs behind the picture, not behind the gutter. */
.why-visual { position: relative; }
.why-visual > picture,
.why-visual > img {
  display: block; height: 100%; min-height: 380px;
  background: var(--bg-why-visual); overflow: hidden;
}
.why-visual img {
  width: 100%; height: 100%; min-height: 380px;
  object-fit: cover; opacity: 1; display: block;
}
.why-visual-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgb(var(--brand-blue-text-rgb) / 0.2) 0%, rgb(var(--brand-red-rgb) / 0.1) 100%);
}

/* ── PRICING ── */
.pricing-section { background: var(--bg-section-deep); padding: 6rem 0; }

.pricing-table { width: 100%; border-collapse: collapse; }
.pricing-table thead tr { background: var(--brand-blue); }
.pricing-table thead th {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-4);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; padding: 0.9rem 1.2rem; border: none;
}
.pricing-table tbody tr {
  border-bottom: 1px solid var(--text-pricing-row-border);
  transition: background 0.15s;
}
.pricing-table tbody tr:hover { background: rgb(var(--brand-blue-text-rgb) / 0.07); }
.pricing-table tbody td {
  font-size: var(--fs-4); color: var(--text-muted); padding: 0.8rem 1.2rem;
}
.pricing-table tbody td:first-child { color: var(--text-body); font-weight: 500; }

.price-highlight {
  color: var(--brand-blue-text); font-weight: 700;
  font-family: var(--font-display); font-size: var(--fs-5);
}

.pricing-note {
  font-size: var(--fs-2); color: var(--pricing-note-color);
  margin-top: 1rem; line-height: 1.5;
}

/* ── CONTACT ── */
/* 5rem, not 6: the contact template carried style="padding:5rem 0" inline,
   which is what the page has actually looked like, and an inline style also
   beat the phone-sized override further down. The value moves here so the
   stylesheet governs it. */
.contact-section { background: var(--bg-section-alt); padding: 5rem 0; }

.contact-box {
  background: var(--bg-card); border: 1px solid var(--bg-card-border); padding: 2.5rem;
}

.contact-item {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem;
}

.contact-icon {
  width: 42px; height: 42px; background: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-5); color: #fff; border-radius: 3px; flex-shrink: 0;
}

.contact-info h2 {
  /* Same: 700 in Barlow resolves to the 600 face. */
  font-family: var(--font-body);
  font-size: var(--fs-2); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--brand-blue-text);
  margin-top: 0; margin-bottom: 0.2rem; font-weight: 600;
}
.contact-info p, .contact-info a {
  font-size: var(--fs-4); color: var(--text-body); margin: 0; text-decoration: none;
}
.contact-info a:hover { color: var(--brand-blue-text); }

.form-control-dd {
  background: var(--bg-input); border: 1px solid var(--bg-input-border);
  color: var(--text-body); padding: 0.75rem 1rem;
  border-radius: 3px; font-size: var(--fs-5); width: 100%;
  transition: border-color 0.2s; outline: none;
  font-family: var(--font-body);
}
.form-control-dd:focus { border-color: var(--brand-blue); background: var(--bg-input-focus); color: var(--text-body); }
.form-control-dd::placeholder { color: var(--text-faint); }
textarea.form-control-dd { resize: vertical; min-height: 130px; }

/* The privacy consent line under a form: a real target, at the size of the
   fields it belongs to. */
.consent-check {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: var(--fs-4); line-height: 1.5; color: var(--text-body);
  cursor: pointer; padding: 0.35rem 0;
}
.consent-check input[type="checkbox"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 0.1rem 0 0;
  accent-color: var(--brand-blue); cursor: pointer;
}
.consent-check a { color: var(--brand-blue-text); }

.form-label-dd {
  font-family: var(--font-body);
  font-size: var(--fs-6); font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 0.35rem; display: block;
}

/* ── FOOTER ── */
footer {
  background: var(--bg-footer);
  border-top: 3px solid var(--brand-blue);
  padding: 3rem 0 1.5rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 900; font-size: var(--fs-8);
  text-transform: uppercase; color: #ffffff;
}
.footer-brand span { color: var(--brand-blue-text); }

.footer-tagline {
  font-size: var(--fs-3); color: var(--text-footer);
  text-transform: none; letter-spacing: 0.15em; margin-top: 0.3rem;
}

.footer-nav a {
	font-family: var(--font-body);
  font-weight: 500; letter-spacing: 0.07em;
  color: #fff; text-decoration: none; font-size: var(--fs-5);
  display: block; margin-bottom: 0.5rem; transition: color 0.2s;
}
.footer-nav a:hover { color: var(--brand-blue-text); }

.footer-copy {
  font-size: var(--fs-4); color: var(--text-footer-copy);
  border-top: 1px solid #222;
  margin-top: 2rem; padding-top: 1.5rem; text-align: center;
}

/* ── SCROLL ANIMATIONS ── */
/* .js-reveal, not a bare .fade-up. The class is put on <html> by the inline
   script in the head, and only after the IntersectionObserver that removes it
   again has been successfully constructed. Without the prefix these rules hid
   the page's content unconditionally and left it to a deferred script to
   bring back, so any failure in that script -- not just scripting being off,
   which is all the old <noscript> block covered -- meant a blank page below
   the band. Do not drop the prefix. */
.js-reveal .fade-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal .fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── UTILITY ── */
.text-orange { color: var(--brand-blue-text); }

/* Below the laptop breakpoint the sections keep their 6rem of air above and
   below, which is 96px of nothing between every block on a 400px screen.
   A phone is not a small desktop; it is a narrow one.

   Only the selectors declared ABOVE this block belong here. A media query
   carries no extra specificity, so an override here loses the tie to any
   plain declaration further down the file -- and silently, with no warning
   from anywhere. .page-hero, .cta-band, .service-detail and .blog-section
   were all sitting in this block doing nothing for that reason; they have
   moved to the foot of the file, below their own declarations. Check where
   a rule is declared before adding it here. */
@media (max-width: 991px) {
  .about-section,
  .why-section,
  .pricing-section,
  .contact-section { padding: 3.5rem 0; }
  .services-section { padding: 2.5rem 0; }
  footer { padding-top: 2.5rem; }
}

@media (max-width: 767px) {
  /* Was a flat 3rem: "TEEMANTSAAGIMINE" is sixteen characters of condensed
     900, about 345px at that size, against 336px of usable width on a 360px
     phone. It scales with the screen now and stops growing at the size the
     fixed value used. */
  .hero h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }

  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
  .about-badge { right: 0; bottom: 0; }
  .pricing-table { font-size: var(--fs-3); }
}

/* ══ MOBILE DRAWER ══ */

.hamburger-btn {
  width: 42px; height: 42px;
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 5px; padding: 4px; border-radius: 6px; transition: background 0.2s;
}
.hamburger-btn:hover { background: rgb(var(--brand-blue-text-rgb) / 0.12); }
.hamburger-btn span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--text-body);
  transition: transform 0.35s cubic-bezier(.77,0,.18,1), opacity 0.2s, width 0.3s;
}
.hamburger-btn span:nth-child(1) { width: 26px; }
.hamburger-btn span:nth-child(2) { width: 20px; }
.hamburger-btn span:nth-child(3) { width: 26px; }
.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
  width: 26px; transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
  width: 26px; transform: translateY(-7px) rotate(-45deg);
}

#mobileDrawer { display: contents; }

.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 1100; opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: all; }

.drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw); z-index: 1200;
  background: var(--bg-section-alt);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.5);
  overflow-y: auto; overflow-x: hidden;
}
.drawer-panel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--hero-stripe);
}
.drawer-open .drawer-panel { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--bg-card-border); flex-shrink: 0;
}
.drawer-logo {
  height: 40px; width: auto;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), filter 0.3s ease;
}
.drawer-header:hover .drawer-logo {
  transform: scale(1.08) rotate(-1.5deg);
  filter: drop-shadow(0 0 7px rgb(var(--brand-blue-text-rgb) / 0.5));
}
.drawer-close {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--bg-card-border);
  background: var(--bg-card); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: var(--fs-4);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.drawer-close:hover {
  background: var(--brand-red); color: #fff;
  border-color: var(--brand-red); transform: rotate(90deg);
}

.drawer-nav { flex: 1; padding: 1rem 0; }

/* A parent row is a link plus a toggle for its children: two controls, so
   two elements -- a button inside a link is not markup. */
.drawer-row { display: flex; align-items: stretch; }
.drawer-row .drawer-link { flex: 1 1 auto; min-width: 0; }
.drawer-group-toggle {
  flex: 0 0 auto; width: 56px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-4);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.25s;
}
.drawer-group-toggle:hover { background: var(--bg-card); color: var(--brand-blue-text); }
.drawer-group-toggle[aria-expanded="true"] { color: var(--brand-blue-text); transform: rotate(180deg); }

.drawer-subnav { display: none; padding: 0.2rem 0 0.6rem; background: rgba(0,0,0,0.18); }
.drawer-subnav.open { display: block; }
.drawer-sublink {
  display: block; padding: 0.7rem 1.5rem 0.7rem 3.6rem;
  text-decoration: none; color: var(--text-muted);
  font-size: var(--fs-4); line-height: 1.3;
  transition: color 0.2s, background 0.2s;
}
.drawer-sublink:hover { color: var(--brand-blue-text); background: var(--bg-card); }

.drawer-link {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem; text-decoration: none;
  border: none; background: transparent; width: 100%;
  text-align: left; cursor: pointer; position: relative;
  transition: background 0.2s;
}
.drawer-link::after {
  content: ''; position: absolute; left: 3px; top: 0; bottom: 0;
  width: 3px; background: var(--brand-blue);
  transform: scaleY(0); transition: transform 0.25s ease;
}
.drawer-link:hover::after,
.drawer-link[aria-expanded="true"]::after { transform: scaleY(1); }
.drawer-link:hover { background: var(--bg-card); }
.drawer-link[aria-expanded="true"] { background: var(--bg-card); }

.drawer-link-num {
  font-family: var(--font-display);
  font-size: var(--fs-1); font-weight: 700; color: var(--brand-blue-text);
  letter-spacing: 0.1em; min-width: 22px; opacity: 0.6;
}
.drawer-link-text {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-6); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-body); flex: 1; transition: color 0.2s;
}
.drawer-link:hover .drawer-link-text,
.drawer-link[aria-expanded="true"] .drawer-link-text { color: var(--brand-blue-text); }

.drawer-link-arrow {
  color: var(--text-faint); font-size: var(--fs-3);
  transition: transform 0.2s, color 0.2s;
}
.drawer-link:hover .drawer-link-arrow { transform: translateX(4px); color: var(--brand-blue-text); }

.drawer-link-chevron {
  color: var(--text-faint); font-size: var(--fs-3);
  transition: transform 0.3s ease, color 0.2s;
}
.drawer-link[aria-expanded="true"] .drawer-link-chevron {
  transform: rotate(180deg); color: var(--brand-blue-text);
}

.drawer-group { overflow: hidden; }
.drawer-sub {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.77,0,.18,1);
  background: var(--bg-body);
}
.drawer-sub.open { max-height: 500px; }

.drawer-sub-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1.5rem 0.65rem 3.8rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-4); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); text-decoration: none;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
  border-left: 2px solid transparent;
}
.drawer-sub-link::before {
  content: '—'; font-size: var(--fs-1); color: var(--brand-red-text); flex-shrink: 0;
}
.drawer-sub-link:hover {
  color: var(--brand-blue-text); padding-left: 4.2rem;
  background: rgb(var(--brand-blue-text-rgb) / 0.05);
}

.drawer-footer {
  padding: 1.5rem; border-top: 1px solid var(--bg-card-border); flex-shrink: 0;
}
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--brand-blue); color: #fff;
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-5); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 0.9rem 1.5rem;
  text-decoration: none; border-radius: 4px;
  margin-bottom: 1rem; transition: background 0.2s;
}
.drawer-cta:hover { background: var(--brand-blue-dark); color: #fff; }

.drawer-socials {
  display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1rem;
}
.drawer-social-icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--bg-card-border); background: var(--bg-card);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: var(--fs-4);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.drawer-social-icon:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.drawer-since {
  text-align: center; font-size: var(--fs-2); color: var(--text-faint);
  letter-spacing: 0.08em; text-transform: none; margin: 0;
}

.drawer-open .drawer-link { animation: drawerLinkIn 0.4s ease both; }
.drawer-open .drawer-link:nth-child(1) { animation-delay: 0.12s; }
.drawer-open .drawer-link:nth-child(2) { animation-delay: 0.17s; }
.drawer-open .drawer-link:nth-child(3) { animation-delay: 0.22s; }
.drawer-open .drawer-link:nth-child(4) { animation-delay: 0.27s; }
.drawer-open .drawer-link:nth-child(5) { animation-delay: 0.32s; }

@keyframes drawerLinkIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (min-width: 992px) {
  .hamburger-btn { display: none !important; }
  .drawer-backdrop, .drawer-panel { display: none !important; }
}

/* ══ LOGO THEME SWITCHING ══ */
.logo-dark  { display: block !important; }
.logo-light { display: none  !important; }
[data-theme="light"] .logo-dark  { display: none  !important; }
[data-theme="light"] .logo-light { display: block !important; }

/* ══ LANGUAGE SWITCHER — DESKTOP ══ */
.lang-sw { position: relative; display: flex; align-items: center; }

.lang-btn {
  display: flex; align-items: center; gap: 0.3rem;
  height: 44px; padding: 0 0.8rem;
  background: transparent; border: 1px solid var(--bg-card-border);
  border-radius: 4px; color: var(--text-nav-link);
  font-family: var(--font-body);
  font-weight: 600; font-size: var(--fs-2);
  text-transform: uppercase; letter-spacing: 0.12em;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lang-btn:hover,
.lang-sw.open .lang-btn {
  border-color: var(--brand-blue); color: var(--brand-blue-text);
  background: rgb(var(--brand-blue-text-rgb) / 0.07);
}
.lang-btn .lb-flag { font-size: var(--fs-4); line-height: 1; }
.lang-btn .lb-code { font-size: var(--fs-2); }
.lang-btn .lb-caret { font-size: var(--fs-1); opacity: 0.55; transition: transform 0.22s; }
.lang-sw.open .lb-caret { transform: rotate(180deg); }

.lang-panel {
  position: absolute; top: calc(100% + 7px); right: 0; min-width: 140px;
  background: var(--bg-dropdown); border: 1px solid var(--bg-dropdown-border);
  border-top: 2px solid var(--brand-blue);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  z-index: 2000; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.lang-sw.open .lang-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-opt {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.58rem 1rem; background: transparent; border: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-3); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dropdown-item); cursor: pointer; text-align: left;
  transition: background 0.13s, color 0.13s;
}
.lang-opt:hover          { background: var(--brand-blue); color: #fff; }
.lang-opt.is-active      { color: var(--brand-blue-text); }
.lang-opt.is-active:hover{ color: #fff; }
.lang-opt .lo-flag       { font-size: var(--fs-4); }
.lang-opt .lo-check      { margin-left: auto; font-size: var(--fs-1); color: var(--brand-blue-text); opacity: 0; }
.lang-opt.is-active .lo-check  { opacity: 1; }
.lang-opt:hover .lo-check      { color: #fff; opacity: 1; }

/* ══ LANGUAGE SWITCHER — MOBILE ══ */
.drawer-lang {
  display: flex; gap: 0.45rem;
  padding: 0.9rem 1.5rem 0.6rem;
  border-top: 1px solid var(--bg-card-border);
}
.dlang-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 0.35rem; padding: 0.5rem 0.3rem;
  background: transparent; border: 1px solid var(--bg-card-border);
  border-radius: 3px; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-2); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.dlang-btn:hover       { border-color: var(--brand-blue); color: var(--brand-blue-text); }
.dlang-btn.is-active   { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.dlang-btn .dl-flag    { font-size: var(--fs-4); }

/* ══════════════════════════════════════════════════
   PAGE HERO — inner pages
══════════════════════════════════════════════════ */
.page-hero {
  position: relative; padding: 5rem 0 3.5rem; overflow: hidden;
  background: var(--bg-section-deep);
}
.page-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--hero-stripe);
}
.page-hero-bg {
  position: absolute; inset: 0; opacity: 0.06;
  background: url('/assets/images/page-texture.webp') center/cover no-repeat;
}
.page-hero-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-3); font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--brand-blue-text); margin-bottom: 0.6rem;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900; line-height: 1; color: var(--text-body);
  /* Case is decided in the headings block near the top, where the --long
     modifier can override it. Declaring it again here, further down the
     file, made the modifier lose. */
  letter-spacing: 0.02em;
  margin-bottom: 0.8rem;
}
.page-hero-title span { color: var(--brand-blue-text); }
.page-hero-sub {
  font-size: var(--fs-4); color: var(--text-muted); max-width: 520px; line-height: 1.65;
}

.breadcrumb-dd {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-2); font-weight: 600;
  text-transform: none; letter-spacing: 0.1em;
  color: var(--text-faint); margin-top: 1.5rem;
}
.breadcrumb-dd a { color: var(--text-faint); text-decoration: none; transition: color 0.2s; }
.breadcrumb-dd a:hover { color: var(--brand-blue-text); }
.breadcrumb-dd .bc-sep { color: var(--text-faint); font-size: var(--fs-1); }
.breadcrumb-dd .bc-current { color: var(--brand-blue-text); }

/* ══════════════════════════════════════════════════
   CTA BAND
══════════════════════════════════════════════════ */
.cta-band {
  background: var(--hero-stripe); padding: 4.5rem 0; text-align: center;
}
.cta-band h2 {
  color: #fff; font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900; margin-bottom: 0.5rem;
}
.cta-band p { color: rgba(255,255,255,0.85); font-size: var(--fs-4); margin-bottom: 2rem; }

/* A white button, in either theme. --brand-blue-text is bright on the dark
   theme, which is 3:1 on white, so this one is pinned to the deep blue. */
.btn-primary-white {
  background: #fff; color: #0B6E96;
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-5); text-transform: uppercase;
  letter-spacing: 0.1em; padding: 0.85rem 2rem; border: none; border-radius: 3px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary-white:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); color: #0C6588; }

/* ══════════════════════════════════════════════════
   SERVICE DETAIL SECTIONS
══════════════════════════════════════════════════ */
.service-detail { padding: 5rem 0; }
.service-detail:nth-child(odd) { background: var(--bg-body); }
.service-detail:nth-child(even) { background: var(--bg-section-alt); }

.service-detail-img {
  width: 100%; height: 380px; object-fit: cover;
  filter: grayscale(15%) contrast(1.05);
}
.service-feature-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.service-feature-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.4rem 0; color: var(--text-muted); font-size: var(--fs-4); line-height: 1.5;
}
.service-feature-list li .ico { color: var(--brand-blue-text); margin-top: 2px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════
   MAP PLACEHOLDER
══════════════════════════════════════════════════ */
.map-placeholder {
  background: var(--bg-card); border: 1px solid var(--bg-card-border);
  height: 320px; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.75rem; color: var(--text-faint);
}
.map-placeholder .ico { font-size: var(--fs-9); color: var(--brand-blue-text); opacity: 0.4; }
.map-placeholder p { font-size: var(--fs-3); margin: 0; text-align: center; }

/* ══════════════════════════════════════════════════
   BLOG CARDS
══════════════════════════════════════════════════ */
.blog-section { background: var(--bg-body); padding: 3rem 0; }

.blog-card {
  background: var(--bg-card); border: 1px solid var(--bg-card-border);
  border-top: 3px solid transparent; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: border-top-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.blog-card:hover {
  border-top-color: var(--brand-blue); transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}

.blog-card-img { height: 210px; overflow: hidden; }
.blog-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }

.blog-card-body {
  padding: 1.5rem; flex: 1; display: flex; flex-direction: column;
}

.blog-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-1); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; padding: 0.2rem 0.6rem;
  background: rgb(var(--brand-blue-text-rgb) / 0.12); color: var(--brand-blue-text);
  border: 1px solid rgb(var(--brand-blue-text-rgb) / 0.25); border-radius: 2px;
  margin-bottom: 0.75rem; text-decoration: none;
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-10) !important; font-weight: 600;
  color: var(--text-body); margin-bottom: 0.6rem; line-height: 1.25;
  text-decoration: none; display: block; transition: color 0.2s;
}
.blog-card-title:hover { color: var(--brand-blue-text); }
/* The featured card is wider, so its title can be bigger. Nothing else about
   it changes -- same family, same weight, same case as the cards below. */
.blog-card-title--featured { font-size: var(--fs-11) !important; }

.blog-card-excerpt {
  font-size: var(--fs-3); color: var(--text-muted);
  line-height: 1.65; flex: 1; margin-bottom: 1.2rem;
}

.blog-meta {
  display: flex; align-items: center; gap: 1rem;
  font-size: var(--fs-2); color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.blog-meta .ico { color: var(--brand-blue-text); }

.blog-read-more {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-5); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--brand-blue-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap 0.2s, color 0.2s;
}
.blog-read-more:hover { color: var(--brand-blue-dark); gap: 0.7rem; }

/* ══════════════════════════════════════════════════
   BLOG ARTICLE
══════════════════════════════════════════════════ */
.article-section { background: var(--bg-body); padding: 5rem 0; }

/* The hero band already ends in 3.5rem of its own padding. The section beneath
   it then opened with another 5rem, so the breadcrumb and the first line of
   the page sat 136px apart on the sixteen pages built from this template --
   the nine services, the four posts and the three price lists.

   3rem is not a new number: the services and blog indexes already use it, and
   they are the two pages nobody has complained about. Only the top is
   touched; 5rem below the article, before the footer, is right as it is.

   Adjacent-sibling deliberately. The GDPR page uses .article-section with no
   hero above it, so its section opens straight under the navbar and keeps the
   full 5rem it needs. */
.page-hero + .article-section,
.page-hero + .contact-section { padding-top: 3rem; }

/* .article-section is declared after the responsive block further up this
   file, so an override placed there would lose to it on specificity ties.
   This one sits below the declaration it has to beat. */
@media (max-width: 991px) {
  .article-section { padding: 2.5rem 0; }
  .page-hero + .article-section,
  .page-hero + .contact-section { padding-top: 2rem; }
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 6rem); font-weight: 700;
  color: var(--text-body); line-height: 1.1;
  margin-bottom: 1rem; letter-spacing: 0.02em;
	text-transform: none;
}

.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem;
  font-size: var(--fs-5); color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 2rem;
}
.article-meta .ico { color: var(--brand-blue-text); }

.article-hero-img {
  width: 100%; max-height: 460px; object-fit: cover;
  margin-bottom: 2.5rem;
}

.article-body {
  /* 91 characters a line, measured, at line-height 1.5. Past about 75 the
     eye starts losing its place on the way back to the left margin, and a
     tight leading makes that worse. The column stays as wide as it is --
     the sidebar and the pictures need it -- but the text inside it stops
     at a readable measure. */
  font-size: var(--fs-5); color: var(--text-muted); line-height: 1.65;
  max-width: 64ch;
}
.article-body h2 {
  font-size: var(--fs-7); font-weight: 700; color: var(--brand-blue-text);
  margin: 2.5rem 0 0.5rem; letter-spacing: 0.02em;
}
.article-body h3 {
  font-size: var(--fs-6); font-weight: 700; color: var(--text-body);
  margin: 2rem 0 0.8rem;
}
.article-body p { margin-bottom: 1.4rem; }
.article-body ul, .article-body ol { margin-bottom: 1.4rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0; }
.article-body strong { color: var(--text-body); }
.article-body a { color: var(--brand-blue-text); }
.article-body a:hover { color: var(--brand-blue-dark); }
.article-body blockquote {
  border-left: 3px solid var(--brand-blue);
  padding: 1rem 1.5rem;
  background: var(--bg-card); color: var(--text-muted);
  font-style: italic; font-size: var(--fs-5); margin: 2rem 0;
}
.article-divider {
  border: none; border-top: 1px solid var(--bg-card-border);
  margin: 2.5rem 0;
}

/* Sidebar */
.sidebar-card {
  background: var(--bg-card); border: 1px solid var(--bg-card-border);
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.sidebar-title {
  font-family: var(--font-display); font-size: var(--fs-5);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--brand-blue-text); margin-bottom: 1rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--bg-card-border);
}
.sidebar-post-link {
  display: flex; gap: 0.75rem; text-decoration: none;
  margin-bottom: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--bg-card-border);
}
.sidebar-post-link:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-post-img { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; }
.sidebar-post-title {
  font-family: var(--font-display); font-size: var(--fs-6);
  font-weight: 600; color: var(--text-body); line-height: 1.3; transition: color 0.2s;
}
.sidebar-post-link:hover .sidebar-post-title { color: var(--brand-blue-text); }
.sidebar-post-date {
  /* Barlow Condensed ships 300, 600, 700 and 900. An element that names the
     family without naming a weight asks for 400, and CSS resolves 400
     downward -- to the Light. These dates were being drawn in a face nobody
     chose, and pulling a 21 KB file down to do it. */
  font-size: var(--fs-2); color: var(--text-faint); margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.sidebar-category-list { list-style: none; padding: 0; margin: 0; }
.sidebar-category-list li {
  border-bottom: 1px solid var(--bg-card-border); padding: 0;
}
.sidebar-category-list li:last-child { border-bottom: none; }
.sidebar-category-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 0; text-decoration: none;
  font-family: var(--font-display); font-size: var(--fs-6);
  font-weight: 600; letter-spacing: 0.05em;
  color: var(--text-muted); transition: color 0.2s;
}
.sidebar-category-list a:hover { color: var(--brand-blue-text); }
.sidebar-category-list span {
  background: rgb(var(--brand-blue-text-rgb) / 0.12); color: var(--brand-blue-text);
  border-radius: 2px; font-size: var(--fs-6);
  padding: 0.1rem 0.4rem; font-family: var(--font-display);
  font-weight: 600;
}

/* ══ PRICING PAGE EXTRAS ══ */
.pricing-faq { background: var(--bg-section-alt); padding: 5rem 0; }
.faq-item {
  border-bottom: 1px solid var(--bg-card-border); padding: 1.5rem 0;
}
.faq-item:first-child { border-top: 1px solid var(--bg-card-border); }
.faq-q {
  font-family: var(--font-display); font-size: var(--fs-5);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-body); margin-bottom: 0.6rem;
}
.faq-a { font-size: var(--fs-4); color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ══════════════════════════════════════════════════
   SERVICE LIST VIEW (services-list.html)
══════════════════════════════════════════════════ */
.svc-grid-section { background: var(--bg-body); padding: 5rem 0; }

.svc-grid-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.svc-grid-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 56px rgba(0,0,0,0.28);
}

/* image wrapper — aspect-ratio keeps it proportional in any column width */
.svc-grid-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-section-deep);
  flex-shrink: 0;
}
.svc-grid-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.05);
  transition: transform 0.55s ease, filter 0.4s ease;
}
.svc-grid-card:hover .svc-grid-img img {
  transform: scale(1.08);
  filter: grayscale(0%) contrast(1.08) brightness(0.88);
}

/* dark gradient at bottom of image */
.svc-grid-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,10,16,0.72) 0%, rgba(6,10,16,0.06) 55%);
  transition: opacity 0.3s ease;
}
.svc-grid-card:hover .svc-grid-img-overlay { opacity: 0.9; }

/* service number badge — top-left */
.svc-grid-num {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: var(--brand-blue);
  padding: 0.22rem 0.65rem; z-index: 1;
}

/* icon — bottom-right of image */
.svc-grid-icon {
  position: absolute; bottom: 1rem; right: 1rem;
  width: 46px; height: 46px;
  background: rgba(6,10,16,0.55);
  border: 1px solid rgb(var(--brand-blue-text-rgb) / 0.45);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-6); color: var(--brand-blue-text);
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.svc-grid-card:hover .svc-grid-icon {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

/* card body */
.svc-grid-body {
  padding: 1.5rem 1.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 3px solid transparent;
  transition: border-top-color 0.3s;
}
.svc-grid-card:hover .svc-grid-body { border-top-color: var(--brand-blue); }

.svc-grid-title {
  font-family: var(--font-display);
  font-size: var(--fs-6); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-body); line-height: 1.1;
  margin-bottom: 0.65rem;
}

.svc-grid-desc {
  font-size: var(--fs-3); color: var(--text-muted);
  line-height: 1.68; flex: 1; margin-bottom: 1.1rem;
}

.svc-grid-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem;
}
.svc-grid-tag {
  font-family: var(--font-display);
  font-size: var(--fs-1); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.18rem 0.52rem;
  background: rgb(var(--brand-blue-text-rgb) / 0.08);
  color: var(--brand-blue-text);
  border: 1px solid rgb(var(--brand-blue-text-rgb) / 0.2);
  border-radius: 2px;
}

.svc-grid-link {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand-blue-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap 0.2s, color 0.2s;
  margin-top: auto;
}
.svc-grid-link:hover { gap: 0.75rem; color: var(--brand-blue-dark); }

/* featured card — taller image ratio */
.svc-grid-card--featured .svc-grid-img { aspect-ratio: 16 / 9; }
.svc-grid-card--featured .svc-grid-title { font-size: var(--fs-7); }

/* Stats strip between hero and grid */
.svc-stats-strip {
  background: var(--bg-section-deep);
  border-top: 1px solid var(--bg-card-border);
  border-bottom: 1px solid var(--bg-card-border);
  padding: 2rem 0;
}
.svc-stat {
  text-align: center;
  padding: 0 1rem;
  border-right: 1px solid var(--bg-card-border);
}
.svc-stat:last-child { border-right: none; }
.svc-stat-num {
  font-family: var(--font-display);
  font-weight: 900; font-size: var(--fs-9); line-height: 1;
  color: var(--brand-blue-text); display: block;
}
.svc-stat-label {
  font-size: var(--fs-2); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-faint);
  font-weight: 600; margin-top: 0.3rem;
}

/* nav dropdown divider */
.dropdown-divider { border-color: var(--bg-card-border) !important; margin: 0.25rem 0; }

/* ── FORM STATES ──
   The public form ships its own stylesheet with a hard-coded red in it.
   These override it with the palette, so an error on a dark page and an
   error on a light one are both legible and both the same idea. */
.element-error,
.error-msg,
.invalid-feedback { color: var(--state-error); font-size: var(--fs-3); }

.form-control-dd.is-invalid,
.form-control-dd[aria-invalid="true"] { border-color: var(--state-error); }

.msge-success { color: var(--state-success); }
.msge-warning { color: var(--state-warning); }

/* ── FOCUS ──
   The stylesheet defined exactly one focus style, on form inputs. Everything
   else fell to Bootstrap, which removes the browser's outline and hands back
   a ring in its own indigo -- a colour from no part of this site -- or, for
   the theme's own controls, hands back nothing.

   One ring, in the brand blue, on anything a keyboard can reach. :focus-visible
   rather than :focus, so a mouse click does not draw it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-blue-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Inside the blue and gradient bands the blue ring would disappear, so those
   take a white one. */
.cta-band :where(a, button):focus-visible,
.btn-primary-dd:focus-visible,
.btn-call:focus-visible,
.drawer-cta:focus-visible {
  outline-color: #fff;
}

/* Bootstrap's indigo ring on nav links, replaced by the shared one above. */
.nav-link:focus-visible { box-shadow: none; }

/* ══════════════════════════════════════════════════
   PHONE SPACING, PART TWO
   ══════════════════════════════════════════════════

   These four belong with the rest of the ≤991px block further up the file,
   and were written there. They never applied: a media query adds no
   specificity, and all four are declared after that block, so the plain
   desktop rule won every tie. Measured live at 386px before this: .page-hero
   was still 80px/56px instead of 48px/36px, and .cta-band still 72px instead
   of 48px -- the phone was getting desktop spacing on every page.

   They sit at the foot of the file so they are below the declarations they
   have to beat. If any of these selectors is ever redeclared lower down, this
   stops working again with no warning. */
@media (max-width: 991px) {
  .page-hero { padding: 3rem 0 2.25rem; }
  .cta-band { padding: 3rem 0; }
  .service-detail { padding: 3rem 0; }
  .blog-section { padding: 2.5rem 0; }
}

/* ══════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════

   "Reduce", not "none": an operating-system setting a visitor has gone and
   turned on, usually because motion makes them ill. Nothing here removes an
   effect that carries meaning -- every one of these is decoration, and the
   page reads the same standing still.

   At the foot of the file so it wins the specificity ties, which this
   stylesheet has already lost twice. */
@media (prefers-reduced-motion: reduce) {

  /* The scroll reveal. The blocks are simply already there -- .visible still
     gets added by the observer, it just has nothing left to animate. */
  .js-reveal .fade-up,
  .js-reveal .fade-up.visible {
    opacity: 1; transform: none; transition: none;
  }

  /* Sparks fly continuously across the hero for as long as the page is open,
     which is the single most persistent movement on the site. */
  .spark { animation: none; opacity: 0; }

  /* The drawer links stagger in one after another as the menu opens. */
  .drawer-open .drawer-link { animation: none; opacity: 1; transform: none; }

  /* Jumping to an anchor, and the contact form scrolling itself to the first
     validation error, both animate the whole viewport.

     !important because a later same-specificity `html { scroll-behavior }`
     demonstrably did not override the earlier one when tested in the browser
     -- whatever the cause, this declaration is not worth leaving to it. */
  html { scroll-behavior: auto !important; }

  /* Everything else: hovers, the theme fade, the drawer panel sliding.
     Reduced to a duration short enough not to read as motion, rather than
     zero, so states that depend on a transition still settle. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}