@layer framework { body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse:collapse; border-spacing:0; } fieldset { border:0; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:start; } h1,h2,h3,h4,h5,h6 { font-size:100%; } q:before,q:after { content:''; } *, *::before, *::after { box-sizing: border-box; } img, video { max-width: 100%; height: auto; display: block; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-wrap: break-word; } .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :target { scroll-margin-block-start: var(--anchor-scroll-margin, 30px); } .scrollHighlight { animation: aurealis-scroll-highlight 1.5s ease-out; } @keyframes aurealis-scroll-highlight { from { background-color: var(--color-scroll-highlight, #ff9); } } #noscript div { position: absolute; inset-block-end: 6px; inset-inline-start: 50%; transform: translateX(-50%); width: 500px; max-width: 90%; padding: 10px; text-align: center; font-weight: bold; border: 1px solid var(--notice-border-color); background: var(--notice-background); z-index: 3; } div#flashMessage { display: flex; align-items: center; gap: 10px; margin-block-end: 15px; padding: 10px 16px; font-weight: bold; &::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } span { display: block; } } div.flashConfirmation { border: 1px solid var(--notice-border-color); background: var(--notice-background); &::before { background-color: var(--notice-icon-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } } div.flashWarning { border: 1px solid var(--warning-border-color); background: var(--warning-background); &::before { background-color: var(--warning-border-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } } div.flashError { border: 1px solid var(--error-border-color); background: var(--error-background); &::before { background-color: var(--color-error); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); } } div#changeWarning { display: none; position: fixed; inset-block-start: 5px; inset-inline-start: 50%; transform: translateX(-50%); align-items: center; gap: 10px; width: 50%; padding: 10px 16px; font-weight: bold; border: 1px solid var(--notice-border-color); background: var(--notice-background); opacity: 0; &::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; background-color: var(--notice-icon-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } span { flex: 1; display: block; text-align: center; } button { margin: 10px 10px 3px 10px; padding: 4px 7px; } &.show { display: flex; opacity: 1; animation: fadeInFromNone 1s ease-out; } &.sleeping { opacity: 0.5; &:hover { opacity: 1; } } } @keyframes fadeInFromNone { 0% { opacity: 0; } 100% { opacity: 1; } }} :root { --color-background: #fff; --color-text: #000; --color-icon: #666; --link-color: #404040; --notice-background: #fbfba9; --notice-border-color: #baba45; --notice-icon-color: #6a6a00; --warning-background: #fab89b; --warning-border-color: #ba633c; --color-error: #ba4545; --error-background: #fa9599; --error-border-color: var(--color-error); --confirmation-background: #2e7d32; --confirmation-color: #fff; --color-valid: #45ba45; --header-background: transparent; --logo-background: transparent; --mainnav-background: transparent; --languagechoice-background: transparent; --footer-background: transparent; --modal-overlay-background: rgba(0, 0, 0, 0.7); --viewer-text-color: #fff; --viewer-icon-color: #fff; --consent-background: var(--color-background); --consent-color: var(--color-text); --consent-border-color: var(--color-icon); --consent-button-background: var(--form-accent, #4a4a4a); --consent-button-color: var(--form-accent-ink, #fff); } @font-face { font-family: "Noto Sans"; src: url('/fonts/framework/NotoSans-Regular.ttf') format('truetype'); } html, body, table, input, select, textarea { font: 15px "Noto Sans"; line-height: 1.75; } html, body { background: var(--color-background); } body, table, input, textarea, select, button { color: var(--color-text); } a { color: var(--link-color); } header { height: 150px; background: var(--header-background); display: grid; grid-template-columns: 300px 1fr 300px; grid-template-areas: "logo mainNav languageChoice"; } a#logo { grid-area: logo; display: flex; align-items: center; height: 100px; margin: 25px; background: var(--logo-background); img { max-height: 100%; } } nav#mainNav { grid-area: mainNav; display: flex; align-items: center; background: var(--mainnav-background); ol { display: flex; gap: 25px; } button.btnCollapsedNavigation { display: none; } > ol > li { position: relative; } > ol > li > ol { position: absolute; top: 100%; left: 0; z-index: 50; flex-direction: column; gap: 0; visibility: hidden; } > ol > li:hover > ol, > ol > li:focus-within > ol, > ol > li.open > ol { visibility: visible; } li.parentItem { display: none; } > ol > li.open > ol > li.parentItem { display: block; } } nav#languageChoice { grid-area: languageChoice; display: flex; align-items: center; justify-content: flex-end; margin: 25px; background: var(--languagechoice-background); ol { display: flex; gap: 10px; } } html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } main { flex: 1; } footer { height: 100px; background: var(--footer-background); display: flex; align-items: center; justify-content: center; gap: 20px; } a#backtotop { position: fixed; inset-block-end: 25px; inset-inline-end: 25px; width: 35px; height: 35px; background: var(--color-icon); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14'/%3E%3Cpath d='m18 13-6-6-6 6'/%3E%3Cpath d='M12 7v14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14'/%3E%3Cpath d='m18 13-6-6-6 6'/%3E%3Cpath d='M12 7v14'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: contain; } :root { --spacing-factor-none: 0; --spacing-factor-xsmall: .2; --spacing-factor-small: .6; --spacing-factor-normal: 1; --spacing-factor-large: 1.5; --spacing-factor-xlarge: 2; --spacing-vertical: 20px; --spacing-horizontal: clamp(5vw, 20vw - 130px, 15vw); --column-gap: 2em; --widget-air: 40px; --slidernav-color: #fff; --slidernav-background: rgba(0, 0, 0, 0.5); --photo-row-height: clamp(120px, 24vw, 200px); --photo-row-gap: 8px; --photo-row-seconds-per-photo: 4s; } section { position: relative; isolation: isolate; overflow: hidden; --spacing-margin-top: var(--spacing-vertical); --spacing-margin-bottom: var(--spacing-vertical); --spacing-padding-top: var(--spacing-vertical); --spacing-padding-bottom: var(--spacing-vertical); --spacing-padding-left: var(--spacing-horizontal); --spacing-padding-right: var(--spacing-horizontal); margin: var(--spacing-margin-top) 0 var(--spacing-margin-bottom); padding: var(--spacing-padding-top) var(--spacing-padding-right) var(--spacing-padding-bottom) var(--spacing-padding-left); } section { background-position: center; background-repeat: no-repeat; background-size: cover; } section.prlxStatic { background-attachment: fixed; } video.sectionBackground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } section.verticalCenter { align-content: center; } section.inverted { color: var(--color-background); --link-color: var(--color-background); } img[data-placeholder][src*="/images/mysite/samples/"] { outline: 2px dashed var(--color-text); outline-offset: -10px; } section.fullWidthText { } section.hero { display: grid; grid-template-columns: var(--column-widths, 1fr 1fr); gap: var(--column-gap); align-items: center; div.visual { position: relative; img { display: block; width: 100%; } p.card { position: absolute; left: 20px; bottom: 20px; margin: 0; padding: 10px 16px; background: var(--color-background); color: var(--color-text); strong { display: block; } span { display: block; } } } &:not(:has(div.visual)) { grid-template-columns: 1fr; } div.text p:has(> a.button, > a.buttonOutline) { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; a.button { margin-inline-end: 0; } } @media (width <= 650px) { grid-template-columns: 1fr; div.visual img { max-height: 625px; object-fit: cover; } } } section.trustStrip, section.wordStrip { display: grid; grid-template-columns: var(--column-widths, repeat(auto-fit, minmax(160px, 1fr))); gap: var(--column-gap); align-items: center; p.stat, p.claim { margin: 0; } > :not(.stat, .claim) { grid-column: 1 / -1; } } section.services { div.zone { display: grid; grid-template-columns: var(--column-widths, 1fr 1fr); gap: var(--column-gap); align-items: center; div.visual { position: relative; img { display: block; width: 100%; } p.badge { position: absolute; top: 18px; left: 18px; margin: 0; } p:not(.badge) { margin: 0; } figure { margin: 0; figcaption { position: absolute; left: 14px; bottom: 14px; margin: 0; } } } div.text p:last-child { margin-bottom: 0; } } div.zone + div.zone { margin-top: 40px; } @media (width <= 1050px) { div.zone + div.zone { margin-top: 65px; } } div.zone:nth-child(even of div.zone) { div.visual { order: 2; } } @media (width <= 650px) { div.zone { grid-template-columns: 1fr; div.visual { order: -1; img { max-height: 320px; object-fit: cover; } } } div.zone:nth-child(even of div.zone) div.visual { order: -1; } } } section.steps { ol.steps { --step-size: 48px; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--column-gap); li { margin: 0; justify-self: center; text-align: center; &::before { content: counter(step); width: var(--step-size); height: var(--step-size); margin: 0 auto 18px; border-radius: 999px; background: var(--color-text); color: var(--color-background); font-weight: bold; display: flex; align-items: center; justify-content: center; } strong { display: block; } } } @media (width <= 700px) { ol.steps { grid-auto-flow: row; grid-auto-columns: auto; } } } section.whyUs { display: grid; grid-template-columns: var(--column-widths, 1fr 1fr); gap: var(--column-gap); align-items: center; div.text > :last-child { margin-bottom: 0; } div.tiles { display: grid; grid-template-columns: repeat(var(--tile-columns, 2), 1fr); gap: var(--tile-gap, var(--column-gap)); p.tile { margin: 0; } > :not(.tile) { grid-column: 1 / -1; } } @media (width <= 1000px) { grid-template-columns: 1fr; } } section.benefits { display: grid; grid-template-columns: repeat(var(--benefit-columns, 3), 1fr); column-gap: var(--benefit-gap, var(--column-gap)); > :not(.benefit) { grid-column: 1 / -1; } p.benefit { margin: var(--benefit-gap, var(--column-gap)) 0 0; } @media (width <= 700px) { --benefit-columns: 1; } } section.taskList { display: grid; grid-template-columns: var(--column-widths, 1fr 1fr); gap: var(--column-gap); align-items: center; div.text > :last-child { margin-bottom: 0; } div.tasks { display: grid; grid-template-columns: repeat(var(--task-columns, 2), 1fr); gap: var(--task-gap, var(--column-gap)); p.task { margin: 0; } > :not(.task) { grid-column: 1 / -1; } } @media (width <= 700px) { grid-template-columns: 1fr; } } section.twoColumn { --column-widths: 1fr 1fr; } section.threeColumn { --column-widths: 1fr 1fr 1fr; } section.fourColumn { --column-widths: 1fr 1fr 1fr 1fr; } section.fiveColumn { --column-widths: 1fr 1fr 1fr 1fr 1fr; } section.contactFormDetails { --column-widths: 1fr 1fr; } section.contactFormDetails div.columns.detailsFirst > div.column:first-child { order: 2; } section.contactFormMap { --column-widths: 1fr 1fr; } section.contactFormMap div.columns.mapFirst > div.column:first-child { order: 2; } section.contactFormText { --column-widths: 1fr 1fr; } section.contactFormText div.columns.textFirst > div.column:first-child { order: 2; } div.contactDetails { img.photo { display: block; width: 100%; height: auto; border-radius: 6px; margin-block-end: 0.8em; } p.identity, .address { margin: 0 0 0.6em; font-style: normal; span { display: block; } } span.company { font-weight: bold; } ul.channels { list-style: none; margin: 0; padding: 0; li { margin: 0; } li.channel.facebook, li.channel.instagram, li.channel.linkedin, li.channel.x, li.channel.tiktok, li.channel.youtube { display: inline-block; margin: 8px 4px 0; a { display: block; width: var(--channel-icon-size, 28px); height: var(--channel-icon-size, 28px); overflow: hidden; &::before { content: ''; display: block; width: 100%; height: 100%; background: currentColor; mask: center / contain no-repeat; } } } li.channel.facebook a::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); } li.channel.instagram a::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); } li.channel.linkedin a::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'/%3E%3C/svg%3E"); } li.channel.x a::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'/%3E%3C/svg%3E"); } li.channel.tiktok a::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); } li.channel.youtube a::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); } } } form.confirmStep div.htmlInForm { display: flex; align-items: flex-start; gap: 12px; margin-block-end: 1em; padding: 14px 18px; border: 1px solid var(--warning-border-color); border-radius: 6px; background: var(--warning-background); color: var(--color-text); &::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-block-start: 0.1em; background-color: var(--warning-border-color); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } } div.requestSummary { h3 { margin: 0 0 0.6em; } dl { margin: 0; } dt { margin-block-start: 0.6em; font-weight: bold; &:first-child { margin-block-start: 0; } } dd { margin: 0; } p.confirmation { display: flex; align-items: center; gap: 12px; margin-block: 1.5em 0; padding: 14px 18px; border-radius: 6px; background: var(--confirmation-background); color: var(--confirmation-color); font-weight: bold; &::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; background-color: var(--confirmation-color); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } } } div.columns { display: grid; grid-template-columns: var(--column-widths); gap: var(--column-gap); } section.twoColumn, section.threeColumn, section.fourColumn, section.fiveColumn { container-type: inline-size; } @container (width <= 512px) { section.twoColumn div.columns { grid-template-columns: 1fr; } } @container (width <= 784px) { section.threeColumn div.columns { grid-template-columns: 1fr; } } @container (width <= 1056px) { section.fourColumn div.columns { grid-template-columns: 1fr 1fr; } } @container (width <= 1328px) { section.fiveColumn div.columns { grid-template-columns: 1fr 1fr; } } @container (width <= 512px) { section.fourColumn div.columns, section.fiveColumn div.columns { grid-template-columns: 1fr; } } @media (width <= 700px) { section.fourColumn div.columns, section.fiveColumn div.columns, div.columns { grid-template-columns: 1fr; } } section.fullWidthImageSlider1 { div.imageSliderShell { position: relative; --slider-width: round(down, min(100vw, 80vh * var(--slider-ratio, 21 / 9)), 1px); width: var(--slider-width); margin-inline: calc((100% - var(--slider-width)) / 2); ol.imageSlider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 20px 0; padding: 0; aspect-ratio: var(--slider-ratio, 21 / 9); li { margin: 0; padding: 0; flex: 0 0 100%; scroll-snap-align: start; } img { width: 100%; height: 100%; object-fit: contain; object-position: center; } } } nav { position: absolute; inset-block-end: 14px; inset-inline: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 28px); padding: 7px 8px; text-align: center; font-size: 0; border-radius: 999px; background-color: var(--slidernav-background); a.item { display: inline-block; width: 10px; height: 10px; margin: 0 4px; vertical-align: middle; border-radius: 50%; background-color: var(--slidernav-color); opacity: 0.45; &.current { opacity: 1; } } } a.previous, a.next { position: absolute; inset-block-start: 50%; width: 35px; height: 35px; margin-block-start: -18px; font-size: 0; border-radius: 50%; background-color: var(--slidernav-background); overflow: hidden; &.disabled { display: none; } &::before { content: ''; position: absolute; inset: 6px; background-color: var(--slidernav-color); mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; } } a.previous { inset-inline-start: 5px; &::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); } } a.next { inset-inline-end: 5px; &::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); } } } section.imageGallery1 { ol.imageGallery { height: 50vw; width: 100vw; margin-inline: calc(50% - 50vw); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: dense; list-style: none; padding: 0; li { margin: 2px; padding: 0; } li:nth-child(1) { grid-area: 1 / 1 / 3 / 2; } li:nth-child(2) { grid-area: 1 / 2 / 2 / 4; } li:nth-child(3) { grid-area: 2 / 2 / 3 / 3; } li:nth-child(4) { grid-area: 2 / 3 / 3 / 4; } li:nth-child(5) { grid-area: 1 / 4 / 3 / 5; } li a { display: block; width: 100%; height: 100%; overflow: hidden; img { width: inherit; height: inherit; object-fit: cover; object-position: center; transition: all 0.7s ease-in-out; } &:hover img { transform: scale(1.2); } } } } section.photoRow { ol.photoRow { --photo-row-gap-current: calc(var(--photo-row-gap) * var(--photo-row-gap-factor, 1)); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--photo-row-gap-current); list-style: none; padding: 0; &.spacingSmall { --photo-row-gap-factor: .5; } &.spacingLarge { --photo-row-gap-factor: 2; } &.spacingXlarge { --photo-row-gap-factor: 4; } li { flex: 0 0 auto; height: var(--photo-row-height); margin: 0; padding: 0; } li a { display: block; height: 100%; } img { display: block; height: 100%; width: auto; } &.oneRow { flex-wrap: nowrap; justify-content: safe center; overflow: hidden; } &.filmstrip { flex-wrap: nowrap; justify-content: flex-start; width: max-content; overflow: visible; animation: photoRowFilmstrip calc(var(--photo-row-seconds-per-photo) * var(--photo-count, 1)) linear infinite; &:hover { animation-play-state: paused; } } } div.photoRowShell { overflow: hidden; } @media (prefers-reduced-motion: reduce) { ol.photoRow.filmstrip { animation: none; width: auto; overflow: hidden; justify-content: center; li[aria-hidden] { display: none; } } } } @keyframes photoRowFilmstrip { to { translate: calc(-50% - var(--photo-row-gap-current) / 2); } } section.contactMap, section.contactFormMap { div.map { display: none; } div.contactMap.mapActive div.map { display: block; container-type: size; } div.contactMap.mapActive ul.mapLocations { display: none; } p.mapConsent { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; small { color: var(--color-icon); } } div.contactMap.mapActive p.mapConsent { display: none; } div.map.mapMarker { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 320px; padding-block: 20px; background-color: #e8e8e8; border-block: 2px dashed #7a7a7a; color: #7a7a7a; svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); } p { margin: 0; } p.mapMarkerTitle { font-weight: bold; } ul.mapMarkerLocations { list-style: none; margin: 0.4em 0; padding: 0; text-align: center; li { margin: 0; } } } ul.mapLocations { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--column-gap); li { margin: 0; } } img.photo { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 6px; margin-block-end: 0.5em; } div.map img.photo { aspect-ratio: auto 2 / 1; } p.identity, .address { margin: 0 0 0.4em; font-style: normal; span { display: block; } } span.company { font-weight: bold; } ul.channels { list-style: none; margin: 0; padding: 0; li { margin: 0; } } div.leaflet-popup-content-wrapper { border-radius: 8px; } div.leaflet-popup-content { min-width: 240px; max-height: calc(100cqh - 80px); overflow-y: auto; } div.mapPin svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); } } section.contactMap { div.contactMap.mapActive div.map { width: 100vw; margin-inline: calc(50% - 50vw); height: clamp(320px, 65vh, 650px); } div.map.mapMarker { width: 100vw; margin-inline: calc(50% - 50vw); } } section.contactFormMap { div.contactMap { height: 100%; } div.contactMap.mapActive div.map { height: 100%; min-height: 320px; } div.map.mapMarker { height: 100%; } } section.testimonials { div.testimonialsShell { figure.testimonial { margin: 20px 0; padding: 0; blockquote { margin: 0; font-style: italic; } figcaption { margin-block-start: 10px; span.position::before, span.company::before { content: ' \2014 '; } } } &.looping figure.testimonial { display: none; } &.looping figure.testimonial.active { display: block; } } } section.faq { div.faqShell { details.faq { border-block-start: 1px solid var(--color-icon); &:last-child { border-block-end: 1px solid var(--color-icon); } summary { display: flex; align-items: center; gap: 1em; padding-block: 0.8em; cursor: pointer; list-style: none; &::-webkit-details-marker { display: none; } h3 { margin: 0; flex: 1; } &::after { content: ''; flex-shrink: 0; width: 1.2em; height: 1.2em; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); transition: transform 0.2s; } } &[open] summary::after { transform: rotate(180deg); } & > :not(summary) { margin-block: 0 1em; } & > summary + * { margin-block-start: 0.2em; } } } } section.privacyStatement { div.privacyFacts { table { width: 100%; border-collapse: collapse; margin-block: 1em; th, td { padding: 0.5em 0.8em 0.5em 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-icon); } thead th { font-weight: 700; } tbody th { font-weight: 400; white-space: nowrap; } } @media (max-width: 640px) { table thead { display: none; } table tr { display: block; padding-block: 0.5em; border-block-end: 1px solid var(--color-icon); } table th, table td { display: block; padding: 0.1em 0; border: 0; } } } } p.widgetEmptyNote { min-height: 120px; padding: 10px 20px; display: grid; place-content: center; text-align: center; background-color: #e8e8e8; border: 2px dashed #7a7a7a; color: #7a7a7a; } section :is(form, div.requestSummary, div.columns, div.contactMap, div.testimonialsShell, div.faqShell, div.privacyFacts, div.imageSliderShell, ol.imageGallery, ol.photoRow, div.photoRowShell, p.widgetEmptyNote) { margin-block: 0; } section * + :is(form, div.requestSummary, div.columns, div.contactMap, div.testimonialsShell, div.faqShell, div.imageSliderShell, ol.imageGallery, ol.photoRow, div.photoRowShell, p.widgetEmptyNote), section :is(form, div.requestSummary, div.columns, div.contactMap, div.testimonialsShell, div.faqShell, div.privacyFacts, div.imageSliderShell, ol.imageGallery, ol.photoRow, div.photoRowShell, p.widgetEmptyNote) + * { margin-block-start: var(--widget-air); } section.marginTopNone { margin-top: max(var(--spacing-margin-top) * var(--spacing-factor-none), (var(--spacing-factor-none) - 1) * var(--spacing-vertical)); } section.marginTopXsmall { margin-top: max(var(--spacing-margin-top) * var(--spacing-factor-xsmall), (var(--spacing-factor-xsmall) - 1) * var(--spacing-vertical)); } section.marginTopSmall { margin-top: max(var(--spacing-margin-top) * var(--spacing-factor-small), (var(--spacing-factor-small) - 1) * var(--spacing-vertical)); } section.marginTopNormal { margin-top: max(var(--spacing-margin-top) * var(--spacing-factor-normal), (var(--spacing-factor-normal) - 1) * var(--spacing-vertical)); } section.marginTopLarge { margin-top: max(var(--spacing-margin-top) * var(--spacing-factor-large), (var(--spacing-factor-large) - 1) * var(--spacing-vertical)); } section.marginTopXlarge { margin-top: max(var(--spacing-margin-top) * var(--spacing-factor-xlarge), (var(--spacing-factor-xlarge) - 1) * var(--spacing-vertical)); } section.marginBottomNone { margin-bottom: max(var(--spacing-margin-bottom) * var(--spacing-factor-none), (var(--spacing-factor-none) - 1) * var(--spacing-vertical)); } section.marginBottomXsmall { margin-bottom: max(var(--spacing-margin-bottom) * var(--spacing-factor-xsmall), (var(--spacing-factor-xsmall) - 1) * var(--spacing-vertical)); } section.marginBottomSmall { margin-bottom: max(var(--spacing-margin-bottom) * var(--spacing-factor-small), (var(--spacing-factor-small) - 1) * var(--spacing-vertical)); } section.marginBottomNormal { margin-bottom: max(var(--spacing-margin-bottom) * var(--spacing-factor-normal), (var(--spacing-factor-normal) - 1) * var(--spacing-vertical)); } section.marginBottomLarge { margin-bottom: max(var(--spacing-margin-bottom) * var(--spacing-factor-large), (var(--spacing-factor-large) - 1) * var(--spacing-vertical)); } section.marginBottomXlarge { margin-bottom: max(var(--spacing-margin-bottom) * var(--spacing-factor-xlarge), (var(--spacing-factor-xlarge) - 1) * var(--spacing-vertical)); } section.paddingTopNone { padding-top: max(var(--spacing-padding-top) * var(--spacing-factor-none), (var(--spacing-factor-none) - 1) * var(--spacing-vertical)); } section.paddingTopXsmall { padding-top: max(var(--spacing-padding-top) * var(--spacing-factor-xsmall), (var(--spacing-factor-xsmall) - 1) * var(--spacing-vertical)); } section.paddingTopSmall { padding-top: max(var(--spacing-padding-top) * var(--spacing-factor-small), (var(--spacing-factor-small) - 1) * var(--spacing-vertical)); } section.paddingTopNormal { padding-top: max(var(--spacing-padding-top) * var(--spacing-factor-normal), (var(--spacing-factor-normal) - 1) * var(--spacing-vertical)); } section.paddingTopLarge { padding-top: max(var(--spacing-padding-top) * var(--spacing-factor-large), (var(--spacing-factor-large) - 1) * var(--spacing-vertical)); } section.paddingTopXlarge { padding-top: max(var(--spacing-padding-top) * var(--spacing-factor-xlarge), (var(--spacing-factor-xlarge) - 1) * var(--spacing-vertical)); } section.paddingBottomNone { padding-bottom: max(var(--spacing-padding-bottom) * var(--spacing-factor-none), (var(--spacing-factor-none) - 1) * var(--spacing-vertical)); } section.paddingBottomXsmall { padding-bottom: max(var(--spacing-padding-bottom) * var(--spacing-factor-xsmall), (var(--spacing-factor-xsmall) - 1) * var(--spacing-vertical)); } section.paddingBottomSmall { padding-bottom: max(var(--spacing-padding-bottom) * var(--spacing-factor-small), (var(--spacing-factor-small) - 1) * var(--spacing-vertical)); } section.paddingBottomNormal { padding-bottom: max(var(--spacing-padding-bottom) * var(--spacing-factor-normal), (var(--spacing-factor-normal) - 1) * var(--spacing-vertical)); } section.paddingBottomLarge { padding-bottom: max(var(--spacing-padding-bottom) * var(--spacing-factor-large), (var(--spacing-factor-large) - 1) * var(--spacing-vertical)); } section.paddingBottomXlarge { padding-bottom: max(var(--spacing-padding-bottom) * var(--spacing-factor-xlarge), (var(--spacing-factor-xlarge) - 1) * var(--spacing-vertical)); } section.paddingLeftNone { padding-left: max(var(--spacing-padding-left) * var(--spacing-factor-none), (var(--spacing-factor-none) - 1) * var(--spacing-horizontal)); } section.paddingLeftXsmall { padding-left: max(var(--spacing-padding-left) * var(--spacing-factor-xsmall), (var(--spacing-factor-xsmall) - 1) * var(--spacing-horizontal)); } section.paddingLeftSmall { padding-left: max(var(--spacing-padding-left) * var(--spacing-factor-small), (var(--spacing-factor-small) - 1) * var(--spacing-horizontal)); } section.paddingLeftNormal { padding-left: max(var(--spacing-padding-left) * var(--spacing-factor-normal), (var(--spacing-factor-normal) - 1) * var(--spacing-horizontal)); } section.paddingLeftLarge { padding-left: max(var(--spacing-padding-left) * var(--spacing-factor-large), (var(--spacing-factor-large) - 1) * var(--spacing-horizontal)); } section.paddingLeftXlarge { padding-left: max(var(--spacing-padding-left) * var(--spacing-factor-xlarge), (var(--spacing-factor-xlarge) - 1) * var(--spacing-horizontal)); } section.paddingRightNone { padding-right: max(var(--spacing-padding-right) * var(--spacing-factor-none), (var(--spacing-factor-none) - 1) * var(--spacing-horizontal)); } section.paddingRightXsmall { padding-right: max(var(--spacing-padding-right) * var(--spacing-factor-xsmall), (var(--spacing-factor-xsmall) - 1) * var(--spacing-horizontal)); } section.paddingRightSmall { padding-right: max(var(--spacing-padding-right) * var(--spacing-factor-small), (var(--spacing-factor-small) - 1) * var(--spacing-horizontal)); } section.paddingRightNormal { padding-right: max(var(--spacing-padding-right) * var(--spacing-factor-normal), (var(--spacing-factor-normal) - 1) * var(--spacing-horizontal)); } section.paddingRightLarge { padding-right: max(var(--spacing-padding-right) * var(--spacing-factor-large), (var(--spacing-factor-large) - 1) * var(--spacing-horizontal)); } section.paddingRightXlarge { padding-right: max(var(--spacing-padding-right) * var(--spacing-factor-xlarge), (var(--spacing-factor-xlarge) - 1) * var(--spacing-horizontal)); } main h1 { font-size: 2em; font-weight: normal; margin: 20px 0; letter-spacing: 1px; } main h2 { font-size: 1.5em; font-weight: normal; margin: 10px 0; } main h3 { font-size: 1.2em; font-weight: bold; margin: 5px 0; } main h4 { font-size: 1em; font-weight: bold; margin: 3px 0; } main address { display: block; font-style: italic; margin: 0 0 12px 30px; } main blockquote { padding: 14px 20px; margin-bottom: 12px; border-inline-start: 4px solid #404040; border-radius: 6px; background: #ededed; box-sizing: border-box; } main code {} main p { display: block; margin-bottom: 12px; } main ul { list-style: disc outside; margin-bottom: 12px; } main ul li { margin-left: 40px; } main ul li ul { padding-inline-start: 9px; } main ol { list-style-type: decimal; list-style-position: outside; margin-bottom: 12px; } main ol li { margin-left: 40px; } main ol li ol { padding-inline-start: 9px; } main table { width: 100%; margin: 25px 0; } main th { font-weight: bold; } main tr > * { padding: 5px 10px; } main table caption { font-style: italic; } main hr { margin: 25px 0; } main a { text-decoration: underline; color: #404040; } main figure { margin: 12px 0; } main figure:is([style*="margin-left: auto"], [style*="margin-left:auto"]) { margin-inline: auto; } main :is(figure, img):is([style*="float: left"], [style*="float:left"]) { margin-right: 12px; } main :is(figure, img):is([style*="float: right"], [style*="float:right"]) { margin-left: 12px; } /* custom block styles */ main p.warning { background: #b00; color: #fff; padding: 5px; } main p.chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: #ededed; color: #404040; font-size: 0.85em; font-weight: bold; } main p.stat { display: flex; align-items: center; gap: 14px; font-size: 0.9em; line-height: 1.3; } main p.stat strong { font-size: 2.2em; line-height: 1; } main p.claim { font-size: 0.9em; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; text-align: center; } main p.kicker { font-size: 0.85em; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; } main p.badge { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: #404040; color: #fff; font-size: 0.8em; font-weight: bold; text-transform: uppercase; } main ul.tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; } main ul.tags li { margin: 0; padding: 8px 15px; border-radius: 999px; background: #ededed; color: #404040; font-size: 0.9em; font-weight: bold; } main ol.steps { list-style: none; counter-reset: step; } main ol.steps li { counter-increment: step; } main ol.steps li strong { display: block; } main p.tile { padding: 20px; border: 1px solid #cfcfcf; border-radius: 6px; font-size: 0.9em; line-height: 1.5; } main p.tile strong { display: block; margin-bottom: 6px; font-size: 1.15em; } main p.benefit { padding: 26px 24px; border: 1px solid #cfcfcf; border-top: 4px solid #404040; border-radius: 6px; line-height: 1.5; } main p.benefit strong { display: block; margin-bottom: 8px; font-size: 1.3em; } main p.task { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: 6px; background: #ededed; font-weight: bold; } main p.task::before { content: '\2713'; } /* custom inline styles */ main span.highlighted { background: #ff0; } main a.externalLink { color: #f00; } main a.documentLink { color: #00f; } main span.icon { display: block; margin-bottom: 10px; font-size: 1.8em; } main a.button { display: inline-block; margin-inline-end: 14px; padding: 12px 24px; border-radius: 6px; background: #404040; color: #fff; font-weight: bold; text-decoration: none; } main a.button:hover { background: #000; } main a.buttonOutline { display: inline-block; margin-inline-end: 14px; padding: 11px 22px; border-radius: 6px; border: 1.5px solid #cfcfcf; color: #404040; font-weight: bold; text-decoration: none; } main a.buttonOutline:hover { border-color: #404040; } /* end of the style dropdown */ main span.sizeXXS { font-size: 0.6em; } main span.sizeXS { font-size: 0.75em; } main span.sizeS { font-size: 0.9em; } main span.sizeL { font-size: 1.1em; } main span.sizeXL { font-size: 1.25em; } main span.sizeXXL { font-size: 1.4em; } main span.sizeXXXL { font-size: 1.6em; } :where(form div.formError) { position: relative; margin-block-end: var(--form-row-gap, 18px); padding: 10px 16px 10px 44px; background: var(--form-error-background, #fbeaec); border: 1px solid var(--form-error, #b00020); border-radius: var(--form-radius, 6px); color: var(--form-error, #b00020); } :where(form div.formError)::before { content: ''; position: absolute; inset-inline-start: 16px; inset-block-start: 12px; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } :where(form .entry) { margin-block-end: var(--form-row-gap, 18px); } :where(form .entry label, form .entry legend, form .entry span.pseudolabel) { display: block; margin-block-end: 6px; font-size: var(--form-label-size, 0.9em); font-weight: var(--form-label-weight, 600); color: var(--form-label-color, inherit); } :where(form .entry input:not([type=checkbox], [type=radio]), form .entry select, form .entry textarea) { width: 100%; padding: var(--form-field-padding, 10px 12px); background: var(--form-field-background, #fff); color: var(--form-field-text, inherit); border: 1px solid var(--form-border, #c6c6c6); border-radius: var(--form-radius, 6px); } :where(form .entry :is(input, select, textarea):focus-visible) { outline: 2px solid var(--form-accent, #4a4a4a); outline-offset: 2px; } :where(form .entry textarea) { min-height: var(--form-textarea-height, 7em); resize: vertical; } :where(form .entry.checkbox) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } :where(form .entry.checkbox span.pseudolabel) { flex: 0 0 100%; } :where(form .entry.checkbox input) { width: auto; margin: 0; } :where(form .entry.checkbox label) { display: inline; margin: 0; font-size: inherit; font-weight: normal; } :where(form .entry div.option) { display: flex; align-items: center; gap: 8px; } :where(form .entry div.option label) { display: inline; margin: 0; font-size: inherit; font-weight: normal; } :where(form .entry span.info) { display: block; margin-block-start: 4px; font-size: 0.85em; color: var(--form-muted, #777); } :where(form .entry span.errormessage) { display: block; margin-block-start: 4px; font-size: 0.85em; font-weight: 600; color: var(--form-error, #b00020); } :where(form .entry.error :is(input, select, textarea)) { border-color: var(--form-error, #b00020); } :where(form :is(input, textarea, select):disabled, form :is(input, textarea)[readonly]) { background: var(--form-disabled-background, #ededed); } :where(form div.button) { margin-block-start: var(--form-row-gap, 18px); } :where(form div.button button) { padding: var(--form-button-padding, 12px 24px); border: none; border-radius: var(--form-radius, 6px); background: var(--form-accent, #4a4a4a); font-weight: 700; cursor: pointer; } form div.button button { color: var(--form-accent-ink, #fff); } :where(form div.button button:hover) { background: var(--form-accent-hover, #303030); } :where(form div.button button.is-submitting)::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-inline-end: 0.5em; vertical-align: -0.15em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: aurealis-spin 0.8s linear infinite; } @keyframes aurealis-spin { to { transform: rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { :where(form div.button button.is-submitting)::before { animation-duration: 3s; } } form .entry.valid, form .entry div.option.valid { input:not([type='checkbox']):not([type='radio']), select, textarea { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2345ba45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px 18px; padding-inline-end: 36px; } textarea { background-position: right 10px top 10px; } select { background-position: right 32px center; } } dialog#pppAurealisViewer { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--viewer-text-color); &::backdrop { background: var(--modal-overlay-background, rgba(0, 0, 0, 0.7)); } > img { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; border: 2px solid #fff; } div { position: absolute; inset-block-end: 55px; inset-inline-start: 0; width: 100%; height: 100px; padding: 20px; text-align: center; font-size: 1.2em; span.pointer { display: block; font-size: 0.7em; padding-block-start: 10px; } } nav { position: absolute; inset-block-end: 20px; inset-inline-start: 0; width: 100%; height: 20px; text-align: center; button { width: 12px; height: 12px; margin: 0 5px; padding: 0; border: 0; cursor: pointer; vertical-align: middle; border-radius: 50%; background-color: var(--viewer-icon-color); opacity: 0.45; &.current { opacity: 1; } } } button.previous, button.next, button.btnCloseModal { position: absolute; width: 35px; height: 35px; padding: 0; border: 0; cursor: pointer; font-size: 0; background-color: var(--viewer-icon-color); mask-repeat: no-repeat; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; overflow: hidden; } button.previous { inset-block-start: 50%; inset-inline-start: 5px; margin-block-start: -18px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); &.disabled { display: none; } } button.next { inset-block-start: 50%; inset-inline-end: 5px; margin-block-start: -18px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); &.disabled { display: none; } } button.btnCloseModal { inset-block-start: 20px; inset-inline-end: 20px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } } dialog#flashMessage[open] { display: flex; align-items: center; gap: 10px; position: fixed; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); z-index: 10; width: fit-content; max-width: min(600px, 90vw); margin: 0; padding: 10px 16px; font-weight: bold; color: var(--color-text); &::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } span { display: block; } form { display: contents; } button.btnCloseModal { width: 20px; height: 20px; flex-shrink: 0; margin-inline-start: auto; padding: 0; border: 0; cursor: pointer; font-size: 0; overflow: hidden; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } &.flashConfirmation { border: 1px solid var(--notice-border-color); background: var(--notice-background); &::before { background-color: var(--notice-icon-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } } &.flashWarning { border: 1px solid var(--warning-border-color); background: var(--warning-background); &::before { background-color: var(--warning-border-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } } &.flashError { border: 1px solid var(--error-border-color); background: var(--error-background); &::before { background-color: var(--color-error); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); } } } dialog#cookieConsent[open] { display: block; position: fixed; inset-block-end: 20px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 11; width: min(720px, calc(100% - 40px)); margin: 0; padding: 20px 24px; border: 1px solid var(--consent-border-color); border-radius: var(--form-radius, 6px); background: var(--consent-background); color: var(--consent-color); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4); h2 { margin: 0 0 8px; font-size: 1.1em; } p { margin: 0 0 14px; } a { color: inherit; } details { margin-block-end: 14px; summary { cursor: pointer; text-decoration: underline; } fieldset { margin: 10px 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; label { display: flex; align-items: baseline; gap: 8px; } } } button { padding: var(--form-button-padding, 12px 24px); border: 1px solid var(--consent-border-color); border-radius: var(--form-radius, 6px); background: var(--consent-button-background); color: var(--consent-button-color); font: inherit; font-weight: 700; cursor: pointer; } button.btnAll, button.btnNone { margin-inline-end: 8px; } } footer button.btnCookieSettings { padding: 0; border: 0; background: none; color: var(--link-color); font: inherit; text-decoration: underline; cursor: pointer; } main p.chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; background: #eaf5fc; color: #14598c; font-size: 13px; font-weight: 700; letter-spacing: .02em; } main p.chip::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: #84bd00; } main a.button { display: inline-block; margin-inline-end: 14px; padding: 14px 26px; border-radius: 12px; background: #84bd00; color: #14400e; font-size: 16px; font-weight: 700; text-decoration: none; } main a.button:hover { background: #76a900; } main a.buttonOutline { display: inline-block; margin-inline-end: 14px; padding: 13px 24px; border-radius: 12px; border: 1.5px solid #d3e6f3; color: #14598c; font-size: 16px; font-weight: 700; text-decoration: none; } main a.buttonOutline:hover { border-color: #84bd00; } main p.stat { font-size: 14px; font-weight: 500; color: #46617a; } main p.stat strong { font-size: 34px; font-weight: 800; color: #14598c; } main p.kicker { font-size: 14px; color: #00a9e0; } main p.badge { background: #00a9e0; font-size: 13px; letter-spacing: .03em; } main ul.tags li { background: #eaf5fc; color: #14598c; font-size: 14px; font-weight: 600; } main p.tile { padding: 26px 24px; border: 1px solid #d3e6f3; border-radius: 18px; background: #f4f8fb; font-size: 14px; line-height: 1.55; color: #46617a; } main p.tile strong { display: block; margin-bottom: 7px; font-size: 17px; color: #10344f; } main span.icon { display: block; margin-bottom: 12px; font-size: 26px; } main p.benefit { padding: 34px 30px; border: 1px solid #e6eef4; border-top: 4px solid #00a9e0; border-radius: 20px; background: #fff; font-size: 15.5px; line-height: 1.6; color: #46617a; } main p.benefit strong { display: block; margin-bottom: 10px; font-size: 22px; color: #10344f; } main p.benefit span.icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 15px; background: #eaf5fc; color: #00a9e0; font-size: 25px; } main p.task { padding: 16px 18px; border-radius: 14px; background: #eaf5fc; font-size: 15px; font-weight: 600; color: #10344f; } main p.task::before { color: #84bd00; font-size: 17px; } /* custom block styles */ main ul.labels { display: flex; flex-wrap: wrap; gap: 26px; list-style: none; } main ul.labels li { display: flex; align-items: center; margin: 0; padding: 7px 15px; border-radius: 6px; background: #dceaf6; color: #4a6b85; font-weight: 700; font-size: 14px; } main ul.checklist { list-style: '\2713' outside; } main ul.checklist > li { padding-inline-start: 9px; padding-block-end: 9px; } main ul.checklist > li::marker { color: #84bd00; font-weight: 700; } /* custom inline styles */ main a.buttonBlue { display: inline-block; margin-inline-end: 14px; padding: 14px 26px; border-radius: 12px; background: #14598c; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; } main a.buttonBlue:hover { background: #0f4670; } main a.phone { display: inline-flex; align-items: center; gap: 13px; padding: 12px 22px 12px 12px; border: 1px solid #d3e6f3; border-radius: 16px; background: #fff; color: #14598c; font-size: 23px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 30px -18px rgb(16 48 73 / .4); } main a.phone::before { content: '☎'; width: 48px; height: 48px; border-radius: 999px; background: #00a9e0; color: #fff; font-size: 21px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; } main img.captionOnPhoto { display: block; border-radius: 26px; } main figure:has(> img.captionOnPhoto) { position: relative; } main figure:has(> img.captionOnPhoto):not([style*="width"]) { width: fit-content; } main figure:has(> img.captionOnPhoto)[style*="margin-left: auto"] { margin-inline: auto; } main figure:has(> img.captionOnPhoto) figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); box-sizing: border-box; margin: 0; padding: 10px 15px; border-radius: 12px; background: #fff; color: #16232e; font-size: 15px; font-weight: 700; line-height: 1.2; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .4); } /* end of the style dropdown */ @font-face { font-family: "DM Sans"; src: url('/fonts/DMSans-Variable-latin.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; src: url('/fonts/DMSans-Variable-latin-ext.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Sans"; src: url('/fonts/DMSans-Variable-Italic-latin.woff2') format('woff2'); font-weight: 100 1000; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; src: url('/fonts/DMSans-Variable-Italic-latin-ext.woff2') format('woff2'); font-weight: 100 1000; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; src: url('/fonts/Jost-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; src: url('/fonts/Jost-Variable-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; src: url('/fonts/Jost-Variable-Italic-latin.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; src: url('/fonts/Jost-Variable-Italic-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html, body, table, input, select, textarea, button { font-family: "DM Sans", sans-serif; } :root { --brand-navy: #0f4670; --brand-navy-deep: #10293d; --brand-heading-blue: #14598c; --brand-sky: #00a9e0; --brand-link: #0a8fd0; --brand-green: #84bd00; --brand-green-hover: #76a900; --brand-green-ink: #14400e; --text-ink: #16232e; --text-nav: #2b485c; --text-soft: #75787b; --text-muted: #46617a; --text-muted-on-dark: #7690a3; --content-gutter: max(28px, calc((100% - 1144px) / 2)); --header-background: #fff; --footer-background: #fff; --form-row-gap: 14px; --form-label-size: 14px; --form-label-weight: 700; --form-label-color: var(--text-nav); --form-field-padding: 13px 16px; --form-border: #d3e6f3; --form-radius: 10px; --form-muted: var(--text-soft); --form-accent: var(--brand-sky); --form-accent-ink: #fff; --form-accent-hover: var(--brand-link); --form-button-padding: 15px 24px; } header { height: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px var(--content-gutter) 0; overflow-x: clip; isolation: isolate; position: relative; z-index: 30; @media (width > 1440px) { padding-inline: max(5%, calc((100% - 1650px) / 2)); } @media (width <= 1200px) { display: grid; grid-template-columns: auto 1fr; grid-template-rows: min-content 1fr; grid-template-areas: 'logo actions' 'logo mainNav'; gap: 0 28px; } @media (width <= 950px) { grid-template-areas: 'actions actions' 'logo mainNav'; } @media (width <= 800px) { grid-template-columns: auto 1fr auto; grid-template-rows: auto; grid-template-areas: 'logo actions mainNav'; column-gap: 16px; } a#logo { margin: 0; height: auto; position: relative; --logo-scale: 1; --logo-lift: 0px; top: calc(-1 * var(--logo-lift)); img { display: block; height: calc(127px * var(--logo-scale)); width: calc(378px * var(--logo-scale)); } @media (width <= 950px) { --logo-scale: .6; --logo-lift: 21px; } @media (width <= 800px) { --logo-lift: 0px; } &::before { content: ''; position: absolute; z-index: -1; inset-inline: -100vw; --line-scale: min(var(--logo-scale), .75); --line-height: round(down, calc(11px * var(--line-scale)), 1px); --line-blue: round(calc(5px * var(--line-scale)), 1px); top: calc(round(calc(95.5px * var(--logo-scale) - var(--line-height) / 2), 1px) + var(--logo-lift)); height: var(--line-height); background: linear-gradient(to bottom, var(--brand-sky) 0 var(--line-blue), #fff var(--line-blue) calc(var(--line-blue) + 1px), var(--brand-green) calc(var(--line-blue) + 1px) 100%); } } nav#mainNav { flex: 1; justify-content: center; > ol { width: min(100%, 550px); justify-content: space-between; gap: clamp(10px, 1.4vw, 22px); } a { color: var(--text-nav); font-size: 15px; font-weight: 600; text-decoration: none; } a:hover { color: var(--brand-link); } a.active { color: var(--brand-heading-blue); } @media (width <= 1200px) { justify-content: end; align-self: start; padding-block-start: 12px; } > ol > li { position: relative; } > ol > li:has(> ol) { > a { display: inline-flex; align-items: center; gap: 7px; &::after { content: '\25BE'; font-size: 10px; color: #7fa8c4; transition: transform .18s ease; } } &:hover > a { color: var(--brand-link); &::after { transform: rotate(180deg); } } } > ol > li > ol { position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; min-width: 260px; flex-direction: column; gap: 0; background: #fff; border: 1px solid #e6eef4; border-radius: 16px; padding: 12px; box-shadow: 0 28px 60px -24px rgba(16,48,73,.35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; &::before { content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 10px; } a { display: block; padding: 10px 12px; border-radius: 10px; white-space: nowrap; } a:hover { background: #eaf5fc; color: var(--brand-heading-blue); } ol { flex-direction: column; gap: 0; margin: 0 0 6px 12px; padding-inline-start: 10px; border-inline-start: 2px solid #d3e6f3; a { padding: 7px 10px; font-size: 14px; font-weight: 500; } } } > ol > li:hover > ol, > ol > li:focus-within > ol, > ol > li.open > ol { opacity: 1; visibility: visible; transform: translateY(0); } li.parentItem { display: none; font-style: italic; } > ol > li.open > ol > li.parentItem { display: block; } @media (width <= 1200px) { > ol > li > ol { inset-inline: auto 0; } } @media (width <= 800px) { align-self: start; margin-block-start: 7px; padding-block-start: 0; position: relative; button.btnCollapsedNavigation { display: block; position: relative; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid #d3e6f3; border-radius: 10px; cursor: pointer; font-size: 0; &::before { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 14px; background: linear-gradient(to bottom, var(--text-nav) 0 2px, transparent 2px 6px, var(--text-nav) 6px 8px, transparent 8px 12px, var(--text-nav) 12px 14px); } } > ol { display: none; position: absolute; top: calc(100% + 10px); inset-inline: auto 0; z-index: 50; flex-direction: column; gap: 0; width: max-content; min-width: 260px; max-width: min(360px, 86vw); background: #fff; border: 1px solid #e6eef4; border-radius: 16px; padding: 14px 18px; box-shadow: 0 28px 60px -24px rgba(16,48,73,.35); a { display: block; padding: 11px 0; font-size: 16px; white-space: normal; } > li { position: static; } > li:has(> ol) > a::after { content: none; } > li > ol { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 4px 20px; border: none; box-shadow: none; &::before { content: none; } a { padding: 8px 0; } a:hover { background: none; } ol { margin: 0 0 4px; padding-inline-start: 14px; a { padding: 6px 0; } } } } &.open > ol { display: flex; } } } div.actions { align-self: flex-start; display: grid; grid-template-columns: auto auto; gap: 12px 20px; justify-content: end; justify-items: end; align-items: center; grid-template-areas: 'availability availability' 'apply request'; p.availability { grid-area: availability; display: flex; align-items: center; gap: 14px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text-soft); a { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-heading-blue); font-weight: 700; text-decoration: none; &::before { content: '☎'; width: 26px; height: 26px; border-radius: 999px; background: var(--brand-sky); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } } } a.apply { grid-area: apply; } a.request { grid-area: request; } @media (width <= 1440px) { position: relative; grid-template-columns: auto; grid-template-areas: 'request' 'apply'; row-gap: 8px; p.availability { grid-area: auto; position: absolute; inset-block-start: 4px; inset-inline-end: calc(100% + 20px); white-space: nowrap; } a.apply, a.request { justify-self: stretch; padding: 9px 20px; text-align: center; } } @media (width <= 1200px) { grid-area: actions; grid-template-columns: auto auto auto; grid-template-areas: 'availability apply request'; column-gap: 20px; p.availability { grid-area: availability; position: static; } } @media (950px < width <= 1010px) { p.availability span.hours { display: none; } } @media (width <= 800px) { grid-template-columns: auto; grid-template-areas: 'availability'; justify-content: center; margin-block-start: 14px; a.apply, a.request, p.availability span.hours { display: none; } } @media (width <= 480px) { display: none; } } } main { margin-top: 10px; } main.errorPage { position: relative; isolation: isolate; overflow: hidden; margin-top: 0; padding: 84px var(--content-gutter) 92px; color: var(--text-on-navy); h1 { margin: 0 0 24px; font-size: clamp(32px, 5vw, 45px); color: #fff; } p, li { color: inherit; } p { margin: 0 0 18px; font-size: 19px; } p.chip { margin: 0 0 26px; font-size: 13px; background: rgb(255 255 255 / .12); color: var(--chip-on-navy); } a { color: #fff; text-decoration: underline; text-underline-offset: .15em; text-decoration-color: rgb(255 255 255 / .45); } a:hover { text-decoration-color: var(--brand-green); } div#extended { margin-top: 44px; color: var(--text-soft-on-navy); h2 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--text-on-navy); } ul { margin: 0; padding-left: 1.2em; } li { font-size: 15px; } } @media (width <= 900px) { padding-top: 64px; padding-bottom: 72px; p { font-size: 17px; } } } form .entry :is(input:not([type=checkbox], [type=radio]), select, textarea) { padding: var(--form-field-padding); font-size: 16px; line-height: 1.4; } form { display: grid; row-gap: var(--form-row-gap); > div.hide { display: none; } .entry span.errormessage { height: 0; margin-block-start: 4px; font-size: 12px; font-weight: normal; line-height: 1.15; } } form div.button button { font-family: inherit; font-size: 16px; } form .entry span.info { font-style: italic; } form .entry.checkbox { row-gap: 2px; } .actions { a.apply, a.request { padding: 12px 26px; border-radius: 11px; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; } a.request { background: var(--brand-green); color: var(--brand-green-ink); } a.request:hover { background: var(--brand-green-hover); } a.apply { background: var(--brand-heading-blue); color: #fff; } a.apply:hover { background: var(--brand-navy); } } footer { display: block; height: auto; color: var(--text-muted); font-size: 14.5px; > img { display: block; width: 100%; height: auto; } div.siteInfo { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 48px; padding: 16px var(--content-gutter) 44px; h2 { font-size: 14px; font-weight: 700; color: var(--brand-heading-blue); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; } a { color: var(--brand-link); text-decoration: none; } p.tagline { line-height: 1.65; max-width: 26em; } address { font-style: normal; line-height: 1.9; span, a { display: block; } } div.actions { align-self: end; display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; } } p.baseline { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; padding: 20px var(--content-gutter); background: var(--brand-navy-deep); color: var(--text-muted-on-dark); font-size: 13px; a { color: inherit; } button.btnCookieSettings { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; } } @media (width <= 725px) { div.siteInfo { grid-template-columns: 1.4fr 1fr; gap: 36px 32px; div.actions { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: center; } } p.baseline { justify-content: flex-start; } } } a#backtotop { background: var(--brand-green); } :root { --spacing-horizontal: var(--content-gutter); --column-gap: 2em; --slidernav-color: #fff; --slidernav-background: rgba(0, 0, 0, 0.5); --text-on-navy: #c5dcec; --chip-on-navy: #d5ecfa; --text-soft-on-navy: #a9c6db; --text-heading: #10344f; --text-body: #46617a; --panel-sky: #eaf5fc; --band-green: #3a7210; --panel-grey: #dcdfe3; --form-row-gap: 18px; } main { h1, h2, h3, h4, h5, h6 { font-family: "Jost", sans-serif; font-weight: 400; color: var(--ink-heading); letter-spacing: -.01em; text-wrap: balance; strong, b { font-weight: 700; } } h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.02; } h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.06; } h3 { font-size: 30px; line-height: 1.12; } h4 { font-size: 23px; line-height: 1.2; } h5 { font-size: 19px; line-height: 1.3; font-weight: 500; } h6 { font-size: 16px; line-height: 1.4; font-weight: 500; } p, li, address { font-size: 17px; line-height: 1.62; color: var(--ink-body); } address { font-style: normal; margin: 0 0 12px; } a { color: var(--ink-link); } @media (width <= 900px) { h1 { font-size: clamp(32px, 4.4vw, 40px); } h2 { font-size: clamp(27px, 3.7vw, 33px); } h3 { font-size: 26px; } h4 { font-size: 20px; } p, li, address { font-size: 16px; } } } :root, section.inverted :is(p.benefit, p.tile, p.task, details.faq), section.inverted.steps.variantCards ol.steps li, section.inverted.testimonials blockquote, section.inverted.contactFormText div.columns, section.inverted:is(.requestHelpForm, .jobApplicationForm) :is(form > fieldset, div.column:not(:has(form))) { --ink-heading: var(--text-heading); --ink-body: var(--text-body); --ink-link: var(--brand-link); } section.inverted.contactFormText div.columns, section.inverted:is(.requestHelpForm, .jobApplicationForm) form > fieldset { --form-label-color: var(--text-nav); --form-muted: var(--text-soft); } section.inverted:not(.hero, .whyUs) { --ink-heading: #fff; --ink-body: rgb(255 255 255 / .84); --ink-link: #fff; --form-label-color: var(--ink-heading); --form-muted: var(--ink-body); table { color: var(--ink-body); } p.kicker { color: var(--ink-body); } p.stat { color: var(--ink-body); strong { color: var(--ink-heading); } } a.buttonOutline { border-color: color-mix(in srgb, var(--ink-heading) 35%, transparent); color: var(--ink-heading); } a.buttonOutline:hover { border-color: var(--brand-green); } } section.presetNavyGlow, section.presetGreenGlow, section.presetSkyGlow, section.presetGreyGlow, main.errorPage { &::before, &::after { content: ''; position: absolute; z-index: -1; border-radius: 999px; } &::before { top: -120px; right: -120px; width: 460px; height: 460px; background: radial-gradient(circle, color-mix(in srgb, var(--glow-top), transparent), transparent 70%); } &::after { bottom: -80px; left: 40%; width: 320px; height: 320px; background: radial-gradient(circle, color-mix(in srgb, var(--glow-bottom), transparent), transparent 70%); } } section.presetNavyGlow, main.errorPage { background: var(--brand-navy); --glow-top: var(--brand-sky) 55%; --glow-bottom: var(--brand-green) 35%; } section.presetGreenGlow { background: var(--band-green); --glow-top: var(--brand-green) 55%; --glow-bottom: var(--brand-sky) 35%; } section.presetSkyGlow { background: var(--panel-sky); --glow-top: var(--brand-sky) 28%; --glow-bottom: var(--brand-green) 18%; } section.presetGreyGlow { background: var(--panel-grey); --glow-top: #fff 100%; --glow-bottom: #fff 100%; } section.presetSkyFade { background: linear-gradient(180deg, #fff, var(--panel-sky)); } section.hero { color: #fff; --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 84px; --spacing-padding-bottom: 92px; --column-widths: 1.02fr .98fr; --column-gap: 60px; div.text { p.chip { margin: 0 0 26px; font-size: 13px; background: rgb(255 255 255 / .12); color: var(--chip-on-navy); } h1 { margin: 0 0 24px; color: #fff; } p { margin: 0 0 34px; font-size: 19px; color: var(--text-on-navy); max-width: 30em; } a.button { padding: 16px 30px; font-size: 16.5px; } a.buttonOutline { padding: 15px 24px; font-size: 16.5px; border-color: rgb(255 255 255 / .35); color: #fff; } a.buttonOutline:hover { border-color: var(--brand-green); } p:last-child { margin-bottom: 0; } } &.inverted { color: var(--text-heading); div.text { p.chip { background: var(--panel-sky); color: var(--brand-heading-blue); } h1 { color: var(--text-heading); } p { color: var(--text-body); } a.buttonOutline { border-color: rgb(16 52 79 / .3); color: var(--text-heading); } } } div.visual { img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; box-shadow: 0 40px 80px -34px rgb(0 0 0 / .55); } p.card { left: -26px; bottom: 40px; padding: 15px 18px; border-radius: 16px; color: var(--text-ink); box-shadow: 0 18px 40px -18px rgb(0 0 0 / .4); line-height: 1.2; strong { font-size: 16px; } span { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-soft); } } } @media (width <= 900px) { div.text p { font-size: 17px; } } @media (width <= 650px) { --spacing-padding-top: 64px; --spacing-padding-bottom: 72px; } } section.trustStrip { --column-gap: 24px; --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 30px; --spacing-padding-bottom: 30px; @media (width <= 1000px) { grid-template-columns: 1fr 1fr; } } section.services, section.steps, section.whyUs, section.benefits, section.taskList { p.kicker { margin: 0 0 14px; } h2 { margin: 0 0 56px; } } section.services { --column-widths: .95fr 1.05fr; --column-gap: clamp(32px, 4vw, 52px); --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 96px; --spacing-padding-bottom: 40px; div.zone { div.visual { img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; } figcaption { padding: 5px 9px; border-radius: 6px; background: rgb(255 255 255 / .82); font-size: 12px; color: var(--text-body); } } div.text { h3 { margin: 0 0 14px; } p { margin: 0 0 22px; max-width: 32em; } ul.tags { margin: 0 0 26px; } } } div.zone:nth-child(even of div.zone) { --column-widths: 1.05fr .95fr; div.visual p.badge { left: auto; right: 18px; background: var(--brand-green); color: var(--brand-green-ink); } ul.tags li { background: #eef7dd; color: #5b8a1f; } } @media (width <= 900px) { --spacing-padding-top: 72px; --spacing-padding-bottom: 32px; } } section.steps { text-align: center; --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 96px; --spacing-padding-bottom: 96px; @media (width <= 900px) { --spacing-padding-top: 72px; --spacing-padding-bottom: 72px; } } section.steps.variantTimeline { ol.steps { --step-size: 56px; --column-gap: 30px; position: relative; &::before { content: ''; position: absolute; top: calc(var(--step-size) / 2 - 1px); left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, var(--brand-sky), var(--brand-green)); } li { max-width: 20em; font-size: 15.5px; &::before { position: relative; margin-bottom: 22px; background: var(--brand-sky); font-size: 22px; font-weight: 800; box-shadow: 0 0 0 6px #fff; } strong { margin-bottom: 10px; font-size: 21px; font-weight: 700; color: var(--ink-heading); } } li:nth-child(3n + 2)::before { background: var(--brand-heading-blue); } li:nth-child(3n)::before { background: var(--brand-green); } } @media (width <= 900px) { ol.steps { grid-auto-flow: row; grid-auto-columns: auto; &::before { content: none; } } } } section.steps.variantCards { container-type: inline-size; p.kicker, h2 { max-width: 32em; margin-inline: auto; } ol.steps { --step-size: 46px; --column-gap: 20px; li { justify-self: stretch; padding: 30px 26px; border-radius: 18px; background: #fff; text-align: left; font-size: 14.5px; line-height: 1.55; &::before { margin: 0 0 18px; border-radius: 12px; background: var(--brand-sky); font-size: 19px; font-weight: 800; } strong { margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--text-heading); } } li:nth-child(even)::before { background: var(--brand-heading-blue); } li:last-child::before { background: var(--brand-green); } } @container (width <= 700px) { ol.steps { grid-auto-flow: row; grid-auto-columns: auto; } } @container (width <= 940px) { ol.steps:has(li:nth-child(4)) { grid-auto-flow: row; grid-auto-columns: auto; } } @container (width <= 1180px) { ol.steps:has(li:nth-child(5)) { grid-auto-flow: row; grid-auto-columns: auto; } } } section.whyUs { color: #fff; --column-gap: 64px; --tile-columns: 2; --tile-gap: 16px; --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 92px; --spacing-padding-bottom: 92px; div.text { p.kicker { color: var(--brand-green); } h2 { margin-bottom: 20px; color: #fff; } p { color: var(--text-on-navy); max-width: 30em; } } div.tiles p.tile { background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: var(--text-soft-on-navy); strong { color: #fff; } } &.inverted { color: var(--text-heading); div.text { p.kicker { color: var(--brand-link); } h2 { color: var(--text-heading); } p { color: var(--text-body); } } div.tiles p.tile { background: #f4f8fb; border-color: #d3e6f3; color: var(--text-body); strong { color: var(--text-heading); } } } @media (width <= 1000px) { grid-template-columns: 1fr; --column-gap: 44px; } @media (width <= 900px) { --spacing-padding-top: 72px; --spacing-padding-bottom: 72px; } } section.benefits { --benefit-columns: 3; --benefit-gap: 24px; --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 96px; --spacing-padding-bottom: 44px; > :not(.benefit) { max-width: 34em; justify-self: center; text-align: center; } h2 { margin-bottom: 14px; } > p:not(.kicker, .benefit) { margin-block: 0 28px; } p.benefit { --accent: var(--brand-sky); --accent-tint: #eaf5fc; --accent-ink: var(--accent); border-top-color: var(--accent); span.icon { background: var(--accent-tint); color: var(--accent-ink); } } p.benefit:nth-child(3n + 2 of p.benefit) { --accent: var(--brand-heading-blue); --accent-tint: #e8eff6; } p.benefit:nth-child(3n of p.benefit) { --accent: var(--brand-green); --accent-tint: #eef7dd; --accent-ink: #6ea52a; } @media (width <= 900px) { --benefit-columns: 2; --spacing-padding-top: 72px; --spacing-padding-bottom: 36px; p.benefit:nth-child(odd of p.benefit):nth-last-child(1 of p.benefit) { grid-column: 1 / -1; } } @media (width <= 620px) { --benefit-columns: 1; } } section.taskList { border-radius: 28px; margin-inline: var(--content-gutter); --column-gap: 44px; --task-gap: 14px; --spacing-margin-top: 44px; --spacing-margin-bottom: 92px; --spacing-padding-top: 52px; --spacing-padding-bottom: 52px; --spacing-padding-left: 48px; --spacing-padding-right: 48px; div.text { h2 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 34px); } } div.tasks p.task { background: #fff; } @media (width <= 900px) { grid-template-columns: 1fr; --column-gap: 32px; --spacing-margin-top: 36px; --spacing-margin-bottom: 72px; --spacing-padding-top: 40px; --spacing-padding-bottom: 40px; --spacing-padding-left: 32px; --spacing-padding-right: 32px; } } section.testimonials { text-align: center; div.testimonialsShell { max-width: 52em; margin-inline: auto; figure.testimonial { margin: 0; &::before { content: '\201C'; display: block; margin-bottom: 8px; font-size: 40px; font-weight: 800; line-height: 1; color: var(--brand-green); } blockquote { margin: 0 0 14px; padding: 26px 36px; border-inline-start: none; border-radius: 18px; background: var(--panel-sky); font-style: normal; font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; line-height: 1.45; letter-spacing: -.015em; color: var(--text-heading); text-wrap: balance; p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } } figcaption { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink-body); span.position::before, span.company::before { content: ' \00B7 '; } } } } } section.testimonials { --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 96px; --spacing-padding-bottom: 96px; @media (width <= 900px) { --spacing-padding-top: 72px; --spacing-padding-bottom: 72px; } } section.faq { > :not(div.faqShell, video.sectionBackground) { max-width: 34em; margin-inline: auto; text-align: center; } h2 { margin: 0 0 14px; } div.faqShell { max-width: 50em; margin-inline: auto; display: grid; gap: 12px; text-align: start; details.faq { border: 1px solid #e6eef4; border-radius: 18px; background: #fff; padding-inline: 28px; transition: box-shadow .2s ease; &:last-child { border-block-end: 1px solid #e6eef4; } summary { gap: 20px; padding-block: 20px; h3 { font-size: 21px; line-height: 1.3; font-weight: 500; color: var(--ink-heading); transition: color .15s ease; } &::after { width: 22px; height: 22px; background-color: var(--brand-sky); } } summary:hover h3 { color: var(--brand-link); } &[open] { box-shadow: 0 18px 40px -28px rgb(16 48 73 / .35); summary h3 { color: var(--brand-heading-blue); } } & > summary + * { margin-block-start: 0; } & > :last-child { margin-block-end: 24px; } summary:focus-visible { outline: none; } &:has(summary:focus-visible) { outline: 2px solid var(--brand-sky); outline-offset: 2px; } } } @media (width <= 900px) { div.faqShell details.faq { padding-inline: 20px; border-radius: 14px; summary { gap: 14px; padding-block: 16px; h3 { font-size: 18px; } &::after { width: 20px; height: 20px; } } & > :last-child { margin-block-end: 18px; } } } } section.faq { --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 96px; --spacing-padding-bottom: 96px; @media (width <= 900px) { --spacing-padding-top: 72px; --spacing-padding-bottom: 72px; } } section.contactForm { border-radius: 28px; margin-inline: var(--content-gutter); --spacing-margin-top: 44px; --spacing-margin-bottom: 44px; --spacing-padding-top: 52px; --spacing-padding-bottom: 52px; --spacing-padding-left: 48px; --spacing-padding-right: 48px; form { width: 60%; margin-inline: auto; } @media (width <= 800px) { form { width: 80%; } } @media (width <= 650px) { form { width: 100%; } } @media (width <= 900px) { --spacing-margin-top: 36px; --spacing-margin-bottom: 36px; --spacing-padding-top: 40px; --spacing-padding-bottom: 40px; --spacing-padding-left: 32px; --spacing-padding-right: 32px; } } div.contactDetails { text-align: center; img.photo { width: auto; max-width: min(500px, 100%); max-height: 250px; margin-inline: auto; margin-block-end: 1.6em; } span.company { font-size: 1.4em; } ul.channels { margin-block: 20px; a { color: inherit; text-decoration: none; } a:hover { color: var(--brand-sky); text-decoration: underline; } span.label { margin-inline-end: 0.35em; } li { margin-block-end: 5px; } li.channel.facebook, li.channel.instagram, li.channel.linkedin, li.channel.x, li.channel.tiktok, li.channel.youtube { margin: 10px 11px 0; } } } section.contactFormText { div.columns { background: var(--panel-sky); border-radius: 28px; align-items: center; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 52px); gap: clamp(32px, 4vw, 52px); } div.column:has(form) { background: #fff; border-radius: 20px; padding: 36px 34px; box-shadow: 0 24px 50px -28px rgb(16 48 73 / .4); div.button button { width: 100%; } } div.column:not(:has(form)) { p.chip { background: #fff; color: #5b8a1f; } h2 { margin: 0 0 16px; font-size: clamp(30px, 3.5vw, 40px); line-height: 1.04; } p { max-width: 30em; } } @media (width <= 900px) { --column-widths: 1fr; } } section.contactFormText { --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 20px; --spacing-padding-bottom: 96px; @media (width <= 900px) { --spacing-padding-bottom: 72px; } } section:is(.requestHelpForm, .jobApplicationForm) { --column-widths: 1fr 330px; div.columns { gap: 36px; align-items: start; } div.column:has(form) { form { row-gap: 22px; counter-reset: rhSection; > fieldset { background: #fff; border: 1px solid #e6eef4; border-radius: 20px; padding: 34px 32px; display: grid; row-gap: var(--form-row-gap, 14px); } > fieldset > legend { float: left; width: 100%; display: flex; align-items: center; gap: 13px; margin-block-end: 10px; font-size: 24px; font-weight: 700; color: var(--brand-navy); } > fieldset > legend::before { counter-increment: rhSection; content: counter(rhSection); flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-sky); color: #fff; font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } > fieldset:nth-of-type(3n + 2) > legend::before { background: var(--brand-heading-blue); } > fieldset:nth-of-type(3n) > legend::before { background: var(--brand-green); } fieldset fieldset { border: none; margin: 0; padding: 0; display: grid; } fieldset fieldset legend { float: left; width: 100%; display: block; margin-block-end: 6px; font-size: var(--form-label-size, 0.9em); font-weight: var(--form-label-weight, 600); color: var(--form-label-color, inherit); } fieldset fieldset div.option { padding: 2px 0; } fieldset > :is(fieldset, div.entry.checkbox):not(:last-child) { margin-block-end: 12px; } .helpTypes, .transport, .frequency { grid-template-columns: 1fr 1fr; column-gap: 16px; > legend, > span.errormessage { grid-column: 1 / -1; } } .frequency { grid-template-columns: 1fr 1fr 1fr; } .dayParts table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e6eef4; border-radius: 14px; overflow: hidden; } .dayParts thead th { background: #f0f6fb; padding: 11px 16px; font-size: 13px; font-weight: 700; color: var(--text-nav); text-transform: uppercase; letter-spacing: .03em; text-align: center; } .dayParts tbody th { padding: 10px 16px; font-weight: 500; text-align: start; } .dayParts tbody td { text-align: center; } .dayParts thead th:first-child { text-align: start; } .dayParts tbody tr > * { border-block-start: 1px solid #eef4f9; } .dayParts th button { border: none; padding: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .dayParts th button:hover { text-decoration-style: solid; } input[type=number] { flex-basis: auto; width: 8em; } div.button button { padding: 16px 40px; font-size: 17px; } } } div.column:not(:has(form)) { background: #fff; border: 1px solid #e6eef4; border-radius: 20px; padding: 30px 28px; position: sticky; top: 28px; h3 { margin: 0 0 10px; font-size: 21px; color: var(--brand-navy); } h3 + p { margin-block-start: 0; } p + h3, ul + h3 { margin-block-start: 28px; } } @media (width <= 900px) { --column-widths: 1fr; div.column:not(:has(form)) { position: static; } } } section:is(.requestHelpForm, .jobApplicationForm) { --spacing-margin-top: 0px; --spacing-margin-bottom: 0px; --spacing-padding-top: 48px; --spacing-padding-bottom: 90px; @media (width <= 900px) { --spacing-padding-top: 36px; --spacing-padding-bottom: 64px; } } div.requestSummary dd { border-bottom: 1px dotted var(--brand-sky); &:last-of-type { border-bottom: none; } }