@property --primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #F15D22;
}
@property --secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #00562F;
}
@property --tertiary {
  syntax: '<color>';
  inherits: true;
  initial-value: #2E953E;
}

@property --light {
  syntax: '<color>';
  inherits: true;
  initial-value: #B9C0BB;
}

@property --dark {
  syntax: '<color>';
  inherits: true;
  initial-value: #141916; 
}

@property --white {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --black {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000;
}
@property --body-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --body-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000;
}
@property --link-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #F15D22;
}
@property --link-hover-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #2E953E;
}

@property --button-background {
  syntax: '<color>';
  inherits: true;
  initial-value: #F15D22;
}
@property --button-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}
@property --button-hover-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #B9C0BB;
}
@property --button-hover-background {
  syntax: '<color>';
  inherits: true;
  initial-value: #141916;
}
@property --button-border-radius {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 40px;
}
@property --overlay {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255, 255, 255 , .7);
}

@layer variables {
  :root {
    /* Colors */
    --primary: #F15D22;
    --secondary: #00562F;
    --tertiary: #2E953E;
    --light: #B9C0BB;
    --dark: #141916;
    --white: #ffffff;
    --black: #000000;
    --overlay: rgba( 255, 255, 255, .7);
    --body-color: var(--black);
    --body-bg: var(--white);

    /* Borders */
    --border-color: var(--secondary);
    --border-width: 2px;
    --table-border-color: var(--light);
    --table-border-width: 2px;
    /* Links */
    --link-color: var(--primary);
    --link-hover-color: var(--tertiary);
    --link-decoration: none;
    --link-hover-decoration: underline;
    --link-font-family: var(--heading-font-family);
    --link-font-weight: var(--heading-font-weight);
    
    /* Fonts */
    --heading-font-family:"Montserrat", system-ui, sans-serif;
    --heading-font-weight: 700;

    --body-font-family: "Montserrat", system-ui, sans-serif;
    --base-font-size: 18px;
    --heading-scaling: 1.200;
    
    --responsive-font-scaling: 1.5vw;
    --responsive-font-scaling-max: 2rem;

    --font-size-sm: calc( 1rem / 1.200 );
    --font-size-6: calc( 1rem * 1.200 );
    --font-size-5: calc( var(--font-size-6) * 1.200 );
    --font-size-4: calc( var(--font-size-5) * 1.200 );
    --font-size-3: calc( var(--font-size-4) * 1.200 );
    --font-size-2: calc( var(--font-size-3) * 1.200 );
    --font-size-1: calc( var(--font-size-2) * 1.200 );

    /* Form */
    --formfield-color: var(--dark);
    --formfield-background: var(--white);
    --formfield-border-color: var(--secondary);
    --formfield-border-focus-color: var(--light);
    --formfield-radio-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    --formfield-checkbox-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --formfield-select-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23191C1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --formfield-check-background-color-checked: var(--primary);
    --formfield-check-background-color: var(--white);    
    /* Max Width */
    --max-width: calc(76ch + 4rem);
    --base-padding: 2rem; 
    --base-gap: 2rem;
    --base-columns: 3;
    --card-width-min: 17.5rem;
    --card-width-default: calc((100% - (var(--base-columns) - 1) * var(--base-gap) ) / var(--base-columns) );
    
    /* Main Nav */
    --mobile--title--color: var(--black);
    --mobile--title--background: transparent;
    --mobile--title--font: var(--heading-font-family);
    --mobile--title--font-size: var(--font-size-6);
    --mobile--title--font-weight: var(--heading-font-weight, 700);
    --mobile--font-family: var(--mobile--font-family);
    --mobile--font-weight: var(--mobile--font-weight);
    --mobile--nav-width: var(--card-width-min);
    --mobile--background: transparent;
    --mobile--background--hover: var(--white);
    --mobile--color: var(--black);
    --mobile--color--hover: var(--secondary);
    --mobile--border-color: var(--white);
    --mobile--border-color--hover: var(--mobile--border-color);
    --mobile--button--color: var(--black);
    --mobile--button--color--hover: var(--secondary);
    --mobile--button--background: transparent;
    --mobile--button--background--hover: var(--white);
    --mobile--button--border-color: var(--mobile--border-color);
    --mobile--button--border-color--hover: var(--mobile--border-color);


    /* Transitions */
    --transition-function: ease-in-out;
    --transition-time: .3s;
    --transition-color-function: ease-in-out;
    --transition-color-time: .3s;
    --transition-default: 
    all var(--transition-time) var(--transition-function), 
    color var(--transition-color-time) var(--transition-color-function),
    background-color var(--transition-color-time) var(--transition-color-function),
    border-color var(--transition-color-time) var(--transition-color-function);
    @supports (transition-timing-function: linear(1,2,3) ){
      --transition-function: linear(0, 1 44.7%, 0.898 51.8%, 0.874 55.1%, 0.866 58.4%, 0.888 64.3%, 1 77.4%, 0.98 84.5%, 1);
      --transition-time: .4s;
    }
  }
  @media( max-width: 940px ) {
    :root {
      --base-columns: 2;
    }
  }
  @media( max-width: 550px ) {
    :root {
      --base-columns: 1;
    }
  }
}
@layer reboot {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    color-scheme: light;
  }

  :root {
    interpolate-size: allow-keywords;
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
  
  body {
    margin: 0;
    font-family: var(--body-font-family);
    line-height: 1.5;
    background-color: var(--body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: var(--border-width) solid;
    opacity: .25;
  }
  
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
  }
  
  address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
  }
  
  ol,
  ul {
    padding-left: 2rem;
  }
  
  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  
  ol ol,
  ul ul,
  ol ul,
  ul ol {
    margin-bottom: 0;
  }
  
  dt {
    font-weight: 700;
  }
  
  dd {
    margin-bottom: .5rem;
    margin-left: 0;
  }
  
  b,
  strong {
    font-weight: 700;
  }
  
  
  small {
    font-size: var(--font-size-small);
  }
  
  sub,
  sup {
    position: relative;
    line-height: 0;
    vertical-align: baseline;
    font-size: var(--font-size-small);
  }
  
  sub { bottom: -.25em; }
  sup { top: -.5em; }
  
  a:not([href]):not([class]),
  a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
  }
  
  figure {
    margin: 0 0 1rem;
  }
  
  img,
  picture,
  svg {
    vertical-align: middle;
    display: block;
    max-width: 100%;
  }
  
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  
  th {
    font-weight: bold;
    text-align: inherit;
    text-align: -webkit-match-parent;
  }
  
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }
  
  label {
    display: inline-block;
  }
  
  button {
    border-radius: 0;
  }
  
  
  button:focus:not(:focus-visible) {
    outline: 0;
  }
  
  input,
  button,
  select,
  optgroup,
  textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  
  button,
  select {
    text-transform: none;
  }
  
  [role="button"] {
    cursor: pointer;
  }
  
  select {
    word-wrap: normal;
  }
  select:disabled {
    opacity: 1;
  }
  
  [list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
    display: none !important;
  }
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  button:not(:disabled),
  [type="button"]:not(:disabled),
  [type="reset"]:not(:disabled),
  [type="submit"]:not(:disabled) {
    cursor: pointer;
  }
  
  
  ::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }
  
  
  textarea {
    resize: vertical;
    field-sizing: content;
  }
  
  fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  legend {
    float: left;
    width: 100%;
    padding: 0;
    line-height: inherit;
  
    + * {
      clear: left;
    }
  }
  
  ::-webkit-datetime-edit-fields-wrapper,
  ::-webkit-datetime-edit-text,
  ::-webkit-datetime-edit-minute,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-year-field {
    padding: 0;
  }
  
  ::-webkit-inner-spin-button {
    height: auto;
  }
  
  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }
  
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  ::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  
  ::file-selector-button {
    font: inherit;
    -webkit-appearance: button;
  }
  
  output {
    display: inline-block;
  }
  
  iframe {
    border: 0;
  }
  
  summary {
    display: list-item;
    cursor: pointer;
  }
  
  progress {
    vertical-align: baseline;
  }
  
  
  [hidden] {
    display: none !important;
  }  
}
@layer page-transitions {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
    ::view-transition-group(*) {
      animation-duration: 1s;
    }
    header.site__header {
      view-transition-name: --header;
    }
    .hero__module {
      view-transition-name: --hero;
    }
    footer.site__footer {
      view-transition-name: --footer;
    }
    main {
      view-transition-name: --main;
    }
  }
}
@layer basestyles {
  .content-wrapper {
    max-width: var(--max-width);
    width: auto;
    width: -webkit-fill-available;
    margin-inline: auto;
    height: max-content;
  }
}
@layer hubspot-hacks {
  .header-container {
    .span12 {
      min-height: 0;
    }
  }
  .span12 {
    min-height: 0;
  }
  .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
  }
  .body-content {
    .hs_cos_wrapper_type_rich_text {
      display: block;
      max-width: var(--max-width);
      margin: 8rem auto;
      padding: 0 1rem;
    }
  }
  
  video {
    max-width: 100%;
    height: auto
  }
  
  .hs-responsive-embed {
    position: relative;
    height: auto;
    overflow: hidden;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0
  }
  
  .hs-responsive-embed iframe,
  .hs-responsive-embed object,
  .hs-responsive-embed embed {
    width: 100%;
    height: 100%;
    border: 0
  }
  
  .hs-responsive-embed,
  .hs-responsive-embed.hs-responsive-embed-youtube,
  .hs-responsive-embed.hs-responsive-embed-wistia,
  .hs-responsive-embed.hs-responsive-embed-vimeo {
    padding-bottom: 2%
  }
  
  .hs-responsive-embed.hs-responsive-embed-instagram {
    padding-bottom: 116.01%
  }
  
  .hs-responsive-embed.hs-responsive-embed-pinterest {
    height: auto;
    overflow: visible;
    padding: 0
  }
  
  .hs-responsive-embed.hs-responsive-embed-pinterest iframe {
    position: static;
    width: auto;
    height: auto
  }
  
  iframe[src^="http://www.slideshare.net/slideshow/embed_code/"] {
    width: 100%;
    max-width: 100%
  }
  
  @media(max-width:568px) {
    iframe {
        max-width: 100%
    }
  }
  
  .widget-type-space {
    visibility: hidden
  }
  
  .hs-author-listing-header {
    margin: 0 0 .75em 0
  }
  
  .hs-author-social-links {
    display: inline-block
  }
  
  .hs-author-social-links a.hs-author-social-link {
    width: 24px;
    height: 24px;
    border-width: 0px;
    border: 0px;
    line-height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
    text-indent: -99999px
  }

  
  .hs-search-results__title {
    font-weight: var(--headings-font-weight, 400);
    font-size: var(--font-size-4);
    font-family: var(--headings-font-family);
  }
  .hs-search-results__listing li {
    @supports ( margin-block-end: 4rem ) {
      margin-block-end: 4rem;
    }
    @supports not ( margin-block-end: 4rem ) {
      margin-bottom: 4rem;
    }
  }
}


