/* ==== assets/css/bootstrap.min.css ==== */
@charset "UTF-8";/*!
 * Bootstrap v5.0.2 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",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-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-font-sans-serif);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}.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}.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}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}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,optgroup,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]::-webkit-calendar-picker-indicator{display:none}[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}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:calc(1.625rem + 4.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-size:calc(1.525rem + 3.3vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-size:calc(1.375rem + 1.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:#6c757d}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5)}.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.3333333333%}.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.6666666667%}@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.3333333333%}.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.6666666667%}}@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.3333333333%}.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.6666666667%}}@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.3333333333%}.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.6666666667%}}@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.3333333333%}.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.6666666667%}}@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.3333333333%}.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.6666666667%}}.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,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.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,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.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,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.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,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.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,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.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,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;--bs-table-striped-color:#212529;--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:#212529;--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:#212529;--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:#212529;vertical-align:top;border-color:#dee2e6}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:last-child)>:last-child>*{border-bottom-color:currentColor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:var(--bs-table-striped-bg);color:var(--bs-table-striped-color)}.table-active{--bs-table-accent-bg:var(--bs-table-active-bg);color:var(--bs-table-active-color)}.table-hover>tbody>tr:hover{--bs-table-accent-bg:var(--bs-table-hover-bg);color:var(--bs-table-hover-color)}.table-primary{--bs-table-bg:#cfe2ff;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:#000;border-color:#bacbe6}.table-secondary{--bs-table-bg:#e2e3e5;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:#000;border-color:#cbccce}.table-success{--bs-table-bg:#d1e7dd;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:#000;border-color:#bcd0c7}.table-info{--bs-table-bg:#cff4fc;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:#000;border-color:#badce3}.table-warning{--bs-table-bg:#fff3cd;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:#000;border-color:#e6dbb9}.table-danger{--bs-table-bg:#f8d7da;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:#000;border-color:#dfc2c4}.table-light{--bs-table-bg:#f8f9fa;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:#000;border-color:#dfe0e1}.table-dark{--bs-table-bg:#212529;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:#fff;border-color:#373b3e}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:#6c757d}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;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){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;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){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + (.5rem + 2px));padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + (1rem + 2px));padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + (.75rem + 2px))}textarea.form-control-sm{min-height:calc(1.5em + (.5rem + 2px))}textarea.form-control-lg{min-height:calc(1.5em + (1rem + 2px))}.form-control-color{max-width:3rem;height:auto;padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{height:1.5em;border-radius:.25rem}.form-control-color::-webkit-color-swatch{height:1.5em;border-radius:.25rem}.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;-moz-padding-start:calc(0.75rem - 3px);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:#e9ecef}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-input{width:1em;height:1em;margin-top:.25em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{width:2em;margin-left:-2.5em;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}.form-range{width:100%;height:1.5rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.form-range:disabled::-moz-range-thumb{background-color:#adb5bd}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-select{height:calc(3.5rem + 2px);line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;height:100%;padding:1rem .75rem;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control{padding:1rem .75rem}.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus{z-index:3}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#198754}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(25,135,84,.9);border-radius:.25rem}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#198754;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#198754}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#198754}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#198754}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#198754}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group .form-control.is-valid,.input-group .form-select.is-valid,.was-validated .input-group .form-control:valid,.was-validated .input-group .form-select:valid{z-index:1}.input-group .form-control.is-valid:focus,.input-group .form-select.is-valid:focus,.was-validated .input-group .form-control:valid:focus,.was-validated .input-group .form-select:valid:focus{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.25rem}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#dc3545}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#dc3545}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#dc3545}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group .form-control.is-invalid,.input-group .form-select.is-invalid,.was-validated .input-group .form-control:invalid,.was-validated .input-group .form-select:invalid{z-index:2}.input-group .form-control.is-invalid:focus,.input-group .form-select.is-invalid:focus,.was-validated .input-group .form-control:invalid:focus,.was-validated .input-group .form-select:invalid:focus{z-index:3}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;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:#212529}.btn-check:focus+.btn,.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-primary:hover{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-check:focus+.btn-primary,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca;box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}.btn-check:active+.btn-primary,.btn-check:checked+.btn-primary,.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0a58ca;border-color:#0a53be}.btn-check:active+.btn-primary:focus,.btn-check:checked+.btn-primary:focus,.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5c636a;border-color:#565e64}.btn-check:focus+.btn-secondary,.btn-secondary:focus{color:#fff;background-color:#5c636a;border-color:#565e64;box-shadow:0 0 0 .25rem rgba(130,138,145,.5)}.btn-check:active+.btn-secondary,.btn-check:checked+.btn-secondary,.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#565e64;border-color:#51585e}.btn-check:active+.btn-secondary:focus,.btn-check:checked+.btn-secondary:focus,.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-success{color:#fff;background-color:#198754;border-color:#198754}.btn-success:hover{color:#fff;background-color:#157347;border-color:#146c43}.btn-check:focus+.btn-success,.btn-success:focus{color:#fff;background-color:#157347;border-color:#146c43;box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-check:active+.btn-success,.btn-check:checked+.btn-success,.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#146c43;border-color:#13653f}.btn-check:active+.btn-success:focus,.btn-check:checked+.btn-success:focus,.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#198754;border-color:#198754}.btn-info{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-info:hover{color:#000;background-color:#31d2f2;border-color:#25cff2}.btn-check:focus+.btn-info,.btn-info:focus{color:#000;background-color:#31d2f2;border-color:#25cff2;box-shadow:0 0 0 .25rem rgba(11,172,204,.5)}.btn-check:active+.btn-info,.btn-check:checked+.btn-info,.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#000;background-color:#3dd5f3;border-color:#25cff2}.btn-check:active+.btn-info:focus,.btn-check:checked+.btn-info:focus,.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(11,172,204,.5)}.btn-info.disabled,.btn-info:disabled{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-warning{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#000;background-color:#ffca2c;border-color:#ffc720}.btn-check:focus+.btn-warning,.btn-warning:focus{color:#000;background-color:#ffca2c;border-color:#ffc720;box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-check:active+.btn-warning,.btn-check:checked+.btn-warning,.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#000;background-color:#ffcd39;border-color:#ffc720}.btn-check:active+.btn-warning:focus,.btn-check:checked+.btn-warning:focus,.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#bb2d3b;border-color:#b02a37}.btn-check:focus+.btn-danger,.btn-danger:focus{color:#fff;background-color:#bb2d3b;border-color:#b02a37;box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-check:active+.btn-danger,.btn-check:checked+.btn-danger,.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#b02a37;border-color:#a52834}.btn-check:active+.btn-danger:focus,.btn-check:checked+.btn-danger:focus,.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-light{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:focus+.btn-light,.btn-light:focus{color:#000;background-color:#f9fafb;border-color:#f9fafb;box-shadow:0 0 0 .25rem rgba(211,212,213,.5)}.btn-check:active+.btn-light,.btn-check:checked+.btn-light,.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:active+.btn-light:focus,.btn-check:checked+.btn-light:focus,.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(211,212,213,.5)}.btn-light.disabled,.btn-light:disabled{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-dark{color:#fff;background-color:#212529;border-color:#212529}.btn-dark:hover{color:#fff;background-color:#1c1f23;border-color:#1a1e21}.btn-check:focus+.btn-dark,.btn-dark:focus{color:#fff;background-color:#1c1f23;border-color:#1a1e21;box-shadow:0 0 0 .25rem rgba(66,70,73,.5)}.btn-check:active+.btn-dark,.btn-check:checked+.btn-dark,.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1a1e21;border-color:#191c1f}.btn-check:active+.btn-dark:focus,.btn-check:checked+.btn-dark:focus,.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(66,70,73,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#212529;border-color:#212529}.btn-outline-primary{color:#0d6efd;border-color:#0d6efd}.btn-outline-primary:hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.5)}.btn-check:active+.btn-outline-primary,.btn-check:checked+.btn-outline-primary,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:active+.btn-outline-primary:focus,.btn-check:checked+.btn-outline-primary:focus,.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#0d6efd;background-color:transparent}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:focus+.btn-outline-secondary,.btn-outline-secondary:focus{box-shadow:0 0 0 .25rem rgba(108,117,125,.5)}.btn-check:active+.btn-outline-secondary,.btn-check:checked+.btn-outline-secondary,.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:active+.btn-outline-secondary:focus,.btn-check:checked+.btn-outline-secondary:focus,.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .25rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-success{color:#198754;border-color:#198754}.btn-outline-success:hover{color:#fff;background-color:#198754;border-color:#198754}.btn-check:focus+.btn-outline-success,.btn-outline-success:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-check:active+.btn-outline-success,.btn-check:checked+.btn-outline-success,.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#fff;background-color:#198754;border-color:#198754}.btn-check:active+.btn-outline-success:focus,.btn-check:checked+.btn-outline-success:focus,.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#198754;background-color:transparent}.btn-outline-info{color:#0dcaf0;border-color:#0dcaf0}.btn-outline-info:hover{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:focus+.btn-outline-info,.btn-outline-info:focus{box-shadow:0 0 0 .25rem rgba(13,202,240,.5)}.btn-check:active+.btn-outline-info,.btn-check:checked+.btn-outline-info,.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:active+.btn-outline-info:focus,.btn-check:checked+.btn-outline-info:focus,.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .25rem rgba(13,202,240,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#0dcaf0;background-color:transparent}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:focus+.btn-outline-warning,.btn-outline-warning:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-check:active+.btn-outline-warning,.btn-check:checked+.btn-outline-warning,.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:active+.btn-outline-warning:focus,.btn-check:checked+.btn-outline-warning:focus,.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:focus+.btn-outline-danger,.btn-outline-danger:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-check:active+.btn-outline-danger,.btn-check:checked+.btn-outline-danger,.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:active+.btn-outline-danger:focus,.btn-check:checked+.btn-outline-danger:focus,.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:focus+.btn-outline-light,.btn-outline-light:focus{box-shadow:0 0 0 .25rem rgba(248,249,250,.5)}.btn-check:active+.btn-outline-light,.btn-check:checked+.btn-outline-light,.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:active+.btn-outline-light:focus,.btn-check:checked+.btn-outline-light:focus,.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .25rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-dark{color:#212529;border-color:#212529}.btn-outline-dark:hover{color:#fff;background-color:#212529;border-color:#212529}.btn-check:focus+.btn-outline-dark,.btn-outline-dark:focus{box-shadow:0 0 0 .25rem rgba(33,37,41,.5)}.btn-check:active+.btn-outline-dark,.btn-check:checked+.btn-outline-dark,.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#212529;border-color:#212529}.btn-check:active+.btn-outline-dark:focus,.btn-check:checked+.btn-outline-dark:focus,.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .25rem rgba(33,37,41,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#212529;background-color:transparent}.btn-link{font-weight:400;color:#0d6efd;text-decoration:underline}.btn-link:hover{color:#0a58ca}.btn-link.disabled,.btn-link:disabled{color:#6c757d}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.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,.dropend,.dropstart,.dropup{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{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:.125rem}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(0,0,0,.15)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#1e2125;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#0d6efd}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#212529}.dropdown-menu-dark{color:#dee2e6;background-color:#343a40;border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item{color:#dee2e6}.dropdown-menu-dark .dropdown-item:focus,.dropdown-menu-dark .dropdown-item:hover{color:#fff;background-color:rgba(255,255,255,.15)}.dropdown-menu-dark .dropdown-item.active,.dropdown-menu-dark .dropdown-item:active{color:#fff;background-color:#0d6efd}.dropdown-menu-dark .dropdown-item.disabled,.dropdown-menu-dark .dropdown-item:disabled{color:#adb5bd}.dropdown-menu-dark .dropdown-divider{border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item-text{color:#dee2e6}.dropdown-menu-dark .dropdown-header{color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.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}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn~.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem;color:#0d6efd;text-decoration:none;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:#0a58ca}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-link{margin-bottom:-1px;background:0 0;border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6;isolation:isolate}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{background:0 0;border:0;border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#0d6efd}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;text-decoration:none;white-space:nowrap}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem;transition:box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 .25rem}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@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:.5rem;padding-left:.5rem}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.55)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.55);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.55)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.55)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.55)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:1rem 1rem}.card-title{margin-bottom:.5rem}.card-subtitle{margin-top:-.25rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1rem}.card-header{padding:.5rem 1rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.5rem 1rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.5rem;margin-bottom:-.5rem;margin-left:-.5rem;border-bottom:0}.card-header-pills{margin-right:-.5rem;margin-left:-.5rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1rem;border-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-group>.card{margin-bottom:.75rem}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:1rem 1.25rem;font-size:1rem;color:#212529;text-align:left;background-color:#fff;border:0;border-radius:0;overflow-anchor:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:#0c63e4;background-color:#e7f1ff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.125)}.accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");transform:rotate(-180deg)}.accordion-button::after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.25rem;transition:transform .2s ease-in-out}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.accordion-header{margin-bottom:0}.accordion-item{background-color:#fff;border:1px solid rgba(0,0,0,.125)}.accordion-item:first-of-type{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.accordion-item:first-of-type .accordion-button{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.accordion-item:last-of-type .accordion-button.collapsed{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.accordion-item:last-of-type .accordion-collapse{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.accordion-body{padding:1rem 1.25rem}.accordion-flush .accordion-collapse{border-width:0}.accordion-flush .accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush .accordion-item:first-child{border-top:0}.accordion-flush .accordion-item:last-child{border-bottom:0}.accordion-flush .accordion-item .accordion-button{border-radius:0}.breadcrumb{display:flex;flex-wrap:wrap;padding:0 0;margin-bottom:1rem;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:#6c757d}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#0d6efd;text-decoration:none;background-color:#fff;border:1px solid #dee2e6;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:#0a58ca;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;color:#0a58ca;background-color:#e9ecef;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item.active .page-link{z-index:3;color:#fff;background-color:#0d6efd;border-color:#0d6efd}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;background-color:#fff;border-color:#dee2e6}.page-link{padding:.375rem .75rem}.page-item:first-child .page-link{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{color:#084298;background-color:#cfe2ff;border-color:#b6d4fe}.alert-primary .alert-link{color:#06357a}.alert-secondary{color:#41464b;background-color:#e2e3e5;border-color:#d3d6d8}.alert-secondary .alert-link{color:#34383c}.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-success .alert-link{color:#0c4128}.alert-info{color:#055160;background-color:#cff4fc;border-color:#b6effb}.alert-info .alert-link{color:#04414d}.alert-warning{color:#664d03;background-color:#fff3cd;border-color:#ffecb5}.alert-warning .alert-link{color:#523e02}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert-danger .alert-link{color:#6a1a21}.alert-light{color:#636464;background-color:#fefefe;border-color:#fdfdfe}.alert-light .alert-link{color:#4f5050}.alert-dark{color:#141619;background-color:#d3d3d4;border-color:#bcbebf}.alert-dark .alert-link{color:#101214}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:1rem}}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#0d6efd;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:1s linear infinite progress-bar-stripes;animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:.25rem}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>li::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.5rem 1rem;color:#212529;text-decoration:none;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#0d6efd;border-color:#0d6efd}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 1px}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#084298;background-color:#cfe2ff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#084298;background-color:#bacbe6}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#084298;border-color:#084298}.list-group-item-secondary{color:#41464b;background-color:#e2e3e5}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#41464b;background-color:#cbccce}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#41464b;border-color:#41464b}.list-group-item-success{color:#0f5132;background-color:#d1e7dd}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#0f5132;background-color:#bcd0c7}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#0f5132;border-color:#0f5132}.list-group-item-info{color:#055160;background-color:#cff4fc}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#055160;background-color:#badce3}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#055160;border-color:#055160}.list-group-item-warning{color:#664d03;background-color:#fff3cd}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#664d03;background-color:#e6dbb9}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#664d03;border-color:#664d03}.list-group-item-danger{color:#842029;background-color:#f8d7da}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#842029;background-color:#dfc2c4}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#842029;border-color:#842029}.list-group-item-light{color:#636464;background-color:#fefefe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#636464;background-color:#e5e5e5}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#636464;border-color:#636464}.list-group-item-dark{color:#141619;background-color:#d3d3d4}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#141619;background-color:#bebebf}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#141619;border-color:#141619}.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.btn-close:hover{color:#000;text-decoration:none;opacity:.75}.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}.btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}.toast{width:350px;max-width:100%;font-size:.875rem;pointer-events:auto;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);border-radius:.25rem}.toast:not(.showing):not(.show){opacity:0}.toast.hide{display:none}.toast-container{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:.75rem}.toast-header{display:flex;align-items:center;padding:.5rem .75rem;color:#6c757d;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05);border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.toast-header .btn-close{margin-right:-.375rem;margin-left:.75rem}.toast-body{padding:.75rem;word-wrap:break-word}.modal{position:fixed;top:0;left:0;z-index:1060;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;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.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.modal-header .btn-close{padding:.5rem .5rem;margin:-.5rem -.5rem -.5rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}.modal-footer>*{margin:.25rem}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}.modal-fullscreen .modal-footer{border-radius:0}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}.modal-fullscreen-sm-down .modal-footer{border-radius:0}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}.modal-fullscreen-md-down .modal-footer{border-radius:0}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}.modal-fullscreen-lg-down .modal-footer{border-radius:0}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}.modal-fullscreen-xl-down .modal-footer{border-radius:0}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}.modal-fullscreen-xxl-down .modal-footer{border-radius:0}}.tooltip{position:absolute;z-index:1080;display:block;margin:0;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;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[data-popper-placement^=right],.bs-tooltip-end{padding:0 .4rem}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[data-popper-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[data-popper-placement^=left],.bs-tooltip-start{padding:0 .4rem}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1070;display:block;max-width:276px;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;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f0f0f0}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem 1rem;margin-bottom:0;font-size:1rem;background-color:#f0f0f0;border-bottom:1px solid rgba(0,0,0,.2);border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:1rem 1rem;color:#212529}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-next-icon,.carousel-dark .carousel-control-prev-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:.75s linear infinite spinner-border;animation:.75s linear infinite spinner-border}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:.75s linear infinite spinner-grow;animation:.75s linear infinite spinner-grow}.spinner-grow-sm{width:1rem;height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{-webkit-animation-duration:1.5s;animation-duration:1.5s}}.offcanvas{position:fixed;bottom:0;z-index:1050;display:flex;flex-direction:column;max-width:100%;visibility:hidden;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem}.offcanvas-header .btn-close{padding:.5rem .5rem;margin-top:-.5rem;margin-right:-.5rem;margin-bottom:-.5rem}.offcanvas-title{margin-bottom:0;line-height:1.5}.offcanvas-body{flex-grow:1;padding:1rem 1rem;overflow-y:auto}.offcanvas-start{top:0;left:0;width:400px;border-right:1px solid rgba(0,0,0,.2);transform:translateX(-100%)}.offcanvas-end{top:0;right:0;width:400px;border-left:1px solid rgba(0,0,0,.2);transform:translateX(100%)}.offcanvas-top{top:0;right:0;left:0;height:30vh;max-height:100%;border-bottom:1px solid rgba(0,0,0,.2);transform:translateY(-100%)}.offcanvas-bottom{right:0;left:0;height:30vh;max-height:100%;border-top:1px solid rgba(0,0,0,.2);transform:translateY(100%)}.offcanvas.show{transform:none}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#0d6efd}.link-primary:focus,.link-primary:hover{color:#0a58ca}.link-secondary{color:#6c757d}.link-secondary:focus,.link-secondary:hover{color:#565e64}.link-success{color:#198754}.link-success:focus,.link-success:hover{color:#146c43}.link-info{color:#0dcaf0}.link-info:focus,.link-info:hover{color:#3dd5f3}.link-warning{color:#ffc107}.link-warning:focus,.link-warning:hover{color:#ffcd39}.link-danger{color:#dc3545}.link-danger:focus,.link-danger:hover{color:#b02a37}.link-light{color:#f8f9fa}.link-light:focus,.link-light:hover{color:#f9fafb}.link-dark{color:#212529}.link-dark:focus,.link-dark:hover{color:#1a1e21}.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%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:calc(3 / 4 * 100%)}.ratio-16x9{--bs-aspect-ratio:calc(9 / 16 * 100%)}.ratio-21x9{--bs-aspect-ratio:calc(9 / 21 * 100%)}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:1px solid #dee2e6!important}.border-0{border:0!important}.border-top{border-top:1px solid #dee2e6!important}.border-top-0{border-top:0!important}.border-end{border-right:1px solid #dee2e6!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:1px solid #dee2e6!important}.border-start-0{border-left:0!important}.border-primary{border-color:#0d6efd!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#198754!important}.border-info{border-color:#0dcaf0!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#212529!important}.border-white{border-color:#fff!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!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}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!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}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.font-monospace{font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-light{font-weight:300!important}.fw-lighter{font-weight:lighter!important}.fw-normal{font-weight:400!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{color:#0d6efd!important}.text-secondary{color:#6c757d!important}.text-success{color:#198754!important}.text-info{color:#0dcaf0!important}.text-warning{color:#ffc107!important}.text-danger{color:#dc3545!important}.text-light{color:#f8f9fa!important}.text-dark{color:#212529!important}.text-white{color:#fff!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-reset{color:inherit!important}.bg-primary{background-color:#0d6efd!important}.bg-secondary{background-color:#6c757d!important}.bg-success{background-color:#198754!important}.bg-info{background-color:#0dcaf0!important}.bg-warning{background-color:#ffc107!important}.bg-danger{background-color:#dc3545!important}.bg-light{background-color:#f8f9fa!important}.bg-dark{background-color:#212529!important}.bg-body{background-color:#fff!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.bg-gradient{background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:.25rem!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:.2rem!important}.rounded-2{border-radius:.25rem!important}.rounded-3{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-end{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-start{border-bottom-left-radius:.25rem!important;border-top-left-radius:.25rem!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!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}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!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}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!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}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.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}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.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}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */
/* ==== assets/css/owl.carousel.min.css ==== */
/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(/assets/css/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/* ==== assets/css/aos.css ==== */
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}
/* ==== assets/css/responsive.css ==== */

@media only screen and (min-width: 1200px) {
.site-header .navbar-nav>li {
    margin-left: 35px;
}   
}

@media only screen and (max-width: 1199px) {
.main-banner {
    height: 550px;
}
.main-banner-content {
    max-width: 550px;
}
.main-banner-content h1 {
    font-size: 50px;
}

.banner-info {
    width: 55%;
}
.banner2-right {
    left: -45px;
}
.blog-grid-content {
    margin-left: 12%;
}

h1, .h1{
    font-size:46px;
}
h2, .h2{
    font-size:40px;
}
h3, .h3{
    font-size:36px;
}
h4, .h4{
    font-size:28px;
}
h5, .h5{
    font-size:24px;
}
h6, .h6{
    font-size:20px;
}   
.feature-box {
    padding: 25px;
}

.site-footer p, .site-footer a {
    word-break: break-all;
}
section.cta-sec {
    padding: 60px 0px 70px 0px;
}


section.cta-sec h2 {
    font-size: 32px;
}
.title {
    font-size: 36px;
}
}

@media only screen and (max-width: 1024px) {
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
.who-we-are {
    margin-top: 50px;
    margin-left: 0px;
}
.who-we-serve-list{
    margin-top: 40px;
}

.who-we-serve-list .heading {
    text-align: left;
    padding: 0px 0px;
}

.myrris-innovation{
    padding: 50px 0px
}
.about-innovation {
    width: 100%;
 }

.seven-values p {
    width: 100%;
}.values-section-content {
    left: 0px;
}.values-section-two .values-section-content {
    left: 0px;
    margin-right: 0px;
}.values-section-one {
    margin-bottom: 0px;
}.values-section-two {
    margin-bottom: 0px;
}section.cta2 {
    margin-top: 40px;
}.cta2 .container {
    padding: 50px 50px;
    border-radius: 0px;
}
.values-section-content {
    padding: 20px 20px;
}.partners-img {
    height: 90px;
    width: 50%;
}.partners-sec img {
    margin-top: 8px;
}.career-apply {
    margin-top: 0px !important;
}.liquidity-section {
    margin-top: 50px;
}
.take_closer_look {
    padding: 50px 0px;
    padding-bottom: 0px;
}.latest-client-info {
    max-width: 48%;
    padding: 40px 20px;
}

.solutions-list .solutions_sec .heading{
        padding: 10px 0px;
}

.solutions-list .heading h2 {
    font-size: 32px !important;
}
.page-title-banner h1 {
    font-size: 28px !important;
}


.who-we-serve-list ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    gap: 10px;
    padding-bottom: 10px;/*
    scrollbar-width: thin; */
}


.who-we-serve-list ul::-webkit-scrollbar {
    height: 1px;
    width: 20%
}

.who-we-serve-list ul::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.who-we-serve-list ul li {
    flex: 0 0 auto;
}

.we-serve-content {
    padding: 20px 30px !important;
}
.who-sec h3 {
    font-size: 22px !important;
}



}


@media only screen and (max-width: 991px) {
h1, .h1{
    font-size:40px;
}
h2, .h2{
    font-size:33px;
}
h3, .h3{
    font-size:30px;
}
h4, .h4{
    font-size:26px;
}
h5, .h5{
    font-size:24px;
}
h6, .h6{
    font-size:20px;
}
.pb-7 {
    padding-bottom: 60px;
}

.pt-7 {
    padding-top: 60px;
}
.site-header {
    padding: 0;
}
.header-logo img {
    width: 240px;
    height: auto;
}

.navigation-bar .navbar-toggler {
    position: absolute;
    right: 0;
    z-index: 999;
}
.site-header i.dropdown-caret {
    font-size: 12px !important;
    color: #000 !important;
}
.site-header .navbar {
    padding: 15px 0 !important;
}
.site-header .navbar-collapse{
    visibility: hidden;
    transform: translateX(-100%);
    border-radius: 0;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1200;
    width: 80%;
    transition: visibility .3s ease-in-out, transform .3s ease-in-out;
    background: #f2f2f2;
     
}
.site-header .navbar-collapse.show {
    padding: 0px 0px;
    visibility: visible;
    transform: translateX(0);
    top: 0px;
}

.site-header .navbar-nav>li {
    position: relative;
    margin-left: 0px;
    display: block;
    width: 100%;
    border-bottom: 1px solid rgb(220 230 245 / 25%);
}
/*.site-header .navbar-nav>li:last-child{
    border:none;
}*/
.site-header .navbar-nav>li>a {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 25px;
    padding-right: 25px;
    color: #fff;
}
.site-header .navbar-nav>li{
    color: #fff;
}
.site-header .navbar-nav>li .dropdown-icon {
    display: inline-block;
    position: absolute;
    right: 15px;
    font-size: 24px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    top: 8px;
}
.site-header li.menu-btn {
    padding: 20px 25px;
}
.site-header li.menu-btn a {
    color: #fff;
    text-align: center;
    margin:0;
}
.site-header .navbar-nav .menu-item-has-children>a:after{
    display:none;
}
.site-header li.menu-btn a {
    background: var(--secondary-color);
}
.site-header .navbar-nav>li .sub-menu {
    position: relative;
    opacity: 1;
    visibility: visible;
    top: 0;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    padding: 0;
    width: 100%;
    margin: 0;
    border: none;
    display:none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
}
.site-header .navbar-nav>li .sub-menu li {
    padding: 0;
    border-bottom: 1px solid rgb(220 230 245 / 25%);
    color:#fff;
}
.site-header .navbar-nav>li .sub-menu li:last-child{
    border:none;
}
.site-header .navbar-nav>li .sub-menu li a {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 35px;
    padding-right: 25px;
    color: #fff;
    font-size: 16px;
}
.site-header .navbar-nav>li .sub-menu li a:hover {
    color: #fff;
}
.site-header .navbar-nav>li.current-menu-item>a, .site-header .navbar-nav>li .sub-menu li.current-menu-item>a {
    color: var(--secondary-color);
}
.site-header ul li .dropdown-icon.active:before {
    content: '\f068';
}
.main-banner-content h1 {
    font-size: 42px;
}
.main-banner-content {
    max-width: 650px;
    padding-right: 50px;
}


.owl-nav button.owl-next {
    right: -5px;
    left: auto;
}
.owl-nav button.owl-prev {
    left: -5px;
}
.home-slider .owl-nav button {
    right: 15px;
    left:auto;
}
.owl-dots {
    margin-top: 10px;
}
.form-control {
    padding: 16px 20px;
}
.blog-grid-content .post-date {
    right: 15px;
    top: -25px;
    width: 80px;
    height: 80px;
    border-width: 4px;
}
.blog-grid-content {
    padding: 20px;
}
.post-info {
    font-size: 14px;
}

.single-service-content ul li {
    width: 100%;
}


    .main-banner {
        height: 300px;
    }
.about_img img {
    width: 100%;
}
    section.cta-sec {
        padding: 60px 0px 0px 0px;
    }



.main-banner-content h1 {
        font-size: 36px;
        line-height: 56px;
    }
.heading h2 {
    font-size: 30px;
}.service-sec {
    margin-bottom: 30px;
}.industry-list ul li {
    width: 100%;
}

.banner2-right {
    left: 4%;
    width: 90%;
    top: -40px;
}

.banner2-right h3 {
    font-size: 22px;
}.banner2-right p {
    font-size: 16px;
}


.stories-sec {
    max-width: 700px;
    padding: 30px 20px;
}
.stories-sec h4 {
    font-size: 25px;
}
.stories-sec p {
    font-size: 16px;
}

.get-started-sec h3 {
    font-size: 30px;
}
.get-started-sec p {
    line-height: 30px;
    font-size: 18px;
}
.services-offer {
    padding-bottom: 35px;
}.solutions-info img {
    height: 200px;
}.who-info {
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid#ccc;
    padding-bottom: 20px;
}.who-info {
    margin-top: 20px;
    margin-bottom: 50px;
}section.about-section.about-sec.pt-7.pb-7 {
    padding-top: 0px;
}
.counter-sec h4 {
    font-size: 30px;
 }.counter-sec {
    padding: 20px 0px;
}.myrris-innovation {
    padding: 20px 0px;
}.about-innovation p {
    font-size: 28px;
}.events-sec {
    margin-bottom: 30px;
}.heading.partners {
    padding-top: 0px !important;
}
.solutions-list .solutions_sec {
    position: relative;
    left: 0px;
}.liquidity-content {
    padding-left: 0px;
}.take_closer_look .pl-padding {
    margin-left: 0px;
}.who-we-serve-list {
    padding: 30px;
}.we-serve-content {
    padding: 30px 0px;
}    .liquidity-section {
        margin-top: 0px;
    }
    .liquidity-section {
    padding-bottom: 20px;
}.take_closer_look {
    margin-top: 0px !important;
}
.who-we-serve-list ul {
    justify-content: flex-start;
}
.page-title-banner p {
    width: 60%;
}.footer__widget {
    margin-bottom: 40px;
}
footer.site-footer.pt-7.pb-7 {
    padding-bottom: 0px;
}
.solutions-img img {
    height: auto !important;
}

.partners-img {
        height: 60px;
        margin-left: 10px;
        width: 50%;
    }









}

@media (max-width: 768px) {

  .accordion.horizontal {
    display: block;
    height: auto;
  }

  .accordion.horizontal .accordion-item {
    display: block;
    width: 100%;
  }

  .accordion.horizontal .accordion-button {
    writing-mode: horizontal-tb;
    transform: rotate(0);
    text-align: left;
  }

  .accordion.horizontal .accordion-collapse {
    display: none;
  }
  .accordion.horizontal .accordion-item.active .accordion-collapse {
    display: block;
  }
    .solutions-info img {
        height: 300px;
    }.accordion.horizontal .accordion-button {
    font-size: 21px;
}.solutions-info h4 {
    font-size: 21px;
}
.location-sec {
    margin-bottom: 30px;
}.solutions-service {
    padding: 20px 10px;
}.solutions-service h4 a {
    font-size: 20px !important;
}
}





@media only screen and (max-width: 767px) {
body {
    font-size: 16px;
}
h1, .h1{
    font-size:30px;
}
h2, .h2{
    font-size:28px;
}
h3, .h3{
    font-size:26px;
}
h4, .h4{
    font-size:24px;
}
h5, .h5{
    font-size:22px;
}
h6, .h6{
    font-size:18px;
}
.btn {
    font-size: 14px;
}
.main-banner-content .btn {
    min-width: 240px;
}
.site-header .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}
.site-header .navbar-nav>li .dropdown-icon {
    right: 5px;
}
.site-header .navbar-nav>li .sub-menu li a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 15px;
}
.main-banner-content h1 {
    font-size: 30px;
}
.btn {
    padding: 14px 50px 13.5px 20px;
}
.home-slider .container {
    padding: 0 15px;
}
.home-slider .owl-nav button {
    right: 10px;
    width: 40px;
    height: 40px;
    line-height: 42px !important;
    font-size: 24px !important;
}
.home-slider .owl-nav button.owl-prev {
    margin-top: 25px;
}
.home-slider .owl-nav button.owl-next {
    margin-top: 25px;
}

.site-footer h2, .footer-logo {
    margin-bottom: 20px;
        font-size: 22px;
}

.go-top {
    right: 15px;
    bottom: 15px;
}
.site-header .navbar {
    padding: 10px 0 !important;
}
.main-banner {
    height: 450px;
}
.owl-nav button {
    width: 40px;
    height: 40px;
    font-size: 24px !important;
    line-height: 42px !important;
}
.page-title-banner {
    min-height: 200px;
}
.left-align-icon {
    margin: 0 auto;
}
.about-item-section .row>div+div {
    margin-top: 40px;
}

.single-service-section img {
    margin-bottom: 25px;
}
.single-service-content ul {
    margin: 20px 0 10px;
}
.blog-grid-content .post-date {
    top: -32px;
}
.blog-grid-content .post-date h3 {
    font-size: 28px;
}
.container-bg-box {
    margin-bottom: 60px;
}
.contact-link-item {
    margin-bottom: 30px;
    padding-left: 65px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.contact-link-item:last-child {
    margin-bottom: 0px;
}
.contact-link-item .icon-box {
    width: 50px;
    height: 50px;
    line-height: 54px;
    font-size: 22px;
}
.contact-map iframe {
    height: 350px !important; 
}
section.cta-sec a {
    font-size: 16px;
    width: 90%;
    margin-bottom: 10px;
}.get-started {
    padding: 40px 30px;
}.blog-grid-content {
    margin-left: 6%;
}.banner-info {
    width: 70%;
}
.industry-list ul li a i {
    position: absolute;
    left: 0;
}
.industry-list ul li a {
    padding-left: 40px;
        font-weight: 300;
    font-size: 20px;
}.container {
    padding-left: 18px;
    padding-right: 18px;
}.accordion.horizontal .accordion-item {
    border-bottom: 1px solid #d7d7d7;
}.accordion.horizontal .accordion-item {
    border-top: 1px solid#d7d7d7 !important;
}.who-info {
    margin-bottom: 10px;
}.values-section-content .heading {
    padding-top: 0px;
    padding-bottom: 10px;
}section.values-section-two .row.align-items-center {
    flex-direction: column-reverse;
}.cta-heading.text-end {
    text-align: center !important;
    margin-top: 20px;
}.cta-heading h2 {
    font-size: 24px;
    text-align: center;
}.cta-heading p {
    text-align: center;
}
.cta2 .container {
    padding: 40px 30px;
}section.events-conferences.mt-5 {
    margin-top: 0px !important;
}
.who-sec img {
    margin-top: 20px;
}
.latest-client .owl-controls {
    bottom: 20px;
    left: 80%;
    width: 30%;
    padding: 20px 50px 20px 20px;
}
.featured-stories button.owl-next:after {
   top: 3px;
}

.featured-stories button.owl-prev:after {
   top: 3px;
}
.latest-client-info h4 {
    font-size: 28px;
    font-weight: 300;
    line-height: 36px;
}
.latest-client-info {
    max-width: 55%;
 }
 .who-we-serve .heading {
    text-align: left;
    padding: 0px 0px;
}.page-title-banner p {
    width: 80%;
}.values-section-content {
        margin-bottom: 30px;
    }
        .footer__widget {
        margin-bottom: 0px;
    }.payment-we-accept {
    margin-bottom: 30px;
}
.footer-link {
        margin-top: 0px;
    }


section.our-solutions .heading .text-end {
    text-align: left !important;
    margin-top: 10px;
}
.solutions-service {
    width: 90% !important;
}

}




@media only screen and (max-width: 520px) {

  section.about-section.about-sec p {
    line-height: 30px;
    font-size: 16px;
  }

  .content-box .img-box {
    width: 150px;
  }
  .title {
        font-size: 26px;
  }
      section.cta-sec h2 {
        font-size: 26px;
    }

  .copyright-area .text-end {
    text-align: left !important;
    margin-top: 10px;
  }
  section.cta-sec p {
    margin-bottom: 20px;
    line-height: 32px;
}

.top-header ul li a {
    padding: 10px 10px;
    font-size: 14px;
}
.top-header ul {
    justify-content: center;
}

section.about-section.pt-7.pb-7 {
    padding-bottom: 0px;
}
    .page-title-banner {
        min-height: 200px;
    }
.page-title-banner h1 {
    font-size: 21px;
}
ol.breadcrumb li.breadcrumb-item {
    font-size: 15px;
}
.banner-info {
    width: 100%;
    padding: 30px;
    bottom: -150px;
}section.our-solutions {
    margin-top: 170px !important;
}

.banner-sec2 {
    margin-top: 60px;
    padding-bottom: 30px;
} 


   .heading h2 {
        font-size: 26px;
    }.global-btn2 {
    padding: 12px 20px;
    font-size: 15px;
}
.featured-stories .owl-controls {
    left: 50%;
    transform: translateX(-50%);
    gap: 40px;
    display: inline-block;
    width: 60%;
}

.featured-stories button.owl-next:after {
         top: -3px;
        font-size: 18px;
}.featured-stories button.owl-prev:after {
          top: -3px;
        font-size: 18px;
}
    .get-started-sec h3 {
        font-size: 25px;
    }    .get-started-sec p {
        line-height: 30px;
        font-size: 16px;
    }
    .main-banner-content {
    max-width: 100%;
    padding-right: 0px;
}.blog-grid-content h3 a {
    font-size: 21px;
    line-height: 30px;
}
.main-banner-content p {
    line-height: 28px;
    max-width: 100%;
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 10px;
}
.main-banner-content {
    padding-top: 0px;
}.service-sec img {
    height: 250px;
}.services-info h4 {
    font-size: 21px;
}.services-info {
    padding: 20px 15px;
}.featured-stories .our-stories img {
    height: 300px;
}
.featured-stories .owl-controls {
    bottom: 42%;
    padding: 15px 30px 15px 20px;
}

.stories-sec {
    padding-bottom: 100px;
}

.who-we-are {
    margin-top: 30px;
}
.about-innovation p {
    font-size: 25px;
    line-height: 38px;
}
section.about-section.about-sec.pt-7 {
    padding-top: 0px;
}.partners-img {
    height: auto;
    width: 40%;
}.partners-sec img {
    margin-top: 8px;
    width: 100%;
}.career-form h1 {
    font-weight: 300;
    font-size: 21px;
}.apply-now-btn {
    margin-bottom: 10px;
}
.solutions-list {
    padding: 50px 0;
    background: #f3f3f3;
}.solutions-list .heading h2 {
    font-size: 26px;
    margin-bottom: 0px;
}
.who-we-serve-list ul {
        justify-content: flex-start;
        display: block;
    }
.who-we-serve-list li.nav-item .active:after {
   bottom: 0px;
}
.who-we-serve-list li.nav-item button {
    padding: 12px 0px;
}
.take_closer p {
    height: auto;
}.latest-client-info {
    max-width: 100%;
}.featured-stories .owl-controls {
    bottom: 5%;}
.featured-stories .heading {
   padding: 30px;
}
.latest-stories {
    padding: 70px 0px 110px 0px;
}
.latest-client-info h4 {
    font-size: 24px;
    line-height: 26px;
}
.solutions_sec .owl-nav button {
    margin: 0 65px !important;
}/*
section.featured-stories.latest-client .owl-controls {
    width: 50%;
}*/
.page-title-banner p {
    width: 95%;
}
.events-sec img {
    height: auto !important;
}.banner2-right {
    padding: 40px;
}.solutions-service {
    width: 90%;
}
.values-info h3 {
    font-size: 21px;
}

.payment-we-accept img {
    width: 80% !important;
}
    .page-title-banner h1 {
        font-size: 22px !important;
    }
   .home-page .site-header .navbar {
        padding: 4px 0 !important;
    }
    .home-page .site-header .navbar-brand img {
        max-width: 115px !important;
    }
        .home-page .navbar-toggler .line {
        height: 3px;
        width: 30px;
    }
    .banner2-right {
    padding: 30px !important;
}
.take_closer_look .heading {
    margin-top: -90px;
    background: #fff;
    padding: 15px;
    left: 5%;
    width: 93%;
    margin-left: 3%;
    margin-bottom: 20px;
}    section.solutions-list .col-lg-8 {
        margin-top: -120px;
        background: #fff;
        width: 90%;
        margin-left: 12px;
        padding-bottom: 40px;
    }

    .solutions-list .owl-nav button.owl-next {
        right: -25px;
        left: auto;
    }
    .solutions-list .owl-nav button.owl-prev {
        left: -85px;
    }
    .solutions_sec .owl-nav button {
        margin: 0px 0px 0px 70px !important;
    }

.solutions-sec {
    padding: 10px !important;
}.solutions-list .heading h2 {
        font-size: 24px !important;
        text-align: center;
    }
.solutions-sec h4 {
    font-size: 20px !important;
}
section.blog-section .mb-4 {
    margin-bottom: 0rem !important;
}
    .main-banner {
        height: 400px;
    }
    .home-page .site-header.sticky-header {
    top: 0 !important;
}
.home-page .site-header {
    top: 10px !important;
}
.site-header {
    box-shadow: inherit !important;
}



}





/* ==== assets/css/custom.css ==== */
.heading {
    text-align: left;
    padding: 40px 0px;
}
.heading h2 {
    font-size: 32px;
    font-weight: 400;
}


.home-page .site-header {
    position: absolute;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: all 0.4s ease;
}
.home-page .site-header li a {
    font-size: 16px;
    color: #ffffff;
    text-transform: capitalize;
}
.home-page .site-header li a:hover{
    color: #fff !important
}
.home-page .logo1 {
    display: none;
}

.home-page .logo2 {
    display: block;
}

.logo2 {
    display: none;
}

.home-page .navbar-toggler .line {
    background: #ffffff;
}

.home-page .mega-menu-content ul li a:hover {
    color: #000 !important;
}


.home-page .site-header.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

        background: rgb(0 112 173);
    backdrop-filter: blur(14px);

    animation: headerSmooth 0.5s ease;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    z-index: 999;
}

/* Smooth Slide */
@keyframes headerSmooth {

    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
.site-header.sticky-header .navbar {
    padding-top: 12px;
    padding-bottom: 12px;
}
*/

.site-header .logo1 img,
.site-header .logo2 img {
    transition: all 0.4s ease;
}

.site-header.sticky-header .logo1 img,
.site-header.sticky-header .logo2 img {
    transform: scale(0.92);
}






.mega-menu {
    position: static !important;
}


.site-header {
    overflow: inherit;
}
.site-header  .navbar-expand-lg .navbar-nav {
        overflow: hidden;
    }
.mega-menu {
    position: static !important;
}

.mega-menu .dropdown-menu {
    width: 100%;
    border-radius: 10px;
    border: none;
    background: transparent;
}
.mega-menu .dropdown-menu .container {
    background: #f8fafc;
    border-radius: 10px;
    max-width: 100%;
    padding: 0px;
}

.mega-menu-column ul li {
    width: 50%;
}

.mega-menu-column h6 {
    color: #2563eb;
    font-weight: 300;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.mega-menu-item {
    padding: 0.5rem 0;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: #454545 !important;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
}

.mega-menu-item:hover {
    color: #0d6efd;
    text-decoration: none;
}

.mega-menu-item i {
    width: 20px;
    margin-right: 0.75rem;
    color: #0d6efd;
    background: #e4ecff;
    height: 30px;
    width: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 100px;
}
.mega-menu-item:hover i {
    background: #0d6efd;
    color: #fff !important;
}
.mega-menu-column {
    position: relative;
    padding: 40px 20px;
}
ul.sabmenu-list {
    position: absolute;
    left: 50%;
    top: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(0);
    transition: all 0.25s ease;
    min-width: auto;
    padding: 10px;
    z-index: 9999;
    width: 50%;
}

ul.sabmenu-list li {
    width: 100%;
}

.mega-menu-list:hover ul.sabmenu-list {
    opacity: 1;
    visibility: visible;
}
.mega-menu-list.has-children > a::after {
    content: "›";
    float: right;
    font-size: 16px;
    transition: transform 0.3s ease;
}

.mega-menu-list.has-children:hover > a::after {
    transform: rotate(90deg);
}
.mega-menu-content a {
    position: relative;
    display: inline-block;
    width: 90%;
}
.mega-menu-content a::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 1px;
    background: #0d6efd;
    transition: width 0.3s ease;
}

.mega-menu-content a:hover::before {
    width: 100%;
}

.mega-menu-list:hover ul.sabmenu-list {
    display: block;
}
.mega-menu .dropdown-menu {
    width: 100%;
    border-radius: 10px;
    position: absolute !important;
    border: none;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    left: 0;
}
.mega-menu-column ul.industries-list li {
    width: 48%;
    display: inline-block;
}
.mega-menu-content img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* HOVER EFFECT */
@media (min-width: 992px) {
    .mega-menu:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
        .navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

.about-menu-page {
    background: #0070ad;
    padding: 40px;
}
.about-menu-page h4 {
    color: #fff;
}
.about-menu-page p {
    color: #fff;
}
.about-menu-page a.global-btn {
    color: #fff;
    width: auto;
}
.about-menu-page a::before{
    content: inherit !important;
}

.mega-menu-column .who-we-serve a {
    width: auto;
}
.mega-menu-column .who-we-serve a:hover{
    color: #fff;
}
.mega-menu-column .who-we-serve a::before{
    content: inherit !important;
}






.our-journey-section {
    background: #000;
    padding: 50px 0px;
}
.our-journey h2 {
    font-size: 65px;
    color: #fff;
}
.our-journey p {
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    line-height: 34px;
}



/*.service-sec {
    padding: 25px 25px 25px 25px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #0A0A0A;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 29px;
}*/

.services-offer {
	background:#dee1e8;
    object-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom:100px;
}.services-offer h2{
	color:#000;
}
.service-sec img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    transition: all 0.4s linear;
}
.service-sec {
    position: relative;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    overflow: hidden;
}

.service-sec:hover img{
    transform: scale(1.2);
}
.explore-company .service-sec img {
    height: 350px;
    width: 100%;
    object-fit: cover;
}

.explore-company{
	margin-bottom: 50px;
}
.explore-company .services-info {
    padding: 20px 0px;
}
/*.service-sec:after {
    content: "";
    position: absolute;
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
    background: linear-gradient(0deg, #000, transparent);
    opacity: 0.5;
    z-index: 9;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0px;
}*/
.services-info {
/*    position: absolute;
    bottom: 0;
    z-index: 99;*/
    padding: 20px 20px;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    background: #fff;
    position: relative;
}
.services-info h4 {
    color: #000;
    font-weight: 400;
    font-size: 24px;
}
.services-info p {
    color: #000;
}
.services-info a {
    color: #fff;
        -webkit-transition: all 0.9s linear;
    -moz-transition: all 0.9s linear;
    -o-transition: all 0.9s linear;
    transition: all 0.9s linear;
}
.services-info a i {
    background: #0070ad;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 100px;
        -webkit-transition: all 0.9s linear;
    -moz-transition: all 0.9s linear;
    -o-transition: all 0.9s linear;
    transition: all 0.9s linear;
}
/*.service-sec:hover .services-info p {
    display: block;
}
.service-sec:hover .services-info a {
    display: block;
}*/
.services-info:hover a {
    transform: translateX(90%);
}
.service-sec:hover .services-info {
/*    bottom: 20px;*/
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}


.banner-sec {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 80px 0px 0px 0px;
    overflow: visible;
}
.banner-info {
    background: #fff;
    width: 40%;
    position: relative;
    bottom: -30px;
    background-image: linear-gradient(239deg, rgb(0 88 171), rgb(28 64 118));
    border-radius: 4px;
    box-shadow: 0 25px 100px 0 rgba(0, 0, 0, .15);
    padding: 40px;
}
.banner-info h3 {
    color: #fff;
    font-size: 22px;
    line-height: 34px;
}
.banner-info p{
	color: #fff;
}

/*

.our-solutions .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
*/
.accordion.horizontal {
    display: flex;
    /*height: 300px;*/
    overflow: hidden;
}
.accordion.horizontal .accordion-item {
  display: flex;
  flex-direction: row;
  flex: 0 0 80px;
  transition: all 0.5s ease;
  border: 1px solid #ddd;
      border-top: 0px;
    border-bottom: 0px;
}

/* ACTIVE */
.accordion.horizontal .accordion-item.active {
    flex: 1;
}


/* BUTTON (vertical text) */
.accordion.horizontal .accordion-button {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    background: inherit;
    border: none;
    padding: 15px;
    font-size: 24px;
    color: #000;
    text-align: center;
    width: 100%;
    font-weight: 400;
}
/* REMOVE ARROW */
.accordion-button::after {
  display: none;
}

.accordion.horizontal .accordion-collapse {
  width: auto;              /* FIX */
  flex: 1;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.4s ease;
  pointer-events: none;
  display: flex;
}

.accordion.horizontal .accordion-item.active .accordion-collapse {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}.accordion.horizontal .accordion-item {
  display: flex;
  flex-direction: row;
  flex: 0 0 80px;
  transition: flex 0.4s ease;
  overflow: hidden;   /* IMPORTANT */
}

.accordion.horizontal .accordion-item.active {
  flex: 1;
}

.accordion.horizontal .accordion-item.active .accordion-button{
    color: #fff;
}

.accordion.horizontal .accordion-item.active .global-btn2 {
    color: #ffffff;
    border: 2px solid #ffffff;
}
.accordion.horizontal .accordion-item.active .global-btn2 i{
    color: #fff;
}


.accordion.horizontal .accordion-body {
  min-width: 300px;
  padding: 20px;
}

.solutions-info img {
  width: 100%;
  border-radius: 10px;
    height: 300px;
    object-fit: cover;
  opacity: 0;
  transition: all 0.5s ease;
  margin-bottom: 20px;
    transition: opacity 0.4s ease;
}

.solutions-info h4{
    color: #fff;
}

.solutions-info p{
    color: #fff;
}
/* ACTIVE pe smooth show */
.accordion-item.active .solutions-info img {
  opacity: 1;
}

.accordion-body {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.accordion-item.active .accordion-body {
  opacity: 1;
  transform: translateY(0);
}


/* TAB 1 */
.accordion-item:nth-child(1).active {
  background: #146eb5;
}

/* TAB 2 */
.accordion-item:nth-child(2).active {
  background: #282a39;
}

/* TAB 3 */
.accordion-item:nth-child(3).active {
  background: #320e3e;
}

/* TAB 4 */
.accordion-item:nth-child(4).active {
  background: #de474f;
}

/* TAB 5 */
.accordion-item:nth-child(5).active {
  background: #f37f6f;
}

/* TAB 6 */
.accordion-item:nth-child(6).active {
  background: #282a39;
}



.banner-sec2 {
    background: #320e3e;
    padding-bottom: 60px;
    margin-top: 60px;
}
   
.banner2-info{
    position: relative;
    overflow: hidden;
    transition: 0.6s;
}

.banner2-info img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    object-position: center;
        transition: 0.6s;
}
.banner2-info img:hover{
    transform: scaleX(1.1);
}
.banner2-right {
    background: #fff;
    padding: 50px;
    box-shadow: 0 25px 100px 0 rgba(0, 0, 0, .15);
    position: relative;
    left: -80px;
}
.banner2-right p{
	color: #000;
	font-size: 18px;
    margin-bottom: 20px !important;
}


.banner2-right h3 {
    font-size: 25px;
    font-weight: 400;
}


/* Remove padding from row */
.featured-stories .row {
  margin: 0;
}

/* Left content ko container feel dena */
.stories-sec{
  max-width: 700px;
  margin-left: auto;
  padding: 60px 40px;
}

/* Image full stretch */
.stories-sec-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image column full height */
.stories-sec {
  height: 100%;
}







      .our-industry {
    padding-bottom: 50px;
    background: #f4f3f9;
    position: relative;
}

.industry-list ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5%;
}

.industry-list ul li {
    width: 47%;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
    transition: 0.6s;
    position: relative;
}

.industry-list ul li:after {
    content: "\f061";
    position: absolute;
    right: 35px;
    font-size: 21px;
    color: #000;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    bottom: 10px;
    transition: 0.6s;
    opacity: 0;
}
.industry-list ul li:hover:after {
    right: 0px;
    transform: translateX(0px);
    transition: 0.6s;
    opacity: 1;
}

.industry-list ul li:hover {
    border-bottom: 1px solid#000;
}
.industry-list ul li a {
    color: #000;
    font-weight: 400;
    font-size: 21px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.industry-list ul li a i.fal.fa-truck {
    background: #4594bf;
    color: #fff;
    border-radius: 100px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    margin-right: 20px;
}
.industry-list ul li a img {
    background: #4594bf;
    color: #fff;
    border-radius: 100px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 15px;
    padding: 5px;
}


   /*Work Process*/
.what-we-do {
    margin-bottom: 30px;
    margin-top: 60px;
}
.what-we-do .col-lg-4 {
    margin-bottom: 20px;
}
.what-we-do-sec {
    border-radius: 8px;
    transition: all 0.5s;
    position: relative;
    border: 1px solid #ccc;
    margin-bottom: 30px;
    height: 100%;
}
.what-we-do-sec:hover {
    transform: translateY(-15px);
}

.what-we-do-sec h4 {
    font-size: 30px;
    font-weight: 400;
    color: #000;
    line-height: 40px;
    padding: 0px 20px;
    padding-top: 30px;
        margin-bottom: 0px;
}
.what-we-do-sec p {
    color: #000;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.featured-stories .owl-item {
    padding: 0px 0px 0px 0px;
    background: #0070ad;
    position:relative;
}


.featured-stories .heading {
    text-align: left;
    padding: 50px;
    z-index: 99;
    position: relative;
}
.featured-stories .owl-controls {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 50px;
    padding: 20px 70px 20px 20px;
    display: flex;
    align-items: center;
    gap: 50px;
    z-index: 999;
}
.featured-stories .owl-nav, .featured-stories .owl-dots {
    position: static;
    margin: 0;
}
/* Dots style */
/*.featured-stories .owl-dots {
    display: flex;
    gap: 8px;
}*/

/* Dot button */
.featured-stories .owl-dots button {
    width: 15px !important;
    height: 15px;
    background: #ffffff !important;
    border-radius: 50%;
}

/* Active dot */
.featured-stories .owl-dots button.active {
    background: #0070ad !important;
}

/* Arrows */
.featured-stories .owl-nav button {
    color: #000 !important;
    top: 28px;
    font-size: 0px !important
}

.featured-stories .our-stories img{
    height: 400px;
    object-fit: cover;
    object-position: top;
        width: 100%;
}
.stories-sec {
    border-radius: 8px;
    transition: all 0.5s;
    position: relative;
    height: 100%;
}

.stories-sec h4 {
    font-size: 30px;
    font-weight: 400;
    color: #fff;
    line-height: 36px;
}
.stories-sec h5 {
    color: #fff;
    font-size: 18px;
}
.stories-sec p {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
        display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 2px;
    line-height: 26px;  
}
.global-btn  {
    /*
     * A box, not a run of text.
     *
     * This had no display, so it was inline: vertical padding did not push the
     * line apart, and when the label wrapped the border stopped following it —
     * which is why "See all openings" sat outside its own outline on a narrow
     * screen. Buttons are inline-flex everywhere else in this stylesheet.
     */
    /* Layout (display, max-width, wrapping) is decided once, in
       laravel-dynamic.css — it is bundled last and any opinion stated here
       loses to it silently. This rule is only the button's appearance. */
    color: #fff;
    border: 2px solid #fff;
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 16px;
}

.global-btn i {
    padding-left: 6px;
    color: #fff;
    vertical-align: middle;
}

.global-btn:hover{
    background: #fff;
    color: #000 !important;
    border-radius: 100px;
}
.global-btn:hover i{
    color: #0058ab;
}
.global-btn2  {
    color: #000 !important;
    border: 2px solid #0058ab;
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 16px;
}

.global-btn2 i {
    padding-left: 6px;
        color: #0058ab;
        vertical-align: middle;
}

.global-btn2:hover{
    background: #0058ab;
    color: #fff !important;
        border-radius: 100px;
}
.global-btn2:hover i{
    color: #fff;
}
.global-btn3 {
    color: #fff;
    display: inline-block;
}
.global-btn3:hover{
    color: #fff;
}
.global-btn3 i {
    font-size: 16px;
    padding-left: 6px;
    vertical-align: middle;
}

.global-btn3::after {
    content: '';
    display: block;
    border-bottom: 1px solid #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.global-btn3:hover::after {
    transform: scaleX(1);
}



.global-btn4{
    color: #000;
    display: inline-block;
}
.global-btn4:hover{
    color: #000;
}
.global-btn4 i {
    font-size: 16px;
    padding-left: 6px;
    vertical-align: middle;
}

.global-btn4::after {
    content: '';
    display: block;
    border-bottom: 1px solid #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.global-btn4:hover::after {
    transform: scaleX(1);
}



.stories-info {
    margin-bottom: 20px;
}
.logo-icon {
    position: relative;
}



.about-sec {
    position: static;
    z-index: 0;
    background: #fff;
    padding: 0px 0px;
}
.about-innovation {
    padding: 50px 0px;
    width: 50%;
    position: relative;
    text-align: center;
    margin: 0 auto;
}





.who-we-are {
    margin-top: 80px;
    margin-left: 100px;
}
.who-sec img{
    width: 100%;
}
.who-info{
    margin-top: 60px;
}
.who-info h4 {
    font-size: 22px;
    text-transform: capitalize;
}

.who-info p {
    padding-top: 2px;
    line-height: 26px;
}

.who-sec h3 {
    font-size: 26px;
    margin-top: 30px;
    font-weight: 400;
}

.who-sec h4 {
    font-size: 20px;
}

.who-info a i {
    font-size: 14px;
    padding-left: 5px;
}

.who-sec a i {
    font-size: 14px;
    padding-left: 5px;
}

.get-started {
    padding: 80px;
    background:#131939;
}
.get-started-sec h3 {
    color: #fff;
    font-size: 36px;
    margin-bottom: 20px;
        font-weight: 300;
}
.get-started-sec p {
    color: #fff;
    line-height: 38px;
    font-size: 21px;
}
.get-started .global-btn2 {
    margin: 40px 0px 0px auto;
    font-size: 21px;
    padding: 15px 40px;
}
section.events-conferences {
    margin-bottom: 50px;
}
.events-sec{
    position: relative;
    overflow: hidden;
    transition: 0.6s;
}

.events-sec img {
    height: 300px;
    object-fit: cover;
    object-position: center;
        width: 100%;
        transition: 0.6s;
}

.events-sec:hover img{
    transform: scale(1.2);
}
.events-info {
    background: #fff;
    position: relative;
    z-index: 1;
    padding-top: 20px;
}
.events-info h4 {
    color: #000;
    font-weight: 400;
    font-size: 24px;
}


.events-info p {
    color: #000;
}

.cta{
  background: #0070ad; 
  padding: 50px 0px;
}
    .cta-heading h2{
        color: #fff;
            font-weight: 400;
        font-size: 24px;
    } 
    .cta-heading p{
        color: #fff;
    } 

/*Single blog
*/


  .single-post .page-title-banner:before {
    background: #0058ab;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
}
    .single-post .page-title-banner h1 {
    background: inherit;
    width: auto;
    position: relative;
    bottom: 0;
    padding: 100px 40px;
    z-index: 999;
}

  .single-post nav {
    position: relative;
}
.single-service-content h2 {
    font-weight: 400;
}

.related-post h3 {
    font-weight: 400;
}
.item.similar-post {
    position: relative;
}

.item.similar-post a {
    color: #000;
    
    font-weight: 400;
}
.item.similar-post h5 {
    font-size: 21px;
}
.item.similar-post time {
    font-size: 16px;
}
.item.similar-post img {
    height: 260px;
    object-fit: cover;
    border-radius: 0px;
}

.postcategory:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 50px;
    background: #000;
    left: 0;
    top: 8px;
}
.postcategory {
    font-size: 16px;
    margin-bottom: 10px;
    background: #fff;
    position: relative;
    padding-left: 65px;
}
.blog-section.page .blog-grid-content {
    padding: 30px 0px;
    position: relative;
    top: 0;
    background: #fff;
    margin-left: 0;
}

/*
Latest client stories*/
.latest-client .owl-item {
    padding: 0px 0px 0px 0px;
    background: inherit !important;
    position: relative;
}

.latest-stories {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    /* height: 300px !important; */
    padding: 70px 0px;
}
.latest-client .owl-controls {
    bottom: 20px;
    left: 60%;
    transform: translateX(-50%);
}

.latest-client-info {
    max-width: 700px;
    padding: 60px 40px;
}


.latest-client-info h4 {
    font-size: 36px;
    font-weight: 400 !important;
    color: #000;
    line-height: 36px;
}.latest-client-info p {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 2px;
    line-height: 26px;
}

.latest-client-info {
    max-width: 35%;
    padding: 60px 40px;
/*    position: absolute;
    bottom: 50px;*/
    background: #ffffff;
    z-index: 99999;
}

.services-solutions {
    margin-bottom: 30px;
}
.services-solutions{
    position: relative;
    overflow: hidden;
        transition: .6s;
}
.services-solutions a {
    display: block;
}
.services-solutions img{
    transition: .6s;
    height: 300px;
    object-fit: cover;
    object-position: center;
    width: 100%;

}
.services-solutions:hover img{
    transition: .6s;
    transform: scale(1.1);
    
}
.solutions-service {
    background: #fff;
    position: relative;
    overflow: hidden;
    z-index: 9;
    top: -30px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding: 20px 20px;
        transition: .6s;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);

}
.services-solutions:hover .solutions-service
{
    background: #fbfbfb;
}
.solutions-service h4 a {
    color: #000;
    font-size: 24px;
}

.partners-sec {
    position: relative;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    background: #fff;
    margin-bottom: 15px;
    padding-top: 15px;
}
.partners-img {
    height: 110px;
    position: relative;
    overflow: hidden;
    background: #fff;
    margin-left: 16px;
    border: 1px solid #e6e6e6;
    width: 40%;
}
.partners-sec img {
    height: auto;
    /* width: 180px; */
    object-fit: cover;
    transition: all 0.4s linear;
    text-align: left;
    /* border: 1px solid #e6e6e6; */
    padding: 15px;
    margin-top: 20px;
}
.partners-info {
    padding: 20px 20px;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    background: #fff;
}
.partners-info h4 {
    color: #353535;
    font-weight: 400;
    font-size: 21px;
}
.partners-info p {
    color: #000;
/*    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 2px;
    line-height: 26px;
    height: 90px;*/
}
.partners-info a
 {
    color: #fff;
    -webkit-transition: all 0.9s linear;
    -moz-transition: all 0.9s linear;
    -o-transition: all 0.9s linear;
    transition: all 0.9s linear;
    display: none;
}
.partners-info a i {
    background: #0070ad;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 100px;
    -webkit-transition: all 0.9s linear;
    -moz-transition: all 0.9s linear;
    -o-transition: all 0.9s linear;
    transition: all 0.9s linear;
}


.content_page {
    margin-top: 120px;
    margin-bottom: 60px;
}
.content_page h2 {
    font-size: 22px;
    margin-bottom: 5px;
}
.content_page ul {
margin-bottom: 15px;
}
.content_page p {
    margin-bottom: 10px;
}

.career-post {
    border: 1px solid #a4c9ff;
    padding: 20px;
}

    .career-apply {

/*    background: #dee1e8;
*/
    padding: 0px 0px 80px 0px;

}

    .career-post h2{

        color: #fff;

    }



.career-post h3 {

    font-size: 21px;

}
.career-post ul {
    padding: 0px 15px;    
}
.career-post ul li {
    color: #000;
    line-height: 32px;
    list-style: disc;
}


.career-apply .accordion-body {

    opacity: 1;

    transform: inherit;

    transition: all 0.3s ease;

}

.career-apply .accordion-item {
    border: 0px solid rgba(0, 0, 0, .125);
    background: inherit;
    margin-bottom: 10px;

}

.career-apply .accordion-body {

    opacity: 1;

    transform: inherit;

    transition: all 0.3s ease;

        background: #fff;

    border: 0 !important;

    padding: 10px 0px;

}

.career-apply  .accordion-button {

    color: #ffffff;

    background-color: #0070ad;

}
.career-form h1 {
    font-weight: 300;
    font-size: 24px;
}
.contact-form.career-form {

    background: #fff;

    padding: 20px;

    border-radius: 5px;

}

.career-apply .accordion-button::after {
    display: none;
}

.career-apply .accordion-button::before {
    font-family: "Font Awesome 6 Free";
    content: "\f067";
    font-weight: 900;
    right: 20px;
    position: absolute;
}
.career-apply .accordion-button:not(.collapsed)::before {
    content: "\f068";
}

.apply-now-btn {
    background: #0070ad;
    color: #fff;
    padding: 15px 40px;
    font-weight: 300;
    margin-bottom: 40px;
}

.apply-now-btn:hover {
    border-radius: 100px;
}

section.career-opportunities .events-sec img {
    height: 300px !important;
}

.solutions-list {
    padding: 80px 0;
    background: #f3f3f3;
}

.solutions-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solutions-list .heading h2 {
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 40px;
}

.solutions_sec .item {
    padding: 10px;
}

.solutions-sec {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(6px);
    padding: 30px;
    transition: 0.3s;
    position: relative;
}

.solutions-sec:hover {
    background: #ffffff;
    transform: translateY(-5px);
}

.solutions-sec h4 {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 15px;
}

.solutions-sec p {
    font-size: 16px;
    color: #555;
    padding-top: 2px;
    line-height: 26px;
    margin-bottom: 20px;
}

/* The clamp and the fixed 80px height that used to be here cut every card off
   mid-sentence — "before a line of" instead of "before a line of production
   code" — and because the height cut fell short of the clamp, not even an
   ellipsis appeared to say so. The cards stretch to match each other instead,
   below, so the text can be as long as it needs to be. */
.solutions_sec .owl-stage { display: flex; }
.solutions_sec .owl-item { display: flex; height: auto; }
.solutions_sec .item { display: flex; width: 100%; }

.solutions-sec {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.solutions-sec a { margin-top: auto; }

.solutions-sec a {
    font-size: 16px;
    color: #2a6f85;
    text-decoration: none;
    font-weight: 400;
}

.solutions-sec a i {
    margin-left: 8px;
    transition: 0.3s;
}

.solutions-sec a:hover i {
    transform: translateX(5px);
}

.solutions-list .solutions_sec {
    position: relative;
    left: -120px; 
}

.solutions-img img {
    height: 100%;
    object-fit: cover;
}

.solutions_sec button.owl-next:after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
}

.solutions_sec button.owl-prev:after {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
}
.solutions_sec .owl-nav{
    text-align: center;
}

.solutions_sec .owl-nav button {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc !important;
    border-radius: 50%;
    margin: 0 125px;
    bottom: 0;
    position: relative;
    font-size: 0px !important;
    transform: translateY(10%);
        margin: 0 100px;
}
.solutions_sec .owl-dots {
    text-align: center;
    margin-top: 0px;
}

.solutions_sec .owl-dots button {
    width: 15px;
    height: 15px;
}

.solutions_sec .owl-dots .owl-dot.active span {
    width: 15px;
    height: 15px;
}

    .who-we-serve p{
margin-bottom: 20px;
    }


    .liquidity-section {
  padding: 80px 0;
  background: #f5f5f5;
  margin-top: 50px;
}

.liquidity-img img {
  width: 100%;
  border-radius: 5px;
}

/* Content */
.liquidity-content {
  padding-left: 40px;
}

.liquidity-content ul {
  margin-bottom: 20px;
  margin-left: 20px;
}

.liquidity-content ul li {
    margin-bottom: 8px;
    font-size: 16px;
    list-style: disc;
    color: #000;
}
.liquidity-content p {
  margin-bottom: 25px;
  line-height: 1.6;
}

.liquidity-content {
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

.cta2 .container{
    padding: 100px 50px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;

}


.take_closer_look{
    padding: 50px 0px;
}

.take_closer_look .pl-padding{
    margin-left: -120px;
}

.take_closer {
    background-color: #e9f0f3;
    padding: 30px;
    margin-bottom: 30px;
}
.take_closer h4 {
    font-size: 21px;
}
.take_closer p {
    padding-top: 2px;
    line-height: 26px;
}

.take_closer a i {
    vertical-align: middle;
    padding-left: 10px;
    font-size: 15px;
}

.who-we-serve-list{
    background: #101820; 
    padding: 50px;
    margin-top: 40px;
}

.who-we-serve-list ul {
    border-bottom: 1px solid #454444;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    margin-bottom: 50px;

}.who-we-serve-list li.nav-item button {
    color: #fff;
        position: relative;
}.who-we-serve-list li.nav-item .active {
    background: inherit;
    color: #0070ad;
    border-radius: 0px;

}
.who-we-serve-list li.nav-item .active:after {
    border-bottom: 2px solid #0070ad;
    position: absolute;
    content: "";
    width: 100%;
    bottom: -32px;
    left: 0;
}
.we-serve-content {
    padding: 50px;
}
.we-serve-content h2{
    color: #fff;
}
.we-serve-content p{
    color: #fff;
}

.seven-values{
     background: #0070ad;
    padding: 0px 0px;
    color: #fff;
    margin-bottom: 50px;
}
.seven-values h2{
color: #ffffff;
}

.seven-values p{
color: #ffffff;
font-size: 21px;
width: 70%;
}
.seven-values span{
    font-size: 18px;
    font-style: italic;
}

.values-sec svg {
    background: #0070ad;
    fill: #fff;
    height: 80px;
    padding: 15px;
    width: 80px;
}
.values-sec {
    position: absolute;
}
.values-sec img {
    width: 80px;
    height: 80px;
}
.our-values{
    position: relative;
}.values-info {
    margin-left: 110px;
    margin-bottom: 50px;
}
.values-info h3 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 400;
}


.values-section-content {
    position: relative;
    background: #fbfbfb;
    padding: 20px 30px;
    left: -90px;
}

.values-section-one{
    margin-bottom: 50px;
}

.values-section-two{
    margin-bottom: 50px;
}
.values-section-two .values-section-content {
    left: 0px;
    margin-right: -90px;
}

.myrris-innovation{
    background-position: center; 
    overflow: inherit; 
    padding: 100px 0px;
           background-size: cover;
        background-position: center;
}
ul.footer-link {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 40px;
}


/*cms page */

.services-list{
    background: #fbfbfb;
    padding: 50px 0px;
}
.about_services .owl-nav {
    display: block !important;
    position: absolute;
    top: 0px;
    left: inherit;
    text-align: center;
    right: 0;
}
.about_services .owl-prev {
    display: inline-block !important;
    margin: 0px 10px;
    background: #fff !important;
    height: 40px;
    width: 40px;
    color: #000 !important;
    line-height: 40px !important;
    font-size: 0px !important;
    position: relative;
    border-radius: 100px;
    border: 1px solid #222 !important;
}

.about_services .owl-next {
    display: inline-block !important;
    margin: 0px 10px;
    background: #fff !important;
    height: 40px;
    width: 40px;
    color: #000 !important;
    line-height: 40px !important;
    font-size: 0px !important;
    position: relative;
    border-radius: 100px;
    border: 1px solid #222 !important;
}

.about_services .owl-prev span:after {
    content: "\f104";
    position: absolute;
    display: inline-block;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    left: 0;
    right: 0;
}.about_services .owl-next span:after {
    content: "\f105";
    position: absolute;
    display: inline-block;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    left: 0;
    right: 0;
}


.about_services .owl-dots button {
    width: 20px !important;
    height: 20px !important;
    background: #ffffff !important;
    border-radius: 50%;
    border: 1px solid #c59c4c !important;
    margin: 0px 10px;
}

.about_services .owl-dots button.active {
    background: #c59c4c !important;
}

.about_services .owl-dots {
    text-align: center;
    margin-top: 60px;
}




.services_img img{width: 100%;}

.services-des {
    padding: 30px 50px;
}


.about_ex-info {
    margin-top: 50px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 70px;
    margin-bottom: 90px;
}
.services-img img {
    width: 100%;
        height: 600px;
    object-fit: cover;
    border-radius: 10px !important;
    border: 0px !important;
}

.about_ex-info h3 {
    color: #000000;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 30px;
    font-size: 30px;
    font-family: "Montserrat", sans-serif;
}
.about_ex-info p {
    margin-bottom: 20px;
}

.about_ex-info {
    padding: 50px 50px 0px 50px;
    background: #fff;
    position: relative;
    top: 20%;
    left: -16%;
    height: 100%;
    border-radius: 10px 0px 0px 0px;
}
.about_ex-info h4 {
    font-size: 34px;
    font-weight: 600;
    margin: 15px 0;
    color: #111;
}

.about_ex-info ul {
  padding: 0px 15px;
  margin:: 0px 15px;
}
.about_ex-info ul li {
    word-wrap: break-word;
    list-style: auto;
    line-height: 34px;
}

.cms_pages ul li {
    color: #000;
    line-height: 32px;
}
/* ==== assets/css/style.css ==== */
@import url("https://pro.fontawesome.com/releases/v5.10.0/css/all.css");
@import url("/assets/css/flaticon.css");
:root{ 
    --primary-color:#0070ad;
    --secondary-color:#0070ad;
    --text-color:#8a8a8a;
    --light-bg-color:#f4f9fc;
    --primary-font-family: 'Houschka Pro' !important;
}
    
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Houschka Pro' !important;
    color:var(--text-color);
    font-weight:normal;
    font-style:normal;
    font-size:18px;
    line-height: 1.3;   

}
a{
    color:var(--primary-color);
    text-decoration:none;
    transition:.3s all;
    -webkit-transition:.3s all;
    -moz-transition:.3s all;
    -ms-transition:.3s all;
    display: inline-block;
}
/*a:hover{
    color:var(--secondary-color);
}*/
input, select, textarea, button {
    background-color: transparent;
    border: 2px solid #dce6f5;
    padding: 14px 20px;
    outline: none !important;
    box-shadow: none !important;
    height: auto;
    font-family: var(--primary-font-family);
    color: #000;
    font-weight: 300;
    font-size: 16px;
}
textarea {
    height: 100px !important;
    resize: vertical;
}
.container {
    max-width: 1400px;
    width: 100%;
}
.bg-light-section {
    background: var(--light-bg-color);
}
.bg-primary-color{
    background-color: var(--primary-color);
}
.bg-secondary-color{
    background-color: var(--secondary-color);
}
.breadcrumb-item+.breadcrumb-item {
    margin-bottom: 5px;
}
img{
    max-width:100%;
    height: auto;
        transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
}
ul, ol{
    padding:0;
    margin:0;
}
ul li, ol li{
    list-style:none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color:  #000;
    margin-bottom:15px;
    font-weight: 400;
}
h1, .h1{
    font-size:52px;
    font-weight: 800;
}
h2, .h2{
font-size: 32px;
    font-weight: 400;
}
h3, .h3{
    font-size:30px;
    font-weight: 400;
}
h4, .h4{
    font-size:28px;
    font-weight: 400;
}
h5, .h5{
    font-size:24px;
}
h6, .h6{
    font-size:20px;
}
p{
    margin-bottom:15px;
    line-height: 28px;
    font-weight: 400 !important;
       font-size: 16px;
    color: #222;
    letter-spacing: .24px;
}
p:last-child{
    margin-bottom:0;
}
.title {
    text-transform: capitalize;
    font-size: 40px;
    font-weight: 700;
}
.pt-7 {
    padding-top: 70px;
}
.pb-7 {
    padding-bottom: 70px;
}
.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
}
.alignleft {
    float: left;
    margin:0.5em 1.5em 0.5em 0;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

::scrollbar {
  width: 10px;
}
 
::scrollbar-track {
  background:#fff;
}
 
::-webkit-scrollbar {
  width: 0px;
}
 
::-webkit-scrollbar-track {
  background:#fff;
}
 
::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
::-moz-scrollbar {
  width: 0px;
}
 
::-moz-scrollbar-track {
  background:#fff;
}
 
::-moz-scrollbar-thumb {
  background-color: #ccc;
}
::-ms-scrollbar {
  width: 0px;
}
 
::-ms-scrollbar-track {
  background:#fff;
}
 
::-ms-scrollbar-thumb {
  background-color: #ccc;
}


/* From Uiverse.io by vinodjangid07 */ 
.global-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: rgb(161, 255, 20);
    border-radius: 30px;
    color: rgb(19, 19, 19);
    font-weight: 300;
    border: none;
    position: relative;
    cursor: pointer;
    transition-duration: .2s;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116);
    transition-duration: .5s;
    padding: 12px 30px;
}

.svgIcon {
  height: 25px;
  transition-duration: 1.5s;
}

.bell path {
  fill: rgb(19, 19, 19);
}

.global-button:hover {
  background-color: rgb(192, 255, 20);
  transition-duration: .5s;
}

.global-button:active {
  transform: scale(0.97);
  transition-duration: .2s;
}

.global-button:hover .svgIcon {
  transform: rotate(250deg);
  transition-duration: 1.5s;
}

.global-button i {
    position: relative;
    transform: rotate(-40deg);
    transition: 0.6s;
    color: #fff;
    margin-left: 6px;
}
.global-button:hover i{
transform: rotate(0deg);
}


   .updown {
    transform: translateZ(0);
    animation: bob 3s ease-in-out infinite;
    position: absolute;
    right: 0;
  }

  @keyframes bob {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-30px); } /* move up */
    100% { transform: translateY(0); }
  }


section {
    overflow: hidden;
}


.navbar-brand img {
    max-width: 160px;
}
.navbar-toggler {
    vertical-align: middle;
    float: right;
        margin-top: 0px;
    padding: 0;
}
.navbar-toggler .line {
    height: 4px;
    width: 35px;
    background:var(--primary-color);
    margin: 6px auto;
    transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.navbar-toggler .line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
    -webkit-transform: rotate(45deg) translate(7px, 7px);
    -moz-transform: rotate(45deg) translate(7px, 7px);
    -ms-transform: rotate(45deg) translate(7px, 7px);
}
.navbar-toggler .line:nth-child(2) {
    visibility: hidden;
}
.navbar-toggler .line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
    -webkit-transform: rotate(-45deg) translate(7px, -7px);
    -moz-transform: rotate(-45deg) translate(7px, -7px);
    -ms-transform: rotate(-45deg) translate(7px, -7px);
}
.navbar-toggler.collapsed .line {
    transform: rotate(0deg) translate(0, 0)!important;
    -webkit-transform: rotate(0deg) translate(0, 0)!important;
    -moz-transform: rotate(0deg) translate(0, 0)!important;
    -ms-transform: rotate(0deg) translate(0, 0)!important;
    visibility: visible !important;
}
.site-header .navbar-nav>li .dropdown-icon {
    display: none;
}
.top-bar {
    background: var(--primary-color);
    padding: 5px 0;
    font-size: 12px;
}.top-header ul {
    align-items: center;
    display: flex;
    justify-content: end;
    gap: 10px;
        padding-top: 5px;
}
.top-header ul li a {
    color: #fff !important;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 300;
    border-radius: 5px !important;
}


.top-bar ul li {
    display: inline-block;
}
.head-contact li {
    color: #fff;
}
.head-contact li a{
    color:#fff;
}
.head-contact li a:hover{
    color: var(--secondary-color);
}
.head-contact li+li {
    margin-left: 20px;
}
.head-contact li i {
    margin-right: 5px;
}
.head-social-icons li+li {
    margin-left:5px;
}
.head-social-icons li a {
    display: block;
    color: var(--secondary-color);
    width: 20px;
    height: 20px;
    line-height: 21px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 10px;
}
.head-social-icons li a:hover {
    color: #ffffff;
    background-color: var(--secondary-color);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}

.site-header {
    padding: 10px 0;
 background-color: #ffffff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-box-shadow: 0px 15px 10px -15px rgb(0 0 0 / 4%);
    -moz-box-shadow: 0px 15px 10px -15px rgb(0 0 0 / 4%);
    -ms-box-shadow: 0px 15px 10px -15px rgb(0 0 0 / 4%);
    box-shadow: 0px 15px 10px -15px rgb(0 0 0 / 4%);
    z-index: 2;
    width: 100%;/*
    overflow: hidden;*/
}
.site-header .navbar-nav>li {
    position: relative;
    margin-left: 15px;
}
.site-header .navbar-nav>li>a {
        padding-top: 10px;
    padding-bottom: 8px;
}
.site-header li a {
       font-size: 16px;
    color: #454545;
    font-weight: 500;
    text-transform: capitalize;
}
.site-header li a:hover, .site-header li.current-menu-item>a{
    color:var(--primary-color);
}
.site-header i.dropdown-caret {
    font-size: 0;
}
a.navbar-brand {
    margin-right: 40px;
}
.site-header li.menu-btn a {
    color: #fff;
    background: var(--primary-color);
    padding-left: 30px !important;
    padding-right: 30px !important;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    margin-left: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.site-header li.menu-btn a:hover {
    background: var(--secondary-color);
}
.site-header .navbar-nav .menu-item-has-children>a:after {
    content: "\f078";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-weight: 400;
    margin-left: 10px;
    vertical-align: text-bottom;
    font-size:16px;
}
.site-header .navbar-nav>li .sub-menu {
    -webkit-box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%);
    -ms-box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%);
    box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%);
    background: #ffffff;
    position: absolute;
    border: none;
    top: 80px;
    left: 0;
    width: 250px;
    z-index: 99;
    display: block;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-top: 3px solid var(--primary-color);
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}
.site-header .navbar-nav>li .sub-menu li {
    padding: 0;
}
.site-header .navbar-nav>li .sub-menu li a {
    padding: 10px 0;
    margin: 0;
    font-weight: 400;
    color: var(--text-color);
}
.site-header .navbar-nav>li .sub-menu li a:hover, .site-header .navbar-nav>li .sub-menu li.current-menu-item>a {
    color: var(--primary-color);
}
.site-header .navbar-nav>li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}
.cta a {
    background: #0070ad;
    color: #fff !important;
    padding: 15px 20px !important;
}
.btn {
    border: none;
    line-height: initial;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    padding: 17px 55px 15.5px 25px;
    position: relative;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    font-size: 15px;
    font-family: var(--primary-font-family);
    font-weight: 300;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
}
.btn-primary{
    background:var(--primary-color);
}
.btn-secondary {
    background: var(--secondary-color);
}
/*.btn i {
    position: absolute;
    right: 7px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    display: inline-block;
    height: 33px;
    width: 33px;
    line-height: 33px;
    color: var(--primary-color);
    border-radius: 50%;
    background-color: #f0f0f0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}*/
/*.btn-secondary i{
    color: var(--secondary-color);
}
.btn-primary:hover, .btn-primary:focus{
    background:var(--secondary-color);
}
.btn:hover i, .btn:focus i {
    background-color: #ffffff;
    color: var(--primary-color);
}
.btn-secondary:hover, .btn-secondary:focus{
    background: var(--primary-color);
}
.btn-secondary:hover i{
    color: var(--primary-color);
}*/
.read-more {
    color: #000;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -m-border-radius: 5px;
    border: 1px solid #0070ad;
}
.read-more i {
    font-size: 12px;
    vertical-align: middle;
    margin-left: 10px;
    transition: .3s all;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    -ms-transition: .3s all;
}
.read-more:hover {
    background: #0070ad;
    color:#fff;
}
.read-more:hover i{
    margin-left: 20px;
}
.main-banner {
    height: 75vh;
    position: relative;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
/*.item.main-banner:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: #000a5b;*/
/*    opacity: 0.5;*/
/*}*/
.home-slider .container {
    padding: 0 25px;
}
.main-banner .d-table {
    width: 100%;
    height: 100%;
}
.main-banner .d-table-cell {
    vertical-align: middle;
}
.main-banner-content {
    max-width: 850px;
    position: relative;
    padding-top: 90px;
}
.main-banner-content .btn-box .btn:first-child {
    margin-right: 15px;
}
/*.main-banner-content span {
    display: inline-block;
    margin-bottom: 20px;
    background: var(--secondary-color);
    font-size: 18px;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}*/
.main-banner-content h1 {
    margin-bottom: 0;
    font-size: 52px;
    font-weight: 300;
    color: #fff;
    line-height: 60px;
}
.main-banner-content p {
    line-height: 36px;
    color: #121521;
    max-width: 750px;
    font-size: 22px;
    margin-bottom: 0;
    margin-top: 30px;
    color: #fff;
}
.main-banner-content img {
    width: 120px !important;
    background: #fff;
    border-radius: 10px;
    margin-top: 20px;
    padding: 10px;
}   

.home-slider .owl-nav button {
    position: relative;
    right: 30px;
    top: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px !important;
    font-size: 21px !important;
    background: #fff !important;
    border-radius: 100%;
    outline: none;
}
.home-slider .owl-nav button:hover {
    background: var(--primary-color) !important;
    color:#fff !important;
}

/*.home-slider .owl-nav button i {
    line-height: 18px;
    width: 14px;
}*/
.home-slider .owl-nav button.owl-prev {
    margin-top: 35px;
    left: 20px;
    position: absolute;
}
.home-slider .owl-nav button.owl-next {
    margin-top: 35px;
        right: 20px;
    position: absolute;
}

.home-slider .owl-dots {
    text-align: center;
    margin-top: -60px;
    position: absolute;
    right: 40px;
}
.home-slider .owl-dots button.active {
    width: 30px;
    background: #ffffff !important;
}
.home-slider .owl-dots button {
    border: 2px solid #ffffff !important;
}



.owl-nav button {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-box-shadow: 0px 0px 16px 0px rgb(205 190 255 / 20%);
    -ms-box-shadow: 0px 0px 16px 0px rgb(205 190 255 / 20%) !important;
    font-size: 30px !important;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    top: 27px;
}

.owl-nav button.owl-next {
    right: 0px;
}
 

.owl-dots {
    text-align: center;
    margin-top: 40px;
}
.owl-dots button {
    width: 12px;
    height: 12px;
    border: 2px solid var(--primary-color) !important;
    margin: 0 4px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
}
.owl-dots button.active {
    background: #0070ad !important;
}
.featured-stories button.owl-next:after {
    position: absolute;
    content: "\f054";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    right: 35px;
    opacity: 1;
    font-size: 21px;
    top: 16px;
}

.featured-stories button.owl-prev:after {
    position: absolute;
    content: "\f053";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 1;
    font-size: 21px;
    top: 16px;
    left: 20px;
}



.about_img
 {
    position: relative;
}

.about_img img {
    border-radius: 10px;
}
.about-sec {
    position: relative;
    z-index: 9;
    background: #fff;
}


.about-sec p {
    font-size: 21px;
    color: #000;
    line-height: 32px;
}

/*.about-innovation {
    background: #0070ade8;
    padding: 50px;
    width: 40%;
    position: relative;
    bottom: -140px;
}*/
.about-innovation h4{
color: #fff;
}
.about-innovation p {
    color: #fff;
    font-size: 32px;
    line-height: 50px;
}

.counter-sec {
    padding: 50px 0px;
}
.counter-sec h4 {
    font-size: 38px;
    margin-bottom: 25px;
    /* border-bottom: 1px solid; */
    position: relative;
    padding-bottom: 10px;
}
.counter-sec h4:after {
    content: "";
    position: absolute;
    background: #0070ad;
    height: 4px;
    width: 10%;
    bottom: 0;
    left: 0;
    border-radius: 100px;
}






.content-box img {
    width: 100%;
}

.content-box .img-box {
    width: 150px;
    position: relative;
    transition: 0.6s
}
.content-box:hover .img-box img {
    transform: scale(1.3);
            transform: rotateY(180deg);
}


.content-box p {
    font-size: 14px;
}

.counter-section {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.counter-item {
    background:rgb(61 64 165);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    padding-bottom: 0;
}
.counter-icon {
    font-size: 45px;
    color: #fff;
    margin-bottom: 10px;
}
.counter-item h4 {
    font-size: 40px;
    color: #fff;
    font-weight: bold;
}
.counter-item p {
    font-size: 20px;
    color: #fff;
}
.counter-item .feature-small-content {
    padding-bottom: 30px;
    border-bottom: 2px solid var(--secondary-color);
}
.image-bg-column {
    background-size: cover;
    background-position: center center;
}
.appointment-section .shape-left{
    display: none;
}


.shape-left {
    position: absolute;
    bottom: 0;
    right: calc(100% - 1px);
    height: 100%;
    width: 200px;
    text-align: right;
    z-index: 1;
}
.form-control {
    background-color: transparent;
    border: 1px solid #cfcfcf;
    padding: 10px 20px;
    outline: none !important;
    box-shadow: none !important;
    height: auto;
    font-family: var(--primary-font-family);
    color: #000;
    font-weight: 300;
    font-size: 14px;
}.wpcf7-list-item {
    margin: 0 0 0 0em;
}
select{
        background-color: transparent;
    border: 1px solid #cfcfcf;
    padding: 10px 20px;
    outline: none !important;
    box-shadow: none !important;
    height: auto;
    font-family: var(--primary-font-family);
    color: #000;
    font-weight: 300;
    font-size: 12px;
    width: 100%;
}
.form-field label {
    font-size: 14px;
    color: #000;
    padding-bottom: 5px;
    font-weight: 300;
}

.form-floating, .form-field {
    position: relative;
    margin-bottom: 20px;
}
.form-floating>.form-control, .form-floating>label {
    padding: 14px 20px;
}
.form-control:focus, .form-floating>.form-control:not(:placeholder-shown){
    border-color:var(--primary-color);
}
.form-floating>.form-control, .form-floating>.form-select {
    height: auto;
    line-height: normal;
}
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 14px;
    padding-bottom: 14px;
}
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: 1;
    transform: scale(.85) translateY(-11px) translateX(8px);
    -webkit-transform: scale(.85) translateY(-11px) translateX(8px);
    -moz-transform: scale(.85) translateY(-11px) translateX(8px);
    -ms-transform: scale(.85) translateY(-11px) translateX(8px);
    padding: 0 10px;
    height: auto;
    background: #fff;
}
.form-submit .btn {
    padding-right: 25px;
}
.contact-form .form-control:focus{
    border-color: #dce6f5;
}
.input-group-text {
    border-color: #dce6f5;
    background: #dce6f5;
    width: 50px;
    text-align: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    font-size: 18px;
}
.input-group {
    flex-wrap: nowrap;
}
.wpcf7-form-control-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.wpcf7-not-valid-tip {
    display: none;
}
.wpcf7-not-valid {
    border-color: #000000 !important;
}
.wpcf7-response-output {
    text-align: center;
        padding: 10px !important;
    margin: 10px 0 !important;
}
.contact-form textarea {
    height: 150px !important;
}
.contact-form .input-group p {
    width: 100%;
    font-size: 14px;
    color: #000;
    font-weight: 300;
}

.contact-form label {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    margin-bottom: 6px;
}
.contact-form p{
    margin-bottom: 0px;
}
.contact-form  .input-group{
    margin-bottom: 15px;
}

.contact-form .form-submit .btn {
    width: 100%;
    max-width: 300px;
}

.contact-form .form-control {
    padding: 14px 20px;
}

.career-form .form-control {
    padding: 14px 20px;
    background: #fff;
}

.contact-form .col-12 .input-group {
    margin-bottom: 15px;
}
.contact-form .col-12 .input-group input[type="checkbox"] {
    margin-right: 10px;
}
.location-sec {
    background-color: #e9f0f3;
    padding: 30px;
}
.location-sec a {
    color: #000;
    font-size: 16px;
    display: block;
    line-height: 30px;
}
.location-sec h4{    
    font-size: 21px;
}
.location-sec i {
    padding-right: 10px;
}












.review-slider {
    padding-left: 35px;
    padding-right: 35px;
}
.review-box {
    text-align: center;
    padding: 0 20px;
}
.review-box-image {
    position: relative;
    display: inline-block;
    line-height: 0;
    margin-bottom: 26px;
}
.review-box-image img {
    display: block;
    width: 140px;
    padding: 8px;
    border: 2px solid #2e3192;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
}
.review-box-image .quote-icon {
    position: absolute;
    top: 0;
    right: -3px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
        border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    color: #fff;
}
.review-box h5 {
    font-weight: 300;
    font-size: 20px;
}
.review-box h6 {
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: #0070ad;
}
.page-template-doctors-template .team-box{
    margin: 0px !important;
}
.single-our_team  .team-box{
        margin: 0px !important;
}
.single-our_team .team-box{
    margin: 0px !important;
}

.team-box {
    position: relative;
    display: block;
    margin: 0 25px;
    padding-bottom: 30px;
}
.team-box .image-box {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -ms-border-radius: 10px 10px 0px 0px;
    margin-bottom: 0px;

}
.team-box .image-box a {
    display: block;
}
.team-box .image-box img {
    transition: all 300ms 
ease;
    -webkit-transition: all 300ms 
ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    height: 300px;
    object-fit: cover;
    width: 100%;
    object-position: top;
}
.team-box .team-content {
    position: relative;
    display: block;
    margin: 0 0px;
    position: relative;
    padding: 15px;
    border-radius: 0px 0px 15px 15px;
    -webkit-border-radius: 0px 0px 15px 15px;
    -moz-border-radius: 0px 0px 15px 15px;
    -ms-border-radius: 0px 0px 15px 15px;
    /* margin-top: -67px; */
    z-index: 1;
    box-shadow: 0 10px 30px #e7e8ea;
    -webkit-box-shadow: 0 10px 30px #e7e8ea;
    -moz-box-shadow: 0 10px 30px #e7e8ea;
    -ms-box-shadow: 0 10px 30px #e7e8ea;
    text-align: center;
}
.team-content h5 {
    font-weight: 300;
    margin-bottom: 10px;
    text-transform: capitalize;
    color: #0070ad;
    font-size: 16px;
}
.team-content span {
    text-transform: capitalize;
    font-size: 14px;
        font-weight: 300;
}
.team-content .social-icons {
    margin-top: 20px;
}


.doctor-details h5 {
    font-size: 18px;
    color: #0070ad;
}

.doctor_fullinfo h4 {
    font-size: 20px;
    color: #0070ad;
    border-bottom: 1px solid;
    display: inline-block;
    padding-bottom: 8px;
}
figure.doctor-image img {
    border-radius: 10px !important;
}


.social-icons li {
    display: inline-block;
    margin: 0 3px;
}
.social-icons li a {
    display: block;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #0070ad;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    font-size: 16px;
    color:#0070ad
}
.social-icons li a:hover {
    border-color: #0070ad;
    background:#0070ad;
    color:#fff;
}
.team-box:hover .image-box img {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
}
.blog-grid {
    background: #fff;
/*    box-shadow: 0px 0px 16px 0px rgb(205 190 255 / 20%);
    -webkit-box-shadow: 0px 0px 16px 0px rgb(205 190 255 / 20%);
    -moz-box-shadow: 0px 0px 16px 0px rgb(205 190 255 / 20%);
    -ms-box-shadow: 0px 0px 16px 0px rgb(205 190 255 / 20%);*/
    position: relative;
    transition: .3s all;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    -ms-transition: .3s all;
    overflow: hidden;
}
.blog-grid .image-box{
    position: relative;
    display: block;
    overflow: hidden;
}
.blog-grid .image-box img {
    width: 100%;
    height: 280px;
    vertical-align: middle;
    object-fit: cover;
    object-position: center center;
}
.blog-grid:hover .image-box img {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
}
.blog-grid .image-box a {
    display: block;
}
.blog-grid-content {
    padding: 30px 30px;
    position: relative;
    top: -60px;
    background: #fff;
    margin-left: 25%;
    box-shadow: 0 25px 20px 0 rgb(0 0 0 / 4%);
}
.blog-grid-content h3 {
    font-size: 18px;
    line-height: 32px;
    font-weight: 300;
} 
.blog-grid-content h3 a {
    font-size: 21px;
    line-height: 32px;
    font-weight: 400;
    color: #000;
}
.blog-grid-content p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-info {
    margin-bottom: 15px;
}
.post-info a{
    color: var(--text-color);
}
.blog-grid-content .post-date {
    position: absolute;
    display: inline-block;
    right: 30px;
    top: -45px;
    width: 90px;
    height: 90px;
    background: var(--light-bg-color);
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border: 5px solid #fff;
    padding: 13px 0 10px 0;
    box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
    margin-top: -45px;
    margin-bottom: 23px;
}
.blog-grid-content .post-date h3 {
    display: block;
    font-size: 32px;
    line-height: 32px;
    font-weight: 800;
    color:#000;
}
.blog-grid-content .post-date h3 span {
    display: block;
    font-size: 15px;
    line-height: 16px;
    font-weight: 300;
    color: #142441;
    text-transform: uppercase;
    margin-top: 4px;
    color:var(--primary-color);
}
.blog-post-date ul {
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    margin-bottom: 8px;
    margin-right: 30px;
}

.blog-post-date ul li {
    color: #181818;
    font-size: 14px;
    position: relative;

}
.blog-post-date li.category {
    font-size: 15px !important;
    color: #000 !important;
    font-weight: 400;
    padding-left: 60px;
    text-transform: uppercase;
}
.blog-post-date li.category:after {
    content: "";
    height: 4px;
    width: 40px;
    position: absolute;
    left: 0;
    display: block;
    left: 0;
    top: 10px;
    background: #0070ad;
}
.blog-section .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.go-top {
    position: fixed;
    width: 40px;
    height: 40px;
    right: 25px;
    bottom: 25px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    cursor: pointer;
    transition: .3s all;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    -ms-transition: .3s all;
}
.go-top:hover {
    background: var(--secondary-color);
}
.go-top.active {
    opacity: 1;
    visibility: visible;
}
.site-footer {
/*       background: linear-gradient(90deg, #0e0a34 0, #003a88 100%);*/
    position: relative;
    background: #dee1e8;
}
.footer-map img {
    margin-bottom: 40px;
    width: 60%;
}
.footer-logo img {
opacity: 0.5
}

footer:hover .footer-logo img{
    opacity: 1;
}
.footer-logo{
    text-align: center;
}
.footer-logo img {
  width: 100%;
  transition: width 0.2s linear;
  animation: growImage linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 70%;
  margin: 0 auto;
}

@keyframes growImage {
  from {
    width: 100%;
  }
  to {
    width: 80%;
  }
}













.footer-logo {
    margin-bottom: 30px;
    margin-top: 20px;
}
.footer-social ul li {
    display: inline-block;
    margin-right: 4px;

}   
.footer-social li a {
    display: block;
    color: #fff;
    width: 35px;
    height: 35px;
    line-height: 37px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    background-color: #3a3a3a;
    text-align: center;
    font-size: 16px;
}
.footer-social li a:hover {
    color: #ffffff;
    background-color: #0070ad;
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.site-footer p, .site-footer a {
    color: #000;
    font-size: 16px;
}
.site-footer a:hover{
    color: #0070ad;
}

footer ul li
{
     line-height: 38px;
}
.site-footer h2 {
    font-size: 21px;
    color: #000;
    margin-bottom: 15px;
    font-weight: 400;
}

/*.site-footer h2:after {
    content: '';
    position: relative;
    display: block;
    width: 60px;
    height: 3px;
    background: #000;
    margin-top: 8px;
}*/
.footer-links li {
    margin-bottom: 8px;
}
.footer-links li a {
    position: relative;
    transition: 0.6s;
}
.footer-links li a:before {
    content: "\f061";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-weight: 400;
    margin-right: 12px;
    font-size: 14px;
    color: #ddd;
    display: none;
    position: absolute;
    left: 0;
}
.footer-links li a:hover:before{
    display: block;
    padding-left: 0px;
    left: 0;
}
.footer-links li a:hover {
    color:var(--secondary-color);
    padding-left: 20px;
}
.footer-map iframe {
    width: 100%;
    height: 240px;
/*  -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);*/
}
.footer-map ul li {
    margin-bottom: 10px;
    display: flex;
    line-height: 28px;
    color: #000;
    font-size: 16px;
}
.footer-map ul li i {
    margin-right: 10px;
    position: relative;
    top: 6px;
    color: #000;
}
.payment-we-accept h4 {
    font-size: 18px;
    margin-top: 20px;
    font-weight: 600;
}
.payment-we-accept img{
    width: 70%;
}

.copyright-area .container {
    border-top: 1px solid #ccc;
    padding-top: 30px;
}

.copyright-area {
    background: #dee1e8;
    font-size: 16px;
    padding-bottom: 20px;
}
.copyright-area p, .copyright-area a {
    color: #000;
    font-size: 16px;
    text-align: left;
}
.copyright-area a:hover{
    color: var(--secondary-color);
}
.copyright-area svg {
  margin:0 2px;
}
.copyright-area #heart {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dashoffset: 400;
  stroke-dasharray: 400;
  animation: stroke 3s ease-in-out infinite alternate;
  -webkit-animation: stroke 3s ease-in-out infinite alternate;
  -moz-animation: stroke 3s ease-in-out infinite alternate;
  -ms-animation: stroke 3s ease-in-out infinite alternate;
  stroke: red;
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
.newsletter-section {
    border-bottom: 1px solid #272a35;
    margin-bottom: 60px;
    padding-bottom: 50px;
}
.newsletter-section .title {
    color: #fff;
    font-weight: bold;
}
.newsletter-form input {
    display: block;
    width: 100%;
    height: 70px;
    line-height: initial;
    border: none;
    background-color: #ffffff;
    border-radius: 70px;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    -ms-border-radius: 70px;
    color: #121521;
    outline: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 165px;
    padding-left: 30px;
    font-size: 18px;
}
.newsletter-form form{
    position: relative;
}
.newsletter-form button {
    position: absolute;
    right: 7.5px;
    top: 7.5px;
}
.page-title-banner {
    min-height: 300px;
    z-index: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
}
    .page-title-banner:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #101010;
    z-index: -1;
    opacity: .5;
    }

.page-title-banner h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 300;
}
.page-title-banner p {
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    width: 50%;
}
/*
.breadcrumb {
    background: #fff;
    padding: 10px 10px;
}


ol.breadcrumb li.breadcrumb-item{
          font-size: 16px;
    font-weight: 400;  
}
.breadcrumb-item.active {
    color: #000;
}

.breadcrumb-item a {
    color: var(--secondary-color);
}*/

.breadcrumb-sec {
    background: #ffffff;
    /* background: #f8fafc; */
    padding: 10px 0px;
    position: sticky;
    top: 0;
    z-index: 999;
    /* box-shadow: 0 25px 56px 0 rgba(0, 0, 0, .3); */
        box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.12);

}

.breadcrumb {
  margin-bottom: 0px;
}


ol.breadcrumb li.breadcrumb-item{
    font-size: 16px;
    font-weight: 400;  
}
.breadcrumb-item.active {
    color: #000;
}

.breadcrumb-item a {
    color: #0070ad;
}

.about-item-section .left-align-icon {
    border: 1px solid #000;
    padding: 22px;
    height: 98%;
}
.single_blog .featured-media-inner.section-inner {
    display: none;
}
.single-service-section img {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    margin-bottom:25px;
    width: 100%;
}
.single-service-content ul {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    margin: 30px 0 20px;
}
.single-service-content ul li {
    width: 45%;
    position: relative;
    margin-bottom: 20px;
    padding-left: 35px;
}
.single-service-content ul li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-weight: 400;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    -webkit-border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    -moz-border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    -ms-border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    background-color: rgb(244 87 46 / 26%);
    color: var(--secondary-color);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    display: inline-block;
    font-size: 11px;
    position: absolute;
    left: 0;
    top: -2px;
}
.single-service-content h1, .single-service-content h2, .single-service-content h3,.single-service-content h4, .single-service-content h5, .single-service-content h6 {
    clear: both;
}
.widget-area .widget {
    margin-top: 35px;
    -webkit-box-shadow: 0px 0px 29px 0px rgb(102 102 102 / 8%);
    -moz-box-shadow: 0px 0px 29px 0px rgb(102 102 102 / 8%);
    -ms-box-shadow: 0px 0px 29px 0px rgb(102 102 102 / 8%);
    box-shadow: 0px 0px 29px 0px rgb(102 102 102 / 8%);
    background-color: #ffffff;
    padding: 25px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}
.widget-area .widget:first-child {
    margin-top: 0;
}
.widget-area .widget .widget-title {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-transform: capitalize;
    position: relative;
    font-weight: bold;
    font-size: 20px;
}
.widget-area .widget .widget-title::before {
    content: '';
    position: absolute;
    background: var(--secondary-color);
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 3px;
}
.widget-area .widget_services_list ul li a {
    display: block;
    position: relative;
    border-bottom: 1px solid #eeeeee;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 15px;
    padding-right: 35px;
    color: #5d6576;
    z-index: 1;
    font-weight: 300;
    font-size: 16px;
}
.widget-area .widget_services_list ul li a i {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.widget-area .widget_services_list ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transition: .3s all;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    -ms-transition: .3s all;
    opacity: 0;
    visibility: hidden;
}
.widget-area .widget_services_list ul li a.active::before, .widget-area .widget_services_list ul li a:hover::before {
    opacity: 1;
    visibility: visible;
    width: 5px;
}
.widget-area .widget_services_list ul li a.active, .widget-area .widget_services_list ul li a:hover {
    background-color: var(--secondary-color);
    color: #ffffff;
    padding-left: 20px;
}
.widget_form .row>div {
    width: 100%;
}
.widget_form .form-control {
    padding: 12px 20px;
    background-color: #f6f6f6;
}
.widget_form .form-field .ajax-loader {
    position: absolute;
    right: 0;
    top: 15px;
}
.widget_form .form-field {
    position: relative;
    margin-bottom: 15px;
}
.widget_form .form-submit .btn{
    width:100%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}
.pagination-area {
    margin-top: 20px;
    text-align: center;
}
.pagination-area .page-numbers {
    width: 40px;
    height: 40px;
    margin: 0 2px;
    display: inline-block;
    background-color: #ffffff;
    line-height: 40px;
    color: #121521;
    -webkit-box-shadow: 0 2px 10px 0 #d8dde6;
    -moz-box-shadow: 0 2px 10px 0 #d8dde6;
    -ms-box-shadow: 0 2px 10px 0 #d8dde6;
    box-shadow: 0 2px 10px 0 #d8dde6;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 300;
}
.pagination-area .page-numbers.current, .pagination-area .page-numbers:hover, .pagination-area .page-numbers:focus {
    background: var(--secondary-color);
    color: #ffffff;
}
.entry-meta {
    margin-bottom: 20px;
}
.entry-meta li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}
.page-title-banner .entry-meta li {
    color: #fff;
    font-size: 14px;
}
.entry-meta li::before {
    content: '';
    position: absolute;
    top: 10px;
    right: -15px;
    width: 8px;
    height: 2px;
    background: var(--secondary-color);
}
.entry-meta li:last-child::before {
    display:none;
}
.entry-meta li span {
    color: #000;
}
.page-title-banner .entry-meta li span {
    color: #fff;
}
.widget-area .widget_fovia_posts_thumb .item {
    overflow: hidden;
    margin-bottom: 20px;
}
.widget-area .widget_fovia_posts_thumb .item:last-child {
    margin-bottom: 0px;
}
.widget-area .widget_fovia_posts_thumb .item .thumb {
    float: left;
    height: 80px;
    overflow: hidden;
    position: relative;
    width: 80px;
    margin-right: 15px;
}
.widget-area .widget_fovia_posts_thumb .item .thumb .fullimage {
    width: 80px;
    height: 80px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.widget-area .widget_fovia_posts_thumb .item .info {
    overflow: hidden;
}
.widget-area .widget_fovia_posts_thumb .item .info time {
    display: block;
    color: #7d7d7d;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
}
.widget-area .widget_fovia_posts_thumb .item .info h4 {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 300;
    color: #000;
}
.widget-area .widget_fovia_posts_thumb .item  .info a{
    color: #000;
}
.contact-map iframe {
    width: 100% !important;
    height: 300px !important;
    vertical-align: middle;
/*  -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);*/
}
.container-bg-box {
    position: relative;
    background: var(--primary-color);
    border-radius: 20px;
    padding: 69px 30px 52px 100px;
    margin-bottom: -105px;
    z-index: 1;
}
.contact-link-item {
    position: relative;
    display: inline-block;
    padding-left: 95px;
}
.contact-link-item .icon-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    line-height: 73px;
    text-align: center;
    font-size: 30px;
    background: #fff;
    border-radius: 50%;
    color:var(--secondary-color);
}
.contact-link-item h4 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 10px;
}
.contact-link-item p, .contact-link-item a {
    color: #fff;
}
.contact-link-item a:hover {
    color: #fff;
}
.page-404 img {
    max-width: 80%;
}
.archive-subtitle {
    margin-bottom: 15px;
}



@media only screen and (min-width: 1200px) {
.site-header .navbar-nav>li {
    margin-left: 5px;
}   
}

@media only screen and (max-width: 1199px) {
.main-banner {
    height: 550px;
}
.main-banner-content {
    max-width: 550px;
}
.main-banner-content h1 {
    font-size: 50px;
}

.banner-info {
    width: 55%;
}
.banner2-right {
    left: -45px;
}
.blog-grid-content {
    margin-left: 12%;
}

h1, .h1{
    font-size:46px;
}
h2, .h2{
    font-size:40px;
}
h3, .h3{
    font-size:36px;
}
h4, .h4{
    font-size:28px;
}
h5, .h5{
    font-size:24px;
}
h6, .h6{
    font-size:20px;
}   
.feature-box {
    padding: 25px;
}

.site-footer p, .site-footer a {
    word-break: break-all;
}
section.cta-sec {
    padding: 60px 0px 70px 0px;
}


section.cta-sec h2 {
    font-size: 32px;
}
.title {
    font-size: 36px;
}
}

@media only screen and (max-width: 1024px) {
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
.who-we-are {
    margin-top: 50px;
    margin-left: 0px;
}
.who-we-serve-list{
    margin-top: 40px;
}

.who-we-serve-list .heading {
    text-align: left;
    padding: 0px 0px;
}

.myrris-innovation{
    padding: 50px 0px
}
.about-innovation {
    width: 100%;
 }

.seven-values p {
    width: 100%;
}.values-section-content {
    left: 0px;
}.values-section-two .values-section-content {
    left: 0px;
    margin-right: 0px;
}.values-section-one {
    margin-bottom: 0px;
}.values-section-two {
    margin-bottom: 0px;
}section.cta2 {
    margin-top: 40px;
}.cta2 .container {
    padding: 50px 50px;
    border-radius: 0px;
}
.values-section-content {
    padding: 20px 20px;
}.partners-img {
    height: 90px;
    width: 50%;
}.partners-sec img {
    margin-top: 8px;
}.career-apply {
    margin-top: 0px !important;
}.liquidity-section {
    margin-top: 50px;
}
.take_closer_look {
    padding: 50px 0px;
    padding-bottom: 0px;
}.latest-client-info {
    max-width: 48%;
    padding: 40px 20px;
}
}


@media only screen and (max-width: 991px) {
h1, .h1{
    font-size:40px;
}
h2, .h2{
    font-size:33px;
}
h3, .h3{
    font-size:30px;
}
h4, .h4{
    font-size:26px;
}
h5, .h5{
    font-size:24px;
}
h6, .h6{
    font-size:20px;
}
.pb-7 {
    padding-bottom: 60px;
}

.pt-7 {
    padding-top: 60px;
}
.site-header {
    padding: 0;
}
.header-logo img {
    width: 240px;
    height: auto;
}

.navigation-bar .navbar-toggler {
    position: absolute;
    right: 0;
    z-index: 999;
}

.site-header .navbar {
    padding: 15px 0 !important;
}
.site-header .navbar-collapse{
    visibility: hidden;
    transform: translateX(-100%);
    border-radius: 0;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1200;
    width: 80%;
    transition: visibility .3s ease-in-out, transform .3s ease-in-out;
    background: #f2f2f2;
     
}
.site-header .navbar-collapse.show {
    padding: 0px 0px;
    visibility: visible;
    transform: translateX(0);
    top: 0px;
}

.site-header .navbar-nav>li {
    position: relative;
    margin-left: 0px;
    display: block;
    width: 100%;
    border-bottom: 1px solid rgb(220 230 245 / 25%);
}
/*.site-header .navbar-nav>li:last-child{
    border:none;
}*/
.site-header .navbar-nav>li>a {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 25px;
    padding-right: 25px;
    color: #fff;
}
.site-header .navbar-nav>li{
    color: #fff;
}
.site-header .navbar-nav>li .dropdown-icon {
    display: inline-block;
    position: absolute;
    right: 15px;
    font-size: 24px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    top: 8px;
}
.site-header li.menu-btn {
    padding: 20px 25px;
}
.site-header li.menu-btn a {
    color: #fff;
    text-align: center;
    margin:0;
}
.site-header .navbar-nav .menu-item-has-children>a:after{
    display:none;
}
.site-header li.menu-btn a {
    background: var(--secondary-color);
}
.site-header .navbar-nav>li .sub-menu {
    position: relative;
    opacity: 1;
    visibility: visible;
    top: 0;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    padding: 0;
    width: 100%;
    margin: 0;
    border: none;
    display:none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
}
.site-header .navbar-nav>li .sub-menu li {
    padding: 0;
    border-bottom: 1px solid rgb(220 230 245 / 25%);
    color:#fff;
}
.site-header .navbar-nav>li .sub-menu li:last-child{
    border:none;
}
.site-header .navbar-nav>li .sub-menu li a {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 35px;
    padding-right: 25px;
    color: #fff;
    font-size: 16px;
}
.site-header .navbar-nav>li .sub-menu li a:hover {
    color: #fff;
}
.site-header .navbar-nav>li.current-menu-item>a, .site-header .navbar-nav>li .sub-menu li.current-menu-item>a {
    color: var(--secondary-color);
}
.site-header ul li .dropdown-icon.active:before {
    content: '\f068';
}
.main-banner-content h1 {
    font-size: 42px;
}
.main-banner-content {
    max-width: 650px;
    padding-right: 50px;
}


.owl-nav button.owl-next {
    right: -5px;
    left: auto;
}
.owl-nav button.owl-prev {
    left: -5px;
}
.home-slider .owl-nav button {
    right: 15px;
    left:auto;
}
.owl-dots {
    margin-top: 10px;
}
.form-control {
    padding: 16px 20px;
}
.blog-grid-content .post-date {
    right: 15px;
    top: -25px;
    width: 80px;
    height: 80px;
    border-width: 4px;
}
.blog-grid-content {
    padding: 20px;
}
.post-info {
    font-size: 14px;
}

.single-service-content ul li {
    width: 100%;
}


    .main-banner {
        height: 300px;
    }
.about_img img {
    width: 100%;
}
    section.cta-sec {
        padding: 60px 0px 0px 0px;
    }



.main-banner-content h1 {
        font-size: 36px;
        line-height: 56px;
    }
.heading h2 {
    font-size: 30px;
}.service-sec {
    margin-bottom: 30px;
}.industry-list ul li {
    width: 100%;
}

.banner2-right {
    left: 4%;
    width: 90%;
    top: -40px;
}

.banner2-right h3 {
    font-size: 22px;
}.banner2-right p {
    font-size: 16px;
}


.stories-sec {
    max-width: 700px;
    padding: 30px 20px;
}
.stories-sec h4 {
    font-size: 25px;
}
.stories-sec p {
    font-size: 16px;
}

.get-started-sec h3 {
    font-size: 30px;
}
.get-started-sec p {
    line-height: 30px;
    font-size: 18px;
}
.services-offer {
    padding-bottom: 35px;
}.solutions-info img {
    height: 200px;
}.who-info {
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 0px solid#ccc;
    padding-bottom: 20px;
}.who-info {
    margin-top: 20px;
    margin-bottom: 50px;
}section.about-section.about-sec.pt-7.pb-7 {
    padding-top: 0px;
}
.counter-sec h4 {
    font-size: 30px;
 }.counter-sec {
    padding: 20px 0px;
}.myrris-innovation {
    padding: 20px 0px;
}.about-innovation p {
    font-size: 28px;
}.events-sec {
    margin-bottom: 30px;
}.heading.partners {
    padding-top: 0px !important;
}
.solutions-list .solutions_sec {
    position: relative;
    left: 0px;
}.liquidity-content {
    padding-left: 0px;
}.take_closer_look .pl-padding {
    margin-left: 0px;
}.who-we-serve-list {
    padding: 30px;
}.we-serve-content {
    padding: 30px 0px;
}    .liquidity-section {
        margin-top: 0px;
    }
    .liquidity-section {
    padding-bottom: 20px;
}.take_closer_look {
    margin-top: 0px !important;
}
.who-we-serve-list ul {
    justify-content: flex-start;
}
.page-title-banner p {
    width: 60%;
}
.liquidity-section {
    padding: 40px 0 !important;
  }
}

@media (max-width: 768px) {

  .accordion.horizontal {
    display: block;
    height: auto;
  }

  .accordion.horizontal .accordion-item {
    display: block;
    width: 100%;
  }

  .accordion.horizontal .accordion-button {
    writing-mode: horizontal-tb;
    transform: rotate(0);
    text-align: left;
  }

  .accordion.horizontal .accordion-collapse {
    display: none;
  }
  .accordion.horizontal .accordion-item.active .accordion-collapse {
    display: block;
  }
    .solutions-info img {
        height: 300px;
    }.accordion.horizontal .accordion-button {
    font-size: 21px;
}.solutions-info h4 {
    font-size: 21px;
}
.location-sec {
    margin-bottom: 30px;
}
}





@media only screen and (max-width: 767px) {
body {
    font-size: 16px;
}
h1, .h1{
    font-size:30px;
}
h2, .h2{
    font-size:28px;
}
h3, .h3{
    font-size:26px;
}
h4, .h4{
    font-size:24px;
}
h5, .h5{
    font-size:22px;
}
h6, .h6{
    font-size:18px;
}
.btn {
    font-size: 14px;
}
.main-banner-content .btn {
    min-width: 240px;
}
.site-header .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}
.site-header .navbar-nav>li .dropdown-icon {
    right: 5px;
}
.site-header .navbar-nav>li .sub-menu li a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 15px;
}
.main-banner-content h1 {
    font-size: 30px;
}
.btn {
    padding: 14px 50px 13.5px 20px;
}
.home-slider .container {
    padding: 0 15px;
}
.home-slider .owl-nav button {
    right: 10px;
    width: 40px;
    height: 40px;
    line-height: 42px !important;
    font-size: 24px !important;
}
.home-slider .owl-nav button.owl-prev {
    margin-top: 25px;
}
.home-slider .owl-nav button.owl-next {
    margin-top: 25px;
}

    .site-footer h2, .footer-logo {
        margin-bottom: 10px;
        font-size: 22px;
    }
.go-top {
    right: 15px;
    bottom: 15px;
}
.site-header .navbar {
    padding: 10px 0 !important;
}
.main-banner {
    height: 450px;
}
.owl-nav button {
    width: 40px;
    height: 40px;
    font-size: 24px !important;
    line-height: 42px !important;
}
.page-title-banner {
    min-height: 200px;
}
.left-align-icon {
    margin: 0 auto;
}
.about-item-section .row>div+div {
    margin-top: 40px;
}

.single-service-section img {
    margin-bottom: 25px;
}
.single-service-content ul {
    margin: 20px 0 10px;
}
.blog-grid-content .post-date {
    top: -32px;
}
.blog-grid-content .post-date h3 {
    font-size: 28px;
}
.container-bg-box {
    margin-bottom: 60px;
}
.contact-link-item {
    margin-bottom: 30px;
    padding-left: 65px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.contact-link-item:last-child {
    margin-bottom: 0px;
}
.contact-link-item .icon-box {
    width: 50px;
    height: 50px;
    line-height: 54px;
    font-size: 22px;
}
.contact-map iframe {
    height: 350px !important; 
}
section.cta-sec a {
    font-size: 16px;
    width: 90%;
    margin-bottom: 10px;
}.get-started {
    padding: 40px 30px;
}.blog-grid-content {
    margin-left: 6%;
}.banner-info {
    width: 70%;
}
.industry-list ul li a i {
    position: absolute;
    left: 0;
}
.industry-list ul li a {
    padding-left: 40px;
    font-size: 20px;
}.container {
    padding-left: 18px;
    padding-right: 18px;
}.accordion.horizontal .accordion-item {
    border-bottom: 1px solid #d7d7d7;
}.accordion.horizontal .accordion-item {
    border-top: 1px solid#d7d7d7 !important;
}.who-info {
    margin-bottom: 10px;
}.values-section-content .heading {
    padding-top: 0px;
    padding-bottom: 10px;
}section.values-section-two .row.align-items-center {
    flex-direction: column-reverse;
}.cta-heading.text-end {
    text-align: center !important;
    margin-top: 20px;
}.cta-heading h2 {
    font-size: 24px;
    text-align: center;
}.cta-heading p {
    text-align: center;
}
.cta2 .container {
    padding: 40px 30px;
}section.events-conferences.mt-5 {
    margin-top: 0px !important;
}
.who-sec img {
    margin-top: 20px;
}
.latest-client .owl-controls {
    bottom: 20px;
    left: 80%;
    width: 30%;
    padding: 20px 50px 20px 20px;
}
.featured-stories button.owl-next:after {
   top: -5px;
}

.featured-stories button.owl-prev:after {
   top: -5px;
}
.latest-client-info h4 {
    font-size: 28px;
    font-weight: 300;
    line-height: 36px;
}
.latest-client-info {
    max-width: 55%;
 }
 .who-we-serve .heading {
    text-align: left;
    padding: 0px 0px;
}.page-title-banner p {
    width: 80%;
}    
.we-serve-content {
        padding: 20px 0px !important;
    }

    .who-we-are {
        margin-top: 20px !important;
    }

.featured-stories .owl-controls .owl-dots {
    margin: 0 auto !important;
}

}




@media only screen and (max-width: 520px) {

  section.about-section.about-sec p {
    line-height: 30px;
    font-size: 16px;
  }

  .content-box .img-box {
    width: 150px;
  }
  .title {
        font-size: 26px;
  }
      section.cta-sec h2 {
        font-size: 26px;
    }

  .copyright-area .text-end {
    text-align: left !important;

  }
  section.cta-sec p {
    margin-bottom: 20px;
    line-height: 32px;
}

.top-header ul li a {
    padding: 10px 10px;
    font-size: 14px;
}
.top-header ul {
    justify-content: center;
}

section.about-section.pt-7.pb-7 {
    padding-bottom: 0px;
}
    .page-title-banner {
        min-height: 200px;
    }
.page-title-banner h1 {
    font-size: 21px;
}
ol.breadcrumb li.breadcrumb-item {
    font-size: 15px;
}
.banner-info {
    width: 100%;
    padding: 30px;
    bottom: -150px;
}section.our-solutions {
    margin-top: 170px !important;
}

.banner-sec2 {
    margin-top: 60px;
    padding-bottom: 30px;
} 


   .heading h2 {
        font-size: 26px;
    }.global-btn2 {
    padding: 12px 20px;
    font-size: 15px;
}
.featured-stories .owl-controls {
    left: 50%;
    transform: translateX(-50%);
    gap: 40px;
    display: inline-block;
    width: 60%;
}

.featured-stories button.owl-next:after {
         top: -6px;
        font-size: 18px;
}.featured-stories button.owl-prev:after {
          top: -6px;
        font-size: 18px;
}
    .get-started-sec h3 {
        font-size: 25px;
    }    .get-started-sec p {
        line-height: 30px;
        font-size: 16px;
    }
    .main-banner-content {
    max-width: 100%;
    padding-right: 0px;
}.blog-grid-content h3 a {
    font-size: 21px;
    line-height: 30px;
}
.main-banner-content p {
    line-height: 28px;
    max-width: 100%;
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 10px;
}
.main-banner-content {
    padding-top: 0px;
}.service-sec img {
    height: 250px;
}.services-info h4 {
    font-size: 21px;
}.services-info {
    padding: 20px 15px;
}.featured-stories .our-stories img {
    height: 250px;
}
.home-page .featured-stories .owl-controls {
    bottom: 10% !important;}


.featured-stories .owl-controls {
    bottom: 42%;
    padding: 15px 30px 15px 20px;
}

.stories-sec {
    padding-bottom: 100px;
}

.who-we-are {
    margin-top: 30px;
}
.about-innovation p {
    font-size: 25px;
    line-height: 38px;
}
section.about-section.about-sec.pt-7 {
    padding-top: 0px;
}.partners-img {
    height: auto;
    width: 40%;
}.partners-sec img {
    margin-top: 8px;
    width: 100%;
}.career-form h1 {
    font-weight: 300;
    font-size: 21px;
}.apply-now-btn {
    margin-bottom: 10px;
}
.solutions-list {
    padding: 50px 0;
    background: #f3f3f3;
}.solutions-list .heading h2 {
    font-size: 26px !important;
    margin-bottom: 0px;
}
.who-we-serve-list ul {
        justify-content: flex-start;
        display: block;
    }
.who-we-serve-list li.nav-item .active:after {
   bottom: 0px;
}
.who-we-serve-list li.nav-item button {
    padding: 12px 0px;
}
.take_closer p {
    height: auto;
}.latest-client-info {
    max-width: 100%;
}.featured-stories .owl-controls {
    bottom: 5%;}
}
.featured-stories .heading {
   padding: 30px;
}
.latest-stories {
    padding: 70px 0px 110px 0px;
}
.latest-client-info h4 {
    font-size: 24px;
    line-height: 26px;
}
.solutions_sec .owl-nav button {
    margin: 0 100px;
}
/*section.featured-stories.latest-client .owl-controls {
    width: 50%;
}*/
.page-title-banner p {
    width: 95%;
}
.solutions_sec .owl-nav button {
    margin: 0 70px;
}
/* One stray '}' lived here. It closed nothing — the media block above it was
   already balanced — and a top-level stray brace makes the CSS parser discard
   the rule that follows it. In the concatenated bundle that was the first rule
   of whichever file came next, which is a bug that can only be seen by counting
   braces. */





/* ==== assets/css/footer.css ==== */
/*
 * The site footer.
 *
 * A file of its own because it has to load after style.css, which sets
 * .site-footer to a light grey. custom.css — where this started — is bundled
 * *before* style.css, so every rule here lost by one place in the cascade and
 * the footer stayed grey while the markup underneath it had already changed.
 */
/* ==========================================================================
   Footer
   ==========================================================================
   Dark in both themes. A footer is the one band on a page that reads as a
   base rather than as content, and flipping it with the theme made the bottom
   of the site feel like a different site. The link columns come from the four
   page kinds, so they grow with the site rather than with this stylesheet.
   ========================================================================== */

.site-footer {
    position: relative;
    background: #0a2440;
    color: #c6d3e2;
    padding-block: clamp(44px, 6vw, 72px) clamp(28px, 4vw, 40px);
}

.site-footer .ftr-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
}

/* The solutions column carries twenty items and gets the room for two tracks. */
.site-footer .ftr-col--wide { grid-column: span 2; }

.site-footer .ftr-col-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.site-footer .ftr-col-title a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.site-footer .ftr-col-title i { font-size: 11px; opacity: .7; }

.site-footer .ftr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* style.css sets `footer ul li { line-height: 38px }`, which was written for a
   footer whose lists had no gap of their own. With one, it double-spaces. */
.site-footer .ftr-list > li,
.site-footer .ftr-group li { line-height: 1.5; }
.site-footer .ftr-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.site-footer .ftr-list--loose { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }

.site-footer .ftr-list a { color: #c6d3e2; font-size: 15px; }
.site-footer .ftr-list a:hover { color: #fff; text-decoration: underline; }
.site-footer .ftr-list strong { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }

/* --- Groups that open ------------------------------------------------------ */

.site-footer .ftr-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #9fc6e8;
    list-style: none;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* Safari draws its own triangle and ignores list-style on summary. */
.site-footer .ftr-group > summary::-webkit-details-marker { display: none; }
.site-footer .ftr-group > summary:hover { color: #fff; }
.site-footer .ftr-group > summary i { font-size: 11px; transition: transform .2s ease; }
.ftr-group[open] > summary i { transform: rotate(180deg); }

.site-footer .ftr-group ul {
    list-style: none;
    margin: 10px 0 4px;
    padding: 0 0 0 2px;
    display: grid;
    gap: 8px;
}

.site-footer .ftr-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 15px;
    color: #9fc6e8;
}

.site-footer .ftr-all:hover { color: #fff; }
.site-footer .ftr-all i { font-size: 11px; opacity: .7; }

/* --- Brand line ------------------------------------------------------------ */

.site-footer .ftr-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: clamp(32px, 4vw, 52px);
    padding-top: clamp(24px, 3vw, 34px);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.site-footer .ftr-brand-id { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-footer .ftr-logo { width: auto; height: 42px; max-width: 220px; object-fit: contain; }
.site-footer .footer-about { margin: 0; max-width: 46ch; font-size: 14px; color: #a9bccf; }

.site-footer .ftr-social { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; }

.site-footer .ftr-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.site-footer .ftr-social a:hover { background: #fff; color: #0a2440; }

/* --- Contact strip --------------------------------------------------------- */

.site-footer .ftr-contact {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 22px 0 0;
    padding: 0;
    font-size: 14px;
    color: #a9bccf;
}

.site-footer .ftr-contact li { display: flex; align-items: center; gap: 8px; }
.site-footer .ftr-contact i { opacity: .7; font-size: 13px; }
.site-footer .ftr-contact a { color: #a9bccf; }
.site-footer .ftr-contact a:hover { color: #fff; }

/* --- Legal bar ------------------------------------------------------------- */

.copyright-area {
    background: #071c33;
    color: #93a8bd;
    padding-block: 16px;
    font-size: 14px;
}

.ftr-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    flex-wrap: wrap;
}

.copyright-area .footer-link {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
}

/* style.css sets `.copyright-area p, .copyright-area a { color: #000 }` — black
   on the old grey bar, invisible on this one. `p` has to be named here too:
   scoping only the links left the copyright line unreadable. */
.copyright-area p,
.copyright-area a,
.copyright-area .cookie-reopen { color: #93a8bd; }
.copyright-area a:hover,
.copyright-area .cookie-reopen:hover { color: #fff; }

.copyright-area .cookie-reopen {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.ftr-legal-end { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ftr-legal-end p { margin: 0; }
.payment-we-accept { display: flex; align-items: center; }

/* The card artwork is drawn for a light background. Rather than commission a
   second version, it sits on a small white plate — which is also how these
   marks are meant to be shown. */
.payment-we-accept img {
    /* Explicit width: the artwork has no intrinsic ratio the browser can use,
       so `width: auto` collapsed it to a sliver. */
    width: 190px;
    height: auto;
    background: #fff;
    border-radius: 4px;
    padding: 3px 6px;
}

/* --------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------
   Every selector here is scoped with .site-footer to match the base rules
   above. They were written unscoped and lost to their own desktop versions —
   which is a silent failure: the footer simply stayed at five columns on a
   phone, with the words breaking mid-syllable and the last column off the edge
   of the screen.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .site-footer .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer .ftr-col--wide { grid-column: span 3; }
    .site-footer .ftr-list--split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .site-footer .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer .ftr-col--wide { grid-column: span 2; }
    .site-footer .ftr-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    /*
     * One column, and the long lists are trimmed.
     *
     * Twenty solutions stacked under ten industries is an enormous scroll to
     * reach the legal links and the cookie settings, which on a phone are two
     * of the things people actually come to a footer for. Both of those columns
     * already end in a "View all" link, so the tail is cut rather than hidden
     * behind anything: what is on screen is a sample, and the way to the rest
     * is the next thing you read.
     *
     * Only columns that have that link are trimmed — see the :nth-child rules
     * below, which name them rather than applying to every list.
     */
    .site-footer .ftr-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .site-footer .ftr-col--wide { grid-column: span 1; }
    .site-footer .ftr-list--split { grid-template-columns: minmax(0, 1fr); }

    .site-footer .ftr-col { border-bottom: 1px solid rgba(255, 255, 255, .14); }
    .site-footer .ftr-col-title { border-bottom: 0; margin-bottom: 0; padding-block: 14px; }

    .site-footer .ftr-list { padding-bottom: 16px; }
    .site-footer .ftr-list--loose { margin-top: 12px; }

    .site-footer .ftr-brand { flex-direction: column; align-items: flex-start; gap: 18px; }
    .site-footer .ftr-brand-id { gap: 12px; }
    .site-footer .ftr-social { flex-wrap: wrap; }

    .copyright-area .ftr-legal { flex-direction: column; align-items: flex-start; gap: 16px; }
    .copyright-area .ftr-legal-end { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* The two long ones, both of which end in a "View all" link. Anything
       without that link keeps every item, because trimming a list with no way
       to see the rest would just be losing links. */
    .site-footer .ftr-col:has(.ftr-all) .ftr-list > li:nth-child(n + 7) { display: none; }
    .site-footer .ftr-col:has(.ftr-all) .ftr-all { margin-top: 4px; }
}

@media (max-width: 400px) {
    /* Long product names have nowhere to go at this width, and breaking them
       mid-word is worse than a slightly smaller line. */
    .site-footer .ftr-list a,
    .site-footer .ftr-group > summary { font-size: 14.5px; }
    .site-footer .ftr-contact { gap: 8px 16px; }
}

/* ==== assets/css/laravel-dynamic.css ==== */
/* Small Laravel-only helpers. Keep original HTML design CSS in control. */
.dynamic-copy p:last-child {
    margin-bottom: 0;
}

.site-header .navbar-brand img {
    object-fit: contain;
}

.blog-grid .image-box img,
.service-sec img,
.solutions-info img,
.stories-sec-img img {
    object-fit: cover;
}

.footer-map img {
    object-fit: contain;
}

html,
body {
    max-width: 100%;
/*    overflow-x: hidden;*/
}

img,
video,
iframe {
    max-width: 100%;
}

.heading h1,
.heading h2,
.heading h3,
.page-title-banner h1,
.main-banner-content h1,
.events-info h4,
.services-info h4,
.solutions-service h4,
.partners-info h4,
.cta-heading h2 {
    overflow-wrap: anywhere;
}

/*
 * Buttons are inline-block, and this is the only rule that decides it.
 *
 * They were inline-flex with max-width: 100% and a non-shrinking icon. That
 * combination cannot narrow past its own content: the label's flex item takes
 * its longest word as a minimum, the icon refuses to shrink at all, and once
 * the box is capped at the container width both run out through the border —
 * which is why "See all openings" sat outside its own outline with the arrow
 * beyond it on a narrow screen.
 *
 * inline-block has none of that. The label wraps like text, the icon follows
 * it, and the box grows in height around them.
 *
 * Two other files also had opinions about this and both lost to this one,
 * because laravel-dynamic.css is bundled after them. Fixing it there and
 * leaving this untouched is exactly why the bug survived a round of "fixing" —
 * so display belongs here now and nowhere else.
 */
.global-btn,
.global-btn2,
.apply-now-btn,
.btn {
    display: inline-block;
    max-width: 100%;
    text-align: center;
    white-space: normal;
}

/* Rides with the last line of the label rather than sitting on the baseline. */
.global-btn i,
.global-btn2 i,
.apply-now-btn i {
    vertical-align: middle;
}

.dynamic-copy,
.events-info,
.services-info,
.partners-info,
.values-info,
.we-serve-content,
.contact-form,
.location-sec {
    overflow-wrap: anywhere;
}

.mobile-menu-title,
.mobile-menu-backdrop,
.mobile-nav-only {
    display: none;
}

@media (max-width: 991.98px) {
    .site-header {
        overflow: visible;
        position: relative;
        z-index: 1050;
    }

    .site-header .navbar-collapse {
        background: #fff;
        box-shadow: 18px 0 40px rgba(0, 0, 0, 0.16);
        height: 100vh;
        max-width: 368px;
        overflow-y: auto;
        padding: 0;
        width: 84vw;
    }

    .site-header .navbar-collapse.show {
        padding: 0;
    }

    .mobile-menu-title {
        align-items: center;
        background: rgb(0 112 173);
        color: #fff;
        display: flex;
        font-size: 20px;
        font-weight: 600;
        min-height: 45px;
        padding: 0 12px;
    }

    .mobile-menu-backdrop {
        background: rgba(0, 0, 0, 0.48);
        border: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1190;
    }

    #navbarMenu.show + .mobile-menu-backdrop {
        display: block;
    }

    .site-header .navbar-collapse .navbar-nav,
    .site-header .navbar-collapse .right-menu ul {
        display: block !important;
        margin: 0;
        overflow: visible !important;
        padding: 0;
        width: 100%;
    }

    .site-header .navbar-collapse .mobile-nav-only {
        display: block;
    }

    .site-header .navbar-collapse .nav-item,
    .site-header .navbar-nav > li {
        background: #fff;
        border-bottom: 1px solid #ededed;
        margin: 0;
        width: 100%;
    }

    .site-header .navbar-collapse .nav-link {
        align-items: center;
        color: #18202a !important;
        display: flex;
        font-size: 19px;
        font-weight: 500;
        min-height: 46px;
        padding: 0 12px !important;
        text-transform: none;
        width: 100%;
    }

    .site-header .navbar-collapse .nav-link:hover {
        color: #0058ab !important;
    }

    .site-header .navbar-collapse .dropdown-caret {
        color: #cfcfcf;
        margin-left: auto !important;
        transform: rotate(-90deg);
        transition: transform 0.2s ease;
    }

    .site-header .navbar-collapse .nav-link[aria-expanded="true"] .dropdown-caret {
        transform: rotate(0deg);
    }

    .site-header .mega-menu .dropdown-menu {
        background: #fff;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        opacity: 1;
        padding: 0;
        position: static !important;
        transform: none !important;
        visibility: visible;
        width: 100%;
    }

    .site-header .mega-menu .dropdown-menu:not(.show) {
        display: none;
    }

    .site-header .mega-menu .dropdown-menu .container {
        background: #fff;
        border-radius: 0;
        padding: 0;
    }

    .site-header .mega-menu-content .row {
        display: block;
        margin: 0;
    }

    .site-header .mega-menu-column {
        padding: 0;
    }

    .site-header .mega-menu-column.about-menu-page,
    .site-header .mega-menu-column .who-we-serve {
        display: none;
    }

    .site-header .mega-menu-column ul,
    .site-header .mega-menu-column ul li {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100% !important;
    }

    .site-header .mega-menu-column ul li {
        border-bottom: 1px solid #ededed;
    }

    .site-header .mega-menu-content a,
    .site-header .mega-menu-item {
        align-items: center;
        color: #18202a !important;
        display: flex;
        font-size: 16px;
        font-weight: 500;
        min-height: 48px;
        padding: 0 24px !important;
        width: 100%;
    }

    .site-header .mega-menu-content a::before {
        content: none;
    }

    .site-header ul.sabmenu-list {
        display: block;
        opacity: 1;
        padding: 0;
        position: static;
        transform: none;
        visibility: visible;
        width: 100%;
    }

    .site-header ul.sabmenu-list a {
        color: #4a5563 !important;
        font-size: 15px;
        padding-left: 38px !important;
    }

    .site-header .mega-menu-list.has-children > a::after {
        color: #cfcfcf;
        content: "\f054";
        font-family: "Font Awesome 6 Free";
        font-size: 14px;
        font-weight: 900;
        margin-left: auto;
    }
}

@media (max-width: 1199.98px) {
    .banner-info {
        width: 62%;
    }

    .latest-client-info {
        max-width: 52%;
    }
}

@media (max-width: 991.98px) {
    .heading {
        padding: 32px 0;
    }

/*    .heading h2,
    .solutions-list .heading h2 {
        font-size: 30px;
        line-height: 1.25;
    }
*/
    .page-title-banner {
        min-height: 260px;
        padding: 56px 0;
    }

    .page-title-banner p {
        width: 100%;
    }

    .banner-info,
    .latest-client-info,
    .about-innovation {
        max-width: 100%;
        width: 100%;
    }

    .banner-sec {
        padding: 56px 0;
    }

/*    .banner2-right,
    .values-section-content,
    .values-section-two .values-section-content,
    .solutions-list .solutions_sec,
    .take_closer_look .pl-padding {
        left: 0;
        margin-left: 0;
        margin-right: 0;
        top: 0;
        width: 100%;
    }*/

    .banner2-right {
        margin-top: 24px;
    }

/*    .cta-heading.text-end,
    .cta .text-end {
        margin-top: 20px;
        text-align: left !important;
    }
*/
    .services-solutions,
    .events-sec,
    .partners-sec,
    .service-sec,
    .career-post {
        margin-bottom: 24px;
    }

/*    .partners-img {
        align-items: center;
        display: flex;
        height: 96px;
        justify-content: center;
        margin-left: 0;
        width: 100%;
    }*/

    .partners-sec img {
        margin-top: 0;
        max-height: 92px;
        object-fit: contain;
        width: auto;
    }

    .partners-info p,
    .solutions-sec p,
    .take_closer p {
        height: auto;
    }

    .footer-link {
        flex-wrap: wrap;
        gap: 14px 24px !important;
        justify-content: flex-start !important;
        margin-top: 16px;
        padding-left: 0;
    }

    .copyright-area,
    .copyright-area .text-end {
        text-align: left !important;
    }

    .site-footer p,
    .site-footer a {
        word-break: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767.98px) {
    .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .main-banner-content {
        max-width: 100%;
        padding-right: 0;
    }

    .main-banner-content h1 {
        font-size: 32px;
        line-height: 1.25;
    }

    .main-banner-content p {
        font-size: 17px;
        line-height: 1.55;
    }

    .page-title-banner {
        min-height: 220px;
        padding: 44px 0;
    }

    .page-title-banner h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .page-title-banner p {
        font-size: 16px;
        line-height: 1.55;
    }

    .heading {
        padding: 26px 0;
    }

/*    .heading h2,
    .cta-heading h2,
    .get-started-sec h3 {
        font-size: 27px;
        line-height: 1.25;
    }
*/
/*    .service-sec img,
    .events-sec img,
    .services-solutions img,
    .blog-grid .image-box img,
    .stories-sec-img img,
    .banner2-info img {
        height: 240px;
        object-fit: cover;
    }*/

    .solutions-info img {
        height: 220px;
    }

    .services-info,
    .events-info,
    .partners-info,
    .solutions-service {
        padding: 18px;
    }

    .services-info h4,
    .events-info h4,
    .partners-info h4,
    .solutions-service h4 a {
        font-size: 22px;
        line-height: 1.3;
    }

    .global-btn,
    .global-btn2,
    .apply-now-btn {
        min-height: 48px;
        padding: 12px 20px;
    }

    .industry-list ul li {
        width: 100%;
    }

    .industry-list ul li a {
        align-items: flex-start;
        font-size: 18px;
        line-height: 1.35;
    }

    .featured-stories .owl-controls {
        bottom: 16px;
        gap: 20px;
        left: 50%;
        padding: 12px 48px 12px 16px;
    }

    .stories-sec {
        max-width: 100%;
        padding: 30px 20px;
    }

    .stories-sec h4 {
        font-size: 24px;
        line-height: 1.3;
    }

    .get-started,
    .cta2 .container {
        padding: 40px 20px;
    }

    .seven-values p {
        font-size: 18px;
        width: 100%;
    }

/*    .values-sec {
        position: static;
        margin-bottom: 14px;
    }
*/
/*    .values-info {
        margin-left: 0;
    }*/

    .who-we-serve-list {
        padding: 24px 18px;
    }

    .who-we-serve-list ul {
        display: block;
    }

    .who-we-serve-list li.nav-item button {
        padding-left: 0;
        text-align: left;
        width: 100%;
    }

    .who-we-serve-list li.nav-item .active:after {
        bottom: -4px;
    }

    .we-serve-content {
        padding: 24px 0 0;
    }

    .location-sec {
        min-height: auto;
        padding: 28px 22px;
    }

    .contact-form {
        padding: 22px 16px;
    }

    .contact-form .input-group,
    .contact-form .input-group p,
    .contact-form .form-control {
        width: 100%;
    }

    .wpcf7-list-item label {
        align-items: flex-start;
        display: flex;
        gap: 8px;
    }

    .blog-section .heading {
        display: block;
    }

    .blog-section .heading .global-btn2 {
        margin-top: 12px;
    }

    .copyright-area .row {
        gap: 6px;
    }

    .footer-link {
/*        justify-content: center !important;*/
        text-align: center;
    }

/*    .copyright-area,
    .copyright-area .text-end {
        text-align: center !important;
    }*/
}

@media (max-width: 575.98px) {
    .site-header .navbar-brand img {
        max-width: 132px;
    }

    .navbar-toggler .line {
        height: 3px;
        width: 30px;
    }

    .site-header .navbar-collapse {
        width: 84vw;
    }

    .mobile-menu-title {
        font-size: 18px;
        min-height: 56px;
    }

    .site-header .navbar-collapse .nav-link {
        font-size: 16px;
    }

    .counter-sec h4 {
        font-size: 26px;
    }

    .counter-sec p {
        font-size: 14px;
        line-height: 1.4;
    }

    .services-info p,
    .events-info p,
    .partners-info p {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* ==== assets/css/builder-sections.css ==== */
/*
 * Page Builder — supporting styles.
 *
 * Sections reuse the site's own theme classes (about-section, events-conferences,
 * cta, banner-sec, global-btn2 …), so this file stays deliberately small. It
 * only covers what the theme has no rule for: the video player, and the few
 * new blocks whose layout the theme never anticipated.
 *
 * Nothing here overrides an existing theme rule.
 */

/* ==========================================================================
   Video
   ========================================================================== */

.section-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Brand tint rather than black: the frame shows through around a poster
       that has not loaded and around portrait or square footage. */
    background: var(--sec-frame, #0070ad);
    border-radius: 6px;
}

.section-video-frame--frame-dark  { --sec-frame: #0b1b28; }
.section-video-frame--frame-light { --sec-frame: #eef2f6; }
.section-video-frame--frame-black { --sec-frame: #000; }

.section-video-frame--4-3  { aspect-ratio: 4 / 3; }
.section-video-frame--1-1  { aspect-ratio: 1 / 1; }
.section-video-frame--9-16 { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }

.section-video-frame iframe,
.section-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* `contain` keeps a portrait or square upload fully visible rather than
       cropping it to the frame. */
    object-fit: contain;
    background: transparent;
}

/* Older browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
    .section-video-frame { padding-top: 56.25%; height: 0; }
}

/* --- Click-to-play facade ------------------------------------------- */

.section-video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
}

.section-video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, opacity .3s ease;
}

.section-video-facade:hover img { transform: scale(1.04); opacity: .85; }

.section-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #0070ad;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding-left: 5px;   /* optically centres the triangle */
    transition: transform .25s ease, background-color .25s ease;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .35);
}

.section-video-facade:hover .section-video-play-icon,
.section-video-play:hover .section-video-play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

.section-video-facade:focus-visible { outline: 3px solid #0070ad; outline-offset: 3px; }

.section-video-caption {
    margin-top: 14px;
    text-align: center;
    font-size: 15px;
    color: #555;
}

/* --- Cover layout ---------------------------------------------------- */

.section-video-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #0b1b28;
    padding: 110px 0;
    color: #fff;
}

.section-video-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 20, 32, .82) 0%, rgba(6, 20, 32, .45) 100%);
}

.section-video-cover-inner {
    position: relative;
    max-width: 640px;
}

.section-video-cover h2 { color: #fff; margin-bottom: 14px; }
.section-video-cover p  { color: rgba(255, 255, 255, .88); }
.section-video-lead     { font-size: 19px; }

.section-video-play {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 16px;
    padding: 0;
    margin: 22px 24px 0 0;
    cursor: pointer;
    position: relative;
}

.section-video-play .section-video-play-icon {
    position: static;
    transform: none;
    width: 54px;
    height: 54px;
    font-size: 17px;
    flex: 0 0 54px;
}

.section-video-play:hover .section-video-play-icon { transform: scale(1.08); }

/* --- Lightbox -------------------------------------------------------- */

.section-video-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 10, 16, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.section-video-modal-inner {
    position: relative;
    width: min(1100px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
}

.section-video-modal-inner iframe,
.section-video-modal-inner video {
    width: 100%;
    height: 100%;
    border: 0;
}

.section-video-modal-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.section-video-modal-close:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 767.98px) {
    .section-video-cover { padding: 70px 0; }
    .section-video-modal-close { top: -42px; }
}

/* ==========================================================================
   Statement
   ========================================================================== */

.section-statement { padding: 80px 0; }

.section-statement blockquote {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.35;
    color: #0b1b28;
    border: 0;
    padding: 0;
}

.section-statement cite {
    display: block;
    margin-top: 22px;
    font-size: 15px;
    font-style: normal;
    color: #667;
}

/* ==========================================================================
   News list
   ========================================================================== */

.section-news-row {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid #e6e9ee;
}

.section-news-row:last-child { border-bottom: 0; }

.section-news-cat {
    flex: 0 0 150px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0070ad;
    font-weight: 400;
}

.section-news-title { flex: 1 1 auto; font-size: 17px; }
.section-news-date  { flex: 0 0 120px; text-align: right; color: #7a828f; font-size: 14px; }

@media (max-width: 767.98px) {
    .section-news-row { flex-wrap: wrap; gap: 6px; }
    .section-news-cat, .section-news-date { flex: 0 0 auto; text-align: left; }
}

/* ==========================================================================
   Icon grid
   ========================================================================== */

.section-icon-item {
    height: 100%;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #e6e9ee;
    transition: border-color .2s ease, transform .2s ease;
}

.section-icon-item:hover { border-color: #0070ad; transform: translateY(-2px); }

.section-icon-item i {
    font-size: 30px;
    color: #0070ad;
    margin-bottom: 14px;
    display: block;
}

/* h3 since the heading level was corrected; h4 kept so an older cached
   page or a hand-written override does not lose its type size. */
.section-icon-item h3,
.section-icon-item h4 { font-size: 19px; margin-bottom: 8px; }

/* ==========================================================================
   Timeline
   ========================================================================== */

.section-timeline { position: relative; padding-left: 26px; border-left: 2px solid #dfe4ea; }

.section-timeline-item { position: relative; padding: 0 0 32px 24px; }

.section-timeline-item::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #0070ad;
}

.section-timeline-when {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0070ad;
    font-weight: 400;
}

.section-timeline-item h4 { font-size: 20px; margin: 4px 0 6px; }

/* ==========================================================================
   Split promo
   ========================================================================== */

.section-promo {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #0b1b28;
    color: #fff;
    padding: 90px 0;
}

.section-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 20, 32, .88) 0%, rgba(6, 20, 32, .35) 100%);
}

.section-promo .container { position: relative; }
.section-promo h2 { color: #fff; }
.section-promo p  { color: rgba(255, 255, 255, .88); }
.section-promo-logo { max-height: 46px; width: auto; margin-bottom: 18px; }

/* ==========================================================================
   Contact cards
   ========================================================================== */

.section-contact-card {
    height: 100%;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #e6e9ee;
}

.section-contact-card h4 { font-size: 19px; margin-bottom: 10px; }
.section-contact-card p  { margin-bottom: 6px; font-size: 15px; }
.section-contact-card i  { color: #0070ad; width: 20px; }

/* ==========================================================================
   Section appearance controls
   --------------------------------------------------------------------------
   Applied by partials/render-section to a wrapper, so no individual section
   partial has to know these exist. Surfaces are named rather than free-form,
   which keeps a page inside the brand.
   ========================================================================== */

:root {
    --sec-brand: #0070ad;
    --sec-brand-dark: #005a87;
    --sec-soft: #eef6fb;
    --sec-light: #f5f7fa;
    --sec-ink: #0b1b28;
}

.sec-wrap > section { margin-top: 0; margin-bottom: 0; }

/* --- Surfaces -------------------------------------------------------- */

.sec-bg-light  { background: var(--sec-light); }
.sec-bg-soft   { background: var(--sec-soft); }

.sec-bg-brand  { background: var(--sec-brand); }
.sec-bg-dark   { background: var(--sec-ink); }

/* On a coloured surface the theme's dark type would disappear. */
.sec-bg-brand, .sec-bg-brand h1, .sec-bg-brand h2, .sec-bg-brand h3,
.sec-bg-brand h4, .sec-bg-brand h5, .sec-bg-brand p, .sec-bg-brand li,
.sec-bg-dark, .sec-bg-dark h1, .sec-bg-dark h2, .sec-bg-dark h3,
.sec-bg-dark h4, .sec-bg-dark h5, .sec-bg-dark p, .sec-bg-dark li {
    color: #fff;
}

.sec-bg-brand p, .sec-bg-dark p { color: rgba(255, 255, 255, .88); }

.sec-bg-brand a:not([class*="btn"]),
.sec-bg-dark a:not([class*="btn"]) { color: #fff; text-decoration: underline; }

/* Cards sitting on a coloured surface need their own contrast back. */
.sec-bg-brand .section-icon-item, .sec-bg-dark .section-icon-item,
.sec-bg-brand .section-contact-card, .sec-bg-dark .section-contact-card,
.sec-bg-brand .events-sec, .sec-bg-dark .events-sec {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
}

.sec-bg-brand .section-icon-item i, .sec-bg-dark .section-icon-item i,
.sec-bg-brand .section-contact-card i, .sec-bg-dark .section-contact-card i { color: #fff; }

/* --- Rhythm ---------------------------------------------------------- */

.sec-pad-none > section { padding-top: 0 !important; padding-bottom: 0 !important; }
.sec-pad-sm   > section { padding-top: 34px !important; padding-bottom: 34px !important; }
.sec-pad-md   > section { padding-top: 64px !important; padding-bottom: 64px !important; }
.sec-pad-lg   > section { padding-top: 104px !important; padding-bottom: 104px !important; }

/* --- Alignment ------------------------------------------------------- */

.sec-align-center { text-align: center; }
.sec-align-center .heading, .sec-align-center ul { text-align: center; }
.sec-align-center ul { list-style-position: inside; padding-left: 0; }
.sec-align-left { text-align: left; }

/* --- Divider --------------------------------------------------------- */

.sec-divider { border-top: 1px solid #e2e7ee; }
.sec-bg-brand.sec-divider, .sec-bg-dark.sec-divider { border-top-color: rgba(255, 255, 255, .22); }

/* --- Visibility ------------------------------------------------------ */

@media (max-width: 767.98px) {
    .sec-hide-mobile { display: none !important; }
}

/* ==========================================================================
   Featured story
   --------------------------------------------------------------------------
   Distinct from the promo band on purpose: full-bleed image with the copy in
   a raised card overlapping it, so the two never read as the same block.
   ========================================================================== */

.section-story { position: relative; padding: 0 0 70px; }

.section-story-media {
    height: 420px;
    background-size: cover;
    background-position: center;
    background-color: var(--sec-light);
}

.section-story-card {
    position: relative;
    margin-top: -110px;
    background: #fff;
    padding: 40px;
    box-shadow: 0 18px 50px rgba(11, 27, 40, .14);
    border-top: 4px solid var(--sec-brand);
}

.section-story-badge {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sec-brand);
    margin-bottom: 12px;
}

.section-story-card h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px; }
.section-story-card p  { margin-bottom: 20px; }

@media (max-width: 767.98px) {
    .section-story-media { height: 240px; }
    .section-story-card  { margin-top: -60px; padding: 26px 22px; }
}

/* ==========================================================================
   Subscribe band
   --------------------------------------------------------------------------
   A quiet aside rather than a headline moment: contained card on a tinted
   strip, so it does not compete with the promo band above or below it.
   ========================================================================== */

.section-subscribe { padding: 56px 0; background: var(--sec-soft); }

.section-subscribe-inner {
    background: var(--sec-brand);
    padding: 38px 40px;
    border-radius: 4px;
}

.section-subscribe-copy h3 { color: #fff; margin-bottom: 8px; font-size: 24px; }
.section-subscribe-copy p  { color: rgba(255, 255, 255, .9); margin-bottom: 0; }

/* The form sits on the brand colour, so its chrome has to lighten. */
.section-subscribe-form .form-control,
.section-subscribe-form .form-select {
    background: rgba(255, 255, 255, .95);
    border-color: transparent;
}

.section-subscribe-form label,
.section-subscribe-form .form-label,
.section-subscribe-form small { color: rgba(255, 255, 255, .9); }

.section-subscribe-form .form-submit .btn.btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--sec-brand);
}

.section-subscribe-form .form-submit .btn.btn-primary:hover {
    background: var(--sec-ink);
    border-color: var(--sec-ink);
    color: #fff;
}

@media (max-width: 767.98px) {
    .section-subscribe-inner { padding: 26px 22px; }
    .section-subscribe-copy  { margin-bottom: 18px; }
}

/* ==========================================================================
   Careers
   --------------------------------------------------------------------------
   The careers pages had no styling of their own and borrowed blocks built for
   service pages, which is why they read as unfinished. These are theme-native
   — same palette, same type — but shaped for roles.
   ========================================================================== */

/* --- Headline figures ------------------------------------------------ */

.crx-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: #e2e7ee;
    border: 1px solid #e2e7ee;
}

.crx-figure { background: #fff; padding: 28px 24px; text-align: center; }
.crx-figure strong { display: block; font-size: 34px; line-height: 1.1; color: var(--sec-brand); }
.crx-figure span   { font-size: 14px; color: #6a7382; }

/* --- Team cards ------------------------------------------------------ */

.crx-team {
    height: 100%;
    background: #fff;
    border: 1px solid #e2e7ee;
    padding: 26px 24px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.crx-team:hover {
    border-color: var(--sec-brand);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(11, 27, 40, .08);
}

.crx-team h4 { font-size: 20px; margin-bottom: 8px; }
.crx-team p  { font-size: 15px; color: #5c6675; min-height: 66px; }

.crx-team-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--sec-brand);
    font-size: 14px;
}

/* --- Role rows ------------------------------------------------------- */

.crx-role {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid #e2e7ee;
    margin-bottom: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.crx-role:hover { border-color: var(--sec-brand); box-shadow: 0 8px 24px rgba(11, 27, 40, .07); }

.crx-role-main  { flex: 1 1 auto; min-width: 0; }
.crx-role-main h4 { font-size: 20px; margin-bottom: 6px; }
.crx-role-main h4 a { color: var(--sec-ink); }
.crx-role-main h4 a:hover { color: var(--sec-brand); }

.crx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.crx-chip {
    font-size: 12.5px;
    background: var(--sec-soft);
    color: #2b5f7d;
    padding: 4px 12px;
    border-radius: 20px;
}

.crx-role-action { flex: 0 0 auto; }

.crx-group-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 34px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sec-brand);
}

.crx-group-title h3 { font-size: 22px; margin: 0; }
.crx-group-title span { color: #7a828f; font-size: 15px; }

@media (max-width: 767.98px) {
    .crx-role { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --- Benefits -------------------------------------------------------- */

.crx-benefit {
    height: 100%;
    display: flex;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e2e7ee;
}

.crx-benefit i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sec-soft);
    color: var(--sec-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.crx-benefit h4 { font-size: 17px; margin-bottom: 5px; }
.crx-benefit p  { font-size: 14.5px; color: #5c6675; margin: 0; }

/* --- Process --------------------------------------------------------- */

.crx-step { height: 100%; padding: 26px 22px; background: #fff; border-top: 3px solid var(--sec-brand); }
.crx-step-no { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--sec-brand); }
.crx-step h4 { font-size: 18px; margin: 8px 0 6px; }
.crx-step p  { font-size: 14.5px; color: #5c6675; margin: 0; }

/* --- Filters --------------------------------------------------------- */

.crx-filters {
    background: #fff;
    border: 1px solid #e2e7ee;
    padding: 20px 22px;
    margin-bottom: 26px;
}

/* --- Role detail sidebar --------------------------------------------- */

.crx-aside {
    background: #fff;
    border: 1px solid #e2e7ee;
    padding: 26px 24px;
    position: sticky;
    top: 96px;
}

.crx-aside h3 { font-size: 19px; margin-bottom: 16px; }

.crx-aside dl { margin: 0; }
.crx-aside dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: #7a828f; }
.crx-aside dd { font-size: 15px; margin: 2px 0 14px; color: var(--sec-ink); }

@media (max-width: 991.98px) { .crx-aside { position: static; margin-top: 24px; } }

/* --- Role description body ------------------------------------------- */

.crx-body { background: #fff; border: 1px solid #e2e7ee; padding: 34px 36px; }
.crx-lede { font-size: 18px; line-height: 1.65; color: #3c4756; }

.crx-body h3 {
    font-size: 21px;
    margin: 28px 0 12px;
    padding-left: 14px;
    border-left: 3px solid var(--sec-brand);
}

.crx-body h3:first-child { margin-top: 0; }
.crx-body ul { padding-left: 18px; }
.crx-body ul li { margin-bottom: 8px; }

@media (max-width: 767.98px) { .crx-body { padding: 24px 20px; } }

/* ==========================================================================
   Insights — listing and article
   --------------------------------------------------------------------------
   The listing was a flat grid of identical cards with the category filter
   marked by an underline. These give it a lead story, a real filter bar and
   an article page laid out for reading.
   ========================================================================== */

/* --- Filter bar ------------------------------------------------------ */

.ins-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 16px 0 20px;
    border-bottom: 1px solid #e2e7ee;
    margin-bottom: 34px;
}

.ins-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.ins-tabs a {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 14.5px;
    color: #4a5462;
    background: #f2f5f9;
    transition: background .2s ease, color .2s ease;
}

.ins-tabs a:hover { background: var(--sec-soft); color: var(--sec-brand); }
.ins-tabs a.is-active { background: var(--sec-brand); color: #fff; }

.ins-search { margin-left: auto; display: flex; gap: 8px; min-width: 260px; }

@media (max-width: 767.98px) { .ins-search { margin-left: 0; width: 100%; } }

/* --- Lead story ------------------------------------------------------ */

.ins-lead {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: #fff;
    border: 1px solid #e2e7ee;
    margin-bottom: 40px;
}

.ins-lead-media { min-height: 340px; background-size: cover; background-position: center; }

.ins-lead-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.ins-lead-body h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 12px 0; }
.ins-lead-body h2 a { color: var(--sec-ink); }
.ins-lead-body h2 a:hover { color: var(--sec-brand); }
.ins-lead-body p { color: #5c6675; }

@media (max-width: 991.98px) {
    .ins-lead { grid-template-columns: 1fr; }
    .ins-lead-media { min-height: 220px; }
    .ins-lead-body { padding: 26px 22px; }
}

/* --- Article cards --------------------------------------------------- */

.ins-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e7ee;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ins-card:hover {
    border-color: var(--sec-brand);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(11, 27, 40, .09);
}

/* Fixed ratio: article images arrive at every size and a ragged grid was
   the single biggest reason the listing looked unfinished. */
.ins-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sec-light); }
.ins-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ins-card:hover .ins-card-media img { transform: scale(1.04); }

.ins-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.ins-card-body h3 { font-size: 19px; line-height: 1.4; margin: 10px 0 8px; }
.ins-card-body h3 a { color: var(--sec-ink); }
.ins-card-body h3 a:hover { color: var(--sec-brand); }
.ins-card-body p { font-size: 14.5px; color: #5c6675; }
.ins-card-body .global-btn2 { margin-top: auto; align-self: flex-start; }

/* --- Byline ---------------------------------------------------------- */

.ins-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7a828f;
}

.ins-tag {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sec-brand);
    background: var(--sec-soft);
    padding: 4px 10px;
    border-radius: 3px;
}

.ins-tag:hover { background: var(--sec-brand); color: #fff; }

/* --- Article --------------------------------------------------------- */

.ins-article { background: #fff; border: 1px solid #e2e7ee; padding: 40px 44px; }
.ins-article > .ins-meta { padding-bottom: 18px; border-bottom: 1px solid #eef1f5; margin-bottom: 26px; }

.ins-standfirst {
    font-size: 19px;
    line-height: 1.65;
    color: #3c4756;
    padding-left: 18px;
    border-left: 3px solid var(--sec-brand);
    margin-bottom: 28px;
}

.ins-body { font-size: 16.5px; line-height: 1.8; color: #3c4756; }
.ins-body h2 { font-size: 26px; margin: 34px 0 12px; }
.ins-body h3 { font-size: 21px; margin: 28px 0 10px; }
.ins-body p  { margin-bottom: 18px; }
.ins-body ul, .ins-body ol { margin-bottom: 18px; padding-left: 22px; }
.ins-body li { margin-bottom: 8px; }
.ins-body img { max-width: 100%; height: auto; margin: 20px 0; }

.ins-body blockquote {
    margin: 26px 0;
    padding: 20px 26px;
    background: var(--sec-soft);
    border-left: 4px solid var(--sec-brand);
    font-size: 18px;
    font-style: italic;
}

@media (max-width: 767.98px) { .ins-article { padding: 26px 22px; } }

/* --- Article sidebar ------------------------------------------------- */

.ins-aside { position: sticky; top: 96px; }

.ins-aside-card { background: #fff; border: 1px solid #e2e7ee; padding: 24px; margin-bottom: 20px; }
.ins-aside-card h4 { font-size: 17px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--sec-brand); }

.ins-aside-post { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef1f5; }
.ins-aside-post:last-child { border-bottom: 0; padding-bottom: 0; }
.ins-aside-post img { width: 68px; height: 52px; object-fit: cover; flex: 0 0 68px; }
.ins-aside-post a { font-size: 14.5px; line-height: 1.4; color: var(--sec-ink); display: block; }
.ins-aside-post a:hover { color: var(--sec-brand); }
.ins-aside-post time { font-size: 12.5px; color: #8a919d; }

@media (max-width: 991.98px) { .ins-aside { position: static; margin-top: 30px; } }

/* --- Previous / next -------------------------------------------------- */

.ins-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }

.ins-nav a {
    display: block;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e2e7ee;
    color: var(--sec-ink);
    transition: border-color .2s ease;
}

.ins-nav a:hover { border-color: var(--sec-brand); color: var(--sec-brand); }
.ins-nav span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a919d; margin-bottom: 6px; }
.ins-nav .is-next { text-align: right; }

@media (max-width: 575.98px) {
    .ins-nav { grid-template-columns: 1fr; }
    .ins-nav .is-next { text-align: left; }
}

/* ==========================================================================
   Latest news
   --------------------------------------------------------------------------
   Heading and "see all" on one line, then cards that lead with the tag and
   date so the block reads as a feed rather than another promo row.
   ========================================================================== */

.section-news { padding: 64px 0; }

.section-news-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e2e7ee;
}

.section-news-head h2 { margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 34px); }
.section-news-head p  { margin: 0; color: #6a7382; }

.section-news-more {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 400;
    color: var(--sec-brand);
    white-space: nowrap;
}

.section-news-more i { transition: transform .2s ease; }
.section-news-more:hover i { transform: translateX(4px); }

/* --- Cards ------------------------------------------------------------ */

.section-news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e7ee;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.section-news-card:hover {
    border-color: var(--sec-brand);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(11, 27, 40, .09);
}

.section-news-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sec-light); }
.section-news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.section-news-card:hover .section-news-media img { transform: scale(1.04); }

.section-news-body { padding: 22px 24px 26px; }
.section-news-body h3 { font-size: 19px; line-height: 1.45; margin: 10px 0 8px; }
.section-news-body h3 a { color: var(--sec-ink); }
.section-news-body h3 a:hover { color: var(--sec-brand); }
.section-news-body p { font-size: 14.5px; color: #5c6675; margin: 0; }

.section-news-card.is-lead .section-news-media { aspect-ratio: 16 / 10; }
.section-news-card.is-lead h3 { font-size: 24px; }

/* Beside the lead, the cards lose their image and stack tightly. */
.section-news-card.is-side { flex-direction: row; }
.section-news-card.is-side .section-news-body { padding: 18px 22px; }
.section-news-card.is-side h3 { font-size: 17px; }

.section-news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7a828f;
}

.section-news-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sec-brand);
    background: var(--sec-soft);
    padding: 3px 9px;
    border-radius: 3px;
}

/* --- Dated list ------------------------------------------------------- */

.section-news-list { border-top: 1px solid #e2e7ee; }

.section-news-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 6px;
    border-bottom: 1px solid #e2e7ee;
    color: var(--sec-ink);
    transition: background .18s ease, padding-left .18s ease;
}

.section-news-row:hover { background: var(--sec-soft); padding-left: 16px; color: var(--sec-brand); }
.section-news-row time { flex: 0 0 110px; font-size: 14px; color: #7a828f; }
.section-news-row-title { flex: 1 1 auto; font-size: 17px; }
.section-news-row i { flex: 0 0 auto; color: var(--sec-brand); }

@media (max-width: 767.98px) {
    .section-news { padding: 44px 0; }
    .section-news-card.is-side { flex-direction: column; }
    .section-news-row { flex-wrap: wrap; gap: 8px 14px; }
    .section-news-row time { flex: 0 0 auto; }
    .section-news-row-title { flex: 1 1 100%; order: 3; }
}

/* ==========================================================================
   Accordion with media
   ========================================================================== */

.section-acf { padding: 70px 0; }

.section-acf-head { max-width: 760px; margin-bottom: 34px; }

.section-acf-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sec-brand);
    margin-bottom: 10px;
}

.section-acf-head h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 12px; }
.section-acf-head p  { color: #5c6675; font-size: 17px; margin: 0; }

.section-acf-list { border-top: 1px solid #d9dfe8; }

.section-acf-item { border-bottom: 1px solid #d9dfe8; }

.section-acf-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 4px;
    cursor: pointer;
    list-style: none;
    transition: color .2s ease;
}

/* Both engines need telling before the default marker goes away. */
.section-acf-summary::-webkit-details-marker { display: none; }
.section-acf-summary::marker { content: ''; }

.section-acf-summary:hover { color: var(--sec-brand); }
.section-acf-summary:focus-visible { outline: 2px solid var(--sec-brand); outline-offset: 3px; }

.section-acf-no {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--sec-brand);
    min-width: 34px;
}

.section-acf-title { flex: 1 1 auto; font-size: clamp(18px, 1.9vw, 26px); font-weight: 300; }

.section-acf-icon {
    flex: 0 0 auto;
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid #c9d2de;
    border-radius: 50%;
    transition: background .2s ease, border-color .2s ease, transform .3s ease;
}

/* A plus that becomes a minus, drawn rather than iconed so it always matches
   the row colour. */
.section-acf-icon::before,
.section-acf-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
}

.section-acf-icon::before { width: 13px; height: 1.5px; }
.section-acf-icon::after  { width: 1.5px; height: 13px; }

.section-acf-summary:hover .section-acf-icon { border-color: var(--sec-brand); background: var(--sec-soft); }
.section-acf-item[open] .section-acf-icon { background: var(--sec-brand); border-color: var(--sec-brand); color: #fff; }
.section-acf-item[open] .section-acf-icon::after { opacity: 0; }
.section-acf-item[open] .section-acf-title { color: var(--sec-brand); }

.section-acf-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    padding: 0 4px 32px 54px;
    overflow: hidden;
    transition: height .3s ease;
}

.section-acf-panel.is-media-left { direction: rtl; }
.section-acf-panel.is-media-left > * { direction: ltr; }

.section-acf-copy { font-size: 16px; line-height: 1.75; color: #4a5462; }
.section-acf-copy p:last-child { margin-bottom: 0; }
.section-acf-copy ul { padding-left: 20px; margin-bottom: 16px; }
.section-acf-copy li { margin-bottom: 7px; }
.section-acf-copy .global-btn2 { margin-top: 18px; }

.section-acf-media img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; }

@media (max-width: 991.98px) {
    .section-acf-panel { grid-template-columns: 1fr; gap: 20px; padding-left: 4px; }
    .section-acf-panel.is-media-left { direction: ltr; }
}

@media (max-width: 767.98px) {
    .section-acf { padding: 48px 0; }
    .section-acf-summary { gap: 12px; padding: 20px 2px; }
    .section-acf-no { min-width: 26px; font-size: 12px; }
}

/* ==========================================================================
   Feature cards
   ========================================================================== */

.section-fcards { padding: 64px 0; }

.section-fcards-head { max-width: 720px; margin-bottom: 32px; }
.section-fcards-head h2 { font-size: clamp(24px, 2.6vw, 36px); margin-bottom: 10px; }
.section-fcards-head p  { color: #5c6675; font-size: 17px; margin: 0; }

.section-fcard {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e7ee;
    color: inherit;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* The card is an <a> when it has one link, so it must not inherit the
   theme's underline-on-hover for anchors. */
a.section-fcard { text-decoration: none; }

.section-fcard:hover {
    border-color: var(--sec-brand);
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(11, 27, 40, .1);
}

.section-fcard-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sec-light); }
.section-fcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.section-fcard:hover .section-fcard-media img { transform: scale(1.05); }

.section-fcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 28px 28px 0;
    border-radius: 50%;
    background: var(--sec-soft);
    color: var(--sec-brand);
    font-size: 21px;
}

.section-fcard-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 26px 28px 28px;
}

.section-fcard-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sec-brand);
    background: var(--sec-soft);
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.section-fcard-body h3 { font-size: 20px; line-height: 1.4; margin: 0 0 10px; color: var(--sec-ink); }
.section-fcard:hover .section-fcard-body h3 { color: var(--sec-brand); }
.section-fcard-body p { font-size: 15px; color: #5c6675; margin: 0; }

.section-fcard-link {
    margin-top: auto;
    padding-top: 18px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--sec-brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.section-fcard-link i { transition: transform .2s ease; }
.section-fcard:hover .section-fcard-link i { transform: translateX(5px); }

/* Plain style: no media, so a brand rule carries the top edge instead. */
.section-fcard--plain { border-top: 3px solid var(--sec-brand); }

.section-fcards-foot { margin-top: 34px; }

@media (max-width: 767.98px) {
    .section-fcards { padding: 44px 0; }
}

/* The author line under a news card — quieter than the body copy so it reads
   as attribution rather than another sentence. */
.section-news-byline {
    margin-top: 10px;
    font-size: 13px;
    color: #7a828f;
}

/* A subscribe band with a background image needs the brand colour to become a
   scrim, or white text lands on whatever the photo happens to be. */
.section-subscribe-inner.has-image {
    background-size: cover;
    background-position: center;
    position: relative;
    isolation: isolate;
}

.section-subscribe-inner.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 112, 173, .94) 0%, rgba(0, 112, 173, .78) 100%);
    z-index: -1;
}

/* ==========================================================================
   Stacked image chooser
   --------------------------------------------------------------------------
   Topics left, a deck of images in the middle, the chosen description right.
   The slides behind the front one peel upward and narrow, which is what makes
   the middle column read as a stack rather than a single picture.
   ========================================================================== */

.section-acs { padding: 72px 0; overflow: hidden; }

.section-acs-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }

.section-acs-eyebrow { font-size: 16px; color: var(--sec-ink); margin-bottom: 14px; }

.section-acs-head h2 {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.22;
    color: var(--sec-ink);
    margin: 0;
}

.section-acs-intro { margin-top: 16px; color: #5c6675; font-size: 17px; }

.section-acs-grid {
    display: grid;
    grid-template-columns: minmax(230px, 0.95fr) minmax(300px, 1.1fr) minmax(230px, 0.95fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

/* --- Topics ----------------------------------------------------------- */

.section-acs-list { display: flex; flex-direction: column; }

.section-acs-topic {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 26px 4px;
    background: none;
    border: 0;
    border-bottom: 1px solid #dfe3ea;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    color: #7c8595;
    cursor: pointer;
    transition: color .2s ease;
}

.section-acs-topic:first-child { border-top: 1px solid #dfe3ea; }
.section-acs-topic:hover { color: var(--sec-ink); }
.section-acs-topic:focus-visible { outline: 2px solid var(--sec-brand); outline-offset: -2px; }

.section-acs-topic.is-active { color: var(--sec-ink); font-weight: 400; }

/* The caret only appears on the chosen row, which is what marks it. */
.section-acs-caret {
    flex: 0 0 12px;
    font-size: 12px;
    color: var(--sec-brand);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease;
}

.section-acs-topic.is-active .section-acs-caret { opacity: 1; transform: translateX(0); }

/* --- The deck --------------------------------------------------------- */

.section-acs-stack {
    position: relative;

    /* How far the deepest slide is lifted. Reserved as padding above the
       front slide, because translateY moves a slide visually without
       affecting layout — so without this the peeled slides rose out of the
       column and sat on top of the heading. Keep in step with the
       translateY below: 4 (max depth) x 34px. */
    --acs-lift: 136px;

    padding-top: var(--acs-lift);
    min-height: calc(440px + var(--acs-lift));
}

.section-acs-slide {
    position: absolute;
    /* Below the reserved lift, so the front slide sits at the foot of the
       box and the ones behind it rise into the padding rather than out. */
    top: var(--acs-lift, 136px);
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    background: var(--sec-light);
    box-shadow: 0 10px 34px rgba(11, 27, 40, .14);

    /* --acs-depth is set by the script: 0 is the front slide, and each one
       behind it lifts and narrows a little more. */
    --acs-depth: 0;
    /* Derived from the reserved lift rather than a fixed 34px: reducing the
       reservation at narrow widths used to leave the movement unchanged, so
       the slides rose out of the column and back onto the heading. */
    transform:
        translateY(calc(var(--acs-depth) * (var(--acs-lift, 136px) / -4)))
        scaleX(calc(1 - var(--acs-depth) * 0.085));
    opacity: calc(1 - var(--acs-depth) * 0.05);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1),
                opacity .45s ease,
                clip-path .45s ease;
}

/* Slides behind the front one show only their top edge. */
.section-acs-slide:not(.is-active) { clip-path: inset(0 0 88% 0); }
.section-acs-slide.is-active { clip-path: inset(0 0 0 0); opacity: 1; }

.section-acs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.section-acs-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    text-align: center;
    color: #8a919d;
    font-size: 15px;
    background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 10px, #e6eaf1 10px, #e6eaf1 20px);
}

/* --- Description ------------------------------------------------------ */

.section-acs-panels { padding-top: 4px; }

.section-acs-panel[hidden] { display: none; }
.section-acs-panel p { font-size: 16px; line-height: 1.7; color: #3c4756; margin: 0 0 18px; }

.section-acs-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--sec-brand);
}

.section-acs-link i { transition: transform .2s ease; }
.section-acs-link:hover i { transform: translateX(4px); }

/* --- Narrower --------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .section-acs-grid { grid-template-columns: 1fr 1.1fr; gap: 32px; }
    /* The description moves under the topics rather than being squeezed. */
    .section-acs-panels { grid-column: 1 / 2; grid-row: 2; }
    .section-acs-stack  { grid-column: 2 / 3; grid-row: 1 / 3; --acs-lift: 104px; }
}

/*
 * On a phone the deck is dropped.
 *
 * The peel needs room on both axes to read as a stack of cards. At 390px the
 * slides behind the front one are reduced to a few slivers of unrelated
 * photograph above the picture — which looks like a rendering fault, not a
 * deck. One image at a time, and the movement is gone with it.
 *
 * The image also moves below the topic list. It used to sit above it, so
 * choosing a topic changed something the reader had already scrolled past and
 * the tap appeared to do nothing.
 */
@media (max-width: 767.98px) {
    .section-acs { padding: 48px 0; }
    .section-acs-head { margin-bottom: 34px; }
    .section-acs-grid { grid-template-columns: 1fr; gap: 20px; }
    .section-acs-panels,
    .section-acs-stack { grid-column: 1; grid-row: auto; }

    .section-acs-stack {
        --acs-lift: 0px;
        padding-top: 0;
        min-height: 0;
        /* Height comes from the picture now that nothing is reserved above it. */
        aspect-ratio: 16 / 10;
    }

    .section-acs-slide {
        top: 0;
        transform: none;
        opacity: 1;
        clip-path: none;
        border-radius: 12px;
    }

    /* Gone rather than peeled: there is no depth to show at this width. */
    .section-acs-slide:not(.is-active) { display: none; }

    .section-acs-topic { padding: 16px 2px; font-size: 16px; }

    /*
     * No `order` on either of these.
     *
     * The script moves the picture and the description in under the topic that
     * was chosen, and the topic list is a flex column — so an order of 1 took
     * the description straight back out to the bottom of the list, which is
     * the thing being fixed.
     */
    .section-acs-stack,
    .section-acs-panels { margin: 4px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .section-acs-slide { transition: none; }
}

/* ==========================================================================
   Products
   ========================================================================== */

.prd-listing { padding: 50px 0 70px; }
.section-products { padding: 64px 0; }

/* The section can be asked for 2, 3 or 4 per row; the card partial always
   emits col-lg-4, so the override lives here rather than in the partial. */
.prd-grid-2 > [class*="col-lg-"] { flex: 0 0 auto; width: 50%; }
.prd-grid-4 > [class*="col-lg-"] { flex: 0 0 auto; width: 25%; }

@media (max-width: 991.98px) {
    .prd-grid-2 > [class*="col-lg-"],
    .prd-grid-4 > [class*="col-lg-"] { width: 50%; }
}

@media (max-width: 575.98px) {
    .prd-grid-2 > [class*="col-lg-"],
    .prd-grid-4 > [class*="col-lg-"] { width: 100%; }
}

/* --- Card ------------------------------------------------------------- */

.prd-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e7ee;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.prd-card:hover {
    border-color: var(--sec-brand);
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(11, 27, 40, .12);
}

.prd-card-top {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sec-soft);
}

.prd-card-top img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prd-card:hover .prd-card-top img { transform: scale(1.05); }

/* A product with no artwork still needs a recognisable tile. */
.prd-card-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 54px;
    font-weight: 300;
    color: var(--sec-brand);
    background: linear-gradient(135deg, var(--sec-soft) 0%, #dbe9f4 100%);
}

.prd-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 3px;
    background: #fff;
    color: var(--sec-ink);
}

.prd-badge--beta    { background: #0a7d55; color: #fff; }
.prd-badge--concept { background: #6b5bd2; color: #fff; }
.prd-badge--sunset  { background: #b3541e; color: #fff; }

.prd-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 26px 26px; }

/* Name, version and category read as one unit, with the product's own mark
   beside them where it has one. */
.prd-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }

.prd-card-logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid #e2e7ee;
    border-radius: 8px;
    background: #fff;
}

.prd-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.prd-card-naming { min-width: 0; }
.prd-card-naming h3 { font-size: 21px; margin: 0 0 4px; color: var(--sec-ink); }
.prd-card:hover .prd-card-naming h3 { color: var(--sec-brand); }

.prd-card-version { font-size: 12px; color: #8a919d; margin-left: 6px; }

.prd-card-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sec-brand);
}

.prd-card-tagline { display: block; font-size: 15px; color: var(--sec-brand); margin-bottom: 10px; }
.prd-card-body p  { font-size: 14.5px; color: #5c6675; margin: 0; }

/* Two figures lifted from the product's own highlights — a card that says
   "99.98% uptime" beats one that says "learn more". */
.prd-card-figures {
    display: flex;
    gap: 26px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f5;
}

.prd-card-figures > span { display: block; min-width: 0; }
.prd-card-figures strong { display: block; font-size: 19px; font-weight: 300; color: var(--sec-brand); }
.prd-card-figures small  { display: block; font-size: 12px; color: #7a828f; line-height: 1.4; }

.prd-card-link {
    margin-top: auto;
    padding-top: 18px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--sec-brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.prd-card-link i { transition: transform .2s ease; }
.prd-card:hover .prd-card-link i { transform: translateX(5px); }

/* --- Wide card: the one the listing leads on -------------------------- */

.prd-card--wide { flex-direction: row; align-items: stretch; }
.prd-card--wide .prd-card-top { flex: 0 0 46%; aspect-ratio: auto; min-height: 320px; }
.prd-card--wide .prd-card-body { justify-content: center; padding: 38px 44px; }
.prd-card--wide .prd-card-naming h3 { font-size: 30px; }
.prd-card--wide .prd-card-tagline { font-size: 17px; }
.prd-card--wide .prd-card-body p { font-size: 16px; line-height: 1.65; }
.prd-card--wide .prd-card-link { margin-top: 22px; }

@media (max-width: 991.98px) {
    .prd-card--wide { flex-direction: column; }
    .prd-card--wide .prd-card-top { flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: 0; }
    .prd-card--wide .prd-card-body { padding: 26px 24px 28px; }
    .prd-card--wide .prd-card-naming h3 { font-size: 24px; }
}

@media (max-width: 575.98px) {
    .prd-card-figures { gap: 18px; }
}
/* --- Detail page ------------------------------------------------------ */

.prd-hero-logo { max-height: 56px; width: auto; margin-bottom: 18px; }

.prd-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }

.prd-hero-secondary { color: #fff; font-size: 15px; text-decoration: underline; }
.prd-hero-secondary:hover { color: #fff; opacity: .85; }

.prd-specs { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 0; margin: 0; }
.prd-specs dt { padding: 12px 0; border-bottom: 1px solid #eef1f5; font-weight: 400; color: #6a7382; }
.prd-specs dd { padding: 12px 0; border-bottom: 1px solid #eef1f5; margin: 0; color: var(--sec-ink); }

@media (max-width: 575.98px) {
    .prd-specs { grid-template-columns: 1fr; }
    .prd-specs dt { padding-bottom: 0; border-bottom: 0; }
}

/* --- Pricing ---------------------------------------------------------- */

.prd-tier {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e7ee;
    padding: 30px 28px;
}

.prd-tier.is-featured { border-color: var(--sec-brand); border-width: 2px; box-shadow: 0 14px 34px rgba(0, 112, 173, .12); }

.prd-tier h4 { font-size: 19px; margin: 0 0 10px; }
.prd-tier-price { font-size: 32px; color: var(--sec-brand); margin: 0 0 10px; }
.prd-tier-note { font-size: 14.5px; color: #5c6675; margin: 0 0 20px; }
.prd-tier .global-btn2 { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   Latest news — newsroom layout
   --------------------------------------------------------------------------
   Heading top left, the newest story as a full column beneath it, the rest as
   a dated list on the right. The category is an em-rule kicker rather than a
   filled chip, which is what keeps a page of these looking like a newsroom
   instead of a wall of badges.
   ========================================================================== */

.section-news--feature { padding: 78px 0; }

.section-news-title {
    font-size: clamp(28px, 3vw, 40px);
    margin: 0 0 8px;
    color: var(--sec-ink);
}

.section-news-sub { color: #6a7382; margin: 0 0 42px; max-width: 60ch; }
.section-news-title + .section-news-split { margin-top: 46px; }

.section-news-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.section-news-lead { display: flex; flex-direction: column; height: 100%; }

/* --- One entry -------------------------------------------------------- */

.section-news-entry { display: block; }

/* The em rule before the category, drawn rather than typed so it keeps its
   length whatever the category is called. */
.section-news-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: #4a5462;
    margin-bottom: 14px;
}

.section-news-kicker::before {
    content: '';
    flex: 0 0 18px;
    height: 1px;
    background: currentColor;
}

.section-news-entry h3 {
    font-size: clamp(19px, 1.6vw, 24px);
    line-height: 1.32;
    margin: 0 0 16px;
}

.section-news-entry h3 a { color: var(--sec-ink); }
.section-news-entry h3 a:hover { color: var(--sec-brand); }

.section-news-entry p {
    font-size: 15.5px;
    line-height: 1.6;
    color: #4a5462;
    margin: 0 0 18px;
}

.section-news-entry time { display: block; font-size: 14.5px; color: #4a5462; }

/* --- The rail --------------------------------------------------------- */

.section-news-rail { display: flex; flex-direction: column; }

.section-news-entry--rail { padding: 30px 0; border-bottom: 1px solid #e2e7ee; }
.section-news-entry--rail:first-child { padding-top: 0; }
.section-news-entry--rail h3 { margin-bottom: 22px; }

/* --- The pill --------------------------------------------------------- */

.section-news-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    margin-top: auto;
    padding: 14px 30px;
    border: 1px solid var(--sec-brand);
    border-radius: 40px;
    font-size: 16px;
    color: var(--sec-brand);
    background: transparent;
    transition: background .2s ease, color .2s ease;
}

.section-news-pill:hover { background: var(--sec-brand); color: #fff; }
.section-news-pill i { transition: transform .2s ease; }
.section-news-pill:hover i { transform: translateX(4px); }

/* The lead column is short on a phone, so the pill needs its own spacing
   rather than relying on margin-top:auto in a collapsed column. */
@media (max-width: 991.98px) {
    .section-news--feature { padding: 52px 0; }
    .section-news-split { grid-template-columns: 1fr; gap: 34px; }
    .section-news-pill { margin-top: 30px; order: 3; }
    .section-news-lead { display: contents; }
    .section-news-rail { order: 2; }
}

/* ==========================================================================
   Insights stories — home showcase
   --------------------------------------------------------------------------
   One story gets the picture and the room; the next three sit beside it as
   rows. Picture-led on purpose, so it reads differently from the dated
   newsroom block on the same page.
   ========================================================================== */

.ins-home { padding: 70px 0; }

.ins-home-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e2e7ee;
}

.ins-home-head h2 { margin: 0 0 6px; font-size: clamp(26px, 2.6vw, 36px); }
.ins-home-head p  { margin: 0; color: #6a7382; max-width: 60ch; }

.ins-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: start;
}

/* --- The lead --------------------------------------------------------- */

.ins-home-lead {
    background: #fff;
    border: 1px solid #e2e7ee;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ins-home-lead:hover { border-color: var(--sec-brand); box-shadow: 0 18px 44px rgba(11, 27, 40, .1); }

.ins-home-lead-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sec-light);
}

.ins-home-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ins-home-lead:hover .ins-home-lead-media img { transform: scale(1.04); }

.ins-home-chip {
    position: absolute;
    left: 16px;
    bottom: 16px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sec-brand);
    background: #fff;
    padding: 6px 12px;
    border-radius: 3px;
}

.ins-home-lead-body { padding: 26px 30px 30px; }

.ins-home-lead-body h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.34; margin: 10px 0 12px; }
.ins-home-lead-body h3 a { color: var(--sec-ink); }
.ins-home-lead-body h3 a:hover { color: var(--sec-brand); }
.ins-home-lead-body p { font-size: 15.5px; line-height: 1.65; color: #5c6675; margin: 0 0 18px; }

.ins-home-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7a828f;
}

.ins-home-cat {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sec-brand);
}

.ins-home-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--sec-brand);
}

.ins-home-cta i { transition: transform .2s ease; }
.ins-home-cta:hover i { transform: translateX(4px); }

/* --- The rail --------------------------------------------------------- */

.ins-home-rail { display: flex; flex-direction: column; gap: 14px; }

.ins-home-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e2e7ee;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ins-home-row:hover {
    border-color: var(--sec-brand);
    transform: translateX(4px);
    box-shadow: 0 10px 26px rgba(11, 27, 40, .07);
}

.ins-home-row-media {
    flex: 0 0 96px;
    width: 96px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sec-light);
}

.ins-home-row-media img { width: 100%; height: 100%; object-fit: cover; }

.ins-home-row-body { flex: 1 1 auto; min-width: 0; }
.ins-home-row-body strong {
    display: block;
    margin-top: 5px;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.42;
    color: var(--sec-ink);
}

.ins-home-row:hover .ins-home-row-body strong { color: var(--sec-brand); }
.ins-home-row-go { flex: 0 0 auto; color: #c2cad6; transition: color .2s ease; }
.ins-home-row:hover .ins-home-row-go { color: var(--sec-brand); }

@media (max-width: 991.98px) {
    .ins-home { padding: 48px 0; }
    .ins-home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .ins-home-lead-body { padding: 22px 20px 24px; }
    .ins-home-row-media { flex-basis: 76px; width: 76px; }
}

/* ==========================================================================
   Image gallery
   --------------------------------------------------------------------------
   Three arrangements over one set of images. Grid crops every tile to the
   same shape so rows stay level; masonry keeps each picture as it is;
   mosaic gives the first image the room and tiles the rest around it.
   ========================================================================== */

.section-gallery { padding: 64px 0; }

.section-gallery-head { max-width: 720px; margin-bottom: 32px; }
.section-gallery-head h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 8px; }
.section-gallery-head p  { color: #6a7382; margin: 0; }

/* --- Spacing ---------------------------------------------------------- */

.section-gallery-set--gap-none   { --gal-gap: 0px; }
.section-gallery-set--gap-tight  { --gal-gap: 6px; }
.section-gallery-set--gap-normal { --gal-gap: 18px; }
.section-gallery-set--gap-wide   { --gal-gap: 32px; }

/* --- One tile --------------------------------------------------------- */

.section-gallery-item { margin: 0; }

.section-gallery-link {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--sec-light);
}

.section-gallery-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.section-gallery-link:hover img { transform: scale(1.05); }

/* The magnifier says the tile opens rather than navigates. */
.section-gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    background: rgba(11, 27, 40, .42);
    opacity: 0;
    transition: opacity .2s ease;
}

.section-gallery-link:hover .section-gallery-zoom,
.section-gallery-link:focus-visible .section-gallery-zoom { opacity: 1; }

.section-gallery-item figcaption { margin-top: 9px; font-size: 13.5px; color: #6a7382; }

/* --- 1. Grid ---------------------------------------------------------- */

.section-gallery--grid .section-gallery-set {
    display: grid;
    grid-template-columns: repeat(var(--gal-cols, 3), minmax(0, 1fr));
    gap: var(--gal-gap, 18px);
}

.section-gallery-item--4-3  .section-gallery-link { aspect-ratio: 4 / 3; }
.section-gallery-item--1-1  .section-gallery-link { aspect-ratio: 1 / 1; }
.section-gallery-item--3-4  .section-gallery-link { aspect-ratio: 3 / 4; }
.section-gallery-item--16-9 .section-gallery-link { aspect-ratio: 16 / 9; }

/* --- 2. Masonry ------------------------------------------------------- */

/* CSS columns rather than a grid: the whole point is that heights differ,
   and a grid would need every height measured in JavaScript. */
.section-gallery--masonry .section-gallery-set {
    column-count: var(--gal-cols, 3);
    column-gap: var(--gal-gap, 18px);
}

.section-gallery--masonry .section-gallery-item {
    break-inside: avoid;
    margin-bottom: var(--gal-gap, 18px);
}

/* Natural height is the arrangement, so the crop is dropped here. */
.section-gallery--masonry .section-gallery-link { aspect-ratio: auto !important; }
.section-gallery--masonry .section-gallery-link img { height: auto; }

/* --- 3. Mosaic -------------------------------------------------------- */

.section-gallery--mosaic .section-gallery-set {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--gal-gap, 18px);
}

/* The first image takes a 2×2 block; the rest fill in around it. */
.section-gallery--mosaic .section-gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
.section-gallery--mosaic .section-gallery-link { aspect-ratio: auto; height: 100%; min-height: 150px; }
.section-gallery--mosaic .section-gallery-item:first-child .section-gallery-link { min-height: 320px; }

/* Every fifth image gets a wide block, so a long gallery keeps a rhythm
   instead of becoming a uniform grid after the first row. */
.section-gallery--mosaic .section-gallery-item:nth-child(6n + 4) { grid-column: span 2; }

.section-gallery--mosaic .section-gallery-item figcaption { display: none; }

/* --- Narrower --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .section-gallery { padding: 44px 0; }
    .section-gallery--grid .section-gallery-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-gallery--masonry .section-gallery-set { column-count: 2; }
    .section-gallery--mosaic .section-gallery-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .section-gallery--grid .section-gallery-set { grid-template-columns: 1fr; }
    .section-gallery--masonry .section-gallery-set { column-count: 1; }
    .section-gallery--mosaic .section-gallery-set { grid-template-columns: 1fr; }
    .section-gallery--mosaic .section-gallery-item:first-child,
    .section-gallery--mosaic .section-gallery-item:nth-child(6n + 4) { grid-column: span 1; grid-row: span 1; }
}

/* ==========================================================================
   Gallery lightbox
   ========================================================================== */

.gal-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2300;
    background: rgba(6, 15, 24, .93);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 64px;
}

.gal-lightbox[hidden] { display: none; }
body.gal-open { overflow: hidden; }

.gal-stage { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.gal-stage img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; }
.gal-stage figcaption { margin-top: 14px; color: rgba(255, 255, 255, .82); font-size: 14.5px; }

.gal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}

.gal-close:hover { opacity: 1; }

.gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: background .2s ease;
}

.gal-nav:hover { background: rgba(255, 255, 255, .2); }
.gal-prev { left: 16px; }
.gal-next { right: 16px; }

.gal-count {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: 13.5px;
}

@media (max-width: 767.98px) {
    .gal-lightbox { padding: 56px 12px; }
    .gal-nav { width: 38px; height: 38px; }
}

/* ==========================================================================
   Thank you
   --------------------------------------------------------------------------
   A page rather than a flash message: it survives a refresh, it has a URL,
   and there is room for what happens next.

   Redesigned as four bands — confirmation, sequence, a way to reach a person,
   somewhere to go. The old version was one centred card followed by three
   equal boxes, which read as a dead end and gave the steps no order.
   ========================================================================== */

.ty-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 9vw, 104px) 0 clamp(56px, 8vw, 92px);
    background: linear-gradient(135deg, #0a2f4d 0%, #0070ad 58%, #1892d0 100%);
    color: #fff;
}

/* A soft off-centre glow rather than a photograph: this page loads straight
   after a form post, and an image would be the slowest thing on it. */
.ty-hero-art {
    position: absolute;
    inset: -40% -10% auto auto;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
}

.ty-hero-inner { position: relative; max-width: 720px; }

.ty-hero h1 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.18;
    color: #fff;
    margin: 24px 0 14px;
}

.ty-lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
    margin: 0;
    max-width: 54ch;
}

/* --- The tick ----------------------------------------------------------- */

.ty-tick { display: block; width: 64px; height: 64px; }
.ty-tick svg { width: 100%; height: 100%; overflow: visible; }

.ty-tick-ring,
.ty-tick-mark {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ty-tick-ring { stroke: rgba(255, 255, 255, .45); }

/* Drawn on rather than faded in: the stroke arriving reads as "done", which
   is the one thing this page exists to say. */
.ty-tick-ring { stroke-dasharray: 152; stroke-dashoffset: 152; animation: tyRing .5s ease forwards; }
.ty-tick-mark { stroke-dasharray: 44; stroke-dashoffset: 44; animation: tyMark .3s .42s ease forwards; }

@keyframes tyRing { to { stroke-dashoffset: 0; } }
@keyframes tyMark { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .ty-tick-ring, .ty-tick-mark { animation: none; stroke-dashoffset: 0; }
}

/* --- Reference ---------------------------------------------------------- */

.ty-ref {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 6px;
    backdrop-filter: blur(6px);
}

.ty-ref-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

.ty-ref code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    letter-spacing: .04em;
    color: #fff;
}

.ty-ref-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .16);
    border: 0;
    border-radius: 4px;
    padding: 6px 11px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.ty-ref-copy:hover { background: rgba(255, 255, 255, .3); }
.ty-ref-copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ty-ref-note {
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
    margin: 10px 0 0;
}

/* --- Actions ------------------------------------------------------------ */

.ty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }

.ty-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 3px;
    font-size: 15.5px;
    line-height: 1.2;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.ty-btn i { font-size: 13px; transition: transform .2s ease; }
.ty-btn:hover i { transform: translateX(3px); }

.ty-btn--primary { background: #fff; color: #0a2f4d; }
.ty-btn--primary:hover { background: #eaf3f9; color: #0a2f4d; }

.ty-btn--ghost { border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.ty-btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.ty-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Section heads ------------------------------------------------------ */

.ty-section-head { margin-bottom: 38px; max-width: 60ch; }
.ty-section-head h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 8px; }
.ty-section-head p  { font-size: 16px; color: #5c6675; margin: 0; }

/* --- Steps -------------------------------------------------------------- */

.ty-next { padding: clamp(56px, 7vw, 84px) 0; }

.ty-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
}

.ty-step {
    position: relative;
    padding: 0 28px 0 0;
}

/* The connector is what makes these read as a sequence rather than three
   unrelated boxes. Drawn from the mark, and never after the last step. */
.ty-step::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 62px;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #cfdae6, rgba(207, 218, 230, 0));
}

.ty-step:last-child::after { display: none; }

.ty-step-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #eaf3f9;
    color: #0070ad;
    font-size: 19px;
    margin-bottom: 20px;
}

.ty-step-no {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8b95a3;
    margin-bottom: 6px;
}

.ty-step h3 { font-size: 19px; margin: 0 0 8px; }
.ty-step p  { font-size: 14.8px; line-height: 1.7; color: #5c6675; margin: 0; max-width: 34ch; }

/* --- Reach a person ----------------------------------------------------- */

.ty-direct { padding: 0 0 clamp(56px, 7vw, 84px); }

.ty-direct-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    padding: clamp(28px, 4vw, 44px);
    background: #f4f7fa;
    border-radius: 8px;
    border-left: 4px solid #0070ad;
}

.ty-direct-copy { flex: 1 1 320px; }
.ty-direct-copy h2 { font-size: clamp(21px, 2.2vw, 26px); margin: 0 0 8px; }
.ty-direct-copy p  { font-size: 15.5px; color: #5c6675; margin: 0; }

.ty-direct-hours {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px !important;
    font-size: 14px !important;
    color: #6a7382 !important;
}

.ty-direct-links { flex: 1 1 300px; display: grid; gap: 10px; }

.ty-direct-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    color: #0b1b28;
    transition: border-color .2s ease, transform .2s ease;
}

.ty-direct-links a:hover { border-color: #0070ad; transform: translateY(-1px); color: #0b1b28; }

.ty-direct-links i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf3f9;
    color: #0070ad;
    font-size: 15px;
}

.ty-direct-links em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8b95a3;
}

.ty-direct-links strong { font-weight: 400; font-size: 15.5px; word-break: break-word; }

/* --- While you are here ------------------------------------------------- */

.ty-more { padding: 0 0 clamp(60px, 8vw, 90px); }

.ty-more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 2px solid #0b1b28;
}

.ty-more-head h2 { font-size: 21px; margin: 0; }
.ty-more-head a  { font-size: 14px; color: #0070ad; display: inline-flex; align-items: center; gap: 7px; }
.ty-more-head a i { font-size: 11px; transition: transform .2s ease; }
.ty-more-head a:hover i { transform: translateX(3px); }

.ty-link-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid #e6eaf0;
    color: #0b1b28;
    transition: color .2s ease, padding-left .2s ease;
}

.ty-link-row:last-child { border-bottom: 0; }
.ty-link-row:hover { color: #0070ad; padding-left: 6px; }
.ty-link-row > span { flex: 1 1 auto; min-width: 0; }

.ty-link-row em {
    display: inline-block;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0070ad;
}

.ty-link-row strong { display: block; margin: 3px 0; font-size: 16px; font-weight: 400; }
.ty-link-row small  { font-size: 13px; color: #7a828f; }
.ty-link-row i      { flex: 0 0 auto; color: #c2cad6; transition: transform .2s ease, color .2s ease; }
.ty-link-row:hover i { color: #0070ad; transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .ty-btn, .ty-btn i, .ty-link-row, .ty-link-row i,
    .ty-direct-links a, .ty-more-head a i { transition: none; }
    .ty-btn:hover i, .ty-link-row:hover i, .ty-more-head a:hover i { transform: none; }
    .ty-link-row:hover { padding-left: 0; }
    .ty-direct-links a:hover { transform: none; }
}

@media (max-width: 767.98px) {
    .ty-hero-art { width: 380px; height: 380px; }
    .ty-tick { width: 54px; height: 54px; }

    /* Stacked, so the connector becomes vertical rather than pointing at
       nothing to the right. */
    .ty-steps { gap: 30px; }
    .ty-step { padding: 0; }
    .ty-step::after {
        top: 58px;
        left: 24px;
        right: auto;
        bottom: -30px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, #cfdae6, rgba(207, 218, 230, 0));
    }
    .ty-step p { max-width: none; }

    .ty-ref { width: 100%; }
    .ty-actions .ty-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Contrast on coloured surfaces
   --------------------------------------------------------------------------
   The appearance control lets any section sit on a brand or dark background.
   The generic rule further up recolours headings and paragraphs, but every
   section added since brought its own classes — captions, chips, rules,
   figures — which stayed dark and disappeared.

   Everything here is scoped to .sec-bg-brand / .sec-bg-dark, so a section on
   the default white surface is untouched.
   ========================================================================== */

.sec-bg-brand,
.sec-bg-dark {
    /* One switch the rules below read, so a new component only has to use
       currentColor or these two variables to come out right. */
    --on-dark-ink: #fff;
    --on-dark-muted: rgba(255, 255, 255, .78);
    --on-dark-line: rgba(255, 255, 255, .24);
    --on-dark-panel: rgba(255, 255, 255, .1);
}

/* --- Type ------------------------------------------------------------- */

.sec-bg-brand time, .sec-bg-dark time,
.sec-bg-brand small, .sec-bg-dark small,
.sec-bg-brand figcaption, .sec-bg-dark figcaption,
.sec-bg-brand cite, .sec-bg-dark cite { color: var(--on-dark-muted); }

.sec-bg-brand h1 a, .sec-bg-brand h2 a, .sec-bg-brand h3 a, .sec-bg-brand h4 a,
.sec-bg-dark h1 a, .sec-bg-dark h2 a, .sec-bg-dark h3 a, .sec-bg-dark h4 a { color: var(--on-dark-ink); }

.sec-bg-brand h3 a:hover, .sec-bg-dark h3 a:hover { color: var(--on-dark-ink); text-decoration: underline; }

/* --- Rules and separators --------------------------------------------- */

.sec-bg-brand .section-news-head,
.sec-bg-dark .section-news-head,
.sec-bg-brand .ins-home-head,
.sec-bg-dark .ins-home-head,
.sec-bg-brand .section-news-entry--rail,
.sec-bg-dark .section-news-entry--rail,
.sec-bg-brand .section-acs-list,
.sec-bg-dark .section-acs-list,
.sec-bg-brand .section-acs-item,
.sec-bg-dark .section-acs-item,
.sec-bg-brand .section-acf-item,
.sec-bg-dark .section-acf-item { border-color: var(--on-dark-line); }

.sec-bg-brand .section-acs-topic,
.sec-bg-dark .section-acs-topic { color: var(--on-dark-muted); border-color: var(--on-dark-line); }

.sec-bg-brand .section-acs-topic.is-active,
.sec-bg-dark .section-acs-topic.is-active,
.sec-bg-brand .section-acs-caret,
.sec-bg-dark .section-acs-caret,
.sec-bg-brand .section-acf-no,
.sec-bg-dark .section-acf-no,
.sec-bg-brand .section-acf-eyebrow,
.sec-bg-dark .section-acf-eyebrow { color: var(--on-dark-ink); }

.sec-bg-brand .section-news-kicker,
.sec-bg-dark .section-news-kicker { color: var(--on-dark-muted); }

/* --- Chips, tags and figures ------------------------------------------ */

.sec-bg-brand .section-news-tag, .sec-bg-dark .section-news-tag,
.sec-bg-brand .section-fcard-tag, .sec-bg-dark .section-fcard-tag,
.sec-bg-brand .prd-card-tag, .sec-bg-dark .prd-card-tag,
.sec-bg-brand .ins-tag, .sec-bg-dark .ins-tag,
.sec-bg-brand .crx-chip, .sec-bg-dark .crx-chip {
    background: var(--on-dark-panel);
    color: var(--on-dark-ink);
}

.sec-bg-brand .crx-figure, .sec-bg-dark .crx-figure,
.sec-bg-brand .crx-figures, .sec-bg-dark .crx-figures {
    background: transparent;
    border-color: var(--on-dark-line);
}

.sec-bg-brand .crx-figure strong, .sec-bg-dark .crx-figure strong { color: var(--on-dark-ink); }
.sec-bg-brand .crx-figure span, .sec-bg-dark .crx-figure span { color: var(--on-dark-muted); }

/* --- Links and buttons ------------------------------------------------ */

.sec-bg-brand .section-news-more, .sec-bg-dark .section-news-more,
.sec-bg-brand .section-fcard-link, .sec-bg-dark .section-fcard-link,
.sec-bg-brand .section-acs-link, .sec-bg-dark .section-acs-link,
.sec-bg-brand .prd-card-link, .sec-bg-dark .prd-card-link,
.sec-bg-brand .ins-home-cta, .sec-bg-dark .ins-home-cta { color: var(--on-dark-ink); }

.sec-bg-brand .section-news-pill, .sec-bg-dark .section-news-pill {
    border-color: var(--on-dark-ink);
    color: var(--on-dark-ink);
}

.sec-bg-brand .section-news-pill:hover, .sec-bg-dark .section-news-pill:hover {
    background: #fff;
    color: var(--sec-brand);
}

.sec-bg-brand .global-btn2, .sec-bg-dark .global-btn2 {
    border-color: var(--on-dark-ink) !important;
    color: var(--on-dark-ink) !important;
}

/* --- Cards keep a light surface of their own -------------------------- */

/* A white card on a brand band is legible; a transparent one is not. These
   opt back out of the inherited white text. */
.sec-bg-brand .prd-card, .sec-bg-dark .prd-card,
.sec-bg-brand .section-fcard, .sec-bg-dark .section-fcard,
.sec-bg-brand .section-news-card, .sec-bg-dark .section-news-card,
.sec-bg-brand .ins-home-lead, .sec-bg-dark .ins-home-lead,
.sec-bg-brand .ins-home-row, .sec-bg-dark .ins-home-row,
.sec-bg-brand .crx-team, .sec-bg-dark .crx-team,
.sec-bg-brand .crx-benefit, .sec-bg-dark .crx-benefit,
.sec-bg-brand .ty-step, .sec-bg-dark .ty-step {
    background: #fff;
    border-color: transparent;
    color: var(--sec-ink);
}

.sec-bg-brand .prd-card h3, .sec-bg-dark .prd-card h3,
.sec-bg-brand .section-fcard h3, .sec-bg-dark .section-fcard h3,
.sec-bg-brand .section-news-card h3 a, .sec-bg-dark .section-news-card h3 a,
.sec-bg-brand .ins-home-lead h3 a, .sec-bg-dark .ins-home-lead h3 a,
.sec-bg-brand .crx-team h4, .sec-bg-dark .crx-team h4 { color: var(--sec-ink); }

.sec-bg-brand .prd-card p, .sec-bg-dark .prd-card p,
.sec-bg-brand .section-fcard p, .sec-bg-dark .section-fcard p,
.sec-bg-brand .section-news-card p, .sec-bg-dark .section-news-card p,
.sec-bg-brand .crx-team p, .sec-bg-dark .crx-team p { color: #5c6675; }

.sec-bg-brand .prd-card .prd-card-tag, .sec-bg-dark .prd-card .prd-card-tag,
.sec-bg-brand .section-news-card .section-news-tag, .sec-bg-dark .section-news-card .section-news-tag,
.sec-bg-brand .section-fcard .section-fcard-tag, .sec-bg-dark .section-fcard .section-fcard-tag {
    background: var(--sec-soft);
    color: var(--sec-brand);
}

/* --- Video ------------------------------------------------------------ */

/* On a coloured band the brand-tinted frame vanishes into the background, so
   it takes a neutral one instead. */
.sec-bg-brand .section-video-frame--frame-brand,
.sec-bg-dark .section-video-frame--frame-brand { --sec-frame: rgba(0, 0, 0, .28); }

.sec-bg-brand .section-video-caption, .sec-bg-dark .section-video-caption,
.sec-bg-brand .section-video-lead, .sec-bg-dark .section-video-lead { color: var(--on-dark-muted); }

/* --- Light and tinted surfaces ---------------------------------------- */

/* The light surfaces keep dark type; only the panels that assume white need
   lifting off the tint so they are still distinguishable. */
.sec-bg-light .prd-card, .sec-bg-soft .prd-card,
.sec-bg-light .section-fcard, .sec-bg-soft .section-fcard,
.sec-bg-light .section-news-card, .sec-bg-soft .section-news-card,
.sec-bg-light .ins-home-row, .sec-bg-soft .ins-home-row,
.sec-bg-light .crx-team, .sec-bg-soft .crx-team { background: #fff; }

/* ==========================================================================
   Product showcase
   --------------------------------------------------------------------------
   Products are not articles, so they stopped borrowing the article cards. A
   tab per product, then one panel with the things a buyer actually asks:
   what it is, what it delivers, what it talks to, and how to see it.
   ========================================================================== */

.section-products--showcase { padding: 70px 0; }

/* --- The tab strip ---------------------------------------------------- */

.prs-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    padding-bottom: 4px;
    /* A long catalogue scrolls rather than wrapping into a ragged block. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.prs-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #e2e7ee;
    border-radius: 40px;
    font: inherit;
    font-size: 15px;
    color: #4a5462;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.prs-tab:hover { border-color: var(--sec-brand); color: var(--sec-brand); }
.prs-tab:focus-visible { outline: 2px solid var(--sec-brand); outline-offset: 2px; }

.prs-tab.is-active {
    background: var(--sec-brand);
    border-color: var(--sec-brand);
    color: #fff;
    font-weight: 400;
}

.prs-tab-logo {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}

.prs-tab-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* On the selected pill the mark sits on brand colour; white it out so a dark
   logo does not disappear. */
.prs-tab.is-active .prs-tab-logo img { filter: brightness(0) invert(1); }

.prs-tab-flag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
}

/* --- The panel -------------------------------------------------------- */

.prs-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    background: #fff;
    border: 1px solid #e2e7ee;
    padding: clamp(26px, 3.5vw, 48px);
    animation: prsFade .3s ease both;
}

.prs-panel[hidden] { display: none; }

@keyframes prsFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .prs-panel { animation: none; }
}

.prs-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sec-brand);
    margin-bottom: 12px;
}

.prs-panel-copy h3 { font-size: clamp(26px, 2.8vw, 36px); margin: 0 0 10px; color: var(--sec-ink); }
.prs-panel-copy h3 small { font-size: 14px; color: #8a919d; margin-left: 8px; }

.prs-tagline { font-size: 18px; color: var(--sec-brand); margin: 0 0 14px; }
.prs-summary { font-size: 15.5px; line-height: 1.7; color: #4a5462; margin: 0 0 24px; }

/* --- Figures ---------------------------------------------------------- */

.prs-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    padding: 20px 0;
    margin-bottom: 22px;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
}

.prs-figures strong { display: block; font-size: 24px; font-weight: 300; color: var(--sec-brand); line-height: 1.15; }
.prs-figures span   { display: block; font-size: 12.5px; color: #7a828f; line-height: 1.45; margin-top: 4px; }

/* --- Integrations ----------------------------------------------------- */

.prs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; }

.prs-chips-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a919d;
    margin-right: 4px;
}

.prs-chip {
    font-size: 12.5px;
    color: #4a5462;
    background: var(--sec-light);
    border: 1px solid #e2e7ee;
    padding: 4px 11px;
    border-radius: 20px;
}

/* --- Actions ---------------------------------------------------------- */

.prs-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.prs-secondary { font-size: 15px; color: #4a5462; text-decoration: underline; }
.prs-secondary:hover { color: var(--sec-brand); }

/* --- Media ------------------------------------------------------------ */

.prs-panel-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sec-soft);
}

.prs-panel-media img { width: 100%; height: 100%; object-fit: cover; }

.prs-panel-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 90px;
    font-weight: 300;
    color: var(--sec-brand);
    background: linear-gradient(135deg, var(--sec-soft) 0%, #dbe9f4 100%);
}

/* --- Strip ------------------------------------------------------------ */

.section-products--strip { padding: 56px 0; }

.prs-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: #e2e7ee;
    border: 1px solid #e2e7ee;
}

.prs-strip-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: #fff;
    color: inherit;
    transition: background .18s ease;
}

.prs-strip-item:hover { background: var(--sec-soft); }

.prs-strip-mark {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--sec-soft);
    color: var(--sec-brand);
    font-size: 20px;
    font-weight: 300;
}

.prs-strip-mark img { max-width: 66%; max-height: 66%; object-fit: contain; }

.prs-strip-body { flex: 1 1 auto; min-width: 0; }
.prs-strip-body strong { display: block; font-size: 16px; font-weight: 400; color: var(--sec-ink); }
.prs-strip-body small  { display: block; font-size: 13px; color: #7a828f; line-height: 1.4; }
.prs-strip-item i { flex: 0 0 auto; color: #c2cad6; transition: transform .2s ease, color .2s ease; }
.prs-strip-item:hover i { color: var(--sec-brand); transform: translateX(4px); }

/* --- Narrower --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .section-products--showcase { padding: 48px 0; }
    .prs-panel { grid-template-columns: 1fr; }
    /* The picture is supporting; the copy is what was chosen. */
    .prs-panel-media { order: -1; aspect-ratio: 16 / 9; }
}

@media (max-width: 575.98px) {
    .prs-tab { padding: 10px 15px; font-size: 14px; }
    .prs-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Reasons / Why us
   --------------------------------------------------------------------------
   The case on the left, the claims and their evidence on the right. The
   intro sticks while the reasons scroll past it, so the question the section
   answers stays on screen while you read the answers.
   ========================================================================== */

.section-reasons { padding: 78px 0; }

.section-reasons-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}

/* --- The case --------------------------------------------------------- */

.section-reasons-intro { position: sticky; top: 96px; }

.section-reasons-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sec-brand);
    margin-bottom: 16px;
}

.section-reasons-eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
}

.section-reasons-intro h2 {
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--sec-ink);
}

.section-reasons-intro p { font-size: 17px; line-height: 1.7; color: #5c6675; margin: 0; max-width: 46ch; }

.section-reasons-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 13px 28px;
    border: 1px solid var(--sec-brand);
    border-radius: 40px;
    font-size: 15.5px;
    color: var(--sec-brand);
    transition: background .2s ease, color .2s ease;
}

.section-reasons-cta:hover { background: var(--sec-brand); color: #fff; }
.section-reasons-cta i { transition: transform .2s ease; }
.section-reasons-cta:hover i { transform: translateX(4px); }

/* --- The reasons ------------------------------------------------------ */

.section-reasons-list { list-style: none; margin: 0; padding: 0; counter-reset: reason; }

.section-reasons-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 26px;
    padding: 32px 0;
    border-top: 1px solid #e2e7ee;
}

.section-reasons-item:first-child { border-top: 0; padding-top: 0; }
.section-reasons-item:last-child { padding-bottom: 0; }

.section-reasons-list.is-unnumbered .section-reasons-item { grid-template-columns: minmax(0, 1fr); }

/* The number is the only ornament, so it carries the brand rather than a
   background panel behind every reason. */
.section-reasons-no {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--sec-brand);
    padding-top: 4px;
    min-width: 30px;
}

.section-reasons-label {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7a828f;
    margin-bottom: 8px;
}

.section-reasons-body h3 {
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.35;
    margin: 0 0 12px;
    color: var(--sec-ink);
}

.section-reasons-body p { font-size: 15.5px; line-height: 1.7; color: #5c6675; margin: 0; }

/* --- The proof -------------------------------------------------------- */

/* What separates this from a list of promises. Tinted so the eye finds it
   without the claim above having to shout. */
.section-reasons-proof {
    display: flex !important;
    align-items: flex-start;
    gap: 11px;
    margin-top: 18px !important;
    padding: 13px 16px;
    background: var(--sec-soft);
    border-left: 3px solid var(--sec-brand);
    font-size: 14.5px !important;
    color: #3c4756 !important;
}

.section-reasons-proof i { flex: 0 0 auto; margin-top: 3px; color: var(--sec-brand); font-size: 15px; }

/* --- Narrower --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .section-reasons { padding: 52px 0; }
    .section-reasons-grid { grid-template-columns: 1fr; gap: 34px; }
    /* Nothing to stick to once the columns stack. */
    .section-reasons-intro { position: static; }
}

@media (max-width: 575.98px) {
    .section-reasons-item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; }
    .section-reasons-no { padding-top: 0; }
}

/* ==========================================================================
   Appearance: making a chosen background actually show
   --------------------------------------------------------------------------
   The background control puts its colour on a .sec-wrap around the section.
   But 29 of the 37 section types sit on theme classes that paint their own
   background — .about-sec, .cta, .section-news and so on — and that inner
   paint covered the wrapper entirely, so choosing a colour appeared to do
   nothing on most sections.

   When a colour has been chosen the band belongs to the wrapper, so the
   section inside gives up its own. !important is deliberate: several theme
   rules are four classes deep (section.about-section.about-sec.pt-7.pb-7)
   and would otherwise win.
   ========================================================================== */

.sec-wrap[class*="sec-bg-"] > section,
.sec-wrap[class*="sec-bg-"] > section::before,
.sec-wrap[class*="sec-bg-"] > section::after {
    background-color: transparent !important;
}

/* A background *image* on the section is content, not chrome — a hero or a
   promo band still shows its picture; only the flat colour steps aside. */
.sec-wrap[class*="sec-bg-"] > section[style*="background-image"],
.sec-wrap[class*="sec-bg-"] > section[style*="background:"] {
    background-color: initial !important;
}

/* The wrapper is the band now, so the section's own vertical rhythm has to
   come from the spacing control rather than from the theme's margins. */
.sec-wrap[class*="sec-bg-"] > section { margin-top: 0; margin-bottom: 0; }

/* Without a spacing choice the wrapper has no padding of its own, and a
   section that relied on its own background for padding would sit flush
   against the band edges. */
.sec-wrap[class*="sec-bg-"]:not([class*="sec-pad-"]) { padding: 56px 0; }
.sec-wrap[class*="sec-bg-"]:not([class*="sec-pad-"]) > section { padding-top: 0; padding-bottom: 0; }

/* ==========================================================================
   Home: solutions band
   --------------------------------------------------------------------------
   Additions to the theme's horizontal accordion, not a replacement — the
   sideways panels are the distinctive bit and stay exactly as they were.
   ========================================================================== */

.sol-head { padding-bottom: 26px; }

.sol-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sec-brand);
    margin-bottom: 12px;
}

.sol-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }

.sol-sub { margin: 10px 0 0; color: #5c6675; font-size: 16.5px; max-width: 56ch; }

/* The number sits above the vertical label. */
.our-solutions .accordion-button .sol-no {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--sec-brand);
}

/* Only above the theme's own breakpoint, where the button is still rotated,
   does the number need un-rotating. Applying it unconditionally printed the
   number upside down on a phone, because responsive.css sets the button back
   to horizontal there. */
@media (min-width: 769px) {
    .our-solutions .accordion-button .sol-no {
        margin-bottom: 14px;
        writing-mode: horizontal-tb;
        transform: rotate(180deg);
    }
}

.our-solutions .accordion-item.active .accordion-button .sol-no { color: rgba(255, 255, 255, .7); }

/* Each active tab takes its own dark background from the theme, so anything
   inside it has to come back up in contrast. */
.our-solutions .accordion-item.active .sol-covers li { color: rgba(255, 255, 255, .92); }
.our-solutions .accordion-item.active .sol-covers i { color: rgba(255, 255, 255, .75); }

/* A collapsed panel should look like it can be opened. */
.our-solutions .accordion-item:not(.active) { cursor: pointer; }
.our-solutions .accordion-item:not(.active):hover { background: var(--sec-soft); }
.our-solutions .accordion-button:focus-visible { outline: 2px solid var(--sec-brand); outline-offset: -3px; }

/* What the solution covers, from the page's own children. */
.sol-covers {
    list-style: none;
    margin: 16px 0 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 22px;
}

.sol-covers li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    color: #4a5462;
}

.sol-covers i { flex: 0 0 auto; margin-top: 4px; font-size: 12px; color: var(--sec-brand); }

@media (max-width: 767.98px) {
    .sol-covers { grid-template-columns: 1fr; }
    .our-solutions .accordion-button .sol-no { margin-bottom: 8px; }
}

/* ==========================================================================
   Hero height
   --------------------------------------------------------------------------
   The banner was 75vh, which on a laptop left the heading crowded against
   the header and the next section peeking in underneath. Taller, with a
   floor in pixels so a short window does not squash it, and a ceiling so a
   tall one does not make the visitor scroll to reach anything.
   ========================================================================== */

.home-page .main-banner,
.home-slider .item.main-banner {
    height: clamp(560px, 88vh, 900px);
}

/* The header sits over the banner on the home page, so the content needs to
   clear it rather than start underneath. */
.home-page .main-banner-content { padding-top: 40px; }

@media (max-width: 991.98px) {
    .home-page .main-banner,
    .home-slider .item.main-banner { height: clamp(460px, 76vh, 680px); }
}

@media (max-width: 575.98px) {
    .home-page .main-banner,
    .home-slider .item.main-banner { height: clamp(420px, 70vh, 560px); }
    .home-page .main-banner-content { padding-top: 20px; }
}

/* ==========================================================================
   Home: industry list
   --------------------------------------------------------------------------
   The theme absolutely positions the icon at the left of each row and pads
   the link to clear it — but only for <i>. An industry with a real icon from
   the media library renders an <img>, which stayed in the flow and shunted
   its own label right, so rows with and without artwork did not line up.

   This has now broken twice, the same way. The second time, the selectors
   below said `a > img`, and media-img began wrapping its <img> in a <picture>
   for images with WebP variants — so the rule stopped matching on exactly the
   industries that had artwork, and those rows indented again while the rest
   stayed put. Both selectors are descendant selectors now, and
   PictureWrapperTest fails the build if a `> img` rule reappears anywhere.
   ========================================================================== */

.industry-list ul li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

/*
 * Descendant, not direct child.
 *
 * media-img wraps its <img> in a <picture> when the image has WebP variants,
 * so `a > img` stopped matching on exactly the industries that have an icon
 * uploaded — and only those. They lost their positioning and pushed their own
 * row across, while the rows using the fallback font icon stayed put. The
 * result was a list where the first item in each column was indented and the
 * rest were not.
 */
.industry-list ul li a i,
.industry-list ul li a img.industry-home-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* One box for both, so a 512px PNG and a font icon occupy the same room. */
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    font-size: 15px;
}

/*
   The theme only clears space for the absolute icon inside
   @media (max-width: 767px) — above that the label started at the left edge
   and the icon sat on top of the first two characters, which is what the
   screenshot showed. The padding belongs at every width.

   The flex gap is zeroed with it: the icon is out of flow, so a gap would
   only add to this padding.
*/
.industry-list ul li a {
    padding-left: 48px;
    gap: 0;
    min-height: 34px;
}

/*
   The theme gives its lorry fallback a brand disc but nothing else, so the
   neutral mark that replaced it rendered as a bare glyph on the rows without
   their own icon. Both marks now get the same disc.
*/
.industry-list ul li a i {
    background: #4594bf;
    color: #fff;
    border-radius: 50%;
}

.industry-list ul li a img.industry-home-icon {
    background: #4594bf;
    border-radius: 50%;
    padding: 6px;
}

/* The wrapper itself must take no space and impose no layout of its own. */
.industry-list ul li a picture {
    display: contents;
}

/* ==========================================================================
   Home: the overhanging banner cards
   --------------------------------------------------------------------------
   .banner-info sits 30px below its banner and .banner2-right 40px above its
   own — both with position: relative, which moves them visually without
   reserving any space. Whatever section follows started right underneath, so
   on a phone (where the card is 70% wide and the text wraps to four or five
   lines) the card landed on the next heading.

   Reserving the overhang as margin on the band is the whole fix; the cards
   themselves are untouched.
   ========================================================================== */

/*
   The band was 80px of top padding plus whatever the card happened to be, so
   the artwork showed as a thin strip and the card covered most of it. A
   min-height gives the image room to read as an image; the card still sits at
   the bottom-left and still overhangs by 30px.
*/
.banner-sec {
    min-height: 420px;
    padding-top: 170px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 30px;
}

/* The container is the flex item now, so it has to keep the full width it
   had when the band was a plain block. */
.banner-sec > .container { width: 100%; }

@media (max-width: 991.98px) {
    .banner-sec { min-height: 340px; padding-top: 130px; }
}

@media (max-width: 575.98px) {
    .banner-sec { min-height: 280px; padding-top: 96px; }
}

/* The highlight banner pulls its card upward instead, so the clearance
   belongs above it. */
.banner-sec2 { margin-top: 40px; }

@media (max-width: 991.98px) {
    .banner-sec { margin-bottom: 44px; }
    .banner-sec2 { margin-top: 52px; }
}

@media (max-width: 767.98px) {
    /* Nearly full width on a phone: at 70% the copy wrapped to five lines and
       made the overhang far deeper than the 30px the desktop assumes. */
    .banner-info {
        width: calc(100% - 32px);
        margin-inline: auto;
        padding: 26px 22px;
        bottom: -22px;
    }

    .banner-info h3 { font-size: 20px; line-height: 30px; }

    .banner-sec { margin-bottom: 40px; }
}

/* ==========================================================================
   Card Rail
   --------------------------------------------------------------------------
   Dark cards on a colour band; the one under the cursor turns light and shows
   its image. Native scroll-snap does the scrolling, so the row works with the
   script blocked and behaves like a list on a touch screen.
   ========================================================================== */

.rail-sec {
    /*
       Brand rather than the reference site's purple, and the band is the
       deeper of the two: the row reads as brand tiles on a dark field. The
       buttons and the card chevron resolve from these as well, so the whole
       section moves together.
    */
    --rail-band: var(--sec-light);
    --rail-card: #0070ad;
    --rail-active: #ffffff;
    --rail-active-ink: #0a2f4d;
    /* What reads on the band, which is light by default. The cards carry
       their own white type — they are brand-filled whatever the band is. */
    --rail-ink: var(--sec-ink);
    --rail-body: #4a5462;
    --rail-gap: 22px;
    --rail-w: 300px;

    padding: clamp(56px, 8vw, 96px) 0;
    background: var(--rail-band);
    color: var(--rail-body);
    overflow: hidden;
}

.rail-head { max-width: 60ch; margin-bottom: clamp(32px, 5vw, 56px); }
.rail-head h2 { color: var(--rail-ink); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; margin: 0 0 14px; }
.rail-head p  { color: var(--rail-body); font-size: 17px; margin: 0; }

/* --- The track ---------------------------------------------------------- */

/*
   Starts at the container's left edge and runs to the window's right edge, so
   the last visible card is cut off rather than ending in a tidy gap. The cut
   is what tells you there is more to scroll.
*/
.rail-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-left: max(24px, calc((100vw - 1320px) / 2 + 12px));
    padding-bottom: 4px;
}

.rail-track::-webkit-scrollbar { display: none; }
.rail-track:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.rail-strip {
    display: flex;
    gap: var(--rail-gap);
    /* Trailing space so the final card can reach the left edge when snapped. */
    padding-right: 24px;
    width: max-content;
}

/* --- Cards -------------------------------------------------------------- */

.rail-card {
    position: relative;
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    min-height: 430px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background: var(--rail-card);
    color: #fff;
    overflow: hidden;
    transition: background .3s ease, color .3s ease;
}

.rail-card-body { padding: 30px 28px 20px; }

.rail-card h3 {
    color: inherit;
    font-size: 22px;
    line-height: 1.28;
    margin: 0 0 12px;
}

.rail-card p {
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    transition: color .3s ease;
}

/* --- Active ------------------------------------------------------------- */
/* Hover on a pointer, and the nearest-to-the-edge card on touch, where the
   script adds .is-active because there is no hover to work with. */

.rail-card:hover,
.rail-card:focus-visible,
.rail-card.is-active {
    background: var(--rail-active);
    color: var(--rail-active-ink);
}

.rail-card:hover p,
.rail-card:focus-visible p,
.rail-card.is-active p { color: #4a5462; }

.rail-card:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* --- Media -------------------------------------------------------------- */

/*
   The image sits at the foot of the card and is clipped to a diagonal, which
   is what stops it reading as a photo bolted onto a box. Hidden until active,
   so eight photographs are not competing at once.
*/
.rail-card-media {
    margin-top: auto;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .34s ease, opacity .26s ease;
}

.rail-card:hover .rail-card-media,
.rail-card:focus-visible .rail-card-media,
.rail-card.is-active .rail-card-media { height: 250px; opacity: 1; }

.rail-card-media img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}

/* --- The chevron -------------------------------------------------------- */

.rail-card-go {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    /* A pale plate with a brand mark. The card behind it is brand now, so
       a brand-filled plate would disappear into it. */
    background: #eef1f5;
    color: var(--sec-brand);
    font-size: 14px;
    transition: background .25s ease, transform .25s ease;
}

/* On the active (white) card the plate fills with brand, so the mark stays
   the strongest thing in the corner either way round. */
.rail-card:hover .rail-card-go,
.rail-card.is-active .rail-card-go {
    background: var(--sec-brand);
    color: #fff;
    transform: translateX(3px);
}

/* --- Foot: progress and buttons ----------------------------------------- */

.rail-foot {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: clamp(32px, 4vw, 48px);
}

.rail-progress {
    flex: 1 1 auto;
    height: 3px;
    background: rgba(11, 27, 40, .14);
    border-radius: 2px;
    overflow: hidden;
}

.rail-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--sec-brand);
    border-radius: 2px;
    transition: width .18s linear;
}

.rail-nav { flex: 0 0 auto; display: flex; gap: 10px; }

.rail-btn {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(11, 27, 40, .1);
    color: var(--sec-ink);
    font-size: 14px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.rail-btn:hover:not(:disabled) { background: rgba(11, 27, 40, .18); }
.rail-btn.is-primary { background: var(--sec-brand); color: #fff; }
.rail-btn.is-primary:hover:not(:disabled) { background: var(--sec-brand-dark); }

/* A button at the end of its travel should say so rather than look live. */
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Appearance overrides ----------------------------------------------- */
/* The section paints its own band, so the builder's background control has to
   win over it rather than sit behind it. */

.sec-wrap[class*="sec-bg-"] > .rail-sec { background: transparent; }
.sec-bg-light .rail-sec, .sec-bg-soft .rail-sec { --rail-card: #0a2f4d; }

@media (prefers-reduced-motion: reduce) {
    .rail-card, .rail-card p, .rail-card-media, .rail-card-go, .rail-progress span { transition: none; }
    .rail-card:hover .rail-card-go, .rail-card.is-active .rail-card-go { transform: none; }
}

@media (max-width: 1399.98px) {
    .rail-track { padding-left: max(24px, calc((100vw - 1140px) / 2 + 12px)); }
}

@media (max-width: 1199.98px) {
    .rail-track { padding-left: max(20px, calc((100vw - 960px) / 2 + 12px)); }
}

@media (max-width: 991.98px) {
    .rail-sec { --rail-w: 268px; }
    .rail-track { padding-left: max(18px, calc((100vw - 720px) / 2 + 12px)); }
    .rail-card { min-height: 380px; }
    .rail-card:hover .rail-card-media,
    .rail-card.is-active .rail-card-media { height: 200px; }
    .rail-card-media img { height: 200px; }
}

@media (max-width: 575.98px) {
    /* Almost the full width: a 268px card beside a sliver of the next one is
       cramped on a phone, and the cut edge already says "scrollable". */
    .rail-sec { --rail-w: min(80vw, 300px); --rail-gap: 14px; }
    .rail-track { padding-left: 16px; }
    .rail-strip { padding-right: 16px; }
    .rail-card-body { padding: 24px 22px 16px; }
    .rail-card h3 { font-size: 20px; }
    .rail-foot { gap: 16px; }
    .rail-btn { width: 42px; height: 42px; }
}

/* ==========================================================================
   Page Banner
   --------------------------------------------------------------------------
   Six styles, each with a light and a dark treatment. All drawn in CSS: a
   page gets a considered header with no artwork to source, and nothing extra
   to download.

   Every style sets the same four custom properties, so the layout below is
   written once and the styles only supply colour.
   ========================================================================== */

.pbn {
    --pbn-bg: #0a2f4d;
    --pbn-ink: #ffffff;
    --pbn-body: rgba(255, 255, 255, .86);
    --pbn-accent: rgba(255, 255, 255, .74);

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--pbn-bg);
    color: var(--pbn-body);
}

/* An uploaded image sits under the style, which becomes a wash over it —
   otherwise the text is at the mercy of whatever was uploaded. */
.pbn.has-image {
    background-image: var(--pbn-image);
    background-size: cover;
    background-position: center;
}

.pbn.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pbn-bg);
    opacity: .82;
}

.pbn .container { position: relative; z-index: 1; }
.pbn-art { position: absolute; inset: 0; pointer-events: none; }

/* --- Height and alignment ----------------------------------------------- */

.pbn--compact { padding: clamp(40px, 5vw, 62px) 0; }
.pbn--medium  { padding: clamp(64px, 9vw, 104px) 0; }
.pbn--tall    { padding: clamp(88px, 13vw, 156px) 0; }

.pbn-inner { max-width: 720px; }
.pbn--center .pbn-inner { max-width: 780px; margin: 0 auto; text-align: center; }

/* --- Type --------------------------------------------------------------- */

.pbn-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pbn-accent);
    margin-bottom: 16px;
}

.pbn-title {
    color: var(--pbn-ink);
    font-size: clamp(30px, 4.2vw, 50px);
    line-height: 1.15;
    margin: 0;
}

.pbn-sub {
    color: var(--pbn-body);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.65;
    margin: 16px 0 0;
    max-width: 56ch;
}

.pbn--center .pbn-sub { margin-left: auto; margin-right: auto; }

.pbn-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
    padding: 13px 26px;
    border-radius: 3px;
    font-size: 15.5px;
    background: var(--pbn-ink);
    color: var(--pbn-bg);
    transition: transform .2s ease, opacity .2s ease;
}

.pbn-btn:hover { color: var(--pbn-bg); opacity: .9; }
.pbn-btn i { font-size: 13px; transition: transform .2s ease; }
.pbn-btn:hover i { transform: translateX(3px); }
.pbn-btn:focus-visible { outline: 2px solid var(--pbn-ink); outline-offset: 3px; }

/* ==========================================================================
   1. Aurora — diagonal brand gradient with a soft glow
   ========================================================================== */

.pbn--aurora { --pbn-bg: linear-gradient(135deg, #0a2f4d 0%, #0070ad 58%, #1892d0 100%); }

.pbn--aurora .pbn-art {
    background: radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%);
}

.pbn--aurora.pbn--tone-light {
    --pbn-bg: linear-gradient(135deg, #e8f2fa 0%, #d3e8f7 58%, #eaf4fb 100%);
    --pbn-ink: #0a2f4d;
    --pbn-body: #3f5567;
    --pbn-accent: #0070ad;
}

.pbn--aurora.pbn--tone-light .pbn-art {
    background: radial-gradient(circle at 82% 12%, rgba(0, 112, 173, .16), rgba(0, 112, 173, 0) 46%);
}

/* ==========================================================================
   2. Mesh — two brand tones blended from opposite corners
   ========================================================================== */

.pbn--mesh { --pbn-bg: #062a45; }

.pbn--mesh .pbn-art {
    background:
        radial-gradient(circle at 12% 88%, rgba(0, 112, 173, .78), transparent 52%),
        radial-gradient(circle at 88% 14%, rgba(24, 146, 208, .58), transparent 50%),
        radial-gradient(circle at 52% 52%, rgba(11, 26, 74, .55), transparent 62%);
}

.pbn--mesh.pbn--tone-light {
    --pbn-bg: #f1f6fb;
    --pbn-ink: #062a45;
    --pbn-body: #45596b;
    --pbn-accent: #0070ad;
}

.pbn--mesh.pbn--tone-light .pbn-art {
    background:
        radial-gradient(circle at 12% 88%, rgba(0, 112, 173, .2), transparent 52%),
        radial-gradient(circle at 88% 14%, rgba(24, 146, 208, .18), transparent 50%);
}

/* ==========================================================================
   3. Grid — flat brand with a fine engineering grid
   ========================================================================== */

.pbn--grid { --pbn-bg: #0070ad; }

/* The mask fades the grid out towards the text, so it reads as texture
   rather than as graph paper the heading is sitting on. */
.pbn--grid .pbn-art {
    background-image:
        linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(105deg, transparent 22%, #000 68%);
    mask-image: linear-gradient(105deg, transparent 22%, #000 68%);
}

.pbn--grid.pbn--tone-light {
    --pbn-bg: #eef5fa;
    --pbn-ink: #0a2f4d;
    --pbn-body: #45596b;
    --pbn-accent: #0070ad;
}

.pbn--grid.pbn--tone-light .pbn-art {
    background-image:
        linear-gradient(rgba(0, 112, 173, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 112, 173, .13) 1px, transparent 1px);
}

/* ==========================================================================
   4. Rays — brand with a swept light beam
   ========================================================================== */

.pbn--rays { --pbn-bg: #08355a; }

.pbn--rays .pbn-art {
    background:
        linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .12) 46%, transparent 54%),
        linear-gradient(100deg, transparent 58%, rgba(24, 146, 208, .34) 68%, transparent 78%),
        linear-gradient(160deg, rgba(0, 112, 173, .5), transparent 62%);
}

.pbn--rays.pbn--tone-light {
    --pbn-bg: #edf4fa;
    --pbn-ink: #08355a;
    --pbn-body: #45596b;
    --pbn-accent: #0070ad;
}

.pbn--rays.pbn--tone-light .pbn-art {
    background:
        linear-gradient(100deg, transparent 38%, rgba(0, 112, 173, .1) 46%, transparent 54%),
        linear-gradient(160deg, rgba(0, 112, 173, .16), transparent 62%);
}

/* ==========================================================================
   5. Ink — near-black with a brand edge
   ========================================================================== */

.pbn--ink { --pbn-bg: #0a0a10; }

.pbn--ink .pbn-art {
    background:
        linear-gradient(90deg, rgba(0, 112, 173, .9) 0 5px, transparent 5px),
        radial-gradient(circle at 92% 82%, rgba(0, 112, 173, .3), transparent 46%);
}

/* Ink's light treatment is a pale grey with the same brand edge, so the two
   read as the same design rather than two different banners. */
.pbn--ink.pbn--tone-light {
    --pbn-bg: #f4f5f7;
    --pbn-ink: #0a0a10;
    --pbn-body: #4a5462;
    --pbn-accent: #0070ad;
}

.pbn--ink.pbn--tone-light .pbn-art {
    background:
        linear-gradient(90deg, rgba(0, 112, 173, .9) 0 5px, transparent 5px),
        radial-gradient(circle at 92% 82%, rgba(0, 112, 173, .1), transparent 46%);
}

/* ==========================================================================
   6. Paper — pale surface with a brand rule
   --------------------------------------------------------------------------
   Deliberately has no dark treatment: it is defined by being pale, and the
   view forces tone to light so it can never come out black on black.
   ========================================================================== */

.pbn--paper {
    --pbn-bg: #f7f8fa;
    --pbn-ink: #0b1b28;
    --pbn-body: #4a5462;
    --pbn-accent: #0070ad;
    border-bottom: 1px solid #e4e8ee;
}

.pbn--paper .pbn-art {
    background: linear-gradient(90deg, #0070ad 0 74px, transparent 74px);
    top: auto;
    bottom: 0;
    height: 3px;
}

/* ==========================================================================
   Tone: auto
   --------------------------------------------------------------------------
   "auto" means follow the visitor. In light mode that is the light treatment
   of each style; the dark rules further up are the default, so only the light
   case needs restating here.
   ========================================================================== */

html:not([data-theme="dark"]) .pbn--tone-auto.pbn--aurora {
    --pbn-bg: linear-gradient(135deg, #0a2f4d 0%, #0070ad 58%, #1892d0 100%);
}

@media (prefers-reduced-motion: reduce) {
    .pbn-btn, .pbn-btn i { transition: none; }
    .pbn-btn:hover i { transform: none; }
}

@media (max-width: 767.98px) {
    .pbn--tall { padding: clamp(64px, 16vw, 96px) 0; }
    .pbn-sub { max-width: none; }
    .pbn-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Text follows the background
   --------------------------------------------------------------------------
   The appearance control lets an editor put any section on any of four
   surfaces. Until now the background changed and the type did not, so picking
   "light" under a section that draws white text produced white-on-white — the
   card rail's heading being the visible case.

   Four tokens describe "what reads on this surface". They are declared on the
   wrapper, so anything inside can ask for the right ink without knowing which
   surface it landed on.
   ========================================================================== */

.sec-wrap {
    --on-ink: var(--sec-ink);
    --on-body: #4a5462;
    --on-muted: #6a7382;
    --on-line: #e2e8f0;
}

/* A brand or dark surface reverses all four. */
.sec-wrap.sec-bg-brand,
.sec-wrap.sec-bg-dark {
    --on-ink: #ffffff;
    --on-body: rgba(255, 255, 255, .88);
    --on-muted: rgba(255, 255, 255, .7);
    --on-line: rgba(255, 255, 255, .24);
}

/* Light and soft keep the defaults, but must be stated: a section that paints
   itself dark — the rail — needs to know it is now on a light surface. */
.sec-wrap.sec-bg-light,
.sec-wrap.sec-bg-soft,
.sec-wrap.sec-bg-white {
    --on-ink: var(--sec-ink);
    --on-body: #4a5462;
    --on-muted: #6a7382;
    --on-line: #e2e8f0;
}

/* --- Card Rail on a chosen surface -------------------------------------- */
/*
   The rail paints its own light band. When an editor picks a background the
   band steps aside for it, so everything drawn against the band re-inks from
   the wrapper's tokens — otherwise the heading keeps a colour chosen for a
   surface that is no longer there.

   The cards are deliberately left alone: they are brand-filled with white
   type on every surface, which is what makes them read as cards.
*/
.sec-wrap[class*="sec-bg-"] > .rail-sec { color: var(--on-body); }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-head h2 { color: var(--on-ink); }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-head p { color: var(--on-body); }

.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-progress { background: var(--on-line); }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-progress span { background: var(--on-ink); }

.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-btn { background: var(--on-line); color: var(--on-ink); }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-btn.is-primary {
    background: var(--sec-brand);
    color: #fff;
}

/*
   A card is a link, and the surface rules underline links so they are
   distinguishable on a coloured band. Here the whole tile is the target and
   the underline just scored every line of copy through.
*/
.rail-card,
.rail-card:hover,
.rail-card h3,
.rail-card p,
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card,
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card:hover { text-decoration: none; }

/* The cards keep their own type on every surface. */
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card { color: #fff; }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card h3 { color: #fff; }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card p { color: rgba(255, 255, 255, .78); }

.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card:hover,
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card.is-active { color: var(--rail-active-ink); }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card:hover h3,
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card.is-active h3 { color: var(--rail-active-ink); }
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card:hover p,
.sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card.is-active p { color: #4a5462; }

/* The cards themselves stay dark on every surface — that contrast is the
   design, and it works against all four. */

/* --- Everything else on a chosen surface --------------------------------- */
/*
   The generic pass. Section partials use their own classes for captions,
   rules and meta, which the brand/dark block further up never reached — so a
   caption stayed #6a7382 on a brand band and all but vanished.
*/
.sec-wrap.sec-bg-brand [class$="-eyebrow"],
.sec-wrap.sec-bg-dark  [class$="-eyebrow"],
.sec-wrap.sec-bg-brand [class$="-kicker"],
.sec-wrap.sec-bg-dark  [class$="-kicker"],
.sec-wrap.sec-bg-brand [class$="-head"],
.sec-wrap.sec-bg-dark  [class$="-head"],
.sec-wrap.sec-bg-brand [class$="-sub"],
.sec-wrap.sec-bg-dark  [class$="-sub"],
.sec-wrap.sec-bg-brand [class$="-summary"],
.sec-wrap.sec-bg-dark  [class$="-summary"],
.sec-wrap.sec-bg-brand [class$="-standfirst"],
.sec-wrap.sec-bg-dark  [class$="-standfirst"] {
    color: var(--on-muted);
}

/* A hairline drawn for a white page is invisible on brand. */
.sec-wrap.sec-bg-brand hr,
.sec-wrap.sec-bg-dark hr { border-color: var(--on-line); }

/* ==========================================================================
   Our expertise
   --------------------------------------------------------------------------
   Was a photograph with a caption under it and a small arrow that was the
   only clickable part. Now the card is the link, the image is a band the
   number sits against, and the whole tile responds — so the target matches
   what looks like a target.
   ========================================================================== */

.xp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.xp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5eaf0;
    color: var(--sec-ink);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.xp-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 22px 48px rgba(11, 27, 40, .16);
    color: var(--sec-ink);
}

.xp-card:focus-visible { outline: 3px solid var(--sec-brand); outline-offset: 2px; }

/* --- The number --------------------------------------------------------- */

/*
   Sits over the seam between the image and the body, which ties the two
   together rather than leaving a caption floating under a photo.
*/
.xp-card-no {
    position: absolute;
    top: 152px;
    left: 0;
    z-index: 2;
    padding: 7px 14px;
    background: var(--sec-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
}

/* --- The image ---------------------------------------------------------- */

.xp-card-media {
    display: block;
    height: 180px;
    overflow: hidden;
    background: var(--sec-soft);
}

.xp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.xp-card:hover .xp-card-media img { transform: scale(1.06); }

/* --- The body ----------------------------------------------------------- */

.xp-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 30px 24px 24px;
}

.xp-card-title {
    display: block;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 300;
    color: var(--sec-ink);
    margin-bottom: 10px;
    transition: color .2s ease;
}

.xp-card:hover .xp-card-title { color: var(--sec-brand); }

.xp-card-copy {
    display: block;
    font-size: 14.8px;
    line-height: 1.68;
    color: #5c6675;
    /* Pushes the link to the foot, so four cards of unequal copy still line
       their calls to action up. */
    margin-bottom: 22px;
    flex: 1 1 auto;
}

.xp-card-go {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--sec-brand);
}

.xp-card-go i { font-size: 12px; transition: transform .25s ease; }
.xp-card:hover .xp-card-go i { transform: translateX(5px); }

/* A rule that draws itself on hover, rather than a border that was always
   there doing nothing. */
.xp-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--sec-brand);
    transition: width .32s ease;
}

.xp-card:hover::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .xp-card, .xp-card-media img, .xp-card-go i, .xp-card::after, .xp-card-title { transition: none; }
    .xp-card:hover { transform: none; }
    .xp-card:hover .xp-card-media img { transform: none; }
    .xp-card:hover .xp-card-go i { transform: none; }
    .xp-card:hover::after { width: 100%; }
}

@media (max-width: 1199.98px) {
    .xp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 575.98px) {
    .xp-grid { grid-template-columns: 1fr; }
    .xp-card-media { height: 200px; }
    .xp-card-no { top: 172px; }
}

/* On a chosen surface the card and its type re-ink with everything else. */
.sec-wrap.sec-bg-brand .xp-card,
.sec-wrap.sec-bg-dark .xp-card { background: rgba(255, 255, 255, .06); border-color: var(--on-line); }
.sec-wrap.sec-bg-brand .xp-card-title,
.sec-wrap.sec-bg-dark .xp-card-title { color: var(--on-ink); }
.sec-wrap.sec-bg-brand .xp-card-copy,
.sec-wrap.sec-bg-dark .xp-card-copy { color: var(--on-body); }

/* ==========================================================================
   Page hero
   --------------------------------------------------------------------------
   Every inner page — services, solutions, industries, insights, products,
   careers, CMS and builder pages — draws the same .page-title-banner markup.
   Restyling that one class redesigns all twenty rather than editing twenty
   templates and missing one.

   Related to the thank-you hero and deliberately not the same: that page is a
   confirmation and gets a full brand gradient with a drawn tick. This one has
   to sit under a photograph most of the time, so it is a directional brand
   wash with an accent rule and a heading that hangs off it.
   ========================================================================== */

.page-title-banner {
    min-height: 380px;
    padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px);
    /* The theme's flat grey scrim is replaced by a directional brand wash: it
       darkens where the type sits and lets the photograph through on the far
       side, instead of dimming the whole image evenly. */
    background-color: #08243b;
    overflow: hidden;
}

.page-title-banner::before {
    background: linear-gradient(100deg,
        rgba(8, 36, 59, .94) 0%,
        rgba(8, 47, 77, .86) 38%,
        rgba(0, 112, 173, .52) 68%,
        rgba(0, 112, 173, .22) 100%) !important;
    opacity: 1 !important;
    /* The theme sends this behind the section with z-index:-1, which puts it
       under the background image on some stacking contexts. */
    z-index: 0 !important;
}

/* A soft glow off the top-right corner, matching the language of the other
   banner styles without repeating the thank-you page's centred one. */
.page-title-banner::after {
    content: "";
    position: absolute;
    top: -35%;
    right: -8%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
    z-index: 0;
}

.page-title-banner > .container { position: relative; z-index: 1; }

/* The accent rule the heading hangs off. Drawn on the container so it lines
   up with the text rather than the viewport. */
.page-title-banner h1 {
    position: relative;
    padding-top: 22px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.16;
    max-width: 20ch;
}

.page-title-banner h1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 3px;
    background: #ffffff;
}

.page-title-banner p {
    /* The theme's 50% is unreadable at 1600px and cramped at 900px. */
    width: auto;
    max-width: 58ch;
    margin-top: 18px;
    font-size: clamp(16px, 1.4vw, 18.5px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
}

/* A page with a video hero already dims itself; a second wash would bury it. */
.page-title-banner:has(.dynamic-hero-video)::before { opacity: .82 !important; }

@media (max-width: 767.98px) {
    .page-title-banner { min-height: 280px; }
    .page-title-banner h1 { max-width: none; }
    .page-title-banner::after { width: 360px; height: 360px; }
}

/* ==========================================================================
   Custom section background
   --------------------------------------------------------------------------
   The colour itself arrives as --sec-custom-bg on the wrapper, because it is
   per-section data no stylesheet can know. What reads on it is decided in PHP
   from the colour's luminance and applied as .sec-on-dark / .sec-on-light, so
   an editor cannot pick navy and get black text on it.
   ========================================================================== */

.sec-bg-custom { background: var(--sec-custom-bg, var(--sec-light)); }

/* Sections paint their own bands; the chosen colour has to win over them, the
   same way the preset backgrounds do. */
.sec-wrap.sec-bg-custom > section,
.sec-wrap.sec-bg-custom > section::before,
.sec-wrap.sec-bg-custom > section::after { background-color: transparent !important; }

.sec-wrap.sec-bg-custom > section { margin-top: 0; margin-bottom: 0; }
.sec-wrap.sec-bg-custom:not([class*="sec-pad-"]) { padding: 56px 0; }

/* --- Ink on a dark custom colour ---------------------------------------- */

.sec-wrap.sec-on-dark {
    --on-ink: #ffffff;
    --on-body: rgba(255, 255, 255, .88);
    --on-muted: rgba(255, 255, 255, .7);
    --on-line: rgba(255, 255, 255, .24);
}

.sec-wrap.sec-on-dark,
.sec-wrap.sec-on-dark h1, .sec-wrap.sec-on-dark h2, .sec-wrap.sec-on-dark h3,
.sec-wrap.sec-on-dark h4, .sec-wrap.sec-on-dark h5, .sec-wrap.sec-on-dark h6 { color: var(--on-ink); }

.sec-wrap.sec-on-dark p,
.sec-wrap.sec-on-dark li,
.sec-wrap.sec-on-dark td { color: var(--on-body); }

.sec-wrap.sec-on-dark [class$="-eyebrow"],
.sec-wrap.sec-on-dark [class$="-kicker"],
.sec-wrap.sec-on-dark [class$="-sub"],
.sec-wrap.sec-on-dark [class$="-summary"],
.sec-wrap.sec-on-dark [class$="-standfirst"] { color: var(--on-muted); }

.sec-wrap.sec-on-dark a:not([class*="btn"]) { color: #fff; text-decoration: underline; }
.sec-wrap.sec-on-dark hr { border-color: var(--on-line); }

/* An outline button drawn for a white page disappears on a dark colour. */
.sec-wrap.sec-on-dark .global-btn2,
.sec-wrap.sec-on-dark .global-btn4 { color: #fff !important; border-color: #fff; }
.sec-wrap.sec-on-dark .global-btn2 i,
.sec-wrap.sec-on-dark .global-btn4 i { color: #fff; }

/* --- Ink on a light custom colour --------------------------------------- */

.sec-wrap.sec-on-light {
    --on-ink: var(--sec-ink);
    --on-body: #4a5462;
    --on-muted: #6a7382;
    --on-line: #e2e8f0;
}

.sec-wrap.sec-on-light,
.sec-wrap.sec-on-light h1, .sec-wrap.sec-on-light h2, .sec-wrap.sec-on-light h3,
.sec-wrap.sec-on-light h4, .sec-wrap.sec-on-light h5, .sec-wrap.sec-on-light h6 { color: var(--on-ink); }

.sec-wrap.sec-on-light p,
.sec-wrap.sec-on-light li,
.sec-wrap.sec-on-light td { color: var(--on-body); }

/* ==========================================================================
   Home intro
   --------------------------------------------------------------------------
   Two columns instead of one wide block. The old layout ran the opening copy
   at roughly 83 characters a line, which is past the point where the eye
   loses its place returning to the left margin.
   ========================================================================== */

.intro-sec { padding: clamp(56px, 8vw, 96px) 0; }

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.intro-lead { position: relative; }

/* Sticky, so the statement stays beside its own copy on a tall screen rather
   than scrolling away from it. */
@media (min-width: 992px) {
    .intro-lead { position: sticky; top: calc(var(--crumb-h, 46px) + 32px); }
}

.intro-rule {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--sec-brand);
    margin-bottom: 22px;
}

.intro-lead h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.18;
    margin: 0;
    /* The heading is the shorter measure of the two, which is what makes the
       asymmetry read as deliberate. */
    max-width: 16ch;
}

.intro-body {
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.8;
    color: #4a5462;
    max-width: 62ch;
}

.intro-body > :first-child { margin-top: 0; }
.intro-body > :last-child { margin-bottom: 0; }
.intro-body p { margin-bottom: 20px; }

/* A first paragraph that sets itself apart, without needing an editor to mark
   it up differently from the rest. */
.intro-body > p:first-of-type {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.7;
    color: var(--sec-ink);
}

.intro-body ul { margin: 0 0 20px; padding-left: 20px; }
.intro-body li { margin-bottom: 8px; }

@media (max-width: 991.98px) {
    .intro-grid { grid-template-columns: 1fr; gap: 24px; }
    .intro-lead h2 { max-width: 22ch; }
    .intro-body { max-width: none; }
}

/* The image_text standfirst: a line between the heading and the body. */
.section-imgtext-sub {
    font-size: clamp(16px, 1.4vw, 18.5px);
    line-height: 1.65;
    color: var(--on-body, #4a5462);
    margin: -6px 0 18px;
    max-width: 52ch;
}

/* ==========================================================================
   Home highlight banner
   --------------------------------------------------------------------------
   The three parts — heading, photograph, card — were on one band without
   being one thing: the card sat in empty space to the right of an image it
   did not touch, and the heading floated above both.

   The card now overlaps the image and the band is sized by its contents, so
   there is no dead purple to fill.
   ========================================================================== */

.hbn {
    padding: clamp(56px, 8vw, 96px) 0;
    /* The theme paints .banner-sec2 a fixed purple. Keeping it as the default
       means the builder's background control can still override it. */
    overflow: hidden;
}

.hbn-head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 34ch; }

.hbn-rule {
    display: block;
    width: 56px;
    height: 3px;
    background: rgba(255, 255, 255, .55);
    margin-bottom: 20px;
}

.hbn-head h2 {
    color: #fff;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.18;
    margin: 0;
}

/* --- The pair ------------------------------------------------------------ */

.hbn-body {
    display: grid;
    /* The card overlaps the last quarter of the image rather than sitting
       beside it — one column, two overlapping placements. */
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    align-items: center;
}

/*
   Both sit in the same grid cell, so paint order decides which is on top.
   Without these the image — later in the stacking order once it creates its
   own context via overflow — covered the left edge of the card and ate the
   first two characters of every line.
*/
.hbn-media {
    grid-column: 1 / 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
}

.hbn-media img {
    display: block;
    width: 100%;
    height: clamp(320px, 34vw, 460px);
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

.hbn:hover .hbn-media img { transform: scale(1.03); }

.hbn-card {
    grid-column: 2 / 3;
    grid-row: 1;
    position: relative;
    z-index: 2;
    /* Pulls back over the image; the negative margin is what makes the two
       overlap rather than abut. */
    margin-left: -80px;
    padding: clamp(30px, 3vw, 44px);
    background: #fff;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .28);
}

/* With no image the card has nothing to overlap and takes the full width. */
.hbn-card.is-alone { grid-column: 1 / -1; margin-left: 0; max-width: 720px; }

.hbn-lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: var(--sec-ink);
    margin: 0 0 14px;
}

.hbn-copy { font-size: 15.5px; line-height: 1.7; color: #4a5462; }
.hbn-copy > :first-child { margin-top: 0; }
.hbn-copy > :last-child { margin-bottom: 0; }
.hbn-copy p { margin-bottom: 12px; }

.hbn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    font-size: 15.5px;
    color: var(--sec-brand);
}

.hbn-cta i { font-size: 13px; transition: transform .25s ease; }
.hbn-cta:hover { color: var(--sec-brand-dark); }
.hbn-cta:hover i { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
    .hbn-media img, .hbn-cta i { transition: none; }
    .hbn:hover .hbn-media img { transform: none; }
    .hbn-cta:hover i { transform: none; }
}

@media (max-width: 991.98px) {
    /* Stacked: at this width the overlap leaves the card about 200px wide,
       which is four words a line. */
    .hbn-body { grid-template-columns: 1fr; }
    .hbn-media { grid-row: 1; grid-column: 1; }
    .hbn-card { grid-row: 2; grid-column: 1; z-index: 2; margin-left: 0; margin-top: -48px; margin-right: clamp(0px, 6vw, 60px); }
    .hbn-media img { height: clamp(240px, 42vw, 340px); }
}

@media (max-width: 575.98px) {
    .hbn-card { margin-top: -28px; margin-right: 0; }
}

/* On a chosen surface the heading re-inks with everything else. */
.sec-wrap[class*="sec-bg-"] > .hbn .hbn-head h2 { color: var(--on-ink); }
.sec-wrap[class*="sec-bg-"] > .hbn .hbn-rule { background: var(--on-line); }

/* A product card's title and a search hit are h2 for the document outline —
   they sit directly under the page heading — but they are card-sized, not
   section-sized. */
.prd-card-naming h2 { font-size: 20px; line-height: 1.3; margin: 0; }
.srch-hit h2 { font-size: 19px; line-height: 1.35; margin: 0 0 8px; }

/* ==========================================================================
   Downloads
   --------------------------------------------------------------------------
   The whole row is the target, and it says what the file is before it is
   clicked. A 40MB PSD behind a link reading only "Download" is how someone
   ends up with a stalled transfer on a phone.
   ========================================================================== */

.dl-sec { padding: clamp(48px, 6vw, 80px) 0; }

.dl-head { max-width: 60ch; margin-bottom: clamp(24px, 3vw, 38px); }
.dl-head h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; margin: 0 0 10px; }
.dl-head p  { font-size: 16.5px; line-height: 1.65; color: #5c6675; margin: 0; }

.dl-list { list-style: none; margin: 0; padding: 0; }

.dl-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* --- The row ------------------------------------------------------------ */

.dl-link {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e5eaf0;
    color: var(--sec-ink);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* In a list the rows sit flush, so only the last keeps its bottom border. */
.dl-list--list .dl-item + .dl-item .dl-link { border-top: 0; }

.dl-link:hover {
    color: var(--sec-ink);
    border-color: var(--sec-brand);
    box-shadow: 0 10px 30px rgba(11, 27, 40, .1);
    /* Lifted above its neighbours so the full border shows on hover. */
    position: relative;
    z-index: 1;
}

.dl-link:focus-visible { outline: 3px solid var(--sec-brand); outline-offset: 2px; }

.dl-list--grid .dl-link { height: 100%; align-items: flex-start; }

/* --- The mark ----------------------------------------------------------- */

.dl-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--dl-tint, #eef1f5);
    color: var(--dl-ink, #4a5462);
    font-size: 20px;
}

/* One colour per family, so the list scans by shape and colour together. */
.dl-tone-pdf    { --dl-tint: #fdecea; --dl-ink: #c0392b; }
.dl-tone-doc    { --dl-tint: #e8f0fb; --dl-ink: #1a5fb4; }
.dl-tone-xls    { --dl-tint: #e7f5ec; --dl-ink: #1e7f47; }
.dl-tone-ppt    { --dl-tint: #fdf0e6; --dl-ink: #c2540a; }
.dl-tone-zip    { --dl-tint: #eef1f5; --dl-ink: #4a5462; }
.dl-tone-design { --dl-tint: #f6eafd; --dl-ink: #7e22ce; }
.dl-tone-other  { --dl-tint: #eef6fb; --dl-ink: #0070ad; }

/* --- The words ---------------------------------------------------------- */

.dl-body { flex: 1 1 auto; min-width: 0; }

.dl-title {
    display: block;
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--sec-ink);
}

.dl-copy {
    display: block;
    margin-top: 4px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5c6675;
}

.dl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7a828f;
}

.dl-ext {
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--dl-tint, #eef1f5);
    color: var(--dl-ink, #4a5462);
}

.dl-external { color: #8b95a3; }

/* --- The action --------------------------------------------------------- */

.dl-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--sec-brand);
}

.dl-action i { font-size: 12px; transition: transform .2s ease; }
.dl-link:hover .dl-action i { transform: translateY(2px); }

/* An outward arrow should not travel downwards. */
.dl-link[target="_blank"]:hover .dl-action i { transform: translate(2px, -2px); }

.dl-list--grid .dl-action { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
    .dl-link, .dl-action i { transition: none; }
    .dl-link:hover .dl-action i { transform: none; }
}

@media (max-width: 575.98px) {
    .dl-link { flex-wrap: wrap; gap: 14px; padding: 16px; }
    .dl-body { flex: 1 1 100%; order: 2; }
    .dl-action { order: 3; }
}

/* On a chosen surface the row re-inks with everything else. */
.sec-wrap.sec-bg-brand .dl-link,
.sec-wrap.sec-bg-dark .dl-link { background: rgba(255, 255, 255, .07); border-color: var(--on-line); }
.sec-wrap.sec-bg-brand .dl-title,
.sec-wrap.sec-bg-dark .dl-title { color: var(--on-ink); }
.sec-wrap.sec-bg-brand .dl-copy,
.sec-wrap.sec-bg-dark .dl-copy { color: var(--on-body); }
.sec-wrap.sec-bg-brand .dl-action,
.sec-wrap.sec-bg-dark .dl-action { color: #fff; }

/* ==========================================================================
   Attachments inserted from a text editor
   ==========================================================================
   The editor's attachment button writes .ed-file markup into ordinary rich
   text — an article body, a service description, a section's copy. It renders
   here, on the public site, so the styles cannot live in the admin CSS.

   Four presentations, all the same link underneath:
     --card    a row with the format, the size and an action
     --button  one call to action
     --chip    compact, sits in a line of prose
     --inline  a plain text link with the format after it
   ========================================================================== */

.ed-file {
    --ed-tint: #eef6fb;
    --ed-ink: #0070ad;

    text-decoration: none;
}

/* Format colours, matched to the downloads section so a PDF is the same red
   wherever it appears. */
.ed-file[href$=".pdf"]  { --ed-tint: #fdecea; --ed-ink: #c0392b; }
.ed-file[href$=".doc"], .ed-file[href$=".docx"], .ed-file[href$=".odt"],
.ed-file[href$=".rtf"], .ed-file[href$=".txt"]  { --ed-tint: #e8f0fb; --ed-ink: #1a5fb4; }
.ed-file[href$=".xls"], .ed-file[href$=".xlsx"], .ed-file[href$=".ods"],
.ed-file[href$=".csv"]  { --ed-tint: #e7f5ec; --ed-ink: #1e7f47; }
.ed-file[href$=".ppt"], .ed-file[href$=".pptx"], .ed-file[href$=".odp"] { --ed-tint: #fdf0e6; --ed-ink: #c2540a; }
.ed-file[href$=".zip"], .ed-file[href$=".rar"], .ed-file[href$=".7z"],
.ed-file[href$=".tar"], .ed-file[href$=".gz"]   { --ed-tint: #eef1f5; --ed-ink: #4a5462; }
.ed-file[href$=".psd"], .ed-file[href$=".ai"],  .ed-file[href$=".eps"],
.ed-file[href$=".indd"], .ed-file[href$=".fig"], .ed-file[href$=".xd"],
.ed-file[href$=".sketch"] { --ed-tint: #f6eafd; --ed-ink: #7e22ce; }

/* --- Card ---------------------------------------------------------------- */

.ed-file--card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid var(--sec-line, #e5eaf0);
    border-radius: 14px;
    background: var(--sec-surface, #fff);
    color: var(--sec-ink, #16212c);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ed-file--card:hover {
    border-color: var(--ed-ink);
    box-shadow: 0 12px 30px rgba(16, 33, 48, .1);
    transform: translateY(-1px);
    color: var(--sec-ink, #16212c);
}

.ed-file--card:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 2px; }

.ed-file-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--ed-tint);
    color: var(--ed-ink);
    font-size: 20px;
}

.ed-file-body { flex: 1 1 auto; min-width: 0; }

.ed-file-name {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    /* A file name is one long unbreakable word often enough that it has to be
       allowed to break, or it pushes the action off the card. */
    overflow-wrap: anywhere;
}

.ed-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--sec-body, #4a5462);
}

.ed-file-ext {
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ed-ink);
}

.ed-file-go {
    flex: 0 0 auto;
    align-self: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--ed-ink);
    white-space: nowrap;
}

/* --- Button -------------------------------------------------------------- */

.ed-file--button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 8px 8px 0;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    transition: background .2s ease, transform .2s ease;
}

.ed-file--button:hover { background: #005a8c; color: #fff; transform: translateY(-1px); }
.ed-file--button:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 3px; }

/* --- Chip ---------------------------------------------------------------- */

.ed-file--chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 4px 2px 0;
    padding: 5px 12px;
    border: 1px solid var(--sec-line, #e5eaf0);
    border-radius: 999px;
    background: var(--ed-tint);
    color: var(--ed-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: baseline;
}

.ed-file--chip:hover { border-color: var(--ed-ink); color: var(--ed-ink); }
.ed-file--chip:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 2px; }
.ed-file--chip em { font-style: normal; font-size: 11px; letter-spacing: .05em; opacity: .75; }

/* --- Inline -------------------------------------------------------------- */

.ed-file--inline {
    color: var(--sec-brand, #0070ad);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ed-file--inline:hover { color: #005a8c; }

.ed-file-note { font-size: .875em; color: var(--sec-body, #4a5462); }

/* On a brand or dark band the surfaces have to invert, or the card is a white
   box punched through a coloured section. */
.sec-wrap.sec-bg-brand .ed-file--card,
.sec-wrap.sec-bg-dark .ed-file--card {
    background: rgba(255, 255, 255, .07);
    border-color: var(--on-line);
    color: var(--on-ink);
}

.sec-wrap.sec-bg-brand .ed-file--card .ed-file-meta,
.sec-wrap.sec-bg-dark .ed-file--card .ed-file-meta,
.sec-wrap.sec-bg-brand .ed-file-note,
.sec-wrap.sec-bg-dark .ed-file-note { color: var(--on-body); }

.sec-wrap.sec-bg-brand .ed-file-go,
.sec-wrap.sec-bg-dark .ed-file-go,
.sec-wrap.sec-bg-brand .ed-file-ext,
.sec-wrap.sec-bg-dark .ed-file-ext,
.sec-wrap.sec-bg-brand .ed-file--inline,
.sec-wrap.sec-bg-dark .ed-file--inline { color: var(--on-ink); }

@media (prefers-reduced-motion: reduce) {
    .ed-file--card, .ed-file--button { transition: none; }
    .ed-file--card:hover, .ed-file--button:hover { transform: none; }
}

@media (max-width: 575.98px) {
    .ed-file--card { flex-wrap: wrap; gap: 12px; padding: 14px; }
    .ed-file-go { width: 100%; }
}

/* ==========================================================================
   Form fields the builder can now produce
   ==========================================================================
   Star ratings, sliders and multi-step navigation. Namespaced .dyn-* so none
   of it can reach the theme's own form styling.
   ========================================================================== */

/* --- Star rating ---------------------------------------------------------
   Radio buttons underneath, so it works with a keyboard and without any
   JavaScript. The stars fill left-to-right using the sibling combinator in
   reverse — which is why the markup order is not flipped. */

.dyn-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    font-size: 30px;
    line-height: 1;
}

.dyn-rating-star { cursor: pointer; color: #d5dde6; transition: color .15s ease; }
.dyn-rating-star input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Reversed flow, so "earlier in the DOM" is visually to the right. */
.dyn-rating-star:hover,
.dyn-rating-star:hover ~ .dyn-rating-star,
.dyn-rating-star:has(input:checked),
.dyn-rating-star:has(input:checked) ~ .dyn-rating-star { color: #f0a500; }

/* Focus has to be visible on a control whose input is off-screen. */
.dyn-rating-star:has(input:focus-visible) {
    outline: 3px solid var(--sec-brand, #0070ad);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Appointment slots ---------------------------------------------------- */

.dyn-schedule { margin-bottom: 4px; }

/* --- Multi-step ----------------------------------------------------------- */

.dyn-step-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.dyn-step-progress {
    margin-right: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--sec-body, #4a5462);
}

.dyn-step-buttons { display: flex; gap: 10px; }

/* Hidden pages must not be reachable by tabbing, and `hidden` alone loses to
   the theme's display rules on a few of these wrappers. */
.dynamic-form [hidden] { display: none !important; }

@media (max-width: 575.98px) {
    .dyn-step-nav { flex-direction: column-reverse; align-items: stretch; }
    .dyn-step-buttons { width: 100%; }
    .dyn-step-buttons .btn { flex: 1 1 auto; }
    .dyn-step-progress { margin: 0; text-align: center; }
}

/* ==========================================================================
   CV autofill
   ==========================================================================
   The notice under the file field, and the marker on every box that was
   filled in from the document rather than typed by the applicant.
   ========================================================================== */

.rz-notice {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.rz-notice--ok    { background: #e7f5ec; color: #1e7f47; border: 1px solid #bfe3cd; }
.rz-notice--quiet { background: #f4f9fc; color: #4a5462; border: 1px solid #dce6f5; }

/* Visibly different from a box the applicant typed in, so nothing is sent
   that nobody looked at. */
.rz-filled {
    background: #fffdf3 !important;
    border-color: #f0c040 !important;
}

/* ==========================================================================
   Hiring process
   ==========================================================================
   The steps a candidate goes through, drawn from the real pipeline stages.
   A numbered list rather than a row of cards: the order is the meaning, and
   an <ol> says that to a screen reader without any extra markup.
   ========================================================================== */

.hp-sec { padding: clamp(48px, 6vw, 80px) 0; }

.hp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;

    /*
     * Clips the connecting rule at the edge of the grid.
     *
     * Each step's rule reaches 24px to the right to cross the gap to the next
     * one. `:last-child` has none — but in an auto-fit grid the last item of a
     * *row* is not the last child, so on a two-row layout the rule ran 24px
     * past the right edge of the page and gave the whole document a
     * horizontal scrollbar.
     *
     * clip rather than hidden: it does not turn this into a scroll container,
     * so nothing inside loses position: sticky.
     */
    overflow-x: clip;
}

.hp-step {
    position: relative;
    display: block;
}

/* The rule joining one step to the next. Hidden on the last, and on a
   single-column layout where the steps stack and the line would point at
   nothing. */
/*
 * The connecting rule.
 *
 * The step used to be a flex row — mark left, copy right — which put this line
 * at the same height as the step title and struck it straight through the
 * words. The step is a block now, so the rule runs between the marks with the
 * text safely below it.
 *
 * top: 21px is the vertical centre of the 42px mark; left: 54px clears the
 * mark's full width plus a gap, so it starts beside the number rather than
 * across it.
 */
.hp-step::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 54px;
    right: -24px;
    height: 2px;
    background: var(--sec-line, #dce6f5);
    z-index: 0;
}

.hp-step:last-child::after { display: none; }

.hp-step-mark {
    --hp-accent: var(--sec-brand, #0070ad);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hp-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    /* Sits above the connecting rule rather than being crossed by it. */
    position: relative;
    z-index: 1;
}

.hp-step-body {
    min-width: 0;
    /* Clear of the rule that runs above it. */
    margin-top: 16px;
    padding-right: 24px;
}

.hp-step-body h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

.hp-step-body p { margin: 0 0 8px; }

.hp-step-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--sec-body, #4a5462);
}

.hp-note {
    margin: 28px 0 0;
    padding: 16px 18px;
    border-left: 3px solid var(--sec-brand, #0070ad);
    background: var(--sec-surface-2, #f4f9fc);
    font-size: 15px;
}

@media (max-width: 991.98px) {
    .hp-step::after { display: none; }
}

/* ==========================================================================
   Front-end corrections
   ==========================================================================
   Fixes to the theme's own rules. They live here rather than in style.css so
   the theme stays untouched and every change is in one reviewable place.
   ========================================================================== */

/* --- Checkboxes and radios -----------------------------------------------
   style.css line 37 applies `border: 2px solid; padding: 14px 20px; height:
   auto` to `input, select, textarea, button` — every input, including the
   ones that are 16px squares. A checkbox came out as a 50px box with a tick
   floating somewhere inside it and the label on a different line.

   These are restated at a higher specificity (an attribute selector beats a
   bare element) so ordering is irrelevant. */

input[type="checkbox"],
input[type="radio"] {
    /* accent-color styles the native control, so it keeps the platform's own
       focus ring, keyboard behaviour and high-contrast handling — none of
       which a hand-drawn replacement gets for free. */
    accent-color: var(--sec-brand, #0070ad);

    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid #b9c7d6;
    border-radius: 4px;
    background-color: #fff;
    vertical-align: middle;
    cursor: pointer;
    /* A flex row must not stretch or shrink them. */
    flex: 0 0 auto;
}

input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid var(--sec-brand, #0070ad);
    outline-offset: 2px;
}

/* The label beside one. Baseline alignment puts the box on the first line of
   a two-line label instead of floating against the middle of the block. */
.form-check,
.dynamic-field .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    margin-bottom: 8px;
    padding-left: 0;
}

.form-check-input {
    margin-left: 0 !important;
    margin-top: 3px;
}

.form-check-label {
    margin: 0;
    line-height: 1.5;
    cursor: pointer;
}

/* A group of them reads as a group, with room to hit each one. */
.dynamic-field .form-check + .form-check { margin-top: 2px; }

/* The theme's own contact form does its own thing with these. */
.contact-form .form-check { align-items: flex-start; }

/* --- Page gutters ---------------------------------------------------------
   The container ran edge to edge on a laptop: 1400px of content in a 1440px
   window left 20px of air either side, so headings started almost at the
   bezel. Bootstrap's own gutter is 12px; this makes it breathe without
   changing the max width the design was built to. */

.container,
.container-fluid,
.container-lg,
.container-xl {
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

/* A row inside a container must not claw the new gutter back with its own
   negative margins. */
.container > .row,
.container-fluid > .row { margin-left: 0; margin-right: 0; }
.container > .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

@media (max-width: 575.98px) {
    .container, .container-fluid { padding-left: 18px; padding-right: 18px; }
}

/*
 * The hero has to use the same gutter as the header above it.
 *
 * style.css pins `.home-slider .container` to a flat 25px, so on a wide screen
 * the header's logo and links sat at 56px from the edge while the hero
 * headline started at 25px — the two most prominent things on the page,
 * visibly out of line with each other.
 */
.home-slider .container,
.main-banner .container {
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

@media (max-width: 575.98px) {
    .home-slider .container,
    .main-banner .container { padding-left: 18px; padding-right: 18px; }
}

/* --- Home hero ------------------------------------------------------------
   75vh on a 1080p screen is about 700px, and the heading, standfirst and
   button filled it to the edges with nothing to breathe. Taller, with a floor
   in pixels so a short laptop window does not crush it and a ceiling so a
   tall monitor does not make the first section disappear below the fold. */

.main-banner {
    height: auto;
    min-height: clamp(560px, 86vh, 920px);
    display: flex;
    align-items: center;
}

.main-banner .d-table,
.main-banner .d-table-cell { height: auto; }

@media (max-width: 991.98px) {
    .main-banner { min-height: clamp(440px, 70vh, 640px); }
}

/* --- Footer: payment marks ------------------------------------------------
   "Payment We Accept" was an <h3> sitting at heading size beside footer links
   at 15px, which made it read as a section of the footer rather than a label
   on the row of card logos. Sized like the rest of the footer's small print
   and dropped clear of the links above it. */

.payment-we-accept { margin-top: 28px; }

.payment-we-accept h3 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .01em;
    opacity: .85;
}

.payment-we-accept img { max-width: 240px; height: auto; }

@media (max-width: 991.98px) {
    .payment-we-accept { margin-top: 20px; }
}

/* ==========================================================================
   General application: the invitation and its dialog
   ==========================================================================
   The form used to sit open on the careers page, twenty-two questions long,
   pushing the roles people came to read a screen and a half down. The
   invitation stays; the form appears when somebody wants it.
   ========================================================================== */

.career-open { padding: clamp(48px, 6vw, 80px) 0; }

.co-invite {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 18px;
    background: var(--sec-surface-2, #f4f9fc);
}

.co-invite-copy { flex: 1 1 420px; min-width: 0; }
.co-invite-copy h2 { margin-bottom: 10px; }
.co-invite-copy p { margin-bottom: 8px; }
.co-invite-note { font-size: 15px; color: var(--sec-body, #4a5462); }
.co-invite-action { flex: 0 0 auto; }

.co-open { border: 0; cursor: pointer; }

/* --- The application page -------------------------------------------------
   The form used to open in a dialog here. It is a page of its own now
   (careers/job/{slug}/apply), so what follows styles that page rather than a
   panel floating over another one. */

/* A shorter banner than the role page's: this is a form, and a hero-sized
   header pushes the first field below the fold on a laptop. */
.page-title-banner--slim { padding-block: clamp(48px, 7vw, 90px); }

.career-apply-page { padding-block: clamp(32px, 5vw, 56px); }

.cap-back { margin-bottom: 14px; font-size: 15px; }
.cap-back a { display: inline-flex; align-items: center; gap: 8px; }

.cap-intro h2 { margin-bottom: 8px; }
.cap-intro p { margin-bottom: 22px; color: var(--sec-body, #4a5462); max-width: 62ch; }

/* --- The column beside the form ------------------------------------------- */

.cap-aside { position: sticky; top: 96px; display: grid; gap: 18px; }

.cap-card {
    padding: 22px 24px;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 10px;
    background: var(--sec-surface, #fff);
}

.cap-card h3 { font-size: 19px; margin-bottom: 14px; }
.cap-card--quiet { background: var(--sec-soft, #f4f8fc); }

.cap-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 14px; }
.cap-dl dt { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--sec-muted, #6a7382); }
.cap-dl dd { margin: 0; font-weight: 500; }

.cap-summary { font-size: 15px; color: var(--sec-body, #4a5462); margin-bottom: 14px; }
.cap-aside-link { font-weight: 500; }

.cap-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.cap-steps li { color: var(--sec-body, #4a5462); }

.cap-note { margin: 0; font-size: 14px; color: var(--sec-muted, #6a7382); }

/* Below the form on a narrow screen, where sticky would only get in the way. */
@media (max-width: 991.98px) {
    .cap-aside { position: static; margin-top: 28px; }
}

.cta-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.cta-actions:first-child { margin-top: 0; }

/* Quieter than the main button on purpose: two buttons of equal weight are
   two questions, and a reader answers neither. */
.cta-secondary {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: inherit;
}

.cta-secondary:hover { opacity: .8; color: inherit; }

/* --- Centred -------------------------------------------------------------- */

.cta--centred { text-align: center; }

.cta-centred {
    max-width: 780px;
    margin: 0 auto;
}

.cta-centred .cta-actions { justify-content: center; }

/* --- Card ----------------------------------------------------------------
   Inset from the page rather than bleeding to the edges, so it reads as a
   thing on the page rather than a division of it. */

.cta--card { background: none !important; padding: clamp(32px, 5vw, 60px) 0; }

.cta-card {
    padding: clamp(32px, 5vw, 56px);
    border-radius: 20px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
    text-align: center;
}

.cta-card h2 { color: #fff; margin-bottom: 12px; }
.cta-card p  { color: rgba(255, 255, 255, .88); max-width: 620px; margin: 0 auto; }
.cta-card .cta-actions { justify-content: center; }
.cta-card .global-btn { background: #fff; color: var(--sec-brand, #0070ad); }
.cta-card .global-btn:hover { background: rgba(255, 255, 255, .9); color: var(--sec-brand, #0070ad); }
.cta-card .cta-secondary { color: #fff; }

/* --- Split ---------------------------------------------------------------- */

.cta--split { background: none !important; padding: clamp(32px, 5vw, 60px) 0; }

.cta-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

@media (min-width: 992px) {
    .cta-split { grid-template-columns: 1fr 0.85fr; }
}

.cta-split-media {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
}

.cta-split-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* --- Minimal -------------------------------------------------------------
   No panel, no background. For the foot of a long article, where another
   coloured band would be one band too many. */

.cta--minimal { background: none !important; padding: clamp(28px, 4vw, 44px) 0; }

.cta-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--sec-line, #dce6f5);
}

.cta-minimal h2 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 4px; }
.cta-minimal p  { margin: 0; }
.cta-minimal .cta-actions { margin-top: 0; }

/* --- With a figure -------------------------------------------------------- */

.cta--stat { background: none !important; padding: clamp(32px, 5vw, 60px) 0; }

.cta-stat {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 52px);
    flex-wrap: wrap;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 20px;
    background: var(--sec-surface-2, #f4f9fc);
}

.cta-stat-figure {
    flex: 0 0 auto;
    text-align: center;
    padding-right: clamp(24px, 4vw, 52px);
    border-right: 1px solid var(--sec-line, #dce6f5);
}

.cta-stat-figure strong {
    display: block;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 300;
    line-height: 1;
    color: var(--sec-brand, #0070ad);
}

.cta-stat-figure span {
    display: block;
    margin-top: 8px;
    max-width: 180px;
    font-size: 14px;
    color: var(--sec-body, #4a5462);
}

.cta-stat-copy { flex: 1 1 320px; min-width: 0; }
.cta-stat-copy h2 { margin-bottom: 10px; }

@media (max-width: 767.98px) {
    .cta-stat { flex-direction: column; align-items: flex-start; }
    .cta-stat-figure {
        padding-right: 0;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 1px solid var(--sec-line, #dce6f5);
        text-align: left;
        width: 100%;
    }
    .cta-stat-figure span { margin-left: 0; }
    .cta-minimal { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Contact page
   ==========================================================================
   A contact page's real job is answering "will anybody actually reply". The
   form was doing all the work; these say what happens after it is sent.
   ========================================================================== */

.ct-expect { padding: clamp(40px, 5vw, 64px) 0; background: var(--sec-surface-2, #f4f9fc); }

.ct-expect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(20px, 3vw, 36px);
}

.ct-expect-item h3 { font-size: 20px; margin: 12px 0 8px; }
.ct-expect-item p  { margin: 0 0 6px; }

.ct-expect-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
    font-size: 19px;
}

.ct-expect-note { font-size: 14px; color: var(--sec-body, #4a5462); }

/* --- Other routes --------------------------------------------------------- */

.ct-routes { padding: clamp(40px, 5vw, 68px) 0; }

.ct-routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* The whole tile is the link — a card that looks clickable and only is in one
   small place is the most common reason a link gets missed. */
.ct-route {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 14px;
    background: var(--sec-surface, #fff);
    color: var(--sec-ink, #16212c);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ct-route:hover {
    border-color: var(--sec-brand, #0070ad);
    box-shadow: 0 12px 30px rgba(16, 33, 48, .1);
    transform: translateY(-2px);
    color: var(--sec-ink, #16212c);
}

.ct-route:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 2px; }

.ct-route-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--sec-surface-2, #f4f9fc);
    color: var(--sec-brand, #0070ad);
    font-size: 17px;
}

.ct-route-body { flex: 1 1 auto; min-width: 0; }
.ct-route-body strong { display: block; font-weight: 600; }
.ct-route-body span   { display: block; font-size: 14px; color: var(--sec-body, #4a5462); }
.ct-route > .fa-arrow-right { color: var(--sec-brand, #0070ad); transition: transform .2s ease; }
.ct-route:hover > .fa-arrow-right { transform: translateX(3px); }

/* --- Legal identity ------------------------------------------------------- */

.ct-legal { padding: 0 0 clamp(40px, 5vw, 64px); }

.ct-legal-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 32px;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--sec-line, #dce6f5);
}

.ct-legal-list dt { font-size: 13px; color: var(--sec-body, #4a5462); }
.ct-legal-list dd { margin: 2px 0 0; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .ct-route { transition: none; }
    .ct-route:hover { transform: none; }
    .ct-route:hover > .fa-arrow-right { transform: none; }
}

/* ==========================================================================
   Nothing scrolls the page sideways
   ==========================================================================
   A page-level guard. One section with a decorative element a few pixels past
   the edge — a connecting rule, an overlapping card, a rotated label — gives
   the whole document a horizontal scrollbar, and on a phone it lets the
   entire page be dragged left with nothing on the other side.

   `clip`, not `hidden`: hidden makes the element a scroll container, which
   silently breaks `position: sticky` on anything inside it. clip does not.

   Anything that genuinely needs to scroll sideways — the card rail, a wide
   table, the pipeline board — sets its own `overflow-x: auto` on itself and is
   unaffected by this.
   ========================================================================== */

html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* ==========================================================================
   360° Value
   ==========================================================================
   The points sit around a dial, so the layout carries the idea rather than
   leaving the heading to carry it alone.
   ========================================================================== */

.v360 { padding: clamp(48px, 6vw, 88px) 0; }
.v360-head { margin-bottom: clamp(24px, 4vw, 44px); }

.v360-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

/* --- The dial ------------------------------------------------------------- */

.v360-dial-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Room for the orbiting labels to sit outside the circle. */
    padding: clamp(40px, 7vw, 90px);
    margin-inline: auto;
    width: 100%;
    max-width: 620px;
}

.v360-dial {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(58vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sec-surface-2, #f4f9fc);
    overflow: hidden;
}

.v360-dial-media { position: absolute; inset: 0; }

.v360-dial-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The ring is a separate element rather than a border on the dial: a border
   would be cropped by the overflow that keeps the image inside the circle. */
.v360-dial-ring {
    position: absolute;
    inset: 8px;
    border: 2px dashed rgba(0, 112, 173, .35);
    border-radius: 50%;
}

.v360-dial-text {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 12px;
}

.v360-dial-text strong {
    display: block;
    font-size: clamp(38px, 6vw, 62px);
    font-weight: 300;
    line-height: 1;
    color: var(--sec-brand, #0070ad);
}

.v360-dial-text em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 14px;
    color: var(--sec-body, #4a5462);
}

/* An image behind the dial needs the text to stay readable over it. */
.v360-dial-media ~ .v360-dial-text strong,
.v360-dial-media ~ .v360-dial-text em { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.v360-dial:has(.v360-dial-media) { background: #0b2338; }
.v360-dial:has(.v360-dial-media) .v360-dial-media img { opacity: .55; }

/* --- Orbit --------------------------------------------------------------- */

.v360-orbit {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

/*
 * Each pin is rotated out to the radius and then counter-rotated, so the
 * label stays upright however far round the circle it sits.
 */
.v360-orbit-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    transform:
        rotate(var(--v360-angle))
        translate(min(29vw, 168px))
        rotate(calc(-1 * var(--v360-angle)))
        translate(-50%, -50%);
}

.v360-pin-dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sec-brand, #0070ad);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 112, 173, .28);
}

.v360-pin-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--sec-ink, #16212c);
}

/* --- The copy ------------------------------------------------------------- */

.v360-prose { margin-bottom: 22px; }
.v360-prose :last-child { margin-bottom: 0; }

.v360-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px 26px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.v360-points > li { display: flex; gap: 12px; align-items: flex-start; }
.v360-points strong { display: block; margin-bottom: 3px; }
.v360-points span span { display: block; font-size: 15px; color: var(--sec-body, #4a5462); }

.v360-point-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sec-surface-2, #f4f9fc);
    color: var(--sec-brand, #0070ad);
    font-size: 14px;
    font-weight: 600;
}

.v360-cta { margin-top: 4px; }

/* --- Arrangements --------------------------------------------------------- */

@media (min-width: 992px) {
    .v360--split .v360-body { grid-template-columns: 0.9fr 1.1fr; }
    .v360--orbit .v360-body { grid-template-columns: 1fr; }
    .v360--orbit .v360-copy { max-width: 900px; margin-inline: auto; text-align: center; }
    .v360--orbit .v360-points > li { text-align: left; }
    .v360--list .v360-body  { grid-template-columns: 1fr; }
    .v360--list .v360-copy  { max-width: 1000px; margin-inline: auto; }
}

/*
 * Below 992px the orbit is abandoned. Absolutely positioned labels around a
 * circle cannot fit on a phone at any radius — they overlap the dial, each
 * other, and the edge of the screen. The points are already in the list
 * below, so nothing is lost by hiding the ring of them.
 */
@media (max-width: 991.98px) {
    .v360-orbit { display: none; }
    .v360-dial-wrap { padding: 0; }
    .v360-dial { width: min(70vw, 260px); }
}

/* ==========================================================================
   Services listing
   ==========================================================================
   Four card styles for the same data. The listing on /what-we-do was a fixed
   grid of image-above-title cards with no way to change any of it.
   ========================================================================== */

.dl-sec-list { padding: clamp(40px, 5vw, 76px) 0; }

.dll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

/* Once there is room, honour the column count the editor chose. */
@media (min-width: 992px) {
    .dll-grid { grid-template-columns: repeat(var(--dll-cols, 3), minmax(0, 1fr)); }
    .dll-grid--row { grid-template-columns: 1fr; }
}

.dll-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 16px;
    background: var(--sec-surface, #fff);
    color: var(--sec-ink, #16212c);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dll-card:hover {
    border-color: var(--sec-brand, #0070ad);
    box-shadow: 0 16px 40px rgba(16, 33, 48, .12);
    transform: translateY(-3px);
    color: var(--sec-ink, #16212c);
}

.dll-card:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 3px; }

.dll-media { display: block; overflow: hidden; background: var(--sec-surface-2, #f4f9fc); }

.dll-media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .4s ease;
}

.dll-card:hover .dll-media img { transform: scale(1.04); }

.dll-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1 1 auto; }

.dll-title { font-size: 20px; font-weight: 400; line-height: 1.3; }
.dll-summary { font-size: 15px; color: var(--sec-body, #4a5462); }

.dll-go {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sec-brand, #0070ad);
}

.dll-card:hover .dll-go i { transform: translateX(3px); }
.dll-go i { transition: transform .2s ease; }

/* --- Tile: the title sits over the image ---------------------------------- */

.dll-grid--tile .dll-card { position: relative; border: 0; }
.dll-grid--tile .dll-media img { aspect-ratio: 3 / 4; }

.dll-grid--tile .dll-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px;
    color: #fff;
    background: linear-gradient(to top, rgba(6, 20, 32, .88) 20%, rgba(6, 20, 32, 0));
}

.dll-grid--tile .dll-title,
.dll-grid--tile .dll-summary,
.dll-grid--tile .dll-go { color: #fff; }

/* --- Row: image beside the text ------------------------------------------- */

@media (min-width: 768px) {
    .dll-grid--row .dll-card { flex-direction: row; align-items: stretch; }
    .dll-grid--row .dll-media { flex: 0 0 300px; }
    .dll-grid--row .dll-media img { height: 100%; aspect-ratio: auto; }
    .dll-grid--row .dll-body { justify-content: center; padding: 26px 30px; }
}

/* --- Text: numbered, no images -------------------------------------------- */

.dll-grid--text .dll-card { flex-direction: row; gap: 16px; padding: 22px; align-items: flex-start; }

.dll-grid--text .dll-number {
    flex: 0 0 auto;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: var(--sec-brand, #0070ad);
    opacity: .5;
}

.dll-grid--text .dll-body { padding: 0; }

@media (prefers-reduced-motion: reduce) {
    .dll-card, .dll-media img, .dll-go i { transition: none; }
    .dll-card:hover { transform: none; }
    .dll-card:hover .dll-media img { transform: none; }
}

/* ==========================================================================
   Contact details
   ==========================================================================
   Offices and how to reach each one. Every line is a link that does what it
   names — the number dials, the address opens a map — because a phone number
   as plain text on a phone is one somebody has to copy out by hand.
   ========================================================================== */

.cd-sec { padding: clamp(40px, 5vw, 72px) 0; }

.cd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(16px, 2.4vw, 26px);
}

@media (min-width: 992px) {
    .cd-grid { grid-template-columns: repeat(var(--cd-cols, 3), minmax(0, 1fr)); }
}

.cd-card {
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 14px;
    background: var(--sec-surface, #fff);
    height: 100%;
}

.cd-card h3 {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.3;
}

.cd-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--sec-body, #4a5462);
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    /* Long addresses and email addresses must wrap rather than widen the
       card and, through it, the page. */
    overflow-wrap: anywhere;
}

.cd-line:last-child { margin-bottom: 0; }

a.cd-line:hover { color: var(--sec-brand, #0070ad); }
a.cd-line:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 2px; border-radius: 4px; }

.cd-line i {
    flex: 0 0 auto;
    margin-top: 3px;
    width: 16px;
    text-align: center;
    color: var(--sec-brand, #0070ad);
}

.cd-line--address { align-items: flex-start; }

/* A standfirst: one line under a heading, before the body copy. */
.section-standfirst {
    max-width: 70ch;
    margin-bottom: 18px;
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--sec-body, #4a5462);
}

/* ==========================================================================
   <picture>
   ==========================================================================
   media-img wraps its <img> in a <picture> when there is a WebP ladder to
   offer. Without this the wrapper introduces a box between a flex or grid
   container and the image, and cards that sized their image by the parent
   stop working. `display: contents` removes the wrapper's own box and leaves
   the image where the layout expects it.
   ========================================================================== */
picture { display: contents; }


/* ==========================================================================
   Preview banner
   ==========================================================================
   Drawn over a page rendered with unpublished drafts. Loud on purpose — a
   preview that looks like the live site is how somebody comes to believe a
   change went out when it did not.
   ========================================================================== */

.preview-bar {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px clamp(16px, 4vw, 48px);
    background: #8a5a00;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.preview-bar a { color: #fff; text-decoration: underline; }
.preview-bar strong { font-weight: 600; }
.preview-bar .preview-bar__spacer { margin-left: auto; }

/* ==========================================================================
   Builder sections — visual design pass
   --------------------------------------------------------------------------
   Everything below is scoped to the `.section-<type>` class render-section
   already puts on each block, so the legacy templates that share these theme
   classes elsewhere are untouched.

   The problem was not decoration. The shared theme classes these blocks were
   written against assume every card has a photograph: `.events-sec` has no
   background, no border, no radius and no padding, so a card grid without
   images rendered as three paragraphs sitting in columns, and a grid where
   one card had an image and three did not looked broken rather than plain.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.bsec .heading {
    /* Was a flat 40px above and below regardless of context, which put a gap
       inside a section the same size as the gap between two of them. */
    padding: 0 0 clamp(22px, 2.6vw, 34px);
    max-width: 62rem;
}

.bsec .heading h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin-bottom: 14px;
}

.bsec .heading > p {
    max-width: 68ch;
    margin-bottom: 0;
    color: var(--sec-body, #4a5462);
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.65;
}

.sec-align-center .heading,
.bsec.sec-align-center .heading { margin-left: auto; margin-right: auto; text-align: center; }
.sec-align-center .heading > p { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Card grids
   --------------------------------------------------------------------------
   One frame for every card, whether or not it has a picture. That is what
   lets a mixed grid read as a deliberate set instead of an accident.
   -------------------------------------------------------------------------- */

.section-cards .row { --bs-gutter-y: clamp(18px, 2.2vw, 28px); }

.section-cards .events-sec {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 16px;
    background: var(--sec-surface, #fff);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}

.section-cards .events-sec:hover {
    border-color: var(--sec-brand, #0070ad);
    box-shadow: 0 18px 40px -22px rgba(16, 33, 48, .45);
    transform: translateY(-3px);
}

.section-cards .events-sec img {
    /* A fixed 300px was taller than some cards' entire contents. An aspect
       ratio keeps every image the same shape at every column count. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
}

/* The zoom-on-hover the theme applies is too much at this size; it crops the
   subject out of a card that is already showing a crop. */
.section-cards .events-sec:hover img { transform: scale(1.06); }

.section-cards .events-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.2vw, 28px);
    background: transparent;
}

.section-cards .events-info h3 {
    font-size: clamp(18px, 1.7vw, 21px);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--sec-ink, #16212c);
}

.section-cards .events-info p {
    margin-bottom: 0;
    color: var(--sec-body, #4a5462);
    font-size: 15.5px;
    line-height: 1.6;
}

/* The link sits at the foot of the card whatever length the copy is, so a row
   of cards has one line of links rather than four ragged ones. */
.section-cards .events-info .global-btn2 {
    margin-top: auto;
    padding-top: 16px;
    align-self: flex-start;
}

/*
 * A card with no picture.
 *
 * Given a coloured rule instead, so it is visibly a card of the same family
 * rather than the place a photograph failed to load.
 */
.section-cards .events-sec--text,
.section-cards .events-sec:not(:has(img)) {
    border-top: 3px solid var(--sec-brand, #0070ad);
}

.section-cards .events-sec--text .events-info,
.section-cards .events-sec:not(:has(img)) .events-info { padding-top: clamp(22px, 2.4vw, 30px); }

/* --------------------------------------------------------------------------
   Statistics
   --------------------------------------------------------------------------
   Numbers are the point; they were rendering at heading size next to their
   own labels with nothing to separate one figure from the next.
   -------------------------------------------------------------------------- */

.section-stats .row { --bs-gutter-y: clamp(20px, 2.4vw, 30px); }

.section-stats .row > [class*="col-"] {
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    .section-stats .row > [class*="col-"] + [class*="col-"]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12%;
        bottom: 12%;
        width: 1px;
        background: var(--sec-line, #dce6f5);
    }
}

.section-stats h3 {
    margin: 0 0 6px;
    font-size: clamp(34px, 4.6vw, 54px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--sec-brand, #0070ad);
    /* Figures line up in a row rather than shuffling by digit width. */
    font-variant-numeric: tabular-nums;
}

.section-stats p {
    margin: 0;
    color: var(--sec-body, #4a5462);
    font-size: 14px;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   Image beside text
   -------------------------------------------------------------------------- */

.section-image_text .row { --bs-gutter-x: clamp(28px, 4vw, 64px); }

.section-image_text img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 24px 50px -30px rgba(16, 33, 48, .55);
}

.section-image_text .heading { padding-bottom: 18px; }
.section-image_text p { color: var(--sec-body, #4a5462); line-height: 1.7; }
.section-image_text .global-btn2 { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Rich text
   --------------------------------------------------------------------------
   A measure. Copy running the full width of a 1400px container is copy nobody
   finishes a paragraph of.
   -------------------------------------------------------------------------- */

.section-content p,
.section-content ul,
.section-content ol { max-width: 72ch; line-height: 1.75; color: var(--sec-body, #4a5462); }

.sec-align-center .section-content p,
.section-content.sec-align-center p { margin-left: auto; margin-right: auto; }

.section-content .global-btn2 { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

/*
 * The quote and its attribution are one block.
 *
 * The heading was centred at 24ch while the attribution ran the full width of
 * the column beneath it, so the name started a long way to the left of the
 * words it belonged to — two things on the page rather than one quotation.
 * The measure now sits on the container, and both children inherit it.
 */
.section-quote .heading {
    /*
     * A pull quote wants a long line. It broke into six short ones with a
     * column of empty page either side, which reads as a narrow strip rather
     * than as a statement.
     *
     * Measured in rem, not ch. `ch` resolves against the element it is set on
     * — here the container, at body size — while the quote is set at up to
     * 34px, so "52ch" bought barely thirty characters of the text that
     * actually matters. 60rem is about fifty characters at the display size
     * and still shrinks on a narrow screen.
     */
    max-width: min(60rem, 100%);
    margin-inline: auto;
    padding-bottom: 0;
    position: relative;
}

/*
 * An opening mark, drawn rather than typed, so it can be large without
 * pushing the first line off its own baseline.
 *
 * Seated inside the heading's top padding rather than hung above it. At a
 * negative offset the glyph's own line box put its visible mass level with
 * the first line of the quote, which on a short centred quote meant the mark
 * sat in the middle of the words.
 */
/*
 * In the flow, not positioned over it.
 *
 * Absolute placement depended on the heading keeping a top padding, and the
 * builder's own `.heading` rule sets `padding` as a shorthand — so the space
 * the mark was sitting in disappeared and the glyph landed across the first
 * line of the quote. A block element cannot overlap the text below it.
 */
.section-quote .heading::before {
    content: "\201C";
    display: block;
    font-size: 64px;
    line-height: .62;
    margin: 0 0 14px;
    color: #0070ad;
    opacity: .2;
    pointer-events: none;
}

.section-quote h3 {
    font-size: clamp(22px, 2.8vw, 34px) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em;
    max-width: none;
    margin: 0 0 22px;
}

/* The attribution reads as a caption, and is tied to the quote by a short
   rule rather than floating under it. */
.section-quote p {
    margin-bottom: 0;
    opacity: 1;
    color: #5b6674;
    font-size: 14.5px;
    letter-spacing: .02em;
    padding-top: 16px;
    position: relative;
}

.section-quote p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 2px;
    background: #0070ad;
    opacity: .5;
}

.section-quote p strong { color: #1d2733; font-weight: 500; }

html[data-theme="dark"] .section-quote p { color: #9aa5b4; }
html[data-theme="dark"] .section-quote p strong { color: #eef1f5; }

/* On the brand surface the quote has to invert with it. */
.sec-bg-brand .section-quote h3,
.sec-bg-brand .section-quote p,
.sec-bg-dark .section-quote h3,
.sec-bg-dark .section-quote p { color: #fff; }

/* --------------------------------------------------------------------------
   Vertical rhythm
   --------------------------------------------------------------------------
   The legacy pt-7/pb-7 pairs fight the section's own spacing control, which
   is why two adjacent blocks sometimes had 200px between them and sometimes
   had none.
   -------------------------------------------------------------------------- */

/*
 * Only where a spacing has actually been chosen. A section with no appearance
 * settings is not wrapped at all, so a blanket rule here would leave it with
 * whatever its template says and the two would disagree.
 */
[class*="sec-pad-"] > section.pt-7 { padding-top: 0 !important; }
[class*="sec-pad-"] > section.pb-7 { padding-bottom: 0 !important; }
[class*="sec-pad-"] > section.mt-5 { margin-top: 0 !important; }

.sec-pad-none { padding-block: 0; }
.sec-pad-sm   { padding-block: clamp(28px, 3.4vw, 48px); }
.sec-pad-md   { padding-block: clamp(48px, 6vw, 96px); }
.sec-pad-lg   { padding-block: clamp(64px, 8vw, 128px); }

/* A team section with nobody in it yet. Designed as a deliberate state, not
   left as a stray paragraph in the middle of a page. */
.tg-empty {
    max-width: 52ch;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 48px);
    border: 1px dashed var(--sec-line, #dce6f5);
    border-radius: 18px;
    text-align: center;
    background: var(--sec-surface-2, #f7fafd);
}

.tg-empty i { font-size: 30px; color: var(--sec-brand, #0070ad); margin-bottom: 14px; display: block; }
.tg-empty p { margin-bottom: 18px; color: var(--sec-body, #4a5462); line-height: 1.65; }

/* --------------------------------------------------------------------------
   Card grids — picture styles
   --------------------------------------------------------------------------
   The default 16:10 crop is right for a photograph and wrong for the other
   two things people put in these grids.
   -------------------------------------------------------------------------- */

/* Square illustrations and portraits. A 2500x2500 drawing cropped to a wide
   landscape loses a third of itself, usually the third with the subject in. */
.cards--square .events-sec img { aspect-ratio: 1 / 1; }

/*
 * Logos.
 *
 * Never cropped: the part `object-fit: cover` cuts off a wide wordmark is the
 * company's name. Contained on a neutral tile instead, all tiles the same
 * height whatever shape the file is, so two logos of wildly different aspect
 * ratios still line up as a set.
 */
.cards--logo .events-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 26px 30px;
    background: var(--sec-surface-2, #f7fafd);
    border-bottom: 1px solid var(--sec-line, #dce6f5);
}

.cards--logo .events-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    /* No zoom on hover: a logo is a fixed mark, and scaling it is the one
       thing every brand guideline in the world forbids. */
    transform: none !important;
}

.cards--logo .events-sec:hover img { transform: none !important; }

/* The tile is decoration; the card still lifts. */
.cards--logo .events-sec { text-align: left; }

/* Text-only grids: no picture area at all, so the accent rule does the work. */
.cards--plain .events-sec { border-top: 3px solid var(--sec-brand, #0070ad); }
.cards--plain .events-sec img,
.cards--plain .events-logo { display: none; }

/*
 * A grid with fewer cards than columns.
 *
 * Two cards in a three-column row leave a third of the width empty and the
 * pair pinned to the left, which reads as a card that failed to load. Centre
 * a short row instead.
 */
.section-cards .row { justify-content: center; }
.section-cards .row > [class*="col-"] { display: flex; }
.section-cards .row > [class*="col-"] > .events-sec { width: 100%; }

/* ==========================================================================
   404
   ========================================================================== */

.err-banner { min-height: 320px; }

.err-code {
    margin: 0 0 8px;
    font-size: clamp(56px, 9vw, 104px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Present, but never the loudest thing: the number is not what the reader
       needs. The sentence under it is. */
    color: rgba(255, 255, 255, .28);
}

.err-search { margin-bottom: 8px; }
.err-search h2 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 16px; }

.err-search-row { display: flex; flex-wrap: wrap; gap: 12px; }

.err-search-row input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 10px;
    background: var(--sec-surface, #fff);
    font-size: 16px;
    color: var(--sec-ink, #16212c);
}

.err-search-row input:focus {
    outline: none;
    border-color: var(--sec-brand, #0070ad);
    box-shadow: 0 0 0 3px rgba(0, 112, 173, .16);
}

.err-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.err-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 12px;
    background: var(--sec-surface, #fff);
    color: var(--sec-ink, #16212c);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.err-link:hover {
    border-color: var(--sec-brand, #0070ad);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(16, 33, 48, .5);
    color: var(--sec-ink, #16212c);
}

.err-link:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 2px; }
.err-link strong { display: block; font-weight: 500; }
.err-link small { color: var(--sec-body, #4a5462); }
.err-link i { flex: 0 0 auto; color: var(--sec-brand, #0070ad); }

/* ==========================================================================
   Alternating rows
   --------------------------------------------------------------------------
   Image one side, copy the other, swapping each row. Built for content where
   each item deserves a paragraph and the artwork deserves to be seen — six
   values with commissioned illustrations were being shown as six thumbnails
   with forty words each, which did justice to neither.
   ========================================================================== */

.fr-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vw, 104px);
}

.fr-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
}

.fr-row--reversed .fr-media { order: 2; }
.fr-row--reversed .fr-copy  { order: 1; }

/* A row with no artwork keeps the rhythm rather than leaving a hole. */
.fr-row--text { grid-template-columns: minmax(0, 1fr); max-width: 76ch; }

.fr-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    background: var(--sec-surface-2, #f4f9fc);
}

.fr-sec--square    .fr-media img { aspect-ratio: 1 / 1;  object-fit: cover; }
.fr-sec--landscape .fr-media img { aspect-ratio: 4 / 3;  object-fit: cover; }
.fr-sec--wide      .fr-media img { aspect-ratio: 16 / 9; object-fit: cover; }
.fr-sec--natural   .fr-media img { aspect-ratio: auto;   object-fit: contain; }

.fr-number {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--sec-brand, #0070ad);
}

.fr-copy h3 {
    margin-bottom: 14px;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--sec-ink, #16212c);
}

.fr-standfirst {
    margin-bottom: 14px;
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--sec-ink, #16212c);
}

.fr-body,
.fr-body p {
    color: var(--sec-body, #4a5462);
    font-size: 16.5px;
    line-height: 1.75;
}

.fr-body p:last-child { margin-bottom: 0; }
.fr-copy .global-btn2 { margin-top: 18px; }

@media (max-width: 767.98px) {
    .fr-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    /* On one column the image always leads, whichever side it took on a wide
       screen — alternating means nothing in a single column, and an image
       arriving after its own heading reads as belonging to the next row. */
    .fr-row--reversed .fr-media { order: 0; }
    .fr-row--reversed .fr-copy  { order: 0; }
}


/* --------------------------------------------------------------------------
   A default rhythm for sections nobody has given a spacing to.

   The rules above handle a section wrapped in `.sec-wrap` because somebody
   chose its padding. Most sections are not: they render bare, and fall back to
   whatever margin their theme block happens to carry. Those were written for
   hand-built pages and do not compose — `pt-7`/`pb-7` set padding to zero,
   `mt-5` adds 3rem above and nothing below, and several blocks bring nothing
   at all. Put three of them in a row and the gaps are 0, 48 and 100px.

   So a section with no padding chosen gets the same rhythm the wrapper would
   have given it. Keyed on the padding class rather than on the wrapper: a
   section is wrapped for alignment and anchors too, so "has a wrapper" is not
   the same question as "has a spacing". Where one has been chosen the wrapper
   supplies it, and adding it here as well is what would put 200px between two
   blocks.
   -------------------------------------------------------------------------- */
:not([class*="sec-pad-"]) > section.bsec {
    margin-block: 0;
    padding-block: var(--sec-rhythm);
}

/* Same rhythm, stated again to beat the utilities: those rules are several
   classes deep (section.about-section.about-sec.pt-7.pb-7) and would win. */
:not([class*="sec-pad-"]) > section.bsec[class*="mt-"],
:not([class*="sec-pad-"]) > section.bsec[class*="mb-"],
:not([class*="sec-pad-"]) > section.bsec[class*="my-"],
:not([class*="sec-pad-"]) > section.bsec[class*="pt-"],
:not([class*="sec-pad-"]) > section.bsec[class*="pb-"],
:not([class*="sec-pad-"]) > section.bsec[class*="py-"] {
    margin-block: 0 !important;
    padding-block: var(--sec-rhythm) !important;
}

/* Two exceptions.

   The banner sets its own height and sits flush under the header. The call to
   action draws a padded panel inside the section, so the section around it
   only needs the rhythm — its own 100px would sit outside the panel and read
   as an empty band above the footer. */
:not([class*="sec-pad-"]) > section.bsec.pbn { padding-block: 0 !important; }
:not([class*="sec-pad-"]) > section.bsec.cta2 { margin-block: 0 !important; }
.bsec.cta2 .container { padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 3rem); }

/* The card grid had no gutter between rows, so the second row's images butted
   straight against the first row's buttons. */
.bsec.events-conferences .row { row-gap: clamp(28px, 3.4vw, 44px); }
.bsec.events-conferences { margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   The chosen spacing belongs to the section, not to a box around it.

   `.sec-pad-md` padded the wrapper, which is transparent. A section that
   carries its own background — the card rail, a brand band, anything tinted —
   therefore got a stripe of page colour above and below it rather than more of
   its own. On the home page that was a 90px white band between the hero and
   the rail: not a gap anyone had asked for, just the wrapper showing through.

   So the wrapper hands its value to the section and stops padding itself. The
   section's own padding is replaced rather than added to, which is the other
   half of the same bug — the rail brought 96px of its own and the wrapper
   another 90px on top.
   -------------------------------------------------------------------------- */
.sec-wrap[class*="sec-pad-"] { padding-block: 0; }

.sec-wrap.sec-pad-none > section { padding-block: 0 !important; }
.sec-wrap.sec-pad-sm   > section { padding-block: clamp(28px, 3.4vw, 48px) !important; }
.sec-wrap.sec-pad-md   > section { padding-block: var(--sec-rhythm) !important; }
.sec-wrap.sec-pad-lg   > section { padding-block: clamp(64px, 8vw, 128px) !important; }

/* A banner sets its own height and sits flush under the header whatever
   spacing was picked around it. */
.sec-wrap[class*="sec-pad-"] > section.page-title-banner,
.sec-wrap[class*="sec-pad-"] > section.pbn { padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px) !important; }

/* The home slider takes none at all.

   It is artwork rather than a block of content: the slide sets its own height
   and its image has to reach the top of the page, because the header floats on
   it. The rhythm was putting 48px of page colour above the image, and the
   header then sat on that band instead of on the photograph — a pale strip
   across the top of the home page with the navigation lost in it. */
.sec-wrap[class*="sec-pad-"] > section.home-slider { padding-block: 0 !important; }


/* --------------------------------------------------------------------------
   One number for the space between sections.

   It was three: sections with no spacing chosen got one value, "medium" got
   another, and the company pages' own kit a third nearly twice the size. Three
   pages side by side therefore breathed differently for no reason anybody
   chose — which is what "the gaps are inconsistent" meant.

   Declared once on :root so the default, the medium choice and the kit all
   resolve to the same thing, and changing the site's rhythm is one edit.
   Small and large stay as deliberate steps either side of it.
   -------------------------------------------------------------------------- */
:root { --sec-rhythm: clamp(48px, 6vw, 96px); }

/* --------------------------------------------------------------------------
   The call-to-action panel always has something behind its type.

   The panel's text is white, and its background came only from an image set on
   the block. A panel with no image was therefore white on white — the copy was
   there, selectable, and invisible. Every solution and industry page had one.

   A brand fill underneath fixes both that and the case where an image is set
   but fails to load, since the image now layers over this rather than
   replacing it.
   -------------------------------------------------------------------------- */
.cta2 > .container {
    background-color: #0a2f4d;
    background-image: linear-gradient(100deg, #0a2f4d 0%, #0f4a75 55%, #0070ad 100%);
}

/* An image, where there is one, sits over the fill — so the wash still reads
   as the brand and the type stays legible whatever was uploaded. */
.cta2 > .container[style*="background-image"] {
    background-blend-mode: multiply;
    background-color: #0a2f4d;
}

/* The "explore all" line under the home solutions accordion. */
.sol-more {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: clamp(24px, 3vw, 40px);
}

.sol-more-note { color: #6b7684; font-size: 14px; }
html[data-theme="dark"] .sol-more-note { color: #9aa5b4; }

/* --------------------------------------------------------------------------
   The pull quote on a coloured surface.

   The block above gives the quote its measure, its mark and a caption rule,
   all in ink colours meant for a pale background. On the brand and dark
   surfaces those have to invert, or the attribution is navy on navy — which
   is what happened the moment the restyle landed.
   -------------------------------------------------------------------------- */
.sec-bg-brand .section-quote h3,
.sec-bg-dark .section-quote h3 { color: #fff !important; }

.sec-bg-brand .section-quote p,
.sec-bg-dark .section-quote p { color: rgba(255, 255, 255, .82) !important; }

.sec-bg-brand .section-quote p strong,
.sec-bg-dark .section-quote p strong { color: #fff !important; }

.sec-bg-brand .section-quote .heading::before,
.sec-bg-dark .section-quote .heading::before { color: #fff; opacity: .22; }

.sec-bg-brand .section-quote p::before,
.sec-bg-dark .section-quote p::before { background: #fff; opacity: .45; }

/* Centred quotes centre their furniture too. The mark and the caption rule
   are drawn at the left edge of the block, which reads as a mistake when the
   words above them are centred. */
.sec-align-center .section-quote p::before {
    left: 50%;
    transform: translateX(-50%);
}

/* ==========================================================================
   Numbered Principles
   --------------------------------------------------------------------------
   Values in identical boxes read as several of the same thing. The index gives
   each one a position and makes the set countable at a glance.

   Everything here draws on the --on-* tokens, so a section works on a white,
   soft, brand or dark background without a second set of rules. The fallbacks
   are for a section rendered without an appearance wrapper, where the tokens
   are never declared.
   ========================================================================== */

.bsec-principles { padding: var(--sec-rhythm, 96px) 0; }

.bsec-principles-head { max-width: 720px; margin-bottom: 44px; }

.bsec-eyebrow {
    margin: 0 0 12px;
    color: var(--sec-brand, #0070ad);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bsec-principles-head h2,
.bsec-facts-head h2,
.bsec-cases-head h2,
.bsec-spotlight-head h2,
.bsec-logowall-head h2 {
    margin: 0 0 14px;
    color: var(--on-ink, #0b1b28);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
}

.bsec-lede {
    margin: 0;
    max-width: 62ch;
    color: var(--on-body, #4a5462);
    font-size: 16px;
    line-height: 1.65;
}

.bsec-principles-grid {
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;   /* the numbers are drawn, not counted by the browser */
}

.bsec-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bsec-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bsec-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bsec-principle {
    position: relative;
    padding-top: 22px;
    border-top: 2px solid var(--on-line, #e2e8f0);
}

.bsec-principle-num {
    display: block;
    margin-bottom: 10px;
    color: var(--sec-brand, #0070ad);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
}

.bsec-principle h3 {
    margin: 0 0 8px;
    color: var(--on-ink, #0b1b28);
    font-size: 19px;
    line-height: 1.3;
}

.bsec-principle p {
    margin: 0;
    color: var(--on-body, #4a5462);
    font-size: 15px;
    line-height: 1.6;
}

/* ==========================================================================
   Fact Sheet
   ========================================================================== */

.bsec-facts { padding: var(--sec-rhythm, 96px) 0; }
.bsec-facts-head { max-width: 720px; margin-bottom: 36px; }

.bsec-facts-grid { display: grid; gap: 1px; margin: 0; background: var(--on-line, #e2e8f0); }

/* The hairline between facts is the grid's own background showing through, so
   there is never a doubled or missing border at the ends of a row. */
.bsec-fact {
    padding: 26px 24px;
    background: #fff;
}

.sec-wrap.sec-bg-brand .bsec-fact,
.sec-wrap.sec-bg-dark .bsec-fact { background: rgba(255, 255, 255, .06); }

.bsec-fact dt {
    margin-bottom: 8px;
    color: var(--on-muted, #6a7382);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.bsec-fact dd {
    margin: 0;
    color: var(--on-ink, #0b1b28);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
}

.bsec-fact-note {
    display: block;
    margin-top: 6px;
    color: var(--on-body, #4a5462);
    font-size: 14px;
    font-weight: 400;
}

/* ==========================================================================
   Client Outcomes
   ========================================================================== */

.bsec-cases { padding: var(--sec-rhythm, 96px) 0; }
.bsec-cases-head { max-width: 720px; margin-bottom: 44px; }

.bsec-cases-grid { display: grid; gap: 26px; }

.bsec-case {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--on-line, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sec-wrap.sec-bg-brand .bsec-case,
.sec-wrap.sec-bg-dark .bsec-case { background: rgba(255, 255, 255, .06); }

.bsec-case:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11, 27, 40, .12); }

.bsec-case-media { aspect-ratio: 16 / 9; overflow: hidden; }
.bsec-case-media img { width: 100%; height: 100%; object-fit: cover; }

.bsec-case-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; }

.bsec-case-sector {
    margin: 0 0 14px;
    color: var(--sec-brand, #0070ad);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bsec-case-metric { margin: 0 0 14px; }

.bsec-case-metric strong {
    display: block;
    color: var(--on-ink, #0b1b28);
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.bsec-case-metric span {
    display: block;
    margin-top: 4px;
    color: var(--on-muted, #6a7382);
    font-size: 13.5px;
}

.bsec-case-text {
    margin: 0 0 16px;
    color: var(--on-body, #4a5462);
    font-size: 15px;
    line-height: 1.62;
}

/* Pinned to the bottom so the client and the link line up across a row of
   cards whose copy runs to different lengths. */
.bsec-case-client {
    margin: auto 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--on-line, #e2e8f0);
    color: var(--on-ink, #0b1b28);
    font-size: 14.5px;
    font-weight: 600;
}

.bsec-case-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--sec-brand, #0070ad);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.bsec-case-link i { transition: transform .18s ease; }
.bsec-case-link:hover i { transform: translateX(4px); }

/* ==========================================================================
   People Spotlight
   ========================================================================== */

.bsec-spotlight { padding: var(--sec-rhythm, 96px) 0; }
.bsec-spotlight-head { max-width: 720px; margin-bottom: 40px; }

.bsec-spotlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.bsec-spotlight-grid.is-single { grid-template-columns: minmax(0, 1fr); }

.bsec-person {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.bsec-spotlight-grid.is-single .bsec-person { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; }

/* No photograph: one column, so the words use the full width. */
.bsec-person.is-photoless,
.bsec-spotlight-grid.is-single .bsec-person.is-photoless { grid-template-columns: minmax(0, 1fr); }

.bsec-person-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    background: var(--sec-soft, #eef6fb);
}

.bsec-person-photo img { width: 100%; height: 100%; object-fit: cover; }

.bsec-person-body h3 {
    margin: 0 0 4px;
    color: var(--on-ink, #0b1b28);
    font-size: 21px;
    line-height: 1.25;
}

.bsec-person-role {
    margin: 0 0 16px;
    color: var(--sec-brand, #0070ad);
    font-size: 14px;
    font-weight: 600;
}

.bsec-person-quote {
    margin: 0 0 16px;
    padding-left: 16px;
    border-left: 3px solid var(--sec-brand, #0070ad);
    color: var(--on-ink, #0b1b28);
    font-size: 17px;
    font-style: italic;
    line-height: 1.5;
}

.bsec-person-bio {
    margin: 0;
    color: var(--on-body, #4a5462);
    font-size: 15px;
    line-height: 1.65;
}

.bsec-person-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--on-muted, #6a7382);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.bsec-person-link:hover { color: var(--sec-brand, #0070ad); }

/* ==========================================================================
   Logo Wall
   ========================================================================== */

.bsec-logowall { padding: var(--sec-rhythm, 96px) 0; }
.bsec-logowall-head { max-width: 720px; margin-bottom: 40px; }

.bsec-logowall-group + .bsec-logowall-group { margin-top: 40px; }

.bsec-logowall-caption {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--on-line, #e2e8f0);
    color: var(--on-muted, #6a7382);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bsec-logowall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bsec-logo {
    display: grid;
    place-items: center;
    min-height: 108px;
    padding: 20px;
    border: 1px solid var(--on-line, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.sec-wrap.sec-bg-brand .bsec-logo,
.sec-wrap.sec-bg-dark .bsec-logo { background: rgba(255, 255, 255, .06); }

a.bsec-logo:hover { background: var(--sec-soft, #eef6fb); }

.bsec-logo img {
    max-width: 100%;
    max-height: 46px;
    width: auto;
    object-fit: contain;
}

.bsec-logo-name {
    color: var(--on-muted, #6a7382);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .bsec-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bsec-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bsec-spotlight-grid { grid-template-columns: minmax(0, 1fr); }
    .bsec-spotlight-grid.is-single .bsec-person { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .bsec-principles-grid,
    .bsec-facts-grid,
    .bsec-cases-grid,
    .bsec-cols-2,
    .bsec-cols-3,
    .bsec-cols-4 { grid-template-columns: minmax(0, 1fr); }

    /* The photograph goes above the words rather than shrinking to a stamp. */
    .bsec-person,
    .bsec-spotlight-grid.is-single .bsec-person { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .bsec-person-photo { max-width: 240px; }

    .bsec-logowall-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================================
   Gated download page
   ========================================================================== */

.res-gate-inner {
    display: grid; gap: 40px; align-items: start;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

@media (max-width: 767.98px) { .res-gate-inner { grid-template-columns: 1fr; gap: 28px; } }

.res-gate-copy h1 { margin: 0 0 14px; }
.res-gate-summary { line-height: 1.65; }
.res-gate-meta { margin-top: 18px; font-size: 13px; opacity: .7; letter-spacing: .04em; }

/* Same correction as .evt-detail-form: --on-muted is a text colour. */
.res-gate-form {
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: 10px;
    border: 1px solid var(--on-line, #e2e8f0);
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

.res-field { display: grid; gap: 5px; margin-bottom: 14px; }
.res-field label { font-size: 13px; font-weight: 500; color: #4a5462; }
.res-field label span { font-weight: 400; color: #8a94a3; }

.res-field input {
    width: 100%; padding: 11px 13px; font-size: 15px;
    border: 1px solid var(--on-line, rgba(0, 0, 0, .18));
    border-radius: 4px; background: #fff; color: #16202b;
}

.res-consent {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13px; line-height: 1.45; margin: 0 0 18px;
}

.res-consent input { margin-top: 3px; flex: 0 0 auto; }
.res-error { margin: 2px 0 0; font-size: 12.5px; color: #d93025; }
.res-note { margin: 14px 0 0; font-size: 12px; opacity: .65; }

.res-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Events
   ========================================================================== */

.evt-row {
    display: grid; grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 18px; align-items: center; padding: 18px 0; color: inherit;
    border-bottom: 1px solid var(--on-line, rgba(0, 0, 0, .12));
}

.evt-row:hover { text-decoration: none; }
.evt-row:last-of-type { border-bottom: 0; }

.evt-when { text-align: center; line-height: 1.1; }
.evt-when strong { display: block; font-size: 26px; }
.evt-when span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

.evt-main strong { display: block; font-size: 16px; font-weight: 500; }
.evt-main small { display: block; font-size: 13px; opacity: .72; margin-top: 3px; }

/*
 * The only action on the row, so it should look like one.
 *
 * It was set in muted grey at 80% opacity, which made the single thing anybody
 * is meant to click the faintest element in the line.
 */
.evt-state {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 500; white-space: nowrap;
    color: var(--sec-brand, #0070ad);
}

.evt-state::after {
    content: "→";
    transition: transform .15s ease;
}

.evt-row:hover .evt-state::after { transform: translateX(3px); }

/* A row that is full or closed is not offering anything, so it stops looking
   like it is. */
.evt-row.is-closed .evt-state { color: var(--on-muted, #6a7382); font-weight: 400; }
.evt-row.is-closed .evt-state::after { content: ""; }

.evt-row { transition: background-color .15s ease; }
.evt-row:hover { background: var(--sec-soft, rgba(0, 112, 173, .05)); }

.evt-empty { padding: 30px 0; opacity: .7; }
.evt-past-heading { margin-top: 48px; font-size: 20px; }
.evt-past { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.evt-past li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.evt-past span { opacity: .65; white-space: nowrap; }

.evt-detail-inner {
    display: grid; gap: 40px; align-items: start;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

@media (max-width: 767.98px) { .evt-detail-inner { grid-template-columns: 1fr; gap: 28px; } }

.evt-facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 18px 0 24px; }
.evt-facts dt { font-size: 12px; opacity: .65; font-weight: 400; }
.evt-facts dd { margin: 2px 0 0; font-size: 15px; }

.evt-summary { line-height: 1.65; }

/*
 * A real surface, not a text colour.
 *
 * This was `background: var(--on-muted)`, and --on-muted is #6a7382 — the token
 * for muted *text*. As a background it produced a slate card with pale grey
 * labels on it: the whole form read as disabled. Tokens named for what they
 * colour, not where they sit, are easy to reach for wrongly.
 */
.evt-detail-form {
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: 10px;
    border: 1px solid var(--on-line, #e2e8f0);
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

.evt-done { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; }
.evt-closed { margin: 0; opacity: .75; }

/* Stated before the fields, not after: somebody filling in four boxes should
   know they are joining a waiting list before they start, not on submit. */
.evt-full-note {
    margin: 0 0 16px; padding: 11px 14px; border-radius: 4px;
    background: rgba(240, 173, 78, .16); font-size: 13.5px;
}

/* ==========================================================================
   Newsletter signup
   --------------------------------------------------------------------------
   An inset brand panel, the same shape .cta-card uses. A signup is a call to
   action, and it should look like the other ones rather than introduce a third
   idea of what one looks like.

   Every colour here is stated rather than inherited. The first version leaned
   on .global-btn, which is styled for dark hero backgrounds, so the Subscribe
   button rendered white on white and the section shipped with no visible way
   to submit it.
   ========================================================================== */

.sec-newsletter { background: none !important; padding: clamp(28px, 4vw, 56px) 0; }

.nl-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(30px, 4.5vw, 56px);
    border-radius: 20px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
}

@media (max-width: 767.98px) {
    .nl-card { grid-template-columns: 1fr; gap: 24px; }
}

/* --- The pitch --------------------------------------------------------- */

.nl-mark {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; margin-bottom: 16px;
    border-radius: 50%; font-size: 17px;
    background: rgba(255, 255, 255, .16); color: #fff;
}

.sec-newsletter .nl-copy h2 { margin: 0 0 10px; color: #fff; }

.nl-intro, .nl-intro p {
    margin: 0; color: rgba(255, 255, 255, .86);
    font-size: 15px; line-height: 1.6;
}

/* --- The form ---------------------------------------------------------- */

/*
 * align-content matters as much as align-items here.
 *
 * Once this row wraps — the button dropping under the field on a narrow screen
 * — it becomes a two-line flex container, and a wrapped container stretches its
 * lines to fill any spare height by default. This row sits beside a taller copy
 * column, so there was plenty of spare height: the field grew to about 130px and
 * the label floated far above its input.
 */
.nl-row {
    display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start;
    gap: 10px;
}

/* Same reasoning one level down: the label/input grid must size to its content
   rather than to whatever room it is given. */
.nl-field { display: grid; gap: 6px; align-content: start; }
.nl-field--grow { flex: 1 1 240px; min-width: 0; }

.nl-field label {
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.nl-field input {
    width: 100%; padding: 13px 15px; font-size: 15px;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px;
    background: rgba(255, 255, 255, .1); color: #fff;
}

.nl-field input::placeholder { color: rgba(255, 255, 255, .55); }

.nl-field input:focus {
    outline: none; background: #fff; color: #16202b;
    border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

.nl-field input:focus::placeholder { color: #8a94a3; }

/* Stated in full, never inherited — this is the control that vanished. */
.nl-submit {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; border: 1px solid #fff; border-radius: 6px;
    background: #fff; color: var(--sec-brand, #0070ad);
    font-size: 15px; font-weight: 500; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.nl-submit:hover { background: rgba(255, 255, 255, .88); color: var(--sec-brand-dark, #005a87); }

.nl-submit:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px;
}

@media (max-width: 575.98px) {
    /* Full width rather than beside a field that has wrapped above it: a
       button hugging the left edge under a full-width input reads as unrelated
       to it. */
    .nl-row { flex-direction: column; align-items: stretch; }
    .nl-submit { justify-content: center; }

    /*
     * flex-basis is the main axis, and the main axis is now vertical — so
     * `flex: 1 1 240px` was instructing the email field to be 240px *tall*.
     * It rendered as a 240px box with the placeholder floating in the middle
     * of it, which looked like a broken textarea.
     */
    .nl-field--grow { flex: 0 0 auto; }
}

/* --- Consent and messages ---------------------------------------------- */

.nl-consent {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 16px 0 0; font-size: 13px; line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.nl-consent input {
    margin-top: 2px; flex: 0 0 auto;
    width: 16px; height: 16px; accent-color: #fff;
}

.nl-error {
    margin: 10px 0 0; padding: 9px 12px; border-radius: 5px; font-size: 13px;
    /* Readable on the brand panel. Plain red text on this blue is the pairing
       that fails contrast in every checker. */
    background: #fff; color: #b3261e;
}

.nl-done {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    font-size: 15.5px; line-height: 1.55; color: #fff;
}

.nl-done i { margin-top: 3px; }

/* Off-screen rather than display:none — some bots skip anything hidden that
   way, which defeats the point of having it. */
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Dark theme: the brand panel is already dark enough to carry white text, but
   it is lifted slightly so it separates from a dark page behind it. */
html[data-theme="dark"] .nl-card {
    background: #0b3a5c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}

/*
 * Restated for dark theme, where a global input rule paints every field the
 * page background colour — which on this panel produced a near-black box with
 * no visible border, floating on blue. The field belongs to the card, so it
 * takes the card's treatment in both themes.
 */
html[data-theme="dark"] .nl-card .nl-field input {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

html[data-theme="dark"] .nl-card .nl-field input:focus {
    background: #fff;
    color: #16202b;
}

/* ==========================================================================
   Event detail
   --------------------------------------------------------------------------
   The date is set as a block rather than as a line among the other facts,
   because it is the thing somebody came to the page to find out.
   ========================================================================== */

.evt-head {
    padding: clamp(28px, 4vw, 52px) 0;
    background: var(--sec-soft, #eef6fb);
    border-bottom: 1px solid var(--on-line, rgba(0, 0, 0, .08));
}

.evt-head-inner { display: flex; gap: clamp(20px, 3vw, 36px); align-items: flex-start; }

.evt-date {
    flex: 0 0 auto; width: 92px; padding: 14px 0; text-align: center;
    border-radius: 10px; background: var(--sec-brand, #0070ad); color: #fff;
    line-height: 1.05;
}

.evt-date strong { display: block; font-size: 34px; font-weight: 500; }
.evt-date span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.evt-date small { display: block; font-size: 11px; opacity: .75; margin-top: 2px; }

.evt-head-copy { min-width: 0; }

.evt-kicker {
    margin: 0 0 6px; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; opacity: .7;
}

.evt-head-copy h1 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 40px); }

.evt-facts {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14.5px;
}

.evt-facts li { display: flex; align-items: center; gap: 9px; }
.evt-facts i { opacity: .55; width: 15px; text-align: center; }
.evt-facts .is-full { color: #b3261e; }

.evt-cal {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; font-size: 14px; color: var(--sec-brand, #0070ad);
}

@media (max-width: 575.98px) {
    .evt-head-inner { flex-direction: column; gap: 18px; }
    /* Laid on its side on a narrow screen: a 92px square above a heading wastes
       the width the heading needs. */
    .evt-date { display: flex; align-items: baseline; gap: 8px; width: auto; padding: 8px 14px; }
    .evt-date strong { font-size: 26px; }
}

/* --- The form column ---------------------------------------------------- */

.evt-detail-form,
.evt-detail-form p,
.evt-detail-form label { color: #4a5462; }

.evt-form-title { margin: 0 0 14px; font-size: 20px; color: #16202b; }

.evt-field { display: grid; gap: 5px; margin-bottom: 14px; }
.evt-field label { font-size: 13px; font-weight: 500; color: #4a5462; }
.evt-field label span { font-weight: 400; color: #8a94a3; }

.evt-field input, .evt-field textarea {
    width: 100%; padding: 11px 13px; font-size: 15px;
    border: 1px solid var(--on-line, rgba(0, 0, 0, .18));
    border-radius: 4px; background: #fff; color: #16202b;
}

.evt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .evt-field-row { grid-template-columns: 1fr; gap: 0; } }

.evt-consent {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13px; line-height: 1.45; margin: 4px 0 18px; color: #4a5462;
}

.evt-consent input { margin-top: 3px; flex: 0 0 auto; }

/* Stated in full rather than inheriting .global-btn, which is styled for dark
   hero sections and renders white on white anywhere else. */
.evt-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 13px 22px; font-size: 15px; font-weight: 500;
    border: 1px solid var(--sec-brand, #0070ad); border-radius: 5px;
    background: var(--sec-brand, #0070ad); color: #fff;
}

.evt-submit:hover { background: var(--sec-brand-dark, #005a87); color: #fff; }

.evt-error { margin: 2px 0 0; font-size: 12.5px; color: #d93025; }
.evt-privacy { margin: 12px 0 0; font-size: 12px; color: #8a94a3; }

.evt-few-note, .evt-full-note {
    margin: 0 0 16px; padding: 10px 13px; border-radius: 4px; font-size: 13.5px;
    background: rgba(240, 173, 78, .16);
}

.evt-done { display: flex; align-items: flex-start; gap: 11px; }
.evt-done i { color: #1c6b32; font-size: 20px; margin-top: 2px; }
.evt-done p { margin: 0; font-size: 15px; }

.evt-summary { line-height: 1.7; font-size: 16px; }
.evt-more { margin-top: 20px; }
.evt-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*
 * Dark theme for the event page.
 *
 * The same global input rule that caught the newsletter applies here: it paints
 * every field the page background, which on a tinted card gives near-black boxes
 * with no visible border. The fields belong to the card, so they take the card's
 * treatment in both themes.
 */
html[data-theme="dark"] .evt-head {
    background: #0e1a24;
    border-bottom-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .evt-detail-form {
    background: #151b24;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: none;
}

/* The card sets its own text colours for light theme, so dark theme has to
   take them back rather than inherit them. */
html[data-theme="dark"] .evt-detail-form,
html[data-theme="dark"] .evt-detail-form p,
html[data-theme="dark"] .evt-detail-form label { color: rgba(255, 255, 255, .82); }

html[data-theme="dark"] .evt-form-title { color: #fff; }
html[data-theme="dark"] .evt-field label span,
html[data-theme="dark"] .evt-privacy { color: rgba(255, 255, 255, .55); }

html[data-theme="dark"] .res-gate-form { background: #151b24; border-color: rgba(255, 255, 255, .1); box-shadow: none; }
html[data-theme="dark"] .res-field label { color: rgba(255, 255, 255, .82); }
html[data-theme="dark"] .res-field label span { color: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .res-field input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #e8ebf0; }

html[data-theme="dark"] .evt-field input,
html[data-theme="dark"] .evt-field textarea {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
    color: #e8ebf0;
}

html[data-theme="dark"] .evt-field input:focus,
html[data-theme="dark"] .evt-field textarea:focus {
    background: #fff;
    color: #16202b;
}

html[data-theme="dark"] .evt-few-note,
html[data-theme="dark"] .evt-full-note { background: rgba(240, 173, 78, .14); }

/* --- Event page: the expanded content ---------------------------------- */

.evt-panels {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px; margin: 28px 0;
}

.evt-panel {
    padding: 18px 20px; border-radius: 8px;
    background: var(--sec-soft, #eef6fb);
}

.evt-panel h3 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 8px; font-size: 15px; font-weight: 500;
}

.evt-panel h3 i { color: var(--sec-brand, #0070ad); font-size: 14px; }
.evt-panel div { font-size: 14.5px; line-height: 1.6; }

/* --- Agenda ------------------------------------------------------------- */

.evt-agenda { margin-top: 36px; }
.evt-agenda h2, .evt-speakers h2 { font-size: 22px; margin: 0 0 18px; }

.evt-agenda ol { list-style: none; margin: 0; padding: 0; }

.evt-agenda li {
    display: flex; gap: 20px; padding: 14px 0;
    border-bottom: 1px solid var(--on-line, #e2e8f0);
}

.evt-agenda li:last-child { border-bottom: 0; }

/* Fixed width so the titles line up into a column rather than stepping in and
   out with the length of each time. */
.evt-agenda-time {
    flex: 0 0 82px; font-size: 13.5px; font-variant-numeric: tabular-nums;
    color: var(--sec-brand, #0070ad); padding-top: 2px;
}

.evt-agenda-body strong { display: block; font-size: 15.5px; font-weight: 500; }
.evt-agenda-body small { display: block; margin-top: 3px; font-size: 13.5px; opacity: .75; }

/* --- Speakers ----------------------------------------------------------- */

.evt-speakers { margin-top: 36px; }

.evt-speaker-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}

.evt-speaker { display: flex; gap: 14px; align-items: flex-start; }

.evt-speaker img,
.evt-speaker-initials {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover;
}

.evt-speaker-initials {
    display: grid; place-items: center;
    background: var(--sec-soft, #eef6fb); color: var(--sec-brand, #0070ad);
    font-size: 17px; font-weight: 500; letter-spacing: .02em;
}

.evt-speaker strong { display: block; font-size: 15.5px; font-weight: 500; }
.evt-speaker small { display: block; font-size: 13px; opacity: .7; margin-top: 1px; }
.evt-speaker p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; opacity: .85; }

.evt-map { margin-top: 28px; }
.evt-map a { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; }

/* --- The form's new controls -------------------------------------------- */

.evt-field select {
    width: 100%; padding: 11px 34px 11px 13px; font-size: 15px;
    border: 1px solid var(--on-line, #e2e8f0); border-radius: 4px;
    background: #fff; color: #16202b;
    /* Room for the chevron, which is the same trap the admin selects hit. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236a7382'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}

html[data-theme="dark"] .evt-field select {
    background-color: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
    color: #e8ebf0;
}

html[data-theme="dark"] .evt-panel { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .evt-speaker-initials { background: rgba(255, 255, 255, .08); color: #6fb6e0; }

/* --------------------------------------------------------------------------
   People stories
   --------------------------------------------------------------------------
   A scroll-snap track rather than a carousel library. It swipes and scrolls
   before any script runs; the arrows only add a mouse-driven way to do the
   same thing.
   -------------------------------------------------------------------------- */

.talent-stories { padding-block: clamp(40px, 5vw, 72px); }

.ts-head { margin-bottom: clamp(20px, 3vw, 32px); }
.ts-head h2 { margin: 0 0 6px; }
.ts-head p { margin: 0; color: var(--sec-body, #4a5462); }

.ts-shell { position: relative; }

.ts-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: 14px;
    background: #fff;
    /* The track is focusable so the arrow keys work; the ring belongs on it. */
    scrollbar-width: none;
}

.ts-track::-webkit-scrollbar { display: none; }
.ts-track:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 3px; }

.ts-slide {
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: end;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(24px, 4vw, 52px);
    padding-bottom: 0;
    min-height: 340px;
}

.ts-copy { padding-bottom: clamp(24px, 4vw, 52px); align-self: center; }

/*
 * The quote marks are drawn rather than typed, so an editor writing in the
 * admin does not have to remember them and cannot end up with two sets.
 */
.ts-quote {
    margin: 0 0 clamp(20px, 3vw, 36px);
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1.45;
    color: var(--sec-brand, #0070ad);
    border: 0;
    padding: 0;
    quotes: '“' '”';
}

.ts-quote::before { content: open-quote; margin-right: 2px; }
.ts-quote::after  { content: close-quote; margin-left: 2px; }

.ts-name { margin: 0; font-weight: 600; font-size: 17px; }
.ts-role { margin: 2px 0 0; color: var(--sec-body, #4a5462); font-size: 15px; }

.ts-video {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: clamp(18px, 3vw, 30px);
    font-weight: 500;
}

.ts-video-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #0b2545;
    color: #57c7ff;
    transition: background .2s ease;
}

.ts-video-mark svg { width: 17px; height: 17px; }
.ts-video:hover .ts-video-mark { background: var(--sec-brand, #0070ad); color: #fff; }

/* --- The portrait and the shape behind it --------------------------------- */

.ts-figure { position: relative; align-self: end; min-height: 300px; }

/* Nothing to frame: the column collapses rather than leaving a tall gap where
   a portrait was meant to be. */
.ts-figure.is-empty { min-height: 0; }
.ts-slide:has(.ts-figure.is-empty) { grid-template-columns: minmax(0, 1fr); }

.ts-shape {
    position: absolute;
    right: 2%;
    bottom: 0;
    width: 70%;
    height: auto;
    max-height: 100%;
}

/*
 * Sized to leave the drawn shape visible around it.
 *
 * The section is built for a cut-out portrait — the help text on the field says
 * so — but it must not look broken when somebody uses an ordinary landscape
 * photo instead. Capping the width keeps the frame showing either way, and the
 * radius stops a rectangular photo reading as a raw block dropped on the card.
 */
.ts-photo {
    position: relative;
    display: block;
    margin-inline: auto;
    max-height: 330px;
    width: auto;
    max-width: 82%;
    border-radius: 10px;
    object-fit: contain;
    object-position: bottom;
}

/* --- Arrows ---------------------------------------------------------------- */

.ts-nav {
    position: absolute;
    right: clamp(16px, 3vw, 36px);
    bottom: clamp(16px, 3vw, 32px);
    display: flex;
    gap: 12px;
}

.ts-arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #0b2545;
    border-radius: 4px;
    background: rgba(255, 255, 255, .9);
    color: #0b2545;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.ts-arrow:hover { background: #0b2545; color: #fff; }

@media (max-width: 767.98px) {
    .ts-slide {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-bottom: clamp(24px, 4vw, 52px);
    }

    .ts-copy { padding-bottom: 0; }
    .ts-figure { min-height: 260px; order: -1; }
    .ts-nav { position: static; margin-top: 18px; justify-content: flex-end; }
}

/* ==========================================================================
   Six new section types
   ========================================================================== */

/* --- Pricing plans --------------------------------------------------------- */

.pricing-plans { padding-block: clamp(40px, 5vw, 72px); }
.pp-head { margin-bottom: clamp(22px, 3vw, 36px); max-width: 60ch; }
.pp-head h2 { margin: 0 0 8px; }
.pp-head p { margin: 0; color: var(--sec-body, #4a5462); }

.pp-grid {
    display: grid;
    grid-template-columns: repeat(var(--pp-count, 3), minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.pp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 12px;
    background: #fff;
}

/* The highlighted plan is raised rather than recoloured: a card in a different
   colour reads as a different kind of thing, not as the recommended one. */
.pp-card.is-featured {
    border-color: var(--sec-brand, #0070ad);
    box-shadow: 0 12px 32px rgba(0, 112, 173, .14);
}

.pp-flag {
    position: absolute;
    top: -12px;
    left: clamp(22px, 3vw, 32px);
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
    font-size: 12.5px;
    letter-spacing: .03em;
}

.pp-card h3 { margin: 0 0 4px; font-size: 20px; }
.pp-for { margin: 0 0 16px; font-size: 14.5px; color: var(--sec-muted, #6a7382); }

.pp-price { margin: 0 0 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pp-price strong { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.pp-price span { font-size: 14px; color: var(--sec-muted, #6a7382); }

.pp-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.pp-list li { display: flex; gap: 10px; align-items: flex-start; }
.pp-list i { margin-top: 4px; font-size: 12px; color: var(--sec-brand, #0070ad); }

.pp-btn {
    margin-top: auto;
    display: inline-block;
    text-align: center;
    padding: 12px 22px;
    border-radius: 8px;
    border: 1px solid var(--sec-brand, #0070ad);
    color: var(--sec-brand, #0070ad);
}

.pp-card.is-featured .pp-btn { background: var(--sec-brand, #0070ad); color: #fff; }
.pp-btn:hover { background: var(--sec-brand, #0070ad); color: #fff; }
.pp-note { margin: 18px 0 0; font-size: 13.5px; color: var(--sec-muted, #6a7382); }

/* --- Questions and answers -------------------------------------------------- */

.faq-section { padding-block: clamp(40px, 5vw, 72px); }
.faq-head { margin-bottom: clamp(20px, 3vw, 30px); max-width: 62ch; }
.faq-head h2 { margin: 0 0 8px; }
.faq-head p { margin: 0; color: var(--sec-body, #4a5462); }

.faq-list { display: grid; gap: 12px; max-width: 900px; }

.faq-item {
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary i { flex: 0 0 auto; font-size: 13px; color: var(--sec-brand, #0070ad); transition: transform .2s ease; }
.faq-item[open] > summary i { transform: rotate(45deg); }
.faq-item[open] > summary { border-bottom: 1px solid var(--sec-line, #dce6f5); }

.faq-answer { padding: 16px 20px; }
.faq-answer p { margin: 0 0 10px; color: var(--sec-body, #4a5462); }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- Comparison table ------------------------------------------------------- */

.comparison-table { padding-block: clamp(40px, 5vw, 72px); }
.ct-head { margin-bottom: clamp(20px, 3vw, 30px); max-width: 62ch; }
.ct-head h2 { margin: 0 0 8px; }
.ct-head p { margin: 0; color: var(--sec-body, #4a5462); }

/* Scrolls inside itself so a wide table never widens the page. */
.ct-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ct-table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; }

.ct-table th,
.ct-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sec-line, #dce6f5);
    font-size: 15px;
}

.ct-table thead th { font-weight: 600; border-bottom-width: 2px; }
.ct-table tbody th { font-weight: 500; }
.ct-table td { text-align: center; }
.ct-table thead th:not(:first-child) { text-align: center; }

.ct-table .is-highlight { background: var(--sec-soft, #eef6fb); }
.ct-yes { color: #1a7f37; }
.ct-no { color: var(--sec-muted, #6a7382); }

/* --- Offices ---------------------------------------------------------------- */

.locations-section { padding-block: clamp(40px, 5vw, 72px); }
.loc-head { margin-bottom: clamp(22px, 3vw, 34px); max-width: 60ch; }
.loc-head h2 { margin: 0 0 8px; }
.loc-head p { margin: 0; color: var(--sec-body, #4a5462); }

.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.loc-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.loc-photo { aspect-ratio: 16 / 9; overflow: hidden; }
.loc-photo img { width: 100%; height: 100%; object-fit: cover; }

.loc-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.loc-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sec-brand, #0070ad); }
.loc-card h3 { margin: 0; font-size: 19px; }
.loc-address { margin: 0; font-style: normal; color: var(--sec-body, #4a5462); font-size: 15px; }

.loc-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.loc-contact li { display: flex; align-items: center; gap: 9px; }
.loc-contact i { color: var(--sec-muted, #6a7382); font-size: 13px; }

.loc-map { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.loc-map i { font-size: 11px; }

/* --- Before and after -------------------------------------------------------- */

.before-after { padding-block: clamp(40px, 5vw, 72px); }
.ba-head { margin-bottom: clamp(20px, 3vw, 30px); max-width: 62ch; }
.ba-head h2 { margin: 0 0 8px; }
.ba-head p { margin: 0; color: var(--sec-body, #4a5462); }

.ba-figure { margin: 0; }
.ba-stack { position: relative; border-radius: 12px; overflow: hidden; line-height: 0; }
.ba-img { width: 100%; height: auto; display: block; }

/* The after image is clipped to the handle position. --ba-pos is set by the
   range input; with no script it stays at its rendered default. */
.ba-clip {
    position: absolute;
    inset: 0;
    width: var(--ba-pos, 50%);
    overflow: hidden;
}

.ba-clip .ba-img {
    position: absolute;
    inset: 0;
    width: auto;
    height: 100%;
    max-width: none;
}

.ba-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos, 50%);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
    pointer-events: none;
}

.ba-tag {
    position: absolute;
    top: 14px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(6, 20, 33, .72);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.4;
}

.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; }

/* The handle itself: a real range input, made to look like a grab bar. */
.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.ba-range::-webkit-slider-thumb {
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--sec-brand, #0070ad);
    cursor: ew-resize;
}

.ba-range::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--sec-brand, #0070ad);
    cursor: ew-resize;
}

.ba-range:focus-visible { outline: 3px solid var(--sec-brand, #0070ad); outline-offset: 3px; }
.ba-caption { margin: 12px 0 0; font-size: 14px; color: var(--sec-muted, #6a7382); }

/* --- Savings estimator -------------------------------------------------------- */

.savings-estimator { padding-block: clamp(40px, 5vw, 72px); }

.se-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: stretch;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.se-copy { padding: clamp(24px, 3vw, 38px); }
.se-copy h2 { margin: 0 0 8px; }
.se-copy > p { margin: 0 0 22px; color: var(--sec-body, #4a5462); }

.se-form { display: grid; gap: 16px; }
.se-field { display: grid; gap: 6px; }
.se-field label { font-size: 14.5px; color: var(--sec-body, #4a5462); }

.se-field input {
    padding: 11px 14px;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 8px;
    font: inherit;
    width: 100%;
}

.se-result {
    padding: clamp(24px, 3vw, 38px);
    background: var(--sec-soft, #eef6fb);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.se-result-label { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--sec-muted, #6a7382); }
.se-hours, .se-money { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.se-hours strong, .se-money strong { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; color: var(--sec-brand, #0070ad); }
.se-hours span, .se-money span { font-size: 14.5px; color: var(--sec-body, #4a5462); }

.se-assumption { margin: 10px 0 0; font-size: 14px; color: var(--sec-body, #4a5462); }

.se-btn {
    margin-top: 14px;
    align-self: flex-start;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
}

.se-btn:hover { background: var(--sec-brand-dark, #005490); color: #fff; }
.se-small { margin: 12px 0 0; font-size: 12.5px; color: var(--sec-muted, #6a7382); }

@media (max-width: 991.98px) {
    .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .se-panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .pp-grid { grid-template-columns: minmax(0, 1fr); }
    .ba-tag { font-size: 11.5px; padding: 4px 10px; }
}

/* ==========================================================================
   Careers calls to action
   ==========================================================================
   Built on class names nothing else in the codebase touches.

   These two buttons were .global-btn, which is styled across five stylesheets —
   custom.css sets its colour, laravel-dynamic.css its display, typography.css
   its weight, style.css adds `.cta a { padding: … !important }`, and the file
   bundled last quietly wins. Three attempts to fix an overflowing button by
   editing one of those files changed nothing, because each time a later file
   was still deciding.

   So this stops arguing with that cascade and steps out of it. `crx-` is a
   fresh prefix: no existing rule can match these elements, the closing band is
   no longer `.cta` so the !important padding cannot reach it, and the arrow is
   drawn inline rather than being an icon font glyph that may or may not exist.
   ========================================================================== */

.crx-btn {
    /*
     * inline-block on purpose, and stated here rather than inherited.
     *
     * A flex button cannot narrow past its own content — the label's item takes
     * its longest word as a minimum and an icon set to `flex: 0 0 auto` refuses
     * to shrink at all — so a narrow column pushes both out through the border.
     * Inline-block wraps like text and grows in height instead.
     */
    display: inline-block;
    max-width: 100%;
    padding: 14px 26px;
    border: 2px solid currentColor;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.crx-btn svg {
    width: 15px;
    height: 15px;
    margin-left: 10px;
    vertical-align: -2px;
    flex: none;
}

/* Solid, for a light panel — where a white ghost button was invisible. */
.crx-btn--solid,
.crx-btn--solid:hover,
.crx-btn--solid:focus {
    background: var(--sec-brand, #0070ad);
    border-color: var(--sec-brand, #0070ad);
    color: #fff;
}

.crx-btn--solid:hover {
    background: var(--sec-brand-dark, #005490);
    border-color: var(--sec-brand-dark, #005490);
}

/* Outlined, for the blue band. currentColor keeps border and glyph together. */
.crx-btn--onblue,
.crx-btn--onblue:focus { background: transparent; color: #fff; }
.crx-btn--onblue:hover { background: #fff; color: #0070ad; border-color: #fff; }

/* --- The closing band ------------------------------------------------------ */

.crx-closing {
    background: #0070ad;
    color: #fff;
    padding-block: clamp(36px, 5vw, 56px);
}

.crx-closing-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}

/* Wraps under the copy long before either can crowd the other. */
.crx-closing-copy { flex: 1 1 22rem; min-width: 0; }
.crx-closing-copy h2 { margin: 0 0 8px; color: #fff; font-size: clamp(22px, 2.4vw, 30px); }
.crx-closing-copy p { margin: 0; color: rgba(255, 255, 255, .88); }
.crx-closing-action { flex: 0 1 auto; }

/* --------------------------------------------------------------------------
   Why these buttons cannot overflow their card
   --------------------------------------------------------------------------
   Because a button is only as safe as the box it sits in.

   `max-width: 100%` on the button is measured against its parent, so it is no
   protection at all when that parent is a flex item that never shrinks: the
   item grows to the button's natural width, the card cannot contain it, and the
   button sails out through the right-hand edge while still, technically,
   being 100% of its parent. That is the shape of the bug in the screenshot, and
   it is why measuring the button against its immediate parent said "fits" while
   the card said otherwise.

   So the action wrapper is allowed to shrink (`min-width: 0` defeats the
   automatic minimum that flex items get), and the button sizes to its content
   only up to the space actually available. Past that the label wraps and the
   button grows downwards, which a card can always accommodate.
   -------------------------------------------------------------------------- */

.co-invite-action,
.crx-closing-action {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.co-invite .crx-btn,
.crx-closing .crx-btn {
    display: block;
    width: fit-content;
    max-width: 100%;
    /* A single unbreakable word longer than the card — a long German compound,
       a pasted URL — would still push through. It wraps instead. */
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    /* Full width once it is the only thing on its row: a button floating at
       one end of a narrow band reads as an afterthought. */
    .crx-closing-action { flex: 1 1 100%; }
    .crx-closing .crx-btn { width: 100%; }
    .co-invite-action { flex: 1 1 100%; }
}

/* ==========================================================================
   Testimonials
   ==========================================================================
   Rebuilt. The old markup borrowed `.events-sec` from the events section and
   carried two inline styles; restyling events would have silently restyled
   these, which is the kind of coupling nobody discovers deliberately.
   ========================================================================== */

.tst { padding-block: clamp(40px, 5vw, 72px); }

.tst-head { margin-bottom: clamp(22px, 3vw, 36px); max-width: 62ch; }
.tst-head h2 { margin: 0 0 8px; }
.tst-head p { margin: 0; color: var(--sec-body, #4a5462); }

/* --- The lead quote -------------------------------------------------------- */

.tst-lead {
    margin: 0 0 clamp(20px, 3vw, 32px);
    padding: clamp(26px, 4vw, 44px);
    border-radius: 14px;
    background: var(--sec-soft, #eef6fb);
}

.tst-lead blockquote {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    font-size: clamp(19px, 2.2vw, 27px);
    line-height: 1.45;
    color: var(--sec-ink, #0b1b28);
    quotes: '“' '”';
}

.tst-lead blockquote::before { content: open-quote; }
.tst-lead blockquote::after { content: close-quote; }

/* --- The grid -------------------------------------------------------------- */

.tst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 20px;
}

.tst-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 12px;
    background: #fff;
}

.tst-card blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sec-body, #4a5462);
    quotes: '“' '”';
}

.tst-card blockquote::before { content: open-quote; }
.tst-card blockquote::after { content: close-quote; }

/* --- Rating ---------------------------------------------------------------- */

.tst-rating { display: flex; gap: 3px; }
.tst-rating svg { width: 16px; height: 16px; fill: #d8dee7; }
.tst-rating svg.is-on { fill: #f0a500; }

/* --- Who said it ----------------------------------------------------------- */

.tst-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--sec-line, #dce6f5);
}

.tst-who--big { border-top-color: rgba(11, 27, 40, .12); }

.tst-face {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.tst-who--big .tst-face { width: 60px; height: 60px; }

.tst-who-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.tst-who-text strong { font-size: 15.5px; }
.tst-who--big .tst-who-text strong { font-size: 17px; }
.tst-who-text span { font-size: 14px; color: var(--sec-muted, #6a7382); }
.tst-link { font-size: 14px; font-weight: 500; margin-top: 4px; }

/* Sits at the far end, small: it is a mark of who they are, not a client logo
   wall in miniature. */
.tst-logo { flex: none; max-height: 30px; max-width: 96px; width: auto; object-fit: contain; opacity: .85; }

@media (max-width: 575.98px) {
    .tst-who { flex-wrap: wrap; }
    .tst-logo { max-height: 24px; }
}

/* ==========================================================================
   Ten more section types
   ========================================================================== */

/* --- Open roles ------------------------------------------------------------ */

.orl { padding-block: clamp(40px, 5vw, 72px); }
.orl-head { margin-bottom: clamp(20px, 3vw, 30px); max-width: 62ch; }
.orl-head h2 { margin: 0 0 8px; }
.orl-head p { margin: 0; color: var(--sec-body, #4a5462); }

.orl-row {
    display: flex;
    align-items: center;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 10px;
}

.orl-row:hover { border-color: var(--sec-brand, #0070ad); }
.orl-title { flex: 1 1 16rem; min-width: 0; }
.orl-title strong { display: block; font-size: 17px; }
.orl-title span { display: block; font-size: 14px; color: var(--sec-muted, #6a7382); margin-top: 2px; }

.orl-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14.5px; color: var(--sec-body, #4a5462); }
.orl-go { flex: none; width: 18px; height: 18px; color: var(--sec-brand, #0070ad); }
.orl-go svg { width: 100%; height: 100%; }
.orl-empty { margin: 0 0 14px; color: var(--sec-body, #4a5462); }
.orl-all { display: inline-block; margin-top: 8px; font-weight: 500; }

/* --- Countdown ------------------------------------------------------------- */

.cdn { padding-block: clamp(40px, 5vw, 72px); }

.cdn-panel {
    padding: clamp(26px, 4vw, 46px);
    border-radius: 14px;
    background: var(--sec-soft, #eef6fb);
    text-align: center;
}

.cdn-panel h2 { margin: 0 0 8px; }
.cdn-sub { margin: 0 auto 22px; max-width: 58ch; color: var(--sec-body, #4a5462); }

.cdn-clock { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 20px; }

.cdn-cell {
    min-width: 84px;
    padding: 14px 10px;
    border-radius: 10px;
    background: #fff;
}

.cdn-cell strong {
    display: block;
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.1;
    /* Tabular figures, or the whole row jitters every second as the digits
       change width. */
    font-variant-numeric: tabular-nums;
    color: var(--sec-brand, #0070ad);
}

.cdn-cell span { display: block; font-size: 13px; color: var(--sec-muted, #6a7382); margin-top: 4px; }
.cdn-when { margin: 18px 0 0; font-size: 14.5px; color: var(--sec-body, #4a5462); }
.cdn-done { margin: 0; font-size: clamp(18px, 2vw, 22px); color: var(--sec-ink, #0b1b28); }

.cdn-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
}

.cdn-btn:hover { background: var(--sec-brand-dark, #005490); color: #fff; }

/* --- Glossary --------------------------------------------------------------- */

.gls { padding-block: clamp(40px, 5vw, 72px); }
.gls-head { margin-bottom: 18px; max-width: 62ch; }
.gls-head h2 { margin: 0 0 8px; }
.gls-head p { margin: 0; color: var(--sec-body, #4a5462); }

.gls-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }

.gls-jump a {
    min-width: 34px;
    padding: 5px 9px;
    text-align: center;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 6px;
    font-size: 14px;
}

.gls-jump a:hover { background: var(--sec-brand, #0070ad); color: #fff; border-color: var(--sec-brand, #0070ad); }

.gls-group { scroll-margin-top: 90px; margin-bottom: 22px; }
.gls-letter { font-size: 15px; color: var(--sec-muted, #6a7382); margin: 0 0 8px; }
.gls-list { margin: 0; display: grid; gap: 14px; }
.gls-list dt { font-weight: 600; font-size: 16px; }
.gls-list dd { margin: 4px 0 0; color: var(--sec-body, #4a5462); max-width: 76ch; }
.gls-more { font-size: 13.5px; font-weight: 400; margin-left: 10px; }

/* --- On this page ----------------------------------------------------------- */

.toc { padding-block: clamp(20px, 3vw, 32px); }

.toc-box {
    padding: 18px 22px;
    border-left: 3px solid var(--sec-brand, #0070ad);
    background: var(--sec-soft, #eef6fb);
    border-radius: 0 10px 10px 0;
    max-width: 46rem;
}

.toc-title { margin: 0 0 10px; font-size: 16px; }
.toc-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.toc-list a { font-size: 15px; }
.toc-item--h3 { margin-left: 14px; font-size: 14.5px; }

/* Sticky is opt-in: on a short page it follows the reader down past the end of
   what it lists, which looks like a bug. */
@media (min-width: 992px) {
    .toc--sticky .toc-box { position: sticky; top: 96px; }
}

/* --- Self-assessment --------------------------------------------------------- */

.sck { padding-block: clamp(40px, 5vw, 72px); }

.sck-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(20px, 3vw, 40px);
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.sck-ask { padding: clamp(24px, 3vw, 38px); }
.sck-ask h2 { margin: 0 0 8px; }
.sck-ask > p { margin: 0 0 20px; color: var(--sec-body, #4a5462); }

.sck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sck-list label { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 15.5px; }
.sck-list input { margin-top: 4px; accent-color: var(--sec-brand, #0070ad); }

.sck-result {
    padding: clamp(24px, 3vw, 38px);
    background: var(--sec-soft, #eef6fb);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sck-score { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.sck-score strong { font-size: clamp(30px, 4vw, 44px); line-height: 1; color: var(--sec-brand, #0070ad); }
.sck-score span { font-size: 15px; color: var(--sec-body, #4a5462); }
.sck-say { margin: 6px 0 0; color: var(--sec-body, #4a5462); }

.sck-btn {
    align-self: flex-start;
    margin-top: 12px;
    padding: 11px 20px;
    border-radius: 8px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
}

.sck-btn:hover { background: var(--sec-brand-dark, #005490); color: #fff; }
.sck-small { margin: 10px 0 0; font-size: 12.5px; color: var(--sec-muted, #6a7382); }

/* --- Sticky steps ------------------------------------------------------------ */

.stk { padding-block: clamp(40px, 5vw, 72px); }
.stk-head { margin-bottom: clamp(20px, 3vw, 32px); max-width: 62ch; }
.stk-head h2 { margin: 0 0 8px; }
.stk-head p { margin: 0; color: var(--sec-body, #4a5462); }

.stk-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }

.stk-media { position: sticky; top: 96px; align-self: start; }
.stk-media img { width: 100%; height: auto; border-radius: 12px; display: block; }

.stk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 52px); }
.stk-step { display: flex; gap: 16px; }
.stk-no { font-size: 14px; font-weight: 600; color: var(--sec-brand, #0070ad); padding-top: 3px; }
.stk-step h3 { margin: 0 0 6px; font-size: 19px; }
.stk-step p { margin: 0; color: var(--sec-body, #4a5462); }
.stk-step-img { display: none; }

/* --- Story in depth ----------------------------------------------------------- */

.spl { padding-block: clamp(40px, 5vw, 72px); }
.spl-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 52px); }
.spl-eyebrow { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sec-brand, #0070ad); margin-bottom: 8px; }
.spl-copy h2 { margin: 0 0 6px; }
.spl-who { margin: 0 0 22px; color: var(--sec-muted, #6a7382); }
.spl-part { margin-bottom: 20px; }
.spl-part h3 { margin: 0 0 5px; font-size: 15px; color: var(--sec-brand, #0070ad); }
.spl-part p { margin: 0; color: var(--sec-body, #4a5462); max-width: 68ch; }

.spl-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 24px;
    border-radius: 8px;
    background: var(--sec-brand, #0070ad);
    color: #fff;
}

.spl-btn:hover { background: var(--sec-brand-dark, #005490); color: #fff; }
.spl-img { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 20px; }

.spl-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin: 0; }
.spl-numbers dt { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; color: var(--sec-brand, #0070ad); font-weight: 600; }
.spl-numbers dd { margin: 4px 0 0; font-size: 14px; color: var(--sec-muted, #6a7382); }

/* --- Notice -------------------------------------------------------------------- */

.ntc { padding-block: clamp(20px, 3vw, 34px); }

.ntc-box {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 10px;
    border-left: 4px solid currentColor;
    background: var(--sec-soft, #eef6fb);
}

.ntc-box--info { color: #0070ad; }
.ntc-box--success { color: #1a7f37; background: #eaf7ee; }
.ntc-box--warn { color: #9a6700; background: #fdf6e3; }
.ntc-box--stop { color: #b3261e; background: #fdecea; }

.ntc-mark { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.ntc-mark svg { width: 100%; height: 100%; }
.ntc-text { color: var(--sec-body, #4a5462); }
.ntc-text strong { display: block; margin-bottom: 4px; color: var(--sec-ink, #0b1b28); }
.ntc-text p { margin: 0; }
.ntc-text a { display: inline-block; margin-top: 8px; font-weight: 500; }

/* --- Certifications -------------------------------------------------------------- */

.crd { padding-block: clamp(40px, 5vw, 72px); }
.crd-head { margin-bottom: clamp(20px, 3vw, 30px); max-width: 62ch; }
.crd-head h2 { margin: 0 0 8px; }
.crd-head p { margin: 0; color: var(--sec-body, #4a5462); }

.crd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.crd-card {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--sec-line, #dce6f5);
    border-radius: 10px;
    background: #fff;
}

.crd-mark { flex: none; width: 46px; height: 46px; object-fit: contain; }
.crd-text { display: grid; gap: 3px; min-width: 0; }
.crd-text strong { font-size: 16px; }
.crd-issuer { font-size: 14px; color: var(--sec-body, #4a5462); }
.crd-valid { font-size: 13px; color: var(--sec-muted, #6a7382); }
.crd-check { font-size: 13.5px; font-weight: 500; margin-top: 4px; }

/* --- Code ------------------------------------------------------------------------ */

.cds { padding-block: clamp(40px, 5vw, 72px); }
.cds-head { margin-bottom: 18px; max-width: 62ch; }
.cds-head h2 { margin: 0 0 8px; }
.cds-head p { margin: 0; color: var(--sec-body, #4a5462); }

.cds-box { margin: 0; border-radius: 10px; overflow: hidden; background: #0b1b28; }

.cds-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .06);
    color: #c6d3e2;
    font-size: 13px;
}

.cds-copy {
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    padding: 4px 11px;
    cursor: pointer;
}

.cds-copy:hover { background: rgba(255, 255, 255, .14); }

.cds-pre {
    margin: 0;
    padding: 18px;
    overflow-x: auto;
    color: #e6edf3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.65;
    /* Long lines scroll rather than wrap: a wrapped line of code is a line
       somebody miscounts. */
    white-space: pre;
}

.cds-caption { margin: 10px 0 0; font-size: 13.5px; color: var(--sec-muted, #6a7382); }

@media (max-width: 991.98px) {
    .sck-panel,
    .stk-body,
    .spl-grid { grid-template-columns: minmax(0, 1fr); }

    /* Nothing to stick to in one column, and each step shows its own picture. */
    .stk-media { display: none; }
    .stk-step-img { display: block; width: 100%; height: auto; border-radius: 10px; margin-top: 14px; }
}

/* A form's "Email OTP" verification widget — partials/email-otp-field.blade.php */
.email-otp-widget { display: flex; flex-direction: column; gap: 10px; }
.email-otp-row { display: flex; flex-direction: column; gap: 8px; }
.email-otp-status { font-size: 13px; min-height: 1.2em; }
.email-otp-verified { font-size: 14px; font-weight: 600; }

/* ==== assets/css/header-tools.css ==== */
/* ==========================================================================
   Header tools — global search and language switcher
   --------------------------------------------------------------------------
   Kept in its own file rather than added to style.css: the existing theme CSS
   is the site's branding and stays untouched. Everything here is namespaced
   under .site-search / .site-locale so it cannot reach anything else.
   ========================================================================== */

:root {
    --hdr-brand: #0070ad;
    --hdr-brand-dark: #005a87;
    --hdr-ink: #0b1b28;
    --hdr-line: #e2e7ee;
    --hdr-soft: #eef6fb;
    /* Secondary text and the hover tint, used by the country selector. */
    --hdr-muted: #6a7382;
    --hdr-tint: #eef6fb;
}

/* --------------------------------------------------------------------------
   1. Triggers
   -------------------------------------------------------------------------- */

.site-search,
.site-locale { position: relative; list-style: none; }

.site-search-toggle,
.site-locale-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background .2s ease, color .2s ease;
}

.site-search-toggle:hover,
.site-locale-toggle:hover,
.site-search-toggle[aria-expanded="true"],
.site-locale-toggle[aria-expanded="true"] {
    background: rgba(0, 112, 173, .09);
    color: var(--hdr-brand);
}

.site-search-toggle:focus-visible,
.site-locale-toggle:focus-visible {
    outline: 2px solid var(--hdr-brand);
    outline-offset: 2px;
}

.site-locale-toggle span { font-size: 13.5px; font-weight: 400; letter-spacing: .03em; }
.site-locale-caret { font-size: 10px; opacity: .7; transition: transform .2s ease; }
.site-locale-toggle[aria-expanded="true"] .site-locale-caret { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   2. Language menu
   -------------------------------------------------------------------------- */

.site-locale-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--hdr-line);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(11, 27, 40, .13);
}

.site-locale-menu[hidden] { display: none; }
.site-locale-menu li { list-style: none; }

.site-locale-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 3px;
    font-size: 14.5px;
    color: var(--hdr-ink);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.site-locale-menu a:hover { background: var(--hdr-soft); color: var(--hdr-brand); }
.site-locale-menu a.is-active { background: var(--hdr-brand); color: #fff; }

.site-locale-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    min-width: 22px;
    opacity: .8;
}

/* On phones the header collapses into a stacked panel, where an absolutely
   positioned menu would sit on top of the links beneath it. */
@media (max-width: 991.98px) {
    .site-locale-menu { position: static; box-shadow: none; margin-top: 6px; width: 100%; }
}

/* --------------------------------------------------------------------------
   3. Search panel
   -------------------------------------------------------------------------- */

.site-search-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--hdr-line);
    box-shadow: 0 16px 34px rgba(11, 27, 40, .12);
    padding: 22px 0;
}

.site-search-panel[hidden] { display: none; }

.site-search-panel form {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.site-search-icon { position: absolute; left: 16px; color: #98a1ad; font-size: 15px; pointer-events: none; }

.site-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 16px 0 44px;
    font-size: 17px;
    color: var(--hdr-ink);
    background: #f7f9fc;
    border: 1px solid var(--hdr-line);
    border-radius: 4px;
}

.site-search-input:focus {
    outline: 0;
    background: #fff;
    border-color: var(--hdr-brand);
    box-shadow: 0 0 0 3px rgba(0, 112, 173, .14);
}

/* Chrome's own clear button sits awkwardly against the close control. */
.site-search-input::-webkit-search-cancel-button { display: none; }

.site-search-submit {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 4px;
    background: var(--hdr-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: background .2s ease;
}

.site-search-submit:hover { background: var(--hdr-brand-dark); }

.site-search-close {
    flex: 0 0 auto;
    width: 44px;
    height: 52px;
    border: 0;
    background: transparent;
    color: #6a7382;
    font-size: 19px;
    cursor: pointer;
}

.site-search-close:hover { color: var(--hdr-ink); }

@media (max-width: 575.98px) {
    .site-search-panel form { flex-wrap: wrap; }
    .site-search-input { flex: 1 1 100%; order: 1; }
    .site-search-icon { top: 18px; }
    .site-search-submit { order: 2; flex: 1 1 auto; }
    .site-search-close { order: 3; }
}

/* --------------------------------------------------------------------------
   4. Type-ahead
   -------------------------------------------------------------------------- */

.site-search-suggestions { margin-top: 12px; border-top: 1px solid var(--hdr-line); }
.site-search-suggestions[hidden] { display: none; }

.site-search-suggestion {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 6px;
    border-bottom: 1px solid #f1f4f8;
    color: var(--hdr-ink);
    text-decoration: none;
    font-size: 15px;
    transition: background .15s ease;
}

.site-search-suggestion:last-child { border-bottom: 0; }
.site-search-suggestion:hover,
.site-search-suggestion.is-active { background: var(--hdr-soft); color: var(--hdr-brand); }

.site-search-suggestion-kind {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hdr-brand);
    background: var(--hdr-soft);
    padding: 3px 8px;
    border-radius: 3px;
}

.site-search-empty { padding: 14px 6px; color: #6a7382; font-size: 14.5px; }

/* --------------------------------------------------------------------------
   5. Results page
   -------------------------------------------------------------------------- */

.srch-summary { color: #6a7382; margin-bottom: 22px; }

.srch-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }

.srch-tabs a {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 14.5px;
    color: #4a5462;
    background: #f2f5f9;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.srch-tabs a:hover { background: var(--hdr-soft); color: var(--hdr-brand); }
.srch-tabs a.is-active { background: var(--hdr-brand); color: #fff; }

.srch-hit {
    display: block;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--hdr-line);
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.srch-hit:hover { border-color: var(--hdr-brand); box-shadow: 0 8px 24px rgba(11, 27, 40, .07); }

.srch-hit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: #7a828f; }

.srch-hit-kind {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hdr-brand);
    background: var(--hdr-soft);
    padding: 3px 9px;
    border-radius: 3px;
}

.srch-hit h3 { font-size: 20px; margin: 9px 0 6px; color: var(--hdr-ink); }
.srch-hit:hover h3 { color: var(--hdr-brand); }
.srch-hit p { margin: 0; font-size: 15px; color: #5c6675; }

.srch-hit mark { background: #fff2b8; padding: 0 2px; }

.srch-empty { background: #fff; border: 1px solid var(--hdr-line); padding: 34px; text-align: center; }
.srch-empty h3 { font-size: 20px; margin-bottom: 8px; }
.srch-empty p { color: #6a7382; }

/* --------------------------------------------------------------------------
   6. Fitting into the existing header
   --------------------------------------------------------------------------
   Additions only — the theme's own header rules are left exactly as they are.
   -------------------------------------------------------------------------- */

/* The panel is positioned against the header. On the home page the theme
   already makes the header `position: absolute`, and that more specific rule
   still wins; this only covers the inner pages, where it had no position at
   all and the panel would otherwise anchor to the viewport. */
.site-header { position: relative; }

/* The header sits at z-index 2 on inner pages, below several page sections.
   Raised only while the panel is open, so the normal stacking order — and
   with it the sticky-header behaviour — is untouched the rest of the time. */
body.site-search-open .site-header { z-index: 1000; }

/* Over the home hero the header is transparent with white links; the default
   brand-on-tint hover would be unreadable there. */
.home-page .site-header .site-search-toggle,
.home-page .site-header .site-locale-toggle { color: #fff; }

.home-page .site-header .site-search-toggle:hover,
.home-page .site-header .site-locale-toggle:hover,
.home-page .site-header .site-search-toggle[aria-expanded="true"],
.home-page .site-header .site-locale-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* The menu and panel are white cards in both cases, so their own text colour
   has to be reasserted against the white-link rule above. */
.home-page .site-header .site-locale-menu a { color: var(--hdr-ink); }
.home-page .site-header .site-locale-menu a:hover { color: var(--hdr-brand); }
.home-page .site-header .site-locale-menu a.is-active { color: #fff; }
.home-page .site-header .site-search-panel a { color: var(--hdr-ink); }

/* The right-hand group is a flex row of <li>; the two new controls are
   buttons and need the same vertical rhythm as the links beside them. */
.site-header .right-menu ul .site-search,
.site-header .right-menu ul .site-locale { display: flex; align-items: center; }

@media (max-width: 991.98px) {
    .site-header .right-menu ul { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   7. Share row
   --------------------------------------------------------------------------
   The copy-link control became a <button>; it has to keep looking exactly
   like the anchors beside it.
   -------------------------------------------------------------------------- */

.share-links .share-copy {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    line-height: inherit;
}

/* The results h1 sits in a .heading block sized for h2s. */
.srch-summary + .srch-tabs { margin-top: 0; }
.career-apply .heading h1 { font-size: 32px; font-weight: 400; margin: 0; }

/* ==========================================================================
   8. Header behaviour
   --------------------------------------------------------------------------
   The mega menus are Bootstrap dropdowns, which toggle display:none/block —
   and display cannot be transitioned, so every menu appeared and vanished in
   one frame. Keeping them in the layout and animating opacity and position
   gives the same behaviour with a movement the eye can follow.

   They are absolutely positioned already, so leaving them displayed costs
   nothing in layout.
   ========================================================================== */

@media (min-width: 992px) {
    .site-header .mega-menu .dropdown-menu,
    .site-header .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    }

    .site-header .mega-menu .dropdown-menu.show,
    .site-header .nav-item .dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .22s ease, transform .22s ease, visibility 0s;
    }
}

/* The header changes background and shrinks its logo once it leaves the top;
   without a transition on the header itself that happened as a jump. */
.site-header {
    transition: background-color .28s ease, box-shadow .28s ease;
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header .mega-menu .dropdown-menu,
    .site-header .nav-item .dropdown-menu { transition: none; }
}

/* ==========================================================================
   9. The header stays put
   --------------------------------------------------------------------------
   The theme left the header in the flow on inner pages and only made it fixed
   past 120px on the home page, so the navigation scrolled away and then
   jumped back.

   position: fixed on every page, rather than sticky. Sticky is quietly
   defeated by an `overflow` on any ancestor, and this theme sets overflow in
   more than thirty places — fixed cannot be broken that way, which matters
   more here than staying in the flow.

   Inner pages therefore need the header's height back as padding on <body>.
   That height is measured at runtime (--hdr-h) rather than guessed, because
   it changes with the logo size, the breakpoint and the shrunk state.
   ========================================================================== */

/*
   The home page keeps a fixed header: it sits transparent over the hero, and
   losing the navigation on the way down a long landing page is worse than the
   space it costs.

   Inner pages do the opposite. The header scrolls away with the page and the
   breadcrumb bar takes over — on an article, where you are is worth keeping in
   reach; the whole navigation is not.
*/
.home-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

/*
   The navigation is white because it sits on the hero. That only works while
   the hero is actually behind it, and for a while it was not: the builder's
   section rhythm put 48px of page colour above the slide, so the header floated
   on a pale strip and, in light theme, vanished into it.

   The fix belongs with the slider, not here — see .home-slider in
   builder-sections.css, which now reaches the top of the page. A scrim across
   the header was the wrong answer to it: it made the navigation readable by
   putting a grey band over the top of the artwork, which is the thing the
   design is built around not doing.
*/

body:not(.home-page) .site-header { position: relative; z-index: 999; }

/* Past the threshold the theme adds .sticky-header. That is now purely about
   how the header looks — it has not moved.

   Solid rather than translucent-and-blurred: the blur smeared whatever the
   hero happened to be showing behind the navigation, and the bar has to be
   legible over any hero an editor uploads. */
.home-page .site-header.sticky-header {
    background: #0070ad;
    /* custom.css still blurred it. With a solid background the blur shows
       nothing, and it is not harmless: a backdrop-filter makes the header the
       containing block for its position:fixed children, so the phone drawer
       shrank to the header's height the moment the page scrolled. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Same trap, briefly: custom.css slides the header in with a transform, which
   squeezes an open drawer into the header for the length of the animation. */
@media (max-width: 991.98px) {
    .home-page .site-header.sticky-header { animation: none; }
}

/* Inner pages only. Over the home hero the header is part of the artwork,
   and a drop shadow on a transparent bar draws a grey smear across it. */
body:not(.home-page) .site-header.sticky-header { box-shadow: 0 6px 26px rgba(11, 27, 40, .12); }

/* An in-page anchor would otherwise land under the fixed bar. */
/* An in-page anchor must clear whatever is pinned above it — the header on
   home, the breadcrumb bar everywhere else. */
.home-page :target { scroll-margin-top: calc(var(--hdr-h, 84px) + 16px); }
body:not(.home-page) :target { scroll-margin-top: calc(var(--crumb-h, 46px) + 16px); }

/* ==========================================================================
   Utility bar
   --------------------------------------------------------------------------
   Contact, careers, the portal and the country selector. On their own line
   they stop competing with the sections people actually browse.
   ========================================================================== */

/* No rule under it: the utility row and the navigation are one header, and
   a line between them cut it into two bars. */
.site-topbar {
    font-size: 13.5px;
}

.site-topbar .container { display: flex; justify-content: flex-end; }

.site-topbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-topbar-links > li { list-style: none; }

.site-topbar-links > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--hdr-ink);
    border-radius: 4px;
    line-height: 1.2;
    transition: color .2s ease, background .2s ease;
}

.site-topbar-links > li > a:hover { color: var(--hdr-brand); background: var(--hdr-tint); }
.site-topbar-links > li > a > i { font-size: 12px; opacity: .75; }

/* The country selector lives here now; its trigger has to match the links
   beside it rather than the taller controls in the main bar. */
.site-topbar .site-locale-toggle { padding: 8px 12px; font-size: 13.5px; }
.site-topbar .site-region { display: flex; align-items: center; }

.home-page .site-topbar-links > li > a { color: rgba(255, 255, 255, .92); }
.home-page .site-topbar-links > li > a:hover { color: #fff; background: rgba(255, 255, 255, .16); }

@media (max-width: 991.98px) {
    /* The bar would wrap to two lines on a phone and push the logo down. The
       links are all reachable from the collapsed menu and the footer. */
    .site-topbar { display: none; }
}

/* ==========================================================================
   Breadcrumbs
   --------------------------------------------------------------------------
   Sticky on inner pages. The header above it scrolls away, so this is the one
   thing that stays: where you are, and the way back up.
   ========================================================================== */

.site-breadcrumbs {
    position: sticky;
    top: 0;
    z-index: 998;
    background: #fff;
    border-bottom: 1px solid var(--hdr-line);
    /* Only visible once it has actually stuck; a shadow while it sits in the
       flow reads as a floating bar for no reason. */
    box-shadow: 0 4px 18px rgba(11, 27, 40, 0);
    transition: box-shadow .25s ease;
}

.site-breadcrumbs.is-stuck { box-shadow: 0 4px 18px rgba(11, 27, 40, .09); }

.site-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    list-style: none;
    margin: 0;
    padding: 13px 0;
    font-size: 14px;
}

.site-breadcrumbs li { display: flex; align-items: center; gap: 6px; list-style: none; }

/* The separator is drawn rather than typed, so it is never read aloud as
   part of a link. */
.site-breadcrumbs li + li::before {
    content: "/";
    color: #b6bec9;
    font-size: 13px;
}

.site-breadcrumbs a { color: #5c6675; transition: color .2s ease; }
.site-breadcrumbs a:hover { color: var(--hdr-brand); text-decoration: underline; }

.site-breadcrumbs [aria-current="page"] { color: var(--hdr-ink); }

@media (max-width: 767.98px) {
    .site-breadcrumbs ol { padding: 10px 0; font-size: 13px; }

    /* On a phone the trail can be longer than the screen. It scrolls sideways
       rather than wrapping to three lines and eating the viewport. */
    .site-breadcrumbs ol {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .site-breadcrumbs ol::-webkit-scrollbar { display: none; }
    .site-breadcrumbs li { flex: 0 0 auto; }
}

/* ==========================================================================
   10. Dropdowns follow the cursor
   --------------------------------------------------------------------------
   The menus opened on click, which meant a deliberate press to see what is
   under a heading and another to close it. On a pointer they now open on
   hover; touch and keyboard keep the click, because hover does not exist
   there and a tap must not both open a menu and follow its link.
   ========================================================================== */

@media (min-width: 992px) and (hover: hover) {
    .site-header .nav-item.dropdown:hover > .dropdown-menu,
    .site-header .nav-item.dropdown:focus-within > .dropdown-menu,
    .site-header .menu-item-has-children:hover > .dropdown-menu,
    .site-header .menu-item-has-children:focus-within > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .2s ease, transform .2s ease, visibility 0s;
    }

    /* A gap between the trigger and the panel would drop the hover as the
       cursor crossed it; this bridges it without moving anything. */
    .site-header .nav-item.dropdown > .dropdown-menu::before,
    .site-header .menu-item-has-children > .dropdown-menu::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }
}

/* ==========================================================================
   Floating buttons
   --------------------------------------------------------------------------
   Both are optional, switched on in Website Settings → Features. They stack
   in the bottom-right corner and sit under the cookie bar (z-index 2000) so
   they can never cover the consent choice.
   ========================================================================== */

.site-float {
    position: fixed;
    right: 22px;
    z-index: 990;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(11, 27, 40, .22);
    transition: transform .2s ease, background .2s ease;
}

.site-float:hover { transform: translateY(-2px); color: #fff; }
.site-float:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-float[hidden] { display: none; }

.site-float--whatsapp { background: #25d366; }
.site-float--whatsapp:hover { background: #1eb757; }

/*
 * Position is the column's job now.
 *
 * These used to pin themselves to the bottom right individually, with one rule
 * meant to lift the back-to-top clear of the WhatsApp button. That rule named
 * `.site-float--top`, which nothing renders — the back-to-top is the theme's
 * `.go-top` — so the two simply sat on top of each other.
 */
.site-floats .site-float { position: static; right: auto; bottom: auto; }

@media (prefers-reduced-motion: reduce) {
    .site-float { transition: none; }
    .site-float:hover { transform: none; }
}

@media (max-width: 575.98px) {
    .site-float { right: 14px; width: 44px; height: 44px; font-size: 18px; }
    .site-float--whatsapp, .site-float--top { bottom: 14px; }
    .site-float--whatsapp ~ .site-float--top { bottom: 68px; }
}

/* The optional footer blurb, sat between the logo and the contact list. */
.site-footer .footer-about {
    margin: 14px 0 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
    max-width: 42ch;
}

/* Search results pager, matching the listing pagers elsewhere on the site. */
.srch-pager { margin-top: 34px; display: flex; justify-content: center; }
.srch-pager .pagination { gap: 6px; flex-wrap: wrap; }
.srch-pager .page-link {
    border: 1px solid #dfe6ee;
    border-radius: 3px;
    color: #0070ad;
    padding: 8px 14px;
    font-size: 14px;
}
.srch-pager .page-item.active .page-link { background: #0070ad; border-color: #0070ad; color: #fff; }
.srch-pager .page-item.disabled .page-link { color: #a9b2bd; background: #f6f8fb; }

/* ==========================================================================
   Country selector
   --------------------------------------------------------------------------
   Replaces the language switcher. Twelve countries in one column would run
   off the bottom of the viewport, so the panel is a grouped grid — the shape
   every large site converges on for this control.
   ========================================================================== */

.site-flag {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    /* A hairline, so a flag with a white edge (Japan, Singapore) still reads
       as a flag rather than bleeding into the surface behind it. */
    box-shadow: 0 0 0 1px rgba(11, 27, 40, .14);
}

.site-region-toggle { gap: 8px; }
.site-region-name { white-space: nowrap; }

/* The panel is wide, so it is anchored to the right edge of the header rather
   than the button, which would push it off-screen on a narrow laptop. */
.site-region-menu {
    right: 0;
    min-width: min(680px, calc(100vw - 32px));
    padding: 20px 22px 18px;
}

.site-region-head {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hdr-line);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hdr-muted);
}

.site-region-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px 22px;
}

.site-region-group h3 {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hdr-brand);
    margin: 0 0 6px;
    padding: 0 8px;
}

.site-region-group ul { list-style: none; padding: 0; margin: 0 0 14px; }

.site-region-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 3px;
    font-size: 14.5px;
    color: var(--hdr-ink);
    line-height: 1.3;
}

.site-region-menu a:hover { background: var(--hdr-tint); color: var(--hdr-brand); }

.site-region-menu a.is-active { background: var(--hdr-brand); color: #fff; }
.site-region-menu a.is-active em { color: rgba(255, 255, 255, .78); }
.site-region-menu a.is-active .site-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }

.site-region-menu a > span { flex: 1 1 auto; min-width: 0; }

/* The language is secondary — it answers "which one will I read this in?"
   without competing with the country name. */
.site-region-menu em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--hdr-muted);
    margin-top: 1px;
}

.site-region-menu a > i { flex: 0 0 auto; font-size: 12px; }

@media (max-width: 991.98px) {
    /* In the collapsed menu the panel is already inside a scrolling drawer,
       so it goes back to a single column and lets the drawer scroll. */
    .site-region-menu {
        position: static;
        min-width: 0;
        width: 100%;
        padding: 14px;
        box-shadow: none;
        margin-top: 6px;
        max-height: 46vh;
        overflow-y: auto;
    }

    .site-region-groups { grid-template-columns: 1fr; }
    .site-region-name { display: none; }
}

/* --------------------------------------------------------------------------
   The utility bar collapses on scroll
   --------------------------------------------------------------------------
   Contact, careers and the country selector are things you go looking for.
   The navigation is what you want in reach while reading, so once the page
   starts moving the top row folds away and gives its height back.

   grid-template-rows rather than height: the bar has no fixed height, and
   animating to 0fr collapses it without anyone measuring anything.
   -------------------------------------------------------------------------- */

.site-header .site-topbar {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .28s ease, opacity .2s ease;
}

/*
   Only clipped while collapsed. The 0fr collapse needs overflow:hidden to
   actually hide the row, but applying it at rest also clipped the country
   panel — which hangs below the bar — to nothing, so the selector opened and
   nothing appeared.
*/
.site-header.is-scrolled .site-topbar > .container { overflow: hidden; }

.site-header.is-scrolled .site-topbar {
    grid-template-rows: 0fr;
    opacity: 0;
    /* Removed from the tab order with it: a collapsed bar that can still be
       tabbed into scrolls the page back up on its own. */
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-topbar { transition: none; }
}

/* --------------------------------------------------------------------------
   The dark-mode logo
   --------------------------------------------------------------------------
   Both marks are in the markup and CSS shows one. The theme is decided in the
   browser, so choosing server-side would bake the wrong logo into a cached
   page — and the site is served from a page cache.

   With no dark logo uploaded, only the light one is rendered and the dark
   theme inverts it (see theme-dark.css). That works for a single-colour mark
   and not for one carrying brand colours, which is why the setting exists.
   -------------------------------------------------------------------------- */

.site-logo--dark { display: none; }

/* ==========================================================================
   The home header turns solid on hover
   --------------------------------------------------------------------------
   Over the hero the header is transparent with white links. The moment a
   dropdown opens, a white panel appears under a transparent bar and the two
   read as unrelated — so hovering the navigation gives the whole bar a white
   background and flips its type, which is what the reference does.

   :focus-within is included so the same thing happens for a keyboard.
   ========================================================================== */

@media (min-width: 992px) {
    .home-page .site-header:hover,
    .home-page .site-header:focus-within {
        background: #fff;
    }

    /* The utility bar rides along; it sits inside the same white bar. */
    .home-page .site-header:hover .site-topbar-links > li > a,
    .home-page .site-header:focus-within .site-topbar-links > li > a { color: var(--hdr-ink); }

    .home-page .site-header:hover .site-topbar-links > li > a:hover,
    .home-page .site-header:focus-within .site-topbar-links > li > a:hover {
        color: var(--hdr-brand);
        background: var(--hdr-tint);
    }

    /* The theme paints these white with !important for the transparent bar. */
    .home-page .site-header:hover li a,
    .home-page .site-header:focus-within li a { color: var(--hdr-ink) !important; }

    .home-page .site-header:hover li a:hover,
    .home-page .site-header:focus-within li a:hover,
    .home-page .site-header:hover li.current-menu-item > a,
    .home-page .site-header:focus-within li.current-menu-item > a { color: var(--hdr-brand) !important; }

    .home-page .site-header:hover .site-search-toggle,
    .home-page .site-header:focus-within .site-search-toggle,
    .home-page .site-header:hover .site-theme-toggle,
    .home-page .site-header:focus-within .site-theme-toggle,
    .home-page .site-header:hover .site-locale-toggle,
    .home-page .site-header:focus-within .site-locale-toggle { color: var(--hdr-ink); }

    .home-page .site-header:hover .site-search-toggle:hover,
    .home-page .site-header:focus-within .site-search-toggle:hover,
    .home-page .site-header:hover .site-theme-toggle:hover,
    .home-page .site-header:focus-within .site-theme-toggle:hover {
        background: var(--hdr-tint);
        color: var(--hdr-brand);
    }

    /* The home logo is the light mark, drawn for a dark bar. On the white one
       it needs the dark mark — which is the same swap the dark theme makes,
       in the other direction. */
    .home-page .site-header:hover .logo2,
    .home-page .site-header:focus-within .logo2 { display: none; }

    .home-page .site-header:hover .logo1,
    .home-page .site-header:focus-within .logo1 { display: block; }

    /* The burger is white for the transparent bar. */
    .home-page .site-header:hover .navbar-toggler .line,
    .home-page .site-header:focus-within .navbar-toggler .line { background: var(--hdr-ink); }
}

/* Past the scroll threshold the bar is already solid brand, so the hover
   state must not fight it. */
.home-page .site-header.sticky-header:hover,
.home-page .site-header.sticky-header:focus-within { background: #0070ad; }

.home-page .site-header.sticky-header:hover li a,
.home-page .site-header.sticky-header:focus-within li a { color: #fff !important; }

/*
 * ...but not the links inside a dropdown panel.
 *
 * The rule above is about the bar, and `li a` reaches everything under it —
 * including the mega menu, which is a pale panel. So opening the menu while
 * the header was stuck to the top turned every item in it white on white.
 * The header is hovered whenever the menu is open, so this was the normal
 * case rather than an edge one.
 */
.home-page .site-header.sticky-header:hover .dropdown-menu li a,
.home-page .site-header.sticky-header:focus-within .dropdown-menu li a,
.home-page .site-header.sticky-header:hover .dropdown-menu .mega-menu-item,
.home-page .site-header.sticky-header:focus-within .dropdown-menu .mega-menu-item { color: #2a3340 !important; }

.home-page .site-header.sticky-header:hover .dropdown-menu li a:hover,
.home-page .site-header.sticky-header:focus-within .dropdown-menu li a:hover { color: #0070ad !important; }

/* The brand-filled column inside the panel keeps its white type. */
.home-page .site-header.sticky-header:hover .dropdown-menu .about-menu-page a,
.home-page .site-header.sticky-header:focus-within .dropdown-menu .about-menu-page a { color: #fff !important; }

html[data-theme="dark"] .home-page .site-header.sticky-header:hover .dropdown-menu li a,
html[data-theme="dark"] .home-page .site-header.sticky-header:focus-within .dropdown-menu li a,
html[data-theme="dark"] .home-page .site-header.sticky-header:hover .dropdown-menu .mega-menu-item,
html[data-theme="dark"] .home-page .site-header.sticky-header:focus-within .dropdown-menu .mega-menu-item { color: #eef1f5 !important; }

.home-page .site-header.sticky-header:hover .site-topbar-links > li > a,
.home-page .site-header.sticky-header:focus-within .site-topbar-links > li > a { color: rgba(255, 255, 255, .92); }

.home-page .site-header.sticky-header:hover .site-search-toggle,
.home-page .site-header.sticky-header:focus-within .site-search-toggle,
.home-page .site-header.sticky-header:hover .site-theme-toggle,
.home-page .site-header.sticky-header:focus-within .site-theme-toggle,
.home-page .site-header.sticky-header:hover .site-locale-toggle,
.home-page .site-header.sticky-header:focus-within .site-locale-toggle { color: #fff; }

.home-page .site-header.sticky-header:hover .logo1,
.home-page .site-header.sticky-header:focus-within .logo1 { display: none; }

.home-page .site-header.sticky-header:hover .logo2,
.home-page .site-header.sticky-header:focus-within .logo2 { display: block; }

.home-page .site-header.sticky-header:hover .navbar-toggler .line,
.home-page .site-header.sticky-header:focus-within .navbar-toggler .line { background: #fff; }

/* ==========================================================================
   Skip link
   --------------------------------------------------------------------------
   Off-screen until focused. Clipped rather than display:none, because a
   hidden element cannot take focus and the link would never appear.
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 14px 22px;
    background: var(--hdr-brand);
    color: #fff;
    font-size: 15px;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* The target takes focus programmatically, so it must not draw a ring as
   though it were interactive. */
#main-content:focus { outline: none; }

/* ==========================================================================
   Mobile navigation
   --------------------------------------------------------------------------
   The drawer is defined here in full rather than layered over the theme's.
   Three stylesheets each had a hand in it — style.css positions it,
   laravel-dynamic.css resizes it, and these rules restyled it — and between
   them the open state depended on declarations in all three. Owning it
   outright means one place decides whether it is on screen.

   Bootstrap toggles .show; everything else follows from that.
   ========================================================================== */

@media (max-width: 991.98px) {

    .site-header .navbar-collapse {
        /* Always laid out, hidden by transform: a display:none element
           cannot animate, and the theme's slide-in depends on it. */
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: min(88vw, 380px);
        max-width: none;
        z-index: 1200;
        padding: 0;
        background: #fff;
        box-shadow: 24px 0 60px rgba(11, 27, 40, .22);
        transform: translateX(-100%);
        visibility: hidden;
        overflow: hidden;
        transition: transform .3s ease, visibility .3s ease;
    }

    /* Bootstrap sets an inline height while collapsing; the drawer is full
       height throughout, so that has to be ignored. */
    .site-header .navbar-collapse.collapsing { height: 100% !important; }

    .site-header .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
        padding: 0;
    }

    /* --- Head ----------------------------------------------------------- */

    .site-header .navbar-collapse .mobile-menu-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex: 0 0 auto;
        min-height: 68px;
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid var(--hdr-line);
        /* The theme's blue bar reading "Menu" told you nothing you did not
           already know from having tapped the burger. */
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

    .site-header .navbar-collapse .mnav-brand { display: inline-flex; align-items: center; }
    .site-header .navbar-collapse .mnav-brand img { max-height: 34px; width: auto; }

    .site-header .navbar-collapse .mnav-close {
        flex: 0 0 auto;
        /* See the note on round icon buttons in site-widgets.css: without this
           the theme's button padding decides the width, and 40px is a
           coincidence rather than a choice. */
        padding: 0;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: var(--hdr-tint);
        color: var(--hdr-ink);
        font-size: 18px;
        cursor: pointer;
    }

    .site-header .navbar-collapse .mnav-close:focus-visible {
        outline: 2px solid var(--hdr-brand);
        outline-offset: 2px;
    }

    /* --- The list ------------------------------------------------------- */

    /* Only the nav scrolls, so the brand and the utility links stay put and
       the way out is always on screen. */
    .site-header .navbar-collapse .navbar-nav {
        display: block !important;
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .site-header .navbar-collapse .navbar-nav > li {
        display: block;
        width: 100%;
        margin: 0;
        background: transparent;
        border-bottom: 1px solid #eef1f5;
    }

    /*
       Every link in the drawer, forced.

       The theme paints .home-page .site-header li a white for the transparent
       desktop header. In the drawer that is white on white — which is exactly
       what "the mobile menu is not visible" looks like.
    */
    .site-header .navbar-collapse .navbar-nav > li > a,
    .site-header .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 54px;
        padding: 14px 18px !important;
        font-size: 16.5px !important;
        font-weight: 400 !important;
        color: var(--hdr-ink) !important;
        text-transform: none;
    }

    .site-header .navbar-collapse .nav-link:active { background: var(--hdr-tint); }

    .site-header .navbar-collapse .dropdown-caret,
    .site-header .navbar-collapse .dropdown-icon {
        position: static;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        margin-left: auto;
        border-radius: 50%;
        background: var(--hdr-tint);
        color: var(--hdr-brand) !important;
        font-size: 11px;
        transform: rotate(-90deg);
        transition: transform .2s ease;
    }

    .site-header .navbar-collapse [aria-expanded="true"] .dropdown-caret,
    .site-header .navbar-collapse [aria-expanded="true"] .dropdown-icon { transform: rotate(0deg); }

    /* --- Submenus ------------------------------------------------------- */

    .site-header .navbar-collapse .mega-menu .dropdown-menu,
    .site-header .navbar-collapse .mega-menu .dropdown-menu .container,
    .site-header .navbar-collapse .sub-menu {
        position: static !important;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none !important;
        background: #f7f9fc !important;
    }

    .site-header .navbar-collapse .mega-menu .dropdown-menu:not(.show) { display: none; }

    .site-header .navbar-collapse .mega-menu-content .row { display: block; margin: 0; }
    .site-header .navbar-collapse .mega-menu-column { width: 100%; padding: 0; }

    .site-header .navbar-collapse .mega-menu-content ul,
    .site-header .navbar-collapse ul.sabmenu-list { margin: 0; padding: 0; list-style: none; }

    .site-header .navbar-collapse .mega-menu-content ul li a,
    .site-header .navbar-collapse ul.sabmenu-list a,
    .site-header .navbar-collapse .sub-menu li a {
        display: block;
        padding: 12px 18px 12px 32px;
        font-size: 15px;
        color: #4a5462 !important;
        border-bottom: 1px solid #eef1f5;
    }

    .site-header .navbar-collapse .mega-menu-column h3,
    .site-header .navbar-collapse .mega-menu-column > strong {
        display: block;
        padding: 14px 18px 6px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--hdr-muted) !important;
    }

    /* The promo card is a desktop flourish; on a phone it is a large image
       between the reader and the next link. */
    .site-header .navbar-collapse .mega-menu .nav-card,
    .site-header .navbar-collapse .mega-menu-card,
    .site-header .navbar-collapse .who-we-serve-card { display: none; }

    /* --- Search and theme ----------------------------------------------- */

    .site-header .navbar-collapse .right-menu {
        flex: 0 0 auto;
        width: 100%;
        padding: 12px 10px;
        border-top: 1px solid var(--hdr-line);
    }

    .site-header .navbar-collapse .right-menu ul {
        display: flex !important;
        gap: 6px;
        margin: 0;
        padding: 0;
    }

    .site-header .navbar-collapse .right-menu .site-search-toggle,
    .site-header .navbar-collapse .right-menu .site-theme-toggle {
        padding: 10px 14px;
        border-radius: 6px;
        background: var(--hdr-tint);
        color: var(--hdr-ink) !important;
    }

    .site-header .navbar-collapse .right-menu .theme-label { display: inline; }

    /* --- Foot: the utility links ---------------------------------------- */

    .site-header .navbar-collapse .mnav-foot {
        flex: 0 0 auto;
        width: 100%;
        max-height: 46vh;
        overflow-y: auto;
        border-top: 1px solid var(--hdr-line);
        background: #f7f9fc;
    }

    /* The bar itself is display:none at this width; this copy has to come
       back, and stack rather than sit in a row. */
    .mnav-foot .site-topbar { display: block; }
    .mnav-foot .site-topbar .container { display: block; padding: 6px 8px; max-width: none; }
    .mnav-foot .site-topbar-links { display: block; gap: 0; }

    .mnav-foot .site-topbar-links > li > a {
        padding: 12px 10px;
        font-size: 14.5px;
        border-radius: 6px;
        color: var(--hdr-ink) !important;
    }

    .mnav-foot .site-region { display: block; position: static; }
    .mnav-foot .site-locale-toggle {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 10px;
        color: var(--hdr-ink) !important;
    }

    .mnav-foot .site-region-name { display: inline; }
    .mnav-foot .site-locale-caret { margin-left: auto; }

    .mnav-foot .site-region-menu {
        position: static;
        width: 100%;
        min-width: 0;
        padding: 0 10px 10px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .mnav-foot .site-region-groups { grid-template-columns: 1fr; }
}

/* Desktop keeps the drawer parts out of the way entirely. */
@media (min-width: 992px) {
    .mobile-menu-title,
    .mnav-foot { display: none !important; }
}

/* ==========================================================================
   Mega menu — the two ways it opens
   --------------------------------------------------------------------------
   The panel is revealed by `.mega-menu:hover`, with a fade from opacity 0.
   But the trigger also carries `data-bs-toggle="dropdown"`, so Bootstrap opens
   it on click and on keyboard focus by adding `.show` — and nothing here
   answered that. The panel was displayed and completely transparent: present,
   focusable, and invisible. Which is why the menu "sometimes" did not appear —
   it depended on whether you clicked or hovered.
   ========================================================================== */
.site-header .mega-menu .dropdown-menu.show,
.site-header .mega-menu.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Over the home hero the header's links are white so they read against the
   photograph. The rule reaches into the dropdown as well, where the panel is
   pale — making a link vanish at the moment you point at it. The panel has its
   own colours; the transparent-header rule stops at its edge. */
.home-page .site-header .dropdown-menu li a,
.home-page .site-header .dropdown-menu li a:hover {
    color: #454545 !important;
}

.home-page .site-header .dropdown-menu li a:hover { color: #0d6efd !important; }

/* The panel's own dark column keeps its white type. */
.home-page .site-header .dropdown-menu .about-menu-page a,
.home-page .site-header .dropdown-menu .about-menu-page a:hover { color: #fff !important; }

/* ==========================================================================
   Mega menu — panel colours and column count
   --------------------------------------------------------------------------
   The panel and the links inside it were coloured by separate rules that did
   not agree in light mode: the panel is a pale surface, and the links resolved
   to the dark theme's near-white ink. White on white, so a menu of twenty
   solutions read as an empty box.

   Stated here as a pair, both themes, so the surface and the text on it can
   only be changed together.
   ========================================================================== */
.site-header .mega-menu .dropdown-menu > .container { background: #f8fafc; }

.site-header .mega-menu .dropdown-menu a.mega-menu-item,
.site-header .mega-menu .dropdown-menu span.mega-menu-item,
.site-header .mega-menu .dropdown-menu .sabmenu-list a { color: #2a3340 !important; }

.site-header .mega-menu .dropdown-menu a.mega-menu-item:hover,
.site-header .mega-menu .dropdown-menu .sabmenu-list a:hover { color: #0070ad !important; }

/* The dark column inside the panel keeps its own white type. */
.site-header .mega-menu .dropdown-menu .about-menu-page,
.site-header .mega-menu .dropdown-menu .about-menu-page a,
.site-header .mega-menu .dropdown-menu .about-menu-page h4,
.site-header .mega-menu .dropdown-menu .about-menu-page p { color: #fff !important; }

html[data-theme="dark"] .site-header .mega-menu .dropdown-menu > .container { background: #12161d; }

html[data-theme="dark"] .site-header .mega-menu .dropdown-menu a.mega-menu-item,
html[data-theme="dark"] .site-header .mega-menu .dropdown-menu span.mega-menu-item,
html[data-theme="dark"] .site-header .mega-menu .dropdown-menu .sabmenu-list a { color: #eef1f5 !important; }

/* --------------------------------------------------------------------------
   Twenty solutions in one column runs off the bottom of the screen. The list
   was already meant to be two columns — `width: 50%` on the items — but the
   list is a block, so each item took a line of its own regardless.

   CSS columns rather than a grid: the items are a single flow and should fill
   the first column before starting the second, which is how somebody reads a
   list of names.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .site-header .mega-menu-column > ul {
        column-count: 2;
        column-gap: 32px;
    }

    .site-header .mega-menu-column > ul > li {
        break-inside: avoid;
        width: 100%;
    }

    /* A section with sub-items needs the room, so those stay full width. */
    .site-header .mega-menu-column > ul:has(> li.has-children) { column-count: 1; }
}

/* ==========================================================================
   Mega menu — the two-level list
   --------------------------------------------------------------------------
   What We Do shows four pillars, each with its services in a panel beside it.
   Three things made that read as broken rather than as two levels:

     - The chevron was `float: right` on a 90%-wide anchor, so it sat against
       the far edge of the column with a hand's width of nothing between it and
       the word it belonged to.
     - The hover underline was drawn at 100% of that same anchor, so pointing
       at "Technology" underlined the width of the column.
     - The flyout starts at 50% of the panel and is 50% wide, which is right,
       but nothing marked the parent as the one being shown.
   ========================================================================== */
@media (min-width: 992px) {
    .site-header .mega-menu-content a {
        display: block;
        width: auto;
    }

    /* Next to the label. `float` took it out of the flow, which is what let it
       drift to the far edge — an inline mark after the text cannot. */
    .site-header .mega-menu-list.has-children > a {
        align-items: center;
        display: inline-flex;
        gap: 6px;
        /* Beside the label, not at the edge of the column. space-between put
           it against the far side, which is what made it read as belonging to
           nothing. */
        justify-content: flex-start;
        width: auto;
    }

    .site-header .mega-menu-list.has-children > a::after {
        float: none;
        flex: 0 0 auto;
        font-size: 18px;
        line-height: 1;
        opacity: .55;
    }

    /* The underline belongs to the words, so it is drawn under them rather
       than under the column they sit in. */
    .site-header .mega-menu-content a::before { width: 0; }
    .site-header .mega-menu-content a:hover::before { width: 100%; }

    .site-header .mega-menu-list.has-children > a::before { display: none; }

    /* The pillar whose services are showing is marked, so the two halves of
       the panel are visibly connected. */
    .site-header .mega-menu-list.has-children:hover > a {
        color: #0070ad !important;
    }

    .site-header .mega-menu-list.has-children:hover > a::after {
        opacity: 1;
        transform: rotate(90deg);
    }

    /* A little air between the two levels, and a rule to separate them. */
    .site-header ul.sabmenu-list {
        border-left: 1px solid #e6ebf1;
        padding-left: 28px;
        top: 0;
    }

    html[data-theme="dark"] .site-header ul.sabmenu-list { border-left-color: #232a35; }
}

/* ==========================================================================
   Drawer navigation — one level at a time
   --------------------------------------------------------------------------
   Below 992px the mega menu is replaced by a drill-down: the drawer shows one
   pane, tapping a section slides the next one in from the right, and Back
   slides it out again.

   The panes are siblings, all absolutely positioned in the same box, and only
   the active one is visible. Nesting them would have made a parent's slide
   drag its children along with it.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* The desktop list is still in the markup for width changes and for the
       fallback menu; where the drawer has its own navigation, it steps aside.
       !important because the rule it overrides uses it too. */
    .site-header .navbar-collapse.has-mnav .navbar-nav { display: none !important; }

    .site-header .navbar-collapse .mnav {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;   /* or the panes push the drawer's foot off the screen */
        overflow: hidden;
    }

    .site-header .navbar-collapse .mnav-pane {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        transform: translateX(100%);
        /* visibility, not display: a pane that is display:none cannot animate,
           and it also keeps off-screen links away from a screen reader and out
           of the tab order. */
        visibility: hidden;
        transition: transform .28s ease, visibility .28s ease;
    }

    .site-header .navbar-collapse .mnav-pane.is-active {
        transform: translateX(0);
        visibility: visible;
    }

    /* The pane you came from, held just off the left edge so the movement
       reads as going deeper into one thing rather than jumping between two. */
    .site-header .navbar-collapse .mnav-pane.is-past { transform: translateX(-22%); }

    /* --- Rows ------------------------------------------------------------ */

    .site-header .navbar-collapse .mnav-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-header .navbar-collapse .mnav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 54px;
        margin: 0;
        padding: 14px 18px;
        border: 0;
        border-bottom: 1px solid #eef1f5;
        border-radius: 0;
        background: transparent;
        color: var(--hdr-ink) !important;
        font-size: 16.5px;
        font-weight: 400;
        line-height: 1.35;
        text-align: left;
        text-decoration: none;
        text-transform: none;
    }

    .site-header .navbar-collapse .mnav-row:active { background: var(--hdr-tint); }

    .site-header .navbar-collapse .mnav-row:focus-visible {
        outline: 2px solid var(--hdr-brand);
        outline-offset: -2px;
    }

    /* The chevron that means "there is more inside this". */
    .site-header .navbar-collapse .mnav-more > i {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--hdr-tint);
        color: var(--hdr-brand);
        font-size: 11px;
    }

    .site-header .navbar-collapse .mnav-row[aria-current="page"] {
        color: var(--hdr-brand) !important;
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--hdr-brand);
    }

    /* --- The section's own page ------------------------------------------ */

    .site-header .navbar-collapse .mnav-overview {
        color: var(--hdr-brand) !important;
        font-weight: 600;
    }

    .site-header .navbar-collapse .mnav-overview > i { font-size: 12px; }

    /* --- Headings --------------------------------------------------------- */

    .site-header .navbar-collapse .mnav-heading {
        display: block;
        padding: 18px 18px 6px;
        color: var(--hdr-muted);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    /* --- Back ------------------------------------------------------------- */

    .site-header .navbar-collapse .mnav-crumb {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        padding: 10px 14px;
        background: #f7f9fc;
        border-bottom: 1px solid var(--hdr-line);
    }

    .site-header .navbar-collapse .mnav-back {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px 8px 8px;
        border: 0;
        border-radius: 8px;
        background: #fff;
        color: var(--hdr-brand);
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .site-header .navbar-collapse .mnav-back:focus-visible {
        outline: 2px solid var(--hdr-brand);
        outline-offset: 2px;
    }

    .site-header .navbar-collapse .mnav-crumb-title {
        min-width: 0;
        overflow: hidden;
        color: var(--hdr-ink);
        font-size: 14.5px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (prefers-reduced-motion: reduce) {
        .site-header .navbar-collapse .mnav-pane { transition: none; }
    }
}

/* The drawer navigation is for the drawer; the mega panel takes over here. */
@media (min-width: 992px) {
    .mnav { display: none !important; }
}

/* Dark theme: the drawer's surfaces, stated with its text so the two cannot
   drift apart the way the mega panel's did. */
html[data-theme="dark"] .site-header .navbar-collapse .mnav-pane { background: #101821; }
html[data-theme="dark"] .site-header .navbar-collapse .mnav-row { border-bottom-color: #1e2937; }
html[data-theme="dark"] .site-header .navbar-collapse .mnav-crumb {
    background: #0b1219;
    border-bottom-color: #1e2937;
}
html[data-theme="dark"] .site-header .navbar-collapse .mnav-back { background: #17212c; }

/* ==== assets/css/site-widgets.css ==== */
/* ==========================================================================
   Floating widgets — the WhatsApp button and its pre-chat panel
   --------------------------------------------------------------------------
   The button itself is styled by the theme (.site-float). What is here is the
   panel it opens: a short form whose answers become the opening message.
   ========================================================================== */

/* ==========================================================================
   Round icon buttons
   --------------------------------------------------------------------------
   The theme styles every <button> with `padding: 14px 20px`. With border-box
   sizing that padding is a floor, not a suggestion: a 28px button becomes
   40px wide and 28px tall, and `border-radius: 50%` turns it into an oval.

   Stated once here for every small round control in this file, because the
   symptom — a slightly egg-shaped close button — is easy to look straight
   past and impossible to explain from the rule that sets the size.
   ========================================================================== */

.wa-close,
.wa-avatar,
.site-float-toggle,
.site-announce-close,
.site-announce-mark,
.site-float {
    padding: 0;
    /* Also fixed against a flex parent squeezing them: `flex: 0 0 auto` keeps
       the declared size when the row runs out of room. */
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* ==========================================================================
   The floating column
   --------------------------------------------------------------------------
   One fixed container owns the bottom-right corner; everything in it is laid
   out by flex, so no two buttons can overlap however many are switched on.

   column-reverse means the first child sits lowest. The back-to-top is last
   in the markup and therefore highest, which matters because it is the one
   that appears and disappears on scroll — nothing under it moves when it does.
   ========================================================================== */

.site-floats {
    position: fixed;
    right: 22px;
    bottom: 22px;
    /*
     * Above the header (999) and the sticky breadcrumb bar (998), below the
     * cookie banner (2000).
     *
     * This is a stacking context — fixed, with a z-index — so the panel's own
     * z-index only competes with its siblings inside it. The whole group is
     * judged on this one number, which is why a panel at 1090 was still being
     * painted over by breadcrumbs at 998: it never got to make the comparison.
     */
    z-index: 1010;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
}

/* Static, so the pre-chat panel below resolves against the whole column
   rather than against this one button. */
.wa-widget { position: static; }

.site-float--contact { background: #0070ad; }
.site-float--contact:hover { background: #005a87; }

/* The theme's back-to-top, taken out of its own fixed corner and put in the
   column. Its script still toggles `.active`; only the placement changed. */
.site-floats .go-top {
    position: static;
    right: auto;
    bottom: auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    line-height: 1;
    box-shadow: 0 6px 22px rgba(11, 27, 40, .22);
}

/* Hidden means gone from the column, not merely transparent: an invisible
   40px gap above the other buttons reads as a mistake. */
.site-floats .go-top:not(.active) { display: none; }

/* A label on hover, so a column of icons is not a guessing game. */
.site-float-tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 6px;
    background: #0b1b28;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.site-float { position: relative; }
.site-float:hover .site-float-tip,
.site-float:focus-visible .site-float-tip { opacity: 1; }

.wa-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 1090;
    width: min(340px, calc(100vw - 40px));
    /*
     * Never taller than the room above the button.
     *
     * The panel grows from the bottom up, so a long list of questions pushed
     * its head off the top of the window and underneath the fixed site header
     * — the heading and the close button ended up behind the navigation.
     * --hdr-h is published by the header script, so this follows the header
     * rather than guessing at it.
     */
    max-height: min(72vh, calc(100vh - var(--hdr-h, 80px) - 110px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(11, 27, 40, .3);
}

.wa-panel[hidden] { display: none; }

/* --- Head ---------------------------------------------------------------
   Who is on the other end. A panel that opens with nothing but form fields
   reads as an autoresponder, and the reply time is the single most useful
   thing you can say before somebody decides whether to bother.
   --------------------------------------------------------------------- */

.wa-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 16px 16px 0 0;
    /* WhatsApp's own green, so the panel looks like what the button promised. */
    background: linear-gradient(135deg, #128c7e 0%, #0f7f70 60%, #0c6c60 100%);
    color: #fff;
}

.wa-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 19px;
}

.wa-head-text { flex: 1 1 auto; min-width: 0; }

.wa-title { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; }

.wa-reply {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    font-size: 12px;
    opacity: .92;
}

.wa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ef0a6;
    box-shadow: 0 0 0 3px rgba(126, 240, 166, .25);
}

.wa-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.wa-close:hover { background: rgba(255, 255, 255, .32); }

/* --- Body ---------------------------------------------------------------- */

.wa-body { padding: 16px; }
.wa-body[hidden] { display: none; }

/* The intro set as an incoming message, because that is what it is: the first
   thing said in the conversation. */
.wa-bubble {
    position: relative;
    margin: 0 0 16px;
    padding: 11px 13px;
    border-radius: 4px 12px 12px 12px;
    background: #f0f4f7;
    color: #2a3340;
    font-size: 13.5px;
    line-height: 1.5;
}

.wa-fields { display: grid; gap: 12px; }

.wa-field label {
    display: block;
    margin-bottom: 5px;
    color: #2a3340;
    font-size: 13px;
    font-weight: 600;
}

.wa-req { margin-left: 2px; color: #b3261e; }

.wa-field input,
.wa-field select,
.wa-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dde4ec;
    border-radius: 10px;
    background: #fff;
    color: #2a3340;
    font: inherit;
    font-size: 14px;
}

.wa-field input:focus,
.wa-field select:focus,
.wa-field textarea:focus {
    outline: none;
    border-color: #128c7e;
    box-shadow: 0 0 0 3px rgba(18, 140, 126, .16);
}

.wa-field textarea { resize: vertical; min-height: 74px; }

/* Off-screen rather than display:none: a field that is not displayed is
   skipped by the robots this is meant to catch. */
.wa-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wa-error {
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 8px;
    background: #fdeceb;
    color: #b3261e;
    font-size: 12.5px;
}

.wa-error[hidden] { display: none; }

.wa-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: #25d366;
    color: #06301f;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    transition: background .16s ease, transform .16s ease;
}

.wa-send:hover:not(:disabled) { background: #1fbe5a; transform: translateY(-1px); }
.wa-send:disabled { opacity: .7; cursor: default; }
.wa-send-label { display: inline-flex; align-items: center; gap: 8px; }
.wa-send-label[hidden], .wa-sending[hidden] { display: none; }

.wa-note {
    margin: 10px 0 0;
    color: #6b7a8d;
    font-size: 11.5px;
    text-align: center;
}

/* --- The receipt --------------------------------------------------------
   Shown in place of the questions. Closing the panel on success would look
   exactly like closing it on failure.
   --------------------------------------------------------------------- */

.wa-done { padding: 28px 20px 22px; text-align: center; }
.wa-done[hidden] { display: none; }

.wa-done-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e6f7ec;
    color: #12866a;
    font-size: 20px;
}

.wa-done-title { margin: 0 0 6px; color: #101a26; font-size: 17px; font-weight: 600; }
.wa-done-text { margin: 0; color: #4a5462; font-size: 13.5px; line-height: 1.55; }

.wa-done-close {
    margin-top: 18px;
    padding: 9px 20px;
    border: 1px solid #dde4ec;
    border-radius: 999px;
    background: #fff;
    color: #2a3340;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
}

.wa-done-close:hover { border-color: #128c7e; color: #128c7e; }

/* On a phone the panel is measured from the screen, not from the button. */
@media (max-width: 575.98px) {
    .site-floats { right: 14px; bottom: 14px; gap: 10px; }

    .wa-panel {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: 10px;
        width: auto;
        /* Measured from the screen, not from the button it hangs off, so the
           buttons cannot push it into the header. */
        max-height: min(86vh, calc(100vh - var(--hdr-h, 60px) - 16px));
    }
}

html[data-theme="dark"] .wa-panel { background: #131c26; }
html[data-theme="dark"] .wa-bubble { background: #1b2735; color: #dbe2ea; }
html[data-theme="dark"] .wa-field label { color: #e6ebf2; }
html[data-theme="dark"] .wa-field input,
html[data-theme="dark"] .wa-field select,
html[data-theme="dark"] .wa-field textarea {
    border-color: #26323f;
    background: #0e1620;
    color: #e6ebf2;
}
html[data-theme="dark"] .wa-note { color: #8e9bab; }
html[data-theme="dark"] .wa-error { background: #3a1a18; color: #ef8078; }
html[data-theme="dark"] .wa-done-title { color: #eef2f7; }
html[data-theme="dark"] .wa-done-text { color: #b7c2d0; }
html[data-theme="dark"] .wa-done-mark { background: #10352a; color: #4cc79f; }
html[data-theme="dark"] .wa-done-close { border-color: #26323f; background: #0e1620; color: #e6ebf2; }

/* ==========================================================================
   Announcement bar
   --------------------------------------------------------------------------
   Above everything, on every page, so it has to earn the room: a mark saying
   what kind of message it is, the message, and one button.

   It was a flat band with the call to action underlined inside the sentence.
   An underline in running text does not read as the thing to press, and that
   one press is the bar's whole purpose.
   ========================================================================== */

.site-announce {
    position: relative;
    z-index: 1060;
    font-size: 14px;
    line-height: 1.45;
}

.site-announce[hidden] { display: none; }

.site-announce .container {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.site-announce-mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .17);
    font-size: 13px;
}

.site-announce-text { flex: 1 1 auto; margin: 0; min-width: 0; }

.site-announce-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: #0b1b28;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease;
}

.site-announce-action:hover {
    color: #0b1b28;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

.site-announce-action i { font-size: 11px; transition: transform .16s ease; }
.site-announce-action:hover i { transform: translateX(3px); }

.site-announce-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    opacity: .75;
    transition: background .16s ease, opacity .16s ease;
}

.site-announce-close:hover { background: rgba(255, 255, 255, .18); opacity: 1; }

/* --- Colours ---------------------------------------------------------------
   Each is a gradient across the same 90deg so they read as one family rather
   than as twelve unrelated bars. Nine carry white text; the three light ones
   below reverse to dark, because white on amber or sand fails contrast at this
   size and is the kind of thing that only shows up outdoors on a phone.
   ------------------------------------------------------------------------ */

.site-announce--brand    { background: linear-gradient(90deg, #005a8d 0%, #0070ad 55%, #0086cf 100%); color: #fff; }
.site-announce--midnight { background: linear-gradient(90deg, #0b1440 0%, #172a63 60%, #22408c 100%); color: #fff; }
.site-announce--dark     { background: linear-gradient(90deg, #06121b 0%, #0b1b28 60%, #143246 100%); color: #fff; }
.site-announce--accent   { background: linear-gradient(90deg, #0d6b55 0%, #12866a 60%, #17a184 100%); color: #fff; }
.site-announce--teal     { background: linear-gradient(90deg, #07555f 0%, #0b6e7b 60%, #0e8a99 100%); color: #fff; }
.site-announce--violet   { background: linear-gradient(90deg, #3b2178 0%, #52309e 60%, #6b45c4 100%); color: #fff; }
.site-announce--plum     { background: linear-gradient(90deg, #5a1146 0%, #77195f 60%, #96227a 100%); color: #fff; }
.site-announce--crimson  { background: linear-gradient(90deg, #8a1220 0%, #a8182a 60%, #c62236 100%); color: #fff; }
.site-announce--sunset   { background: linear-gradient(90deg, #a63a12 0%, #c85018 60%, #e46a25 100%); color: #fff; }

/* The light three. Everything that assumed white text has to be restated. */
.site-announce--warning { background: linear-gradient(90deg, #e9a52a 0%, #f2b134 55%, #f7c25c 100%); color: #3a2a05; }
.site-announce--sand    { background: linear-gradient(90deg, #ded2b8 0%, #e8dfc9 55%, #f2ecdb 100%); color: #3a3428; }
.site-announce--light   { background: linear-gradient(90deg, #dfe4ea 0%, #eaeef3 55%, #f4f7fa 100%); color: #24303d; }

.site-announce--warning .site-announce-mark,
.site-announce--sand .site-announce-mark,
.site-announce--light .site-announce-mark { background: rgba(0, 0, 0, .1); }

.site-announce--warning .site-announce-close:hover,
.site-announce--sand .site-announce-close:hover,
.site-announce--light .site-announce-close:hover { background: rgba(0, 0, 0, .12); }

/* A white pill on a light bar disappears, so it inverts. */
.site-announce--warning .site-announce-action,
.site-announce--sand .site-announce-action,
.site-announce--light .site-announce-action { background: #24303d; color: #fff; }

.site-announce--warning .site-announce-action:hover,
.site-announce--sand .site-announce-action:hover,
.site-announce--light .site-announce-action:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------
   The button drops onto its own line rather than squeezing the message into
   two words a line. The mark goes with it: at this width it is 30px of
   decoration competing with the sentence it introduces.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .site-announce { font-size: 13px; }

    .site-announce .container {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .site-announce-mark { display: none; }

    .site-announce-text { flex: 1 1 100%; order: 1; padding-right: 26px; }
    .site-announce-action { order: 2; padding: 6px 12px; font-size: 13px; }

    /* Pinned to the corner so it does not sit in the flow and drag the
       message onto a third line. */
    .site-announce-close { position: absolute; top: 8px; right: 12px; }
}

/* ==========================================================================
   Reading progress
   --------------------------------------------------------------------------
   A hairline under the header on an article. Deliberately thin and in the
   brand colour: it answers "how much is left" at a glance and should not
   otherwise be noticed.
   ========================================================================== */

.read-progress {
    position: fixed;
    /*
     * The starting position, for the frame before the script has measured
     * anything and for anyone it never runs for.
     *
     * It cannot stay a calculation: the breadcrumb bar is sticky, so once it
     * sticks it is at the top of the window rather than under the header, and
     * this sum is only right at scroll position zero. The script overwrites
     * `top` with the bar's measured bottom on every update.
     */
    top: calc(var(--hdr-h, 0px) + var(--crumb-h, 0px));
    left: 0;
    right: 0;
    z-index: 1050;
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.read-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #0070ad, #22a7e0);
    transition: width .12s linear;
}

@media (prefers-reduced-motion: reduce) {
    .read-progress-bar { transition: none; }
}

/* --------------------------------------------------------------------------
   Hiding the contact buttons
   --------------------------------------------------------------------------
   They sit over the page, and on a phone they sit over the sentence somebody
   is reading. This collapses them out of the way; the choice is remembered,
   so it does not have to be made again on every page.
   -------------------------------------------------------------------------- */

.site-float-toggle {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 27, 40, .55);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    opacity: .55;
    transition: opacity .16s ease, background .16s ease, transform .2s ease;
}

.site-float-toggle:hover { opacity: 1; background: rgba(11, 27, 40, .8); }

.site-float-toggle:focus-visible {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Points the other way once there is something to bring back. */
.site-floats.is-collapsed .site-float-toggle i { transform: rotate(180deg); }

/* Gone from the column rather than merely invisible, so nothing is left
   floating above an empty gap. */
.site-floats.is-collapsed .site-float--whatsapp,
.site-floats.is-collapsed .site-float--contact { display: none; }

html[data-theme="dark"] .site-float-toggle { background: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .site-float-toggle:hover { background: rgba(255, 255, 255, .28); }

/* ==========================================================================
   Portal request thread
   --------------------------------------------------------------------------
   The client's side of the conversation. Their own messages sit right, ours
   left — the reverse of the admin, because on each screen "mine" is the side
   the person reading it wrote.
   ========================================================================== */

.prt-thread .prt-msg {
    max-width: 78%;
    margin-bottom: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14px;
}

.prt-msg.is-them { background: #eef2f7; border-bottom-left-radius: 4px; }
.prt-msg.is-mine { margin-left: auto; background: #e4f3ea; border-bottom-right-radius: 4px; }

.prt-msg header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: #6b7a8d;
}

.prt-msg header strong { color: #2a3340; font-size: 13px; }
.prt-msg-body { white-space: pre-wrap; line-height: 1.55; }

.prt-reply { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.prt-reply label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }

.prt-reply textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #dde4ec;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.prt-reply textarea:focus {
    outline: none;
    border-color: #0070ad;
    box-shadow: 0 0 0 3px rgba(0, 112, 173, .15);
}

.prt-error { margin: 6px 0 0; color: #b3261e; font-size: 13px; }

html[data-theme="dark"] .prt-msg.is-them { background: #1b2735; }
html[data-theme="dark"] .prt-msg.is-mine { background: #163024; }
html[data-theme="dark"] .prt-reply textarea {
    border-color: #26323f; background: #0e1620; color: #e6ebf2;
}

/* ==========================================================================
   Error pages
   --------------------------------------------------------------------------
   Shared by 403, 419, 429, 500 and 503. They say what happened and what to do
   about it — never how it happened. The detail belongs in the log, and the
   people most likely to read it on the page are the ones who caused it.

   `.err-code` is already styled alongside the 404; the rest was missing, so
   these pages rendered as unstyled text in the middle of the layout.
   ========================================================================== */

.err-page { padding: clamp(64px, 12vh, 140px) 0; text-align: center; }

.err-page h1 {
    margin: 0 0 18px;
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.2;
}

.err-lede {
    max-width: 56ch;
    margin: 0 auto 14px;
    font-size: 16.5px;
    line-height: 1.65;
    opacity: .85;
}

.err-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 30px;
}

/* ==========================================================================
   Portal notifications
   ========================================================================== */

.prt-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #b3261e;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.prt-note {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px solid #e2e8f0;
}

.prt-note:last-child { border-bottom: 0; }

.prt-note-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2f7;
    color: #0070ad;
    font-size: 14px;
}

/* Unread reads as unread without colour alone carrying it — the dot is there
   for anyone who cannot see the tint. */
.prt-note.is-new { background: rgba(0, 112, 173, .04); }
.prt-note.is-new .prt-note-icon { background: #e2eefb; }

.prt-note-body { flex: 1 1 auto; min-width: 0; }
.prt-note-title { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.prt-note-title a { color: inherit; text-decoration: none; }
.prt-note-title a:hover { color: #0070ad; text-decoration: underline; }
.prt-note-text { margin: 0 0 5px; font-size: 14px; line-height: 1.5; opacity: .85; }
.prt-note time { font-size: 12.5px; opacity: .6; }

.prt-note-dot {
    flex: 0 0 auto;
    align-self: center;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0070ad;
}

html[data-theme="dark"] .prt-note { border-bottom-color: #26323f; }
html[data-theme="dark"] .prt-note-icon { background: #1b2735; }
html[data-theme="dark"] .prt-note.is-new { background: rgba(74, 168, 221, .07); }

/* Portal document folders. A heading only appears when there is more than one
   group — a single "General" above every list is a label for nothing. */
.prt-doc-folder {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .6;
}

.prt-chip--warn { background: #fdf1dc; color: #8a5a00; }
html[data-theme="dark"] .prt-chip--warn { background: #3a2c10; color: #e0a94a; }

/* ==== assets/fonts/stylesheet.css ==== */
@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-Light.eot');
    src: url('/assets/fonts/HouschkaPro-Light.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-Light.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-LightItalic.eot');
    src: url('/assets/fonts/HouschkaPro-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-LightItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-MediumItalic.eot');
    src: url('/assets/fonts/HouschkaPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-MediumItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-Medium.eot');
    src: url('/assets/fonts/HouschkaPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-Medium.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-DemiBold.eot');
    src: url('/assets/fonts/HouschkaRounded-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-DemiBold.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-DemiBoldItalic.eot');
    src: url('/assets/fonts/HouschkaRounded-DemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-DemiBoldItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-DemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-ExtraBold.eot');
    src: url('/assets/fonts/HouschkaRounded-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-ExtraBold.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-Bold.eot');
    src: url('/assets/fonts/HouschkaRounded-Bold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-Bold.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-ThinItalic.eot');
    src: url('/assets/fonts/HouschkaPro-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-ThinItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-BoldItalic.eot');
    src: url('/assets/fonts/HouschkaRounded-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-BoldItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-Light.eot');
    src: url('/assets/fonts/HouschkaRounded-Light.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-Light.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-ExtraBoldItalic.eot');
    src: url('/assets/fonts/HouschkaRounded-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-ExtraBoldItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-ExtraBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-Thin.eot');
    src: url('/assets/fonts/HouschkaPro-Thin.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-Thin.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-ThinItalic.eot');
    src: url('/assets/fonts/HouschkaRounded-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-ThinItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-MediumItalic.eot');
    src: url('/assets/fonts/HouschkaRounded-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-MediumItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-Thin.eot');
    src: url('/assets/fonts/HouschkaRounded-Thin.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-Thin.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-Bold.eot');
    src: url('/assets/fonts/HouschkaPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-Bold.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-DemiBold.eot');
    src: url('/assets/fonts/HouschkaPro-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-DemiBold.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-LightItalic.eot');
    src: url('/assets/fonts/HouschkaRounded-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-LightItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-BoldItalic.eot');
    src: url('/assets/fonts/HouschkaPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-BoldItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Rounded';
    src: url('/assets/fonts/HouschkaRounded-Medium.eot');
    src: url('/assets/fonts/HouschkaRounded-Medium.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaRounded-Medium.woff') format('woff'),
        url('/assets/fonts/HouschkaRounded-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-ExtraBoldItalic.eot');
    src: url('/assets/fonts/HouschkaPro-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-ExtraBoldItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-ExtraBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-ExtraBold.eot');
    src: url('/assets/fonts/HouschkaPro-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-ExtraBold.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('/assets/fonts/HouschkaPro-DemiBoldItalic.eot');
    src: url('/assets/fonts/HouschkaPro-DemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/HouschkaPro-DemiBoldItalic.woff') format('woff'),
        url('/assets/fonts/HouschkaPro-DemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}


/* ==== assets/css/cookie-consent.css ==== */
/* ==========================================================================
   Cookie consent
   --------------------------------------------------------------------------
   A centred dialog over a dimmed page.

   It was a bar along the foot of the window, on the reasoning that a visitor
   could carry on reading while deciding. In practice a foot-of-window bar is
   the shape every site uses for something to dismiss without reading, and it
   competes with the back-to-top button and the WhatsApp widget that live in
   the same corner.

   Centred, it is a decision to make rather than a nuisance to swat — and the
   two choices carry equal weight, which is the point of asking.
   ========================================================================== */

.cookie-bar {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* The dim is on the same element rather than a separate backdrop node, so
       there is nothing to leave behind if the dialog is removed abruptly. */
    background: rgba(11, 27, 40, .55);
    animation: cookieVeilIn .25s ease both;
    overflow-y: auto;
}

.cookie-bar > form,
.cookie-bar > .cookie-panel {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border-top: 4px solid #0070ad;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(11, 27, 40, .3);
    padding: 28px;
    animation: cookieDialogIn .3s ease both;
    /* A long preferences list must scroll inside the dialog, not push the
       buttons off the bottom of a short window. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

/* The container inside the dialog has no business adding the page gutter. */
.cookie-bar .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

@keyframes cookieVeilIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cookieDialogIn {
    from { transform: translateY(14px) scale(.98); opacity: 0; }
    to   { transform: translateY(0) scale(1);      opacity: 1; }
}

/* Respect a reduced-motion preference — this appears unprompted. */
@media (prefers-reduced-motion: reduce) {
    .cookie-bar,
    .cookie-bar > form,
    .cookie-bar > .cookie-panel { animation: none; }
}

.cookie-bar-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.cookie-bar-copy { flex: 1 1 420px; min-width: 0; }
.cookie-bar-copy h2 { font-size: 19px; margin: 0 0 6px; color: #0b1b28; }
.cookie-bar-copy p  { font-size: 14.5px; line-height: 1.6; color: #4a5462; margin: 0; max-width: 76ch; }
.cookie-bar-copy a  { color: #0070ad; text-decoration: underline; }

.cookie-bar-actions { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }

.cookie-btn {
    border: 1px solid #0070ad;
    border-radius: 3px;
    padding: 11px 22px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cookie-btn--solid { background: #0070ad; color: #fff; }
.cookie-btn--solid:hover { background: #005a87; border-color: #005a87; }

.cookie-btn--ghost { background: transparent; color: #0070ad; }
.cookie-btn--ghost:hover { background: #eef6fb; }

.cookie-btn:focus-visible { outline: 2px solid #0b1b28; outline-offset: 2px; }

/* --- Preferences ------------------------------------------------------ */

.cookie-prefs {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e2e7ee;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 28px;
}

.cookie-prefs[hidden] { display: none; }

.cookie-pref-head { display: flex; align-items: center; gap: 9px; font-size: 15px; color: #0b1b28; cursor: pointer; }
.cookie-pref-head[aria-disabled="true"] { cursor: default; }
.cookie-pref-head input { width: 16px; height: 16px; accent-color: #0070ad; }

.cookie-pref-locked {
    font-size: 11px;
    font-style: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6a7382;
    background: #f1f4f9;
    padding: 2px 7px;
    border-radius: 3px;
}

.cookie-pref p { font-size: 13.5px; line-height: 1.6; color: #6a7382; margin: 6px 0 0 25px; }

.cookie-prefs-foot { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
    .cookie-bar { padding: 18px 0; max-height: 82vh; overflow-y: auto; }
    .cookie-bar-actions { width: 100%; }
    .cookie-bar-actions .cookie-btn { flex: 1 1 auto; }
}

/* --- The reopen link in the footer ------------------------------------ */

.cookie-reopen {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Dialog layout for the actions
   --------------------------------------------------------------------------
   Side by side, equal width, in the reading order the choice deserves:
   settings, reject, accept. Reject is not hidden behind a link — a consent
   prompt where declining is harder than accepting is not really asking.
   -------------------------------------------------------------------------- */

.cookie-bar .cookie-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-bar .cookie-bar-actions .cookie-btn {
    flex: 1 1 150px;
    justify-content: center;
}

.cookie-bar .cookie-bar-copy h2 { font-size: 22px; }

@media (max-width: 575.98px) {
    .cookie-bar { padding: 14px; align-items: flex-end; }
    .cookie-bar > form,
    .cookie-bar > .cookie-panel { padding: 22px 18px; max-height: calc(100vh - 28px); }
    .cookie-bar .cookie-bar-actions .cookie-btn { flex-basis: 100%; }
}

/* ==== assets/css/typography.css ==== */
/* ==========================================================================
   Typography — heading weight
   --------------------------------------------------------------------------
   One rule, loaded after every other stylesheet, so headings are 300 across
   the whole site.

   The theme sets a heading weight in 42 separate rules spread over style.css,
   custom.css and responsive.css, at specificities up to two classes plus an
   element, and one of them already carries !important. Re-declaring all 42
   would leave the next new rule to drift again, so this is deliberately a
   single blunt override rather than 42 tracked ones.

   Anything that genuinely needs emphasis should use <strong>, which is
   untouched here.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 300 !important;
}

/* Headings carry the weight; links inside them must not reintroduce one. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

/* Small eyebrow labels are not headings — they are 11–13px uppercase chips
   that become illegible at 300. Their weight is set once, further down, with
   the rest of the label styles. */

/* ==========================================================================
   Body weight
   --------------------------------------------------------------------------
   The theme sets 500–900 in around thirty rules across style.css, custom.css
   and responsive.css. Rather than edit the theme — which stays untouched —
   these override the ones that carry visible body text down to 400.

   Small uppercase labels are excluded further down: at 11–13px with letter
   spacing, 400 is genuinely hard to read.
   ========================================================================== */

body,
p, li, td, th, dd, dt, label, span, div, a,
.form-control, .form-select, .btn,
.nav-link, .navbar-nav li a,
.breadcrumb, .breadcrumb-item,
.entry-meta, .entry-meta li,
.blog-post-date, .blog-post-date li,
.who-info p, .events-info p, .services-info p,
.counter-sec p, .stories-info p, .partners-info p,
.footer__widget li a, .footer-link li a,
.global-btn, .global-btn2, .global-btn3, .global-btn4,
.apply-now-btn {
    font-weight: 400;
}

/* <strong> and <b> still mean something; one step is enough to show it
   without going back to 700. */
strong, b, .fw-bold, .fw-bolder { font-weight: 600; }

/* Table headers and the theme's own counters read as labels, not prose. */
thead th, .counter-item h4, .counter-sec h4 { font-weight: 400; }

/* --------------------------------------------------------------------------
   Small uppercase labels
   --------------------------------------------------------------------------
   These are chips and eyebrows: 11–13px, letter-spaced, often on a tint.
   They keep some weight because 400 makes them mush at that size.
   -------------------------------------------------------------------------- */

.ins-tag, .ins-home-cat,
.srch-hit-kind, .site-search-suggestion-kind,
.section-story-badge, .section-news-tag, .section-fcard-tag,
.section-reasons-eyebrow, .section-reasons-label, .section-reasons-no,
.section-acf-eyebrow, .section-acf-no,
.section-acs-eyebrow,
.prd-card-tag, .prd-badge, .prs-eyebrow, .prs-tab-flag, .prs-chips-label,
.crx-step-no, .crx-chip,
.ty-link-row em,
.prt-badge, .prt-status, .prt-pin, .prt-dl dt,
.cookie-pref-locked,
.adl-eyebrow {
    font-weight: 600;
}

/* ==========================================================================
   Weight exceptions for the builder's own blocks
   --------------------------------------------------------------------------
   The blunt 300 above is right for the long headings it was written for: a
   40px section heading at 300 reads as considered.

   It is wrong for three things, and they are exactly the three the redesigned
   section blocks lean on:

     - A statistic. "20+" at 54px and weight 300 is a hairline; the number is
       the entire point of the block and it has to carry.
     - A card title. At 18–21px, 300 is thinner than the body copy under it,
       so the card reads as having no title at all.
     - A section heading that sits over a card grid, which needs to out-rank
       the titles inside it.

   Loaded after the blanket rule and with matching !important, because that is
   the only thing that beats it.

   Not scoped to `.bsec` any more. They were, and the effect was that a section
   heading weighed 500 on a page built from blocks and 300 on one the theme
   drew — the same heading, doing the same job, different depending on which
   system happened to render it. The reasons above are about what the element
   is, not about where it came from, so the rules follow the element.
   ========================================================================== */

/* A section heading, wherever it is drawn. */
.heading h2 { font-weight: 500 !important; }

/* A card title: at 18–21px, 300 is thinner than the body copy beneath it, so
   the card reads as having no title. Every card block on the site is listed —
   the builder's and the theme's — because they are the same component to a
   reader. */
.events-info h3,
.dll-title,
.cd-card h3,
.solutions-sec h3,
.who-info h3,
.take_closer h3,
.rail-card h3,
.we-serve-content h3,
.who-sec h3 { font-weight: 500 !important; }

/* A statistic is a large numeral, not really a heading. At 300 it reads as a
   rendering fault. */
.bsec.section-stats h3,
.section-stats h3,
.counter-item h3,
.counter-sec h3 { font-weight: 600 !important; }

/* The page headline is the largest type on the page and most often sits over a
   photograph, where 300 disappears. The home slider is the same headline doing
   the same job, so it carries the same weight. */
.page-title-banner h1,
.home-slider h1,
.pbn-title { font-weight: 400 !important; }

/* ==== assets/css/theme-dark.css ==== */
/* ==========================================================================
   Dark theme
   --------------------------------------------------------------------------
   Loaded on every page but scoped entirely to html[data-theme="dark"], so in
   light mode the site renders byte-for-byte as it did before — the theme's own
   CSS is not edited at all, which is the constraint this whole file exists to
   respect.

   The selectors below are not guesses: they were taken from a survey of every
   rule in style.css, custom.css, responsive.css, laravel-dynamic.css and
   builder-sections.css that paints a light surface or dark text. Anything the
   survey did not find is inherited from body and comes out right anyway.

   Black rather than dark grey for the page itself, matching the reference.
   Content sits on a raised near-black so cards still read as cards.
   ========================================================================== */

html[data-theme="dark"] {
    --dk-page:    #000000;   /* the page itself */
    --dk-surface: #0e0e12;   /* a band or section sitting on the page */
    --dk-raised:  #17171d;   /* a card sitting on a band */
    --dk-line:    rgba(255, 255, 255, .13);
    --dk-line-strong: rgba(255, 255, 255, .24);

    --dk-ink:     #eef1f5;   /* headings and primary text */
    --dk-body:    #b9c0ca;   /* paragraphs */
    --dk-muted:   #8b93a0;   /* captions, meta, timestamps */

    /* #0070ad fails contrast on black, so links and accents step up while the
       brand keeps its hue. Solid brand fills are untouched — white on #0070ad
       is fine either way round. */
    --dk-brand:   #4aa8dd;
    --dk-brand-soft: rgba(74, 168, 221, .14);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html[data-theme="dark"] body {
    background: var(--dk-page);
    color: var(--dk-body);
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 {
    color: var(--dk-ink);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] dd {
    color: var(--dk-body);
}

html[data-theme="dark"] a { color: inherit; }

html[data-theme="dark"] hr { border-color: var(--dk-line); }

/* The theme's own variables, so anything reading them follows too. */
html[data-theme="dark"] {
    --text-color: #b9c0ca;
    --light-bg-color: #0e0e12;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .site-header {
    /* Solid, for the same reason as the light header: a blurred bar over an
       arbitrary hero image is unpredictable. */
    background-color: #08080b;
    border-bottom: 1px solid var(--dk-line);
}

/* The home header is transparent over the hero in both themes. */
html[data-theme="dark"] .home-page .site-header { background: transparent; border-bottom: 0; }
html[data-theme="dark"] .home-page .site-header.sticky-header {
    /* The page's own dark surface rather than pure black: a black bar over a
       navy hero reads as a separate object sitting on the page. */
    background: rgba(14, 14, 18, .92);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--dk-line);
}

/* Not below 992px, where the header holds the fixed menu drawer: a
   backdrop-filter makes the header its containing block, and the open drawer
   shrank to the bar's height as soon as the page scrolled. Opaque instead,
   so the bar stays legible without the blur. */
@media (max-width: 991.98px) {
    html[data-theme="dark"] .home-page .site-header.sticky-header {
        background: rgb(14, 14, 18);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

html[data-theme="dark"] .site-header li a,
html[data-theme="dark"] .site-header .navbar-nav > li > a { color: var(--dk-ink); }

html[data-theme="dark"] .site-header li a:hover,
html[data-theme="dark"] .site-header li.current-menu-item > a { color: var(--dk-brand); }

html[data-theme="dark"] .site-header i.dropdown-caret { color: var(--dk-ink); }

html[data-theme="dark"] .site-header .navbar-nav > li .sub-menu,
html[data-theme="dark"] .site-header .mega-menu .dropdown-menu,
html[data-theme="dark"] .site-header .mega-menu .dropdown-menu .container,
html[data-theme="dark"] .mega-menu .dropdown-menu .container {
    background-color: #0b0b0f;
    border-color: var(--dk-line);
}

/*
   .navbar-collapse is only a slide-in drawer below 991px; above that it is an
   inline wrapper around the links. Painting it at every width put a solid
   black bar behind the desktop navigation.
*/
@media (max-width: 991.98px) {
    html[data-theme="dark"] .site-header .navbar-collapse {
        background-color: #0b0b0f;
        border-color: var(--dk-line);
    }
}

html[data-theme="dark"] .site-header .navbar-collapse .nav-item,
html[data-theme="dark"] .site-header .navbar-nav > li { background-color: transparent; }

html[data-theme="dark"] .home-page .mega-menu-content ul li a:hover { color: var(--dk-brand); }

/* The logo is a dark mark on a transparent background: on black it vanishes.
   Inverting keeps the brand shape without a second asset — but it is only a
   fallback. Upload a proper light mark in Website Settings → Identity and the
   :not() below stands this rule down, rather than inverting an image that was
   already drawn for a dark background. */
html[data-theme="dark"] .site-header .navbar-brand img:not(.site-logo--dark),
html[data-theme="dark"] .footer-map img:not(.site-logo--dark),
html[data-theme="dark"] .adl-brand img {
    filter: invert(1) hue-rotate(180deg) brightness(1.08);
}

/* A mark made for dark backgrounds is used exactly as uploaded. */
html[data-theme="dark"] .site-logo--dark { filter: none; }

/* The white burger lines would disappear against the dark bar. */
html[data-theme="dark"] .home-page .navbar-toggler .line { background-color: var(--dk-ink); }

/* --------------------------------------------------------------------------
   Header tools — search, country selector
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .site-search-panel,
html[data-theme="dark"] .site-locale-menu,
html[data-theme="dark"] .site-region-menu {
    background: #0b0b0f;
    border-color: var(--dk-line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .site-search-input {
    background: #15151b;
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .site-search-input:focus { background: #1b1b22; }

html[data-theme="dark"] .site-region-menu a,
html[data-theme="dark"] .site-locale-menu a,
html[data-theme="dark"] .site-search-suggestion { color: var(--dk-ink); }

html[data-theme="dark"] .site-region-menu a:hover,
html[data-theme="dark"] .site-locale-menu a:hover,
html[data-theme="dark"] .site-search-suggestion:hover,
html[data-theme="dark"] .site-search-suggestion.is-active {
    background: var(--dk-brand-soft);
    color: var(--dk-brand);
}

html[data-theme="dark"] .site-region-head,
html[data-theme="dark"] .site-region-menu em,
html[data-theme="dark"] .site-search-empty { color: var(--dk-muted); }

html[data-theme="dark"] .site-search-suggestion-kind { background: var(--dk-brand-soft); color: var(--dk-brand); }

/* --------------------------------------------------------------------------
   Bands and cards from the theme
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .about-sec,
html[data-theme="dark"] .services-offer,
html[data-theme="dark"] .our-industry,
html[data-theme="dark"] .location-sec,
html[data-theme="dark"] .partners-sec,
html[data-theme="dark"] .take_closer,
html[data-theme="dark"] .services-list,
html[data-theme="dark"] .breadcrumb-sec,
html[data-theme="dark"] .solutions-list,
html[data-theme="dark"] .values-section-content,
html[data-theme="dark"] .take_closer_look .heading,
html[data-theme="dark"] section.solutions-list .col-lg-8 {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .services-info,
html[data-theme="dark"] .events-info,
html[data-theme="dark"] .blog-grid,
html[data-theme="dark"] .blog-grid-content,
html[data-theme="dark"] .blog-section.page .blog-grid-content,
html[data-theme="dark"] .latest-client-info,
html[data-theme="dark"] .solutions-service,
html[data-theme="dark"] .services-solutions:hover .solutions-service,
html[data-theme="dark"] .partners-img,
html[data-theme="dark"] .partners-info,
html[data-theme="dark"] .about_ex-info,
html[data-theme="dark"] .career-apply .accordion-body,
html[data-theme="dark"] .widget-area .widget,
html[data-theme="dark"] .contact-link-item .icon-box,
html[data-theme="dark"] .postcategory,
html[data-theme="dark"] .solutions-sec:hover,
html[data-theme="dark"] .banner2-right {
    background-color: var(--dk-raised);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .services-offer h2,
html[data-theme="dark"] .services-info h4,
html[data-theme="dark"] .events-info h4,
html[data-theme="dark"] .latest-client-info h4,
html[data-theme="dark"] .about_ex-info h3,
html[data-theme="dark"] .what-we-do-sec h4,
html[data-theme="dark"] .blog-grid-content h3 a,
html[data-theme="dark"] .solutions-service h4 a,
html[data-theme="dark"] .accordion.horizontal .accordion-button {
    color: var(--dk-ink);
}

html[data-theme="dark"] .services-info p,
html[data-theme="dark"] .events-info p,
html[data-theme="dark"] .latest-client-info p,
html[data-theme="dark"] .partners-info p,
html[data-theme="dark"] .what-we-do-sec p,
html[data-theme="dark"] .banner2-right p,
html[data-theme="dark"] .about-sec p,
html[data-theme="dark"] .career-post ul li,
html[data-theme="dark"] .liquidity-content,
html[data-theme="dark"] .liquidity-content ul li,
html[data-theme="dark"] .cms_pages ul li,
html[data-theme="dark"] .entry-meta li span {
    color: var(--dk-body);
}

/* Every bordered box the theme draws with a light hairline. */
html[data-theme="dark"] .what-we-do-sec,
html[data-theme="dark"] .industry-list ul li,
html[data-theme="dark"] .accordion.horizontal .accordion-item,
html[data-theme="dark"] .career-post,
html[data-theme="dark"] .services-list li,
html[data-theme="dark"] .footer-link li { border-color: var(--dk-line) !important; }

html[data-theme="dark"] .industry-list ul li a,
html[data-theme="dark"] .industry-list ul li:after { color: var(--dk-ink); }
html[data-theme="dark"] .industry-list ul li:hover { border-bottom-color: var(--dk-brand) !important; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .career-form .form-control,
html[data-theme="dark"] .newsletter-form input,
html[data-theme="dark"] .contact-form.career-form {
    background-color: #15151b;
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6d7683; }

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #1b1b22;
    border-color: var(--dk-brand);
    color: var(--dk-ink);
    box-shadow: 0 0 0 3px rgba(74, 168, 221, .18);
}

html[data-theme="dark"] .form-field label,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .contact-form .input-group p { color: var(--dk-body); }

/* --------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------
   Solid brand buttons are left alone: white on #0070ad reads the same on
   either background. Only the ones that were dark-on-white need reversing.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .global-btn2,
html[data-theme="dark"] .global-btn4 { color: var(--dk-ink); border-color: var(--dk-line-strong); }

html[data-theme="dark"] .global-btn:hover,
html[data-theme="dark"] .global-btn4:hover { background-color: #fff; color: #000; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/*
 * The footer is dark in both themes now, so there is almost nothing to
 * override. What is left is the pair of backgrounds: the dark palette's
 * surface would otherwise turn the navy into the same grey-black as every
 * panel above it, and the point of the footer is that it reads as the base of
 * the page rather than as one more card.
 *
 * The old colour rules that lived here — for .site-footer a, .footer-map, the
 * headings — are gone rather than kept: footer.css already states those colours
 * for both themes, and a second set that only applies in one is how the two
 * drift apart.
 */
html[data-theme="dark"] .site-footer { background: #071b30; }
html[data-theme="dark"] .copyright-area { background: #05131f; }

/* --------------------------------------------------------------------------
   Page Builder sections
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .section-icon-item,
html[data-theme="dark"] .section-contact-card,
html[data-theme="dark"] .section-story-card,
html[data-theme="dark"] .section-news-card,
html[data-theme="dark"] .section-fcard,
html[data-theme="dark"] .prd-card,
html[data-theme="dark"] .prd-tier,
html[data-theme="dark"] .prs-panel,
html[data-theme="dark"] .prs-tab,
html[data-theme="dark"] .prs-strip-item,
html[data-theme="dark"] .ins-lead,
html[data-theme="dark"] .ins-card,
html[data-theme="dark"] .ins-article,
html[data-theme="dark"] .ins-aside-card,
html[data-theme="dark"] .ins-home-lead,
html[data-theme="dark"] .ins-home-row,
html[data-theme="dark"] .ins-nav a,
html[data-theme="dark"] .ins-tabs a,
html[data-theme="dark"] .crx-figure,
html[data-theme="dark"] .crx-team,
html[data-theme="dark"] .crx-role,
html[data-theme="dark"] .crx-benefit,
html[data-theme="dark"] .crx-step,
html[data-theme="dark"] .crx-filters,
html[data-theme="dark"] .crx-aside,
html[data-theme="dark"] .crx-body,
html[data-theme="dark"] .ty-direct-links a,
html[data-theme="dark"] .cap-card,
html[data-theme="dark"] .ty-direct-panel {
    background-color: var(--dk-raised);
    border-color: var(--dk-line);
    color: var(--dk-body);
}

html[data-theme="dark"] .section-icon-item h3,
html[data-theme="dark"] .prd-card h3,
html[data-theme="dark"] .ins-card h3,
html[data-theme="dark"] .crx-role h3,
html[data-theme="dark"] .ty-direct-links strong,
html[data-theme="dark"] .cap-card h3,
html[data-theme="dark"] .ty-link-row { color: var(--dk-ink); }

/* The quiet card is a shade *lighter* than the page in light mode and needs to
   be a shade darker here, or it reads as the raised card it sits beside. */
html[data-theme="dark"] .cap-card--quiet { background-color: #101015; }
html[data-theme="dark"] .cap-dl dt,
html[data-theme="dark"] .cap-note { color: var(--dk-muted); }

html[data-theme="dark"] .section-statement blockquote { color: var(--dk-ink); }

/* The soft/light appearance options are lighter than the page in light mode,
   so on black they have to go the other way to stay distinguishable. */
html[data-theme="dark"] .sec-bg-light,
html[data-theme="dark"] .sec-bg-soft { background-color: var(--dk-surface) !important; }

html[data-theme="dark"] .sec-bg-light .prd-card,
html[data-theme="dark"] .sec-bg-soft .prd-card,
html[data-theme="dark"] .sec-bg-light .section-fcard,
html[data-theme="dark"] .sec-bg-soft .section-fcard,
html[data-theme="dark"] .sec-bg-light .section-news-card,
html[data-theme="dark"] .sec-bg-soft .section-news-card,
html[data-theme="dark"] .sec-bg-light .ins-home-row,
html[data-theme="dark"] .sec-bg-soft .ins-home-row,
html[data-theme="dark"] .sec-bg-light .crx-team,
html[data-theme="dark"] .sec-bg-soft .crx-team { background-color: var(--dk-raised); }

html[data-theme="dark"] .ty-step-mark { background: var(--dk-brand-soft); color: var(--dk-brand); }
html[data-theme="dark"] .ty-more-head { border-bottom-color: var(--dk-line-strong); }
html[data-theme="dark"] .ty-link-row { border-bottom-color: var(--dk-line); }
html[data-theme="dark"] .ty-btn--primary { background: #fff; color: #000; }

/* --------------------------------------------------------------------------
   Odds and ends
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .cookie-bar > form,
html[data-theme="dark"] .cookie-bar > .cookie-panel { border-top-color: var(--dk-brand); }
html[data-theme="dark"] .cookie-bar-copy h2 { color: var(--dk-ink); }
html[data-theme="dark"] .cookie-bar-copy p,
html[data-theme="dark"] .cookie-pref p { color: var(--dk-body); }
html[data-theme="dark"] .cookie-prefs { border-top-color: var(--dk-line); }
html[data-theme="dark"] .cookie-pref-head { color: var(--dk-ink); }
html[data-theme="dark"] .cookie-pref-locked { background: #1b1b22; color: var(--dk-muted); }
html[data-theme="dark"] .cookie-btn--ghost:hover { background: var(--dk-brand-soft); }

html[data-theme="dark"] .pagination-area .page-numbers,
html[data-theme="dark"] .srch-pager .page-link {
    background-color: var(--dk-raised);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .srch-hit { background: var(--dk-raised); border-color: var(--dk-line); }
html[data-theme="dark"] .srch-tabs a { background: var(--dk-raised); color: var(--dk-body); }
html[data-theme="dark"] .srch-tabs a:hover { background: var(--dk-brand-soft); color: var(--dk-brand); }

html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b0b0f; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a33; }

/* A photograph on a black page is glaring at full brightness. This is small
   enough not to change what an image looks like, and enough to stop it
   glowing. Logos are excluded — they are inverted above. */
html[data-theme="dark"] .services-offer img,
html[data-theme="dark"] .blog-grid img,
html[data-theme="dark"] .ins-card img,
html[data-theme="dark"] .prd-card img { filter: brightness(.92); }

/* --------------------------------------------------------------------------
   The switcher itself
   -------------------------------------------------------------------------- */

.site-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background .2s ease, color .2s ease;
}

.site-theme-toggle:hover { background: rgba(0, 112, 173, .09); color: var(--hdr-brand); }
.site-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.home-page .site-theme-toggle { color: #fff; }
.home-page .site-theme-toggle:hover { background: rgba(255, 255, 255, .16); color: #fff; }

html[data-theme="dark"] .site-theme-toggle:hover { background: var(--dk-brand-soft); color: var(--dk-brand); }

/* One icon is shown at a time — whichever theme clicking would switch to. */
.site-theme-toggle .theme-icon-dark { display: none; }
html[data-theme="dark"] .site-theme-toggle .theme-icon-dark { display: inline-block; }
html[data-theme="dark"] .site-theme-toggle .theme-icon-light { display: none; }

.site-theme-toggle .theme-label {
    font-size: 13.5px;
    letter-spacing: .03em;
}

@media (max-width: 1199.98px) {
    /* The header is crowded at this width; the icon still says everything. */
    .site-theme-toggle .theme-label { display: none; }
}

/* ==========================================================================
   Contrast gaps
   --------------------------------------------------------------------------
   Found by crawling the real pages, collecting every class actually rendered
   and cross-referencing it against the theme's colour rules — rather than by
   waiting for someone to notice a paragraph had gone.

   Grouped by what went wrong, because the fix differs: text that vanishes
   needs lifting, a light surface needs replacing, and a mid-grey needs to
   stop being mid-grey against black.
   ========================================================================== */

/* --- Text the theme paints black ---------------------------------------- */

html[data-theme="dark"] .blog-post-date,
html[data-theme="dark"] .blog-post-date li,
html[data-theme="dark"] .blog-post-date li.category,
html[data-theme="dark"] .featured-stories,
html[data-theme="dark"] .featured-stories h4,
html[data-theme="dark"] .item.similar-post a,
html[data-theme="dark"] .widget-area .widget_fovia_posts_thumb .item .info h4,
html[data-theme="dark"] .widget-area .widget_fovia_posts_thumb .item .info a {
    color: var(--dk-ink);
}

/* --- Mid greys that survive on white and disappear on black ------------- */
/*
   #5c6675 against #000 is 3.4:1 — legible in a screenshot, tiring to read.
   These lift to --dk-body, which is 8.9:1.
*/
html[data-theme="dark"] .ins-body,
html[data-theme="dark"] .ins-standfirst,
html[data-theme="dark"] .ins-card-body p,
html[data-theme="dark"] .ins-lead-body,
html[data-theme="dark"] .ins-home-lead-body,
html[data-theme="dark"] .prd-card-body p,
html[data-theme="dark"] .prs-summary,
html[data-theme="dark"] .prs-secondary,
html[data-theme="dark"] .section-acf-copy,
html[data-theme="dark"] .section-acs-panel p,
html[data-theme="dark"] .section-news-entry,
html[data-theme="dark"] .section-news-kicker,
html[data-theme="dark"] .section-reasons-body,
html[data-theme="dark"] .section-reasons-intro,
html[data-theme="dark"] .section-reasons-proof,
html[data-theme="dark"] .sol-covers li,
html[data-theme="dark"] .sol-sub,
html[data-theme="dark"] .srch-summary,
html[data-theme="dark"] .site-search-close {
    color: var(--dk-body);
}

/* Captions and eyebrows stay quieter than body text, but not invisible. */
html[data-theme="dark"] .ins-home-head,
html[data-theme="dark"] .section-acf-head,
html[data-theme="dark"] .section-news-head { color: var(--dk-muted); }

/* --- Chips and pills ---------------------------------------------------- */

html[data-theme="dark"] .crx-chip,
html[data-theme="dark"] .prs-chip,
html[data-theme="dark"] .ins-home-chip,
html[data-theme="dark"] .section-news-pill,
html[data-theme="dark"] .prd-badge {
    background: #1b1b22;
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

/* --- Light surfaces ----------------------------------------------------- */

html[data-theme="dark"] .crx-figures,
html[data-theme="dark"] .liquidity-section,
/*
   .main-banner-content is the hero's text wrapper, not a surface — the white
   the audit found belongs to `.main-banner-content img`, a small badge. Giving
   the wrapper a background put a solid black slab behind the hero heading.
   The badge keeps its white plate, which is what it is for.
*/
html[data-theme="dark"] .home-slider { background-color: var(--dk-surface); }

/* --- Navigation ---------------------------------------------------------- */

html[data-theme="dark"] .site-header .nav-link,
html[data-theme="dark"] .site-header ul.sabmenu-list a,
html[data-theme="dark"] .mega-menu-item,
html[data-theme="dark"] .mega-menu-column,
html[data-theme="dark"] .who-we-serve-list a { color: var(--dk-ink); }

html[data-theme="dark"] .mega-menu-item:hover,
html[data-theme="dark"] .who-we-serve-list a:hover { color: var(--dk-brand); background-color: transparent; }

html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item a { color: var(--dk-body); }

/* --- Utility bar and breadcrumbs ---------------------------------------- */

html[data-theme="dark"] .site-topbar-links > li > a { color: var(--dk-ink); }
html[data-theme="dark"] .site-topbar-links > li > a:hover { color: var(--dk-brand); background: var(--dk-brand-soft); }

html[data-theme="dark"] .site-breadcrumbs {
    background: #0b0b0f;
    border-bottom-color: var(--dk-line);
}

html[data-theme="dark"] .site-breadcrumbs.is-stuck { box-shadow: 0 4px 18px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .site-breadcrumbs a { color: var(--dk-body); }
html[data-theme="dark"] .site-breadcrumbs a:hover { color: var(--dk-brand); }
html[data-theme="dark"] .site-breadcrumbs [aria-current="page"] { color: var(--dk-ink); }
html[data-theme="dark"] .site-breadcrumbs li + li::before { color: #565f6c; }

/* --- Card Rail ----------------------------------------------------------- */
/*
   The rail paints its own band, and its active card is deliberately light —
   that inversion is the design. Only the band and the resting card change, so
   the active state still reads as a card being picked out.
*/
/*
   The band went dark but the ink did not: --rail-body was a hardcoded
   #4a5462 and the progress bar and buttons were drawn as dark washes for a
   light band, so all three disappeared. Every token the rail reads is set
   here, not just the surfaces.
*/
html[data-theme="dark"] .rail-sec {
    --rail-band: #08141d;
    --rail-card: #0a4d76;
    --rail-active: #eef1f5;
    --rail-active-ink: #08141d;
    --rail-ink: var(--dk-ink);
    --rail-body: var(--dk-body);
}

html[data-theme="dark"] .rail-head h2 { color: var(--dk-ink); }
html[data-theme="dark"] .rail-head p  { color: var(--dk-body); }

/* A dark wash on a dark band is nothing at all. */
html[data-theme="dark"] .rail-progress { background: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .rail-progress span { background: var(--dk-brand); }

html[data-theme="dark"] .rail-btn { background: rgba(255, 255, 255, .14); color: var(--dk-ink); }
html[data-theme="dark"] .rail-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
html[data-theme="dark"] .rail-btn.is-primary { background: var(--dk-brand); color: #04121e; }
html[data-theme="dark"] .rail-btn.is-primary:hover:not(:disabled) { background: #7cc3e8; }

/* The chevron plate: a pale plate reads on the brand card in both themes,
   but the active card is pale too, so it inverts there. */
html[data-theme="dark"] .rail-card-go { background: #eef1f5; color: #08141d; }
html[data-theme="dark"] .rail-card:hover .rail-card-go,
html[data-theme="dark"] .rail-card.is-active .rail-card-go { background: #0a4d76; color: #fff; }

/* --- Banner cards -------------------------------------------------------- */
/*
   .banner-info declares background:#fff and then paints a brand gradient over
   it, so it is only a problem where the gradient does not apply.
*/
html[data-theme="dark"] .banner-info { background-color: #101024; }
html[data-theme="dark"] .banner2-right { background-color: var(--dk-raised); }

/* --- Buttons inside builder sections ------------------------------------ */

html[data-theme="dark"] .section-subscribe-form .form-submit .btn.btn-primary { background: #fff; color: #000; }

/*
   Cards sitting on a brand or dark band are white in light mode, so their
   text is #5c6675. In dark mode those same cards become near-black — the
   text has to come with them or it is grey on grey.
*/
html[data-theme="dark"] .sec-bg-brand .prd-card p,
html[data-theme="dark"] .sec-bg-dark .prd-card p,
html[data-theme="dark"] .sec-bg-brand .section-fcard p,
html[data-theme="dark"] .sec-bg-dark .section-fcard p,
html[data-theme="dark"] .sec-bg-brand .section-news-card p,
html[data-theme="dark"] .sec-bg-dark .section-news-card p,
html[data-theme="dark"] .sec-bg-brand .crx-team p,
html[data-theme="dark"] .sec-bg-dark .crx-team p { color: var(--dk-body); }

/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   The single most useful block in this file.

   builder-sections.css defines five tokens and roughly two hundred rules read
   them. The first contrast pass matched hex colours only, so every one of
   those `var(--sec-ink)` rules was invisible to it — which is why headings in
   the insights rail, the solutions accordion and the product tabs were still
   dark-on-dark after the audit reported zero.

   Redefining the tokens fixes all of them at once, and keeps fixing anything
   added later that uses them.
   ========================================================================== */

html[data-theme="dark"] {
    --sec-ink: #eef1f5;
    --sec-brand: #4aa8dd;
    --sec-brand-dark: #7cc3e8;
    --sec-soft: #12161c;
    --sec-light: #0e0e12;
}

/* .sec-bg-dark paints itself with --sec-ink, which is now the text colour —
   it needs its own value or the band turns near-white. */
html[data-theme="dark"] .sec-bg-dark { background: #0e0e12; }

/* --------------------------------------------------------------------------
   The horizontal accordion
   --------------------------------------------------------------------------
   The collapsed panels take `background: inherit`, so they were still sitting
   on white while their titles had been lightened — light text on a white
   panel, which is what the vertical product names showed.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .accordion.horizontal,
html[data-theme="dark"] .accordion.horizontal .accordion-item,
html[data-theme="dark"] .accordion.horizontal .accordion-button,
html[data-theme="dark"] .accordion.horizontal .accordion-body {
    background-color: var(--dk-surface);
}

html[data-theme="dark"] .accordion.horizontal .accordion-button { color: var(--dk-ink); }

/* The open panel keeps the theme's brand fill, so its text stays white. */
html[data-theme="dark"] .accordion.horizontal .accordion-item.active .accordion-button,
html[data-theme="dark"] .accordion.horizontal .accordion-item.active .accordion-body,
html[data-theme="dark"] .accordion.horizontal .accordion-item.active p,
html[data-theme="dark"] .accordion.horizontal .accordion-item.active li { color: #fff; }

html[data-theme="dark"] .accordion.horizontal .accordion-item { border-color: var(--dk-line) !important; }

/* --------------------------------------------------------------------------
   Buttons the theme draws as an outline
   --------------------------------------------------------------------------
   .global-btn2 and .global-btn4 are a border plus dark text — invisible on
   black, which is what the "Explore" button showed.
   -------------------------------------------------------------------------- */

/* The theme sets `color: #000 !important` on .global-btn2, so an ordinary
   override loses however specific it is. This has to match it. */
html[data-theme="dark"] .global-btn2,
html[data-theme="dark"] .global-btn3,
html[data-theme="dark"] .global-btn4,
html[data-theme="dark"] .apply-now-btn {
    color: var(--dk-ink) !important;
    border-color: var(--dk-line-strong);
}

html[data-theme="dark"] .global-btn2 i,
html[data-theme="dark"] .global-btn3 i,
html[data-theme="dark"] .global-btn4 i { color: var(--dk-brand); }

html[data-theme="dark"] .global-btn2:hover,
html[data-theme="dark"] .global-btn4:hover { background: #fff; color: #000 !important; border-color: #fff; }
html[data-theme="dark"] .global-btn2:hover i,
html[data-theme="dark"] .global-btn4:hover i { color: #000; }

/* On a band that is already brand-filled the theme reverses them to white;
   that still holds and must not be overridden above. */
html[data-theme="dark"] .accordion.horizontal .accordion-item.active .global-btn2,
html[data-theme="dark"] .sec-bg-brand .global-btn2,
html[data-theme="dark"] .sec-bg-dark .global-btn2 { color: #fff !important; border-color: #fff; }

/* --------------------------------------------------------------------------
   Rows and links that carried --sec-ink
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .ins-home-row-body strong,
html[data-theme="dark"] .ins-home-lead-body strong,
html[data-theme="dark"] .prs-tab-title,
html[data-theme="dark"] .sol-title { color: var(--dk-ink); }

html[data-theme="dark"] .ins-home-row-go { color: #565f6c; }
html[data-theme="dark"] .ins-home-row:hover .ins-home-row-go { color: var(--dk-brand); }

/*
   The header tokens, for the same reason as the section tokens above: the
   search trigger, the country selector and the search-result chips all take
   their hover colour from --hdr-brand, and #0070ad on black is 2.9:1.
*/
html[data-theme="dark"] {
    --hdr-brand: #4aa8dd;
    --hdr-brand-dark: #7cc3e8;
    --hdr-ink: #eef1f5;
    --hdr-line: rgba(255, 255, 255, .13);
    --hdr-soft: rgba(74, 168, 221, .14);
    --hdr-muted: #8b93a0;
    --hdr-tint: rgba(74, 168, 221, .14);
}

/* Our expertise: the card is a white tile in light mode. */
html[data-theme="dark"] .xp-card {
    background: var(--dk-raised);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .xp-card:hover { box-shadow: 0 22px 48px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .xp-card-title { color: var(--dk-ink); }
html[data-theme="dark"] .xp-card-copy { color: var(--dk-body); }
html[data-theme="dark"] .xp-card-media { background: #101015; }

/* In dark mode the home header goes near-black on hover rather than white —
   a white bar would be the only bright thing on the page. */
@media (min-width: 992px) {
    html[data-theme="dark"] .home-page .site-header:hover,
    html[data-theme="dark"] .home-page .site-header:focus-within {
        background: #08080b;
    }

    html[data-theme="dark"] .home-page .site-header:hover li a,
    html[data-theme="dark"] .home-page .site-header:focus-within li a { color: var(--dk-ink) !important; }

    html[data-theme="dark"] .home-page .site-header:hover li a:hover,
    html[data-theme="dark"] .home-page .site-header:focus-within li a:hover { color: var(--dk-brand) !important; }

    html[data-theme="dark"] .home-page .site-header:hover .site-topbar-links > li > a,
    html[data-theme="dark"] .home-page .site-header:focus-within .site-topbar-links > li > a { color: var(--dk-ink); }

    /* The mark stays the light one: the bar is dark either way. */
    html[data-theme="dark"] .home-page .site-header:hover .logo1,
    html[data-theme="dark"] .home-page .site-header:focus-within .logo1 { display: none; }

    html[data-theme="dark"] .home-page .site-header:hover .logo2,
    html[data-theme="dark"] .home-page .site-header:focus-within .logo2 { display: block; }

    html[data-theme="dark"] .home-page .site-header:hover .navbar-toggler .line,
    html[data-theme="dark"] .home-page .site-header:focus-within .navbar-toggler .line { background: var(--dk-ink); }
}

/* ==========================================================================
   Overrides that have to match the theme's !important
   --------------------------------------------------------------------------
   A dark rule loses to `color: #000 !important` however specific it is. Each
   of these has a theme rule that declares its colour !important, so the
   override has to as well — found by the audit rather than by anyone spotting
   a black button on a black page.
   ========================================================================== */

/* .blog-post-date li.category — `color: #000 !important` */
html[data-theme="dark"] .blog-post-date,
html[data-theme="dark"] .blog-post-date li,
html[data-theme="dark"] .blog-post-date li.category { color: var(--dk-ink) !important; }

/* .featured-stories .owl-nav button — `color: #000 !important` */
html[data-theme="dark"] .featured-stories,
html[data-theme="dark"] .featured-stories .owl-nav button { color: var(--dk-ink) !important; }

/* .mega-menu-item — `color: #454545 !important` */
html[data-theme="dark"] .mega-menu-item { color: var(--dk-ink) !important; }

/* .section-reasons-proof — `color: #3c4756 !important`, on --sec-soft, which
   the token override already darkens. */
html[data-theme="dark"] .section-reasons-proof { color: var(--dk-body) !important; }

/* .site-header i.dropdown-caret — `color: #000 !important` */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header i.dropdown-caret { color: var(--dk-ink) !important; }

/* ==========================================================================
   Section styles, moved here from builder-sections.css
   --------------------------------------------------------------------------
   These were written next to the light rules they override. They worked
   there — every one is scoped — but the dark theme in two files means the
   contrast audit only reads half of it, and it duly reported rules as
   missing that were sitting in the other file.
   ========================================================================== */

/* On a dark page the pale styles would be a white slab; they take their dark
   treatment instead. */
html[data-theme="dark"] .pbn--tone-auto.pbn--mesh,
html[data-theme="dark"] .pbn--tone-auto.pbn--grid,
html[data-theme="dark"] .pbn--tone-auto.pbn--rays { --pbn-ink: #ffffff; --pbn-body: rgba(255, 255, 255, .86); }

html[data-theme="dark"] .pbn--paper {
    --pbn-bg: #101015;
    --pbn-ink: #eef1f5;
    --pbn-body: #b9c0ca;
    border-bottom-color: rgba(255, 255, 255, .13);
}

/* A forced-light banner keeps its light treatment on a dark page — that is
   what "always light" means — but the button has to stay readable. */
html[data-theme="dark"] .pbn--tone-light .pbn-btn { background: var(--pbn-ink); color: #fff; }

/*
   In dark mode the wash deepens rather than inverting: a page header is a
   photograph with type on it either way, and a light header here would be the
   only bright band on an otherwise black page.
*/
html[data-theme="dark"] .page-title-banner { background-color: #04121e; }

html[data-theme="dark"] .page-title-banner::before {
    background: linear-gradient(100deg,
        rgba(2, 10, 18, .95) 0%,
        rgba(4, 26, 43, .9) 38%,
        rgba(0, 78, 122, .6) 68%,
        rgba(0, 78, 122, .3) 100%) !important;
}

/*
   A custom colour is the editor's decision and holds in both themes — the
   dark theme leaves it alone rather than repainting it, which would make the
   control meaningless.
*/
html[data-theme="dark"] .sec-wrap.sec-bg-custom { background: var(--sec-custom-bg, var(--dk-surface)); }

html[data-theme="dark"] .intro-body { color: var(--dk-body); }

html[data-theme="dark"] .intro-body > p:first-of-type { color: var(--dk-ink); }

/*
   The theme's band is a fixed purple, so the card and its type are already
   correct in dark mode. Only the heading rule needs to hold up.
*/
html[data-theme="dark"] .hbn-card { background: var(--dk-raised); }

html[data-theme="dark"] .hbn-lede { color: var(--dk-ink); }

html[data-theme="dark"] .hbn-copy { color: var(--dk-body); }

html[data-theme="dark"] .hbn-cta { color: var(--dk-brand); }

/* ==========================================================================
   Rules moved here from the file they were written beside
   --------------------------------------------------------------------------
   These were written next to the light rules they override. They worked
   there — every one is scoped — but the dark theme in two files means the
   contrast audit only reads half of it, and it duly reported rules as
   missing that were sitting in the other file.
   ========================================================================== */

html[data-theme="dark"] .site-logo--light { display: none; }

html[data-theme="dark"] .site-logo--dark { display: inline-block; }

/*
 * These paint the mobile drawer, and every one of them is scoped to the width
 * the drawer exists at.
 *
 * .navbar-collapse used to be painted here unscoped, which put a solid black
 * bar behind the desktop navigation — the exact regression the comment two
 * hundred lines up warns about, reintroduced by a later edit. Above 991px
 * .navbar-collapse is not a drawer at all; it is an inline wrapper around the
 * links, and it must stay transparent so the header can be see-through over
 * the hero.
 */
@media (max-width: 991.98px) {
    html[data-theme="dark"] .mobile-menu-title,
    html[data-theme="dark"] .site-header .navbar-collapse { background: #0b0b0f; }

    html[data-theme="dark"] .mobile-menu-title { border-bottom-color: var(--dk-line); }

    html[data-theme="dark"] .mnav-close { background: #1b1b22; color: var(--dk-ink); }

    html[data-theme="dark"] .mnav-foot { background: #0e0e12; border-top-color: var(--dk-line); }

    html[data-theme="dark"] .site-header .navbar-collapse .nav-item { border-bottom-color: var(--dk-line); }
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    html[data-theme="dark"] .site-header .navbar-collapse,
    html[data-theme="dark"] .site-header .navbar-collapse .mobile-menu-title { background: #0b0b0f; }

    html[data-theme="dark"] .site-header .navbar-collapse .mobile-menu-title { border-bottom-color: var(--dk-line); }

    html[data-theme="dark"] .site-header .navbar-collapse .mnav-close {
        background: #1b1b22;
        color: var(--dk-ink);
    }

    html[data-theme="dark"] .site-header .navbar-collapse .navbar-nav > li { border-bottom-color: var(--dk-line); }

    html[data-theme="dark"] .site-header .navbar-collapse .navbar-nav > li > a,
    html[data-theme="dark"] .site-header .navbar-collapse .nav-link { color: var(--dk-ink) !important; }

    html[data-theme="dark"] .site-header .navbar-collapse .mega-menu .dropdown-menu,
    html[data-theme="dark"] .site-header .navbar-collapse .mega-menu .dropdown-menu .container,
    html[data-theme="dark"] .site-header .navbar-collapse .sub-menu { background: #101015 !important; }

    html[data-theme="dark"] .site-header .navbar-collapse .mega-menu-content ul li a,
    html[data-theme="dark"] .site-header .navbar-collapse ul.sabmenu-list a,
    html[data-theme="dark"] .site-header .navbar-collapse .sub-menu li a {
        color: var(--dk-body) !important;
        border-bottom-color: var(--dk-line);
    }

    html[data-theme="dark"] .site-header .navbar-collapse .dropdown-caret,
    html[data-theme="dark"] .site-header .navbar-collapse .dropdown-icon {
        background: rgba(74, 168, 221, .14);
        color: var(--dk-brand) !important;
    }

    html[data-theme="dark"] .site-header .navbar-collapse .right-menu { border-top-color: var(--dk-line); }

    html[data-theme="dark"] .site-header .navbar-collapse .right-menu .site-search-toggle,
    html[data-theme="dark"] .site-header .navbar-collapse .right-menu .site-theme-toggle {
        background: #1b1b22;
        color: var(--dk-ink) !important;
    }

    html[data-theme="dark"] .site-header .navbar-collapse .mnav-foot {
        background: #0e0e12;
        border-top-color: var(--dk-line);
    }

    html[data-theme="dark"] .mnav-foot .site-topbar-links > li > a,
    html[data-theme="dark"] .mnav-foot .site-locale-toggle { color: var(--dk-ink) !important; }
}

/*
   Base-form overrides for two classes whose light rules declare their colour
   !important (the drawer forces colours over the theme's white-for-the-hero
   links). An override that is merely more specific loses to those.
*/
html[data-theme="dark"] .mega-menu-column { color: var(--dk-ink) !important; }
html[data-theme="dark"] .mnav-foot { color: var(--dk-ink) !important; }

/*
   The rail card's title.

   `.rail-card h3 { color: inherit }` and `html[data-theme="dark"] h3` have
   identical specificity, and this file loads last — so the title took
   --dk-ink and stayed near-white when the card inverted to its light active
   state, leaving the description visible above nothing.

   Stated for both states rather than relying on inherit, since the generic
   heading rule will always out-order it.
*/
html[data-theme="dark"] .rail-card h3 { color: #fff; }

html[data-theme="dark"] .rail-card:hover h3,
html[data-theme="dark"] .rail-card:focus-visible h3,
html[data-theme="dark"] .rail-card.is-active h3 { color: var(--rail-active-ink); }

html[data-theme="dark"] .rail-card:hover p,
html[data-theme="dark"] .rail-card:focus-visible p,
html[data-theme="dark"] .rail-card.is-active p { color: #4a5462; }

/* Same collision on a chosen surface. */
html[data-theme="dark"] .sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card h3 { color: #fff; }
html[data-theme="dark"] .sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card:hover h3,
html[data-theme="dark"] .sec-wrap[class*="sec-bg-"] > .rail-sec .rail-card.is-active h3 { color: var(--rail-active-ink); }

/* --------------------------------------------------------------------------
   Downloads
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .dl-link {
    background: var(--dk-raised);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .dl-link:hover {
    border-color: var(--dk-brand);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
    color: var(--dk-ink);
}

html[data-theme="dark"] .dl-title { color: var(--dk-ink); }
html[data-theme="dark"] .dl-copy  { color: var(--dk-body); }
html[data-theme="dark"] .dl-meta  { color: var(--dk-muted); }
html[data-theme="dark"] .dl-head p { color: var(--dk-body); }
html[data-theme="dark"] .dl-action { color: var(--dk-brand); }

/*
   The format tints are pale washes made for a white card. On a near-black one
   they are bright patches, so each becomes a low-opacity version of its own
   hue with the mark itself lifted to read against it.
*/
html[data-theme="dark"] .dl-tone-pdf    { --dl-tint: rgba(192, 57, 43, .18);  --dl-ink: #f08a7d; }
html[data-theme="dark"] .dl-tone-doc    { --dl-tint: rgba(26, 95, 180, .2);   --dl-ink: #7fb2ee; }
html[data-theme="dark"] .dl-tone-xls    { --dl-tint: rgba(30, 127, 71, .2);   --dl-ink: #6dc994; }
html[data-theme="dark"] .dl-tone-ppt    { --dl-tint: rgba(194, 84, 10, .2);   --dl-ink: #f0a172; }
html[data-theme="dark"] .dl-tone-zip    { --dl-tint: rgba(255, 255, 255, .1); --dl-ink: #b9c0ca; }
html[data-theme="dark"] .dl-tone-design { --dl-tint: rgba(126, 34, 206, .22); --dl-ink: #c99af0; }
html[data-theme="dark"] .dl-tone-other  { --dl-tint: rgba(74, 168, 221, .18); --dl-ink: #4aa8dd; }

/* ==========================================================================
   Attachments inserted from a text editor
   ==========================================================================
   The format tints are pale washes designed for a white page; on a dark one
   they become bright blocks. Each becomes a low-alpha version of itself, and
   the ink brightens so it still reads against the darker tint.
   ========================================================================== */

html[data-theme="dark"] .ed-file { --ed-tint: rgba(0, 112, 173, .18); --ed-ink: #74c0f0; }

html[data-theme="dark"] .ed-file[href$=".pdf"]  { --ed-tint: rgba(192, 57, 43, .18);  --ed-ink: #f08c80; }
html[data-theme="dark"] .ed-file[href$=".doc"],
html[data-theme="dark"] .ed-file[href$=".docx"],
html[data-theme="dark"] .ed-file[href$=".odt"],
html[data-theme="dark"] .ed-file[href$=".rtf"],
html[data-theme="dark"] .ed-file[href$=".txt"]  { --ed-tint: rgba(26, 95, 180, .20);  --ed-ink: #8ab6ee; }
html[data-theme="dark"] .ed-file[href$=".xls"],
html[data-theme="dark"] .ed-file[href$=".xlsx"],
html[data-theme="dark"] .ed-file[href$=".ods"],
html[data-theme="dark"] .ed-file[href$=".csv"]  { --ed-tint: rgba(30, 127, 71, .20);  --ed-ink: #7fd3a1; }
html[data-theme="dark"] .ed-file[href$=".ppt"],
html[data-theme="dark"] .ed-file[href$=".pptx"],
html[data-theme="dark"] .ed-file[href$=".odp"]  { --ed-tint: rgba(194, 84, 10, .20);  --ed-ink: #f0a26a; }
html[data-theme="dark"] .ed-file[href$=".zip"],
html[data-theme="dark"] .ed-file[href$=".rar"],
html[data-theme="dark"] .ed-file[href$=".7z"],
html[data-theme="dark"] .ed-file[href$=".tar"],
html[data-theme="dark"] .ed-file[href$=".gz"]   { --ed-tint: rgba(255, 255, 255, .10); --ed-ink: #c3ccd7; }
html[data-theme="dark"] .ed-file[href$=".psd"],
html[data-theme="dark"] .ed-file[href$=".ai"],
html[data-theme="dark"] .ed-file[href$=".eps"],
html[data-theme="dark"] .ed-file[href$=".indd"],
html[data-theme="dark"] .ed-file[href$=".fig"],
html[data-theme="dark"] .ed-file[href$=".xd"],
html[data-theme="dark"] .ed-file[href$=".sketch"] { --ed-tint: rgba(126, 34, 206, .24); --ed-ink: #c99af0; }

html[data-theme="dark"] .ed-file--card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .ed-file--card:hover {
    border-color: var(--ed-ink);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    color: var(--dk-ink);
}

html[data-theme="dark"] .ed-file-meta,
html[data-theme="dark"] .ed-file-note { color: var(--dk-body); }

html[data-theme="dark"] .ed-file--chip { border-color: var(--dk-line); }

html[data-theme="dark"] .ed-file--button { background: var(--dk-brand, #2a9adb); color: #08141d; }
html[data-theme="dark"] .ed-file--button:hover { background: #56b3e6; color: #08141d; }

html[data-theme="dark"] .ed-file--inline { color: var(--ed-ink); }
html[data-theme="dark"] .ed-file--inline:hover { color: #9ed4f5; }

/* Form fields the builder can now produce. The star tint and the step
   progress label are the only things that do not inherit correctly. */
html[data-theme="dark"] .dyn-rating-star { color: rgba(255, 255, 255, .22); }
html[data-theme="dark"] .dyn-rating-star:hover,
html[data-theme="dark"] .dyn-rating-star:hover ~ .dyn-rating-star,
html[data-theme="dark"] .dyn-rating-star:has(input:checked),
html[data-theme="dark"] .dyn-rating-star:has(input:checked) ~ .dyn-rating-star { color: #ffc233; }
html[data-theme="dark"] .dyn-step-progress { color: var(--dk-body); }

/* CV autofill. The pale tints are for a white form; on a dark one they become
   bright blocks that read as errors. */
html[data-theme="dark"] .rz-notice--ok {
    background: rgba(30, 127, 71, .18);
    border-color: rgba(30, 127, 71, .4);
    color: #7fd3a1;
}

html[data-theme="dark"] .rz-notice--quiet {
    background: rgba(255, 255, 255, .06);
    border-color: var(--dk-line);
    color: var(--dk-body);
}

html[data-theme="dark"] .rz-filled {
    background: rgba(240, 192, 64, .12) !important;
    border-color: rgba(240, 192, 64, .55) !important;
}

/* Hiring process. The connecting rule and the closing note are the only
   things that do not inherit correctly on a dark background. */
html[data-theme="dark"] .hp-step::after { background: var(--dk-line); }
html[data-theme="dark"] .hp-step-time { color: var(--dk-body); }
html[data-theme="dark"] .hp-note {
    background: rgba(255, 255, 255, .05);
    border-left-color: var(--dk-brand, #2a9adb);
    color: var(--dk-body);
}

/* The prefix on a currency field — Bootstrap's .input-group-text, which the
   theme paints a pale blue for a white form. On a dark one it is a bright
   block against a dark input. */
html[data-theme="dark"] .input-group-text {
    background: rgba(255, 255, 255, .08);
    border-color: var(--dk-line);
    color: var(--dk-body);
}

/* The cookie prompt is a centred dialog now, so the veil behind it needs to
   be darker than the page rather than lighter. */
html[data-theme="dark"] .cookie-bar { background: rgba(0, 0, 0, .68); }
html[data-theme="dark"] .cookie-bar > form,
html[data-theme="dark"] .cookie-bar > .cookie-panel {
    background: var(--dk-surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

/* The general-application invitation and its dialog. */
html[data-theme="dark"] .co-invite {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .co-invite-note { color: var(--dk-body); }

html[data-theme="dark"] .co-modal-veil { background: rgba(0, 0, 0, .7); }

html[data-theme="dark"] .co-modal-panel {
    background: var(--dk-surface);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
}

html[data-theme="dark"] .co-modal-head {
    background: var(--dk-surface);
    border-bottom-color: var(--dk-line);
}

html[data-theme="dark"] .co-modal-head p { color: var(--dk-body); }

html[data-theme="dark"] .co-modal-close {
    background: transparent;
    border-color: var(--dk-line);
    color: var(--dk-body);
}

html[data-theme="dark"] .co-modal-close:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--dk-ink);
}

/* Call to action — the five new layouts. Band already inherits correctly. */
html[data-theme="dark"] .cta-stat {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .cta-stat-figure {
    border-right-color: var(--dk-line);
    border-bottom-color: var(--dk-line);
}

html[data-theme="dark"] .cta-stat-figure strong { color: var(--dk-brand, #2a9adb); }
html[data-theme="dark"] .cta-stat-figure span   { color: var(--dk-body); }

html[data-theme="dark"] .cta-minimal { border-top-color: var(--dk-line); }

html[data-theme="dark"] .cta-card { background: var(--dk-brand, #2a9adb); }
html[data-theme="dark"] .cta-card h2 { color: #08141d; }
html[data-theme="dark"] .cta-card p  { color: rgba(8, 20, 29, .8); }
html[data-theme="dark"] .cta-card .global-btn { background: #08141d; color: var(--dk-ink); }
html[data-theme="dark"] .cta-card .cta-secondary { color: #08141d; }

/* Contact page additions. */
html[data-theme="dark"] .ct-expect { background: var(--dk-surface-2, rgba(255, 255, 255, .04)); }
html[data-theme="dark"] .ct-expect-note { color: var(--dk-body); }

html[data-theme="dark"] .ct-route {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .ct-route:hover {
    border-color: var(--dk-brand, #2a9adb);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    color: var(--dk-ink);
}

html[data-theme="dark"] .ct-route-icon {
    background: rgba(255, 255, 255, .07);
    color: var(--dk-brand, #2a9adb);
}

html[data-theme="dark"] .ct-route-body span { color: var(--dk-body); }
html[data-theme="dark"] .ct-route > .fa-arrow-right { color: var(--dk-brand, #2a9adb); }

html[data-theme="dark"] .ct-legal-list { border-top-color: var(--dk-line); }
html[data-theme="dark"] .ct-legal-list dt { color: var(--dk-body); }

/* 360° Value. */
html[data-theme="dark"] .v360-dial { background: var(--dk-surface); }
html[data-theme="dark"] .v360-dial-ring { border-color: rgba(42, 154, 219, .38); }
html[data-theme="dark"] .v360-dial-text strong { color: var(--dk-brand, #2a9adb); }
html[data-theme="dark"] .v360-dial-text em { color: var(--dk-body); }
html[data-theme="dark"] .v360-pin-label { color: var(--dk-ink); }
html[data-theme="dark"] .v360-points span span { color: var(--dk-body); }
html[data-theme="dark"] .v360-point-mark {
    background: rgba(255, 255, 255, .07);
    color: var(--dk-brand, #2a9adb);
}

/* Services listing. */
html[data-theme="dark"] .dll-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html[data-theme="dark"] .dll-card:hover {
    border-color: var(--dk-brand, #2a9adb);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    color: var(--dk-ink);
}

html[data-theme="dark"] .dll-media { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .dll-summary { color: var(--dk-body); }
html[data-theme="dark"] .dll-go { color: var(--dk-brand, #2a9adb); }
html[data-theme="dark"] .dll-grid--text .dll-number { color: var(--dk-brand, #2a9adb); }

/* Contact details. */
html[data-theme="dark"] .cd-card {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .cd-line { color: var(--dk-body); }
html[data-theme="dark"] a.cd-line:hover { color: var(--dk-brand, #2a9adb); }
html[data-theme="dark"] .cd-line i { color: var(--dk-brand, #2a9adb); }

html[data-theme="dark"] .section-standfirst { color: var(--dk-body); }

/* ==========================================================================
   Builder sections — the design pass, in dark
   ========================================================================== */

html[data-theme="dark"] .section-cards .events-sec {
    background: var(--dk-surface);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .section-cards .events-sec:hover {
    border-color: var(--dk-brand, #4aa8dd);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
}

html[data-theme="dark"] .section-cards .events-info { background: transparent; }
html[data-theme="dark"] .section-cards .events-info h3 { color: var(--dk-heading, #e8edf4); }
html[data-theme="dark"] .section-cards .events-info p { color: var(--dk-body); }
html[data-theme="dark"] .section-cards .events-sec--text,
html[data-theme="dark"] .section-cards .events-sec:not(:has(img)) { border-top-color: var(--dk-brand, #4aa8dd); }

html[data-theme="dark"] .section-stats h3 { color: var(--dk-brand, #4aa8dd); }
html[data-theme="dark"] .section-stats p { color: var(--dk-body); }
html[data-theme="dark"] .section-stats .row > [class*="col-"] + [class*="col-"]::before { background: var(--dk-line); }

html[data-theme="dark"] .bsec .heading > p,
html[data-theme="dark"] .section-image_text p,
html[data-theme="dark"] .section-content p,
html[data-theme="dark"] .section-content ul,
html[data-theme="dark"] .section-content ol { color: var(--dk-body); }

html[data-theme="dark"] .section-image_text img { box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9); }

html[data-theme="dark"] .tg-empty {
    background: var(--dk-surface-2, rgba(255, 255, 255, .03));
    border-color: var(--dk-line);
}

html[data-theme="dark"] .tg-empty p { color: var(--dk-body); }
html[data-theme="dark"] .tg-empty i { color: var(--dk-brand, #4aa8dd); }

/* Logo tiles stay light: a logo supplied as a dark PNG on transparency
   disappears entirely on a dark surface, and nothing here can know which
   was uploaded. */
html[data-theme="dark"] .cards--logo .events-logo {
    background: #f4f7fb;
    border-bottom-color: var(--dk-line);
}

html[data-theme="dark"] .cards--plain .events-sec { border-top-color: var(--dk-brand, #4aa8dd); }

/* 404 */
html[data-theme="dark"] .err-search-row input {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    color: var(--dk-heading, #e8edf4);
}

html[data-theme="dark"] .err-link {
    background: var(--dk-surface);
    border-color: var(--dk-line);
    color: var(--dk-heading, #e8edf4);
}

html[data-theme="dark"] .err-link:hover { border-color: var(--dk-brand, #4aa8dd); color: var(--dk-heading, #e8edf4); }
html[data-theme="dark"] .err-link small { color: var(--dk-body); }
html[data-theme="dark"] .err-link i { color: var(--dk-brand, #4aa8dd); }

/* Alternating rows. */
html[data-theme="dark"] .fr-copy h3,
html[data-theme="dark"] .fr-standfirst { color: var(--dk-heading, #e8edf4); }
html[data-theme="dark"] .fr-body,
html[data-theme="dark"] .fr-body p { color: var(--dk-body); }
html[data-theme="dark"] .fr-number { color: var(--dk-brand, #4aa8dd); }
html[data-theme="dark"] .fr-media img { background: rgba(255, 255, 255, .04); }


/* --------------------------------------------------------------------------
   The company-profile blocks: Fact Sheet, Client Outcomes, Logo Wall,
   People Spotlight and Numbered Principles.

   Each of these paints a panel on top of the section background. The panels
   are white in the light design, so without this they stay white while the
   text on them turns pale — which is the "section renders empty" bug the mega
   menu had, in a different place.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .bsec-fact,
html[data-theme="dark"] .bsec-case,
html[data-theme="dark"] .bsec-logo { background: var(--dk-raised); }

html[data-theme="dark"] .bsec-facts-grid { background: var(--dk-line); }

html[data-theme="dark"] .bsec-case,
html[data-theme="dark"] .bsec-logo { border-color: var(--dk-line); }

html[data-theme="dark"] a.bsec-logo:hover {
    background: #1d1d25;
    border-color: var(--dk-line-strong);
}

html[data-theme="dark"] .bsec-case:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, .5); }

html[data-theme="dark"] .bsec-person-photo { background: var(--dk-raised); }

/* The hairline above each principle, and the rule under a sector caption. */
html[data-theme="dark"] .bsec-principle,
html[data-theme="dark"] .bsec-case-client,
html[data-theme="dark"] .bsec-logowall-caption { border-color: var(--dk-line); }

/* --------------------------------------------------------------------------
   Anchors that carry their own colour
   --------------------------------------------------------------------------
   `html[data-theme="dark"] a { color: inherit }` above is (0,1,2). Any
   component that colours a link with a single class is (0,1,0) and loses to
   it, so the link silently takes its parent's colour instead.

   That is how the announcement bar's button came out white on white: the pill
   is white, its label asked for near-black, and the rule above handed it the
   bar's own white instead. Every anchor below states its colour again at a
   weight that survives.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .site-announce-action { color: #0b1b28; }
html[data-theme="dark"] .site-announce--warning .site-announce-action { color: #fff; }

/* The floating column: white icons on their own coloured discs. */
html[data-theme="dark"] .site-float { color: #fff; }

/* The company-profile blocks. */
html[data-theme="dark"] .bsec-case-link { color: var(--dk-brand); }
html[data-theme="dark"] .bsec-person-link { color: var(--dk-muted); }
html[data-theme="dark"] .bsec-person-link:hover { color: var(--dk-brand); }
html[data-theme="dark"] .bsec-logo-name { color: var(--dk-muted); }

/* The drawer's own navigation. */
html[data-theme="dark"] .mnav-overview { color: var(--dk-brand); }
html[data-theme="dark"] .mnav-back { color: var(--dk-brand); }

/* People stories: the card is white in light mode and needs a surface here. */
html[data-theme="dark"] .ts-track { background: var(--dk-raised); }
html[data-theme="dark"] .ts-role,
html[data-theme="dark"] .ts-head p { color: var(--dk-muted); }
html[data-theme="dark"] .ts-name { color: var(--dk-ink); }
html[data-theme="dark"] .ts-quote { color: var(--dk-brand); }
html[data-theme="dark"] .ts-arrow {
    background: rgba(255, 255, 255, .08);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}
html[data-theme="dark"] .ts-arrow:hover { background: var(--dk-ink); color: #0e0e12; }

/* --------------------------------------------------------------------------
   The six newer section types
   --------------------------------------------------------------------------
   Each of these draws a white card in light mode, which is a hole in the page
   here. Grouped rather than repeated so the next one added joins the list.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .pp-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .ct-table,
html[data-theme="dark"] .loc-card,
html[data-theme="dark"] .se-panel {
    background-color: var(--dk-raised);
    border-color: var(--dk-line);
    color: var(--dk-body);
}

html[data-theme="dark"] .pp-card h3,
html[data-theme="dark"] .pp-price strong,
html[data-theme="dark"] .loc-card h3,
html[data-theme="dark"] .faq-item > summary { color: var(--dk-ink); }

html[data-theme="dark"] .pp-for,
html[data-theme="dark"] .pp-note,
html[data-theme="dark"] .se-small,
html[data-theme="dark"] .ba-caption,
html[data-theme="dark"] .se-result-label,
html[data-theme="dark"] .ct-no { color: var(--dk-muted); }

html[data-theme="dark"] .faq-answer p,
html[data-theme="dark"] .loc-address,
html[data-theme="dark"] .se-field label,
html[data-theme="dark"] .se-assumption { color: var(--dk-body); }

html[data-theme="dark"] .ct-table th,
html[data-theme="dark"] .ct-table td { border-bottom-color: var(--dk-line); }

html[data-theme="dark"] .ct-table .is-highlight,
html[data-theme="dark"] .se-result { background-color: rgba(255, 255, 255, .05); }

html[data-theme="dark"] .faq-item[open] > summary { border-bottom-color: var(--dk-line); }

html[data-theme="dark"] .se-field input {
    background: rgba(255, 255, 255, .06);
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

/* The green tick needs lifting off a dark background. */
html[data-theme="dark"] .ct-yes { color: #4ade80; }

/* Testimonials: the cards are white in light mode. */
html[data-theme="dark"] .tst-card {
    background-color: var(--dk-raised);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .tst-lead { background-color: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .tst-lead blockquote { color: var(--dk-ink); }
html[data-theme="dark"] .tst-card blockquote,
html[data-theme="dark"] .tst-head p { color: var(--dk-body); }
html[data-theme="dark"] .tst-who-text strong { color: var(--dk-ink); }
html[data-theme="dark"] .tst-who-text span { color: var(--dk-muted); }
html[data-theme="dark"] .tst-who { border-top-color: var(--dk-line); }
html[data-theme="dark"] .tst-rating svg { fill: rgba(255, 255, 255, .18); }
html[data-theme="dark"] .tst-rating svg.is-on { fill: #f0a500; }

/* The ten newer types: each draws a light card or panel in light mode. */
html[data-theme="dark"] .orl-row,
html[data-theme="dark"] .crd-card,
html[data-theme="dark"] .sck-panel {
    background-color: var(--dk-raised);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .cdn-panel,
html[data-theme="dark"] .sck-result,
html[data-theme="dark"] .toc-box { background-color: rgba(255, 255, 255, .05); }

html[data-theme="dark"] .cdn-cell { background-color: var(--dk-raised); }

html[data-theme="dark"] .orl-title strong,
html[data-theme="dark"] .crd-text strong,
html[data-theme="dark"] .cdn-done,
html[data-theme="dark"] .ntc-text strong { color: var(--dk-ink); }

html[data-theme="dark"] .orl-head p,
html[data-theme="dark"] .gls-head p,
html[data-theme="dark"] .gls-list dd,
html[data-theme="dark"] .spl-part p,
html[data-theme="dark"] .stk-step p,
html[data-theme="dark"] .sck-say,
html[data-theme="dark"] .ntc-text { color: var(--dk-body); }

html[data-theme="dark"] .orl-title span,
html[data-theme="dark"] .crd-valid,
html[data-theme="dark"] .cdn-cell span,
html[data-theme="dark"] .spl-who { color: var(--dk-muted); }

html[data-theme="dark"] .gls-jump a { border-color: var(--dk-line); }

/* The tinted notices are readable on light and invisible on dark, so each gets
   its own backdrop rather than one blanket override. */
html[data-theme="dark"] .ntc-box--info { background-color: rgba(0, 112, 173, .16); }
html[data-theme="dark"] .ntc-box--success { background-color: rgba(26, 127, 55, .18); }
html[data-theme="dark"] .ntc-box--warn { background-color: rgba(154, 103, 0, .2); }
html[data-theme="dark"] .ntc-box--stop { background-color: rgba(179, 38, 30, .18); }

/* ==== assets/css/page-kit.css ==== */
/* ==========================================================================
   Page kit
   --------------------------------------------------------------------------
   A design layer for the company pages — About Us, Our Values, Clients &
   Partners, Team.

   Written from scratch rather than as more patches on the theme. Those pages
   were rendering through classes built for a 2015 Bootstrap template
   (.about-section, .banner-sec, .events-conferences), and every previous
   attempt to improve them was an override fighting a rule further up the
   cascade. That is why they kept coming out flat: the underlying system had
   no type scale, no spacing scale and no surfaces, so there was nothing to
   be consistent with.

   Everything here is scoped under `.pk` on the body. Nothing outside those
   four pages can be touched by any of it, which is what makes it safe for
   this file to be as opinionated as it is.

   Three ideas, and that is the whole system:

     1. One scale for type and one for space, both fluid. Nothing is a
        magic number.
     2. Surfaces alternate so a reader can see where one idea ends and the
        next begins, without rules and boxes everywhere.
     3. Copy has a measure. Nothing runs the full width of a 1400px page.
   ========================================================================== */

.pk {
    /* ---- Type ------------------------------------------------------------
       A 1.25 scale, fluid between a phone and a large desktop. Headings are
       set tight; body copy is not. */
    --pk-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
    --pk-h2:      clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
    --pk-h3:      clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
    --pk-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
    --pk-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --pk-small:   0.875rem;

    /* ---- Space -----------------------------------------------------------
       Section rhythm is the single biggest thing that makes a page read as
       designed, and it was the thing most obviously missing. */
    /* The site's rhythm, not a second one. The kit used to set its own
       section spacing at nearly twice everything else, so moving between a
       company page and any other page changed how the site breathed. Its type
       scale and surfaces are still its own — only the gap is shared. */
    --pk-section:  var(--sec-rhythm, clamp(48px, 6vw, 96px));
    --pk-block:    clamp(2rem, 1.2rem + 3vw, 4rem);
    --pk-gap:      clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
    --pk-gutter:   clamp(1.25rem, 0.5rem + 3vw, 4rem);

    /* ---- Colour ----------------------------------------------------------
       Two surfaces and one accent. More than that and alternating stops
       meaning anything. */
    --pk-ink:      #0f1b26;
    --pk-body-ink: #55616f;
    --pk-muted:    #7b8593;
    --pk-line:     #e3e9f1;
    --pk-surface:  #ffffff;
    --pk-surface-2:#f5f8fb;
    --pk-brand:    #0070ad;
    --pk-brand-dk: #005580;
    --pk-radius:   18px;
}

/* --------------------------------------------------------------------------
   Reset just enough
   -------------------------------------------------------------------------- */

.pk main { color: var(--pk-body-ink); }

.pk main h1, .pk main h2, .pk main h3, .pk main h4 {
    color: var(--pk-ink);
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.pk main p { color: var(--pk-body-ink); }

/* The theme's section paddings are replaced wholesale rather than adjusted:
   pt-7/pb-7 and mt-5 are what made the rhythm arbitrary. */
.pk main section {
    padding-top: var(--pk-section) !important;
    padding-bottom: var(--pk-section) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 * …but the editor's own spacing choice still decides which step of the scale.
 *
 * A first version of this collapsed every section to one padding, which read
 * evenly and quietly took the Vertical spacing control away: an editor could
 * set Compact or Generous and nothing moved. The scale is the kit's, the step
 * is theirs.
 */
.pk main .sec-pad-none > section { padding-block: 0 !important; }
.pk main .sec-pad-sm   > section { padding-block: var(--pk-block) !important; }
.pk main .sec-pad-md   > section { padding-block: var(--pk-section) !important; }
.pk main .sec-pad-lg   > section { padding-block: calc(var(--pk-section) * 1.35) !important; }

/* The banner keeps its own generous padding — it is a header, not a section. */
.pk main .page-title-banner { padding-top: 0 !important; padding-bottom: 0 !important; }

.pk main .container { padding-inline: var(--pk-gutter); max-width: 1320px; }

/* Two sections on the same surface read as one long section. Alternating is
   how the eye finds the seams. */
.pk main .sec-wrap { padding-block: 0; }
.pk main .sec-bg-light,
.pk main .sec-bg-soft { background: var(--pk-surface-2); }

/* --------------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------------
   One pattern everywhere: an optional eyebrow, a heading, and a lead
   paragraph on a measure. Centred only where the section asks for it.
   -------------------------------------------------------------------------- */

.pk main .heading {
    padding: 0 0 var(--pk-block);
    margin: 0;
    max-width: none;
    text-align: left;
}

.pk main .heading h2 {
    font-size: var(--pk-h2);
    font-weight: 500;
    line-height: 1.12;
    margin: 0 0 0.5em;
    max-width: 22ch;
}

.pk main .heading > p {
    font-size: var(--pk-lead);
    line-height: 1.6;
    max-width: 62ch;
    margin: 0;
    color: var(--pk-body-ink);
}

.pk main .sec-align-center .heading { text-align: center; }
.pk main .sec-align-center .heading h2,
.pk main .sec-align-center .heading > p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Page banner
   --------------------------------------------------------------------------
   Editorial rather than a photograph with a scrim: the title is the point,
   and it should not depend on somebody having uploaded artwork.
   -------------------------------------------------------------------------- */

.pk .page-title-banner {
    position: relative;
    min-height: clamp(300px, 42vh, 460px);
    display: flex;
    align-items: flex-end;
    background-color: #08243b;
    overflow: hidden;
}

.pk .page-title-banner > .container {
    padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem);
}

.pk .page-title-banner h1 {
    font-size: var(--pk-display);
    font-weight: 400;
    line-height: 1.04;
    color: #fff;
    max-width: 16ch;
    margin: 0;
    padding-top: 1.25rem;
}

.pk .page-title-banner h1::before {
    width: 72px;
    height: 2px;
    background: rgba(255, 255, 255, .75);
}

.pk .page-title-banner p {
    margin: 1.25rem 0 0;
    max-width: 56ch;
    font-size: var(--pk-lead);
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
}

/* --------------------------------------------------------------------------
   Rich text
   -------------------------------------------------------------------------- */

.pk main .section-content .heading + p,
.pk main .section-content p,
.pk main .section-content li {
    font-size: var(--pk-body);
    line-height: 1.75;
    max-width: 68ch;
}

.pk main .section-standfirst {
    font-size: var(--pk-lead);
    line-height: 1.6;
    color: var(--pk-ink);
    max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------
   A quieter card than the theme's: no border by default, a surface, and the
   lift only on hover. Borders on every card is what made the grids look like
   a spreadsheet.
   -------------------------------------------------------------------------- */

.pk main .section-cards .row { --bs-gutter-x: var(--pk-gap); --bs-gutter-y: var(--pk-gap); }

.pk main .section-cards .events-sec {
    border: 0;
    border-radius: var(--pk-radius);
    background: var(--pk-surface);
    box-shadow: 0 1px 2px rgba(15, 27, 38, .04), 0 12px 28px -20px rgba(15, 27, 38, .3);
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}

.pk main .sec-bg-light .section-cards .events-sec,
.pk main .sec-bg-soft .section-cards .events-sec { background: var(--pk-surface); }

.pk main .section-cards .events-sec:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(15, 27, 38, .05), 0 26px 50px -26px rgba(15, 27, 38, .45);
}

.pk main .section-cards .events-sec img { aspect-ratio: 3 / 2; }

.pk main .section-cards .events-info { padding: var(--pk-gap); }

.pk main .section-cards .events-info h3 {
    font-size: var(--pk-h3);
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.pk main .section-cards .events-info p {
    font-size: var(--pk-body);
    line-height: 1.6;
    color: var(--pk-body-ink);
}

/* A text-only card leads with a rule rather than pretending to be a photo. */
.pk main .section-cards .events-sec--text {
    border-top: 2px solid var(--pk-brand);
    box-shadow: none;
    background: var(--pk-surface);
}

.pk main .section-cards .events-sec--text:hover {
    box-shadow: 0 20px 44px -28px rgba(15, 27, 38, .4);
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.pk main .section-stats h3 {
    font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
    font-weight: 600;
    line-height: 0.95;
    color: var(--pk-brand);
}

.pk main .section-stats p {
    font-size: var(--pk-small);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pk-muted);
}

/* --------------------------------------------------------------------------
   Alternating rows
   -------------------------------------------------------------------------- */

.pk main .fr-rows { gap: var(--pk-section); }

.pk main .fr-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}

.pk main .fr-media img { border-radius: var(--pk-radius); }

.pk main .fr-copy h3 {
    font-size: var(--pk-h2);
    font-weight: 500;
    line-height: 1.14;
    max-width: 18ch;
}

.pk main .fr-body,
.pk main .fr-body p {
    font-size: var(--pk-body);
    line-height: 1.75;
    max-width: 54ch;
}

.pk main .fr-number {
    font-size: var(--pk-small);
    letter-spacing: .18em;
    color: var(--pk-muted);
}

/* --------------------------------------------------------------------------
   Image beside text
   -------------------------------------------------------------------------- */

.pk main .section-image_text .row { --bs-gutter-x: clamp(2rem, 1rem + 4vw, 5rem); }
.pk main .section-image_text img { border-radius: var(--pk-radius); box-shadow: none; }
.pk main .section-image_text p { font-size: var(--pk-body); line-height: 1.75; max-width: 54ch; }

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

.pk main .section-quote h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem) !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    max-width: 26ch;
}

.pk main .section-quote p { font-size: var(--pk-small); letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pk main .global-btn2 {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--pk-body);
    font-weight: 500;
    color: var(--pk-brand);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap .2s ease, color .2s ease;
}

.pk main .global-btn2:hover { gap: .9rem; color: var(--pk-brand-dk); }
.pk main .global-btn2 i { transition: none; }

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.pk main .cta,
.pk main .section-cta {
    background: linear-gradient(120deg, #08243b 0%, var(--pk-brand-dk) 62%, var(--pk-brand) 100%);
}

.pk main .cta-heading h2 {
    font-size: var(--pk-h2);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    max-width: 20ch;
}

.pk main .cta-heading p {
    font-size: var(--pk-lead);
    color: rgba(255, 255, 255, .85);
    max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Dynamic listings
   -------------------------------------------------------------------------- */

.pk main .dll-card {
    border-radius: var(--pk-radius);
    border-color: transparent;
    background: var(--pk-surface);
    box-shadow: 0 1px 2px rgba(15, 27, 38, .04), 0 12px 28px -20px rgba(15, 27, 38, .3);
}

.pk main .dll-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -26px rgba(15, 27, 38, .45);
}

.pk main .dll-title { font-size: var(--pk-h3); font-weight: 500; line-height: 1.25; }
.pk main .dll-summary { font-size: var(--pk-body); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Dark
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .pk {
    --pk-ink:       #e9eef5;
    --pk-body-ink:  #aab3c0;
    --pk-muted:     #8791a0;
    --pk-line:      rgba(255, 255, 255, .12);
    --pk-surface:   #141b23;
    --pk-surface-2: #0e141a;
    --pk-brand:     #4aa8dd;
    --pk-brand-dk:  #2f8bc0;
}

html[data-theme="dark"] .pk main .section-cards .events-sec,
html[data-theme="dark"] .pk main .dll-card {
    background: var(--pk-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 34px -22px rgba(0, 0, 0, .85);
}

html[data-theme="dark"] .pk main .section-cards .events-sec--text {
    border-top-color: var(--pk-brand);
}

/* The pull quote's measure belongs to the block, not to the heading alone —
   see the note in builder-sections.css. The kit set it on the h3, which left
   the attribution running the full column width beneath it. */
.pk main .section-quote h3 { max-width: none !important; }
.pk main .section-quote .heading { max-width: min(54rem, 100%); margin-inline: auto; }