@charset "UTF-8";
/* Imports */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Open+Sans:wght@400;600&family=Poppins:wght@500;600&display=swap");
/* Functions */
/* Colors */
/* Spacing */
/* Fonts */
/* Magic */
/* Breakpoints */
@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
i.fa-solid,
.svg-inline--fa {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:root {
  --background: #f4f8fb;
  --background-100: rgb(248.4, 250.8, 252.6);
  --background-200: rgb(247.3, 250.1, 252.2);
  --background-300: rgb(246.2, 249.4, 251.8);
  --background-400: rgb(245.1, 248.7, 251.4);
  --background-500: #f4f8fb;
  --background-600: rgb(219.6, 223.2, 225.9);
  --background-700: rgb(195.2, 198.4, 200.8);
  --background-800: rgb(170.8, 173.6, 175.7);
  --background-900: rgb(146.4, 148.8, 150.6);
  --background-o-25: rgba(244, 248, 251, 0.25);
  --background-o-50: rgba(244, 248, 251, 0.5);
  --background-o-75: rgba(244, 248, 251, 0.75);
  --text: #1e1e1e;
  --text-100: #787878;
  --text-200: rgb(97.5, 97.5, 97.5);
  --text-300: #4b4b4b;
  --text-400: rgb(52.5, 52.5, 52.5);
  --text-500: #1e1e1e;
  --text-600: #1b1b1b;
  --text-700: #181818;
  --text-800: #151515;
  --text-900: #121212;
  --text-o-25: rgba(30, 30, 30, 0.25);
  --text-o-50: rgba(30, 30, 30, 0.5);
  --text-o-75: rgba(30, 30, 30, 0.75);
  --accent: #1894d2;
  --accent-100: rgb(116.4, 190.8, 228);
  --accent-200: rgb(93.3, 180.1, 223.5);
  --accent-300: rgb(70.2, 169.4, 219);
  --accent-400: rgb(47.1, 158.7, 214.5);
  --accent-500: #1894d2;
  --accent-600: rgb(21.6, 133.2, 189);
  --accent-700: rgb(19.2, 118.4, 168);
  --accent-800: rgb(16.8, 103.6, 147);
  --accent-900: rgb(14.4, 88.8, 126);
  --accent-o-25: rgba(24, 148, 210, 0.25);
  --accent-o-50: rgba(24, 148, 210, 0.5);
  --accent-o-75: rgba(24, 148, 210, 0.75);
  --compliment: #f59c00;
  --compliment-100: rgb(249, 195.6, 102);
  --compliment-200: rgb(248, 185.7, 76.5);
  --compliment-300: rgb(247, 175.8, 51);
  --compliment-400: rgb(246, 165.9, 25.5);
  --compliment-500: #f59c00;
  --compliment-600: rgb(220.5, 140.4, 0);
  --compliment-700: rgb(196, 124.8, 0);
  --compliment-800: rgb(171.5, 109.2, 0);
  --compliment-900: rgb(147, 93.6, 0);
  --compliment-o-25: rgba(245, 156, 0, 0.25);
  --compliment-o-50: rgba(245, 156, 0, 0.5);
  --compliment-o-75: rgba(245, 156, 0, 0.75);
  --black: #000000;
  --white: #ffffff;
  --border-radius: 0.5rem;
  --side-panel-width: 100dvw;
  --xxxtiny: 2px;
  --xxtiny: 4px;
  --xtiny: 6px;
  --xtiny: 6px;
  --tiny: 8px;
  --small: 12px;
  --medium: 16px;
  --large: 24px;
  --xlarge: 32px;
  --xxlarge: 48px;
  --xxxlarge: 64px;
  --xxxxlarge: 96px;
  --font-heading: Montserrat, sans-serif;
  --font-body: Open Sans, sans-serif;
  --font-accent: Poppins, sans-serif;
  --bp-small: 576px;
  --bp-medium: 768px;
  --bp-large: 1080px;
  --bp-xlarge: 1400px;
  --bp-widescreen: 1921px;
  --magic-number: 7;
  --magic-number-px: 7px;
  --magic-number-ch: 7ch;
  --magic-number-s: 0.25s;
  --screen-height: 100vh;
  interpolate-size: allow-keywords;
}
@media (min-width: 768px) {
  :root {
    --side-panel-width: 360px;
  }
}
@media (min-width: 1024px) {
  :root {
    --side-panel-width: 400px;
  }
}
@media (min-width: 1280px) {
  :root {
    --side-panel-width: 480px;
  }
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--background);
  scroll-behavior: smooth;
  scrollbar-gutter: stable both-edges;
}
body::-webkit-scrollbar {
  width: var(--small);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--accent-500);
}
body::-webkit-scrollbar-track {
  background-color: var(--text-500);
}
body.heated {
  --accent: #f59c00;
  --accent-100: rgb(249, 195.6, 102);
  --accent-200: rgb(248, 185.7, 76.5);
  --accent-300: rgb(247, 175.8, 51);
  --accent-400: rgb(246, 165.9, 25.5);
  --accent-500: #f59c00;
  --accent-600: rgb(220.5, 140.4, 0);
  --accent-700: rgb(196, 124.8, 0);
  --accent-800: rgb(171.5, 109.2, 0);
  --accent-900: rgb(147, 93.6, 0);
  --accent-o-25: rgba(245, 156, 0, 0.25);
  --accent-o-50: rgba(245, 156, 0, 0.5);
  --accent-o-75: rgba(245, 156, 0, 0.75);
  --compliment: #1894d2;
  --compliment-100: rgb(116.4, 190.8, 228);
  --compliment-200: rgb(93.3, 180.1, 223.5);
  --compliment-300: rgb(70.2, 169.4, 219);
  --compliment-400: rgb(47.1, 158.7, 214.5);
  --compliment-500: #1894d2;
  --compliment-600: rgb(21.6, 133.2, 189);
  --compliment-700: rgb(19.2, 118.4, 168);
  --compliment-800: rgb(16.8, 103.6, 147);
  --compliment-900: rgb(14.4, 88.8, 126);
  --compliment-o-25: rgba(24, 148, 210, 0.25);
  --compliment-o-50: rgba(24, 148, 210, 0.5);
  --compliment-o-75: rgba(24, 148, 210, 0.75);
}

section {
  scroll-snap-align: start;
  padding: var(--xxxlarge) var(--medium);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  section {
    scroll-margin-top: var(--nav-height);
    padding: var(--large);
  }
}
section .section-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
}
section .section-title .call-to-action-text {
  font-weight: 1000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  margin-block: var(--small);
  font-size: var(--medium);
}

p {
  max-width: var(--bp-large);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.7;
}

acronym {
  font-family: var(--font-body);
  font-weight: bold;
  text-transform: uppercase;
}

a {
  font-family: var(--font-body);
}

button,
.btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background-500);
  color: var(--text-500);
  text-decoration: none;
  padding: var(--small) var(--medium);
  font-family: var(--font-accent);
  transition: all var(--magic-number-s) ease;
}
button:hover,
.btn:hover {
  background-color: var(--background-600);
}
button.btn-primary,
.btn.btn-primary {
  background-color: var(--accent-500);
  color: var(--background-500);
}
button.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--accent-700);
  color: var(--background-300);
}
button.btn-secondary,
.btn.btn-secondary {
  background-color: var(--compliment-500);
}
button.btn-secondary:hover,
.btn.btn-secondary:hover {
  background-color: var(--compliment-700);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
}

svg.logo-primary {
  fill: var(--background);
}
svg.logo-secondary {
  fill: var(--text);
}
svg.logo-accent {
  fill: var(--accent);
}
svg.logo-compliment {
  fill: var(--compliment);
}

.cta-text,
.call-to-action-text {
  color: var(--accent);
  font-weight: bold;
}
.cta-background,
.call-to-action-background {
  background-color: var(--accent);
}
.cta-sub-text,
.call-to-action-sub-text {
  color: var(--complim);
  font-weight: bold;
}
.cta-sub-background,
.call-to-action-sub-background {
  background-color: var(--complim);
}

.text-primary {
  color: var(--background);
}
.text-secondary {
  color: var(--text);
}
.text-tertiary {
  color: var(--tertiary);
}
.text-accent {
  color: var(--accent);
}
.text-compliment {
  color: var(--compliment);
}
.text-center, .text-middle {
  text-align: center;
}
.text-right, .text-end {
  text-align: right;
}
.text-left, .text-start {
  text-align: left;
}

.bg-primary {
  background-color: var(--background);
}
.bg-secondary {
  background-color: var(--text);
}
.bg-secondary-25 {
  background-color: var(--text-25);
}
.bg-secondary-50 {
  background-color: var(--text-50);
}
.bg-secondary-75 {
  background-color: var(--text-75);
}
.bg-tertiary {
  background-color: var(--tertiary);
}
.bg-accent {
  background-color: var(--accent);
}
.bg-compliment {
  background-color: var(--compliment);
}