@layer helpers {
  
  [class *=bg-] {
    background-color: var(--section-background-color, var(--body-bg));
    --body-color: var(--section-text-color);
    --link-color: var(--section-link-color);
    --link-hover-color: var(--section-link-hover-color);
  }

  .bg-white {
    --section-background-color: var(--white);
  --section-text-color: var(--black);
  --section-link-color: var(--primary);
  --section-link-hover-color: var(--tertiary);
  }
  .bg-light {
    --section-background-color: var(--light);
  --section-text-color: var(--black);
  --section-link-color: var(--secondary);
  --section-link-hover-color: var(--secondary);
  }
  .bg-dark {
    --section-background-color: var(--dark);
  --section-text-color: var(--white);
  --section-link-color: var(--primary);
  --section-link-hover-color: var(--tertiary);
  }
  .bg-black {
    --section-background-color: var(--black);
  --section-text-color: var(--white);
  --section-link-color: var(--primary);
  --section-link-hover-color: var(--tertiary);
  }
  .bg-primary {
    --section-background-color: var(--primary);
  --section-text-color: var(--white);
  --section-link-color: var(--black);
  --section-link-hover-color: var(--black);
  }
  .bg-primary .hs-button {
    --button-background: var(--black);
  --button-color: var(--white);
  --button-hover-color: var(--light);
  --button-hover-background: var(--dark);
  }
  .bg-secondary {
    --section-background-color: var(--secondary);
  --section-text-color: var(--white);
  --section-link-color: var(--light);
  --section-link-hover-color: var(--light);
  }
  .bg-tertiary {
    --section-background-color: var(--tertiary);
  --section-text-color: var(--black);
  --section-link-color: var(--white);
  --section-link-hover-color: var(--white);
  }
  .bg-gradient {
    --section-background-color: var(--tertiary);
  --section-text-color: var(--white);
  --section-link-color: var(--white);
  --section-link-hover-color: var(--white);
    background-image: linear-gradient(var(--tertiary), var(--secondary) );
  }

  .my-0, .mt-0 { margin-top: 0rem }
  .my-1, .mt-1 { margin-top: 1rem }
  .my-2, .mt-2 { margin-top: 2rem }
  .my-3, .mt-3 { margin-top: 3rem }
  .my-4, .mt-4 { margin-top: 4rem }
  .my-5, .mt-5 { margin-top: 5rem }
  .my-0, .mb-0 { margin-bottom: 0rem }
  .my-1, .mb-1 { margin-bottom: 1rem }
  .my-2, .mb-2 { margin-bottom: 2rem }
  .my-3, .mb-3 { margin-bottom: 3rem }
  .my-4, .mb-4 { margin-bottom: 4rem }
  .my-5, .mb-5 { margin-bottom: 5rem }
  .py-0, .pt-0 { padding-top: 0rem }
  .py-1, .pt-1 { padding-top: 1rem }
  .py-2, .pt-2 { padding-top: 2rem }
  .py-3, .pt-3 { padding-top: 3rem }
  .py-4, .pt-4 { padding-top: 4rem }
  .py-5, .pt-5 { padding-top: 5rem }
  .py-0, .pb-0 { padding-bottom: 0rem }
  .py-1, .pb-1 { padding-bottom: 1rem }
  .py-2, .pb-2 { padding-bottom: 2rem }
  .py-3, .pb-3 { padding-bottom: 3rem }
  .py-4, .pb-4 { padding-bottom: 4rem }
  .py-5, .pb-5 { padding-bottom: 5rem }
  .p-0 { padding: 0rem; }
  .p-1 { padding: 1rem; }
  .p-2 { padding: 2rem; }
  .p-3 { padding: 3rem; }
  .p-4 { padding: 4rem; }
  .p-5 { padding: 5rem; }


  .visually-hidden,
  .visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .visually-hidden:not(caption),
  .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
    position: absolute !important;
  }

  .is-hidden {
    display: none;
  }

  .stretched-link:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
  }

}
@layer reduced-motion {
  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none;
    }
  }
}
@layer layout {
  section {
    display: grid;
    gap: 2rem;
    align-items: stretch;
    grid-template-columns:
      [page-start] 
      0rem
      [content-start one-six-start one-two-start]
      1fr
      [one-six-end two-six-start]
      1fr
      [two-six-end three-six-start]
      1fr
      [three-six-end one-two-end two-two-start four-six-start]
      1fr
      [four-six-end five-six-start]
      1fr
      [five-six-end six-six-start]
      1fr
      [six-six-end two-two-end content-end]
      0rem
      [page-end]
    ;
  }
  @media (max-width: 800px) {
    section {
      grid-template-columns: 
        [page-start] 
        0
        [content-start one-six-start one-two-start two-two-start two-six-start three-six-start four-six-start five-six-start six-six-start]
        1fr
        [one-six-end two-six-end three-six-end one-two-end four-six-end five-six-end six-six-end two-two-end content-end]
        0
        [page-end]
    }
  }
}
@layer typography {
  :root {
    font-size: var(--base-font-size);
    font-size: clamp(1rem, var(--responsive-font-scaling, 1.5vw), var(--responsive-font-scaling-max, 2rem) );
    text-wrap: pretty;
    color: var(--body-color);
  }
  
  p {
    color: var(--body-color);
  }
  p:last-child {
    margin-bottom: 0;
  }
  p:first-child {
    margin-top: 0;
  }
  h1, 
  h2, 
  h3, 
  h4, 
  h5 {
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: var(--heading-font-family, sans-serif);
    font-style: var(--heading-font-style, normal);
    font-weight: var(--heading-font-weight, 700);
    line-height: var(--heading-line-height, 1.2);
    color: var(--section-color, var(--body-color));
  }
  h1 {
    font-size: var(--font-size-1);
  }  
  h2 {
    font-size: var(--font-size-2);
  }
  h3 {
    font-size: var(--font-size-3);
  }
  h4 {
    font-size: var(--font-size-4);
  }
  h5 {
    font-size: var(--font-size-5);
  }
  h6 {
    font-size: var(--font-size-6);
  }
  a {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
    font-family: var(--link-font-family);
    font-weight: var(--link-font-weight);
    text-underline-offset: .5rem;
    transition: var(--transition-default);
    transition-behavior: allow-discrete;    
  }
  a:hover, a:active {
    color: var(--link-hover-color);
    text-decoration: var(--link-hover-decoration);
    text-underline-offset: 0;
  }
  p:empty,
  li:empty,
  h1:empty,
  h2:empty,
  h3:empty,
  h4:empty,
  h5:empty,
  h6:empty {
    display: none;
  }
}
blockquote {
  margin-inline: auto;
  display: grid;
  grid-template-rows: max-content 1fr;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
}

blockquote .testimonial__content {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  font-style: italic;
  font-weight: 400;
  font-family: "Georgia", serif;
}

blockquote .byline {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  margin-block: auto;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: var(--font-size-6);
}
blockquote .image {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  margin: 2px;
}
blockquote .image img {
  width: 5rem;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 0 0 2px var(--secondary);
}


@layer buttons {
  .btn, .hs-button {
    background: var(--button-background, var(--primary));
    color: var(--button-color, var(--white));
    padding: .5rem 1rem .25rem;
    margin: .25rem .125rem;
    display: inline-block;
    font-family: var(--heading-font-family);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: var(--button-border-radius);
    border: none;
    transition: var(--transition-default);
  }
  @supports (text-box: trim-both cap alphabetic) {
    .btn, .hs-button {
      text-box: trim-both cap alphabetic;
      padding: .75rem 1rem;
    }
  }
  .btn:hover,
  .btn:active,
  .btn:focus,
  .btn:focus-visible,
  .hs-button:hover,
  .hs-button:active,
  .hs-button:focus,
  .hs-button:focus-visible {
    text-decoration: none;
    transform: scale(.9);
    --button-background: var(--button-hover-background);
    --button-color: var(--button-hover-color);
  }

  .btn:disabled {
    opacity: 50%;
    pointer-events: none;
  }
  .btn-link {
    --button-background: transparent;
  --button-color: var(--link-color);
  --button-hover-color: var(--link-hover-color);
  --button-hover-background: transparent;
    text-decoration: var(--link-decoration);
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
  }
  .stretched-link.btn:hover,
  .stretched-link.btn:active,
  .stretched-link.btn:focus,
  .stretched-link.btn:focus-visible,
  .stretched-link.hs-button:hover,
  .stretched-link.hs-button:active,
  .stretched-link.hs-button:focus,
  .stretched-link.hs-button:focus-visible {
    transform: unset;
  }

  .btn-primary, .hs-button {
    --button-background: var(--primary);
  --button-color: var(--white);
  --button-hover-color: var(--light);
  --button-hover-background: var(--dark);
  }
  .btn-secondary {
    --button-background: var(--secondary);
  --button-color: var(--white);
  --button-hover-color: var(--dark);
  --button-hover-background: var(--tertiary);
  }
  .btn-tertiary {
    --button-background: var(--tertiary);
  --button-color: var(--dark);
  --button-hover-color: var(--light);
  --button-hover-background: var(--secondary);
  }
  .btn-light {
    --button-background: var(--light);
  --button-color: var(--black);
  --button-hover-color: var(--dark);
  --button-hover-background: var(--white);
  }
  .btn-dark {
      --button-background: var(--dark);
  --button-color: var(--white);
  --button-hover-color: var(--light);
  --button-hover-background: var(--black);
  }
  .btn-black {
    --button-background: var(--black);
  --button-color: var(--white);
  --button-hover-color: var(--light);
  --button-hover-background: var(--dark);
  }
  .btn-white {
    --button-background: var(--white);
  --button-color: var(--black);
  --button-hover-color: var(--dark);
  --button-hover-background: var(--light);
  }
}
.slider__frame {
  position: relative;
  aspect-ratio: var(--aspect-ratio, 16/9);
  overflow: hidden;
  border-radius: 1rem;
}
.slider__frame img.background-image {
  position: relative;
  z-index: 1;
}
.slider__frame img {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.slider__frame .slider {
  position: absolute;
  top: 0;
  left: 0;
  appearance: none;
  width: 100%;
  height: 100%;
  background: rgba( 250, 250, 250, .1 );
  outline: none;
  margin: 0;
  transition: all .3s;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 3;
}
.slider__frame .slider:hover {
  background: rgba( 250, 250, 250, 0);
}
.slider__frame .slider::-webkit-slider-thumb {
  cursor: pointer;
  height: 200vh;
  width: 8px;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  -webkit-appearance: none;
  margin-left: 10px;
  z-index: 1;
}
.slider__frame .slider::-moz-range-thumb {
  width: 6px;
  height: 100%;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  cursor: pointer;
  z-index: 1;
} 

.slider__frame .slider__button {
  z-index: 4;
  pointer-events: none;
  position: absolute;
  width: 3rem;
  height: 3rem;
  background-color: var(--overlay);
  backdrop-filter: blur(3px);
  left: calc(50% - 1rem);
  top: calc(50% - 1rem);
  border-radius: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider__frame .slider__button:before,
.slider__frame .slider__button:after {
  content: '';
  padding: 6px;
  display: inline-block;
  border: solid var(--body-color);
  border-width: 0 4px 4px 0;
}
.slider__frame .slider__button:after {
  transform:rotate(-45deg);
}
.slider__frame .slider__button:before {
  transform:rotate(135deg);
}
@layer cards {
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--base-gap);
    grid-column: content;
    justify-content: center;
  } 
  .card {
    --link-color: var(--body-color);
    --link-hover-color: var(--primary);
    --link-decoration: none;
    --link-hover-decoration: none;
    position: relative;
    align-items: flex-end;
    display: grid;
    width: clamp(var(--card-width-min), var(--card-width-default), 100%);
    border-radius: 1rem;
    overflow: hidden;
  }
  .card .image {

  }
  .card .content {
    grid-column: 1;
    grid-row: 2;
    padding: 1rem;
    z-index: 2;
    text-align: center;
  }
}
@layer carousel {
  .carousel {
    list-style-type: none;
    padding-inline: var(--base-padding);
    gap: var(--base-padding);
    margin-inline: auto;
    inline-size: min(var(--max-width), 100cqi);
    display: grid; 
    grid-auto-flow: column;
    justify-items: center;
    grid-auto-columns: calc(100cqi - var(--base-padding) * 2);
    scrollbar-width: none;
    anchor-name: --carousel;
    /* size and scroll state container */
    container-type: inline-size scroll-state;

    /* scroll styles */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::scroll-button(left),
    &::scroll-button(right) {
      position-area: var(--_inner);
    }

    & > li {
      scroll-snap-align: center;
      padding: 0;
    }
    &:focus-visible {
      scrollbar-color: var(--link) transparent;
      outline: none;
    }
    @supports ( container-type: scroll-state ) {
      > * {
        container-type: scroll-state;
        @container not scroll-state(snapped: x) {
          interactivity: inert
        }
      }
    }
  }

  
  .scroll-markers {
    scroll-marker-group: after;

    &::scroll-marker-group {
      position: absolute;
      position-anchor: --carousel;

      container: marker-group / inline-size;

      display: grid;
      gap: 0.5rem;
      place-content: safe center;
      box-sizing: border-box;

      scrollbar-width: none;
      scroll-behavior: smooth;

      inline-size: 100%;
      max-inline-size: min(90cqi, 210px);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;

      padding: 5px 10px; /* space for focus and scroll */
      scroll-padding-inline: 10px;

      top: anchor(bottom);
      left: calc(anchor(left) - 10%);
      right: calc(anchor(right) - 10%);
      margin-block: 1rem;

      grid-auto-columns: 1rem;
      grid-auto-flow: column;
      justify-self: center;
    }

    > * {
      &::scroll-marker {
        content: " ";
        scroll-snap-align: center;
        aspect-ratio: 1;
        border: 2px solid var(--link-color);
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: var(--transition-default);
        animation: scale-in-and-out linear both;
        animation-timeline: view(x);
        interactivity: auto; /* todo: remove once they dont inherit none from inerted origin elements */
      }

      &::scroll-marker:target-current {
        background: var(--link-color);
        border-color: var(--link-color);
      }

      @media (forced-colors: active) {
        &::scroll-marker:target-current {
          background: Highlight;
          border-color: Highlight;
        }
      }

      &::scroll-marker:not(:active):hover {
        transform: scale(1.25);
      }

      &::scroll-marker:not(:active):focus {
        outline: 2px solid var(--link-color);
        outline-offset: 2px;
      }
    }
  }

  .scroll-buttons {
    &::scroll-button(*) {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      position: absolute;
      z-index: 1;
      position-anchor: --carousel;
      inline-size: 2rem;
      margin-inline: calc(-1 * var(--base-padding) / 2);
      line-height: 1;
      place-items: center;
      place-content: center;
      aspect-ratio: 1;
      background: var(--link-color);
      border: var(--border-width) solid var(--link-color);
      border-radius: 50%;
      mask-size: cover;
      position-area: var(--_outer);

      transition: var(--transition-default);

      @media (forced-colors: active) {
        background: Canvas;
      }
    }
    &::scroll-button(down),
    &::scroll-button(up) {
      display: none;
    }
    &::scroll-button(right) {
      --_inner: center span-inline-start;
      --_inner-under: block-end span-inline-start;
      --_inner-over: block-start span-inline-start;
      --_outer: inline-end center;
      --_outer-under: end;
      --_outer-over: block-start inline-end;
      content: "" / "Scroll Right";
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z'/%3E%3C/svg%3E")
        no-repeat 50% 50%;
    }
    &::scroll-button(left) {
      --_inner: center span-inline-end;
      --_inner-under: block-end span-inline-end;
      --_inner-over: block-start span-inline-end;
      --_outer: inline-start center;
      --_outer-under: block-end inline-start;
      --_outer-over: start;
      content: "" / "Scroll Left";
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z'/%3E%3C/svg%3E")
        no-repeat 50% 50%;
    }

    /* inner arrows when carousel is reaching full width of viewport or container */
    @container (inline-size >= calc(100cqi - 8rem - 2rem )) {
      &::scroll-button(right),
      &::scroll-button(left) {
        margin-inline: calc( -2 * var(--base-padding) );
        position-area: var(--_outer-under);
      }
    }

    &::scroll-button(*):not(:disabled):is(:hover, :focus-visible) {
      background-color: var(--body-color);
      color: var(--body-color);
      border-color: var(--body-color);
      transform: scale(1.1);
    }

    &::scroll-button(*):not(:active):focus-visible {
      outline-offset: 2px;
      outline: var(--border-width) solid var(--link-color);
    }

    &::scroll-button(right):not(:disabled):active {
      transform: translateX(5px) scale(0.95);
    }
    &::scroll-button(left):not(:disabled):active {
      transform: translateX(-5px) scale(0.95);
    }
    &::scroll-button(up):not(:disabled):active {
      transform: translateY(-5px) scale(0.95);
    }
    &::scroll-button(down):not(:disabled):active {
      transform: translateY(5px) scale(0.95);
    }

    &::scroll-button(*):disabled {
      opacity: 25%;
      cursor: not-allowed;
    }    
    @media (hover) {
      &:not(:hover, :focus-within)::scroll-button(*) {
        opacity: 0;
      }
    }
  }
  @keyframes scale-in-and-out {
    entry 0% {
      transform: scale(0.25);
    }
    entry 100% {
      transform: scale(1);
    }

    exit 0% {
      transform: scale(1);
    }
    exit 100% {
      transform: scale(0.25);
    }
  }
  @keyframes interactive-when-visible {
    0% { interactivity: auto; }
    100% { interactivity: auto; }
  }
}
@layer dialog {
  dialog {
    --section-color: var(--black);
    --section-bg: var(--white);
    color: var(--section-color);
    padding: var(--base-padding);
    background: var(--section-bg);
    border-radius: 1rem;
    border: var(--border-width) var(--light) solid;
    opacity: 0;
    width: 100%;
    transform: scale(0);
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
  }
  body:has(dialog[open]) {
    overflow: hidden;
  }
  dialog::backdrop {
    background: transparent;
    transition: var(--transition-default);
  }
  dialog[open] {
    opacity: 1;
    transform: scale(1);
  }
  dialog[open]::backdrop {
    background: var(--overlay);
    backdrop-filter: blur(1rem);
  }
  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: scale(0);
    }
    dialog[open]::backdrop {
      background: transparent;
    }
  }
  dialog .close {
    padding: .5rem;
    margin-bottom: auto;
    margin-left: auto;
  }
  dialog .close svg {
    fill: currentColor;
    height: 1.2rem;
    width: 1.2rem;
  }
  
  dialog header {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  dialog .dialog__content {
    max-width: var(--max-width);
    width: auto;
    width: -webkit-fill-available;
    margin-inline: auto;
    height: max-content;
  }
}
@layer form {
  fieldset {
    max-width: 100% !important;
    width: 100% !important;
  }
  fieldset.form-columns-2 {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(14rem, 1fr) );
    gap: 0 1rem;
  }
  fieldset.form-columns-2 > div {
    width: 100% !important;
    float: none !important;
  }

  label {
    font-family: var(--heading-font-family);
    text-transform: uppercase;
    color: var(--body-color);
    font-weight: bold;
    margin-bottom: .25rem;
  }
  .input {
    margin-right: 0 !important;
  }


  input:not([type=checkbox]):not([type=radio]):not([type=submit]), 
  select, 
  textarea {
    background: var(--formfield-background);
  }

  input[type=submit] {
    margin-top: 1rem;
  }
  
  legend {
    font-size: 1rem;
  }

  .hs-error-msgs {
    margin: 0;
  }

  .hs-input.invalid {
    --formfield-border-color: red;
  }

  .hs-input:focus-visible {
    --formfield-border-color: var(--formfield-border-focus-color);
    outline: none;
    border: var(--border-width) var(--formfield-border-color) solid;
  }

  .hs-form-required {
    color: red;
    margin-left: .25ch;
    font-size: var(--font-size-sm);
  }

  .inputs-list {
    margin-left: .75rem;
    padding: 0;
    display: block;
  }

  .inputs-list .hs-input[type=checkbox],
  .inputs-list .hs-input[type=radio] {
    margin-right: 1ch;
  }

  .inputs-list li {
    display: block;
  }

  .hs-form-radio,
  .hs-form-checkbox,
  .hs-form-booleancheckbox {
    display: block;
    min-height: 1.5rem;
  }

  .hs-form-radio label,
  .hs-form-checkbox label,
  .hs-form-booleancheckbox label {
    display: inline-block;
  }

  .hs-input[type=checkbox], 
  .hs-input[type=radio] {
    --check-bg: var(--formfield-check-background-color, --black);
    float: left;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-left: -1.5em;
    margin-top: .25em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    accent-color: var(--border-color, --primary);
    background-color: var(--check-bg);
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--border-width) solid var(--border-color, --primary);
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
    width: 1rem !important;
    transition: var(--transition-default);
  }

  .hs-input[type=checkbox] {
    border-radius: .25rem;
  }

  .hs-input[type=radio] {
    border-radius: 50%;
  }

  .hs-input[type=checkbox]:checked {
    --bg-image: var(--formfield-checkbox-image);
    --check-bg: var(--formfield-check-background-color-checked, --primary);
  }

  .hs-input[type=radio]:checked {
    --bg-image: var(--formfield-radio-image);
    --check-bg: var(--formfield-check-background-color-checked, --primary);
  }

  .hs-input[type=file] {
    overflow: hidden;
  }

  .hs-input[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
  }

  .hs-input[type=file]::file-selector-button {
    padding: .5rem .75rem;
    margin: -.375rem -.75rem;
    margin-inline-end: .75rem;
    color: var(--formfield-background);
    background: var(--gray-500);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--border-width);
    border-radius: 0;
    font-family: var(--heading-font-family);
    text-transform: uppercase;
    color: var(--body-color);
    font-weight: bold;
  }

  &:hover:not(:disabled):not([readonly])::file-selector-button {
    color: var(--formfield-color);
    background: var(--formfield-background);
  }
  .hs-input:not([type=checkbox]):not([type=radio]) {
    max-width: 100% !important;
    display: block;
    width: 100% !important;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--formfield-color);
    appearance: none;
    background-color: var(--formfield-background);
    background-clip: padding-box;
    border: var(--border-width) solid var(--formfield-border-color, --primary);
    border-radius: .5rem;
    transition: var(--transition-default);
    margin-bottom: 1rem;
  }

  .input-group .hs-input:not([type=checkbox]):not([type=radio]) {
    margin-bottom: 0;
  }

  .hs-fieldtype-select select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--formfield-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--formfield-background);
    background-image: var(--formfield-select-image);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 24px 18px;
    border: var(--border-width) solid var(--formfield-border-color, --primary);
    border-radius: 1rem;
    transition: var(--transition-default);
  }

  .hs-form-checkbox,
  .hs-form-booleancheckbox {
    margin-bottom: 1rem;
    display: block;
  }

  .hs-form-checkbox .hs-input,
  .hs-form-booleancheckbox .hs-input {
    height: 1rem;
    width: 1rem !important;
    margin: .25rem .5rem .25rem 0;
  }

  .hs-form-checkbox label,
  .hs-form-booleancheckbox label {
    width: 100%;
    display: flex;
    font-weight: normal;
  }

  .hs-fieldtype-textarea,
  .hs-fieldtype-password, 
  .hs-fieldtype-text, 
  .hs-fieldtype-select, 
  .hs-fieldtype-phonenumber, 
  .hs-fieldtype-number {
    display: grid;
    grid-template-rows: 2fr max-content max-content;
    grid-template-columns: 1fr;
  }
  .hs-fieldtype-textarea legend,
  .hs-fieldtype-password legend, 
  .hs-fieldtype-text legend, 
  .hs-fieldtype-select legend, 
  .hs-fieldtype-phonenumber legend, 
  .hs-fieldtype-number legend {
    grid-row: 2;
  }

  .hs-fieldtype-textarea textarea,
  .hs-fieldtype-password input, 
  .hs-fieldtype-text input, 
  .hs-fieldtype-phonenumber input, 
  .hs-fieldtype-number input, 
  .hs-fieldtype-select select {
    padding: 1.5rem 0.75rem 0.75rem !important;
  }
  .hs-fieldtype-textarea label:not(.hs-error-msg),
  .hs-fieldtype-password label:not(.hs-error-msg), 
  .hs-fieldtype-text label:not(.hs-error-msg), 
  .hs-fieldtype-select label:not(.hs-error-msg), 
  .hs-fieldtype-phonenumber label:not(.hs-error-msg), 
  .hs-fieldtype-number label:not(.hs-error-msg) {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    padding: 0.25rem 0.75rem;
    color: var(--formfield-color);
    transition: var(--transition-default);
    pointer-events: none;
  }
  .hs-fieldtype-textarea .hs-error-msgs,
  .hs-fieldtype-password .hs-error-msgs, 
  .hs-fieldtype-text .hs-error-msgs, 
  .hs-fieldtype-select .hs-error-msgs, 
  .hs-fieldtype-phonenumber .hs-error-msgs, 
  .hs-fieldtype-number .hs-error-msgs {
    grid-row: 3;
  }
  .hs-fieldtype-textarea .input,
  .hs-fieldtype-password .input, 
  .hs-fieldtype-text .input, 
  .hs-fieldtype-select .input, 
  .hs-fieldtype-phonenumber .input, 
  .hs-fieldtype-number .input {
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
  }

  .hs-fieldtype-textarea:not(:has(textarea:empty)) label:not(.hs-error-msgs),
  .hs-fieldtype-password:not(:has(:placeholder-shown)) label:not(.hs-error-msgs),
  .hs-fieldtype-text:not(:has([value=""])) label:not(.hs-error-msgs),
  .hs-fieldtype-select:not(:has([value=""])) label:not(.hs-error-msgs),
  .hs-fieldtype-phonenumber:not(:has([value=""])) label:not(.hs-error-msgs),
  .hs-fieldtype-number:not(:has([value=""])) label:not(.hs-error-msgs),
  .hs-fieldtype-textarea:has(textarea:focus) label:not(.hs-error-msgs),
  .hs-fieldtype-password:has(input:focus) label:not(.hs-error-msgs),
  .hs-fieldtype-text:has(input:focus) label:not(.hs-error-msgs),
  .hs-fieldtype-select:has(select) label:not(.hs-error-msgs),
  .hs-fieldtype-phonenumber:has(input:focus) label:not(.hs-error-msgs),
  .hs-fieldtype-number:has(input:focus) label:not(.hs-error-msgs) {
    font-size: var(--font-size-sm);
    margin-top: 0rem;
  } 

  .hs-fieldtype-textarea textarea {
    min-height: 6rem;
  }
  .input-group {
    display: grid;
    grid-template-columns: 1fr max-content;
    margin-bottom: 1rem;
  }
  .input-group input[type="submit"],
  .input-group button {
    margin: 0;
  }
}
@layer filters {
  .filters {
    grid-column: one-two-start / one-two-end;
  }
  .search button,
  .filters button {
    margin: 0;
  }
  .search button svg,
  .filters button svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
  }
  [id*="filterlist-"] li.filtered {
    display: none !important;
    transform: scaleX(0);
    transition-delay: 0s;
  }

  [id*="filterlist-"] li {
    transition: var(--transition-default);
    transition-behavior: allow-discrete; 
    transition-delay: var(--transition-time); 
    @starting-style {
      transform: scaleX(0);
    }
  }
}
@layer pagination {

.pagination__module {
    text-align: center;
    --border-radius: .5rem;
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--base-padding);
      justify-content: center;
      padding: 0;
      margin:0;
    }
    li {
      display: block;
      margin: 0;
      padding: 0;
      a {
        display: flex !important;
        align-items: center;
        border-radius: var(--border-radius);
      }
      svg {
        margin: .25rem;
        width: 1rem;
        height: 1rem;
        fill: currentColor;
      }
    }
  }
  .pagination {
    --pagination-padding-x: 0.75rem;
    --pagination-padding-y: 0.375rem;
    --pagination-font-size: 1rem;
    --pagination-color: var(--link-color);
    --pagination-bg: var(--body-bg);
    --pagination-border-width: var(--border-width);
    --pagination-border-color: var(--border-color);
    --pagination-border-radius: var(--border-radius);
    --pagination-hover-color: var(--link-hover-color);
    --pagination-hover-bg: var(--primary);
    --pagination-hover-border-color: var(--border-color);
    --pagination-focus-color: var(--tertiary);
    --pagination-focus-bg: var(--primary);
    --pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --pagination-active-color: var(--pagination-hover-color);
    --pagination-active-bg: var(--pagination-hover-bg);
    --pagination-active-border-color: var(--border-color);
    --pagination-disabled-color: var(--primary);
    --pagination-disabled-bg: transparent;
    --pagination-disabled-border-color: transparent;
    display: flex;
    padding-left: 0;
    list-style: none;
  }

  .page-link {
    position: relative;
    display: block;
    padding: var(--pagination-padding-y) var(--pagination-padding-x);
    font-size: var(--pagination-font-size);
    color: var(--pagination-color);
    text-decoration: none;
    background-color: var(--pagination-bg);
    border: var(--pagination-border-width) solid var(--pagination-border-color);
    transition: var(--transition-default);
  }

  .page-link:hover {
    z-index: 2;
    color: var(--pagination-hover-color);
    background-color: var(--pagination-hover-bg);
    border-color: var(--pagination-hover-border-color);
  }
  .page-link:focus {
    z-index: 3;
    color: var(--pagination-focus-color);
    background-color: var(--pagination-focus-bg);
    outline: 0;
    box-shadow: var(--pagination-focus-box-shadow);
  }
  .page-link.active, .active > .page-link {
    z-index: 3;
    color: var(--pagination-active-color);
    background-color: var(--pagination-active-bg);
    border-color: var(--pagination-active-border-color);
  }
  .page-link.disabled, .disabled > .page-link {
    color: var(--pagination-disabled-color);
    pointer-events: none;
    background-color: var(--pagination-disabled-bg);
    border-color: var(--pagination-disabled-border-color);
  }

  .page-item:not(:first-child) .page-link {
    margin-left: calc(-1 * var(--border-width));
  }
  .page-item:first-child .page-link {
    border-top-left-radius: var(--pagination-border-radius);
    border-bottom-left-radius: var(--pagination-border-radius);
  }
  .page-item:last-child .page-link {
    border-top-right-radius: var(--pagination-border-radius);
    border-bottom-right-radius: var(--pagination-border-radius);
  }
}
.pagination--wrapper {
  padding-block: 2rem;
  grid-column: content;
}
@layer details {
  summary {
    border: 2px solid var(--secondary);
    background: var(--white);
    color: var(--black);
    border-radius: 2rem;
    padding: .5rem 1rem;
    font-family: var(--heading-font-family);
    font-weight: bold;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  summary::marker {
    content: '';
  }
  summary::after {
    width: 2rem;
    height: 2rem;
    line-height: 1rem;
    padding: .5rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' d='M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z'/%3E%3C/svg%3E");
    background-color: var(--primary);
    border-radius: 50%;
    display: block;
    transition: var(--transition-default);
  }
  details {
    border-radius: 1.5rem;
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
    color: var(--text-color);
    margin-top: 1rem;
  }

  details::details-content {
    padding-inline: var(--base-padding);
    padding-block: 0;
    height: 0;
    overflow: clip;
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
  }

  details[open]::details-content {
    margin-block: 1rem;
    height: auto;
  }
  details[open] summary {
    border-color: var(--tertiary);
  }
  details[open] summary::after {
    transform: rotate(45deg);
  }
}
@layer table {
  .table {
    width: 100%;
  }
  .table >:not(caption) th {
    font-family: var(--heading-font-family, sans-serif);
    font-style: var(--heading-font-style, normal);
    font-weight: var(--heading-font-weight, 700);
  }
  .table > :not(caption) > * > * {
    padding: 0.25rem;
    color: var(--section-text-color, var(--body-color));
    background-color: var(--section-background-color, var(--body-bg));
    border-bottom-width: var(--table-border-width);
    border-color: var(--table-border-color);
  }
  .table > tbody {
    vertical-align: inherit;
  }
  .table > tbody tr:last-child > * {
    border-bottom: none;
  }
  .table > thead {
    vertical-align: bottom;
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    border: var(--border-width) var(--border-color) solid;
    border-radius: 1rem;
  }
}
@layer a11y {
  a.fullscreen,
  button.pause {
    --link-color: var(--black);
    --link-hover-color: var(--primary);
    backdrop-filter: blur(3px);
    background: var(--overlay);
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    fill: currentColor;
    grid-row: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    color: var(--link-color);
    display: grid;
    align-items: center;
    justify-content: center;
  }
  a.fullscreen {
    right: 5rem;
  }
  button.pause:hover,
  button.pause:focus,
  a.fullscreen:hover,
  a.fullscreen:focus {
    color: var(--link-hover-color);
    background: var(--white);
    background: rgb(from var(--white) r g b / 80%);
    backdrop-filter: blur(3px);
  }
  button.pause svg,
  a.fullscreen svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}
body {
  --header-height: 8rem;
}
body.scrolled {
  --header-height: 3rem;
}
@media (max-width: 760px) {
  body {
    --header-height: 8rem;
  }
  body.scrolled {
    --header-height: 3rem;
  }
}

.site__header {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr max-content;
  grid-template-rows: 4rem 4rem;
  grid-template-areas: "logo contact" "logo menu";
  gap: 0 1rem;
  margin: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  position: fixed;
  z-index: 1050;
  top: 0;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: var(--transition-default);
  background: var(--overlay);
  backdrop-filter: blur(3px);
}
.navigation, .contact {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.navigation {
  grid-area: menu;
  justify-content: flex-end;
}
.contact {
  grid-area: contact;
}
.site__header .menu-toggle {
  padding: 0;
  --link-color: var(--black);
}
.site__header .menu-toggle:hover {
  --link-color: var(--primary);
}
.site__header .menu-toggle svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}
.site__header .brand {
  grid-area: logo;
  display: flex;
}
.site__header .brand svg {
  height: 4rem;
}
.site__header .brand .logo  {
  aspect-ratio: 262 / 48;
}

.site__header .brand .logo_alt {
  display: none;
  aspect-ratio: 1;
}
.site__header .quicknav {
  grid-area: quicknav;
  overflow: clip;
}
.site__header .quicknav a {
  --link-decoration: none;
  --link-hover-decoration: none;
  --link-color: var(--black);
  --link-hover-color: var(--primary);
}
.site__header .quicknav a:hover {
  transform: scale(.9);
}
.site__header .quicknav ul {
  gap: 1rem;
  transform: translateX(0%);
  transition: var(--transition-default);
  transition-behavior: allow-discrete;
  @starting-style {
    transform: translateX(100%);
  }
}
.site__header .contact .phone {
  grid-area: phone;
  margin-left: auto;
}
.site__header .phone svg {
  margin-right: .5ch;
  width: 1.2rem;
  aspect-ratio: .8;
  fill: var(--black);
  display: none;
}
.site__header .phone a {
  --link-color: var(--black);
  --link-hover-color: var(--primary);
  --link-decoration: none;
  --link-hover-decoration: none;
  display: flex;
  align-items: center;
}
.site__header .contact .cta {
  grid-area: cta;
}
.mainnav {
  grid-area: fullnav;
}
.scrolled .site__header {
  grid-template-columns: 3rem max-content max-content;
  grid-template-rows: 3rem;
  grid-template-areas: "logo contact menu";
  width: auto;
  margin-left: auto;
  right: 1rem;
  left: unset;
  border-radius: 5rem;
  margin-top: 1rem;
  transform: none;
}
body.nav-open.scrolled .site__header {
  width: 100%;
  margin-top: 0;
}
.scrolled .site__header .brand .logo {
  display: none;
}
.scrolled .site__header .brand .logo_alt {
  display: block;
}
.scrolled .site__header .brand svg {
  height: 2rem;
}
.scrolled .site__header .quicknav {
  display: none;
}

@media (max-width: 760px) {
  .site__header {
    grid-template-columns: max-content max-content;
    grid-template-rows: 4rem 4rem;
    grid-template-areas: "logo logo" "contact menu";
    justify-content: space-between;
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
  }
  .site__header .brand {
    margin: auto;
  }
  .site__header .quicknav {
    display: none;
  } 
  .site__header .contact .phone {
    margin-left: .5rem;
  }
  .site__header .contact .phone svg {
    display: block;
    fill: currentColor;
  }
  .scrolled .site__header {
    grid-template-rows: 0rem var(--header-height);
    grid-template-columns: max-content max-content;
    grid-template-areas: "contact menu" "contact menu";
    left: 50%;
    transform: translateX(-50%);
    right: unset;
  }
  .scrolled .site__header .brand {
    display: none;
  }
}
@media (max-width: 450px) {
  .site__header .phone svg { display: block; }
  .site__header .phone .phone-number { display: none;}
}

#contact-form {
  scroll-padding-top: var(--header-height);
}
@layer menus {
  nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  nav li {
    margin: 0;
    padding: 0;
    display: block;
  }
  nav li ul {
    flex-direction: column;
  }
  nav a {
    display: block;
  }
}
@layer mainmenu {
  .main-menu {
    overflow-y: auto;
    position: relative;
    border-radius: 1rem;
    overflow: clip;
    grid-column: 2 / 3;
  }
  .main-menu ul {
    background: var(--overlay);
    backdrop-filter: blur(3px);
    border-radius: 1rem;
    height: 100vh;
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: clip;
    padding-bottom: 3rem !important;
  }
  .main-menu .phone {
    text-align: center;
    font-family: var(--mobile--title--font);
    font-size: var(--mobile--title--font-size);
    font-weight: var(--mobile--title--font-weight);    
    text-transform: uppercase;
    padding: .75rem;
    border-bottom: none;
  }
  .main-menu .cta {
    border-bottom: none;
    margin-inline: auto;
    margin-top: 1rem;
  }
  .main-menu .phone a {
    justify-content: center;
  }
  .main-menu ul.sub-nav {
    display: none;
  }
  .main-menu ul.expanded {
    display: flex;
    flex-direction: column;
  }
  .main-menu ul.nav {
    --navbar-background: var(--mobile--background);
    --navbar-color: var(--mobile--color);
    --navbar-border-color: var(--mobile--border-color);
    --navbar-button-background: var(--mobile--button--background);
    --navbar-button-color: var(--mobile--button--color);
    --navbar-button-border-color: var(--mobile--button--border-color);
    margin: 0;
    padding: 0;
    flex-direction: column;
  }
  .main-menu button[disabled]{
    opacity: 0;
    pointer-events: none;
  }
  .main-menu svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
  }
  .main-menu .sub-heading, .nav-heading {
    --navbar-color: var(--mobile--title--color);
    --navbar-background: var(--mobile--title--background);
    color: var(--navbar-color);
    background: var(--navbar-background);
    font-family: var(--mobile--title--font);
    font-size: var(--mobile--title--font-size);
    font-weight: var(--mobile--title--font-weight);    
    text-transform: uppercase;
    text-align: center;
  }
  .main-menu .nav-heading {
    padding-left: 1rem;
  }
  .main-menu button {
    background: var(--navbar-button-background);
    color: var(--navbar-button-color);
    border: none;
    width: 3rem;
    border-left: 1px solid var(--navbar-button-border-color);
    padding: .75rem;
  }
  .main-menu button:hover {
    --navbar-button-background: var(--mobile--button--background--hover);
    --navbar-button-color: var(--mobile--button--color--hover);
    --navbar-button-border-color: var(--mobile--button--border-color--hover);
  }
  .main-menu button.back-toggle {
    border-left: none;
    border-right: 1px solid var(--navbar-button-border-color);
  }
  .main-menu .sub-nav {
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
    background: var(--gray-800);
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100vh;
    left: 0;
    transform: translateX(-100%);
    width: var(--mobile--nav-width);
    z-index: 999;
  }
  .main-menu .sub-nav.expanded {
    transition-delay: var(--transition-time);
    background: var(--navbar-background);
    transform: translateX(0);
    @starting-style {
      transform: translateX(-100%);
    }
  }
  .main-menu li {
    border-bottom: 1px solid var(--navbar-border-color);
  }
  .main-menu li a:not(.btn) {
    display: block;
    font-family: var(--mobile--font-family);
    font-weight: var(--mobile--font-weight);
  }
  .main-menu li a:not(.btn) {
    color: var(--navbar-color);
    background-color: var(--navbar-background);
    padding: .75rem 1rem;
    text-decoration: none; 
    width: 100%;
    border-bottom: none;
  }
  .main-menu .sub-heading-title {
    margin: auto;
  }
  .main-menu li a:not(.btn):hover, 
  a:not(.btn):focus {
    --navbar-color: var(--mobile--color--hover);
    --navbar-background: var(--mobile--background--hover);
  }
  .main-menu li.has-dropdown, 
  .main-menu li.sub-heading, 
  .main-menu li.nav-heading {
    display: grid;
    justify-content: space-between;
    align-items: stretch;
    grid-template-columns: 1fr 3rem;
  }
  .main-menu li.sub-heading, 
  .main-menu li.nav-heading {
    grid-template-columns: 3rem 1fr 3rem;
  }
  .main-menu .subnav-open .nav-toggle {
    display: none;
  }
  .main-menu button, 
  .main-menu a {
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
  }
  .main-menu .subnav-open > li,
  .main-menu .subnav-open > li.dropdown-open > button,
  .main-menu .subnav-open > li.dropdown-open > a {
    display: none;
    transform: translateX(-100%);
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
  }
  .main-menu .subnav-open > li.dropdown-open {
    display: flex;
    transform: translateX(0);
    transition-delay: var(--transition-time);
    border:none;
  }
}
@layer menuscreen {
  body.nav-open {
    overflow-y: clip;
  }

  .screen {
    flex-wrap: wrap;
    display: none;
    transform: rotateX(90deg);
    transform-origin: top;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100dvh;
    transition: var(--transition-default);
    transition-behavior: allow-discrete;
    padding: 1rem;
    gap: 2rem;
    grid-template-columns: 1fr var(--card-width-min);
    background-size: cover;
    container-type: inline-size;
    overflow: hidden;
  }
  .screen.expanded {
    display: grid;
    opacity: 1;
    transform: rotateX(0deg);
    @starting-style {
      transform: rotateX(90deg);
    }
  }
  .screen .logo {
    grid-column: 1 / 2;
    grid-row: 1;
    margin: auto;
  }
  @media (max-width: 30rem ) {
    .screen .logo {
      display: none;
    }
  }

}
@layer footer {
  .footer__cta {
    padding-block: 8rem;
    padding-inline: 1rem;
    background-image: linear-gradient(var(--secondary), var(--dark));
    --body-color: var(--white);
    --link-color: var(--white);
    --link-hover-color: var(--primary);
    --link-decoration: none;
  }
  .footer__cta .phone {
    margin: 1rem;
  }
  .footer__cta .phone svg {
    display: none;
  }
  .footer__cta .wrapper {
    grid-column: page;
    text-align: center;
    animation-timeline: view();
    animation-name: appear;
    animation-range: entry-crossing 0% entry 200%;
    animation-fill-mode: both;
    animation-duration: 1ms; /* Firefox requires this to apply the animation */
  }
  @keyframes appear {
    from {
      opacity: 0;
      transform: scale(0);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .site__footer {
    --body-color: var(--white);
    --link-color: var(--white);
    --link-hover-color: var(--primary);
    --link-decoration: none;
    background: var(--dark);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    margin-top: -1px;
    gap: 2rem;
  }
  .site__footer svg {
    fill: currentColor
  }
  
  .site__footer address {
    margin-top: 1rem;
    color: var(--body-color);
  }

  
  .site__footer a:hover,
  .site__footer a:focus {
    transform: scale(.9);
  }
  .site__footer .logo svg {
    aspect-ratio: 267 / 65;
    width: 100%;
    max-width: var(--card-width);
  }
  
  .site__footer .social ul {
    gap: 2rem;
  }
  
  .site__footer .social svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .site__footer .social a:hover {
  
  }
  .site__footer .footer-nav ul {
    margin-top: 1rem;
    gap: 1rem;
  }
  .site__footer .copyright {
    margin-top: 6rem;
    text-align: center;
    width: 100%;
    color: var(--body-color);
  }
}

@layer reboot {
  #icons {
    height: 0;
    width: 0;
    position: absolute;
    visibility: hidden
  }
}
@layer blogposts {
  .post {
    aspect-ratio: var(--aspect-ratio);
    grid-template-rows: 1fr 1fr;
  }
  .post .content {
    grid-row 2 / 3;
    grid-column: 1;
    background: var(--overlay);
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    display: grid;
    text-align: left;
  }

  .post .content h3 {
    font-size: var(--font-size-6);
    grid-column: 1 / 3;
    grid-row: 2
  }

  .post .meta {
    display: contents;
  }

  .post .meta .author {
    grid-row: 1;
    grid-column:1 / 3;
    margin-top: auto;
    display: grid;
    margin-bottom: .5rem;
  }

  .post .meta .author .portrait {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    background: var(--white);
    margin-right: .25rem;
    display: block;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px var(--secondary);
    grid-row: 1;
    margin: -2.5rem auto 1rem;
  }

  .post .meta .author img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .post .meta .date {
    grid-row: 3 ;
    grid-column: 1 / 2;
  }

  .post .meta .read-time {
    grid-row: 3;
    grid-column: 2 / 3;
    text-align: right;
    margin-top: auto;
  }

  .post .image {
    grid-row: 1 / 3;
    grid-column: 1;
    height: 100%;
  }

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