.font-bold,
.f-bold {
  font-weight: bold;
}
.font-logo,
.f-logo {
  font-family: var(--font-primary);
  text-decoration: none;
  font-weight: 900;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  margin: var(--tiny);
}
.font-size-xxxtiny,
.f-size-xxxtiny {
  font-size: var(--xxxtiny);
}
.font-size-xxtiny,
.f-size-xxtiny {
  font-size: var(--xxtiny);
}
.font-size-xtiny,
.f-size-xtiny {
  font-size: var(--xtiny);
}
.font-size-tiny,
.f-size-tiny {
  font-size: var(--tiny);
}
.font-size-small,
.f-size-small {
  font-size: var(--small);
}
.font-size-medium,
.f-size-medium {
  font-size: var(--medium);
}
.font-size-large,
.f-size-large {
  font-size: var(--large);
}
.font-size-xlarge,
.f-size-xlarge {
  font-size: var(--xlarge);
}
.font-size-xxlarge,
.f-size-xxlarge {
  font-size: var(--xxlarge);
}
.font-size-xxxlarge,
.f-size-xxxlarge {
  font-size: var(--xxxlarge);
}
.font-size-xxxxlarge,
.f-size-xxxxlarge {
  font-size: var(--xxxxlarge);
}

hr {
  width: 100%;
  min-height: 1px;
  background-color: var(--text-100);
  margin-block: 1rem;
}
hr.vertical {
  width: 1px;
  height: 100%;
  background-color: var(--text-100);
  margin-inline: 1rem;
}

.hr {
  border-bottom: 1px solid var(--text-100);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.hr.vertical {
  border-right: 1px solid var(--text-100);
  padding-right: 1rem;
  margin-inline: 1rem;
}

.container {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 576px) {
  .container {
    max-width: 576px;
    margin-inline: auto;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 576px;
    margin-inline: auto;
  }
}
@media (min-width: 1080px) {
  .container {
    max-width: 768px;
    margin-inline: auto;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1080px;
    margin-inline: auto;
  }
}
@media (min-width: 1921px) {
  .container {
    max-width: 1400px;
    margin-inline: auto;
  }
}

.margin-left-auto,
.m-left-auto {
  margin-left: auto;
}
.margin-left-xxxtiny,
.m-left-xxxtiny {
  margin-left: var(--xxxtiny);
}
.margin-left-xxtiny,
.m-left-xxtiny {
  margin-left: var(--xxtiny);
}
.margin-left-xtiny,
.m-left-xtiny {
  margin-left: var(--xtiny);
}
.margin-left-tiny,
.m-left-tiny {
  margin-left: var(--tiny);
}
.margin-left-small,
.m-left-small {
  margin-left: var(--small);
}
.margin-left-medium,
.m-left-medium {
  margin-left: var(--medium);
}
.margin-left-large,
.m-left-large {
  margin-left: var(--large);
}
.margin-left-xlarge,
.m-left-xlarge {
  margin-left: var(--xlarge);
}
.margin-left-xxlarge,
.m-left-xxlarge {
  margin-left: var(--xxlarge);
}
.margin-left-xxxlarge,
.m-left-xxxlarge {
  margin-left: var(--xxxlarge);
}
.margin-left-xxxxlarge,
.m-left-xxxxlarge {
  margin-left: var(--xxxxlarge);
}
.margin-right-auto,
.m-right-auto {
  margin-right: auto;
}
.margin-right-xxxtiny,
.m-right-xxxtiny {
  margin-right: var(--xxxtiny);
}
.margin-right-xxtiny,
.m-right-xxtiny {
  margin-right: var(--xxtiny);
}
.margin-right-xtiny,
.m-right-xtiny {
  margin-right: var(--xtiny);
}
.margin-right-tiny,
.m-right-tiny {
  margin-right: var(--tiny);
}
.margin-right-small,
.m-right-small {
  margin-right: var(--small);
}
.margin-right-medium,
.m-right-medium {
  margin-right: var(--medium);
}
.margin-right-large,
.m-right-large {
  margin-right: var(--large);
}
.margin-right-xlarge,
.m-right-xlarge {
  margin-right: var(--xlarge);
}
.margin-right-xxlarge,
.m-right-xxlarge {
  margin-right: var(--xxlarge);
}
.margin-right-xxxlarge,
.m-right-xxxlarge {
  margin-right: var(--xxxlarge);
}
.margin-right-xxxxlarge,
.m-right-xxxxlarge {
  margin-right: var(--xxxxlarge);
}
.margin-top-auto,
.m-top-auto {
  margin-top: auto;
}
.margin-top-xxxtiny,
.m-top-xxxtiny {
  margin-top: var(--xxxtiny);
}
.margin-top-xxtiny,
.m-top-xxtiny {
  margin-top: var(--xxtiny);
}
.margin-top-xtiny,
.m-top-xtiny {
  margin-top: var(--xtiny);
}
.margin-top-tiny,
.m-top-tiny {
  margin-top: var(--tiny);
}
.margin-top-small,
.m-top-small {
  margin-top: var(--small);
}
.margin-top-medium,
.m-top-medium {
  margin-top: var(--medium);
}
.margin-top-large,
.m-top-large {
  margin-top: var(--large);
}
.margin-top-xlarge,
.m-top-xlarge {
  margin-top: var(--xlarge);
}
.margin-top-xxlarge,
.m-top-xxlarge {
  margin-top: var(--xxlarge);
}
.margin-top-xxxlarge,
.m-top-xxxlarge {
  margin-top: var(--xxxlarge);
}
.margin-top-xxxxlarge,
.m-top-xxxxlarge {
  margin-top: var(--xxxxlarge);
}
.margin-bottom-auto,
.m-bottom-auto {
  margin-bottom: auto;
}
.margin-bottom-xxxtiny,
.m-bottom-xxxtiny {
  margin-bottom: var(--xxxtiny);
}
.margin-bottom-xxtiny,
.m-bottom-xxtiny {
  margin-bottom: var(--xxtiny);
}
.margin-bottom-xtiny,
.m-bottom-xtiny {
  margin-bottom: var(--xtiny);
}
.margin-bottom-tiny,
.m-bottom-tiny {
  margin-bottom: var(--tiny);
}
.margin-bottom-small,
.m-bottom-small {
  margin-bottom: var(--small);
}
.margin-bottom-medium,
.m-bottom-medium {
  margin-bottom: var(--medium);
}
.margin-bottom-large,
.m-bottom-large {
  margin-bottom: var(--large);
}
.margin-bottom-xlarge,
.m-bottom-xlarge {
  margin-bottom: var(--xlarge);
}
.margin-bottom-xxlarge,
.m-bottom-xxlarge {
  margin-bottom: var(--xxlarge);
}
.margin-bottom-xxxlarge,
.m-bottom-xxxlarge {
  margin-bottom: var(--xxxlarge);
}
.margin-bottom-xxxxlarge,
.m-bottom-xxxxlarge {
  margin-bottom: var(--xxxxlarge);
}
.margin-all-auto,
.m-all-auto {
  margin: auto;
}
.margin-all-xxxtiny,
.m-all-xxxtiny {
  margin: var(--xxxtiny);
}
.margin-all-xxtiny,
.m-all-xxtiny {
  margin: var(--xxtiny);
}
.margin-all-xtiny,
.m-all-xtiny {
  margin: var(--xtiny);
}
.margin-all-tiny,
.m-all-tiny {
  margin: var(--tiny);
}
.margin-all-small,
.m-all-small {
  margin: var(--small);
}
.margin-all-medium,
.m-all-medium {
  margin: var(--medium);
}
.margin-all-large,
.m-all-large {
  margin: var(--large);
}
.margin-all-xlarge,
.m-all-xlarge {
  margin: var(--xlarge);
}
.margin-all-xxlarge,
.m-all-xxlarge {
  margin: var(--xxlarge);
}
.margin-all-xxxlarge,
.m-all-xxxlarge {
  margin: var(--xxxlarge);
}
.margin-all-xxxxlarge,
.m-all-xxxxlarge {
  margin: var(--xxxxlarge);
}
.margin-horizontal-auto,
.m-horizontal-auto {
  margin-left: auto;
  margin-right: auto;
}
.margin-horizontal-xxxtiny,
.m-horizontal-xxxtiny {
  margin-left: var(--xxxtiny);
  margin-right: var(--xxxtiny);
}
.margin-horizontal-xxtiny,
.m-horizontal-xxtiny {
  margin-left: var(--xxtiny);
  margin-right: var(--xxtiny);
}
.margin-horizontal-xtiny,
.m-horizontal-xtiny {
  margin-left: var(--xtiny);
  margin-right: var(--xtiny);
}
.margin-horizontal-tiny,
.m-horizontal-tiny {
  margin-left: var(--tiny);
  margin-right: var(--tiny);
}
.margin-horizontal-small,
.m-horizontal-small {
  margin-left: var(--small);
  margin-right: var(--small);
}
.margin-horizontal-medium,
.m-horizontal-medium {
  margin-left: var(--medium);
  margin-right: var(--medium);
}
.margin-horizontal-large,
.m-horizontal-large {
  margin-left: var(--large);
  margin-right: var(--large);
}
.margin-horizontal-xlarge,
.m-horizontal-xlarge {
  margin-left: var(--xlarge);
  margin-right: var(--xlarge);
}
.margin-horizontal-xxlarge,
.m-horizontal-xxlarge {
  margin-left: var(--xxlarge);
  margin-right: var(--xxlarge);
}
.margin-horizontal-xxxlarge,
.m-horizontal-xxxlarge {
  margin-left: var(--xxxlarge);
  margin-right: var(--xxxlarge);
}
.margin-horizontal-xxxxlarge,
.m-horizontal-xxxxlarge {
  margin-left: var(--xxxxlarge);
  margin-right: var(--xxxxlarge);
}
.margin-vertical-auto,
.m-vertical-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.margin-vertical-xxxtiny,
.m-vertical-xxxtiny {
  margin-top: var(--xxxtiny);
  margin-bottom: var(--xxxtiny);
}
.margin-vertical-xxtiny,
.m-vertical-xxtiny {
  margin-top: var(--xxtiny);
  margin-bottom: var(--xxtiny);
}
.margin-vertical-xtiny,
.m-vertical-xtiny {
  margin-top: var(--xtiny);
  margin-bottom: var(--xtiny);
}
.margin-vertical-tiny,
.m-vertical-tiny {
  margin-top: var(--tiny);
  margin-bottom: var(--tiny);
}
.margin-vertical-small,
.m-vertical-small {
  margin-top: var(--small);
  margin-bottom: var(--small);
}
.margin-vertical-medium,
.m-vertical-medium {
  margin-top: var(--medium);
  margin-bottom: var(--medium);
}
.margin-vertical-large,
.m-vertical-large {
  margin-top: var(--large);
  margin-bottom: var(--large);
}
.margin-vertical-xlarge,
.m-vertical-xlarge {
  margin-top: var(--xlarge);
  margin-bottom: var(--xlarge);
}
.margin-vertical-xxlarge,
.m-vertical-xxlarge {
  margin-top: var(--xxlarge);
  margin-bottom: var(--xxlarge);
}
.margin-vertical-xxxlarge,
.m-vertical-xxxlarge {
  margin-top: var(--xxxlarge);
  margin-bottom: var(--xxxlarge);
}
.margin-vertical-xxxxlarge,
.m-vertical-xxxxlarge {
  margin-top: var(--xxxxlarge);
  margin-bottom: var(--xxxxlarge);
}

html {
  overflow-x: hidden;
}

section {
  scroll-margin-top: var(--xxxlarge);
}
@media (min-width: 769px) {
  section {
    scroll-margin-top: calc(94px + var(--nav-height));
  }
}

@property --gradient-color {
  syntax: "<color>";
  initial-value: rgba(244, 248, 251, 0.1);
  inherits: false;
}
@property --gradient-rotation {
  syntax: "<angle> | <percentage>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes gradient-rotation {
  0% {
    --gradient-rotation: 0deg;
  }
  100% {
    --gradient-rotation: 360deg;
  }
}
@media (max-width: 1440px) {
  .navbar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    position: sticky;
    top: calc(-1 * var(--nav-info-height, 0));
    z-index: 1000;
    filter: drop-shadow(0 0 var(--xxxtiny) var(--text-500));
  }
  .navbar .navbar-info {
    position: relative;
    background-color: var(--accent-500);
    color: var(--background-500);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--tiny);
  }
  .navbar .navbar-info .navbar-info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--small) var(--medium);
  }
  .navbar .navbar-info .navbar-info-item:nth-child(1) {
    grid-column: 1/span 2;
    height: 100%;
  }
  .navbar .navbar-info .navbar-info-item:nth-child(2) {
    display: none;
  }
  .navbar .navbar-info .navbar-info-item *:first-child {
    margin-right: var(--xtiny);
    font-size: var(--medium);
  }
  .navbar .navbar-info .navbar-info-item p,
  .navbar .navbar-info .navbar-info-item a {
    font-size: var(--small);
  }
  .navbar .navbar-info .navbar-info-item * {
    text-decoration: none;
    color: var(--background);
  }
  .navbar .navbar-main {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-rows: 72px 1fr;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--medium);
    background: var(--accent-500);
    transition: all var(--magic-number-s) ease;
    max-height: 72px;
  }
  .navbar .navbar-main:has(.navbar-items[aria-expanded=true]) {
    max-height: -moz-fit-content;
    max-height: fit-content;
  }
  .navbar .navbar-main .navbar-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--large);
    color: var(--background-500);
  }
  .navbar .navbar-main .navbar-logo {
    position: relative;
    padding: var(--small);
    margin-left: auto;
  }
  .navbar .navbar-main .navbar-logo a {
    padding: var(--large);
  }
  .navbar .navbar-main .navbar-logo a img {
    max-height: calc(72px - 2 * var(--small));
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .navbar .navbar-main .navbar-items {
    grid-column: 1/span 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    list-style: none;
    height: 0;
    transition: all var(--magic-number-s) ease;
    overflow: hidden;
    margin-top: 0;
    padding-inline: var(--small);
  }
  .navbar .navbar-main .navbar-items[aria-expanded=true] {
    height: auto;
    margin-top: calc(-1 * var(--medium));
  }
  .navbar .navbar-main .navbar-items .navbar-item {
    position: relative;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    color: var(--background-500);
    font-weight: bold;
  }
  .navbar .navbar-main .navbar-items .navbar-item.active {
    background: var(--background-500);
    color: var(--accent-500);
  }
  .navbar .navbar-main .navbar-items .navbar-item.active:after {
    content: "";
    position: absolute;
    inset: -1px;
    left: 0;
    width: var(--large);
    height: 100%;
    background-color: var(--accent-500);
    clip-path: polygon(0% 0%, 0% 100%, 100% 0);
  }
  .navbar .navbar-main .navbar-items .navbar-item:last-of-type {
    margin-bottom: var(--medium);
  }
  .navbar .navbar-main .navbar-items .navbar-item a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--medium);
    padding: var(--medium) var(--large);
    text-decoration: none;
    color: inherit;
    transition: background var(--magic-number-s) ease, color var(--magic-number-s) ease;
    width: 100%;
  }
  .navbar .navbar-main .navbar-items .nav-cta {
    margin-block: var(--medium);
    grid-column: 1/span 2;
    background-color: var(--background-500);
    color: var(--accent-500);
  }
  .navbar .navbar-main .navbar-items .nav-cta a {
    background: inherit;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
  .hero-banner {
    position: relative;
    height: calc(100vh - (var(--nav-height) + -1 * var(--nav-info-height)));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--font-heading);
    text-align: center;
    background: rgba(24, 148, 210, 0.1);
    overflow: hidden;
  }
  .hero-banner.no-bg::before {
    background: none !important;
  }
  .hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--nav-height));
    z-index: -1;
    background: url("/assets/images/hero-banner.webp") no-repeat right center/cover;
    filter: brightness(0.25);
  }
  .hero-banner .hero-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--background);
  }
  .hero-banner .hero-banner-content .hero-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: var(--medium);
  }
  .hero-banner .hero-banner-content .hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.5rem;
    margin-bottom: var(--large);
    max-width: 600px;
    color: var(--background-700);
    text-align: center;
  }
  .hero-banner .hero-banner-content .hero-tagline {
    font-family: var(--font-body);
    margin-bottom: var(--xxxxlarge);
    color: var(--background-700);
  }
  #about {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  #about .section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    text-align: center;
    font-weight: bold;
    width: 100%;
    margin-bottom: var(--xxxlarge);
  }
  #about .section-title .call-to-action-text {
    font-weight: 1000;
  }
  #about .about-paragraph {
    font-family: var(--font-accent);
    font-size: 0.9rem;
    line-height: 1.7;
  }
  #about .about-paragraph-bottom {
    font-size: var(--xlarge);
  }
  #about .about-paragraph-bottom {
    font-size: 1.5rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  #about .about-paragraph-bottom strong {
    font-size: 1.75rem;
  }
  #about .flex-splitter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    gap: var(--large);
    max-width: var(--bp-xlarge);
    margin-bottom: var(--xxxxlarge);
  }
}
@media (max-width: 1440px) and (min-width: 769px) {
  #about .flex-splitter {
    flex-direction: row;
  }
}
@media (max-width: 1440px) {
  #about .flex-splitter .left-split {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--background-500);
    z-index: 1;
  }
  #about .flex-splitter .left-split .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--xlarge);
    font-size: 0.9rem;
  }
  #about .flex-splitter .right-split {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background-500);
    z-index: 0;
  }
  #about .flex-splitter .right-split img {
    width: 100%;
  }
  #why-choose-us {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--background-500);
    background: rgba(24, 148, 210, 0.1);
  }
  #why-choose-us::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/images/waves.webp") no-repeat center center/cover;
    filter: brightness(0.33);
  }
  #why-choose-us .flex-splitter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    gap: var(--large);
    max-width: var(--bp-xlarge);
    margin-top: var(--xxxlarge);
  }
}
@media (max-width: 1440px) and (min-width: 769px) {
  #why-choose-us .flex-splitter {
    flex-direction: row;
  }
}
@media (max-width: 1440px) {
  #why-choose-us .flex-splitter * {
    color: var(--background-500);
    flex: 1 0 0;
  }
  #why-choose-us .flex-splitter * .split-card {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    padding: var(--medium);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-icon {
    color: var(--accent-500);
    width: 100%;
    text-align: center;
    flex: 0;
  }
  #why-choose-us .flex-splitter * .split-card .split-card-icon * {
    font-size: var(--xlarge);
    margin-bottom: var(--small);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-title {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
    flex: 0;
    padding-bottom: var(--medium);
    margin-bottom: var(--medium);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-title::after {
    content: "";
    position: absolute;
    display: block;
    left: var(--medium);
    right: var(--medium);
    height: 1px;
    bottom: 0;
    background: linear-gradient(90deg, transparent, var(--background-900), transparent);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body {
    font-family: var(--font-body);
    text-align: center;
    color: var(--text-500);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body p {
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: 0.9rem;
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body ul {
    list-style: none;
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body ul li:before {
    content: "✓";
  }
  #who-we-help {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #who-we-help .tiered-grid {
    display: grid;
  }
  #who-we-help .tiered-grid .tiered-grid-item {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--background-500);
    padding: var(--large);
    box-shadow: var(--box-shadow);
    padding-block: var(--xxxxlarge);
    overflow: hidden;
    align-content: stretch;
    flex-direction: column;
    justify-content: center;
    margin-top: var(--xxlarge);
  }
  #who-we-help .tiered-grid .tiered-grid-item.zoom-effect .tiered-grid-image {
    transform: scale(1.1);
  }
  #who-we-help .tiered-grid .tiered-grid-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(30, 30, 30, 0.75);
    z-index: 1;
  }
  #who-we-help .tiered-grid .tiered-grid-item .tiered-grid-image {
    position: absolute;
    height: 100%;
    -o-object-fit: scale-down;
       object-fit: scale-down;
    z-index: 0;
    transition: transform calc(var(--magic-number-s) * 10) ease;
  }
  #who-we-help .tiered-grid .tiered-grid-item .tiered-grid-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: var(--xlarge);
    color: var(--background-500);
    z-index: 2;
  }
  #who-we-help .tiered-grid .tiered-grid-item .tiered-grid-description {
    font-family: var(--font-body);
    line-height: 1.7;
    text-align: center;
    color: var(--background-500);
    z-index: 2;
    font-size: 0.9rem;
  }
  #contact {
    min-height: 100vh;
    background: rgba(24, 148, 210, 0.1);
  }
  #contact .section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--background-500);
    text-align: center;
  }
  #contact .section-subtext {
    position: relative;
    font-family: var(--font-accent);
    font-size: var(--small);
    line-height: 1.7;
    color: var(--background-700);
    margin-bottom: var(--large);
    text-align: center;
  }
  #contact .section-subtext::before {
    content: "";
    position: absolute;
    display: block;
    left: var(--medium);
    right: var(--medium);
    height: 2px;
    bottom: calc(-1 * var(--large));
    background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
  }
  #contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/images/house.webp") no-repeat center center/cover;
    filter: brightness(0.33);
  }
  main:has(#services) #contact {
    background: var(--background-500);
    color: var(--text-500);
  }
  main:has(#services) #contact .section-title {
    color: var(--text-500);
  }
  main:has(#services) #contact .section-subtext {
    color: var(--text-700);
  }
  main:has(#services) #contact #contact-form:hover:before, main:has(#services) #contact #contact-form:focus-within:before {
    --gradient-color: transparent;
  }
  main:has(#services) #contact #contact-form:before {
    animation-play-state: paused;
  }
  main:has(#services) #contact #contact-form .grecaptcha-badge {
    box-shadow: none !important;
  }
  main:has(#services) #contact #contact-form .form-group label {
    color: var(--text-500);
    text-align: left;
  }
  main:has(#services) #contact #contact-form .form-group input,
  main:has(#services) #contact #contact-form .form-group textarea {
    text-align: left;
    background: rgba(30, 30, 30, 0.1);
    color: var(--text-500);
  }
  main:has(#services) #contact #contact-form .form-group input::-moz-placeholder, main:has(#services) #contact #contact-form .form-group textarea::-moz-placeholder {
    color: var(--text-700);
  }
  main:has(#services) #contact #contact-form .form-group input::placeholder,
  main:has(#services) #contact #contact-form .form-group textarea::placeholder {
    color: var(--text-700);
  }
  main:has(#services) #contact #contact-form .form-group input:active, main:has(#services) #contact #contact-form .form-group input:focus,
  main:has(#services) #contact #contact-form .form-group textarea:active,
  main:has(#services) #contact #contact-form .form-group textarea:focus {
    border-color: var(--accent-500);
    background: rgba(0, 0, 0, 0.1);
  }
  main:has(#services) #contact #contact-form .form-group button {
    background: var(--accent-500);
    color: var(--background-500);
  }
  main:has(#services) #contact #contact-form .form-group button:hover {
    background: var(--accent-700);
    color: var(--background-500);
  }
  #services {
    position: relative;
    overflow: hidden;
    margin-bottom: calc(-0.5 * var(--nav-height));
    height: auto;
    padding: 0;
    color: var(--background-500);
  }
  #services .hero-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--background);
  }
  #services .hero-banner-content .hero-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: var(--medium);
  }
  #services .hero-banner-content .hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.5rem;
    margin-bottom: var(--large);
    max-width: 600px;
    color: var(--background-700);
    text-align: center;
  }
  #services .hero-banner-content .hero-tagline {
    font-family: var(--font-body);
    margin-bottom: var(--xxxxlarge);
    color: var(--background-700);
  }
  #services .hero-title,
  #services .btn.btn-primary.cta {
    z-index: 3;
  }
  #services .hero-title {
    padding-inline: var(--small);
    position: relative;
    top: 72px;
  }
  #services .btn.btn-primary.cta {
    margin-top: -126px;
    margin-bottom: 126px;
  }
  #services .image-card-splitter {
    margin-top: -72px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    background: orange;
    height: 100%;
  }
  #services .image-card-splitter .split-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--xxxxlarge) var(--small);
    position: relative;
    left: 0;
    flex: 1;
    height: 100%;
    min-height: 50vh;
    border-bottom: 2px solid black;
    z-index: 2;
    filter: drop-shadow(0 var(--tiny) 0 black);
  }
  #services .image-card-splitter .split-card:first-of-type {
    padding-top: 216px;
  }
  #services .image-card-splitter .split-card:last-of-type {
    padding-bottom: 216px;
  }
  #services .image-card-splitter .split-card:before {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    z-index: -1;
    filter: brightness(0.33);
    transition: all calc(var(--magic-number-s) * 5) ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
  }
  #services .image-card-splitter .split-card:first-of-type:before {
    clip-path: none !important;
  }
  #services .image-card-splitter .split-card:hover:before {
    background-size: auto 101%;
  }
  #services .image-card-splitter .split-card.split-card-plumbing:before {
    background-image: url("/assets/images/plumbing.webp");
  }
  #services .image-card-splitter .split-card.split-card-heating:before {
    background-image: url("/assets/images/heating.webp");
  }
  #services .image-card-splitter .split-card.split-card-pumps:before {
    background-image: url("/assets/images/pumps.webp");
  }
  #services .image-card-splitter .split-card.split-card-special:before {
    background-image: url("/assets/images/specialty-services.webp");
  }
  #services .image-card-splitter .split-card .split-card-title {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
    flex: 0;
    padding-bottom: var(--medium);
    margin-bottom: var(--medium);
  }
  #services .image-card-splitter .split-card p {
    position: relative;
    z-index: inherit;
    font-family: var(--font-body);
    line-height: 1.7;
  }
  main:has(.hero-splitter) .hero-banner {
    margin-bottom: 0;
    height: auto;
  }
  main:has(.hero-splitter) .hero-banner:before {
    background-image: url("/assets/images/house.webp");
  }
  main:has(.hero-splitter) .hero-banner:after {
    background-color: var(--accent-500);
  }
  main:has(.hero-splitter) .hero-banner-content {
    width: 100%;
  }
  main:has(.hero-splitter) .hero-splitter {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: var(--large);
  }
  main:has(.hero-splitter) .hero-splitter .left,
  main:has(.hero-splitter) .hero-splitter .right {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  main:has(.hero-splitter) .hero-splitter .left {
    gap: var(--large);
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper {
    width: 100%;
    padding: var(--small) var(--medium);
    -webkit-backdrop-filter: blur(var(--medium));
            backdrop-filter: blur(var(--medium));
    --gradient-color: rgba(244, 248, 251, 0.1);
    --gradient-rotation: 0deg;
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper:hover:before, main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper:focus-within:before {
    --gradient-color: rgba(24, 148, 210, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper:before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;
    transition: all var(--magic-number-s) ease, --gradient-color var(--magic-number-s) ease, --gradient-rotation var(--magic-number-s) ease;
    background: conic-gradient(from var(--gradient-rotation), rgba(244, 248, 251, 0.1) 0%, var(--gradient-color) 20%, var(--gradient-color) 40%, rgba(244, 248, 251, 0.1) 60%, rgba(244, 248, 251, 0.1) 100%);
    --border-size: 1px;
    clip-path: polygon(0% 0%, 0% 100%, var(--border-size) 100%, var(--border-size) var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) calc(100% - var(--border-size)), var(--border-size) calc(100% - var(--border-size)), var(--border-size) 100%, 100% 100%, 100% 0%);
    animation: gradient-rotation calc(var(--magic-number-s) * 10) linear infinite;
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper .hero-title {
    position: relative;
    font-size: 2rem;
    font-family: var(--font-heading);
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--small);
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper .hero-description {
    position: relative;
    font-size: 0.9rem;
    line-height: 1.7;
    padding-top: var(--medium);
    color: var(--background-500);
    text-align: flex-start;
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper .hero-description:first-of-type::before {
    content: "";
    position: absolute;
    display: block;
    left: var(--medium);
    right: var(--medium);
    height: 1px;
    top: 0;
    background: linear-gradient(90deg, transparent, var(--background-900), transparent);
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--large);
    width: 100%;
    margin-block: auto;
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--small);
    padding: var(--small) var(--medium);
    list-style: none;
    font-family: var(--font-heading);
    font-size: var(--small);
    -webkit-backdrop-filter: blur(var(--small));
            backdrop-filter: blur(var(--small));
    transition: all var(--magic-number-s) ease;
    --gradient-color: rgba(244, 248, 251, 0.1);
    --gradient-rotation: 0deg;
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:hover:before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:focus-within:before {
    --gradient-color: rgba(245, 156, 0, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(2):hover::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(2):focus-within::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(3):hover::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(3):focus-within::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(6):hover::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(6):focus-within::before {
    --gradient-color: rgba(24, 148, 210, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;
    transition: all var(--magic-number-s) ease, --gradient-color var(--magic-number-s) ease, --gradient-rotation var(--magic-number-s) ease;
    background: conic-gradient(from var(--gradient-rotation), rgba(244, 248, 251, 0.1) 0%, var(--gradient-color) 20%, var(--gradient-color) 40%, rgba(244, 248, 251, 0.1) 60%, rgba(244, 248, 251, 0.1) 100%);
    --border-size: 1px;
    clip-path: polygon(0% 0%, 0% 100%, var(--border-size) 100%, var(--border-size) var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) calc(100% - var(--border-size)), var(--border-size) calc(100% - var(--border-size)), var(--border-size) 100%, 100% 100%, 100% 0%);
    animation: gradient-rotation calc(var(--magic-number-s) * 10) linear infinite;
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:first-child {
    font-size: var(--medium);
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency {
    text-align: center;
    padding: var(--small) var(--medium);
    width: 100%;
    -webkit-backdrop-filter: blur(var(--small));
            backdrop-filter: blur(var(--small));
    --gradient-color: rgba(244, 248, 251, 0.1);
    --gradient-rotation: 0deg;
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency:hover:before {
    --gradient-color: rgba(245, 156, 0, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency:before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;
    transition: all var(--magic-number-s) ease, --gradient-color var(--magic-number-s) ease, --gradient-rotation var(--magic-number-s) ease;
    background: conic-gradient(from var(--gradient-rotation), rgba(244, 248, 251, 0.1) 0%, var(--gradient-color) 20%, var(--gradient-color) 40%, rgba(244, 248, 251, 0.1) 60%, rgba(244, 248, 251, 0.1) 100%);
    --border-size: 1px;
    clip-path: polygon(0% 0%, 0% 100%, var(--border-size) 100%, var(--border-size) var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) calc(100% - var(--border-size)), var(--border-size) calc(100% - var(--border-size)), var(--border-size) 100%, 100% 100%, 100% 0%);
    animation: gradient-rotation calc(var(--magic-number-s) * 10) linear infinite;
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency a {
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
  }
  footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background: var(--accent-500);
    color: var(--background-500);
    gap: var(--small);
    padding: var(--large);
    padding-bottom: var(--medium);
  }
  footer * {
    font-family: var(--font-heading);
    color: var(--background-500);
    text-decoration: none;
    font-size: var(--small);
  }
  footer *:is(a) {
    font-weight: bold;
  }
  footer *:is(p) {
    font-size: var(--small) !important;
  }
  footer footer p {
    font-size: var(--small);
  }
  footer .footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-inline: auto;
  }
  footer .footer-logo img {
    width: 100%;
    text-align: center;
  }
  footer .footer-subtext {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  footer .footer-subtext p {
    margin-top: var(--small);
    line-height: 1.5;
    font-size: var(--small);
    text-align: center;
  }
  footer .footer-header {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    width: 100%;
    padding: var(--small);
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    background: var(--background-500);
    color: var(--accent-500);
    padding-left: var(--xlarge);
  }
  footer .footer-header::before {
    content: "";
    position: absolute;
    inset: -1px;
    left: 0;
    width: var(--large);
    height: 100%;
    background-color: var(--accent-500);
    clip-path: polygon(0% 0%, 0% 100%, 100% 0);
  }
  footer .footer-link-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
  }
  footer .footer-info-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  footer .footer-info-item > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
  }
  footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--medium);
  }
  footer .footer-social-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--medium);
  }
  footer .footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--medium);
  }
  footer .footer-copyright {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    color: var(--background-500);
    text-decoration: none;
    font-size: calc(var(--tiny) + var(--xxxtiny));
    text-align: center;
  }
  footer .footer-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--tiny);
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
    display: none;
  }
  footer .footer-time p {
    font-size: var(--small);
  }
  footer .footer-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--tiny);
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
    padding-left: var(--large);
    display: none;
  }
  footer .footer-status p {
    font-size: var(--small);
  }
  footer .footer-payments {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--tiny);
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
    padding-left: var(--large);
    display: none;
  }
  footer .footer-payments p {
    font-size: var(--small);
  }
  footer .footer-powered-by {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--xxtiny);
  }
  footer .footer-powered-by * {
    font-family: var(--font-heading);
    color: var(--background-500);
    text-decoration: none;
    font-size: var(--small);
  }
  footer .footer-powered-by *:is(a) {
    font-weight: bold;
  }
  footer .footer-separator {
    height: 1px;
    background-color: var(--background-500);
  }
  #contact-form {
    width: 100%;
  }
}
@media (min-width: 1441px) {
  .navbar {
    position: sticky;
    top: calc(-1 * var(--nav-info-height, 0));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    z-index: 10;
    filter: drop-shadow(0 0 var(--xxxtiny) var(--text-500));
  }
  .navbar .navbar-info {
    position: relative;
    background-color: var(--accent);
    padding: var(--small) var(--large);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: var(--xxlarge);
    padding-left: calc(256px + var(--xxlarge) + var(--large));
    will-change: transform;
    transition: all var(--magic-number-s) ease;
  }
  .navbar .navbar-info .open-status {
    margin-left: var(--tiny);
    font-size: 0.75rem;
  }
  .navbar .navbar-info .open-status * {
    font-size: inherit;
  }
  .navbar .navbar-info .navbar-info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: var(--medium);
  }
  .navbar .navbar-info .navbar-info-item.navbar-info-item--left {
    margin-right: auto;
  }
  .navbar .navbar-info .navbar-info-item.navbar-info-item--right {
    margin-left: auto;
  }
  .navbar .navbar-info .navbar-info-item *:first-child {
    margin-right: var(--xtiny);
    font-size: var(--medium);
  }
  .navbar .navbar-info .navbar-info-item p,
  .navbar .navbar-info .navbar-info-item a {
    font-size: var(--small);
  }
  .navbar .navbar-info .navbar-info-item * {
    text-decoration: none;
    color: var(--background);
  }
  .navbar .navbar-info .navbar-info-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--small);
    margin-left: auto;
    font-size: var(--small);
    color: var(--background);
  }
  .navbar .navbar-info .navbar-info-socials .navbar-info-social-label {
    font-weight: bold;
    font-size: inherit;
    color: inherit;
  }
  .navbar .navbar-info .navbar-info-socials .navbar-info-social-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: inherit;
  }
  .navbar .navbar-info .navbar-info-socials .navbar-info-social-item:first-child {
    margin-left: auto;
  }
  .navbar .navbar-info .navbar-info-socials .navbar-info-social-item a {
    color: var(--font-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navbar .navbar-info .navbar-info-socials .navbar-info-social-item a:hover {
    color: var(--font-heading);
  }
  .navbar .navbar-info .navbar-info-socials .navbar-info-social-item a * {
    font-size: var(--medium);
  }
  .navbar .navbar-main {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: var(--xxlarge);
    transition: all var(--magic-number-s) ease;
  }
  .navbar .navbar-main.scrolled {
    background-color: var(--background-500);
  }
  .navbar .navbar-main.scrolled .navbar-items .navbar-item::before,
  .navbar .navbar-main.scrolled .navbar-items .navbar-drop-header::before {
    background-color: var(--accent-500);
  }
  .navbar .navbar-main.scrolled .navbar-items .navbar-item a,
  .navbar .navbar-main.scrolled .navbar-items .navbar-drop-header a {
    color: var(--text-500);
  }
  .navbar .navbar-main .navbar-link {
    text-decoration: none;
    color: var(--text);
  }
  .navbar .navbar-main .navbar-logo {
    padding: var(--small) var(--large);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 1;
    margin-top: calc(-1 * var(--nav-info-height));
    background-color: var(--accent);
    width: 256px;
    transition: all var(--magic-number-s) ease;
  }
  .navbar .navbar-main .navbar-logo.scrolled {
    margin-top: 0;
  }
  .navbar .navbar-main .navbar-logo a {
    text-decoration: none;
    color: var(--font-heading);
    font-size: var(--large);
    font-weight: bold;
  }
  .navbar .navbar-main .navbar-logo a img {
    width: 100%;
    height: auto;
    margin-right: var(--small);
  }
  .navbar .navbar-main .navbar-items {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: var(--large);
    flex-grow: 1;
    list-style: none;
    z-index: 0;
    background: transparent;
    margin-left: calc(-1 * var(--medium));
  }
  .navbar .navbar-main .navbar-items::before {
    content: "";
    display: block;
    width: calc(var(--xxlarge) + 1px);
    top: -1px;
    height: 100%;
    background-color: transparent;
    position: absolute;
    left: calc(-1 * var(--xlarge) - 1px);
    clip-path: polygon(100% 100%, 0% 100%, 100% 0);
    transition: all var(--magic-number-s) ease;
  }
  .navbar .navbar-main .navbar-items::after {
    content: "";
    display: block;
    width: calc(var(--xxlarge) + 1px);
    top: -1px;
    height: 100%;
    background-color: var(--background);
    position: absolute;
    left: calc(-1 * var(--xlarge));
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    background-color: var(--accent);
  }
  .navbar .navbar-main .navbar-items .nav-cta {
    margin-left: var(--xxxlarge);
    margin-left: auto;
  }
  .navbar .navbar-main .navbar-items .navbar-item,
  .navbar .navbar-main .navbar-items .navbar-drop-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: var(--medium);
    position: relative;
    color: var(--font-heading);
    font-family: var(--font-heading);
    cursor: pointer;
    font-weight: bold;
    z-index: 3;
    margin-left: calc(-1 * var(--small));
    transition: background var(--magic-number-s) ease, color var(--magic-number-s) ease;
    --active-angle: var(--large);
  }
  .navbar .navbar-main .navbar-items .navbar-item.active a,
  .navbar .navbar-main .navbar-items .navbar-drop-header.active a {
    background-color: var(--accent-500);
    color: var(--background-500);
  }
  .navbar .navbar-main .navbar-items .navbar-item:hover:not(.active) a,
  .navbar .navbar-main .navbar-items .navbar-drop-header:hover:not(.active) a {
    background-color: var(--compliment-o-50);
    color: var(--background-500);
  }
  .navbar .navbar-main .navbar-items .navbar-item:last-of-type a,
  .navbar .navbar-main .navbar-items .navbar-drop-header:last-of-type a {
    clip-path: polygon(100% 100%, 0% 100%, var(--active-angle) 0%, 100% 0%) !important;
    padding-right: var(--xlarge);
  }
  .navbar .navbar-main .navbar-items .navbar-item a,
  .navbar .navbar-main .navbar-items .navbar-drop-header a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--small);
    padding: var(--small) var(--xxlarge);
    text-decoration: none;
    color: var(--background-500);
    transition: background var(--magic-number-s) ease, color var(--magic-number-s) ease;
  }
  .navbar .navbar-main .navbar-items .navbar-item a:is(.navbar .navbar-main .navbar-items .navbar-item a:nth-child(1),
  .navbar .navbar-main .navbar-items .navbar-drop-header a:nth-child(1)),
  .navbar .navbar-main .navbar-items .navbar-drop-header a:is(.navbar .navbar-main .navbar-items .navbar-item a:nth-child(1),
  .navbar .navbar-main .navbar-items .navbar-drop-header a:nth-child(1)) {
    clip-path: polygon(calc(100% - var(--active-angle)) 100%, 0% 100%, var(--active-angle) 0%, 100% 0);
  }
  .navbar .navbar-main .navbar-items .navbar-item a > *,
  .navbar .navbar-main .navbar-items .navbar-drop-header a > * {
    color: inherit;
    background-color: transparent;
  }
  .navbar .navbar-main .navbar-items .navbar-drop-item .navbar-drop-item-label {
    font-weight: bold;
    font-size: var(--medium);
    color: var(--font-heading);
  }
  .navbar .navbar-main .navbar-items .navbar-drop-item .navbar-drop-menu {
    display: none;
  }
  .navbar .navbar-main .navbar-toggle {
    display: none;
  }
  .navbar .navbar-main .cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--small) var(--medium);
    background-color: var(--accent-500);
    color: var(--background-500);
    text-decoration: none;
    font-family: var(--font-accent);
    font-weight: bold;
    font-size: var(--medium);
  }
  .navbar .navbar-main .cta:hover {
    background-color: var(--accent-700);
    color: var(--background-300);
  }
  .hero-banner {
    position: relative;
    margin-top: calc(-1 * var(--nav-height));
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--font-heading);
    text-align: center;
    background: rgba(24, 148, 210, 0.1);
    margin-bottom: 47px;
  }
  .hero-banner.no-bg::before {
    background: none !important;
  }
  .hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/images/hero-banner.webp") no-repeat center center/cover fixed;
    filter: brightness(0.25);
  }
  .hero-banner::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: calc(100% - 256px);
    right: 0;
    height: 94px;
    background: var(--background-500);
    clip-path: polygon(var(--xxlarge) 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 94px);
  }
  .hero-banner .hero-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--background);
  }
  .hero-banner .hero-banner-content .hero-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: var(--medium);
  }
  .hero-banner .hero-banner-content .hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.5rem;
    margin-bottom: var(--large);
    max-width: 600px;
    color: var(--background-700);
    text-align: center;
  }
  .hero-banner .hero-banner-content .hero-tagline {
    font-family: var(--font-body);
    margin-bottom: var(--xxxxlarge);
    color: var(--background-700);
  }
  #about {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 188px;
  }
  #about:before, #about:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    left: 256px;
    right: 0;
    height: 94px;
    clip-path: polygon(var(--xxlarge) 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 94px);
  }
  #about::before {
    filter: brightness(0.33);
    background: url("/assets/images/waves.webp") no-repeat center center/cover fixed;
  }
  #about::after {
    background: rgba(24, 148, 210, 0.1);
  }
  #about .section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: bold;
  }
  #about .section-title .call-to-action-text {
    font-weight: 1000;
  }
  #about .about-paragraph {
    font-family: var(--font-accent);
    font-size: 0.9rem;
    line-height: 1.7;
  }
  #about .about-paragraph-bottom {
    font-size: var(--xlarge);
  }
  #about .flex-splitter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    gap: var(--large);
    max-width: var(--bp-xlarge);
    margin-bottom: var(--xxxxlarge);
  }
}
@media (min-width: 1441px) and (min-width: 769px) {
  #about .flex-splitter {
    flex-direction: row;
  }
}
@media (min-width: 1441px) {
  #about .flex-splitter .left-split {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--background-500);
    z-index: 1;
  }
  #about .flex-splitter .left-split .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--xlarge);
    font-size: 0.9rem;
  }
  #about .flex-splitter .right-split {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background-500);
    z-index: 0;
  }
  #about .flex-splitter .right-split img {
    width: 100%;
  }
  #why-choose-us {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--background-500);
    padding-bottom: 188px;
    background: rgba(24, 148, 210, 0.1);
  }
  #why-choose-us::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/images/waves.webp") no-repeat center center/cover fixed;
    filter: brightness(0.33);
  }
  #why-choose-us::after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    left: calc(100% - 256px);
    right: 0;
    height: 94px;
    background: var(--background-500);
    clip-path: polygon(var(--xxlarge) 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 94px);
  }
  #why-choose-us .section-subtext {
    position: relative;
    color: var(--background-700);
    text-align: center;
    padding-bottom: var(--medium);
  }
  #why-choose-us .section-subtext:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--background-900), transparent);
  }
  #why-choose-us .flex-splitter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    gap: var(--large);
    max-width: var(--bp-xlarge);
    margin-top: var(--xxxlarge);
  }
}
@media (min-width: 1441px) and (min-width: 769px) {
  #why-choose-us .flex-splitter {
    flex-direction: row;
  }
}
@media (min-width: 1441px) {
  #why-choose-us .flex-splitter * {
    color: var(--background-500);
    flex: 1 0 0;
  }
  #why-choose-us .flex-splitter * .split-card {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    padding: var(--medium);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-icon {
    color: var(--accent-500);
    width: 100%;
    text-align: center;
    flex: 0;
  }
  #why-choose-us .flex-splitter * .split-card .split-card-icon * {
    font-size: var(--xlarge);
    margin-bottom: var(--small);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-title {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
    flex: 0;
    padding-bottom: var(--medium);
    margin-bottom: var(--medium);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-title::after {
    content: "";
    position: absolute;
    display: block;
    left: var(--medium);
    right: var(--medium);
    height: 1px;
    bottom: 0;
    background: linear-gradient(90deg, transparent, var(--background-900), transparent);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body {
    font-family: var(--font-body);
    text-align: center;
    color: var(--text-500);
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body p {
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: 0.9rem;
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body ul {
    list-style: none;
  }
  #why-choose-us .flex-splitter * .split-card .split-card-body ul li:before {
    content: "✓";
  }
  #who-we-help {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 188px;
  }
  #who-we-help:before, #who-we-help:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    left: 256px;
    right: 0;
    height: 94px;
    clip-path: polygon(var(--xxlarge) 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 94px);
  }
  #who-we-help::before {
    filter: brightness(0.33);
    background: url("/assets/images/house.webp") no-repeat center center/cover fixed;
  }
  #who-we-help::after {
    background: rgba(24, 148, 210, 0.1);
  }
  #who-we-help .tiered-grid {
    display: grid;
  }
}
@media (min-width: 1441px) and (min-width: 769px) {
  #who-we-help .tiered-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    gap: var(--large);
    max-width: var(--bp-xlarge);
  }
}
@media (min-width: 1441px) {
  #who-we-help .tiered-grid .tiered-grid-item {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--background-500);
    padding: var(--large);
    box-shadow: var(--box-shadow);
    padding-block: calc(100% - 200px);
    overflow: hidden;
    align-content: stretch;
    flex-direction: column;
    justify-content: center;
    margin-top: var(--xxlarge);
  }
  #who-we-help .tiered-grid .tiered-grid-item:hover .tiered-grid-image {
    transform: scale(1.1);
  }
  #who-we-help .tiered-grid .tiered-grid-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(30, 30, 30, 0.75);
    z-index: 1;
  }
  #who-we-help .tiered-grid .tiered-grid-item .tiered-grid-image {
    position: absolute;
    height: 100%;
    -o-object-fit: scale-down;
       object-fit: scale-down;
    z-index: 0;
    transition: transform 2s ease;
  }
  #who-we-help .tiered-grid .tiered-grid-item .tiered-grid-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: var(--xlarge);
    color: var(--background-500);
    z-index: 2;
  }
  #who-we-help .tiered-grid .tiered-grid-item .tiered-grid-description {
    font-family: var(--font-body);
    line-height: 1.7;
    text-align: center;
    color: var(--background-500);
    z-index: 2;
    font-size: 0.9rem;
  }
  main:has(#services) #contact {
    background: var(--background-500);
    color: var(--text-500);
    padding-bottom: 141px;
  }
  main:has(#services) #contact:before {
    background: var(--background-500);
  }
  main:has(#services) #contact:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    left: 256px;
    right: 0;
    height: 94px;
    clip-path: polygon(var(--xxlarge) 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 94px);
  }
  main:has(#services) #contact:after {
    background: var(--accent-500);
  }
  main:has(#services) #contact .section-title {
    color: var(--text-500);
  }
  main:has(#services) #contact .section-subtext {
    color: var(--text-700);
  }
  main:has(#services) #contact #contact-form:hover:before, main:has(#services) #contact #contact-form:focus-within:before {
    --gradient-color: transparent;
  }
  main:has(#services) #contact #contact-form:before {
    animation-play-state: paused;
  }
  main:has(#services) #contact #contact-form .grecaptcha-badge {
    box-shadow: none !important;
  }
  main:has(#services) #contact #contact-form .form-group label {
    color: var(--text-500);
    text-align: left;
  }
  main:has(#services) #contact #contact-form .form-group input,
  main:has(#services) #contact #contact-form .form-group textarea {
    text-align: left;
    background: rgba(30, 30, 30, 0.1);
    color: var(--text-500);
  }
  main:has(#services) #contact #contact-form .form-group input::-moz-placeholder, main:has(#services) #contact #contact-form .form-group textarea::-moz-placeholder {
    color: var(--text-700);
  }
  main:has(#services) #contact #contact-form .form-group input::placeholder,
  main:has(#services) #contact #contact-form .form-group textarea::placeholder {
    color: var(--text-700);
  }
  main:has(#services) #contact #contact-form .form-group input:active, main:has(#services) #contact #contact-form .form-group input:focus,
  main:has(#services) #contact #contact-form .form-group textarea:active,
  main:has(#services) #contact #contact-form .form-group textarea:focus {
    border-color: var(--accent-500);
    background: rgba(0, 0, 0, 0.1);
  }
  main:has(#services) #contact #contact-form .form-group button {
    background: var(--accent-500);
    color: var(--background-500);
  }
  main:has(#services) #contact #contact-form .form-group button:hover {
    background: var(--accent-700);
    color: var(--background-500);
  }
  #contact {
    min-height: 50vh;
    padding-bottom: var(--xxxxlarge);
    background: rgba(24, 148, 210, 0.1);
  }
  #contact .section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--background-500);
    text-align: center;
  }
  #contact .section-subtext {
    position: relative;
    font-family: var(--font-accent);
    font-size: var(--small);
    line-height: 1.7;
    color: var(--background-700);
    margin-bottom: var(--large);
    text-align: center;
  }
  #contact .section-subtext::before {
    content: "";
    position: absolute;
    display: block;
    left: var(--medium);
    right: var(--medium);
    height: 2px;
    bottom: calc(-1 * var(--large));
    background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
  }
  #contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/images/house.webp") no-repeat center center/cover fixed;
    filter: brightness(0.33);
  }
  #contact::after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    left: calc(100% - 256px);
    right: 0;
    height: 94px;
    background: var(--accent-500);
    clip-path: polygon(var(--xxlarge) 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 94px);
  }
  #services {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
  }
  #services::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: calc(100% - 256px);
    right: 0;
    height: 94px;
    background: var(--background-500);
    z-index: 3;
    clip-path: polygon(var(--xxlarge) 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 94px);
  }
  #services .hero-title,
  #services .btn.btn-primary.cta {
    z-index: 3;
  }
  #services .hero-title {
    position: absolute;
    top: calc(var(--nav-height) + var(--xxxxlarge));
  }
  #services .btn.btn-primary.cta {
    position: absolute;
    bottom: var(--xxxxlarge);
  }
  #services .image-card-splitter {
    padding-top: var(--nav-height);
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: row;
    align-content: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    background: orange;
    height: 100%;
  }
  #services .image-card-splitter .split-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--xxxlarge);
    position: relative;
    left: 0;
    flex: 1 0 25%;
    height: 100%;
    z-index: 2;
    filter: drop-shadow(calc(-1 * var(--tiny)) 0 0 black);
  }
  #services .image-card-splitter .split-card:before {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
    content: "";
    position: absolute;
    inset: -25%;
    left: -12.5%;
    z-index: -1;
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 0% 100%);
    filter: brightness(0.33);
    transition: all calc(var(--magic-number-s) * 5) ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
  }
  #services .image-card-splitter .split-card:first-of-type:before {
    clip-path: none !important;
  }
  #services .image-card-splitter .split-card:hover:before {
    background-size: auto 101%;
  }
  #services .image-card-splitter .split-card.split-card-plumbing:before {
    background-image: url("/assets/images/plumbing.webp");
  }
  #services .image-card-splitter .split-card.split-card-heating:before {
    background-image: url("/assets/images/heating.webp");
  }
  #services .image-card-splitter .split-card.split-card-pumps:before {
    background-image: url("/assets/images/pumps.webp");
  }
  #services .image-card-splitter .split-card.split-card-special:before {
    background-image: url("/assets/images/specialty-services.webp");
  }
  #services .image-card-splitter .split-card .split-card-title {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
    flex: 0;
    padding-bottom: var(--medium);
    margin-bottom: var(--medium);
  }
  #services .image-card-splitter .split-card p {
    position: relative;
    z-index: inherit;
    font-family: var(--font-body);
    line-height: 1.7;
  }
  main:has(.hero-splitter) .hero-banner {
    margin-bottom: 0;
  }
  main:has(.hero-splitter) .hero-banner:before {
    background-image: url("/assets/images/house.webp");
  }
  main:has(.hero-splitter) .hero-banner:after {
    background-color: var(--accent-500);
  }
  main:has(.hero-splitter) .hero-splitter {
    position: relative;
    top: calc(var(--nav-height) / 2);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
  }
  main:has(.hero-splitter) .hero-splitter .left,
  main:has(.hero-splitter) .hero-splitter .right {
    flex: 1 0 50%;
    max-width: 33vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--large);
    text-align: left;
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper {
    width: 100%;
    padding: var(--small) var(--medium);
    -webkit-backdrop-filter: blur(var(--medium));
            backdrop-filter: blur(var(--medium));
    --gradient-color: rgba(244, 248, 251, 0.1);
    --gradient-rotation: 0deg;
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper:hover:before, main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper:focus-within:before {
    --gradient-color: rgba(24, 148, 210, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper:before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;
    transition: all var(--magic-number-s) ease, --gradient-color var(--magic-number-s) ease, --gradient-rotation var(--magic-number-s) ease;
    background: conic-gradient(from var(--gradient-rotation), rgba(244, 248, 251, 0.1) 0%, var(--gradient-color) 20%, var(--gradient-color) 40%, rgba(244, 248, 251, 0.1) 60%, rgba(244, 248, 251, 0.1) 100%);
    --border-size: 1px;
    clip-path: polygon(0% 0%, 0% 100%, var(--border-size) 100%, var(--border-size) var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) calc(100% - var(--border-size)), var(--border-size) calc(100% - var(--border-size)), var(--border-size) 100%, 100% 100%, 100% 0%);
    animation: gradient-rotation calc(var(--magic-number-s) * 10) linear infinite;
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper .hero-title {
    position: relative;
    font-size: 2rem;
    font-family: var(--font-heading);
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--small);
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper .hero-description {
    position: relative;
    font-size: 0.9rem;
    line-height: 1.7;
    padding-top: var(--medium);
    color: var(--background-500);
    text-align: flex-start;
  }
  main:has(.hero-splitter) .hero-splitter .left .hero-text-wrapper .hero-description:first-of-type::before {
    content: "";
    position: absolute;
    display: block;
    left: var(--medium);
    right: var(--medium);
    height: 1px;
    top: 0;
    background: linear-gradient(90deg, transparent, var(--background-900), transparent);
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--large);
    width: 100%;
    margin-block: auto;
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--small);
    padding: var(--small) var(--medium);
    list-style: none;
    font-family: var(--font-heading);
    font-size: var(--small);
    -webkit-backdrop-filter: blur(var(--small));
            backdrop-filter: blur(var(--small));
    transition: all var(--magic-number-s) ease;
    --gradient-color: rgba(244, 248, 251, 0.1);
    --gradient-rotation: 0deg;
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:hover:before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:focus-within:before {
    --gradient-color: rgba(245, 156, 0, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(2):hover::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(2):focus-within::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(3):hover::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(3):focus-within::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(6):hover::before, main:has(.hero-splitter) .hero-splitter .left .badge-list li:nth-child(6):focus-within::before {
    --gradient-color: rgba(24, 148, 210, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;
    transition: all var(--magic-number-s) ease, --gradient-color var(--magic-number-s) ease, --gradient-rotation var(--magic-number-s) ease;
    background: conic-gradient(from var(--gradient-rotation), rgba(244, 248, 251, 0.1) 0%, var(--gradient-color) 20%, var(--gradient-color) 40%, rgba(244, 248, 251, 0.1) 60%, rgba(244, 248, 251, 0.1) 100%);
    --border-size: 1px;
    clip-path: polygon(0% 0%, 0% 100%, var(--border-size) 100%, var(--border-size) var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) calc(100% - var(--border-size)), var(--border-size) calc(100% - var(--border-size)), var(--border-size) 100%, 100% 100%, 100% 0%);
    animation: gradient-rotation calc(var(--magic-number-s) * 10) linear infinite;
  }
  main:has(.hero-splitter) .hero-splitter .left .badge-list li:first-child {
    font-size: var(--medium);
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency {
    text-align: center;
    padding: var(--small) var(--medium);
    width: 100%;
    -webkit-backdrop-filter: blur(var(--small));
            backdrop-filter: blur(var(--small));
    --gradient-color: rgba(244, 248, 251, 0.1);
    --gradient-rotation: 0deg;
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency:hover:before {
    --gradient-color: rgba(245, 156, 0, 0.5);
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency:before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;
    transition: all var(--magic-number-s) ease, --gradient-color var(--magic-number-s) ease, --gradient-rotation var(--magic-number-s) ease;
    background: conic-gradient(from var(--gradient-rotation), rgba(244, 248, 251, 0.1) 0%, var(--gradient-color) 20%, var(--gradient-color) 40%, rgba(244, 248, 251, 0.1) 60%, rgba(244, 248, 251, 0.1) 100%);
    --border-size: 1px;
    clip-path: polygon(0% 0%, 0% 100%, var(--border-size) 100%, var(--border-size) var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) calc(100% - var(--border-size)), var(--border-size) calc(100% - var(--border-size)), var(--border-size) 100%, 100% 100%, 100% 0%);
    animation: gradient-rotation calc(var(--magic-number-s) * 10) linear infinite;
  }
  main:has(.hero-splitter) .hero-splitter .left .emergency a {
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
  }
  footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background: var(--accent-500);
    color: var(--background-500);
    padding: var(--large);
    padding-bottom: var(--xtiny);
  }
}
@media (min-width: 1441px) and (min-width: 769px) {
  footer {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto auto var(--xxlarge);
  }
}
@media (min-width: 1441px) {
  footer * {
    font-family: var(--font-heading);
    color: var(--background-500);
    text-decoration: none;
    font-size: var(--small);
  }
  footer *:is(a) {
    font-weight: bold;
  }
  footer *:is(p) {
    font-size: var(--small) !important;
  }
  footer footer p {
    font-size: var(--small);
  }
  footer .footer-logo {
    grid-column: 1/span 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: calc(var(--xxxxlarge) * 2);
  }
  footer .footer-logo img {
    width: 100%;
    text-align: center;
  }
  footer .footer-subtext {
    grid-column: 1/span 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  footer .footer-subtext p {
    margin-top: var(--small);
    line-height: 1.5;
    font-size: var(--small);
  }
  footer .footer-header {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    width: 100%;
    padding: var(--small);
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    background: var(--background-500);
    color: var(--accent-500);
    padding-left: var(--xlarge);
  }
  footer .footer-header::before {
    content: "";
    position: absolute;
    inset: -1px;
    left: -0.5px;
    width: var(--large);
    height: 100%;
    background-color: var(--accent-500);
    clip-path: polygon(0% 0%, 0% 100%, 100% 0);
  }
  footer .footer-link-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
  }
  footer .footer-info-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  footer .footer-info-item > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
  }
  footer .footer-links {
    grid-column: 3;
    grid-row: 1/span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--medium);
    padding-left: var(--large);
  }
  footer .footer-social-media {
    grid-column: 4;
    grid-row: 1/span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--medium);
    padding-left: var(--large);
  }
  footer .footer-info {
    grid-column: 5;
    grid-row: 1/span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--medium);
    padding-left: var(--large);
  }
  footer .footer-map {
    grid-column: 6/span 3;
    grid-row: 1/span 2;
    padding-left: var(--large);
  }
  footer .footer-copyright {
    grid-column: 1/span 2;
    grid-row: 4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-heading);
    color: var(--background-500);
    text-decoration: none;
    font-size: var(--small);
  }
  footer .footer-time {
    grid-column: 3;
    grid-row: 4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--tiny);
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
    padding-left: var(--large);
  }
  footer .footer-time p {
    font-size: var(--small);
  }
  footer .footer-status {
    grid-column: 4;
    grid-row: 4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--tiny);
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
    padding-left: var(--large);
  }
  footer .footer-status p {
    font-size: var(--small);
  }
  footer .footer-payments {
    grid-column: 5/span 2;
    grid-row: 4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--tiny);
    align-items: center;
    justify-content: flex-start;
    gap: var(--tiny);
    padding-left: var(--large);
  }
  footer .footer-payments p {
    font-size: var(--small);
  }
  footer .footer-powered-by {
    grid-column: 8;
    grid-row: 4;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: var(--xxtiny);
  }
  footer .footer-powered-by * {
    font-family: var(--font-heading);
    color: var(--background-500);
    text-decoration: none;
    font-size: var(--small);
  }
  footer .footer-powered-by *:is(a) {
    font-weight: bold;
  }
  footer .footer-separator {
    grid-column: 1/span 8;
    grid-row: 3;
    height: 1px;
    background-color: var(--background-500);
    margin-top: var(--large);
  }
  #contact-form {
    width: 600px;
  }
}
#contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--medium);
  padding: var(--large);
  -webkit-backdrop-filter: blur(var(--medium));
          backdrop-filter: blur(var(--medium));
  overflow: hidden;
  --border: rgba(244, 248, 251, 0.1) solid 1px;
  --gradient-color: rgba(244, 248, 251, 0.1);
  --gradient-rotation: 0deg;
}
#contact-form:hover:before, #contact-form:focus-within:before {
  --gradient-color: rgba(24, 148, 210, 0.4);
}
#contact-form:before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -2;
  transition: all var(--magic-number-s) ease, --gradient-color var(--magic-number-s) ease, --gradient-rotation var(--magic-number-s) ease;
  background: conic-gradient(from var(--gradient-rotation), rgba(244, 248, 251, 0.1) 0%, var(--gradient-color) 20%, var(--gradient-color) 40%, rgba(244, 248, 251, 0.1) 60%, rgba(244, 248, 251, 0.1) 100%);
  --border-size: 1px;
  clip-path: polygon(0% 0%, 0% 100%, var(--border-size) 100%, var(--border-size) var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) calc(100% - var(--border-size)), var(--border-size) calc(100% - var(--border-size)), var(--border-size) 100%, 100% 100%, 100% 0%);
  animation: gradient-rotation calc(var(--magic-number-s) * 10) linear infinite;
}
#contact-form .grecaptcha-badge {
  display: none !important;
  position: absolute !important;
  bottom: var(--large) !important;
}
#contact-form .form-group {
  display: flex;
  flex-direction: column;
}
#contact-form .form-group:last-of-type {
  padding-top: var(--small);
}
#contact-form .form-group label {
  font-family: var(--font-heading);
  color: var(--background-500);
  margin-bottom: var(--small);
}
#contact-form .form-group input,
#contact-form .form-group textarea {
  padding: 0.5rem;
  background: rgba(30, 30, 30, 0.1);
  border: var(--border);
  color: var(--background-500);
  font-family: var(--font-body);
  transition: all var(--magic-number-s) ease;
}
#contact-form .form-group input::-moz-placeholder, #contact-form .form-group textarea::-moz-placeholder {
  color: var(--background-700);
}
#contact-form .form-group input::placeholder,
#contact-form .form-group textarea::placeholder {
  color: var(--background-700);
}
#contact-form .form-group input:active, #contact-form .form-group input:focus,
#contact-form .form-group textarea:active,
#contact-form .form-group textarea:focus {
  border-color: var(--accent-500);
  background: rgba(0, 0, 0, 0.1);
}
#contact-form .form-group button {
  cursor: pointer;
  width: auto;
  align-self: center;
  padding-inline: var(--large);
  transition: all var(--magic-number-s) ease;
}
#contact-form .form-group button :first-child {
  margin-right: var(--tiny);
  font-size: var(--large);
}
#contact-form .form-group button:hover {
  background: var(--accent-500);
  color: var(--background-500);
}
#contact-form .form-group button:active {
  background: var(--accent-700);
  color: var(--background-500);
}

.modal {
  display: none;
  justify-content: center;
  align-items: center;
  padding: var(--large);
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
  pointer-events: all;
  opacity: 0;
  transition: opacity var(--magic-number-s) ease;
}
.modal[aria-hidden=true] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.modal.aos-animate {
  display: flex;
  opacity: 1;
}
.modal .modal-content {
  background: var(--background-500, #fff);
  color: var(--text-500, #222);
  padding: var(--large);
  border-radius: var(--medium);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  position: relative;
}
.modal .modal-content .modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.modal .modal-content .modal-header .modal-title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-500);
  margin-right: var(--medium);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.modal .modal-content .modal-header .close {
  margin-left: var(--small);
}
.modal .modal-content .modal-body .modal-message {
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--text-500);
  margin-bottom: var(--medium);
  text-align: center;
}
.modal .modal-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--small);
  margin-top: var(--medium);
}
.modal .modal-footer .close {
  background: var(--accent-500);
  color: var(--background-500);
}
.modal .close {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}/*# sourceMappingURL=index.css.map */